/* =====================================================================
   LAS TEMPORADAS (24-9-2026): catálogos aparte, con su ambientación.
   El porqué entero vive en `mood/temporadas.py`.

   Esta hoja solo la descarga el catálogo, y solo cuando hay alguna
   temporada que enseñar: el resto de la tienda no paga sus bytes.

   TODO LO QUE SE MUEVE es transform u opacity: es lo que un teléfono viejo
   pinta sin despeinarse (medido con el procesador frenado seis veces). Con
   «reducir movimiento» encendido no se mueve nada, y sin JavaScript se ve
   igual: aquí no hay ni una línea de guion.
   ===================================================================== */

/* ---------- 1. El menú: la temporada activa ---------- */
/* «Temporadas» es UNA CATEGORÍA MÁS (dictado 24-9-2026) y no lleva nada
   propio: se pinta con las reglas de las demás. */
.cat-temporada a { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #b3470d; }
.cat-temporada.tema-navidad a { color: var(--fucsia); }
.cat-temporada .icono-temporada { width: 18px; height: 18px; flex: 0 0 auto; }

/* ---------- 2. El anuncio de la activa, encima del catálogo ---------- */
.cinta-temporada {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 14px; padding: 12px 14px; border-radius: 14px;
  background: linear-gradient(120deg, var(--morado) 0%, #3a1552 60%, var(--fucsia) 140%);
  color: #fff; text-decoration: none;
  box-shadow: 0 10px 24px -14px rgba(58, 21, 82, .9);
}
.cinta-temporada.tema-halloween {
  background: linear-gradient(120deg, #1b0f2e 0%, #3a1552 60%, #6b1d3f 100%);
}
.cinta-temporada:hover { text-decoration: none; color: #fff; }
.cinta-temporada .cinta-icono { width: 34px; height: 34px; flex: 0 0 auto; color: #fff;
  animation: latido 2.4s ease-in-out infinite; }
.cinta-temporada .cinta-textos { min-width: 0; flex: 1 1 auto; position: relative; z-index: 1; }
.cinta-temporada strong { display: block; font-size: 15px; line-height: 1.25; }
.cinta-temporada .sub {
  display: block; font-size: 12px; opacity: .85;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cinta-temporada .sub b { color: #ffb070; }
.cinta-temporada .flecha { font-size: 22px; opacity: .9; flex: 0 0 auto; }

/* EL AIRE DE ARRIBA EN LA COMPUTADORA (29-9-2026, Emmanuel: «solo en
   escritorio se ve pegado al header; déjale un espacio, se vería mejor»).
   Desde 900 px la cabecera es UNA fila sin relleno debajo y la cinta
   quedaba a 0 px de ella. En el teléfono y la tableta la fila del buscador
   ya deja su aire, y ahí no se toca. El mismo aire que a los lados (--e5). */
@media (min-width: 900px) {
  .cinta-temporada { margin-top: var(--e5); }
}

/* ---------- 2b. La tormenta del anuncio de Halloween (30-9-2026) ----------
   Encargo de Emmanuel: «mejora la animación del promocionado de Halloween,
   siento que la puedes hacer más profesional… algo como relámpagos, cosas de
   Halloween. Hay como un murciélago volando en bucle sin sentido. Que sea
   algo bien tenebroso». El murciélago que flotaba en su esquina se fue. Ahora
   la cinta es una noche con guion (los dibujos, en el parcial): relámpago que
   recorta la casa y el cementerio, bandada que sale de la casa CON el
   relámpago, niebla, nubes por la luna, velas que tiemblan y la bruja que
   cruza la luna de tarde en tarde.

   NI EL ALTO NI EL SITIO DE NADA CAMBIAN: toda la escena vive en una capa
   absoluta por DETRÁS del texto, de la calabaza y de la flecha. El texto
   lleva además su sombra oscura, para leerse igual si el relámpago le cae
   detrás. Todo lo que se mueve es transform u opacity de una caja; dentro de
   un dibujo, fill-opacity. */
.cinta-temporada.tema-halloween .cinta-icono {
  animation: none; filter: drop-shadow(0 0 5px rgba(255, 122, 26, .5)); transition: filter .35s;
}
.cinta-temporada.tema-halloween .cinta-textos {
  text-shadow: 0 1px 2px rgba(11, 6, 18, .9), 0 0 8px rgba(11, 6, 18, .75);
}
.cinta-escena {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  --luna-d: 20px; --luna-r: 36px; --luna-t: 6px;
}
.cinta-escena > * { position: absolute; }
/* El cielo que se enciende: una caja con su degradado, que solo cambia de
   opacity (la pinta el compositor). En reposo no está. */
.destello {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(70% 170% at calc(100% - 120px) 0%,
              rgba(196, 176, 255, .50) 0%, rgba(140, 112, 226, .30) 45%, rgba(104, 78, 190, .16) 100%);
  animation: relampago 23s linear infinite;
}
.rayo { position: absolute; top: 0; opacity: 0; pointer-events: none; animation: rayo-a 23s linear infinite; }
.rayo.r2 { animation-name: rayo-b; }
.rayo svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* En el teléfono el rayo cae en el hueco que deja el título, a la derecha, y
   se queda en el renglón de arriba; el segundo relámpago es solo de cielo. */
.cinta-escena .rayo.r1 { right: 58px; width: 16px; height: 46%; }
.cinta-escena .rayo.r2 { display: none; }
.cinta-luna {
  right: var(--luna-r); top: var(--luna-t); width: var(--luna-d); height: var(--luna-d);
  border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, #fff6d6 0%, #ffe39a 55%, #f5c86a 100%);
  box-shadow: 0 0 16px 4px rgba(255, 214, 120, .26);
  transition: box-shadow .35s;
}
.cinta-nube {
  right: calc(var(--luna-r) - 110px); top: calc(var(--luna-t) + var(--luna-d) * .42); width: 58px;
  animation: nube-pasa 36s linear infinite;
}
.cinta-nube.n2 { top: calc(var(--luna-t) - 3px); width: 40px; animation-duration: 52s; animation-delay: -30s; }
.cinta-paisaje { left: 0; top: 0; width: 100%; height: 100%; }
.cinta-paisaje .vela-casa { animation: llama 3.1s steps(1) infinite; }
.cinta-paisaje .vela-casa.v2 { animation-delay: -1.2s; }
/* En el teléfono más estrecho la casa cae detrás del título: sin luces. */
@media (max-width: 379.98px) {
  .cinta-paisaje .vela-casa { display: none; }
}
/* Los ojos que miran, solo donde no caen debajo de la letra. */
.cinta-paisaje .ojos { display: none; animation: ojos-miran 9s steps(1) infinite; }
.cinta-paisaje .ojos.o2 { animation-duration: 13s; animation-delay: -4s; }
.cinta-paisaje .ojos.o3 { animation-duration: 11s; animation-delay: -7s; }
.cinta-niebla {
  left: 0; bottom: -6px; width: 200%; height: 26px; opacity: .55;
  background:
    radial-gradient(22% 70% at 12% 100%, rgba(226, 212, 255, .34), transparent 72%),
    radial-gradient(18% 55% at 37% 100%, rgba(226, 212, 255, .26), transparent 72%),
    radial-gradient(22% 70% at 62% 100%, rgba(226, 212, 255, .34), transparent 72%),
    radial-gradient(18% 55% at 87% 100%, rgba(226, 212, 255, .26), transparent 72%);
  animation: niebla 40s linear infinite; transition: opacity .35s;
}
.cinta-niebla.n2 { height: 17px; opacity: .4; animation-duration: 63s; animation-direction: reverse; }
/* La araña baja por su hilo y vuelve a subir: solo donde hay sitio. */
.cinta-arana { display: none; right: 62px; top: 0; width: 13px; transform: translate3d(0, -12px, 0);
  animation: arana-baja 14s ease-in-out infinite; }
/* LA BANDADA: cinco murciélagos que salen del mismo punto —la casa— con el
   relámpago y se pierden. Cada uno con su rumbo (--bx, --by), su tamaño y
   unas centésimas de retraso, para que salgan en tropel y no en fila. El
   resto de la vuelta no están (escala cero). */
.bandada { position: absolute; width: 0; height: 0; pointer-events: none; }
.vuela {
  position: absolute; left: 0; top: 0; width: var(--w, 16px);
  margin: calc(var(--w, 16px) * -.25) 0 0 calc(var(--w, 16px) * -.5);
  transform: scale(0); animation: sale-bandada 23s linear var(--d, 0s) infinite;
}
.vuela svg { display: block; width: 100%; animation: aleteo .36s steps(2) infinite; }
.cinta-escena .bandada { right: 118px; top: 30px; }
.cinta-escena .vuela:nth-child(1) { --w: 20px; --bx: calc(-24cqw - 30px); --by: -22px; }
.cinta-escena .vuela:nth-child(2) { --w: 14px; --bx: calc(-10cqw - 24px); --by: -40px; --d: .08s; }
.cinta-escena .vuela:nth-child(3) { --w: 17px; --bx: calc(-38cqw - 40px); --by: -10px; --d: .16s; }
.cinta-escena .vuela:nth-child(4) { --w: 13px; --bx: 70px; --by: -34px; --d: .05s; }
.cinta-escena .vuela:nth-child(5) { --w: 22px; --bx: calc(-52cqw - 30px); --by: -28px; --d: .24s; }
/* La calabaza es un farol: la vela le tiembla en los ojos y en la boca, y
   con el relámpago se le encienden. Fuera de aquí la cara sigue oscura (las
   dos capas nacen con fill-opacity 0 en el dibujo). */
.cinta-temporada .llama,
.hero-temporada .calabaza-grande .llama { fill-opacity: .95; animation: llama 2.7s steps(1) infinite; }
.cinta-temporada .llama-rayo,
.hero-temporada .calabaza-grande .llama-rayo { animation: llama-rayo 23s linear infinite; }
@media (min-width: 640px) {
  /* Con sitio, la luna sale GRANDE detrás de la casa, los rayos caen enteros
     hasta el suelo (lejos del texto) y baja la araña. */
  .cinta-escena { --luna-d: 36px; --luna-r: 112px; --luna-t: 4px; }
  .cinta-escena .rayo.r1 { right: 196px; width: 34px; height: 100%; }
  .cinta-arana { display: block; }
}
@media (min-width: 900px) {
  .cinta-paisaje .ojos { display: inline; }
  .cinta-escena .rayo.r2 { display: block; right: 31%; width: 30px; height: 88%; }
}
/* Con el ratón encima (computadora), un punto más de todo: la luna y la
   calabaza brillan más y la niebla se espesa. */
@media (hover: hover) {
  .cinta-temporada.tema-halloween:hover .cinta-icono { filter: drop-shadow(0 0 10px rgba(255, 140, 40, .95)); }
  .cinta-temporada.tema-halloween:hover .cinta-luna { box-shadow: 0 0 26px 9px rgba(255, 214, 120, .42); }
  .cinta-temporada.tema-halloween:hover .cinta-niebla { opacity: .85; }
  .cinta-temporada.tema-halloween:hover .cinta-niebla.n2 { opacity: .65; }
}

/* ---------- 3. Las fichas dentro de «Temporadas» ---------- */
/* Entre las fichas no hay nada que ordenar: el selector del teléfono sobra
   (y en una temporada sin prendas, tampoco). */
.filtros-movil .oculto-temporadas { display: none; }
.cabeza-temporadas { margin: 4px 0 16px; }
.cabeza-temporadas h1 { margin: 0 0 4px; font-size: clamp(24px, 4vw, 32px); letter-spacing: -.02em; }
.cabeza-temporadas p { margin: 0; color: var(--tinta-2); }

.ficha-temporada .foto { isolation: isolate; }
.ficha-temporada-fondo {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: radial-gradient(120% 80% at 70% 10%, #4b1d6e 0%, transparent 60%),
              linear-gradient(180deg, var(--morado) 0%, #3a1552 100%);
  color: #fff; overflow: hidden;
}
.ficha-temporada-fondo .grande { width: 42%; height: auto; }
/* Las ilustraciones de cuando todavía no hay foto. */
.ficha-temporada-fondo.escena-halloween,
.ficha-temporada-fondo.escena-navidad { display: block; }
.ficha-temporada-fondo.escena-halloween {
  background: radial-gradient(80% 60% at 70% 18%, #5a2380 0%, transparent 60%),
              linear-gradient(180deg, #1b0f2e 0%, #2a1145 55%, #4a1740 100%);
}
.escena-ficha { position: absolute; inset: 0; width: 100%; height: 100%; }
.nieve-ficha { position: absolute; inset: 0; overflow: hidden; }
.nieve-ficha i {
  position: absolute; top: -8px; width: 5px; height: 5px; border-radius: 50%;
  background: #fff; opacity: .8; animation: nieva-ficha 7s linear infinite;
}
.nieve-ficha i:nth-child(1) { left: 8%;  animation-delay: -1s; }
.nieve-ficha i:nth-child(2) { left: 22%; animation-delay: -4s; width: 3px; height: 3px; }
.nieve-ficha i:nth-child(3) { left: 36%; animation-delay: -2.4s; }
.nieve-ficha i:nth-child(4) { left: 50%; animation-delay: -5.6s; width: 4px; height: 4px; }
.nieve-ficha i:nth-child(5) { left: 64%; animation-delay: -.6s; width: 3px; height: 3px; }
.nieve-ficha i:nth-child(6) { left: 76%; animation-delay: -3.3s; }
.nieve-ficha i:nth-child(7) { left: 88%; animation-delay: -6.1s; width: 4px; height: 4px; }
.nieve-ficha i:nth-child(8) { left: 95%; animation-delay: -2s; width: 3px; height: 3px; }

/* El velo oscuro de abajo es lo que deja leer el nombre sobre CUALQUIER foto. */
.ficha-temporada-velo {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent 45%, rgba(15, 6, 26, .78) 100%);
}
.ficha-temporada-sello {
  position: absolute; z-index: 2; left: 8px; top: 8px;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(27, 15, 46, .88); color: #fff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .25);
}
.ficha-temporada.tema-halloween .ficha-temporada-sello { box-shadow: 0 0 0 2px rgba(255, 122, 26, .55); }
.ficha-temporada-sello .icono-temporada { width: 22px; height: 22px; }
.ficha-temporada-nueva {
  position: absolute; z-index: 2; right: 8px; top: 12px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: #fff; background: linear-gradient(135deg, #ff7a1a, var(--fucsia));
}
/* «Muy pronto»: dorado sobre noche, que se lea como promesa y no como aviso. */
.ficha-temporada-nueva.pronto { color: #1b1305; background: linear-gradient(135deg, #ffe39a, #f3c969); }
.ficha-temporada-titulo {
  position: absolute; z-index: 2; left: 12px; right: 12px; bottom: 12px;
  color: #fff; font-weight: 900; line-height: 1.05; letter-spacing: -.02em;
  font-size: clamp(20px, 5vw, 30px);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}
/* LA RAYITA BLANCA (29-9-2026, la vio Emmanuel al pulsar la ficha): el filo
   claro de arriba iba en la BARRA, y al ponerse morado el botón se leía como
   una línea blanca entre la foto y el botón. El filo lo lleva ahora el botón
   en reposo, por dentro; pulsado o con el ratón encima es un bloque morado
   de arriba abajo. El aro del teclado va también por dentro: no abre hueco. */
.ficha-temporada .pie-foto { border-top: 0; }
.ficha-temporada-ver {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 6px;
  font-weight: 700; font-size: var(--t-md); color: var(--morado);
  background: var(--lila-suave, #f3edf8);
  box-shadow: inset 0 1px 0 var(--linea);
}
.ficha-temporada-ver:hover,
.ficha-temporada-ver:active { text-decoration: none; background: var(--morado); color: #fff; box-shadow: none; }
.ficha-temporada-ver:focus-visible { outline: 2.5px solid var(--fucsia); outline-offset: -4px; }
.ficha-temporada .precio { font-weight: 500; color: var(--tinta-2); }

/* ---------- 4. La portada dentro de una temporada ---------- */
.hero-temporada {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 22px; margin: 8px 0 18px; padding: 28px 24px;
  color: #fff;
  background: radial-gradient(90% 120% at 85% 0%, #4b1d6e 0%, transparent 60%),
              linear-gradient(180deg, var(--morado) 0%, #3a1552 100%);
  animation: sube .6s ease-out both;
}
.hero-temporada .texto { position: relative; z-index: 3; }
.hero-temporada .miga { font-size: 12px; opacity: .78; margin-bottom: 8px; }
.hero-temporada .miga a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.hero-temporada h1 {
  margin: 0 0 8px; color: #fff; font-weight: 900;
  font-size: clamp(28px, 5.4vw, 52px); line-height: 1.04; letter-spacing: -.025em;
  animation: sube .7s cubic-bezier(.2, .7, .2, 1) both;
}
.hero-temporada h1 em {
  font-style: normal;
  background: linear-gradient(90deg, #ff9a3c, #ff5e7e);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-temporada p { margin: 0 0 14px; font-size: 15px; opacity: .9; max-width: 440px;
  animation: sube .7s .15s both; }

/* La de Halloween: noche, luna, colinas, la casa con la ventana encendida,
   niebla, murciélagos, dos fantasmas y la calabaza. */
.hero-temporada.tema-halloween {
  padding: 30px 28px 128px;
  background: radial-gradient(90% 120% at 85% 0%, #4b1d6e 0%, transparent 60%),
              linear-gradient(180deg, #1b0f2e 0%, #2a1145 60%, #3d1640 100%);
}
@media (min-width: 900px) {
  .hero-temporada { padding: 40px 44px; }
  .hero-temporada.tema-halloween { padding: 44px 44px 110px; min-height: 300px; }
  .hero-temporada.tema-halloween .texto { max-width: 48%; }
}
.hero-temporada .escena {
  position: absolute; left: 0; bottom: -1px; width: 100%; height: 150px; z-index: 1;
}
.hero-temporada .ventana { animation: vela 3.4s steps(1) infinite; }
.hero-temporada .ventana.v2 { animation-delay: -1.3s; }
.hero-temporada .luna {
  position: absolute; z-index: 0; right: 13%; top: 30px; width: 76px; height: 76px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, #fff6d6 0%, #ffe39a 55%, #f5c86a 100%);
  box-shadow: 0 0 60px 18px rgba(255, 214, 120, .28);
  animation: sale-luna 1.2s ease-out both;
}
.hero-temporada .estrella {
  position: absolute; z-index: 0; width: 3px; height: 3px; border-radius: 50%;
  background: #fff; animation: titila 3s ease-in-out infinite;
}
/* Las ocho estrellas, cada una en su sitio (sin estilos en línea: B6). */
.hero-temporada .estrella:nth-of-type(1) { left: 8%;  top: 18%; }
.hero-temporada .estrella:nth-of-type(2) { left: 22%; top: 10%; animation-delay: -1.1s; }
.hero-temporada .estrella:nth-of-type(3) { left: 35%; top: 26%; animation-delay: -2.3s; }
.hero-temporada .estrella:nth-of-type(4) { left: 48%; top: 12%; animation-delay: -.6s; }
.hero-temporada .estrella:nth-of-type(5) { left: 61%; top: 30%; animation-delay: -1.8s; }
.hero-temporada .estrella:nth-of-type(6) { left: 70%; top: 8%;  animation-delay: -2.7s; }
.hero-temporada .estrella:nth-of-type(7) { left: 92%; top: 40%; animation-delay: -1.3s; }
.hero-temporada .estrella:nth-of-type(8) { left: 14%; top: 44%; animation-delay: -2.1s; }
.hero-temporada .niebla {
  position: absolute; z-index: 2; left: 0; bottom: 0; width: 200%; height: 56px;
  pointer-events: none; opacity: .22;
  background:
    radial-gradient(40% 60% at 15% 80%, rgba(230, 215, 255, .35), transparent 70%),
    radial-gradient(35% 50% at 45% 90%, rgba(230, 215, 255, .28), transparent 70%),
    radial-gradient(40% 60% at 65% 80%, rgba(230, 215, 255, .35), transparent 70%),
    radial-gradient(35% 50% at 95% 90%, rgba(230, 215, 255, .28), transparent 70%);
  animation: niebla 26s linear infinite;
}
.hero-temporada .fantasma {
  position: absolute; z-index: 2; right: 31%; bottom: 58px; width: 44px;
  padding: 0; border: 0; background: none; cursor: pointer; color: inherit;
  animation: fantasma 6s ease-in-out infinite;
}
.hero-temporada .fantasma svg { display: block; width: 100%; filter: drop-shadow(0 0 10px rgba(255, 255, 255, .35)); }
.hero-temporada .fantasma.dos { right: 5%; bottom: 96px; width: 26px; opacity: .65; animation-delay: -2.5s; }
.hero-temporada .bu {
  position: absolute; left: -34px; top: -26px; padding: 3px 8px; border-radius: 10px;
  background: #fff; color: #1b0f2e; font-size: 12px; font-weight: 800; white-space: nowrap;
  opacity: 0; transform: scale(.6); transition: opacity .15s, transform .2s;
}
.hero-temporada .fantasma:focus .bu,
.hero-temporada .fantasma:active .bu { opacity: 1; transform: scale(1); }
.hero-temporada .fantasma:focus-visible { outline: 2px solid #ffb070; outline-offset: 4px; border-radius: 8px; }
.hero-temporada .calabaza-grande {
  position: absolute; z-index: 2; right: 21%; bottom: 20px; width: 54px;
  transform-origin: 50% 90%; animation: latido 2.6s ease-in-out infinite;
}
.hero-temporada .calabaza-grande svg { display: block; width: 100%; height: auto;
  filter: drop-shadow(0 0 14px rgba(255, 122, 26, .55)); }
/* LA TORMENTA EN LA PORTADA (30-9-2026): los dos murciélagos que cruzaban
   en bucle, sin venir de ningún sitio, se fueron con el de la cinta. El
   mismo relámpago enciende el cielo y la bandada sale de la casa. */
.hero-temporada .destello { z-index: 0;
  background: radial-gradient(70% 120% at 78% 0%,
              rgba(196, 176, 255, .42) 0%, rgba(140, 112, 226, .15) 50%, rgba(104, 78, 190, .04) 100%); }
/* Donde el título llega hasta la derecha (teléfono y tableta), más tenue:
   sus letras naranjas y rosas no pierden contraste con el cielo encendido. */
@media (max-width: 899.98px) {
  .hero-temporada .destello {
    background: radial-gradient(70% 120% at 78% 0%,
                rgba(196, 176, 255, .30) 0%, rgba(140, 112, 226, .09) 50%, rgba(104, 78, 190, .02) 100%); }
}
.hero-temporada .rayo { z-index: 0; }
.hero-temporada .rayo.r1 { right: 27%; width: 74px; height: 66%; }
.hero-temporada .rayo.r2 { right: 6%; width: 50px; height: 44%; }
.hero-temporada .bandada { z-index: 1; right: 176px; bottom: 78px; }
.hero-temporada .vuela:nth-child(1) { --w: 34px; --bx: -30cqw; --by: -190px; --fin: .3; }
.hero-temporada .vuela:nth-child(2) { --w: 24px; --bx: -12cqw; --by: -240px; --fin: .25; --d: .08s; }
.hero-temporada .vuela:nth-child(3) { --w: 30px; --bx: -40cqw; --by: -120px; --fin: .3; --d: .16s; }
.hero-temporada .vuela:nth-child(4) { --w: 20px; --bx: 110px; --by: -210px; --fin: .25; --d: .05s; }
.hero-temporada .vuela:nth-child(5) { --w: 38px; --bx: -22cqw; --by: -150px; --fin: .3; --d: .24s; }
.ambiente-temporada .murcielago svg { display: block; animation: aleteo .45s steps(2) infinite; }
.hero-temporada .telarana-h { position: absolute; z-index: 0; right: 0; top: 0; width: 120px; opacity: .3; }

/* ---------- 4b. Las brujas (29-9-2026) ----------
   Encargo de Emmanuel: «métele otra animación cool, tanto versión escritorio
   como móvil: podrían ser unas brujas volando, algo así que se vea más
   aterrador». Siluetas negras en su escoba (el dibujo, en el parcial) que
   cruzan en arco, se mecen y dejan chispas. La mayor parte del tiempo NO
   están: cada una sale, cruza y se va, a destiempo de las demás.

   TRES CAJAS POR BRUJA, cada una con UN movimiento y todos transform (lo
   que el teléfono pinta sin despeinarse): `.bruja` avanza de lado,
   `.bruja-arco` sube y baja con OTRA curva —la suma de las dos es el
   arco— y `.bruja-vaiven` se mece. Las distancias van en cqw, el ancho de
   su caja, para que crucen igual la cinta del teléfono que la portada de la
   computadora; sin cqw (navegadores de antes de 2022) no salen de su sitio,
   que está fuera de la vista.

   EL TEXTO SE LEE SIEMPRE: van por detrás de él (z-index menor) y por
   caminos que lo esquivan donde se puede. Con «reducir movimiento» no
   salen (bloque de los movimientos). */
.cinta-temporada.tema-halloween,
.hero-temporada.tema-halloween { container-type: inline-size; }
.bruja { position: absolute; z-index: 1; pointer-events: none; }
.bruja-arco, .bruja-vaiven { display: block; }
.bruja-vaiven { transform-origin: 60% 60%; animation: vaiven-bruja 2.4s ease-in-out infinite; }
.bruja svg { display: block; width: 100%; height: auto; overflow: visible;
  /* El brillo verde de hechizo: sin él, negra sobre la noche no se ve.
     Como el de los fantasmas y la calabaza. */
  filter: drop-shadow(0 0 3px rgba(125, 255, 143, .45)); }
/* Las chispas de la estela titilan a saltos: dos repintados por vuelta. */
.bruja .chispa { animation: chispea .8s steps(1) infinite; }
.bruja .chispa.c2 { animation-delay: -.27s; }
.bruja .chispa.c3 { animation-delay: -.53s; }
/* Cruzar de lado a lado: cada una con su vuelta (--vuelta) y su salida
   (--sale); vuela la primera mitad y la otra mitad no está. */
.bruja { --vuelta: 16s; --sale: 0s; animation: bruja-cruza var(--vuelta) linear var(--sale) infinite; }
.bruja-arco { animation: bruja-arco var(--vuelta) var(--sale) infinite; }

/* En la cinta (30-9-2026): ya no pasea de lado a lado cada 14 s. Una vez
   cada 46 s sale de abajo, CRUZA LA LUNA y se va por arriba, en el rato
   tranquilo entre dos relámpagos. Por DETRÁS del texto, de la calabaza y
   de la flecha (que se suben a la capa 1). */
.cinta-temporada .cinta-icono,
.cinta-temporada .flecha { position: relative; z-index: 1; }
.cinta-temporada .bruja-cinta {
  z-index: 0; right: 124px; top: 64px; width: 34px;
  --bx: 170px; --by: -104px;
  animation: escoba-luna 46s linear infinite;
}
.cinta-temporada .bruja-cinta .bruja-arco { animation: none; }
@media (min-width: 640px) {
  .cinta-temporada .bruja-cinta { right: 236px; width: 44px; --bx: 250px; --by: -112px; }
}

/* En la portada. LA GRANDE sale por la derecha, cruza la luna y se pierde
   en el cielo, cada vez más pequeña: se queda en la mitad derecha, que en
   la computadora es la del paisaje (el texto ocupa la izquierda). */
.hero-temporada .bruja.b1 {
  right: -170px; top: 150px; width: 140px;
  --vuelta: 22s; --sale: .8s; --bx: calc(-40cqw - 138px); --by: -156px;
  animation-name: bruja-aleja; animation-timing-function: cubic-bezier(.3, .3, .6, 1);
}
.hero-temporada .bruja.b1 .bruja-arco {
  animation-name: bruja-sube; animation-timing-function: cubic-bezier(.15, .55, .45, 1);
}
/* Mira hacia donde vuela (el dibujo mira a la derecha) y se aleja. */
.hero-temporada .bruja.b1 .bruja-vaiven { transform: scaleX(-1); animation-name: vaiven-bruja-reves; }
.hero-temporada .bruja.b1 svg { animation: bruja-encoge var(--vuelta) linear var(--sale) infinite; }
/* LA CHICA cruza por arriba, en el aire que queda sobre la miga (en la
   computadora); en la tableta ese aire no llega y pasa sobre las colinas. */
.hero-temporada .bruja.b2 {
  left: -80px; top: 10px; width: 56px;
  --vuelta: 28s; --sale: 10s; --bx: calc(100cqw + 220px); --by: -6px;
}
@media (min-width: 640px) and (max-width: 899.98px) {
  .hero-temporada .bruja.b2 { top: auto; bottom: 84px; --by: -10px; }
}
@media (max-width: 639.98px) {
  /* En el teléfono la luna es chica y va arriba a la derecha: la grande
     sale por debajo de ella, la cruza y se pierde a la derecha de la miga. */
  .hero-temporada .bruja.b1 { right: -64px; top: 68px; width: 60px; --bx: -134px; --by: -72px;
    --vuelta: 13s; }
  /* Arriba no hay aire (la miga empieza a 18 px): la chica pasa por encima
     de las colinas, por detrás de los fantasmas. */
  .hero-temporada .bruja.b2 { top: auto; bottom: 48px; width: 32px; --by: -10px; }
}

/* En la ficha «Próximamente»: cruza el cielo por delante de la luna y por
   encima del título, por detrás del sello. En cqw, el ancho de la foto. */
.ficha-proxima .bruja-cartel {
  left: -30cqw; top: 6cqw; width: 26cqw;
  --vuelta: 12s; --sale: 2.5s; --bx: 160cqw; --by: -4cqw;
}

/* Navidad: la nieve (el resto de su portada va en su propia sección). */
.hero-temporada .nieve { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.hero-temporada .nieve i {
  position: absolute; top: -10px; width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 38%, rgba(255, 255, 255, .55) 55%, transparent 72%);
  opacity: .9; animation: nieva-a 9s linear infinite;
}
.hero-temporada .nieve i:nth-child(even) { animation-name: nieva-b; }
.hero-temporada .nieve i:nth-child(1)  { left: 4%;  animation-delay: -1s; }
.hero-temporada .nieve i:nth-child(2)  { left: 11%; animation-delay: -6s; width: 4px; height: 4px; animation-duration: 11s; }
.hero-temporada .nieve i:nth-child(3)  { left: 18%; animation-delay: -3.5s; }
.hero-temporada .nieve i:nth-child(4)  { left: 26%; animation-delay: -8s; width: 3px; height: 3px; animation-duration: 12s; }
.hero-temporada .nieve i:nth-child(5)  { left: 33%; animation-delay: -2s; width: 5px; height: 5px; }
.hero-temporada .nieve i:nth-child(6)  { left: 41%; animation-delay: -5s; width: 4px; height: 4px; animation-duration: 10s; }
.hero-temporada .nieve i:nth-child(7)  { left: 49%; animation-delay: -7.2s; }
.hero-temporada .nieve i:nth-child(8)  { left: 57%; animation-delay: -.5s; width: 3px; height: 3px; animation-duration: 12s; }
.hero-temporada .nieve i:nth-child(9)  { left: 64%; animation-delay: -4.4s; width: 5px; height: 5px; }
.hero-temporada .nieve i:nth-child(10) { left: 71%; animation-delay: -2.8s; width: 4px; height: 4px; animation-duration: 11s; }
.hero-temporada .nieve i:nth-child(11) { left: 78%; animation-delay: -6.6s; }
.hero-temporada .nieve i:nth-child(12) { left: 85%; animation-delay: -1.7s; width: 3px; height: 3px; animation-duration: 12s; }
.hero-temporada .nieve i:nth-child(13) { left: 91%; animation-delay: -5.4s; width: 5px; height: 5px; }
.hero-temporada .nieve i:nth-child(14) { left: 97%; animation-delay: -3.1s; width: 4px; height: 4px; animation-duration: 10s; }

/* Cruzando la página, por detrás de las prendas: murciélagos o nieve. */
.ambiente-temporada { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.ambiente-temporada .murcielago {
  position: absolute; left: -60px; width: 40px; opacity: .75;
  animation: cruza 18s linear infinite;
}
.ambiente-temporada .m1 { top: 30%; animation-delay: -3s; }
.ambiente-temporada .m2 { top: 55%; width: 28px; animation-delay: -9s; animation-duration: 22s; }
.ambiente-temporada .m3 { top: 78%; width: 34px; animation-delay: -14s; animation-duration: 20s; }
.nevada i {
  position: absolute; top: -12px; width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 38%, rgba(255, 255, 255, .5) 55%, transparent 72%);
  opacity: .65; animation: nieva-pagina 16s linear infinite;
}
.nevada i:nth-child(even) { animation-name: nieva-pagina-b; }
.nevada i:nth-child(1)  { left: 3%;  animation-delay: -2s; }
.nevada i:nth-child(2)  { left: 9%;  animation-delay: -11s; width: 4px; height: 4px; animation-duration: 19s; }
.nevada i:nth-child(3)  { left: 15%; animation-delay: -6s; width: 5px; height: 5px; }
.nevada i:nth-child(4)  { left: 22%; animation-delay: -14s; width: 3px; height: 3px; animation-duration: 21s; }
.nevada i:nth-child(5)  { left: 28%; animation-delay: -4s; }
.nevada i:nth-child(6)  { left: 35%; animation-delay: -9s; width: 4px; height: 4px; animation-duration: 18s; }
.nevada i:nth-child(7)  { left: 41%; animation-delay: -1s; width: 5px; height: 5px; }
.nevada i:nth-child(8)  { left: 48%; animation-delay: -12.5s; width: 3px; height: 3px; animation-duration: 20s; }
.nevada i:nth-child(9)  { left: 55%; animation-delay: -7s; }
.nevada i:nth-child(10) { left: 61%; animation-delay: -15s; width: 4px; height: 4px; animation-duration: 19s; }
.nevada i:nth-child(11) { left: 67%; animation-delay: -3s; width: 5px; height: 5px; }
.nevada i:nth-child(12) { left: 73%; animation-delay: -10s; width: 3px; height: 3px; animation-duration: 21s; }
.nevada i:nth-child(13) { left: 80%; animation-delay: -5.5s; }
.nevada i:nth-child(14) { left: 86%; animation-delay: -13s; width: 4px; height: 4px; animation-duration: 18s; }
.nevada i:nth-child(15) { left: 92%; animation-delay: -8s; width: 5px; height: 5px; }
.nevada i:nth-child(16) { left: 97%; animation-delay: -.5s; width: 3px; height: 3px; animation-duration: 20s; }

/* ---------- 5. Una temporada que todavía no tiene prendas ---------- */
.pronto-temporada {
  position: relative;   /* por encima de la nieve y los murciélagos */
  display: grid; justify-items: center; gap: 10px; text-align: center;
  padding: 36px 20px 30px; border-radius: 18px;
  background: var(--papel); border: 1px solid var(--linea);
}
.pronto-temporada .pronto-icono { color: var(--fucsia); animation: flota 3.4s ease-in-out infinite; }
.pronto-temporada .pronto-icono .grande { width: 64px; height: 64px; }
/* El color del texto y no el de los títulos de la casa (morado): de noche,
   un título morado sobre fondo oscuro no se lee. */
.pronto-temporada h2 { margin: 6px 0 0; color: var(--tinta); font-size: clamp(20px, 3.4vw, 26px); letter-spacing: -.01em; }
.pronto-temporada p { margin: 0 0 8px; color: var(--tinta-2); }

/* ---------- 6. La página entera de noche (Halloween y Navidad) ---------- */
/* LO PRIMERO SON LAS VARIABLES DE LA MARCA (regla B6): el papel, la tinta y
   las líneas de TODA la tienda pasan a ser de noche con solo redefinirlas
   aquí, y así ningún texto que use `--tinta` se queda oscuro sobre oscuro.
   `--morado` NO se toca: es el fondo de los botones con letra blanca, y
   aclararlo los dejaría ilegibles. Cada tema trae su paleta; las reglas de
   abajo son las mismas para los dos. */
body.tema-halloween {
  --noche: #120a1f; --noche-2: #1e1230; --noche-3: #241638;
  --acento: #ff7a1a; --acento-claro: #ff9d4d; --acento-velo: rgba(255, 122, 26, .22);
  --hueso: #f5ecff; --hueso-2: #d8c8f0; --hueso-3: #b3a5c6;
  --linea-noche: rgba(155, 92, 255, .22); --linea-noche-2: rgba(155, 92, 255, .38);
  --suave-noche: #2a1a40; --noche-vidrio: rgba(18, 10, 31, .95);
  --cielo: radial-gradient(1200px 600px at 80% -10%, #3a1552 0%, transparent 60%);
}
/* La de Navidad (24-9-2026) es la noche de MOOD: el morado de la marca y su
   fucsia, aclarado para leerse sobre lo oscuro (el precio, 6:1 sobre la
   tarjeta; la letra más tenue, 7,7:1). */
body.tema-navidad {
  --noche: #1d002b; --noche-2: #2a0540; --noche-3: #33094d;
  --acento: #f06aa8; --acento-claro: #ff9ccb; --acento-velo: rgba(240, 106, 168, .22);
  --hueso: #fbf1ff; --hueso-2: #e2cdef; --hueso-3: #c1a8d3;
  --linea-noche: rgba(240, 106, 168, .22); --linea-noche-2: rgba(240, 106, 168, .38);
  --suave-noche: #36104f; --noche-vidrio: rgba(29, 0, 43, .95);
  --cielo: radial-gradient(1200px 600px at 80% -10%, #4d0d6c 0%, transparent 60%);
}
body.tema-noche {
  --lienzo: var(--noche); --papel: var(--noche-2); --papel-2: var(--noche-3);
  --linea: var(--linea-noche); --linea-2: var(--linea-noche-2);
  --tinta: var(--hueso); --tinta-2: var(--hueso-2); --tinta-3: var(--hueso-3);
  --morado-suave: var(--suave-noche); --morado-borde: var(--linea-noche-2);
  --fucsia-suave: var(--suave-noche);
  background: var(--cielo), var(--noche);
  color: var(--hueso);
}
/* EL CARRITO LATERAL Y LA VISTA RÁPIDA SE QUEDAN CLAROS (WMT 24-9-2026:
   cuatro clientas de prueba lo cazaron). Heredaban la paleta de noche y sus
   textos morados quedaban sobre fondo morado, a 1:1: no se leían el total,
   el importe de cada línea, el nombre de la prenda ni los − y +. Son
   ventanas de COMPRA: se ven igual que en el resto de la tienda. Se
   devuelven las variables de la casa y también las de noche, pasadas a
   claro, para que cualquier regla de noche que caiga dentro dé claro. */
body.tema-noche .cajon,
body.tema-noche .vista-rapida {
  --lienzo: #f6f5f8; --papel: #ffffff; --papel-2: #faf9fc;
  --linea: #ebe8f0; --linea-2: #d8d3e0;
  --tinta: #191320; --tinta-2: #5d5568; --tinta-3: #6b6478;
  --morado-suave: #f5eefa; --morado-borde: #e4d6ee; --fucsia-suave: #fdeef5;
  --noche: #f6f5f8; --noche-2: #ffffff; --noche-3: #ffffff;
  --hueso: #191320; --hueso-2: #5d5568; --hueso-3: #6b6478;
  --linea-noche: #ebe8f0; --linea-noche-2: #d8d3e0; --suave-noche: #f5eefa;
  color: var(--tinta);
}
/* Y en el cajón de filtros del teléfono, el título y la X (morados sobre la
   noche, 1,08:1). */
body.tema-noche .panel-filtros-cabeza h2,
body.tema-noche #cerrar-filtros { color: var(--hueso); }
body.tema-noche .cabecera {
  /* Sin color-mix(): los iPhone de antes de iOS 16.2 no lo entienden y la
     cabecera se quedaría clara sobre la noche. */
  background: var(--noche-vidrio);
  border-bottom: 1px solid var(--linea-noche);
}
body.tema-noche .cabecera,
body.tema-noche .cabecera a,
body.tema-noche .cabecera button,
body.tema-noche .logo { color: var(--hueso); }
body.tema-noche .menu-principal a.activo { background: var(--linea-noche); color: #fff; }
body.tema-noche .buscador-campo { background: var(--noche-3); border-radius: 12px; }
body.tema-noche .buscador input,
body.tema-noche input[type=search] {
  background: var(--noche-3); color: var(--hueso); border-color: var(--linea-noche-2);
}
body.tema-noche .panel-filtros,
body.tema-noche .grupo-filtro,
body.tema-noche .grupo-filtro summary,
body.tema-noche .panel-filtros-cabeza,
body.tema-noche .panel-filtros-cuerpo,
body.tema-noche .filtros-movil {
  background: transparent; color: var(--hueso); border-color: var(--linea-noche);
  box-shadow: none;
}
/* En el teléfono el panel de filtros es un cajón encima de todo: ahí sí
   lleva fondo, o se leería la rejilla por detrás. */
@media (max-width: 899.98px) {
  body.tema-noche .panel-filtros { background: var(--noche); }
  /* La barra fija de «Filtros / Descubrir» también (28-9-2026, WMT N3):
     transparente, las prendas se veían pasar por detrás al bajar. */
  body.tema-noche .filtros-movil { background: var(--noche); }
}
/* El catálogo entero se pinta DESPUÉS de lo que cruza la pantalla (que va
   al principio del contenido y sin z-index): con posición propia y sin
   z-index, su texto y sus recuadros tapan la nieve y los murciélagos, que
   solo se ven en los huecos. Sin z-index no crea capa nueva, así que el
   cajón de filtros del teléfono sigue saliendo por encima de todo. */
body.tema-noche .catalogo { position: relative; }
body.tema-noche .grupo-filtro summary { color: #fff; }
body.tema-noche .lista-categorias a { color: var(--hueso-2); }
body.tema-noche .lista-categorias a.activo,
body.tema-noche .panel-filtros-cuerpo > .grupo-filtro .lista-categorias a.activo {
  /* La segunda es la del escritorio de `mood.css` (degradado lila y letra
     morada): sin igualar su peso, el elegido salía morado sobre la noche. */
  background: linear-gradient(90deg, var(--acento-velo) 0%, transparent 100%);
  color: #fff;
}
body.tema-noche .lista-categorias a.activo::before,
body.tema-noche .panel-filtros-cuerpo > .grupo-filtro .lista-categorias a.activo::before {
  background: var(--acento);
}
body.tema-noche .cat-temporada a { color: var(--acento-claro); }
body.tema-noche .ver-mas-categorias { color: var(--hueso-2); }
body.tema-noche .btn-contorno,
body.tema-noche select,
body.tema-noche .campo input {
  background: var(--noche-3); color: var(--hueso); border-color: var(--linea-noche-2);
}
body.tema-noche .campo label,
body.tema-noche .conteo-productos { color: var(--hueso-2); }
body.tema-noche .tarjeta-producto {
  background: var(--noche-2);
  box-shadow: inset 0 0 0 1px var(--linea-noche);
  transition: transform .25s ease, box-shadow .25s ease;
}
@media (hover: hover) {
  body.tema-noche .tarjeta-producto:hover {
    transform: translateY(-3px);
    box-shadow: inset 0 0 0 1px var(--acento), 0 14px 30px -12px var(--acento-velo);
  }
}
body.tema-noche .tarjeta-producto .pie-foto,
body.tema-noche .tarjeta-producto .elegir,
body.tema-noche .pie-foto .puntos-color {
  background: var(--noche-3); color: var(--hueso); border-color: var(--linea-noche);
}
body.tema-noche .tarjeta-producto .info { background: var(--noche-2); }
body.tema-noche .tarjeta-producto .nombre { color: var(--hueso); }
body.tema-noche .tarjeta-producto .precio { color: var(--acento); }
body.tema-noche .tarjeta-producto .precio .antes { color: var(--hueso-3); }
body.tema-noche .paginacion a,
body.tema-noche .paginacion span { background: var(--noche-3); color: var(--hueso); }
body.tema-noche .fin-catalogo,
body.tema-noche .cargando-mas { color: var(--hueso-2); }
body.tema-noche .vacio { color: var(--hueso); }
body.tema-noche .pronto-temporada .pronto-icono { color: var(--acento); }
body.tema-noche .pronto-temporada .btn-primario {
  background: var(--fucsia); border-color: var(--fucsia); color: #fff;
}
body.tema-noche .barra-inferior {
  background: var(--noche-vidrio);
  border-top: 1px solid var(--linea-noche);
}
body.tema-noche .barra-inferior a { color: var(--hueso-2); }
body.tema-noche .barra-inferior a.activo,
body.tema-noche .barra-inferior a[aria-current] { color: var(--acento-claro); }

/* Las prendas entran una detrás de otra, una sola vez. */
body.tema-noche .rejilla-productos > * { animation: sube .5s ease-out both; }
body.tema-noche .rejilla-productos > :nth-child(2) { animation-delay: .06s; }
body.tema-noche .rejilla-productos > :nth-child(3) { animation-delay: .12s; }
body.tema-noche .rejilla-productos > :nth-child(4) { animation-delay: .18s; }
body.tema-noche .rejilla-productos > :nth-child(5) { animation-delay: .24s; }
body.tema-noche .rejilla-productos > :nth-child(6) { animation-delay: .30s; }


/* ---------- La Navidad de Mood (24-9-2026) ---------- */
/* Tres Navidades antes —una más bonita, una de lujo esmeralda y una blanca de
   cabaña— y la respuesta fue: «no siento que se identifica con la marca en su
   mood navideño». Esta es la de la marca: el morado #2c0040 de noche, el
   fucsia y el oro; un árbol hecho de bolas, las bolsas de Mood de regalo,
   bolas que cuelgan y se balancean, y «Mood» escrito como el logo con sus dos
   «O» hechas bolas. De las dos maquetas eligió la de NOCHE para la página y
   el anuncio, y la ficha BLANCA para «Temporadas» («hace más contraste con la
   tarjeta de Halloween»). */
.hero-temporada.tema-navidad {
  padding: 40px 22px 230px; color: #fff;
  background: radial-gradient(70% 90% at 82% 105%, rgba(201, 24, 107, .55) 0%, transparent 62%),
              radial-gradient(50% 60% at 8% 0%, rgba(106, 47, 146, .6), transparent 70%),
              linear-gradient(165deg, #2c0040 0%, #3a0656 50%, #4d0d6c 100%);
  box-shadow: inset 0 0 0 1px rgba(227, 180, 79, .35);
}
@media (min-width: 900px) {
  .hero-temporada.tema-navidad { padding: 60px 48px 150px; min-height: 410px; }
  /* Ancho para que «Navidad en Mood» vaya en una línea desde los 900 px. */
  .hero-temporada.tema-navidad .texto { max-width: min(56%, 560px); }
}
.hero-temporada.tema-navidad .escena { height: 300px; }
.hero-temporada.tema-navidad .miga { color: #f3e6ff; opacity: .85; }
.hero-temporada .antetitulo {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 12px; max-width: none; opacity: 1;
  font-size: 11px; font-weight: 800; letter-spacing: .3em; text-transform: uppercase;
  color: #f3e6ff; animation: sube .7s both;
}
.hero-temporada .antetitulo::before,
.hero-temporada .antetitulo::after { content: ""; width: 26px; height: 1.5px; }
.hero-temporada .antetitulo::before { background: linear-gradient(90deg, transparent, #e3b44f); }
.hero-temporada .antetitulo::after { background: linear-gradient(90deg, #e3b44f, transparent); }
.hero-temporada.tema-navidad h1 { font-size: clamp(31px, 5.6vw, 58px); }
/* El nombre en oro, sin el degradado naranja de las otras temporadas. */
.hero-temporada.tema-navidad h1 em {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  color: #f7dd96;
}
.hero-temporada .nexo { font-weight: 600; font-size: .58em; letter-spacing: 0; }
/* «Mood» como el logo (Inter 900) y sus dos «O» hechas bolas: 0,8 em de
   ancho, apoyadas en la línea de base, con el hilo subiendo hasta arriba. */
.marca-mood { letter-spacing: .02em; white-space: nowrap; }
.marca-mood .o-bola {
  display: inline-block; width: .8em; height: 1em; margin: 0 .012em;
  vertical-align: baseline; overflow: visible;
}
.hero-temporada.tema-navidad p { color: rgba(255, 255, 255, .92); opacity: 1; }

/* Las bolas que cuelgan del borde de arriba y se balancean: cada una rota
   desde su hilo (transform, nada más). En el teléfono, solo dos, a la
   derecha, que no pisan el texto; en los de 320-374, una. */
.hero-temporada .colg {
  position: absolute; top: 0; z-index: 2; pointer-events: none;
  transform-origin: 50% 0; animation: columpio 4.8s ease-in-out infinite;
}
.hero-temporada .colg svg { display: block; }
.hero-temporada .colg.k1 { right: 45%; animation-delay: -.8s; }
.hero-temporada .colg.k2 { right: 37%; animation-delay: -2.1s; animation-duration: 4.1s; }
.hero-temporada .colg.k3 { right: 28%; animation-delay: -1.4s; animation-duration: 5.6s; }
.hero-temporada .colg.k4 { right: 20%; animation-delay: -3s; }
.hero-temporada .colg.k5 { right: 12%; animation-delay: -.3s; animation-duration: 5.1s; }
.hero-temporada .colg.k6 { right: 4%; animation-delay: -2.6s; animation-duration: 4.4s; }
@media (max-width: 899.98px) {
  .hero-temporada.tema-navidad .escena { height: 226px; }
  .hero-temporada .colg.k1, .hero-temporada .colg.k3,
  .hero-temporada .colg.k4, .hero-temporada .colg.k5 { display: none; }
  .hero-temporada .colg.k2 { right: 17%; }
  .hero-temporada .colg.k6 { right: 5%; }
}
/* En los teléfonos chicos la escena va más baja, para que la bolsa fucsia no
   se corte por la izquierda, y la otra bola caería encima de la miga. */
@media (max-width: 374.98px) {
  .hero-temporada.tema-navidad { padding-bottom: 206px; }
  .hero-temporada.tema-navidad .escena { height: 200px; }
  .hero-temporada .colg.k2 { display: none; }
}

/* Lo que se mueve dentro de los dibujos: los brillos del árbol por grupos,
   su estrella y las bolas que cuelgan dentro de la ficha. */
.escena-mood .tw1 { animation: centellea 2.6s ease-in-out infinite; }
.escena-mood .tw2 { animation: centellea 2.6s ease-in-out -.87s infinite; }
.escena-mood .tw3 { animation: centellea 2.6s ease-in-out -1.74s infinite; }
.estrella-mood { transform-box: fill-box; transform-origin: center; animation: latido 2.8s ease-in-out infinite; }
.colg-s { transform-box: fill-box; transform-origin: 50% 0; animation: columpio 4.6s ease-in-out infinite; }
.colg-s.c2 { animation-delay: -1.7s; animation-duration: 5.3s; }
.colg-s.c3 { animation-delay: -3.1s; animation-duration: 4.1s; }

/* La ficha de «Temporadas», BLANCA (su elección). Solo la del dibujo: con foto
   se queda el velo oscuro y el nombre en blanco de siempre, que se leen sobre
   cualquier foto. La clase es `ficha-dibujo` y NO `sin-foto`: esa ya es de la
   casa (el hueco de una prenda sin foto) y dejaba la ficha en cero píxeles. */
.ficha-temporada-fondo.escena-navidad {
  background: radial-gradient(80% 70% at 60% 100%, rgba(201, 24, 107, .12) 0%, transparent 65%),
              linear-gradient(170deg, #ffffff 0%, #fdf3f8 50%, #f4eafa 100%);
}
.ficha-temporada.tema-navidad.ficha-dibujo .ficha-temporada-velo {
  background: linear-gradient(180deg, transparent 62%, rgba(255, 255, 255, .7) 100%);
}
.ficha-temporada.tema-navidad.ficha-dibujo .ficha-temporada-titulo {
  color: var(--fucsia); text-shadow: 0 1px 0 #fff, 0 0 14px #fff;
}
.ficha-temporada.tema-navidad .ficha-temporada-sello {
  background: rgba(255, 255, 255, .95); box-shadow: 0 0 0 2px rgba(227, 180, 79, .8);
}
/* Nieve blanca sobre blanco: con un halo lila, o no se ve. */
.ficha-temporada.tema-navidad .nieve-ficha i { box-shadow: 0 0 2px 1px rgba(181, 138, 214, .5); }

/* El anuncio: de noche como la página, con filo de oro y bolitas colgando. */
.cinta-temporada.tema-navidad {
  padding-top: 24px;
  background: radial-gradient(60% 140% at 90% 100%, rgba(201, 24, 107, .55), transparent 70%),
              linear-gradient(120deg, #2c0040 0%, #3a0656 60%, #4d0d6c 100%);
  box-shadow: inset 0 0 0 1px rgba(227, 180, 79, .45), 0 10px 24px -14px rgba(44, 0, 64, .8);
}
.cinta-temporada.tema-navidad strong { color: #f7dd96; font-size: 16px; }
.cinta-temporada.tema-navidad .sub b { color: #ff9ccb; }
.colgantes-cinta { position: absolute; left: 0; top: 0; width: 100%; height: 30px; }

/* Sin prendas todavía: la bola grande sobre el panel de noche. */
.pronto-temporada.tema-navidad { border-color: rgba(227, 180, 79, .45); }
.pronto-temporada.tema-navidad .pronto-icono .grande { width: 76px; height: 76px; }

/* ---------- 7. Teléfono: la portada cabe y las prendas asoman ---------- */
@media (max-width: 639.98px) {
  .hero-temporada { padding: 18px 18px 20px; margin-top: 4px; border-radius: 18px; }
  .hero-temporada.tema-halloween { padding: 18px 18px 86px; }
  .hero-temporada h1 { font-size: 28px; }
  .hero-temporada.tema-navidad h1 { font-size: 31px; }
  .hero-temporada p { font-size: 13.5px; margin-bottom: 12px; }
  .hero-temporada .miga { margin-bottom: 6px; }
  .hero-temporada .escena { height: 96px; }
  .hero-temporada .luna { width: 38px; height: 38px; top: 14px; right: 14px;
    box-shadow: 0 0 34px 8px rgba(255, 214, 120, .28); }
  .hero-temporada .telarana-h { display: none; }
  .hero-temporada .fantasma { right: 40%; bottom: 40px; width: 30px; }
  .hero-temporada .fantasma.dos { right: 5%; bottom: 76px; width: 18px; }
  .hero-temporada .calabaza-grande { right: 60%; bottom: 10px; width: 36px; }
  .hero-temporada .niebla { height: 40px; }
  /* En el teléfono el texto ocupa todo el ancho: el relámpago es solo de
     cielo, sin rayo que le caiga detrás a la letra. */
  .hero-temporada .rayo { display: none; }
  /* Y el cielo se enciende por el horizonte, detrás de las colinas y de la
     casa, no detrás del título (que ya tiene la luna al lado). */
  .hero-temporada .destello {
    background: linear-gradient(180deg, rgba(140, 112, 226, .03) 0%, rgba(140, 112, 226, .10) 55%,
                rgba(196, 176, 255, .40) 100%); }
  .hero-temporada .bandada { right: 112px; bottom: 50px; }
  .hero-temporada .vuela:nth-child(1) { --w: 20px; --by: -130px; }
  .hero-temporada .vuela:nth-child(2) { --w: 14px; --by: -170px; }
  .hero-temporada .vuela:nth-child(3) { --w: 18px; --by: -90px; }
  .hero-temporada .vuela:nth-child(4) { --w: 13px; --bx: 70px; --by: -150px; }
  .hero-temporada .vuela:nth-child(5) { --w: 22px; --by: -110px; }
  .hero-temporada .antetitulo { letter-spacing: .22em; }
}

/* ---------- 8. Los movimientos ---------- */
@keyframes cruza {
  0%   { transform: translate3d(0, 0, 0); }
  25%  { transform: translate3d(28vw, -30px, 0); }
  50%  { transform: translate3d(56vw, 10px, 0); }
  75%  { transform: translate3d(84vw, -24px, 0); }
  100% { transform: translate3d(calc(100vw + 120px), 0, 0); }
}
@keyframes aleteo { 0% { transform: scaleY(1); } 100% { transform: scaleY(.55); } }
@keyframes flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes fantasma {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(-8px, -12px, 0); }
}
@keyframes latido { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes titila { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
@keyframes sube { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
@keyframes sale-luna { from { opacity: 0; transform: translate3d(0, 24px, 0) scale(.85); } to { opacity: 1; transform: none; } }
@keyframes niebla { to { transform: translate3d(-50%, 0, 0); } }
@keyframes vela { 0%, 100% { opacity: 1; } 42% { opacity: .55; } 47% { opacity: 1; } 71% { opacity: .75; } }
@keyframes onda { from { opacity: .8; transform: scale(.6); } to { opacity: 0; transform: scale(1.9); } }
@keyframes centellea { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes columpio { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes nieva-a { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(26px, 380px, 0); } }
@keyframes nieva-b { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-22px, 380px, 0); } }
@keyframes nieva-ficha { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(14px, 440px, 0); } }
@keyframes nieva-pagina { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(34px, 110vh, 0); } }
@keyframes nieva-pagina-b { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-28px, 110vh, 0); } }

/* Las brujas: avanzar, subir y bajar, mecerse, alejarse y titilar. */
@keyframes bruja-cruza {
  0% { transform: translate3d(0, 0, 0); }
  50%, 100% { transform: translate3d(var(--bx), 0, 0); }
}
@keyframes bruja-arco {
  0% { transform: translate3d(0, 0, 0); animation-timing-function: cubic-bezier(.33, .66, .66, 1); }
  25% { transform: translate3d(0, var(--by), 0); animation-timing-function: cubic-bezier(.33, 0, .66, .33); }
  50%, 100% { transform: translate3d(0, 0, 0); }
}
@keyframes bruja-aleja {
  0% { transform: translate3d(0, 0, 0); }
  46%, 100% { transform: translate3d(var(--bx), 0, 0); }
}
@keyframes bruja-sube {
  0% { transform: translate3d(0, 0, 0); }
  46%, 100% { transform: translate3d(0, var(--by), 0); }
}
@keyframes bruja-encoge {
  0% { transform: scale(1); }
  22% { transform: scale(.85); }
  40% { transform: scale(.34); }
  46%, 100% { transform: scale(0); }
}
@keyframes vaiven-bruja {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-3deg); }
  50% { transform: translate3d(0, -14%, 0) rotate(2deg); }
}
@keyframes vaiven-bruja-reves {
  0%, 100% { transform: translate3d(0, 0, 0) scaleX(-1) rotate(-3deg); }
  50% { transform: translate3d(0, -14%, 0) scaleX(-1) rotate(2deg); }
}
@keyframes chispea { 0%, 100% { fill-opacity: 1; } 50% { fill-opacity: .2; } }

/* La tormenta de Halloween (GENERADO con scratchpad/cinta-halloween/tormenta.py).
   Una vuelta de 23 s con relámpagos a los 4, 11,2 y 19,6 s: nunca a compás.
   Cada uno son DOS parpadeos en 0,23 s y se apaga; entre uno y otro pasan
   más de seis segundos (nada de luz estroboscópica). */
@keyframes relampago {
  0%, 100% { opacity: 0; }
  17.39% { opacity: 0; }
  17.65% { opacity: 1; }
  18.04% { opacity: 0.18; }
  18.39% { opacity: 0.8; }
  20.09% { opacity: 0; }
  48.70% { opacity: 0; }
  48.96% { opacity: 0.6; }
  49.35% { opacity: 0.11; }
  49.70% { opacity: 0.45; }
  51.39% { opacity: 0; }
  85.22% { opacity: 0; }
  85.48% { opacity: 0.9; }
  85.87% { opacity: 0.16; }
  86.22% { opacity: 0.7; }
  87.91% { opacity: 0; }
}
@keyframes rayo-a {
  0%, 100% { opacity: 0; }
  17.39% { opacity: 0; }
  17.61% { opacity: 1; }
  18.00% { opacity: 0.08; }
  18.35% { opacity: 0.9; }
  18.96% { opacity: 0; }
  85.22% { opacity: 0; }
  85.43% { opacity: 1; }
  85.83% { opacity: 0.08; }
  86.17% { opacity: 0.9; }
  86.78% { opacity: 0; }
}
@keyframes rayo-b {
  0%, 100% { opacity: 0; }
  48.70% { opacity: 0; }
  48.91% { opacity: 1; }
  49.30% { opacity: 0.08; }
  49.65% { opacity: 0.9; }
  50.26% { opacity: 0; }
}
@keyframes llama-rayo {
  0%, 100% { fill-opacity: 0; }
  17.39% { fill-opacity: 0; }
  17.65% { fill-opacity: 0.95; }
  18.04% { fill-opacity: 0.17; }
  18.39% { fill-opacity: 0.8; }
  20.09% { fill-opacity: 0; }
  48.70% { fill-opacity: 0; }
  48.96% { fill-opacity: 0.5; }
  49.35% { fill-opacity: 0.09; }
  49.70% { fill-opacity: 0.4; }
  51.39% { fill-opacity: 0; }
  85.22% { fill-opacity: 0; }
  85.48% { fill-opacity: 0.9; }
  85.87% { fill-opacity: 0.16; }
  86.22% { fill-opacity: 0.7; }
  87.91% { fill-opacity: 0; }
}
@keyframes sale-bandada {
  0%, 100% { transform: translate3d(0, 0, 0) scale(0); }
  17.39% { transform: translate3d(0, 0, 0) scale(0); }
  17.48% { transform: translate3d(0, 0, 0) scale(.3); }
  21.57% { transform: translate3d(calc(var(--bx) * .42), calc(var(--by) * .7), 0) scale(1); }
  31.30% { transform: translate3d(var(--bx), var(--by), 0) scale(var(--fin, .12)); }
  31.39% { transform: translate3d(var(--bx), var(--by), 0) scale(0); }
  31.57% { transform: translate3d(0, 0, 0) scale(0); }
  85.22% { transform: translate3d(0, 0, 0) scale(0); }
  85.30% { transform: translate3d(0, 0, 0) scale(.3); }
  89.39% { transform: translate3d(calc(var(--bx) * .42), calc(var(--by) * .7), 0) scale(1); }
  99.13% { transform: translate3d(var(--bx), var(--by), 0) scale(var(--fin, .12)); }
  99.22% { transform: translate3d(var(--bx), var(--by), 0) scale(0); }
  99.39% { transform: translate3d(0, 0, 0) scale(0); }
}
@keyframes llama { 0%, 100% { fill-opacity: .95; } 18% { fill-opacity: .62; } 24% { fill-opacity: .9; } 52% { fill-opacity: .72; } 58% { fill-opacity: 1; } 81% { fill-opacity: .55; } 86% { fill-opacity: .88; } }
@keyframes ojos-miran { 0%, 8%, 62%, 100% { fill-opacity: 0; } 10%, 38%, 42%, 60% { fill-opacity: .95; } 40% { fill-opacity: 0; } }
@keyframes nube-pasa { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(-260px - var(--luna-d)), 0, 0); } }
@keyframes arana-baja { 0%, 100% { transform: translate3d(0, -30px, 0); } 42%, 64% { transform: translate3d(0, -5px, 0); } }
/* La bruja de la cinta: sale de abajo, cruza la luna y se va por arriba. */
@keyframes escoba-luna {
  0%, 31.5% { transform: translate3d(0, 0, 0); }
  39.5%, 100% { transform: translate3d(var(--bx), var(--by), 0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-temporada, .hero-temporada *, .ambiente-temporada *, .cinta-temporada *,
  .ficha-temporada *, .pronto-temporada *, .estrella-mood, .escena-mood *, .colg-s, .colgantes-cinta *,
  /* «*» no alcanza a los ::before/::after: sin esto el pulso de la cuenta
     regresiva seguía latiendo (la regla general de mood.css lo deja en
     .01 ms, pero repitiéndose sin fin). */
  .hero-temporada *::before, .hero-temporada *::after,
  body.tema-noche .rejilla-productos > * {
    animation: none !important; transition: none !important;
  }
  /* Las brujas no se quedan a medio vuelo: no salen. */
  .bruja { display: none !important; }
  /* Ni relámpago, ni rayo, ni bandada: nada que destelle o salte. Queda la
     noche quieta: la luna, la casa, la niebla parada y la vela encendida. */
  .destello, .rayo, .bandada { display: none !important; }
}

/* =====================================================================
   EL LANZAMIENTO (29-9-2026, maqueta aprobada por Emmanuel)
   Mientras una temporada no abre: su ficha «Próximamente» en «Temporadas»,
   la cuenta grande de su página y la página de una prenda suya. Los
   números los pinta el servidor; `static/js/temporadas.js` solo los hace
   correr. Con «reducir movimiento» no se mueve nada (bloque de arriba).
   ===================================================================== */

/* ---------- La ficha «Próximamente» ----------
   Un cartel: cielo arriba, suelo abajo y la cuenta en medio, en su sitio.
   Todo se mide en cqw —el ancho de la foto— para que a 320 px sea el mismo
   cartel, más pequeño, y no otro apretado. */
.ficha-proxima .foto { container-type: inline-size; }
.ficha-proxima .cartel {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  padding: 0 7cqw; overflow: hidden; color: #fff;
  background: radial-gradient(90% 55% at 80% 10%, #5a2380 0%, transparent 62%),
              linear-gradient(180deg, #1b0f2e 0%, #2a1145 58%, #3a1540 100%);
}
.ficha-proxima .cartel-cielo { position: absolute; left: 0; top: 0; width: 100%; height: 44%; z-index: 0; }
.ficha-proxima .cartel-suelo { position: absolute; left: 0; bottom: 0; width: 100%; height: 22%; z-index: 3; }
.ficha-proxima .ficha-temporada-sello {
  z-index: 4; width: 20cqw; height: 20cqw; min-width: 26px; min-height: 26px;
}
.ficha-proxima .ficha-temporada-sello .icono-temporada { width: 64%; height: 64%; }
.ficha-proxima .cartel-titulo {
  position: relative; z-index: 2; display: grid; justify-items: center; gap: 1.2cqw;
  margin: calc(8px + max(26px, 20cqw) + 3cqw) 0 3cqw; text-align: center;
}
.ficha-proxima .kicker {
  font-size: max(8px, 5cqw); font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  line-height: 1; color: #ffb347;
}
.ficha-proxima .nombre-cartel {
  font-size: 13.5cqw; font-weight: 900; line-height: 1; letter-spacing: -.02em; color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .45); white-space: nowrap;
}
/* La placa: una lápida que sale del suelo, con la cuenta tallada. */
.ficha-proxima .cartel-placa {
  position: relative; z-index: 2; flex: 0 0 auto; width: 100%;
  margin: auto 0 15cqw; padding: 11cqw 4cqw 12cqw;
  display: flex; flex-direction: column; align-items: stretch; gap: 3cqw;
  border-radius: 44cqw 44cqw 3cqw 3cqw / 17cqw 17cqw 3cqw 3cqw;
  background: linear-gradient(180deg, #4a3b66 0%, #33264b 60%, #291d3d 100%);
  border: 1.5px solid #75619b;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .10), 0 0 18px rgba(255, 122, 26, .20);
}
.ficha-proxima .cajas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4cqw; }
.ficha-proxima .caja {
  display: grid; justify-items: center; padding: 2.4cqw 0 2cqw; border-radius: 2.6cqw;
  background: rgba(10, 4, 20, .48);
  box-shadow: inset 0 1.5px 3px rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 255, 255, .06);
}
.ficha-proxima .caja b {
  font-size: 15cqw; font-weight: 800; line-height: 1; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums; color: #fff4e3;
  text-shadow: 0 0 5px rgba(255, 140, 40, .55);
}
.ficha-proxima .caja small {
  margin-top: 1.2cqw; font-size: max(7.5px, 4.3cqw); font-weight: 800; letter-spacing: .02em;
  text-transform: uppercase; line-height: 1.1; color: #d6c4f0;
}
.ficha-proxima .cuando {
  text-align: center; font-size: max(8px, 4.9cqw); font-weight: 700; line-height: 1.25;
  color: #ffc98a; text-wrap: balance;
}
/* Navidad: blanca con lila, como su ficha abierta; la cuenta es un regalo
   morado de la marca con su lazo fucsia, sobre la nieve. */
.ficha-proxima.tema-navidad .cartel {
  color: var(--morado);
  background: radial-gradient(80% 60% at 60% 100%, rgba(201, 24, 107, .10) 0%, transparent 65%),
              linear-gradient(170deg, #ffffff 0%, #fdf3f8 50%, #f4eafa 100%);
}
.ficha-proxima.tema-navidad .kicker { color: #6a2f92; }
.ficha-proxima.tema-navidad .nombre-cartel { color: var(--fucsia); text-shadow: 0 1px 0 #fff, 0 0 12px #fff; }
.ficha-proxima.tema-navidad .cartel-titulo { margin-bottom: 9cqw; }
.ficha-proxima.tema-navidad .cartel-placa {
  margin-top: auto; padding-top: 9cqw; border-radius: 3cqw; border: 1.5px solid #e3b44f;
  background: linear-gradient(180deg, #47106a 0%, #2c0040 100%);
  box-shadow: 0 6px 16px rgba(44, 0, 64, .25);
}
/* La tapa del regalo: una cinta fucsia de lado a lado. */
.ficha-proxima.tema-navidad .cartel-placa::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5cqw;
  border-radius: 2.5cqw 2.5cqw 0 0; background: var(--fucsia);
}
.ficha-proxima.tema-navidad .lazo {
  position: absolute; left: 50%; top: -9cqw; width: 26cqw; height: auto; transform: translateX(-50%);
}
.ficha-proxima.tema-navidad .caja { background: rgba(255, 255, 255, .10); box-shadow: none; }
.ficha-proxima.tema-navidad .caja b { color: #fff; text-shadow: 0 0 5px rgba(255, 95, 162, .45); }
.ficha-proxima.tema-navidad .caja small { color: #f0dcf7; }
.ficha-proxima.tema-navidad .cuando { color: #ffd76a; }
/* Sin ambientación: los colores de la marca, sin escena. */
.ficha-proxima.tema-ninguno .cartel {
  background: radial-gradient(90% 55% at 80% 10%, #6a2f92 0%, transparent 62%),
              linear-gradient(180deg, #2c0040 0%, #47106a 100%);
}
.ficha-proxima.tema-ninguno .cartel-placa {
  border-radius: 3cqw; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .25);
}
/* «Llega el 11 de octubre»: si no cabe, parte en dos renglones; nunca se corta. */
.ficha-proxima .linea-titulo .precio { white-space: normal; text-wrap: balance; }
/* En los teléfonos más estrechos la fecha va sin «Abre el», en una línea. */
@media (max-width: 360px) {
  .ficha-proxima .cuando .pre { display: none; }
}

/* ---------- La cuenta grande de su página ----------
   Cuatro casillas —días, horas, min, seg— con los segundos corriendo. En
   Halloween son lápidas que brillan; en Navidad, regalos morados con su
   cinta fucsia; en las demás, la versión de la marca. */
.hero-temporada .cuenta-grande { margin: 4px 0 6px; animation: sube .7s .2s both; }
.hero-temporada .cuenta-grande p { margin: 0; max-width: none; opacity: 1; animation: none; }
.hero-temporada .cuenta-grande .antes { margin-bottom: 8px; }
.hero-temporada .cuenta-grande .fecha { margin-top: 12px; }
.cuenta-grande .antes {
  font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: #eadcff; margin-bottom: 8px;
}
.cuenta-grande .unidades { display: flex; gap: 8px; }
.cuenta-grande .unidad {
  position: relative; flex: 0 0 auto; width: 70px; padding: 12px 0 8px; text-align: center;
  border-radius: 12px; background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .28);
}
.cuenta-grande .unidad b {
  display: block; font-size: 32px; font-weight: 800; line-height: 1; color: #fff;
  font-variant-numeric: tabular-nums;
}
.cuenta-grande .unidad span {
  display: block; margin-top: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: #eadcff;
}
.cuenta-grande .fecha { margin-top: 10px; font-size: 13.5px; font-weight: 600; color: #f4ebff; }
.cuenta-grande .fecha b { color: #ffd76a; }
/* Halloween: lápidas. */
.tema-halloween .cuenta-grande .unidad {
  border-radius: 34px 34px 8px 8px;
  background: linear-gradient(180deg, #3b2358 0%, #22123a 100%);
  border-color: rgba(255, 150, 60, .45);
  box-shadow: 0 0 18px rgba(255, 122, 26, .28), inset 0 -8px 14px rgba(0, 0, 0, .35);
}
.tema-halloween .cuenta-grande .unidad b {
  font: 800 34px/1 "Courier New", ui-monospace, monospace; color: #ffb347;
  text-shadow: 0 0 8px #ff7a1a, 0 0 22px rgba(255, 94, 0, .75);
  animation: vela-digitos 3.2s infinite;
}
.tema-halloween .cuenta-grande .unidad.seg b {
  color: #ff9cc2; text-shadow: 0 0 8px #ff3d7f, 0 0 20px rgba(255, 61, 127, .6);
}
.tema-halloween .cuenta-grande .unidad span { color: #dccbf7; }
.tema-halloween .cuenta-grande .fecha b { color: #ffb347; }
/* Navidad: regalos morados con la cinta fucsia arriba. */
.tema-navidad .cuenta-grande .unidad {
  padding-top: 16px; overflow: hidden; border-color: #e3b44f;
  background: linear-gradient(180deg, #47106a 0%, #2c0040 100%);
}
.tema-navidad .cuenta-grande .unidad::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--fucsia);
}
.tema-navidad .cuenta-grande .unidad b { color: #f7dd96; }
@keyframes vela-digitos { 0%, 100% { opacity: 1; } 44% { opacity: .82; } 47% { opacity: 1; } 72% { opacity: .9; } }
@media (max-width: 420px) {
  .cuenta-grande .unidades { gap: 6px; }
  .cuenta-grande .unidad { width: calc((100% - 18px) / 4); }
  .cuenta-grande .unidad b,
  .tema-halloween .cuenta-grande .unidad b { font-size: 29px; }
}

/* Sin JavaScript la cuenta no corre: la línea que dice qué hacer a cero. */
.hero-temporada .cuenta-grande .ya-abrio { margin-top: 8px; font-size: 13px; font-weight: 700; color: #ffd76a; }
.proxima-prenda-texto .ya-abrio { font-weight: 700; color: var(--fucsia); }

/* ---------- El aviso del administrador: la vista previa ----------
   Una píldora pequeña bajo la fecha de la cuenta, del color de su temporada
   (queja de Emmanuel del 29-9-2026: la caja azul clara «tan absurda allí
   metida» rompía la noche). Oscura y translúcida dentro de la portada; clara
   en la ficha de la prenda (`.en-claro`). */
.vista-previa-pildora {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 14px 0 0; padding: 5px 12px 5px 9px; max-width: 100%;
  border-radius: 999px; border: 1px solid rgba(201, 163, 236, .7);
  background: rgba(14, 6, 24, .55);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  font-size: 12px; font-weight: 500; line-height: 1.3; color: #f4ebff;
}
.hero-temporada .vista-previa-pildora { opacity: 1; max-width: 100%; animation: none; font-size: 12px; margin: 14px 0 0; }
.vista-previa-pildora b { font-weight: 800; }
.vista-previa-pildora svg { flex: 0 0 auto; width: 15px; height: 15px; color: #d9b8ff; }
.vista-previa-pildora.vp-halloween { border-color: rgba(255, 140, 50, .75); }
.vista-previa-pildora.vp-halloween svg { color: #ffb347; }
.vista-previa-pildora.vp-navidad { border-color: rgba(224, 40, 127, .8); }
.vista-previa-pildora.vp-navidad svg { color: #ff9cc2; }
/* En la ficha de la prenda, sobre fondo claro. */
.vista-previa-pildora.en-claro {
  margin: 4px 0 12px; background: var(--lila-suave, #f3edf8);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-color: var(--morado); color: var(--tinta-2);
}
.vista-previa-pildora.en-claro b { color: var(--tinta); }
.vista-previa-pildora.en-claro svg { color: var(--morado); }
.vista-previa-pildora.en-claro.vp-halloween { border-color: #e8600c; }
.vista-previa-pildora.en-claro.vp-halloween svg { color: #e8600c; }
.vista-previa-pildora.en-claro.vp-navidad { border-color: var(--fucsia); }
.vista-previa-pildora.en-claro.vp-navidad svg { color: var(--fucsia); }

/* ---------- La prenda de una temporada que aún no abre ----------
   Su ficha «Próximamente» al lado de lo que dice y cuándo abre. */
.proxima-prenda {
  display: grid; gap: 24px; align-items: center; margin: 8px 0 32px;
  grid-template-columns: minmax(0, 1fr);
}
.proxima-prenda-cartel { width: min(100%, 300px); justify-self: center; }
.proxima-prenda-texto { display: grid; gap: 10px; justify-items: start; }
.proxima-prenda-texto .antetitulo {
  margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--fucsia);
}
.proxima-prenda-texto h1 { margin: 0; font-size: clamp(26px, 5vw, 40px); line-height: 1.08; }
.proxima-prenda-texto p { margin: 0; color: var(--tinta-2); max-width: 46ch; }
.proxima-prenda-botones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
@media (min-width: 720px) {
  .proxima-prenda { grid-template-columns: 300px minmax(0, 1fr); gap: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .cuenta-grande, .cuenta-grande * { animation: none !important; }
}