/* ═══════════════════════════════════════════════════════════════════════════
   La Reineta · la capa de Navidad
   Solo la cargan la portada y /navidad/. Cambia la piel a verde abeto y oro
   sin tocar la hoja principal: los mismos componentes, otro traje.
   ═══════════════════════════════════════════════════════════════════════════ */

/* La paleta va en :root para que la puedan usar TODOS los bloques de la
   campana (.nv-banda, .adv, .guia...), no solo los que llevan .nav-tema. */
:root{
  --abeto-1:#0d241c;
  --abeto-2:#173b2d;
  --abeto-3:#22513e;
  --oro-nv:#d3b165;
  --oro-alto:#f0dcae;
  --rojo-nv:#c8202a;
}
.nav-tema{background:var(--abeto-1);color:#f2e9da}
.nav-tema h1,.nav-tema h2,.nav-tema h3{color:#fff}
.nav-tema .lede{color:rgba(242,233,218,.76)}
.nav-tema .kicker{color:var(--oro-nv)}
.nav-tema .mas{color:var(--oro-nv)}
.nav-tema .sep{color:rgba(211,177,101,.28)}
.nav-tema .sep__mz{color:var(--rojo-nv);opacity:1}
.nav-tema .sep__t{color:var(--oro-nv)}

/* ── nevada ──────────────────────────────────────────────────────────────
   Doce copos en CSS puro, sin canvas ni librería. Cada uno con su retardo y
   su deriva. Se apaga entero si el sistema pide menos movimiento.          */
.nieve{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.nieve i{position:absolute;top:-12%;width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle at 32% 30%,#fff,rgba(255,255,255,.28));
  animation:cae linear infinite;opacity:0}
@keyframes cae{
  0%{transform:translate3d(0,0,0) scale(.7);opacity:0}
  8%{opacity:.85}
  92%{opacity:.5}
  100%{transform:translate3d(var(--dx,30px),115vh,0) scale(1);opacity:0}
}
.nieve i:nth-child(1) {left:4%; --dx:40px;  animation-duration:15s; animation-delay:0s;    width:5px;height:5px}
.nieve i:nth-child(2) {left:13%;--dx:-30px; animation-duration:21s; animation-delay:-3s;   width:8px;height:8px}
.nieve i:nth-child(3) {left:22%;--dx:55px;  animation-duration:17s; animation-delay:-7s}
.nieve i:nth-child(4) {left:31%;--dx:-45px; animation-duration:24s; animation-delay:-1s;   width:4px;height:4px}
.nieve i:nth-child(5) {left:40%;--dx:25px;  animation-duration:19s; animation-delay:-11s;  width:7px;height:7px}
.nieve i:nth-child(6) {left:49%;--dx:-60px; animation-duration:16s; animation-delay:-5s}
.nieve i:nth-child(7) {left:58%;--dx:35px;  animation-duration:23s; animation-delay:-14s;  width:9px;height:9px}
.nieve i:nth-child(8) {left:67%;--dx:-25px; animation-duration:18s; animation-delay:-2s;   width:4px;height:4px}
.nieve i:nth-child(9) {left:76%;--dx:50px;  animation-duration:20s; animation-delay:-9s}
.nieve i:nth-child(10){left:85%;--dx:-40px; animation-duration:26s; animation-delay:-6s;   width:6px;height:6px}
.nieve i:nth-child(11){left:92%;--dx:20px;  animation-duration:14s; animation-delay:-12s;  width:5px;height:5px}
.nieve i:nth-child(12){left:97%;--dx:-35px; animation-duration:22s; animation-delay:-4s;   width:7px;height:7px}
@media (prefers-reduced-motion:reduce){.nieve{display:none}}

/* ── hero de Navidad ────────────────────────────────────────────────── */
.nv-hero{position:relative;isolation:isolate;overflow:hidden;
  min-height:min(90vh,820px);display:grid;align-items:center;color:#fff}
.nv-hero__bg{position:absolute;inset:0;z-index:-2}
.nv-hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 45%;
  transform:scale(1.05)}
.nv-hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(120% 80% at 70% 20%,rgba(211,177,101,.16),transparent 60%),
    linear-gradient(120deg,rgba(9,26,20,.93) 0%,rgba(9,26,20,.7) 42%,rgba(9,26,20,.34) 100%)}
.nv-hero__in{position:relative;z-index:2;width:min(100% - 40px,var(--wrap));margin-inline:auto;
  padding:clamp(60px,7vw,100px) 0;max-width:min(100%,760px)}
.nv-hero h1{font-size:clamp(42px,7.4vw,96px);line-height:.98;margin-bottom:22px;text-wrap:balance}
.nv-hero h1 em{display:block;font-style:italic;
  background:linear-gradient(94deg,var(--oro-alto),var(--oro-nv) 55%,#a9832f);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.nv-hero .lede{color:rgba(255,255,255,.86);font-size:clamp(16px,1.6vw,20px)}
.nv-hero__btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}

/* corona de laurel de la etiqueta */
.nv-sello{display:inline-flex;align-items:center;gap:12px;padding:9px 18px 9px 12px;
  border:1px solid rgba(211,177,101,.45);border-radius:40px;margin-bottom:26px;
  font:500 11.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  color:var(--oro-alto);background:rgba(211,177,101,.08);backdrop-filter:blur(4px)}
.nv-sello .mz{width:17px;color:var(--rojo-nv)}

/* ── cuenta atrás ───────────────────────────────────────────────────── */
.cuenta{display:flex;gap:10px}
.cuenta__u{display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:76px;padding:14px 10px;background:rgba(255,255,255,.07);
  border:1px solid rgba(211,177,101,.3);border-radius:var(--r);backdrop-filter:blur(6px)}
.cuenta__u b{font:600 30px/1 var(--display);color:var(--oro-alto);font-variant-numeric:tabular-nums}
.cuenta__u i{margin-top:6px;font:400 10.5px/1 var(--sans);letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.6);font-style:normal}
.cuenta--claro .cuenta__u{background:var(--papel);border-color:var(--linea)}
.cuenta--claro .cuenta__u b{color:var(--manzana)}
.cuenta--claro .cuenta__u i{color:var(--tinta-3)}
@media (max-width:520px){.cuenta__u{min-width:62px;padding:11px 7px}
  .cuenta__u b{font-size:24px}.cuenta__u i{font-size:9.5px}}

/* ── calendario de adviento ─────────────────────────────────────────── */
.adv{position:relative;padding:clamp(56px,7vw,100px) 0;
  background:linear-gradient(175deg,var(--abeto-2) 0%,var(--abeto-1) 70%)}
.adv__head{text-align:center;max-width:60ch;margin:0 auto clamp(32px,4vw,56px)}
.adv__head .lede{margin-inline:auto}
.adv__rej{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(8px,1vw,14px)}
@media (max-width:900px){.adv__rej{grid-template-columns:repeat(4,1fr)}}
@media (max-width:520px){.adv__rej{grid-template-columns:repeat(3,1fr);gap:7px}}

.casilla{position:relative;aspect-ratio:1;display:grid;place-items:center;
  border:1px solid rgba(211,177,101,.28);background:rgba(255,255,255,.035);
  border-radius:var(--r);transition:var(--tr);overflow:hidden;text-align:center;padding:8px}
.casilla__n{font:600 clamp(20px,2.4vw,32px)/1 var(--display);color:var(--oro-nv);
  transition:var(--tr)}
.casilla--abierta{cursor:pointer;border-color:rgba(211,177,101,.5)}
.casilla--abierta:hover{background:rgba(211,177,101,.14);transform:translateY(-3px);
  box-shadow:0 12px 30px rgba(0,0,0,.35)}
.casilla--abierta:hover .casilla__n{color:var(--oro-alto);transform:scale(1.1)}
.casilla--hoy{border-color:var(--rojo-nv);background:rgba(200,32,42,.16);
  animation:late 2.6s ease-in-out infinite}
@keyframes late{50%{box-shadow:0 0 0 6px rgba(200,32,42,.13)}}
.casilla--hoy .casilla__n{color:#fff}
.casilla--cerrada{opacity:.42;cursor:not-allowed}
.casilla--cerrada .casilla__n{color:rgba(255,255,255,.4)}
.casilla__lock{position:absolute;bottom:8px;width:13px;height:13px;
  stroke:rgba(255,255,255,.35);stroke-width:1.6;fill:none}
.casilla__et{position:absolute;top:6px;left:6px;padding:3px 7px;border-radius:3px;
  background:var(--rojo-nv);color:#fff;font:500 8.5px/1.4 var(--sans);
  letter-spacing:.1em;text-transform:uppercase}
.casilla__mini{position:absolute;inset:0;opacity:0;transition:var(--tr)}
.casilla__mini img{width:100%;height:100%;object-fit:cover}
.casilla--abierta:hover .casilla__mini{opacity:.22}

/* panel que se abre al pulsar una casilla */
.adv-panel{position:fixed;inset:0;z-index:150;display:none;place-items:center;padding:20px}
.adv-panel[open],.adv-panel.ver{display:grid}
.adv-panel__velo{position:absolute;inset:0;background:rgba(6,16,12,.86);backdrop-filter:blur(6px)}
.adv-panel__caja{position:relative;width:min(100%,620px);background:var(--hueso);
  border:1px solid var(--oro-nv);box-shadow:0 40px 100px rgba(0,0,0,.6);
  display:grid;grid-template-columns:1fr 1fr;overflow:hidden;
  animation:aparece .34s cubic-bezier(.2,.9,.3,1)}
@keyframes aparece{from{opacity:0;transform:translateY(20px) scale(.97)}}
.adv-panel__ph{position:relative;background:var(--linea);min-height:260px}
.adv-panel__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.adv-panel__ph .card__ilu{padding:22%}
.adv-panel__b{padding:32px 30px;color:var(--tinta)}
.adv-panel__d{font:500 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  color:var(--manzana);margin-bottom:12px}
.adv-panel__b h3{font-size:25px;margin-bottom:12px;color:var(--tinta)}
.adv-panel__b p{font-size:15px;color:var(--tinta-2);line-height:1.65}
.adv-panel__pr{display:flex;align-items:baseline;gap:10px;margin:16px 0 20px;
  font:600 24px/1 var(--display)}
.adv-panel__pr s{font:400 16px/1 var(--sans);color:var(--tinta-3)}
.adv-panel__x{position:absolute;top:12px;right:12px;z-index:2;width:38px;height:38px;
  display:grid;place-items:center;background:rgba(255,255,255,.9);border-radius:50%;color:var(--tinta)}
.adv-panel__x:hover{background:var(--tinta);color:#fff}
@media (max-width:600px){.adv-panel__caja{grid-template-columns:1fr}
  .adv-panel__ph{min-height:190px}.adv-panel__b{padding:24px 22px}}

/* ── bloque de campaña en portada ───────────────────────────────────── */
.nv-banda{position:relative;overflow:hidden;
  background:linear-gradient(160deg,var(--abeto-3) 0%,var(--abeto-1) 62%);color:#f2e9da}
.nv-banda h2{color:#fff}
.nv-banda .lede{color:rgba(242,233,218,.76)}
.nv-banda .card__ph{border-color:rgba(211,177,101,.24);background:rgba(255,255,255,.04)}
.nv-banda .card__m{color:var(--oro-nv)}
.nv-banda .card__t a{color:#fff}
.nv-banda .card__t a:hover{color:var(--oro-alto)}
.nv-banda .card__p{color:#f2e9da}
.nv-banda .card__p s{color:rgba(242,233,218,.5)}
.nv-banda .card__add{border-color:rgba(211,177,101,.5);color:var(--oro-alto)}
.nv-banda .card__add:hover{background:var(--oro-nv);border-color:var(--oro-nv);color:#1a1207}
.nv-banda .card__ilu{background:linear-gradient(155deg,#1d4535,#0f2820)}
.nv-banda .ilu__g{stroke:var(--oro-nv);opacity:.42}
.nv-banda .tag{background:var(--oro-nv);color:#1a1207}
.nv-banda .tag--off{background:var(--rojo-nv);color:#fff}

/* ── guías de regalo de la campaña ──────────────────────────────────── */
.guias{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px)}
.guia{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:280px;padding:28px 26px;overflow:hidden;color:#fff;
  border:1px solid rgba(211,177,101,.26);transition:var(--tr)}
.guia:hover{border-color:var(--oro-nv);transform:translateY(-4px)}
.guia img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .8s;z-index:-2}
.guia:hover img{transform:scale(1.07)}
.guia::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(9,26,20,.25) 30%,rgba(9,26,20,.9) 100%)}
.guia h3{font-size:23px;margin-bottom:8px}
.guia p{margin:0 0 14px;font-size:14px;color:rgba(255,255,255,.75)}
.guia .mas{color:var(--oro-alto);font-size:12px}
@media (max-width:880px){.guias{grid-template-columns:1fr}}

/* ── el pueblo de porcelana: fila destacada ─────────────────────────── */
.pueblo{position:relative;padding:clamp(50px,6vw,90px) 0;
  background:linear-gradient(180deg,#0b1f18,#0d241c)}
.pueblo__sil{display:flex;align-items:flex-end;justify-content:center;gap:clamp(6px,1.4vw,22px);
  margin-top:44px;padding-bottom:22px;border-bottom:1px solid rgba(211,177,101,.22)}
.pueblo__sil a{display:block;transition:var(--tr);position:relative}
.pueblo__sil .ilu{width:clamp(52px,7.6vw,104px)}
.pueblo__sil .ilu__g{stroke:var(--oro-nv);opacity:.45;stroke-width:1.9}
.pueblo__sil a:hover{transform:translateY(-8px)}
.pueblo__sil a:hover .ilu__g{stroke:var(--oro-alto);opacity:1}
.pueblo__sil a::after{content:attr(data-t);position:absolute;left:50%;bottom:-10px;
  transform:translate(-50%,6px);white-space:nowrap;opacity:0;transition:var(--tr);
  font:500 10.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--oro-alto)}
.pueblo__sil a:hover::after{opacity:1;transform:translate(-50%,0)}
@media (max-width:640px){.pueblo__sil{flex-wrap:wrap;gap:14px}}

/* ── franja de urgencia ─────────────────────────────────────────────── */
.urgencia{background:var(--rojo-nv);color:#fff;padding:16px 0;text-align:center;
  font:500 14px/1.5 var(--sans);letter-spacing:.03em}
.urgencia b{font-weight:600}
.urgencia a{border-bottom:1px solid rgba(255,255,255,.5)}
.urgencia a:hover{border-color:#fff}

/* ── ajustes al sistema "Escaparate" ──────────────────────────────────
   La capa de Navidad hereda del sistema principal: minúsculas, cantos
   vivos y el número de sección. Aquí solo se cambia el color. */
.nv-hero h1,.nv-hero h2,.adv h2,.pueblo h2{text-transform:lowercase}
.nv-hero h1 em{letter-spacing:-.05em}
.nav-tema .sec-head{border-color:rgba(211,177,101,.3)}
.nav-tema .sec-head::before{color:var(--oro-nv);opacity:.3}
.nv-sello{border-radius:0}
.cuenta__u{border-radius:0}
.cuenta__u b{letter-spacing:-.04em}
.casilla{border-radius:0}
.adv-panel__caja{border-radius:0}
.adv-panel__b h3{text-transform:lowercase;letter-spacing:-.035em}
.adv-panel__x{border-radius:0}
.adv-panel__pr{font-family:var(--display);letter-spacing:-.04em}
.guia h3{text-transform:lowercase;letter-spacing:-.035em}
.nv-banda .sec-head{border-color:rgba(211,177,101,.3)}
.nv-banda .sec-head::before{color:var(--oro-nv);opacity:.3}
.nv-banda .card__ph,.nv-banda .card__ilu{background:#123326}
.nv-banda .card__ilu{background-image:repeating-linear-gradient(45deg,rgba(232,207,148,.1) 0 2px,transparent 2px 11px)}
.nv-banda .ilu__g{stroke:var(--oro-alto);opacity:.6}
.nv-banda .card__t a{color:#fff}
.nv-banda .card__t a:hover{color:var(--oro-alto)}
.nv-banda .card__c{color:rgba(242,236,226,.5)}
.nv-banda .card__pegatina{background:var(--oro-nv);color:#191308;box-shadow:0 8px 22px rgba(0,0,0,.35)}
.nv-banda .card__pegatina s{color:rgba(25,19,8,.6)}
.nv-banda .card__add{background:var(--oro-nv);color:#191308}
.nv-banda .card__add:hover{background:#fff;color:var(--abeto-1)}
.nv-banda .tag{background:var(--oro-nv);color:#191308}
.nv-banda .tag--off{background:var(--rojo-nv);color:#fff}
.nav-tema .card__ph,.nav-tema .card__ilu{background:#0f2b21}
.nav-tema .card__ilu{background-image:repeating-linear-gradient(45deg,rgba(232,207,148,.1) 0 2px,transparent 2px 11px)}
.nav-tema .ilu__g{stroke:var(--oro-alto);opacity:.6}
.nav-tema .card__t a{color:#fff}
.nav-tema .card__t a:hover{color:var(--oro-alto)}
.nav-tema .card__c{color:rgba(242,236,226,.5)}
.nav-tema .card__pegatina{background:var(--oro-nv);color:#191308;box-shadow:0 8px 22px rgba(0,0,0,.35)}
.nav-tema .card__pegatina s{color:rgba(25,19,8,.6)}
.nav-tema .card__add{background:var(--oro-nv);color:#191308}
.nav-tema .card__add:hover{background:#fff;color:var(--abeto-1)}
.nav-tema .tag{background:var(--oro-nv);color:#191308}
.nav-tema .tag--off{background:var(--rojo-nv);color:#fff}
.urgencia{background:var(--rojo-nv);font-family:var(--sans)}

.nv-banda .card__ilu--t1,.nav-tema .card__ilu--t1{background-color:#123326}
.nv-banda .card__ilu--t2,.nav-tema .card__ilu--t2{background-color:#0f2b21}
.nv-banda .card__ilu--t3,.nav-tema .card__ilu--t3{background-color:#173b2d}
.nv-banda .card__ilu--t4,.nav-tema .card__ilu--t4{background-color:#2a1817}
/* La etiqueta de la puerta se metía debajo del botón de cerrar. */
.adv-panel__d{padding-right:46px;text-transform:none;letter-spacing:.01em;
  font:700 13px/1.3 var(--sans);color:var(--manzana)}