/* ============================================================
   Omniscient Scan — capa de Navidad (se carga DESPUÉS de todo)
   Capas:
   · html.xm-season → mejoras de UX/accesibilidad (activas toda la temporada)
   · html.xm-on     → decoración (se apaga con el botón o con el interruptor)
   · html.xm-snow   → nieve (canvas, lo crea navidad.js)
   Animaciones: SOLO transform y opacity.
   ============================================================ */
:root{
  --xm-red:#b3202f; --xm-red-2:#7d1220;
  --xm-green:#1f5a3f; --xm-green-2:#2f7a52;
  --xm-gold:#e8c872; --xm-gold-2:#f6e2a4;
  --xm-snow:#f6fbff; --xm-frost:rgba(205,230,255,.16);
}

/* ---------- UX: foco visible, estados activos, entrada suave ---------- */
html.xm-season :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--xm-gold); outline-offset:2px; border-radius:6px;
}
html.xm-season :is(button,.btn,.nav-link,.nav-btn,.obra-nav-pill,.social-icon):active{transform:scale(.97)}
@keyframes xm-in{from{opacity:.001;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  html.xm-page-home .page-shell,
  html.xm-page-obra main.wrap{animation:xm-in .45s cubic-bezier(.22,.8,.22,1) both}
}

/* ---------- Luces en la parte superior (fijas, sin ocupar espacio) ---------- */
.xm-lights,.xm-bg,.xm-hat,.xm-snow-canvas{display:none}
html.xm-on .xm-lights{display:block;position:fixed;left:0;right:0;top:0;height:22px;z-index:70;pointer-events:none}
html.xm-on .xm-lights i{position:absolute;left:0;right:0;top:0;height:22px;display:block}
html.xm-on .xm-wire{
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='14'%3E%3Cpath d='M0 1 Q30 15 60 1' fill='none' stroke='%23244d38' stroke-width='1.6'/%3E%3C/svg%3E") repeat-x 0 0/60px 14px;
}
html.xm-on .xm-bulbs{background-repeat:repeat-x;background-size:240px 22px}
html.xm-on .xm-a{
  background-image:
    radial-gradient(circle at 30px 13px,#ff6670 0 2.6px,rgba(255,102,112,.38) 3px 5.5px,transparent 6.5px),
    radial-gradient(circle at 150px 13px,#5fd08e 0 2.6px,rgba(95,208,142,.36) 3px 5.5px,transparent 6.5px);
  animation:xm-twinkle 2.6s ease-in-out infinite;
}
html.xm-on .xm-b{
  background-image:
    radial-gradient(circle at 90px 13px,#ffd978 0 2.6px,rgba(255,217,120,.38) 3px 5.5px,transparent 6.5px),
    radial-gradient(circle at 210px 13px,#e9f4ff 0 2.6px,rgba(233,244,255,.34) 3px 5.5px,transparent 6.5px);
  animation:xm-twinkle 2.6s ease-in-out -1.3s infinite;
}
@keyframes xm-twinkle{0%,100%{opacity:.4}50%{opacity:1}}
html.xm-on body.immersive .xm-lights{display:none}

/* ---------- Fondo: degradado suave y destellos (detrás de todo) ---------- */
html.xm-on:not(.xm-page-reader) .xm-bg{
  display:block;position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 42% at 6% -6%,rgba(179,32,47,.20),transparent 72%),
    radial-gradient(ellipse 55% 42% at 96% 106%,rgba(31,90,63,.24),transparent 72%),
    linear-gradient(180deg,rgba(232,200,114,.035),transparent 45%);
}
html.xm-on .xm-bg i{
  position:absolute;width:8px;height:8px;background:var(--xm-gold-2);opacity:.15;
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
  animation:xm-spark 4.8s ease-in-out infinite;
}
html.xm-on .xm-bg i:nth-child(2n){animation-delay:-1.6s;width:6px;height:6px}
html.xm-on .xm-bg i:nth-child(3n){animation-delay:-3.1s}
@keyframes xm-spark{0%,100%{opacity:.1;transform:scale(.7)}50%{opacity:.75;transform:scale(1.15)}}
html.xm-on.xm-page-reader .xm-bg{display:none}

/* ---------- Nieve (canvas creado por navidad.js) ---------- */
html.xm-on.xm-snow .xm-snow-canvas{display:block;position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}

/* ---------- Gorro de Santa sobre el logo ---------- */
html.xm-on .xm-has-hat{position:relative}
html.xm-on .xm-hat{display:block;position:absolute;pointer-events:none;z-index:3;width:28px;height:24px;left:6px;top:-9px;transform:rotate(-14deg);transform-origin:50% 100%}
html.xm-on .xm-hat svg{display:block;width:100%;height:100%}
html.xm-on.xm-page-reader .xm-hat{width:20px;height:17px;left:-5px;top:-9px}
@media (max-width:640px){html.xm-on .xm-hat{width:22px;height:19px;left:4px;top:-7px}}

/* ---------- Banner de bienvenida (solo inicio) ---------- */
.xm-banner{display:none}
html.xm-on:not(.xm-nobanner) .xm-banner{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;position:relative;min-height:76px;
  margin:0 0 18px;padding:14px 52px 14px 18px;border-radius:14px;color:#fff6e4;
  background:linear-gradient(120deg,#7d1220 0%,#a01c2c 46%,#1f5a3f 100%);
  border:1px solid rgba(232,200,114,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
html.xm-on .xm-banner-ornament{
  flex:none;width:34px;height:34px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg stroke='%23f6e2a4' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M20 4v32M5.5 12l29 16M5.5 28l29-16'/%3E%3Cpath d='M20 9l-4-3M20 9l4-3M20 31l-4 3M20 31l4 3' stroke-width='1.6'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='3' fill='%23fff6e4'/%3E%3C/svg%3E") center/contain no-repeat;
}
html.xm-on .xm-banner-copy{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 220px}
html.xm-on .xm-banner-copy strong{font-size:16px;letter-spacing:.02em;color:var(--xm-gold-2)}
html.xm-on .xm-banner-copy span{font-size:13px;opacity:.92}
html.xm-on .xm-count{display:flex;gap:8px}
html.xm-on .xm-count span{display:flex;flex-direction:column;align-items:center;min-width:52px;padding:6px 8px;border-radius:10px;background:rgba(5,4,10,.38);border:1px solid rgba(246,226,164,.28)}
html.xm-on .xm-count b{font-size:20px;line-height:1.1;font-variant-numeric:tabular-nums;color:#fff}
html.xm-on .xm-count small{font-size:10px;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
html.xm-on .xm-banner-close{
  position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(246,226,164,.35);background:rgba(5,4,10,.3);color:#fff6e4;font-size:18px;line-height:1;
}
html.xm-on .xm-banner-close:hover{background:rgba(5,4,10,.5)}

/* ---------- Tarjetas: escarcha y brillo al pasar el ratón ---------- */
html.xm-on:not(.xm-page-reader) :where(.sc-card,.side-panel,.support-panel){position:relative}
html.xm-on:not(.xm-page-reader) :is(.work-card,.sc-card,.chapter,.side-panel,.support-panel){
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px var(--xm-frost);
}
html.xm-on:not(.xm-page-reader) :is(.work-card,.sc-card,.chapter,.side-panel,.support-panel)::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;z-index:2;
  background:
    linear-gradient(155deg,rgba(255,255,255,.16),transparent 34%,transparent 68%,rgba(190,225,255,.12)),
    radial-gradient(circle at 18% 14%,rgba(255,255,255,.22) 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 82% 26%,rgba(246,226,164,.30) 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 64% 84%,rgba(255,255,255,.20) 0 1.5px,transparent 2.5px);
  transition:opacity .35s ease;
}
html.xm-on:not(.xm-page-reader) :is(.work-card,.sc-card,.chapter,.side-panel,.support-panel):hover::after,
html.xm-on:not(.xm-page-reader) :is(.work-card,.sc-card,.chapter):focus-within::after{opacity:1}

/* ---------- Botones con degradado cálido ---------- */
html.xm-on:not(.xm-page-reader) :is(.btn.primary,.sc-open){
  background-image:linear-gradient(135deg,#b3202f,#d2552f 55%,#e8a24a);
  border-color:rgba(246,226,164,.5);color:#fff8ea;
}
html.xm-on:not(.xm-page-reader) :is(.btn.primary,.sc-open):hover{filter:none;background-image:linear-gradient(135deg,#c42a3a,#e0663a 55%,#f0b058)}

/* ---------- Separadores: acebo en títulos y copos en el pie ---------- */
html.xm-on:not(.xm-page-reader) .section-heading h2::after{
  content:"";display:inline-block;width:26px;height:16px;margin-left:10px;vertical-align:-2px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 32'%3E%3Cpath d='M26 18C20 6 8 4 2 10c4 10 14 14 24 8z' fill='%232f7a52'/%3E%3Cpath d='M26 18c6-12 18-14 24-8-4 10-14 14-24 8z' fill='%231f5a3f'/%3E%3Ccircle cx='26' cy='20' r='4.2' fill='%23c9283a'/%3E%3Ccircle cx='20' cy='24' r='3.4' fill='%23b3202f'/%3E%3Ccircle cx='32' cy='24' r='3.4' fill='%23b3202f'/%3E%3C/svg%3E") center/contain no-repeat;
}
html.xm-on .site-footer{position:relative}
html.xm-on .site-footer::before{
  content:"";position:absolute;left:0;right:0;top:-8px;height:14px;pointer-events:none;opacity:.6;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='14'%3E%3Cg stroke='%23dff0ff' stroke-width='1.3' stroke-linecap='round' fill='none'%3E%3Cpath d='M22 2v10M17.7 4.5l8.6 5M17.7 9.5l8.6-5'/%3E%3C/g%3E%3Ccircle cx='4' cy='7' r='1.2' fill='%23e8c872'/%3E%3C/svg%3E") repeat-x center/44px 14px;
}

/* ---------- Botón discreto para decoración / nieve (lo crea navidad.js) ---------- */
.xm-toggle{
  position:fixed;left:12px;bottom:12px;z-index:80;display:flex;gap:4px;padding:4px;border-radius:999px;
  background:rgba(8,6,14,.72);border:1px solid rgba(232,200,114,.3);opacity:.55;transition:opacity .2s ease;
}
.xm-toggle:hover,.xm-toggle:focus-within{opacity:1}
.xm-toggle button{
  width:30px;height:30px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;
  background:transparent;color:#cfc6d8;font-size:15px;line-height:1;
}
.xm-toggle button[aria-pressed="true"]{background:linear-gradient(135deg,#b3202f,#1f5a3f);color:#fff6e4}
html.xm-page-reader .xm-toggle{left:auto;right:12px;bottom:76px}
@media (max-width:640px){.xm-toggle{left:8px;bottom:8px}}
body.immersive .xm-toggle{display:none}

/* ---------- Reducir movimiento / modo rendimiento ---------- */
@media (prefers-reduced-motion:reduce){
  html.xm-season *,html.xm-season *::before,html.xm-season *::after{scroll-behavior:auto!important}
  html.xm-on .xm-a,html.xm-on .xm-b,html.xm-on .xm-bg i{animation:none!important;opacity:.8}
  html.xm-on .xm-snow-canvas{display:none!important}
}
html.omni-perf.xm-on .xm-a,html.omni-perf.xm-on .xm-b,html.omni-perf.xm-on .xm-bg i{animation:none!important;opacity:.8}
html.omni-perf.xm-on .xm-snow-canvas{display:none!important}


/* ============================================================
   EXTRA v2 — más decoración (sigue usando solo transform/opacity)
   ============================================================ */

/* Bolas colgantes que se mecen (solo pantallas anchas, en los huecos laterales) */
.xm-orns{display:none}
@media (min-width:1360px){
  html.xm-on:not(.xm-page-reader) .xm-orns{display:block;position:fixed;left:0;right:0;top:14px;height:50px;z-index:70;pointer-events:none}
  html.xm-on .xm-orn{position:absolute;top:0;width:24px;height:46px;background-repeat:no-repeat;background-size:contain;transform-origin:50% 0;animation:xm-swing 3.6s ease-in-out infinite alternate}
  html.xm-on .xm-orn.o1{left:1.6%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 46'%3E%3Cpath d='M12 0v17' stroke='%23e8c872' stroke-width='1.2'/%3E%3Crect x='8.5' y='16' width='7' height='5' rx='1.2' fill='%23e8c872'/%3E%3Ccircle cx='12' cy='32' r='11' fill='%23b3202f'/%3E%3Cpath d='M5 30a8 8 0 0 1 6-8' stroke='%23fff' stroke-opacity='.45' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M3 36q9 6 18 0' stroke='%23e8c872' stroke-width='1.6' fill='none'/%3E%3C/svg%3E")}
  html.xm-on .xm-orn.o2{left:5%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 46'%3E%3Cpath d='M12 0v17' stroke='%23e8c872' stroke-width='1.2'/%3E%3Crect x='8.5' y='16' width='7' height='5' rx='1.2' fill='%23e8c872'/%3E%3Ccircle cx='12' cy='32' r='11' fill='%231f5a3f'/%3E%3Cpath d='M5 30a8 8 0 0 1 6-8' stroke='%23fff' stroke-opacity='.45' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M3 36q9 6 18 0' stroke='%23e8c872' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");animation-delay:-1.2s;transform:scale(.85)}
  html.xm-on .xm-orn.o3{right:5%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 46'%3E%3Cpath d='M12 0v17' stroke='%23e8c872' stroke-width='1.2'/%3E%3Crect x='8.5' y='16' width='7' height='5' rx='1.2' fill='%23e8c872'/%3E%3Ccircle cx='12' cy='32' r='11' fill='%23d9a93c'/%3E%3Cpath d='M5 30a8 8 0 0 1 6-8' stroke='%23fff' stroke-opacity='.45' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M3 36q9 6 18 0' stroke='%23b3202f' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");animation-delay:-2.1s;transform:scale(.85)}
  html.xm-on .xm-orn.o4{right:1.6%;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 46'%3E%3Cpath d='M12 0v17' stroke='%23e8c872' stroke-width='1.2'/%3E%3Crect x='8.5' y='16' width='7' height='5' rx='1.2' fill='%23e8c872'/%3E%3Ccircle cx='12' cy='32' r='11' fill='%23b3202f'/%3E%3Cpath d='M5 30a8 8 0 0 1 6-8' stroke='%23fff' stroke-opacity='.45' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M3 36q9 6 18 0' stroke='%23e8c872' stroke-width='1.6' fill='none'/%3E%3C/svg%3E");animation-delay:-.6s}
}
@keyframes xm-swing{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}

/* Nieve acumulada sobre el borde superior de tarjetas y paneles */
html.xm-on:not(.xm-page-reader) :is(.work-card,.sc-card,.side-panel)::before{
  content:"";position:absolute;left:0;right:0;top:0;height:10px;z-index:3;pointer-events:none;opacity:.92;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M0 0H120V3Q114 9 106 5T92 6Q84 10 76 6T62 6Q54 10 46 5T32 6Q24 10 16 5T4 5Q2 5 0 3Z' fill='%23f6fbff'/%3E%3C/svg%3E") repeat-x 0 0/120px 10px;
}

/* Banner: borde de bastón de caramelo y estrellita dorada */
html.xm-on:not(.xm-nobanner) .xm-banner::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:4px;border-radius:0 0 14px 14px;pointer-events:none;opacity:.9;
  background:repeating-linear-gradient(135deg,#f6fbff 0 8px,#c9283a 8px 16px);
}
html.xm-on .xm-banner-copy strong::before{content:"\2726\00a0";color:var(--xm-gold)}

/* Pie: montoncitos de nieve en la base */
html.xm-on .site-footer::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:12px;pointer-events:none;opacity:.85;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 12' preserveAspectRatio='none'%3E%3Cpath d='M0 12V8Q10 2 24 7T52 6T80 8T108 5T136 7T160 6V12Z' fill='%23f6fbff' fill-opacity='.9'/%3E%3C/svg%3E") repeat-x 0 100%/160px 12px;
}

/* Etiquetas de sección con un detalle dorado */
html.xm-on:not(.xm-page-reader) .section-label{text-shadow:none;color:var(--xm-gold-2)}

@media (prefers-reduced-motion:reduce){html.xm-on .xm-orn{animation:none!important}}
html.omni-perf.xm-on .xm-orn{animation:none!important}