/* ==========================================================================
   Temáticas visuales (app/helpers/themes.php · panel → Temáticas)
   Solo se carga con una temática activa, y todo está bajo html[data-theme]: sin temática no aplica nada.
   Colores: --theme-accent, --theme-accent-2 y --theme-on-accent (texto legible sobre el acento), validados en PHP.
   Las decoraciones no reciben clics (pointer-events:none), no las leen los lectores de pantalla (aria-hidden)
   y nunca se ponen sobre formularios, simuladores, tablas ni cifras.
   ========================================================================== */

/* ---------- Aviso de campaña (bajo la cabecera) ---------- */
html[data-theme] .theme-notice{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 12px;padding:9px 16px;background:var(--theme-accent);color:var(--theme-on-accent);font-size:.95rem;font-weight:500;text-align:center;line-height:1.4}
html[data-theme] .theme-notice-icon{width:20px;height:20px;flex:none;opacity:.9}
html[data-theme] .theme-notice-btn{display:inline-flex;align-items:center;gap:6px;padding:4px 14px;border:1.5px solid currentColor;border-radius:999px;color:inherit;font-family:var(--font-display);font-weight:600;font-size:.85rem;text-decoration:none;transition:background-color .2s,color .2s}
html[data-theme] .theme-notice-btn:hover{background:var(--theme-on-accent);color:var(--theme-accent)}
html[data-theme] .theme-notice-btn:focus-visible{outline:3px solid var(--theme-on-accent);outline-offset:2px}

/* ---------- Cinta de color al pie de la cabecera ---------- */
html[data-theme-el~="cinta"] .site-header::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:4px;pointer-events:none;background:repeating-linear-gradient(90deg,var(--theme-accent) 0 28px,var(--theme-accent-2) 28px 56px)}
html[data-motif="carnaval"][data-theme-el~="cinta"] .site-header::after{background:repeating-linear-gradient(90deg,var(--theme-accent) 0 20px,var(--theme-accent-2) 20px 40px,var(--red) 40px 60px,#2FA36B 60px 80px)}
html[data-motif="aniversario"][data-theme-el~="cinta"] .site-header::after{background:linear-gradient(90deg,var(--red),var(--theme-accent) 30%,#F3D98B 50%,var(--theme-accent) 70%,var(--red))}

/* ---------- Decoraciones de los banners (carrusel y cabeceras de sección) ---------- */
html[data-theme] .theme-deco{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
/* Halo de color en la esquina superior derecha: ata la foto o el arte del banner a la temática */
html[data-theme] .theme-corner::before{content:"";position:absolute;right:-12%;top:-30%;width:min(62%,760px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--theme-accent) 42%,transparent) 0%,color-mix(in srgb,var(--theme-accent-2) 18%,transparent) 42%,transparent 70%)}
/* Sello de temporada: hexágono de la marca con el símbolo de la temática */
html[data-theme] .theme-seal{position:absolute;right:5%;top:9%;width:clamp(56px,7.5vw,108px);aspect-ratio:1;filter:drop-shadow(0 10px 22px rgba(0,0,0,.25));animation:theme-float 7s ease-in-out infinite alternate;--r:0deg}
html[data-theme] .theme-seal>svg{position:absolute;inset:0;width:100%;height:100%}
html[data-theme] .theme-seal-hex{fill:var(--theme-accent);stroke:#fff;stroke-width:3;stroke-linejoin:round}
html[data-theme] .theme-seal-sym{position:absolute;inset:27%;width:46%;height:46%;color:var(--theme-on-accent)}
html[data-theme] .theme-sym{position:absolute;width:var(--s);height:var(--s);transform:rotate(var(--r));filter:drop-shadow(0 0 1.5px rgba(255,255,255,.95)) drop-shadow(0 6px 12px rgba(0,0,0,.22));animation:theme-float 7s ease-in-out calc(var(--n) * -1.3s) infinite alternate}
html[data-theme] .theme-sym svg{display:block;width:100%;height:100%}
html[data-theme] .theme-sym.is-a{color:var(--theme-accent)}
html[data-theme] .theme-sym.is-b{color:var(--theme-accent-2)}
html[data-theme] .theme-sym.is-w{color:#fff}
@keyframes theme-float{from{transform:rotate(var(--r)) translateY(0)}to{transform:rotate(calc(var(--r) + 6deg)) translateY(-8px)}}
/* En el carrusel del inicio los controles van abajo a la derecha: las decoraciones se quedan arriba */
html[data-theme] .hero-slider .theme-corner{bottom:22%}
/* Celulares: el texto ocupa todo el ancho, así que solo el sello y el halo, pegados a la esquina superior */
@media (max-width:760px){
    html[data-theme] .theme-sym{display:none}
    html[data-theme] .theme-seal{right:14px;top:14px}
    html[data-theme] .theme-corner::before{width:85%;right:-30%;top:-28%}
    html[data-theme] .theme-particles i:nth-child(2n){display:none}
}

/* ---------- Partículas (solo dentro de los banners) ---------- */
html[data-theme] .theme-particles i{position:absolute;top:-24px;left:var(--x);width:var(--z);height:var(--z);color:#fff;opacity:.75;animation:theme-fall var(--d) linear var(--t) infinite}
html[data-theme] .theme-particles i svg{display:block;width:100%;height:100%}
html[data-theme] .theme-particles.is-dot i{border-radius:50%;background:#fff;opacity:.8}
html[data-theme] .theme-particles.is-confetti i{width:calc(var(--z) * .7);height:calc(var(--z) * 1.2);border-radius:2px;background:var(--theme-accent);opacity:.9}
html[data-theme] .theme-particles.is-confetti i:nth-child(3n+1){background:var(--theme-accent-2)}
html[data-theme] .theme-particles.is-confetti i:nth-child(3n+2){background:#fff}
html[data-theme] .theme-particles:is(.is-sparkle,.is-feather,.is-bat) i{width:calc(var(--z) * 2);height:calc(var(--z) * 2)}
html[data-theme] .theme-particles.is-bat i{color:#2a1d36;opacity:.55}
@keyframes theme-fall{0%{transform:translate3d(0,0,0) rotate(0)}100%{transform:translate3d(calc((var(--k) - 1) * 40px),110cqh,0) rotate(220deg)}}
html[data-theme] .theme-particles{container-type:size}
html[data-theme] .theme-particles.is-bat i{animation-name:theme-flutter}
@keyframes theme-flutter{0%{transform:translate3d(0,40cqh,0) scale(.8)}50%{transform:translate3d(calc((var(--k) - 1) * 60px),20cqh,0) scale(1)}100%{transform:translate3d(calc((var(--k) - 1) * 120px),-10cqh,0) scale(.8)}}

/* ---------- Franja del pie ---------- */
html[data-theme] .theme-footer-strip{position:relative;display:flex;justify-content:space-between;gap:12px;padding:0 clamp(16px,4vw,48px) 28px;margin-top:-26px;opacity:.5;overflow:hidden}
html[data-theme] .theme-footer-strip svg{flex:none;width:20px;height:20px}
html[data-theme] .theme-footer-strip .is-a{color:var(--theme-accent)}
html[data-theme] .theme-footer-strip .is-b{color:var(--theme-accent-2)}

/* ---------- Textura de fondo (secciones grises) ---------- */
html[data-theme-el~="fondo"] .section-alt{background-image:radial-gradient(color-mix(in srgb,var(--theme-accent) 22%,transparent) 1.2px,transparent 1.8px);background-size:24px 24px}

/* ==========================================================================
   Transformación fuerte (elementos escena, cabecera, botones, secciones, tarjetas y pie)
   --theme-deep / --theme-deep-2: versiones oscuras de los acentos que se leen sobre blanco (≥ 4,5:1, calculadas en PHP).
   ========================================================================== */

/* ---------- Escena ilustrada: guirnalda arriba y silueta en la base del banner ---------- */
html[data-theme] .theme-scene{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
html[data-theme] .theme-garland{position:absolute;top:0;left:0;width:100%;height:min(10.8vw,150px);filter:drop-shadow(0 6px 8px rgba(0,0,0,.18));transform-origin:50% 0;animation:theme-sway 6s ease-in-out infinite alternate}
html[data-theme] .theme-ground{position:absolute;left:0;bottom:-1px;width:100%;height:max(54px,min(14.2vw,190px))}
html[data-theme] .page-hero .theme-ground{height:max(40px,min(10vw,130px))}
/* El texto de la cabecera se apoya sobre la silueta, nunca debajo de ella; arriba, espacio para la guirnalda */
html[data-theme-el~="escena"] .page-hero .ph-inner{padding-top:calc(clamp(18px,3vw,36px) + min(10.8vw,150px));padding-bottom:calc(clamp(26px,3.5vw,44px) + max(40px,min(10vw,130px)))}
@keyframes theme-sway{from{transform:rotate(-.35deg)}to{transform:rotate(.35deg)}}
/* Colores de las piezas (clases ts-* de app/helpers/theme-scenes.php) */
html[data-theme] .ts-a{fill:var(--theme-accent)}
html[data-theme] .ts-b{fill:var(--theme-accent-2)}
html[data-theme] .ts-d{fill:var(--theme-deep)}
html[data-theme] .ts-w{fill:#fff}
html[data-theme] .ts-k{fill:#211f1f}
html[data-theme] .ts-g{fill:#E2B33C}
html[data-theme] .ts-r{fill:var(--red)}
html[data-theme] .ts-c{fill:#2FA37A}
html[data-theme] .ts-stem{fill:#3d6b2c}
html[data-theme] .ts-gd{fill:none;stroke:#B48618;stroke-width:2}
html[data-theme] .ts-ad{fill:none;stroke:rgba(0,0,0,.22);stroke-width:2}
html[data-theme] .ts-line{fill:none;stroke:var(--theme-deep);stroke-width:2.5}
html[data-theme] .ts-line.is-thin{stroke-width:1.5}
html[data-theme] .ts-fir{fill:none;stroke:var(--theme-deep);stroke-width:11;stroke-linecap:round}
html[data-theme] .ts-fir.is-tips{stroke:var(--theme-accent);stroke-width:7;stroke-dasharray:2 5}
html[data-theme] .ts-w.is-shine{opacity:.55}
html[data-theme] .ts-w.is-line{fill:rgba(255,255,255,.18);stroke:#fff;stroke-width:3}
html[data-theme] .is-far{opacity:.5}
/* Con escena, el halo del banner baja un poco para no chocar con la guirnalda */
html[data-theme-el~="escena"] .theme-seal{top:calc(min(10.8vw,150px) + 14px)}

/* ---------- Cabecera de temporada ---------- */
html[data-theme-el~="cabecera"] .topbar{background:linear-gradient(90deg,var(--theme-deep),color-mix(in srgb,var(--theme-deep) 62%,#000))}
html[data-theme-el~="cabecera"] .site-header{background:linear-gradient(180deg,#fff 55%,color-mix(in srgb,var(--theme-accent) 9%,#fff))}
html[data-theme-el~="cabecera"] .nav-menu>a::after,html[data-theme-el~="cabecera"] .nav-dropdown-toggle::after{background:linear-gradient(90deg,var(--theme-accent),var(--theme-accent-2))}
html[data-theme-el~="cabecera"] :is(.nav-menu>a:hover,.nav-dropdown-toggle:hover,.nav-dropdown:hover>.nav-dropdown-toggle,.nav-menu>a.active,.nav-dropdown.current>.nav-dropdown-toggle){color:var(--theme-deep)}

/* ---------- Botones y acentos ---------- */
html[data-theme-el~="botones"] .btn-primary{background:var(--theme-accent);color:var(--theme-on-accent)}
html[data-theme-el~="botones"] .btn-primary:hover{background:var(--theme-deep);color:#fff}
html[data-theme-el~="botones"] .text-link:not(.rail-more .text-link,.news-card.is-featured .text-link,.consent-embed .text-link){color:var(--theme-deep)}
html[data-theme-el~="botones"] .hero-dot i{background:var(--theme-accent)}
html[data-theme-el~="botones"] .hero-slider:has(.hero-slide.is-active.has-photo) .hero-btn:hover{background:var(--theme-accent);border-color:var(--theme-accent);color:var(--theme-on-accent)}

/* ---------- Secciones de temporada ---------- */
html[data-theme-el~="secciones"] .section-alt{background-color:color-mix(in srgb,var(--theme-accent) 9%,#fff);background-image:radial-gradient(color-mix(in srgb,var(--theme-accent) 26%,transparent) 1.3px,transparent 1.9px);background-size:26px 26px}
html[data-theme-el~="secciones"] .section-heading h2::after{content:"";display:block;width:72px;height:6px;margin-top:14px;border-radius:3px;background:linear-gradient(90deg,var(--theme-accent) 0 55%,var(--theme-accent-2) 55%)}
html[data-theme-el~="secciones"] .section-heading.center h2::after,html[data-theme-el~="secciones"] .section-heading[style*="center"] h2::after{margin-inline:auto}

/* ---------- Tarjetas de temporada ---------- */
html[data-theme-el~="tarjetas"] .hub-card .badge-hex,html[data-theme-el~="tarjetas"] .rail-item .rail-head .hexicon{background:var(--theme-accent);color:var(--theme-on-accent)}
html[data-theme-el~="tarjetas"] :is(.hub-card,.news-card,.agency-card){position:relative}
html[data-theme-el~="tarjetas"] :is(.hub-card,.news-card,.agency-card)::before{content:"";position:absolute;left:16px;top:14px;z-index:3;width:30px;height:30px;background:linear-gradient(135deg,var(--theme-accent),var(--theme-accent-2));-webkit-mask:var(--theme-sym) center/contain no-repeat;mask:var(--theme-sym) center/contain no-repeat;filter:drop-shadow(0 0 2px #fff) drop-shadow(0 2px 4px rgba(0,0,0,.35));pointer-events:none;transition:transform .4s var(--ease)}
html[data-theme-el~="tarjetas"] :is(.hub-card,.news-card,.agency-card):hover::before{transform:rotate(-12deg) scale(1.12)}
html[data-theme-el~="tarjetas"] :is(.hub-card,.news-card,.agency-card):hover{box-shadow:0 18px 40px -18px color-mix(in srgb,var(--theme-accent) 70%,transparent)}

/* ---------- Pie de temporada: color de la temática y la silueta de la escena como horizonte ---------- */
html[data-theme-el~="pie"] .site-footer{padding-top:clamp(120px,13vw,200px);background:linear-gradient(180deg,color-mix(in srgb,var(--theme-deep) 78%,#000) 0,color-mix(in srgb,var(--theme-deep) 40%,#211f1f) clamp(70px,9vw,130px),#211f1f clamp(70px,9vw,130px))}
html[data-theme-el~="pie"] .theme-footer-scene{position:absolute;left:0;right:0;top:0;height:clamp(70px,9vw,130px);pointer-events:none}
html[data-theme-el~="pie"] .theme-footer-scene .theme-ground{height:100%}
/* En el pie, la capa delantera de la silueta se funde con el fondo del pie: parece que el pie es el suelo */
html[data-theme-el~="pie"] .theme-footer-scene .ts-base{fill:#211f1f}
html[data-theme-el~="pie"] .theme-footer-strip{margin-top:0}


/* ---------- Movimiento reducido: decoraciones quietas y sin partículas ---------- */
@media (prefers-reduced-motion:reduce){
    html[data-theme] .theme-sym{animation:none}
    html[data-theme] .theme-particles{display:none}
    html[data-theme] .theme-garland{animation:none}
}