/* =====================================================================
   DEMMA Solutions — Temporadas del diseno Nexo
   Cada temporada cambia colores, agrega un saludo y una decoracion en la
   portada. La estructura, los textos y la red animada son los de Nexo.
   Se activa con <html data-diseno="nexo" data-tema="...">.
   Respeta «reducir movimiento»: todo queda quieto, nada desaparece.
   ===================================================================== */

/* ---------- capas de decoracion (siempre detras del contenido) ---------- */
.temporada { display: none; }
html[data-tema] .temporada { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
html[data-tema] .temporada span { position: absolute; display: block; }
html[data-tema] .hero-grid, html[data-tema] .rubros { position: relative; z-index: 2; }

/* ---------- saludo ---------- */
.t-saludo { display: none; }
html[data-tema] .t-saludo { display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 .9rem; padding: .42rem .95rem .42rem .5rem;
  border-radius: 999px; font: 700 .92rem/1.2 var(--demma-fuente-titulos); letter-spacing: -.01em;
  box-shadow: 0 14px 30px -16px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.22); }
html[data-tema] .t-saludo::before { content: ""; width: 30px; height: 22px; border-radius: 4px; background-repeat: no-repeat; background-position: center; background-size: contain; flex: none; }

/* ---------- animaciones ---------- */
@keyframes t-caer { from { background-position-y: -260px; } to { background-position-y: 260px; } }
@keyframes t-caer-lento { from { background-position: 0 -300px; } to { background-position: 60px 300px; } }
@keyframes t-subir { from { background-position-y: 340px; } to { background-position-y: 0; } }
@keyframes t-girar { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes t-latir { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@keyframes t-luces { 0%, 100% { opacity: 1; filter: none; } 50% { opacity: .78; filter: brightness(1.25); } }
@keyframes t-flamear {
  0%   { transform: rotate(-1.8deg) skewY(2.8deg) scaleY(1); }
  25%  { transform: rotate(.5deg) skewY(-1.5deg) scaleY(.985); }
  50%  { transform: rotate(1.8deg) skewY(-2.8deg) scaleY(1); }
  75%  { transform: rotate(-.5deg) skewY(1.5deg) scaleY(.985); }
  100% { transform: rotate(-1.8deg) skewY(2.8deg) scaleY(1); }
}
@keyframes t-pliegues { from { background-position-x: 0; } to { background-position-x: -30px; } }
@keyframes t-flamear-mini {
  0%, 100% { transform: skewY(3deg) rotate(-1deg); }
  50% { transform: skewY(-3deg) rotate(1deg); }
}
@keyframes t-mecer { 0%, 100% { transform: rotate(-.8deg); } 50% { transform: rotate(.8deg); } }
@keyframes t-vaiven { 0%, 100% { background-position-x: 0; } 50% { background-position-x: 120px; } }
@keyframes t-estallar { 0% { opacity: 0; transform: scale(.25); } 12% { opacity: 1; } 45% { opacity: .85; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) {
  html[data-tema] .temporada span, html[data-tema] .t-saludo::before { animation: none !important; }
}


/* ============ Fiestas Patrias ============ */
html[data-tema="dieciocho"] {
  background-color: #0A1030;
  --n-morado: #1F49C7; --n-morado-rgb: 31,73,199; --n-morado-texto: #1B3FAE;
  --n-verde: #C22A38; --n-verde-rgb: 194,42,56; --n-amarillo: #E0B21B;
  --demma-fondo: #E9ECF7; --demma-fondo-hondo: #EEF1FA; --demma-superficie: #F3F5FC;
  --demma-superficie-2: #EEF1FA; --demma-borde: #D0D7EC; --demma-vidrio-borde: #D0D7EC;
  --t-1: #1F49C7; --t-1-rgb: 31,73,199; --t-2: #C22A38; --t-2-rgb: 194,42,56; --t-4: #E0B21B;
  --t-panel: #EEF1FA;
}
html[data-tema="dieciocho"] .hero,
html[data-tema="dieciocho"] .pie,
html[data-tema="dieciocho"] .nav-d:not(.claro) {
  --demma-fondo: #0A1030; --demma-fondo-hondo: #070B24; --demma-superficie: #141C44; --demma-superficie-2: #1C2553;
  --demma-borde: #2A3468; --demma-vidrio-borde: rgba(110,155,255,.24);
  --demma-acento: #6E9BFF; --demma-sobre-acento: #0A1030; --demma-acento-texto: #C7D6FF;
  --demma-secundario: #C7D6FF; --demma-destacado: #FF7A80; --demma-exito: #FF7A80;
  --demma-exito-suave: rgba(255,122,128, .14); --demma-foco: #FF7A80;
  --t-1: #6E9BFF; --t-1-rgb: 110,155,255; --t-2: #FF7A80; --t-2-rgb: 255,122,128; --t-3: #CFD8FF; --t-4: #FFFFFF;
  --t-panel: #070B24;
}
html[data-tema="dieciocho"] .hero { background: radial-gradient(70% 60% at 78% 18%, rgba(46,86,214,.34), transparent 70%), radial-gradient(46% 46% at 6% 100%, rgba(216,65,47,.14), transparent 70%), #0A1030; }
html[data-tema="dieciocho"] .hero h1 em { background: linear-gradient(90deg, #6E9BFF, #FFFFFF 52%, #FF7A80); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-tema="dieciocho"] .nav-d { background: #0A1030; }
html[data-tema="dieciocho"] .pie { background: #0A1030; }
html[data-tema="dieciocho"] .nav-d.claro { background: #EEF1FA; }
html[data-tema="dieciocho"] .t-saludo { background: linear-gradient(90deg, #0039A6, #D52B1E); color: #FFFFFF; }
html[data-tema="dieciocho"] .t-saludo::before { transform-origin: left center; animation: t-flamear-mini 3.4s ease-in-out infinite; background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22150%22%20height%3D%22100%22%20viewBox%3D%220%200%20150%20100%22%3E%20%3Cg%3E%20%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22150%22%20height%3D%2250%22%20fill%3D%22%23FFFFFF%22%2F%3E%20%3Crect%20x%3D%220%22%20y%3D%2250%22%20width%3D%22150%22%20height%3D%2250%22%20fill%3D%22%23D52B1E%22%2F%3E%20%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2250%22%20height%3D%2250%22%20fill%3D%22%230039A6%22%2F%3E%20%3Cpath%20d%3D%22M25%209%20L29.7%2022.9%20L44.4%2022.9%20L32.5%2031.6%20L37.1%2045.5%20L25%2036.9%20L12.9%2045.5%20L17.5%2031.6%20L5.6%2022.9%20L20.3%2022.9%20Z%22%20fill%3D%22%23FFFFFF%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E"); }

html[data-tema="dieciocho"] .t-1 { top: clamp(56px, 7vw, 74px); left: 0; width: min(64%, 760px); height: 74px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%2260%22%20viewBox%3D%220%200%20200%2060%22%3E%20%3Cpath%20d%3D%22M0%205%20Q50%2020%20100%205%20T200%205%22%20fill%3D%22none%22%20stroke%3D%22rgba%28255%2C255%2C255%2C.45%29%22%20stroke-width%3D%221.6%22%2F%3E%20%3Cpath%20d%3D%22M6%207%20L34%2013%20L19%2046%20Z%22%20fill%3D%22%23D52B1E%22%2F%3E%20%3Cpath%20d%3D%22M46%2015%20L74%2017%20L59%2050%20Z%22%20fill%3D%22%23F7F9FF%22%2F%3E%20%3Cpath%20d%3D%22M86%2015%20L114%2012%20L99%2046%20Z%22%20fill%3D%22%230039A6%22%2F%3E%20%3Cpath%20d%3D%22M126%2011%20L154%207%20L139%2040%20Z%22%20fill%3D%22%23F7F9FF%22%2F%3E%20%3Cpath%20d%3D%22M166%206%20L194%204%20L179%2037%20Z%22%20fill%3D%22%23D52B1E%22%2F%3E%20%3C%2Fsvg%3E") repeat-x left top / 200px 60px; }
html[data-tema="dieciocho"] .t-2 { right: 3%; bottom: 7%; width: clamp(120px, 15vw, 220px); aspect-ratio: 3/2; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22150%22%20height%3D%22100%22%20viewBox%3D%220%200%20150%20100%22%3E%20%3Cg%3E%20%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%22150%22%20height%3D%2250%22%20fill%3D%22%23FFFFFF%22%2F%3E%20%3Crect%20x%3D%220%22%20y%3D%2250%22%20width%3D%22150%22%20height%3D%2250%22%20fill%3D%22%23D52B1E%22%2F%3E%20%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2250%22%20height%3D%2250%22%20fill%3D%22%230039A6%22%2F%3E%20%3Cpath%20d%3D%22M25%209%20L29.7%2022.9%20L44.4%2022.9%20L32.5%2031.6%20L37.1%2045.5%20L25%2036.9%20L12.9%2045.5%20L17.5%2031.6%20L5.6%2022.9%20L20.3%2022.9%20Z%22%20fill%3D%22%23FFFFFF%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / 100% 100%; opacity: .95; border-radius: 2px; box-shadow: 0 18px 40px -18px rgba(0,0,0,.75); transform-origin: left center; animation: t-flamear 3.4s ease-in-out infinite; will-change: transform; }
html[data-tema="dieciocho"] .t-4 { right: 3%; bottom: 7%; width: clamp(120px, 15vw, 220px); aspect-ratio: 3/2; border-radius: 2px; background: repeating-linear-gradient(100deg, rgba(0,0,0,.30) 0 9px, rgba(255,255,255,.20) 9px 20px, rgba(0,0,0,.30) 20px 30px); background-size: 200% 100%; mix-blend-mode: soft-light; opacity: .6; transform-origin: left center; animation: t-flamear 3.4s ease-in-out infinite, t-pliegues 3.4s linear infinite; will-change: transform, background-position; }
html[data-tema="dieciocho"] .t-3 { inset: 0; opacity: .55; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22340%22%20height%3D%22340%22%20viewBox%3D%220%200%20340%20340%22%3E%20%3Cg%20fill%3D%22%23FFFFFF%22%20opacity%3D%22.9%22%3E%20%3Cpath%20d%3D%22M40%2020%20l3%208%20h8%20l-6.5%205%202.5%208-7-5-7%205%202.5-8-6.5-5h8z%22%20opacity%3D%22.55%22%2F%3E%20%3Cpath%20d%3D%22M210%2060%20l3%208%20h8%20l-6.5%205%202.5%208-7-5-7%205%202.5-8-6.5-5h8z%22%20opacity%3D%22.4%22%20fill%3D%22%239FC0FF%22%2F%3E%20%3Cpath%20d%3D%22M300%20180%20l3%208%20h8%20l-6.5%205%202.5%208-7-5-7%205%202.5-8-6.5-5h8z%22%20opacity%3D%22.5%22%2F%3E%20%3Cpath%20d%3D%22M120%20250%20l3%208%20h8%20l-6.5%205%202.5%208-7-5-7%205%202.5-8-6.5-5h8z%22%20opacity%3D%22.45%22%20fill%3D%22%23FFB3B3%22%2F%3E%20%3Cpath%20d%3D%22M255%20300%20l3%208%20h8%20l-6.5%205%202.5%208-7-5-7%205%202.5-8-6.5-5h8z%22%20opacity%3D%22.4%22%2F%3E%20%3Cpath%20d%3D%22M30%20300%20l3%208%20h8%20l-6.5%205%202.5%208-7-5-7%205%202.5-8-6.5-5h8z%22%20opacity%3D%22.35%22%20fill%3D%22%239FC0FF%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E") repeat top center / 460px 460px; animation: t-subir 60s linear infinite; }


/* ============ Navidad ============ */
html[data-tema="navidad"] {
  background-color: #071C17;
  --n-morado: #B5322C; --n-morado-rgb: 181,50,44; --n-morado-texto: #98241F;
  --n-verde: #2F7D4F; --n-verde-rgb: 47,125,79; --n-amarillo: #C79312;
  --demma-fondo: #EDF3EE; --demma-fondo-hondo: #F1F6F1; --demma-superficie: #F6FAF6;
  --demma-superficie-2: #F1F6F1; --demma-borde: #D2E0D5; --demma-vidrio-borde: #D2E0D5;
  --t-1: #B5322C; --t-1-rgb: 181,50,44; --t-2: #2F7D4F; --t-2-rgb: 47,125,79; --t-4: #C79312;
  --t-panel: #F1F6F1;
}
html[data-tema="navidad"] .hero,
html[data-tema="navidad"] .pie,
html[data-tema="navidad"] .nav-d:not(.claro) {
  --demma-fondo: #071C17; --demma-fondo-hondo: #041310; --demma-superficie: #0E2A22; --demma-superficie-2: #14352B;
  --demma-borde: #1E463A; --demma-vidrio-borde: rgba(242,193,78,.24);
  --demma-acento: #E8615A; --demma-sobre-acento: #2A0B09; --demma-acento-texto: #FFC9C4;
  --demma-secundario: #FFC9C4; --demma-destacado: #7CD6A0; --demma-exito: #7CD6A0;
  --demma-exito-suave: rgba(124,214,160, .14); --demma-foco: #7CD6A0;
  --t-1: #E8615A; --t-1-rgb: 232,97,90; --t-2: #7CD6A0; --t-2-rgb: 124,214,160; --t-3: #D8E8DE; --t-4: #F2C14E;
  --t-panel: #041310;
}
html[data-tema="navidad"] .hero { background: radial-gradient(70% 60% at 78% 18%, rgba(232,97,90,.20), transparent 70%), radial-gradient(50% 50% at 8% 96%, rgba(124,214,160,.14), transparent 70%), #071C17; }
html[data-tema="navidad"] .hero h1 em { background: linear-gradient(90deg, #F2C14E, #FFF3D6 52%, #7CD6A0); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-tema="navidad"] .nav-d { background: #071C17; }
html[data-tema="navidad"] .pie { background: #071C17; }
html[data-tema="navidad"] .nav-d.claro { background: #F1F6F1; }
html[data-tema="navidad"] .t-saludo { background: linear-gradient(90deg, #C4342C, #1C6B4A); color: #FFF4E2; }
html[data-tema="navidad"] .t-saludo::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22260%22%20height%3D%22360%22%20viewBox%3D%220%200%20260%20360%22%3E%20%3Cg%3E%20%3Cpath%20d%3D%22M130%2010%20L188%20108%20L72%20108%20Z%22%20fill%3D%22%2312402F%22%2F%3E%20%3Cpath%20d%3D%22M130%2070%20L206%20186%20L54%20186%20Z%22%20fill%3D%22%23164A36%22%2F%3E%20%3Cpath%20d%3D%22M130%20140%20L224%20278%20L36%20278%20Z%22%20fill%3D%22%231A5740%22%2F%3E%20%3Crect%20x%3D%22114%22%20y%3D%22278%22%20width%3D%2232%22%20height%3D%2246%22%20rx%3D%225%22%20fill%3D%22%233B2A1C%22%2F%3E%20%3Cpath%20d%3D%22M130%200%20l7%2019%20h20%20l-16%2012%206%2020-17-12-17%2012%206-20-16-12h20z%22%20fill%3D%22%23F2C14E%22%2F%3E%20%3Cg%3E%20%3Ccircle%20cx%3D%22112%22%20cy%3D%2296%22%20r%3D%225%22%20fill%3D%22%23E8615A%22%2F%3E%3Ccircle%20cx%3D%22152%22%20cy%3D%22126%22%20r%3D%225%22%20fill%3D%22%23F2C14E%22%2F%3E%20%3Ccircle%20cx%3D%2296%22%20cy%3D%22164%22%20r%3D%225%22%20fill%3D%22%237CD6A0%22%2F%3E%3Ccircle%20cx%3D%22168%22%20cy%3D%22176%22%20r%3D%225%22%20fill%3D%22%23E8615A%22%2F%3E%20%3Ccircle%20cx%3D%2280%22%20cy%3D%22232%22%20r%3D%225.5%22%20fill%3D%22%23F2C14E%22%2F%3E%3Ccircle%20cx%3D%22130%22%20cy%3D%22214%22%20r%3D%225%22%20fill%3D%22%239FE3FF%22%2F%3E%20%3Ccircle%20cx%3D%22186%22%20cy%3D%22244%22%20r%3D%225.5%22%20fill%3D%22%237CD6A0%22%2F%3E%3Ccircle%20cx%3D%22130%22%20cy%3D%22262%22%20r%3D%225%22%20fill%3D%22%23E8615A%22%2F%3E%20%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }

html[data-tema="navidad"] .t-1 { top: clamp(54px, 7vw, 72px); left: 0; width: min(62%, 700px); height: 46px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%2246%22%20viewBox%3D%220%200%20200%2046%22%3E%20%3Cpath%20d%3D%22M0%204%20Q50%2030%20100%204%20T200%204%22%20fill%3D%22none%22%20stroke%3D%22rgba%28226%2C240%2C230%2C.4%29%22%20stroke-width%3D%221.6%22%2F%3E%20%3Ccircle%20cx%3D%2225%22%20cy%3D%2218%22%20r%3D%225%22%20fill%3D%22%23E8615A%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2224%22%20r%3D%225%22%20fill%3D%22%23F2C14E%22%2F%3E%20%3Ccircle%20cx%3D%2275%22%20cy%3D%2218%22%20r%3D%225%22%20fill%3D%22%237CD6A0%22%2F%3E%3Ccircle%20cx%3D%22100%22%20cy%3D%226%22%20r%3D%225%22%20fill%3D%22%239FE3FF%22%2F%3E%20%3Ccircle%20cx%3D%22125%22%20cy%3D%2218%22%20r%3D%225%22%20fill%3D%22%23E8615A%22%2F%3E%3Ccircle%20cx%3D%22150%22%20cy%3D%2224%22%20r%3D%225%22%20fill%3D%22%23F2C14E%22%2F%3E%20%3Ccircle%20cx%3D%22175%22%20cy%3D%2218%22%20r%3D%225%22%20fill%3D%22%237CD6A0%22%2F%3E%3C%2Fsvg%3E") repeat-x left top / 200px 46px; animation: t-luces 3.2s ease-in-out infinite; }
html[data-tema="navidad"] .t-2 { right: 2%; bottom: 7%; width: clamp(140px, 17vw, 250px); aspect-ratio: 26/36; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22260%22%20height%3D%22360%22%20viewBox%3D%220%200%20260%20360%22%3E%20%3Cg%3E%20%3Cpath%20d%3D%22M130%2010%20L188%20108%20L72%20108%20Z%22%20fill%3D%22%2312402F%22%2F%3E%20%3Cpath%20d%3D%22M130%2070%20L206%20186%20L54%20186%20Z%22%20fill%3D%22%23164A36%22%2F%3E%20%3Cpath%20d%3D%22M130%20140%20L224%20278%20L36%20278%20Z%22%20fill%3D%22%231A5740%22%2F%3E%20%3Crect%20x%3D%22114%22%20y%3D%22278%22%20width%3D%2232%22%20height%3D%2246%22%20rx%3D%225%22%20fill%3D%22%233B2A1C%22%2F%3E%20%3Cpath%20d%3D%22M130%200%20l7%2019%20h20%20l-16%2012%206%2020-17-12-17%2012%206-20-16-12h20z%22%20fill%3D%22%23F2C14E%22%2F%3E%20%3Cg%3E%20%3Ccircle%20cx%3D%22112%22%20cy%3D%2296%22%20r%3D%225%22%20fill%3D%22%23E8615A%22%2F%3E%3Ccircle%20cx%3D%22152%22%20cy%3D%22126%22%20r%3D%225%22%20fill%3D%22%23F2C14E%22%2F%3E%20%3Ccircle%20cx%3D%2296%22%20cy%3D%22164%22%20r%3D%225%22%20fill%3D%22%237CD6A0%22%2F%3E%3Ccircle%20cx%3D%22168%22%20cy%3D%22176%22%20r%3D%225%22%20fill%3D%22%23E8615A%22%2F%3E%20%3Ccircle%20cx%3D%2280%22%20cy%3D%22232%22%20r%3D%225.5%22%20fill%3D%22%23F2C14E%22%2F%3E%3Ccircle%20cx%3D%22130%22%20cy%3D%22214%22%20r%3D%225%22%20fill%3D%22%239FE3FF%22%2F%3E%20%3Ccircle%20cx%3D%22186%22%20cy%3D%22244%22%20r%3D%225.5%22%20fill%3D%22%237CD6A0%22%2F%3E%3Ccircle%20cx%3D%22130%22%20cy%3D%22262%22%20r%3D%225%22%20fill%3D%22%23E8615A%22%2F%3E%20%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat bottom center / contain; opacity: .95; filter: drop-shadow(0 0 22px rgba(242,193,78,.25)); }
html[data-tema="navidad"] .t-3 { inset: -10% 0 0; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22260%22%20height%3D%22260%22%20viewBox%3D%220%200%20260%20260%22%3E%20%3Cg%20fill%3D%22%23FFFFFF%22%3E%20%3Ccircle%20cx%3D%2230%22%20cy%3D%2224%22%20r%3D%222.6%22%20opacity%3D%22.8%22%2F%3E%3Ccircle%20cx%3D%22118%22%20cy%3D%2266%22%20r%3D%221.8%22%20opacity%3D%22.55%22%2F%3E%20%3Ccircle%20cx%3D%22206%22%20cy%3D%2230%22%20r%3D%222.2%22%20opacity%3D%22.7%22%2F%3E%3Ccircle%20cx%3D%22242%22%20cy%3D%22128%22%20r%3D%221.7%22%20opacity%3D%22.5%22%2F%3E%20%3Ccircle%20cx%3D%2264%22%20cy%3D%22150%22%20r%3D%222.8%22%20opacity%3D%22.65%22%2F%3E%3Ccircle%20cx%3D%22160%22%20cy%3D%22188%22%20r%3D%222%22%20opacity%3D%22.6%22%2F%3E%20%3Ccircle%20cx%3D%22226%22%20cy%3D%22230%22%20r%3D%222.4%22%20opacity%3D%22.6%22%2F%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%22226%22%20r%3D%221.8%22%20opacity%3D%22.5%22%2F%3E%20%3Ccircle%20cx%3D%22176%22%20cy%3D%22104%22%20r%3D%222.1%22%20opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%2296%22%20cy%3D%22244%22%20r%3D%222%22%20opacity%3D%22.55%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E") repeat top center / 260px 260px; animation: t-caer 26s linear infinite; }


/* ============ Año Nuevo ============ */
html[data-tema="anonuevo"] {
  background-color: #07091A;
  --n-morado: #8A6B12; --n-morado-rgb: 138,107,18; --n-morado-texto: #6F560C;
  --n-verde: #35507F; --n-verde-rgb: 53,80,127; --n-amarillo: #B08A16;
  --demma-fondo: #F2EFE6; --demma-fondo-hondo: #F5F2EA; --demma-superficie: #FAF8F2;
  --demma-superficie-2: #F5F2EA; --demma-borde: #DED8C8; --demma-vidrio-borde: #DED8C8;
  --t-1: #8A6B12; --t-1-rgb: 138,107,18; --t-2: #35507F; --t-2-rgb: 53,80,127; --t-4: #B08A16;
  --t-panel: #F5F2EA;
}
html[data-tema="anonuevo"] .hero,
html[data-tema="anonuevo"] .pie,
html[data-tema="anonuevo"] .nav-d:not(.claro) {
  --demma-fondo: #07091A; --demma-fondo-hondo: #040611; --demma-superficie: #101431; --demma-superficie-2: #171C40;
  --demma-borde: #242A55; --demma-vidrio-borde: rgba(231,194,75,.26);
  --demma-acento: #E7C24B; --demma-sobre-acento: #1F1704; --demma-acento-texto: #F6E4A8;
  --demma-secundario: #F6E4A8; --demma-destacado: #8FB3FF; --demma-exito: #8FB3FF;
  --demma-exito-suave: rgba(143,179,255, .14); --demma-foco: #8FB3FF;
  --t-1: #E7C24B; --t-1-rgb: 231,194,75; --t-2: #8FB3FF; --t-2-rgb: 143,179,255; --t-3: #DCD9F2; --t-4: #FFFFFF;
  --t-panel: #040611;
}
html[data-tema="anonuevo"] .hero { background: radial-gradient(38% 38% at 80% 16%, rgba(231,194,75,.24), transparent 68%), radial-gradient(30% 30% at 62% 30%, rgba(143,179,255,.16), transparent 70%), radial-gradient(45% 45% at 10% 95%, rgba(231,194,75,.10), transparent 70%), #07091A; }
html[data-tema="anonuevo"] .hero h1 em { background: linear-gradient(90deg, #E7C24B, #FFF6D4 52%, #8FB3FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-tema="anonuevo"] .nav-d { background: #07091A; }
html[data-tema="anonuevo"] .pie { background: #07091A; }
html[data-tema="anonuevo"] .nav-d.claro { background: #F5F2EA; }
html[data-tema="anonuevo"] .t-saludo { background: linear-gradient(90deg, #B08A16, #3E58A8); color: #FFF8E4; }
html[data-tema="anonuevo"] .t-saludo::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22220%22%20height%3D%22220%22%20viewBox%3D%220%200%20220%20220%22%3E%20%3Cg%20stroke%3D%22%23E7C24B%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.95%22%3E%20%3Cpath%20d%3D%22M110%20110%20L110%2024%22%2F%3E%3Cpath%20d%3D%22M110%20110%20L110%20196%22%2F%3E%3Cpath%20d%3D%22M110%20110%20L24%20110%22%2F%3E%3Cpath%20d%3D%22M110%20110%20L196%20110%22%2F%3E%20%3Cpath%20d%3D%22M110%20110%20L49%2049%22%2F%3E%3Cpath%20d%3D%22M110%20110%20L171%20171%22%2F%3E%3Cpath%20d%3D%22M110%20110%20L171%2049%22%2F%3E%3Cpath%20d%3D%22M110%20110%20L49%20171%22%2F%3E%20%3Cpath%20d%3D%22M110%20110%20L78%2028%22%2F%3E%3Cpath%20d%3D%22M110%20110%20L142%2028%22%2F%3E%3Cpath%20d%3D%22M110%20110%20L28%2078%22%2F%3E%3Cpath%20d%3D%22M110%20110%20L28%20142%22%2F%3E%20%3Cpath%20d%3D%22M110%20110%20L192%2078%22%2F%3E%3Cpath%20d%3D%22M110%20110%20L192%20142%22%2F%3E%3Cpath%20d%3D%22M110%20110%20L78%20192%22%2F%3E%3Cpath%20d%3D%22M110%20110%20L142%20192%22%2F%3E%20%3C%2Fg%3E%20%3Cg%20fill%3D%22%23FFF0BE%22%3E%20%3Ccircle%20cx%3D%22110%22%20cy%3D%2220%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%22110%22%20cy%3D%22200%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%22110%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%22200%22%20cy%3D%22110%22%20r%3D%224%22%2F%3E%20%3Ccircle%20cx%3D%2245%22%20cy%3D%2245%22%20r%3D%223.4%22%2F%3E%3Ccircle%20cx%3D%22175%22%20cy%3D%22175%22%20r%3D%223.4%22%2F%3E%3Ccircle%20cx%3D%22175%22%20cy%3D%2245%22%20r%3D%223.4%22%2F%3E%3Ccircle%20cx%3D%2245%22%20cy%3D%22175%22%20r%3D%223.4%22%2F%3E%20%3Ccircle%20cx%3D%2274%22%20cy%3D%2224%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%22146%22%20cy%3D%2224%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2274%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%22146%22%20r%3D%223%22%2F%3E%20%3Ccircle%20cx%3D%22196%22%20cy%3D%2274%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%22196%22%20cy%3D%22146%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2274%22%20cy%3D%22196%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%22146%22%20cy%3D%22196%22%20r%3D%223%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E"); }

html[data-tema="anonuevo"] .t-1 { left: 6%; top: 12%; width: clamp(190px, 26vw, 360px); aspect-ratio: 1; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22220%22%20height%3D%22220%22%20viewBox%3D%220%200%20220%20220%22%3E%20%3Cg%20stroke%3D%22%23E7C24B%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.95%22%3E%20%3Cpath%20d%3D%22M110%20110%20L110%2024%22%2F%3E%3Cpath%20d%3D%22M110%20110%20L110%20196%22%2F%3E%3Cpath%20d%3D%22M110%20110%20L24%20110%22%2F%3E%3Cpath%20d%3D%22M110%20110%20L196%20110%22%2F%3E%20%3Cpath%20d%3D%22M110%20110%20L49%2049%22%2F%3E%3Cpath%20d%3D%22M110%20110%20L171%20171%22%2F%3E%3Cpath%20d%3D%22M110%20110%20L171%2049%22%2F%3E%3Cpath%20d%3D%22M110%20110%20L49%20171%22%2F%3E%20%3Cpath%20d%3D%22M110%20110%20L78%2028%22%2F%3E%3Cpath%20d%3D%22M110%20110%20L142%2028%22%2F%3E%3Cpath%20d%3D%22M110%20110%20L28%2078%22%2F%3E%3Cpath%20d%3D%22M110%20110%20L28%20142%22%2F%3E%20%3Cpath%20d%3D%22M110%20110%20L192%2078%22%2F%3E%3Cpath%20d%3D%22M110%20110%20L192%20142%22%2F%3E%3Cpath%20d%3D%22M110%20110%20L78%20192%22%2F%3E%3Cpath%20d%3D%22M110%20110%20L142%20192%22%2F%3E%20%3C%2Fg%3E%20%3Cg%20fill%3D%22%23FFF0BE%22%3E%20%3Ccircle%20cx%3D%22110%22%20cy%3D%2220%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%22110%22%20cy%3D%22200%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%22110%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%22200%22%20cy%3D%22110%22%20r%3D%224%22%2F%3E%20%3Ccircle%20cx%3D%2245%22%20cy%3D%2245%22%20r%3D%223.4%22%2F%3E%3Ccircle%20cx%3D%22175%22%20cy%3D%22175%22%20r%3D%223.4%22%2F%3E%3Ccircle%20cx%3D%22175%22%20cy%3D%2245%22%20r%3D%223.4%22%2F%3E%3Ccircle%20cx%3D%2245%22%20cy%3D%22175%22%20r%3D%223.4%22%2F%3E%20%3Ccircle%20cx%3D%2274%22%20cy%3D%2224%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%22146%22%20cy%3D%2224%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2274%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%22146%22%20r%3D%223%22%2F%3E%20%3Ccircle%20cx%3D%22196%22%20cy%3D%2274%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%22196%22%20cy%3D%22146%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2274%22%20cy%3D%22196%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%22146%22%20cy%3D%22196%22%20r%3D%223%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain; animation: t-estallar 3.6s ease-out infinite; }
html[data-tema="anonuevo"] .t-2 { right: 30%; top: 6%; width: clamp(160px, 22vw, 300px); aspect-ratio: 1; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22220%22%20height%3D%22220%22%20viewBox%3D%220%200%20220%20220%22%3E%20%3Cg%20stroke%3D%22%238FB3FF%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.95%22%3E%20%3Cpath%20d%3D%22M110%20110%20L110%2024%22%2F%3E%3Cpath%20d%3D%22M110%20110%20L110%20196%22%2F%3E%3Cpath%20d%3D%22M110%20110%20L24%20110%22%2F%3E%3Cpath%20d%3D%22M110%20110%20L196%20110%22%2F%3E%20%3Cpath%20d%3D%22M110%20110%20L49%2049%22%2F%3E%3Cpath%20d%3D%22M110%20110%20L171%20171%22%2F%3E%3Cpath%20d%3D%22M110%20110%20L171%2049%22%2F%3E%3Cpath%20d%3D%22M110%20110%20L49%20171%22%2F%3E%20%3Cpath%20d%3D%22M110%20110%20L78%2028%22%2F%3E%3Cpath%20d%3D%22M110%20110%20L142%2028%22%2F%3E%3Cpath%20d%3D%22M110%20110%20L28%2078%22%2F%3E%3Cpath%20d%3D%22M110%20110%20L28%20142%22%2F%3E%20%3Cpath%20d%3D%22M110%20110%20L192%2078%22%2F%3E%3Cpath%20d%3D%22M110%20110%20L192%20142%22%2F%3E%3Cpath%20d%3D%22M110%20110%20L78%20192%22%2F%3E%3Cpath%20d%3D%22M110%20110%20L142%20192%22%2F%3E%20%3C%2Fg%3E%20%3Cg%20fill%3D%22%23DCE8FF%22%3E%20%3Ccircle%20cx%3D%22110%22%20cy%3D%2220%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%22110%22%20cy%3D%22200%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%22110%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%22200%22%20cy%3D%22110%22%20r%3D%224%22%2F%3E%20%3Ccircle%20cx%3D%2245%22%20cy%3D%2245%22%20r%3D%223.4%22%2F%3E%3Ccircle%20cx%3D%22175%22%20cy%3D%22175%22%20r%3D%223.4%22%2F%3E%3Ccircle%20cx%3D%22175%22%20cy%3D%2245%22%20r%3D%223.4%22%2F%3E%3Ccircle%20cx%3D%2245%22%20cy%3D%22175%22%20r%3D%223.4%22%2F%3E%20%3Ccircle%20cx%3D%2274%22%20cy%3D%2224%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%22146%22%20cy%3D%2224%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2274%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%22146%22%20r%3D%223%22%2F%3E%20%3Ccircle%20cx%3D%22196%22%20cy%3D%2274%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%22196%22%20cy%3D%22146%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2274%22%20cy%3D%22196%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%22146%22%20cy%3D%22196%22%20r%3D%223%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain; animation: t-estallar 3.6s ease-out 1.2s infinite; }
html[data-tema="anonuevo"] .t-3 { left: 38%; bottom: 10%; width: clamp(150px, 20vw, 270px); aspect-ratio: 1; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22220%22%20height%3D%22220%22%20viewBox%3D%220%200%20220%20220%22%3E%20%3Cg%20stroke%3D%22%23FF9ECF%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.95%22%3E%20%3Cpath%20d%3D%22M110%20110%20L110%2024%22%2F%3E%3Cpath%20d%3D%22M110%20110%20L110%20196%22%2F%3E%3Cpath%20d%3D%22M110%20110%20L24%20110%22%2F%3E%3Cpath%20d%3D%22M110%20110%20L196%20110%22%2F%3E%20%3Cpath%20d%3D%22M110%20110%20L49%2049%22%2F%3E%3Cpath%20d%3D%22M110%20110%20L171%20171%22%2F%3E%3Cpath%20d%3D%22M110%20110%20L171%2049%22%2F%3E%3Cpath%20d%3D%22M110%20110%20L49%20171%22%2F%3E%20%3Cpath%20d%3D%22M110%20110%20L78%2028%22%2F%3E%3Cpath%20d%3D%22M110%20110%20L142%2028%22%2F%3E%3Cpath%20d%3D%22M110%20110%20L28%2078%22%2F%3E%3Cpath%20d%3D%22M110%20110%20L28%20142%22%2F%3E%20%3Cpath%20d%3D%22M110%20110%20L192%2078%22%2F%3E%3Cpath%20d%3D%22M110%20110%20L192%20142%22%2F%3E%3Cpath%20d%3D%22M110%20110%20L78%20192%22%2F%3E%3Cpath%20d%3D%22M110%20110%20L142%20192%22%2F%3E%20%3C%2Fg%3E%20%3Cg%20fill%3D%22%23FFE0F0%22%3E%20%3Ccircle%20cx%3D%22110%22%20cy%3D%2220%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%22110%22%20cy%3D%22200%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%22110%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%22200%22%20cy%3D%22110%22%20r%3D%224%22%2F%3E%20%3Ccircle%20cx%3D%2245%22%20cy%3D%2245%22%20r%3D%223.4%22%2F%3E%3Ccircle%20cx%3D%22175%22%20cy%3D%22175%22%20r%3D%223.4%22%2F%3E%3Ccircle%20cx%3D%22175%22%20cy%3D%2245%22%20r%3D%223.4%22%2F%3E%3Ccircle%20cx%3D%2245%22%20cy%3D%22175%22%20r%3D%223.4%22%2F%3E%20%3Ccircle%20cx%3D%2274%22%20cy%3D%2224%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%22146%22%20cy%3D%2224%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%2274%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%22146%22%20r%3D%223%22%2F%3E%20%3Ccircle%20cx%3D%22196%22%20cy%3D%2274%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%22196%22%20cy%3D%22146%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2274%22%20cy%3D%22196%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%22146%22%20cy%3D%22196%22%20r%3D%223%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain; animation: t-estallar 3.6s ease-out 2.4s infinite; }
html[data-tema="anonuevo"] .t-4 { inset: -10% 0 0; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22280%22%20height%3D%22280%22%20viewBox%3D%220%200%20280%20280%22%3E%20%3Cg%3E%20%3Crect%20x%3D%2228%22%20y%3D%2218%22%20width%3D%228%22%20height%3D%223.4%22%20rx%3D%221.7%22%20fill%3D%22%23E7C24B%22%20opacity%3D%22.9%22%20transform%3D%22rotate%2825%2032%2019%29%22%2F%3E%20%3Crect%20x%3D%22132%22%20y%3D%2256%22%20width%3D%227%22%20height%3D%223%22%20rx%3D%221.5%22%20fill%3D%22%23F4F0E2%22%20opacity%3D%22.7%22%20transform%3D%22rotate%28-30%20135%2057%29%22%2F%3E%20%3Crect%20x%3D%22236%22%20y%3D%2228%22%20width%3D%228%22%20height%3D%223.4%22%20rx%3D%221.7%22%20fill%3D%22%238FB3FF%22%20opacity%3D%22.8%22%20transform%3D%22rotate%2815%20240%2029%29%22%2F%3E%20%3Crect%20x%3D%2274%22%20y%3D%22158%22%20width%3D%227%22%20height%3D%223%22%20rx%3D%221.5%22%20fill%3D%22%23E7C24B%22%20opacity%3D%22.8%22%20transform%3D%22rotate%28-10%2077%20159%29%22%2F%3E%20%3Crect%20x%3D%22188%22%20y%3D%22196%22%20width%3D%228%22%20height%3D%223.4%22%20rx%3D%221.7%22%20fill%3D%22%23F4F0E2%22%20opacity%3D%22.65%22%20transform%3D%22rotate%2840%20192%20197%29%22%2F%3E%20%3Crect%20x%3D%22258%22%20y%3D%22242%22%20width%3D%227%22%20height%3D%223%22%20rx%3D%221.5%22%20fill%3D%22%23E7C24B%22%20opacity%3D%22.7%22%20transform%3D%22rotate%28-25%20261%20243%29%22%2F%3E%20%3Crect%20x%3D%2222%22%20y%3D%22238%22%20width%3D%228%22%20height%3D%223.4%22%20rx%3D%221.7%22%20fill%3D%22%238FB3FF%22%20opacity%3D%22.7%22%20transform%3D%22rotate%2835%2026%20239%29%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E") repeat top center / 280px 280px; animation: t-caer 20s linear infinite; }


/* ============ Invierno ============ */
html[data-tema="invierno"] {
  background-color: #07161F;
  --n-morado: #1E6FA8; --n-morado-rgb: 30,111,168; --n-morado-texto: #185C8C;
  --n-verde: #2F7D8A; --n-verde-rgb: 47,125,138; --n-amarillo: #C9A227;
  --demma-fondo: #E7EFF5; --demma-fondo-hondo: #EDF3F7; --demma-superficie: #F4F8FB;
  --demma-superficie-2: #EDF3F7; --demma-borde: #CDDCE7; --demma-vidrio-borde: #CDDCE7;
  --t-1: #1E6FA8; --t-1-rgb: 30,111,168; --t-2: #2F7D8A; --t-2-rgb: 47,125,138; --t-4: #C9A227;
  --t-panel: #EDF3F7;
}
html[data-tema="invierno"] .hero,
html[data-tema="invierno"] .pie,
html[data-tema="invierno"] .nav-d:not(.claro) {
  --demma-fondo: #07161F; --demma-fondo-hondo: #040F16; --demma-superficie: #0E2331; --demma-superficie-2: #142C3D;
  --demma-borde: #1E3A4D; --demma-vidrio-borde: rgba(127,196,255,.24);
  --demma-acento: #7FC4FF; --demma-sobre-acento: #06212F; --demma-acento-texto: #C6E4FF;
  --demma-secundario: #C6E4FF; --demma-destacado: #BFE9FF; --demma-exito: #BFE9FF;
  --demma-exito-suave: rgba(191,233,255, .14); --demma-foco: #BFE9FF;
  --t-1: #7FC4FF; --t-1-rgb: 127,196,255; --t-2: #BFE9FF; --t-2-rgb: 191,233,255; --t-3: #D4E6F2; --t-4: #EAF6FF;
  --t-panel: #040F16;
}
html[data-tema="invierno"] .hero { background: radial-gradient(70% 62% at 76% 16%, rgba(70,150,215,.26), transparent 72%), radial-gradient(60% 40% at 20% 100%, rgba(191,233,255,.12), transparent 70%), #07161F; }
html[data-tema="invierno"] .hero h1 em { background: linear-gradient(90deg, #7FC4FF, #FFFFFF 52%, #BFE9FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-tema="invierno"] .nav-d { background: #07161F; }
html[data-tema="invierno"] .pie { background: #07161F; }
html[data-tema="invierno"] .nav-d.claro { background: #EDF3F7; }
html[data-tema="invierno"] .t-saludo { background: linear-gradient(90deg, #17567F, #2E88C4); color: #EAF6FF; }
html[data-tema="invierno"] .t-saludo::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%22240%22%20viewBox%3D%220%200%20240%20240%22%3E%20%3Cg%20stroke%3D%22%23CFEBFF%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.5%22%20fill%3D%22none%22%3E%20%3Cpath%20d%3D%22M120%2020%20L120%20220%22%2F%3E%3Cpath%20d%3D%22M33%2070%20L207%20170%22%2F%3E%3Cpath%20d%3D%22M33%20170%20L207%2070%22%2F%3E%20%3Cpath%20d%3D%22M120%2060%20L96%2036%22%2F%3E%3Cpath%20d%3D%22M120%2060%20L144%2036%22%2F%3E%3Cpath%20d%3D%22M120%20180%20L96%20204%22%2F%3E%3Cpath%20d%3D%22M120%20180%20L144%20204%22%2F%3E%20%3Cpath%20d%3D%22M85%2090%20L52%2084%22%2F%3E%3Cpath%20d%3D%22M85%2090%20L79%2057%22%2F%3E%3Cpath%20d%3D%22M155%20150%20L188%20156%22%2F%3E%3Cpath%20d%3D%22M155%20150%20L161%20183%22%2F%3E%20%3Cpath%20d%3D%22M155%2090%20L188%2084%22%2F%3E%3Cpath%20d%3D%22M155%2090%20L161%2057%22%2F%3E%3Cpath%20d%3D%22M85%20150%20L52%20156%22%2F%3E%3Cpath%20d%3D%22M85%20150%20L79%20183%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E"); }

html[data-tema="invierno"] .t-1 { inset: -10% 0 0; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22260%22%20height%3D%22260%22%20viewBox%3D%220%200%20260%20260%22%3E%20%3Cg%20fill%3D%22%23FFFFFF%22%3E%20%3Ccircle%20cx%3D%2230%22%20cy%3D%2224%22%20r%3D%222.6%22%20opacity%3D%22.8%22%2F%3E%3Ccircle%20cx%3D%22118%22%20cy%3D%2266%22%20r%3D%221.8%22%20opacity%3D%22.55%22%2F%3E%20%3Ccircle%20cx%3D%22206%22%20cy%3D%2230%22%20r%3D%222.2%22%20opacity%3D%22.7%22%2F%3E%3Ccircle%20cx%3D%22242%22%20cy%3D%22128%22%20r%3D%221.7%22%20opacity%3D%22.5%22%2F%3E%20%3Ccircle%20cx%3D%2264%22%20cy%3D%22150%22%20r%3D%222.8%22%20opacity%3D%22.65%22%2F%3E%3Ccircle%20cx%3D%22160%22%20cy%3D%22188%22%20r%3D%222%22%20opacity%3D%22.6%22%2F%3E%20%3Ccircle%20cx%3D%22226%22%20cy%3D%22230%22%20r%3D%222.4%22%20opacity%3D%22.6%22%2F%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%22226%22%20r%3D%221.8%22%20opacity%3D%22.5%22%2F%3E%20%3Ccircle%20cx%3D%22176%22%20cy%3D%22104%22%20r%3D%222.1%22%20opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%2296%22%20cy%3D%22244%22%20r%3D%222%22%20opacity%3D%22.55%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E") repeat top center / 260px 260px; animation: t-caer 24s linear infinite; }
html[data-tema="invierno"] .t-2 { inset: -10% 0 0; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22260%22%20height%3D%22260%22%20viewBox%3D%220%200%20260%20260%22%3E%20%3Cg%20fill%3D%22%23FFFFFF%22%3E%20%3Ccircle%20cx%3D%2230%22%20cy%3D%2224%22%20r%3D%222.6%22%20opacity%3D%22.8%22%2F%3E%3Ccircle%20cx%3D%22118%22%20cy%3D%2266%22%20r%3D%221.8%22%20opacity%3D%22.55%22%2F%3E%20%3Ccircle%20cx%3D%22206%22%20cy%3D%2230%22%20r%3D%222.2%22%20opacity%3D%22.7%22%2F%3E%3Ccircle%20cx%3D%22242%22%20cy%3D%22128%22%20r%3D%221.7%22%20opacity%3D%22.5%22%2F%3E%20%3Ccircle%20cx%3D%2264%22%20cy%3D%22150%22%20r%3D%222.8%22%20opacity%3D%22.65%22%2F%3E%3Ccircle%20cx%3D%22160%22%20cy%3D%22188%22%20r%3D%222%22%20opacity%3D%22.6%22%2F%3E%20%3Ccircle%20cx%3D%22226%22%20cy%3D%22230%22%20r%3D%222.4%22%20opacity%3D%22.6%22%2F%3E%3Ccircle%20cx%3D%2224%22%20cy%3D%22226%22%20r%3D%221.8%22%20opacity%3D%22.5%22%2F%3E%20%3Ccircle%20cx%3D%22176%22%20cy%3D%22104%22%20r%3D%222.1%22%20opacity%3D%22.5%22%2F%3E%3Ccircle%20cx%3D%2296%22%20cy%3D%22244%22%20r%3D%222%22%20opacity%3D%22.55%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E") repeat top center / 380px 380px; opacity: .6; animation: t-caer 40s linear infinite; }
html[data-tema="invierno"] .t-3 { right: 4%; bottom: 8%; width: clamp(130px, 16vw, 230px); aspect-ratio: 1; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%22240%22%20viewBox%3D%220%200%20240%20240%22%3E%20%3Cg%20stroke%3D%22%23CFEBFF%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.5%22%20fill%3D%22none%22%3E%20%3Cpath%20d%3D%22M120%2020%20L120%20220%22%2F%3E%3Cpath%20d%3D%22M33%2070%20L207%20170%22%2F%3E%3Cpath%20d%3D%22M33%20170%20L207%2070%22%2F%3E%20%3Cpath%20d%3D%22M120%2060%20L96%2036%22%2F%3E%3Cpath%20d%3D%22M120%2060%20L144%2036%22%2F%3E%3Cpath%20d%3D%22M120%20180%20L96%20204%22%2F%3E%3Cpath%20d%3D%22M120%20180%20L144%20204%22%2F%3E%20%3Cpath%20d%3D%22M85%2090%20L52%2084%22%2F%3E%3Cpath%20d%3D%22M85%2090%20L79%2057%22%2F%3E%3Cpath%20d%3D%22M155%20150%20L188%20156%22%2F%3E%3Cpath%20d%3D%22M155%20150%20L161%20183%22%2F%3E%20%3Cpath%20d%3D%22M155%2090%20L188%2084%22%2F%3E%3Cpath%20d%3D%22M155%2090%20L161%2057%22%2F%3E%3Cpath%20d%3D%22M85%20150%20L52%20156%22%2F%3E%3Cpath%20d%3D%22M85%20150%20L79%20183%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain; opacity: .5; animation: t-girar 60s linear infinite; }


/* ============ Verano ============ */
html[data-tema="verano"] {
  background-color: #160F26;
  --n-morado: #C2521B; --n-morado-rgb: 194,82,27; --n-morado-texto: #A34314;
  --n-verde: #0F7F86; --n-verde-rgb: 15,127,134; --n-amarillo: #C98A10;
  --demma-fondo: #FBF1E8; --demma-fondo-hondo: #FCF4EC; --demma-superficie: #FFF8F1;
  --demma-superficie-2: #FCF4EC; --demma-borde: #EBD9C8; --demma-vidrio-borde: #EBD9C8;
  --t-1: #C2521B; --t-1-rgb: 194,82,27; --t-2: #0F7F86; --t-2-rgb: 15,127,134; --t-4: #C98A10;
  --t-panel: #FCF4EC;
}
html[data-tema="verano"] .hero,
html[data-tema="verano"] .pie,
html[data-tema="verano"] .nav-d:not(.claro) {
  --demma-fondo: #160F26; --demma-fondo-hondo: #0F0A1B; --demma-superficie: #241633; --demma-superficie-2: #2E1C3F;
  --demma-borde: #3E2A50; --demma-vidrio-borde: rgba(255,154,91,.26);
  --demma-acento: #FF9A5B; --demma-sobre-acento: #2B1205; --demma-acento-texto: #FFCBA6;
  --demma-secundario: #FFCBA6; --demma-destacado: #FFD36E; --demma-exito: #FFD36E;
  --demma-exito-suave: rgba(255,211,110, .14); --demma-foco: #FFD36E;
  --t-1: #FF9A5B; --t-1-rgb: 255,154,91; --t-2: #FFD36E; --t-2-rgb: 255,211,110; --t-3: #F3DCD0; --t-4: #7ED8D8;
  --t-panel: #0F0A1B;
}
html[data-tema="verano"] .hero { background: radial-gradient(48% 46% at 80% 22%, rgba(255,154,91,.34), transparent 70%), radial-gradient(70% 40% at 50% 104%, rgba(255,120,80,.20), transparent 70%), radial-gradient(40% 40% at 8% 10%, rgba(126,216,216,.12), transparent 70%), #160F26; }
html[data-tema="verano"] .hero h1 em { background: linear-gradient(90deg, #FFD36E, #FFEFC9 52%, #FF9A5B); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-tema="verano"] .nav-d { background: #160F26; }
html[data-tema="verano"] .pie { background: #160F26; }
html[data-tema="verano"] .nav-d.claro { background: #FCF4EC; }
html[data-tema="verano"] .t-saludo { background: linear-gradient(90deg, #E2701F, #C4922A); color: #FFF6E9; }
html[data-tema="verano"] .t-saludo::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22300%22%20height%3D%22300%22%20viewBox%3D%220%200%20300%20300%22%3E%20%3Cg%20stroke%3D%22%23FFD36E%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.55%22%3E%20%3Cpath%20d%3D%22M150%2018%20L150%2052%22%2F%3E%3Cpath%20d%3D%22M150%20248%20L150%20282%22%2F%3E%3Cpath%20d%3D%22M18%20150%20L52%20150%22%2F%3E%3Cpath%20d%3D%22M248%20150%20L282%20150%22%2F%3E%20%3Cpath%20d%3D%22M56%2056%20L80%2080%22%2F%3E%3Cpath%20d%3D%22M220%20220%20L244%20244%22%2F%3E%3Cpath%20d%3D%22M244%2056%20L220%2080%22%2F%3E%3Cpath%20d%3D%22M80%20220%20L56%20244%22%2F%3E%20%3C%2Fg%3E%20%3Ccircle%20cx%3D%22150%22%20cy%3D%22150%22%20r%3D%2276%22%20fill%3D%22%23FFD36E%22%20opacity%3D%22.35%22%2F%3E%20%3Ccircle%20cx%3D%22150%22%20cy%3D%22150%22%20r%3D%2254%22%20fill%3D%22%23FFE6A8%22%20opacity%3D%22.5%22%2F%3E%20%3C%2Fsvg%3E"); }

html[data-tema="verano"] .t-1 { right: 8%; bottom: -14%; width: clamp(220px, 30vw, 460px); aspect-ratio: 1; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22300%22%20height%3D%22300%22%20viewBox%3D%220%200%20300%20300%22%3E%20%3Cg%20stroke%3D%22%23FFD36E%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.55%22%3E%20%3Cpath%20d%3D%22M150%2018%20L150%2052%22%2F%3E%3Cpath%20d%3D%22M150%20248%20L150%20282%22%2F%3E%3Cpath%20d%3D%22M18%20150%20L52%20150%22%2F%3E%3Cpath%20d%3D%22M248%20150%20L282%20150%22%2F%3E%20%3Cpath%20d%3D%22M56%2056%20L80%2080%22%2F%3E%3Cpath%20d%3D%22M220%20220%20L244%20244%22%2F%3E%3Cpath%20d%3D%22M244%2056%20L220%2080%22%2F%3E%3Cpath%20d%3D%22M80%20220%20L56%20244%22%2F%3E%20%3C%2Fg%3E%20%3Ccircle%20cx%3D%22150%22%20cy%3D%22150%22%20r%3D%2276%22%20fill%3D%22%23FFD36E%22%20opacity%3D%22.35%22%2F%3E%20%3Ccircle%20cx%3D%22150%22%20cy%3D%22150%22%20r%3D%2254%22%20fill%3D%22%23FFE6A8%22%20opacity%3D%22.5%22%2F%3E%20%3C%2Fsvg%3E") no-repeat center / contain; opacity: .9; animation: t-girar 120s linear infinite; }
html[data-tema="verano"] .t-2 { right: 8%; bottom: -14%; width: clamp(220px, 30vw, 460px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,211,110,.5), rgba(255,154,91,.16) 46%, transparent 70%); filter: blur(12px); animation: t-latir 6s ease-in-out infinite; }
html[data-tema="verano"] .t-3 { left: 0; right: 0; bottom: 4%; height: 90px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%2290%22%20viewBox%3D%220%200%20400%2090%22%3E%20%3Cg%20fill%3D%22none%22%20stroke%3D%22%237ED8D8%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.5%22%3E%20%3Cpath%20d%3D%22M0%2030%20q25%20-14%2050%200%20t50%200%20t50%200%20t50%200%20t50%200%20t50%200%20t50%200%20t50%200%22%2F%3E%20%3Cpath%20d%3D%22M0%2058%20q25%20-14%2050%200%20t50%200%20t50%200%20t50%200%20t50%200%20t50%200%20t50%200%20t50%200%22%20opacity%3D%22.7%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E") repeat-x left center / 400px 90px; opacity: .8; animation: t-vaiven 14s ease-in-out infinite; }


/* ============ Primavera ============ */
html[data-tema="primavera"] {
  background-color: #0C1B16;
  --n-morado: #B5477E; --n-morado-rgb: 181,71,126; --n-morado-texto: #983A69;
  --n-verde: #3E8B3B; --n-verde-rgb: 62,139,59; --n-amarillo: #C79A1E;
  --demma-fondo: #F1F6EA; --demma-fondo-hondo: #F4F8EE; --demma-superficie: #F9FCF4;
  --demma-superficie-2: #F4F8EE; --demma-borde: #DCE6CE; --demma-vidrio-borde: #DCE6CE;
  --t-1: #B5477E; --t-1-rgb: 181,71,126; --t-2: #3E8B3B; --t-2-rgb: 62,139,59; --t-4: #C79A1E;
  --t-panel: #F4F8EE;
}
html[data-tema="primavera"] .hero,
html[data-tema="primavera"] .pie,
html[data-tema="primavera"] .nav-d:not(.claro) {
  --demma-fondo: #0C1B16; --demma-fondo-hondo: #081310; --demma-superficie: #132821; --demma-superficie-2: #1A342B;
  --demma-borde: #25473B; --demma-vidrio-borde: rgba(245,168,200,.26);
  --demma-acento: #F5A8C8; --demma-sobre-acento: #2B0C1A; --demma-acento-texto: #FFD0E2;
  --demma-secundario: #FFD0E2; --demma-destacado: #A8E063; --demma-exito: #A8E063;
  --demma-exito-suave: rgba(168,224,99, .14); --demma-foco: #A8E063;
  --t-1: #F5A8C8; --t-1-rgb: 245,168,200; --t-2: #A8E063; --t-2-rgb: 168,224,99; --t-3: #E6E1D6; --t-4: #FFD98E;
  --t-panel: #081310;
}
html[data-tema="primavera"] .hero { background: radial-gradient(64% 56% at 78% 18%, rgba(245,168,200,.22), transparent 70%), radial-gradient(54% 44% at 10% 100%, rgba(168,224,99,.16), transparent 70%), #0C1B16; }
html[data-tema="primavera"] .hero h1 em { background: linear-gradient(90deg, #F5A8C8, #FFF0D6 52%, #A8E063); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-tema="primavera"] .nav-d { background: #0C1B16; }
html[data-tema="primavera"] .pie { background: #0C1B16; }
html[data-tema="primavera"] .nav-d.claro { background: #F4F8EE; }
html[data-tema="primavera"] .t-saludo { background: linear-gradient(90deg, #C04A86, #57A03C); color: #FFF3F8; }
html[data-tema="primavera"] .t-saludo::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22220%22%20viewBox%3D%220%200%20320%20220%22%3E%20%3Cg%20fill%3D%22none%22%20stroke%3D%22%232F5C3A%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.85%22%3E%20%3Cpath%20d%3D%22M-10%2030%20C60%2040%20120%2020%20190%2046%20C240%2064%20280%2060%20320%2044%22%2F%3E%20%3Cpath%20d%3D%22M70%2034%20C84%2058%2092%2074%2088%2096%22%2F%3E%3Cpath%20d%3D%22M180%2044%20C196%2070%20202%2086%20198%20108%22%2F%3E%20%3C%2Fg%3E%20%3Cg%3E%20%3Cg%20transform%3D%22translate%2858%2C30%29%22%3E%3Ccircle%20r%3D%227%22%20cx%3D%220%22%20cy%3D%22-8%22%20fill%3D%22%23F5A8C8%22%2F%3E%3Ccircle%20r%3D%227%22%20cx%3D%228%22%20cy%3D%222%22%20fill%3D%22%23F8BFD6%22%2F%3E%3Ccircle%20r%3D%227%22%20cx%3D%22-8%22%20cy%3D%222%22%20fill%3D%22%23F8BFD6%22%2F%3E%3Ccircle%20r%3D%224%22%20fill%3D%22%23FFD98E%22%2F%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22translate%28140%2C26%29%22%3E%3Ccircle%20r%3D%226%22%20cx%3D%220%22%20cy%3D%22-7%22%20fill%3D%22%23FFD2E4%22%2F%3E%3Ccircle%20r%3D%226%22%20cx%3D%227%22%20cy%3D%222%22%20fill%3D%22%23F5A8C8%22%2F%3E%3Ccircle%20r%3D%226%22%20cx%3D%22-7%22%20cy%3D%222%22%20fill%3D%22%23F5A8C8%22%2F%3E%3Ccircle%20r%3D%223.4%22%20fill%3D%22%23FFD98E%22%2F%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22translate%28236%2C48%29%22%3E%3Ccircle%20r%3D%227%22%20cx%3D%220%22%20cy%3D%22-8%22%20fill%3D%22%23F5A8C8%22%2F%3E%3Ccircle%20r%3D%227%22%20cx%3D%228%22%20cy%3D%222%22%20fill%3D%22%23FFD2E4%22%2F%3E%3Ccircle%20r%3D%227%22%20cx%3D%22-8%22%20cy%3D%222%22%20fill%3D%22%23FFD2E4%22%2F%3E%3Ccircle%20r%3D%224%22%20fill%3D%22%23FFD98E%22%2F%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22translate%2888%2C98%29%22%3E%3Ccircle%20r%3D%225.4%22%20cx%3D%220%22%20cy%3D%22-6%22%20fill%3D%22%23F8BFD6%22%2F%3E%3Ccircle%20r%3D%225.4%22%20cx%3D%226%22%20cy%3D%222%22%20fill%3D%22%23F5A8C8%22%2F%3E%3Ccircle%20r%3D%225.4%22%20cx%3D%22-6%22%20cy%3D%222%22%20fill%3D%22%23F5A8C8%22%2F%3E%3Ccircle%20r%3D%223%22%20fill%3D%22%23FFD98E%22%2F%3E%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fsvg%3E"); }

html[data-tema="primavera"] .t-1 { inset: -12% 0 0; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22300%22%20height%3D%22300%22%20viewBox%3D%220%200%20300%20300%22%3E%20%3Cg%20transform%3D%22scale%28.55%29%22%20transform-origin%3D%22150%20150%22%3E%20%3Cpath%20d%3D%22M30%2024%20c14-10%2030-6%2034%206%20-14%2010-30%206-34-6z%22%20fill%3D%22%23F5A8C8%22%20opacity%3D%22.85%22%2F%3E%20%3Cpath%20d%3D%22M150%2070%20c12-9%2026-5%2029%205%20-12%209-26%205-29-5z%22%20fill%3D%22%23A8E063%22%20opacity%3D%22.7%22%20transform%3D%22rotate%2835%20160%2074%29%22%2F%3E%20%3Cpath%20d%3D%22M248%2030%20c14-10%2030-6%2034%206%20-14%2010-30%206-34-6z%22%20fill%3D%22%23FFD98E%22%20opacity%3D%22.75%22%20transform%3D%22rotate%28-20%20262%2034%29%22%2F%3E%20%3Cpath%20d%3D%22M80%20176%20c12-9%2026-5%2029%205%20-12%209-26%205-29-5z%22%20fill%3D%22%23F5A8C8%22%20opacity%3D%22.7%22%20transform%3D%22rotate%28-45%2092%20180%29%22%2F%3E%20%3Cpath%20d%3D%22M206%20214%20c14-10%2030-6%2034%206%20-14%2010-30%206-34-6z%22%20fill%3D%22%23A8E063%22%20opacity%3D%22.7%22%20transform%3D%22rotate%2825%20220%20218%29%22%2F%3E%20%3Cpath%20d%3D%22M268%20268%20c12-9%2026-5%2029%205%20-12%209-26%205-29-5z%22%20fill%3D%22%23FFD98E%22%20opacity%3D%22.6%22%20transform%3D%22rotate%28-15%20280%20272%29%22%2F%3E%20%3Cpath%20d%3D%22M18%20262%20c14-10%2030-6%2034%206%20-14%2010-30%206-34-6z%22%20fill%3D%22%23F5A8C8%22%20opacity%3D%22.65%22%20transform%3D%22rotate%2830%2032%20266%29%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E") repeat top center / 420px 420px; opacity: .55; animation: t-caer-lento 26s linear infinite; }
html[data-tema="primavera"] .t-2 { inset: -12% 0 0; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22300%22%20height%3D%22300%22%20viewBox%3D%220%200%20300%20300%22%3E%20%3Cg%20transform%3D%22scale%28.55%29%22%20transform-origin%3D%22150%20150%22%3E%20%3Cpath%20d%3D%22M30%2024%20c14-10%2030-6%2034%206%20-14%2010-30%206-34-6z%22%20fill%3D%22%23F5A8C8%22%20opacity%3D%22.85%22%2F%3E%20%3Cpath%20d%3D%22M150%2070%20c12-9%2026-5%2029%205%20-12%209-26%205-29-5z%22%20fill%3D%22%23A8E063%22%20opacity%3D%22.7%22%20transform%3D%22rotate%2835%20160%2074%29%22%2F%3E%20%3Cpath%20d%3D%22M248%2030%20c14-10%2030-6%2034%206%20-14%2010-30%206-34-6z%22%20fill%3D%22%23FFD98E%22%20opacity%3D%22.75%22%20transform%3D%22rotate%28-20%20262%2034%29%22%2F%3E%20%3Cpath%20d%3D%22M80%20176%20c12-9%2026-5%2029%205%20-12%209-26%205-29-5z%22%20fill%3D%22%23F5A8C8%22%20opacity%3D%22.7%22%20transform%3D%22rotate%28-45%2092%20180%29%22%2F%3E%20%3Cpath%20d%3D%22M206%20214%20c14-10%2030-6%2034%206%20-14%2010-30%206-34-6z%22%20fill%3D%22%23A8E063%22%20opacity%3D%22.7%22%20transform%3D%22rotate%2825%20220%20218%29%22%2F%3E%20%3Cpath%20d%3D%22M268%20268%20c12-9%2026-5%2029%205%20-12%209-26%205-29-5z%22%20fill%3D%22%23FFD98E%22%20opacity%3D%22.6%22%20transform%3D%22rotate%28-15%20280%20272%29%22%2F%3E%20%3Cpath%20d%3D%22M18%20262%20c14-10%2030-6%2034%206%20-14%2010-30%206-34-6z%22%20fill%3D%22%23F5A8C8%22%20opacity%3D%22.65%22%20transform%3D%22rotate%2830%2032%20266%29%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E") repeat top center / 640px 640px; opacity: .38; animation: t-caer-lento 40s linear infinite; }
html[data-tema="primavera"] .t-3 { left: 0; top: clamp(50px, 6vw, 70px); width: min(46%, 460px); aspect-ratio: 32/22; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22320%22%20height%3D%22220%22%20viewBox%3D%220%200%20320%20220%22%3E%20%3Cg%20fill%3D%22none%22%20stroke%3D%22%232F5C3A%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.85%22%3E%20%3Cpath%20d%3D%22M-10%2030%20C60%2040%20120%2020%20190%2046%20C240%2064%20280%2060%20320%2044%22%2F%3E%20%3Cpath%20d%3D%22M70%2034%20C84%2058%2092%2074%2088%2096%22%2F%3E%3Cpath%20d%3D%22M180%2044%20C196%2070%20202%2086%20198%20108%22%2F%3E%20%3C%2Fg%3E%20%3Cg%3E%20%3Cg%20transform%3D%22translate%2858%2C30%29%22%3E%3Ccircle%20r%3D%227%22%20cx%3D%220%22%20cy%3D%22-8%22%20fill%3D%22%23F5A8C8%22%2F%3E%3Ccircle%20r%3D%227%22%20cx%3D%228%22%20cy%3D%222%22%20fill%3D%22%23F8BFD6%22%2F%3E%3Ccircle%20r%3D%227%22%20cx%3D%22-8%22%20cy%3D%222%22%20fill%3D%22%23F8BFD6%22%2F%3E%3Ccircle%20r%3D%224%22%20fill%3D%22%23FFD98E%22%2F%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22translate%28140%2C26%29%22%3E%3Ccircle%20r%3D%226%22%20cx%3D%220%22%20cy%3D%22-7%22%20fill%3D%22%23FFD2E4%22%2F%3E%3Ccircle%20r%3D%226%22%20cx%3D%227%22%20cy%3D%222%22%20fill%3D%22%23F5A8C8%22%2F%3E%3Ccircle%20r%3D%226%22%20cx%3D%22-7%22%20cy%3D%222%22%20fill%3D%22%23F5A8C8%22%2F%3E%3Ccircle%20r%3D%223.4%22%20fill%3D%22%23FFD98E%22%2F%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22translate%28236%2C48%29%22%3E%3Ccircle%20r%3D%227%22%20cx%3D%220%22%20cy%3D%22-8%22%20fill%3D%22%23F5A8C8%22%2F%3E%3Ccircle%20r%3D%227%22%20cx%3D%228%22%20cy%3D%222%22%20fill%3D%22%23FFD2E4%22%2F%3E%3Ccircle%20r%3D%227%22%20cx%3D%22-8%22%20cy%3D%222%22%20fill%3D%22%23FFD2E4%22%2F%3E%3Ccircle%20r%3D%224%22%20fill%3D%22%23FFD98E%22%2F%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22translate%2888%2C98%29%22%3E%3Ccircle%20r%3D%225.4%22%20cx%3D%220%22%20cy%3D%22-6%22%20fill%3D%22%23F8BFD6%22%2F%3E%3Ccircle%20r%3D%225.4%22%20cx%3D%226%22%20cy%3D%222%22%20fill%3D%22%23F5A8C8%22%2F%3E%3Ccircle%20r%3D%225.4%22%20cx%3D%22-6%22%20cy%3D%222%22%20fill%3D%22%23F5A8C8%22%2F%3E%3Ccircle%20r%3D%223%22%20fill%3D%22%23FFD98E%22%2F%3E%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat left top / contain; opacity: .95; animation: t-mecer 7s ease-in-out infinite; transform-origin: left top; }


/* ============ Día del Trabajador ============ */
html[data-tema="trabajador"] {
  background-color: #101418;
  --n-morado: #A85A00; --n-morado-rgb: 168,90,0; --n-morado-texto: #8A4A00;
  --n-verde: #B03A32; --n-verde-rgb: 176,58,50; --n-amarillo: #B8860B;
  --demma-fondo: #ECEFF2; --demma-fondo-hondo: #F0F3F6; --demma-superficie: #F6F8FA;
  --demma-superficie-2: #F0F3F6; --demma-borde: #D3DAE1; --demma-vidrio-borde: #D3DAE1;
  --t-1: #A85A00; --t-1-rgb: 168,90,0; --t-2: #B03A32; --t-2-rgb: 176,58,50; --t-4: #B8860B;
  --t-panel: #F0F3F6;
}
html[data-tema="trabajador"] .hero,
html[data-tema="trabajador"] .pie,
html[data-tema="trabajador"] .nav-d:not(.claro) {
  --demma-fondo: #101418; --demma-fondo-hondo: #0A0D10; --demma-superficie: #1A2026; --demma-superficie-2: #232B33;
  --demma-borde: #303A44; --demma-vidrio-borde: rgba(255,176,32,.26);
  --demma-acento: #FFB020; --demma-sobre-acento: #241704; --demma-acento-texto: #FFD189;
  --demma-secundario: #FFD189; --demma-destacado: #E5534B; --demma-exito: #E5534B;
  --demma-exito-suave: rgba(229,83,75, .14); --demma-foco: #E5534B;
  --t-1: #FFB020; --t-1-rgb: 255,176,32; --t-2: #E5534B; --t-2-rgb: 229,83,75; --t-3: #D9E0E6; --t-4: #8FA3B0;
  --t-panel: #0A0D10;
}
html[data-tema="trabajador"] .hero { background: linear-gradient(0deg, rgba(229,83,75,.10), transparent 40%), radial-gradient(66% 56% at 78% 18%, rgba(255,176,32,.20), transparent 70%), #101418; }
html[data-tema="trabajador"] .hero h1 em { background: linear-gradient(90deg, #FFB020, #FFE7B8 52%, #E5534B); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-tema="trabajador"] .nav-d { background: #101418; }
html[data-tema="trabajador"] .pie { background: #101418; }
html[data-tema="trabajador"] .nav-d.claro { background: #F0F3F6; }
html[data-tema="trabajador"] .t-saludo { background: linear-gradient(90deg, #B5761A, #B03A32); color: #FFF6E6; }
html[data-tema="trabajador"] .t-saludo::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22300%22%20height%3D%22240%22%20viewBox%3D%220%200%20300%20240%22%3E%20%3Cg%20fill%3D%22none%22%20stroke%3D%22%23FFB020%22%20stroke-width%3D%227%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.5%22%3E%20%3Cpath%20d%3D%22M150%2040%20l16%205%2012-12%2018%2018%20-12%2012%205%2016%2017%204%20v26%20l-17%204%20-5%2016%2012%2012%20-18%2018%20-12-12%20-16%205%20-4%2017%20h-26%20l-4-17%20-16-5%20-12%2012%20-18-18%2012-12%20-5-16%20-17-4%20v-26%20l17-4%205-16%20-12-12%2018-18%2012%2012%2016-5%204-17%20h26z%22%2F%3E%20%3Ccircle%20cx%3D%22133%22%20cy%3D%22120%22%20r%3D%2230%22%2F%3E%20%3C%2Fg%3E%20%3Cg%20fill%3D%22none%22%20stroke%3D%22%23E5534B%22%20stroke-width%3D%227%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.45%22%3E%20%3Cpath%20d%3D%22M40%20210%20L110%20140%22%2F%3E%3Cpath%20d%3D%22M36%20214%20l-18%2018%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E"); }

html[data-tema="trabajador"] .t-1 { inset: 0; background-image: linear-gradient(rgba(255,176,32,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,176,32,.055) 1px, transparent 1px); background-size: 48px 48px; }
html[data-tema="trabajador"] .t-2 { right: 3%; bottom: 6%; width: clamp(150px, 19vw, 290px); aspect-ratio: 5/4; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22300%22%20height%3D%22240%22%20viewBox%3D%220%200%20300%20240%22%3E%20%3Cg%20fill%3D%22none%22%20stroke%3D%22%23FFB020%22%20stroke-width%3D%227%22%20stroke-linejoin%3D%22round%22%20opacity%3D%22.5%22%3E%20%3Cpath%20d%3D%22M150%2040%20l16%205%2012-12%2018%2018%20-12%2012%205%2016%2017%204%20v26%20l-17%204%20-5%2016%2012%2012%20-18%2018%20-12-12%20-16%205%20-4%2017%20h-26%20l-4-17%20-16-5%20-12%2012%20-18-18%2012-12%20-5-16%20-17-4%20v-26%20l17-4%205-16%20-12-12%2018-18%2012%2012%2016-5%204-17%20h26z%22%2F%3E%20%3Ccircle%20cx%3D%22133%22%20cy%3D%22120%22%20r%3D%2230%22%2F%3E%20%3C%2Fg%3E%20%3Cg%20fill%3D%22none%22%20stroke%3D%22%23E5534B%22%20stroke-width%3D%227%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.45%22%3E%20%3Cpath%20d%3D%22M40%20210%20L110%20140%22%2F%3E%3Cpath%20d%3D%22M36%20214%20l-18%2018%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center / contain; animation: t-girar 80s linear infinite; }
html[data-tema="trabajador"] .t-3 { left: 0; right: 0; bottom: 0; height: 12px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%20%3Crect%20width%3D%2228%22%20height%3D%2228%22%20fill%3D%22%23FFB020%22%2F%3E%3Cpath%20d%3D%22M-14%2028%20L14%200%20M0%2028%20L28%200%20M14%2028%20L42%200%22%20stroke%3D%22%2315181C%22%20stroke-width%3D%229%22%2F%3E%3C%2Fsvg%3E") repeat-x left center / 28px 28px; opacity: .9; }

/* Cuando la bandera se dibuja en canvas (assets/js/bandera.js), la imagen de
   respaldo y la capa de pliegues salen de escena: la tela ya ondula sola. */
html[data-tema="dieciocho"] .con-tela { background: none !important; box-shadow: none; animation: none; overflow: visible; }
html[data-tema="dieciocho"] .t-2.con-tela canvas { display: block; width: 100%; height: 100%; filter: drop-shadow(0 16px 34px rgba(0,0,0,.55)); }
html[data-tema="dieciocho"] .t-1.con-tela canvas { display: block; width: 100%; height: 100%; filter: drop-shadow(0 8px 16px rgba(0,0,0,.45)); }
/* el hilo se desvanece en la punta, para que no quede cortado a la mitad */
html[data-tema="dieciocho"] .t-1.con-tela { -webkit-mask-image: linear-gradient(90deg, #000 84%, transparent); mask-image: linear-gradient(90deg, #000 84%, transparent); }
html[data-tema="dieciocho"] .t-2.con-tela ~ .t-4 { display: none; }

/* En celular la guirnalda cruza toda la pantalla y va mas arriba, para no
   toparse con el saludo ni con el titulo. */
@media (max-width: 767.98px) {
  html[data-tema="dieciocho"] .t-1 { top: 6px; width: 100%; height: 56px; }
  html[data-tema="dieciocho"] .t-2 { width: clamp(96px, 34vw, 150px); bottom: 4%; right: 2%; }
  html[data-tema="navidad"] .t-1 { top: 6px; width: 100%; }
}

/* Navidad en canvas (assets/js/navidad.js): fuera los dibujos de respaldo. */
html[data-tema="navidad"] .con-tela { background: none !important; animation: none; overflow: visible; }
html[data-tema="navidad"] .t-1.con-tela { height: 74px; }
html[data-tema="navidad"] .con-tela canvas { display: block; width: 100%; height: 100%; }
html[data-tema="navidad"] .t-2.con-tela { filter: none; }
html[data-tema="navidad"] .t-1.con-tela { -webkit-mask-image: linear-gradient(90deg, #000 84%, transparent); mask-image: linear-gradient(90deg, #000 84%, transparent); }

/* ============ Halloween ============ */
html[data-tema="halloween"] {
  background-color: #140A1E;
  --n-morado: #B4500A; --n-morado-rgb: 180, 80, 10; --n-morado-texto: #963F05;
  --n-verde: #6B3FD9; --n-verde-rgb: 107, 63, 217; --n-amarillo: #C98A10;
  --demma-fondo: #F3EDE6; --demma-fondo-hondo: #F6F1EA; --demma-superficie: #FBF7F2;
  --demma-superficie-2: #F6F1EA; --demma-borde: #E2D6C9; --demma-vidrio-borde: #E2D6C9;
  --t-1: #B4500A; --t-1-rgb: 180, 80, 10; --t-2: #6B3FD9; --t-2-rgb: 107, 63, 217; --t-4: #C98A10;
  --t-panel: #F6F1EA;
}
html[data-tema="halloween"] .hero,
html[data-tema="halloween"] .pie,
html[data-tema="halloween"] .nav-d:not(.claro) {
  --demma-fondo: #140A1E; --demma-fondo-hondo: #0C0613; --demma-superficie: #1F1030; --demma-superficie-2: #29163D;
  --demma-borde: #3A2150; --demma-vidrio-borde: rgba(255,138,43,.26);
  --demma-acento: #FF8A2B; --demma-sobre-acento: #2A1204; --demma-acento-texto: #FFC79A;
  --demma-secundario: #FFC79A; --demma-destacado: #B06BFF; --demma-exito: #9BE564;
  --demma-exito-suave: rgba(155,229,100,.14); --demma-foco: #FF8A2B;
  --t-1: #FF8A2B; --t-1-rgb: 255, 138, 43; --t-2: #B06BFF; --t-2-rgb: 176, 107, 255; --t-3: #E9DCF5; --t-4: #9BE564;
  --t-panel: #0C0613;
}
html[data-tema="halloween"] .hero { background: radial-gradient(62% 54% at 80% 16%, rgba(255,138,43,.20), transparent 70%), radial-gradient(56% 48% at 8% 100%, rgba(176,107,255,.20), transparent 70%), #140A1E; }
html[data-tema="halloween"] .hero h1 em { background: linear-gradient(90deg, #FF8A2B, #FFE0BC 52%, #B06BFF); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-tema="halloween"] .nav-d { background: #140A1E; }
html[data-tema="halloween"] .nav-d.claro { background: #F6F1EA; }
html[data-tema="halloween"] .pie { background: #140A1E; }
html[data-tema="halloween"] .t-saludo { background: linear-gradient(90deg, #C4560C, #6B3FD9); color: #FFF3E6; }
html[data-tema="halloween"] .t-saludo::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2234%22%20viewBox%3D%220%200%2040%2034%22%3E%20%3Cpath%20d%3D%22M20%206%20C21%202%2024%201%2027%202%22%20fill%3D%22none%22%20stroke%3D%22%234C6B25%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cg%20fill%3D%22%23E2720F%22%3E%3Cellipse%20cx%3D%2212%22%20cy%3D%2220%22%20rx%3D%228%22%20ry%3D%2212%22%2F%3E%3Cellipse%20cx%3D%2228%22%20cy%3D%2220%22%20rx%3D%228%22%20ry%3D%2212%22%2F%3E%3C%2Fg%3E%20%3Cellipse%20cx%3D%2220%22%20cy%3D%2220%22%20rx%3D%2211%22%20ry%3D%2213%22%20fill%3D%22%23FF8A2B%22%2F%3E%20%3Cg%20fill%3D%22%232A1204%22%3E%3Cpath%20d%3D%22M14%2016%20l6%203%20-6%203z%22%2F%3E%3Cpath%20d%3D%22M26%2016%20l-6%203%206%203z%22%2F%3E%3Cpath%20d%3D%22M13%2025%20h14%20l-3%203%20-3-2%20-3%202z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
/* capas: 1 murcielagos (canvas), 2 calabaza (canvas), 3 telarana, 4 niebla */
html[data-tema="halloween"] .t-1 { top: clamp(58px, 7vw, 78px); left: 0; width: 100%; height: clamp(150px, 20vw, 260px); }
html[data-tema="halloween"] .t-2 { right: 3%; bottom: 6%; width: clamp(130px, 16vw, 230px); aspect-ratio: 34/30; }
html[data-tema="halloween"] .t-3 { top: 0; left: 0; width: clamp(140px, 16vw, 230px); aspect-ratio: 1; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22220%22%20height%3D%22220%22%20viewBox%3D%220%200%20220%20220%22%3E%20%3Cg%20fill%3D%22none%22%20stroke%3D%22rgba%28233%2C220%2C245%2C.34%29%22%20stroke-width%3D%221.5%22%3E%20%3Cpath%20d%3D%22M0%200%20L220%200%20M0%200%20L0%20220%20M0%200%20L200%20200%20M0%200%20L120%20210%20M0%200%20L210%20120%20M0%200%20L60%20215%20M0%200%20L215%2060%22%2F%3E%20%3Cpath%20d%3D%22M46%200%20C40%2020%2022%2040%200%2046%22%2F%3E%3Cpath%20d%3D%22M84%200%20C74%2036%2038%2074%200%2084%22%2F%3E%20%3Cpath%20d%3D%22M126%200%20C112%2054%2056%20112%200%20126%22%2F%3E%3Cpath%20d%3D%22M170%200%20C150%2074%2076%20150%200%20170%22%2F%3E%20%3Cpath%20d%3D%22M214%200%20C190%2094%2096%20190%200%20214%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat left top / contain; }
html[data-tema="halloween"] .t-4 { left: 0; right: 0; bottom: 0; height: 120px; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22600%22%20height%3D%22120%22%20viewBox%3D%220%200%20600%20120%22%3E%20%3Cg%20fill%3D%22rgba%28176%2C107%2C255%2C.13%29%22%3E%20%3Cellipse%20cx%3D%2290%22%20cy%3D%2290%22%20rx%3D%22150%22%20ry%3D%2240%22%2F%3E%3Cellipse%20cx%3D%22300%22%20cy%3D%22100%22%20rx%3D%22190%22%20ry%3D%2244%22%2F%3E%20%3Cellipse%20cx%3D%22520%22%20cy%3D%2286%22%20rx%3D%22160%22%20ry%3D%2238%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") repeat-x left bottom / 600px 120px; animation: t-vaiven 22s ease-in-out infinite; }
/* con el canvas puesto, fuera cualquier dibujo de respaldo */
html[data-tema="halloween"] .con-tela { background: none !important; animation: none; overflow: visible; }
html[data-tema="halloween"] .con-tela canvas { display: block; width: 100%; height: 100%; }

@media (max-width: 767.98px) {
  html[data-tema="halloween"] .t-1 { top: 6px; height: 150px; }
  html[data-tema="halloween"] .t-2 { width: clamp(110px, 36vw, 170px); bottom: 4%; right: 2%; }
  html[data-tema="halloween"] .t-3 { width: 120px; }
}


/* ============ Temporadas sobre el fondo con fotografía ============
   Con la foto puesta (panel → Portada → Fondo), cada temporada tiñe el velo con su
   propio color de fondo y vira un poco la foto hacia su paleta. Las figuras grandes
   (bandera, calabaza, árbol...) se van al lado de la foto cuando el texto está a la
   derecha, para no taparlo. */
html[data-fondo][data-tema="dieciocho"] .cielo { --velo-rgb: 10, 16, 48; }
html[data-fondo][data-tema="halloween"] .cielo { --velo-rgb: 20, 10, 30; }
html[data-fondo][data-tema="navidad"] .cielo { --velo-rgb: 7, 28, 23; }
html[data-fondo][data-tema="anonuevo"] .cielo { --velo-rgb: 7, 9, 26; }
html[data-fondo][data-tema="invierno"] .cielo { --velo-rgb: 7, 22, 31; }
html[data-fondo][data-tema="primavera"] .cielo { --velo-rgb: 12, 27, 22; }
html[data-fondo][data-tema="verano"] .cielo { --velo-rgb: 22, 15, 38; }
html[data-fondo][data-tema="trabajador"] .cielo { --velo-rgb: 16, 20, 24; }
html[data-fondo][data-tema="dieciocho"] .cielo .foto { filter: hue-rotate(-28deg) saturate(1.1); }
html[data-fondo][data-tema="halloween"] .cielo .foto { filter: hue-rotate(18deg) saturate(.9) brightness(.92); }
html[data-fondo][data-tema="navidad"] .cielo .foto { filter: hue-rotate(-130deg) saturate(.8); }
html[data-fondo][data-tema="anonuevo"] .cielo .foto { filter: hue-rotate(-20deg) saturate(.45) brightness(.95); }
html[data-fondo][data-tema="invierno"] .cielo .foto { filter: hue-rotate(-40deg) saturate(.7) brightness(1.05); }
html[data-fondo][data-tema="primavera"] .cielo .foto { filter: hue-rotate(60deg) saturate(.9); }
html[data-fondo][data-tema="verano"] .cielo .foto { filter: hue-rotate(95deg) saturate(1.05); }
html[data-fondo][data-tema="trabajador"] .cielo .foto { filter: saturate(.15) brightness(.9); }
html[data-fondo][data-tema] .hero::before { background: linear-gradient(180deg, rgba(0,0,0,0) 72%, rgba(var(--velo-rgb, 13,10,28), .85) 100%); }
/* figuras grandes al lado de la foto cuando el texto va a la derecha */
html[data-portada="derecha"][data-tema="dieciocho"] .t-2, html[data-portada="derecha"][data-tema="dieciocho"] .t-4,
html[data-portada="derecha"][data-tema="halloween"] .t-2,
html[data-portada="derecha"][data-tema="navidad"] .t-2,
html[data-portada="derecha"][data-tema="invierno"] .t-3,
html[data-portada="derecha"][data-tema="trabajador"] .t-2 { right: auto; left: 3%; }
html[data-portada="derecha"][data-tema="verano"] .t-1, html[data-portada="derecha"][data-tema="verano"] .t-2 { right: auto; left: 6%; }
html[data-portada="derecha"][data-tema="anonuevo"] .t-2 { right: auto; left: 18%; top: 3%; }
html[data-portada="derecha"][data-tema="anonuevo"] .t-3 { left: 6%; }
html[data-portada="derecha"][data-tema="halloween"] .t-3 { left: auto; right: 0; }
/* la guirnalda y las banderitas de arriba cruzan hacia el lado de la foto */
html[data-portada="derecha"][data-tema="dieciocho"] .t-1, html[data-portada="derecha"][data-tema="navidad"] .t-1 { left: 0; width: min(44%, 620px); }