/* IMPRL Studio.
 *
 * **Claro, no oscuro.** Maná es azul profundo porque se lee de noche y en la
 * cama; una tienda de ropa se ve de día y lo que tiene que destacar es la
 * prenda, no la interfaz. Fondo hueso, tipografía enorme, y todo lo demás
 * quitado de en medio.
 *
 * La referencia que puso Victor es Nude Project: foto a sangre, titular que
 * ocupa la pantalla y rejilla limpia. Lo que no se copia es su densidad, que
 * viene de tener sesenta referencias; con diez prendas una rejilla de doce
 * huecos se ve vacía, así que aquí la rejilla respira.
 */
:root {
  --hueso:  #F2F0EC;
  --tinta:  #0B0B0B;
  --humo:   #6B6764;
  --linea:  #DAD6D0;
  --margen: clamp(18px, 5vw, 56px);
  /* **La barra mide lo que diga esta variable, no lo que traiga el logo.**
     El logo 3D aterriza en la barra a los 1.6 segundos, y hasta entonces la
     barra es más baja. Con el hero metido debajo por un margen negativo, ese
     cambio de alto sería un salto de la foto entera a media entrada. Con un
     alto fijo no hay salto, y el logo se ajusta al hueco. */
  --alto-tira: 64px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--hueso); color: var(--tinta);
  font-family: "Helvetica Neue", Inter, system-ui, sans-serif;
  font-size: 16px; line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

.tira {
  border-bottom: 1px solid var(--linea);
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px var(--margen); position: sticky; top: 0; z-index: 10;
  background: var(--hueso); height: var(--alto-tira);
  transition: background-color .28s ease, border-color .28s ease;
}

/* ── La barra flotando sobre la foto ──────────────────────────────────────
   **Transparente sólo mientras haya foto debajo.** Una barra transparente
   sobre la rejilla deja pasar sudaderas por detrás del menú y no se lee nada,
   así que en cuanto el hero termina vuelve a ser hueso. Lo enciende y lo apaga
   un `IntersectionObserver` en `prendas.js`.

   Sobre la foto los enlaces suben a tinta: el gris de humo se sostiene contra
   un fondo plano, pero encima de un estudio con luz irregular se deshace. El
   subrayado devuelve el aviso de que algo está bajo el ratón, que sin cambio
   de color se había perdido. */
.tira--sobre-foto { background-color: transparent; border-bottom-color: transparent; }
.tira--sobre-foto .tira__nav a, .tira--sobre-foto .tira__boton {
  color: var(--tinta);
  /* **Un halo de hueso pegado a la letra.**
     Medido sobre la foto: detrás del menú el fondo del estudio da 10:1 de
     contraste y se lee de sobra, pero en el recorte de teléfono entra por
     arriba el pelo oscuro de uno, y ahí un 5% de la banda se pone casi negra.
     Aclarar la foto entera para salvar ese 5% le quita la cara a todos, así
     que el que se defiende es el texto. Sobre fondo claro el halo no se ve. */
  text-shadow: 0 0 5px rgba(242, 240, 236, .92), 0 0 2px rgba(242, 240, 236, .92);
}
.tira--sobre-foto .tira__nav a:hover, .tira--sobre-foto .tira__boton:hover {
  text-decoration: underline; text-underline-offset: 4px;
}
/* **Sobre foto oscura, al revés: letra blanca y halo negro.**
   Lo decide la foto, no el gusto. En la de La Previa, medida, la banda que
   tapa la barra da 9 sobre 255 donde cae el menú: negro sobre negro. La clase
   la pone `montarBarra()` leyendo el `letra` de la parte. */
.tira--sobre-foto.tira--clara .tira__nav a,
.tira--sobre-foto.tira--clara .tira__boton {
  color: #fff;
  text-shadow: 0 0 6px rgba(0, 0, 0, .62), 0 0 2px rgba(0, 0, 0, .62);
}
/* El logo de IMPRL no cambia con el fondo. Es café desde la entrada hasta la
   barra; volverlo blanco al aterrizar se leía como un archivo que reemplazaba
   a otro, no como la misma pieza que acababa de moverse. */

/* Con el panel de colecciones abierto la barra vuelve a ser opaca: el panel es
   hueso y una barra transparente encima le dibuja un escalón por arriba. */
.tira:has(#boton-colecciones[aria-expanded="true"]) {
  background-color: var(--hueso); border-bottom-color: var(--linea);
}
.tira__marca {
  display: flex; align-items: center; gap: 9px;
  font-weight: 700; letter-spacing: .16em; font-size: .82rem; text-decoration: none;
}
/* El logo plano, pequeño y al lado del nombre. Hereda el color del texto por
   el `currentColor` del trazo, así que sirve en claro y en oscuro.
   Hubo una versión con volumen y giro y no funcionó: apilar catorce copias de
   una silueta de trazos finos convierte el canto en un borrón, y el giro la
   dejaba de canto la mitad del tiempo. */
.tira__marca .logo { width: 30px; height: auto; flex: none; }
.tira__marca .logo3d { width: 46px; height: 46px; }
/* Los tres van a la misma altura: `align-items: center` en el nav, porque un
   `<button>` y un `<a>` no se alinean solos aunque midan lo mismo. */
.tira__nav { display: flex; align-items: center; gap: 18px; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.tira__nav a { text-decoration: none; color: var(--humo); }
.tira__nav a:hover { color: var(--tinta); }

/* **El botón tiene que parecer un enlace más.**
   Un `<button>` trae de fábrica su propia tipografía, su fondo, su borde y su
   `text-transform: none`, y en Safari además una caja gris redondeada al
   tocarlo. Sin desmontar todo eso, «Colecciones» salía en otra letra, en
   minúsculas y metido en una pastilla junto a dos enlaces limpios. */
.tira__boton {
  /* **`font-size` heredado y no escrito.** Con un `.78rem` propio, «Colecciones»
     y «Bolsa», que son botones, se quedaban grandes cuando el menú encogía en
     el teléfono, y al lado de «Pedidos» y «Maná», que son enlaces, se veían de
     dos tamaños distintos en la misma fila. */
  font: inherit; font-size: inherit; letter-spacing: .08em; text-transform: uppercase;
  color: var(--humo); background: none; border: 0; border-radius: 0;
  padding: 0; margin: 0; line-height: inherit; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.tira__boton:hover, .tira__boton[aria-expanded="true"] { color: var(--tinta); }
/* El foco sí se ve, pero sólo para quien navega con teclado: quitarlo del todo
   deja a esa persona sin saber dónde está. */
.tira__boton:focus { outline: none; }
.tira__boton:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }

/* El titular ocupa la pantalla. Es lo que hace que una tienda con diez
   prendas se sienta una marca y no un catálogo. */
/* ── El hero ──────────────────────────────────────────────────────────────
   A sangre: `main` no tiene relleno y esta sección tampoco, así que la foto
   toca los dos bordes. El fondo del estudio es el mismo hueso de la página, y
   por eso no hace falta ni marco ni sombra: la foto no acaba, se disuelve.

   La foto es 2:1, que es la proporción en la que caben cinco personas de
   cuerpo entero. En un teléfono eso son 195 píxeles de alto y no es un hero,
   es una cinta, así que ahí se recorta a cuadrado por el centro y se ven dos
   o tres. `object-position` lo empuja un poco a la derecha para no cortar a
   nadie por la cara. */
/* El hero arranca **debajo de la barra**, no después: es lo que hace que una
   barra transparente se note transparente. El margen negativo vale justo el
   alto de la barra, y como la barra es `sticky` con `z-index`, la foto le pasa
   por debajo al desplazar. */
.hero { position: relative; background: var(--hueso); margin-top: calc(var(--alto-tira) * -1); }
/* **`> img`, no `img`.** Con el selector suelto esta regla alcanzaba también al
   logotipo del titular, que es otra imagen dentro del hero, y le imponía la
   proporción 2:1 de la foto con `object-fit: cover`: el logo salía estirado al
   ancho del bloque y recortado. La foto es hija directa; el logo va dentro de
   su encabezado. */
.hero > img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 2/1; object-fit: cover;
}
/* **El degradado que se come el borde de abajo.**
   No es un velo para que se lea el texto, aunque también sirva: es lo que
   hace que la foto no acabe. Fundiendo el pie contra el hueso de la página, la
   foto se disuelve en vez de cortarse en una línea recta.

   **Oscuro y no hueso, porque la letra va en blanco.** Con la foto de estudio
   el suelo ya era hueso y el velo claro no quitaba nada. En ésta, medido sobre
   la columna del centro que es por donde va el texto, ni el negro ni el blanco
   aguantan sobre la foto cruda: la sudadera rosa sube a 0.70 de luminancia y
   las negras bajan a 0.02, así que los dos fallan en algún punto. Con el velo
   oscuro el blanco pasa: al 54% el logotipo va a 3.2:1 y al 82% la línea del
   drop a 5.3:1.

   Y sólo aprieta en la última franja, que es donde va la letra. Arriba del 55%
   la foto no se toca, así que los estampados se ven enteros. */
.hero::after {
  content: ""; position: absolute; inset: 55% 0 0 0; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(11, 18, 32, 0)   0%,
    rgba(11, 18, 32, .16) 40%,
    rgba(11, 18, 32, .54) 74%,
    rgba(11, 18, 32, .82) 100%);
}
/* Centrado, y el logotipo arriba con su pie debajo. Alineado a la izquierda
   competía con el nombre de la colección, que en esta foto va escrito con
   nubes y en el eje: dos cosas importantes en dos sitios distintos. */
.hero__texto {
  position: absolute; left: var(--margen); right: var(--margen);
  bottom: clamp(10px, 2vh, 24px); z-index: 1;
  display: grid; justify-items: center; text-align: center;
}
/* **El `h1` a lo ancho, y la imagen centrada dentro.**
   Sin el `width: 100%`, el encabezado se encogía al ancho intrínseco del SVG,
   241 px, y el porcentaje de la imagen se resolvía contra ese ancho: salía de
   164 y pegada a la izquierda de su propia caja. Eran los 39 px exactos que se
   veían de descuadre contra la línea del drop, que sí estaba en el eje. */
.hero__marca { margin: 0; width: 100%; }
.hero__marca img {
  display: block; width: min(290px, 33%); height: auto; margin-inline: auto;
  /* El archivo ya viene blanco, así que aquí no se le hace nada: la sombra es
     para el borde de las letras, donde el velo es más flojo. */
  filter: drop-shadow(0 2px 14px rgba(11, 18, 32, .55));
}
/* Blanco rebajado, no gris: un gris apoyado en una foto que aún se
   transparenta se lee a medias. Rebajando el blanco se mantiene el contraste
   contra el velo oscuro y sigue siendo un pie y no un segundo titular. */
.hero__texto .portada__drop {
  color: rgba(255, 255, 255, .88); opacity: 1; font-weight: 600;
  margin: clamp(8px, 1.2vh, 14px) 0 0;
  text-shadow: 0 1px 10px rgba(11, 18, 32, .6);
}

/* **En teléfono cambia el recorte y cambia el titular.**
   Un 2:1 en 375 px de ancho son 195 de alto: eso no es una portada, es una
   cinta, y encima no cabe una letra. Así que la foto se recorta a 4:5, que
   deja ver dos personas de cuerpo entero y da sitio abajo.

   El titular se parte en dos líneas apretadas y baja de cuerpo, y la línea del
   drop se acorta: «Drop 2.0 · Con Maná y La Previa» en un móvil ocupa dos
   renglones y empuja el titular contra las rodillas. Ahí dice sólo el drop, y
   con quién es se lee dos secciones más abajo. */
@media (max-width: 700px) {
  /* **5:4 y no 4:5, y la cuenta es ésta.** Con una foto de 2:1 y un recorte
     `cover` más alto que ancho, lo que se recorta es siempre el ancho, nunca
     el alto: `object-position` en vertical no hace nada. La porción de ancho
     que se ve es `(ancho/alto) / 2`, así que a 4:5 se veía el 40% central y el
     rótulo de nubes, que ocupa del 25% al 77%, salía partido: «ingdom Citize».
     A 5:4 se ve el 62% y el rótulo entra entero con margen. */
  .hero > img { aspect-ratio: 5/4; object-position: 50% center; }
  .hero::after { inset: 48% 0 0 0; }
  .hero__marca img { width: 56%; }
  .hero__texto .portada__drop span { display: none; }

  /* **La barra, en tamaño de teléfono.**
     Estaba con las medidas del escritorio: un logo de 46 px y cuatro enlaces
     con 18 px de aire entre ellos ocupan de sobra los 375 px de ancho, y
     encima van por delante de la foto, así que lo que se comían era la
     portada. Aquí el logo baja a 32 y el menú aprieta letra y huecos: cabe
     igual y deja ver la foto, que es lo que se vino a ver. */
  :root { --alto-tira: 52px; }
  .tira { padding-inline: 14px; }
  .tira__marca .logo3d { width: 32px; height: 32px; }
  .tira__marca .logo { width: 22px; }
  .tira__nav { gap: 11px; font-size: .64rem; letter-spacing: .05em; }
}

/* ── El drop en vivo ──────────────────────────────────────────────────────
   Un marcador compacto de lanzamiento: el fondo negro lo agrupa y el espacio
   separa promoción, reloj y condiciones. No necesita una retícula dibujada
   encima; esas guías partían la página como si fuera una hoja de cálculo. */
.drop-vivo {
  position: relative; overflow: hidden;
  scroll-margin-top: var(--alto-tira);
  margin: 0; padding: clamp(18px, 2.4vw, 34px) var(--margen);
  color: var(--hueso); background: var(--hueso);
}
.drop-vivo::before { content: none; }
.drop-vivo__interior {
  width: min(1480px, 100%); margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(270px, .76fr) minmax(500px, 1.24fr);
  grid-template-areas:
    "promo estado"
    "promo cuerpo"
    "pie pie";
  align-items: center; gap: 10px clamp(32px, 4vw, 68px);
  padding: clamp(22px, 2.5vw, 36px);
  border-radius: 12px; background: var(--tinta);
  box-shadow: 0 16px 44px rgba(11, 11, 11, .09);
}
.promo-drop {
  position: relative; grid-area: promo;
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: center; min-width: 0; margin: 0;
}
.promo-drop__rotulo {
  margin: 0 0 14px;
  color: rgba(242, 240, 236, .58); font-size: .64rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
}
.promo-drop__oferta {
  display: flex; align-items: center; gap: clamp(14px, 1.6vw, 22px); min-width: 0;
}
.promo-drop__oferta > strong {
  flex: none; font-size: clamp(3.5rem, 4.6vw, 4.9rem); font-weight: 700;
  line-height: .78; letter-spacing: -.085em;
}
.promo-drop__oferta h2 {
  max-width: 11ch; margin: 0 0 5px; font-size: clamp(1.15rem, 1.65vw, 1.55rem);
  line-height: .92; letter-spacing: -.04em; text-transform: uppercase;
}
.promo-drop__oferta p {
  max-width: 32ch; margin: 0; color: rgba(242, 240, 236, .62); font-size: .76rem;
}
.promo-drop__codigo {
  min-width: 174px; min-height: 48px; margin-top: 18px;
  display: grid; align-content: center; justify-items: start; gap: 1px;
  padding: 9px 14px; border: 0;
  border-radius: 5px; background: rgba(242, 240, 236, .1); color: var(--hueso); cursor: pointer;
  font: inherit; text-align: left;
  transition-property: background-color, color, scale; transition-duration: .15s;
}
.promo-drop__codigo span { font-size: 1rem; font-weight: 700; letter-spacing: .1em; }
.promo-drop__codigo small {
  color: rgba(242, 240, 236, .58); font-size: .62rem;
  letter-spacing: .08em; text-transform: uppercase;
}
.promo-drop__codigo:hover,
.promo-drop__codigo--copiado { background: var(--hueso); color: var(--tinta); }
.promo-drop__codigo:hover small,
.promo-drop__codigo--copiado small { color: rgba(11, 11, 11, .62); }
.promo-drop__codigo:active { scale: .96; }
.promo-drop__codigo:focus-visible { outline: 2px solid var(--hueso); outline-offset: 3px; }
.drop-vivo__estado {
  position: relative; grid-area: estado;
  display: flex; align-items: center; gap: 8px;
  align-self: end; margin: 0;
  font-size: .7rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(242, 240, 236, .72);
}
.drop-vivo__punto, .compra-viva__punto {
  width: 7px; height: 7px; flex: none; border-radius: 50%;
  background: #35A853; box-shadow: 0 0 0 4px rgba(53, 168, 83, .13);
}
.drop-vivo__cuerpo {
  position: relative; grid-area: cuerpo;
  display: grid; grid-template-columns: minmax(155px, .58fr) minmax(0, 1.42fr);
  gap: clamp(18px, 2.7vw, 42px); align-items: center;
  margin: 0; padding: clamp(15px, 1.8vw, 22px);
  border-radius: 8px; background: rgba(242, 240, 236, .055);
}
.drop-vivo h2 {
  margin: 0; max-width: 10ch; font-size: clamp(1.45rem, 2.3vw, 2.35rem);
  line-height: .9; letter-spacing: -.05em; text-transform: uppercase;
}
.drop-vivo__reloj {
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: start; font-variant-numeric: tabular-nums;
}
.drop-vivo__reloj > span { display: grid; gap: 2px; text-align: center; }
.drop-vivo__reloj b {
  font-size: clamp(2rem, 3.2vw, 3.25rem); line-height: .8;
  letter-spacing: -.07em; font-weight: 700;
}
.drop-vivo__reloj small {
  margin-top: 7px; color: rgba(242, 240, 236, .52); font-size: .56rem;
  letter-spacing: .14em; text-transform: uppercase;
}
.drop-vivo__reloj i {
  padding: 0 clamp(3px, .7vw, 9px); font-style: normal;
  font-size: clamp(1.2rem, 2vw, 2rem); line-height: .74;
  color: rgba(242, 240, 236, .18);
}
.drop-vivo__pie {
  position: relative; grid-area: pie;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px;
  padding-top: 9px; color: rgba(242, 240, 236, .6); font-size: .7rem;
}
.drop-vivo__pie p { margin: 0; }
.drop-vivo__pie strong { color: var(--hueso); font-weight: 600; }
.drop-vivo__actividad {
  margin-left: auto !important; color: var(--hueso); font-weight: 600; text-align: right;
}
.drop-vivo--cerrado .drop-vivo__punto { background: var(--humo); box-shadow: none; }

/* La compra confirmada vive fuera del flujo para no mover la tienda cuando
   aparece. No incluye datos personales y sólo se anima al entrar y salir. */
.compra-viva {
  position: fixed; z-index: 20; left: clamp(14px, 2.4vw, 28px); bottom: clamp(14px, 2.4vw, 28px);
  width: min(390px, calc(100vw - 28px));
  display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 13px;
  padding: 15px 14px 15px 16px; color: var(--hueso); background: var(--tinta);
  box-shadow: 0 18px 50px rgba(11, 11, 11, .22);
  opacity: 0; transform: translateY(10px);
  transition-property: opacity, transform; transition-duration: .24s;
  transition-timing-function: cubic-bezier(.2, 0, 0, 1);
}
.compra-viva[hidden] { display: none; }
.compra-viva--visible { opacity: 1; transform: translateY(0); }
.compra-viva__punto { margin-top: 6px; }
.compra-viva__texto { display: grid; min-width: 0; }
.compra-viva__texto small {
  color: rgba(242, 240, 236, .62); font-size: .62rem;
  letter-spacing: .14em; text-transform: uppercase;
}
.compra-viva__texto strong {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .88rem; font-weight: 600;
}
.compra-viva__texto time { color: rgba(242, 240, 236, .62); font-size: .68rem; }
.compra-viva button {
  display: grid; place-items: center; width: 30px; height: 30px;
  margin: -5px -4px 0 0; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: rgba(242, 240, 236, .7);
  font: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer;
  transition-property: background-color, color, scale; transition-duration: .15s;
}
.compra-viva button:hover { color: var(--hueso); background: rgba(255,255,255,.1); }
.compra-viva button:active { scale: .96; }
.compra-viva button:focus-visible { outline: 2px solid var(--hueso); outline-offset: 2px; }

@media (max-width: 920px) {
  .drop-vivo { padding: 14px; }
  .drop-vivo__interior {
    grid-template-columns: 1fr;
    grid-template-areas: "promo" "estado" "cuerpo" "pie";
    gap: 12px; padding: 18px 16px; border-radius: 9px;
  }
  .promo-drop {
    align-items: stretch;
  }
  .promo-drop__rotulo { margin-bottom: 10px; }
  .promo-drop__oferta {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    align-items: center; gap: 12px;
  }
  .promo-drop__oferta > strong { font-size: clamp(2.9rem, 15vw, 4rem); }
  .promo-drop__oferta > div { min-width: 0; }
  .promo-drop__oferta h2 { font-size: clamp(.9rem, 4.2vw, 1.15rem); }
  .promo-drop__oferta p { font-size: .72rem; }
  .promo-drop__codigo { width: 100%; min-height: 44px; margin-top: 12px; padding-block: 7px; }
  .drop-vivo__estado { align-self: auto; margin-top: 2px; }
  .drop-vivo__cuerpo {
    grid-template-columns: 1fr; align-items: center; gap: 14px;
    padding: 15px;
  }
  .drop-vivo h2 { max-width: none; font-size: clamp(1.1rem, 5vw, 1.35rem); line-height: .95; }
  .drop-vivo__reloj b { font-size: clamp(1.55rem, 8vw, 2.2rem); }
  .drop-vivo__reloj small { margin-top: 5px; font-size: .48rem; letter-spacing: .1em; }
  .drop-vivo__reloj i { padding-inline: 2px; font-size: clamp(1rem, 5vw, 1.5rem); }
  .drop-vivo__pie { align-items: flex-start; flex-direction: column; gap: 5px; }
  .drop-vivo__actividad { margin-left: 0 !important; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .compra-viva { transition: none; }
}
/* ── La pasarela ──────────────────────────────────────────────────────────
   Todas las prendas en una fila que se desliza, **pegadas**. Victor lo pidió
   así: contenedor tras contenedor, sin huecos. Lo que separa una de otra es
   la línea de un pelo, no el aire, y eso es justo lo contrario de la rejilla
   de abajo, donde manda la silueta y el hueco.

   Las dos formas conviven porque hacen cosas distintas: aquí se recorre el
   perchero de un tirón, abajo se compara dentro de una parte.

   `scroll-snap` en `proximity` y no en `mandatory`: con mandatory, un dedo que
   sólo quería empujar un poco se ve arrastrado a la ficha siguiente, y en una
   fila larga eso se siente como si la página peleara. */
/* **Sin raya y pegada a la foto.**
   La raya tenía sentido cuando el hero se fundía al hueso: separaba dos zonas
   del mismo color. Ahora la foto acaba en un corte oscuro, así que su propio
   borde ya es la separación, y la raya debajo era una segunda línea a un
   centímetro de la primera, gastando aire por nada. */
.pasarela { margin-top: clamp(18px, 3vh, 40px); }
.pasarela__cabecera {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 0 var(--margen); margin-bottom: 18px;
}
.pasarela__pista {
  display: flex; gap: 0;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
/* La barra de desplazamiento se esconde porque la fila ya se explica sola: se
   ve media prenda asomando por el borde, y eso dice «hay más» mejor que una
   barra gris. Quien navegue con teclado llega igual, tabulando por los botones
   de cada foto, y el navegador desplaza la fila solo. */
.pasarela__pista::-webkit-scrollbar { display: none; }
.pasarela__ficha {
  flex: 0 0 62%; scroll-snap-align: start;
  border-right: 1px solid var(--linea);
  padding-bottom: 18px; min-width: 0;
}
@media (min-width: 640px)  { .pasarela__ficha { flex-basis: 33.333%; } }
@media (min-width: 1000px) { .pasarela__ficha { flex-basis: 22%; } }
/* Sin la caja gris de la rejilla: dentro de un contenedor que ya tiene su
   línea, un fondo de otro tono dibuja una segunda caja y se ven dos marcos
   metidos uno en otro. */
.pasarela .prenda__marco { background: none; }
.pasarela .prenda__foto { margin-bottom: 12px; --aire: 13%; }
.pasarela .prenda__nombre, .pasarela .prenda__precio { padding: 0 14px; }
.pasarela__ficha:hover .prenda__carril { transform: translateX(-100%); }


.coleccion { padding: clamp(40px, 8vh, 88px) var(--margen) 0; }
.coleccion__cabecera {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; border-top: 1px solid var(--linea); padding-top: 14px; margin-bottom: 26px;
}
.coleccion__nombre {
  font-size: clamp(1.4rem, 3.4vw, 2.4rem); margin: 0; font-weight: 700;
  letter-spacing: -.03em; text-transform: uppercase;
}
.coleccion__con { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--humo); }

/* ── La banda de una parte ────────────────────────────────────────────────
   Foto a sangre y **el texto dentro de la foto, en todos los tamaños**. Lo
   tuve un rato bajándolo en teléfono, y Victor: «te dije dentro de la imagen
   en todas las versiones». Así que lo que cambia con el ancho no es dónde va
   el texto, sino el recorte que le hace sitio: 2:1 en escritorio, 4:5 en
   teléfono, el mismo par que el hero.

   El velo va debajo del texto y sube hasta poco más de la mitad. En teléfono
   sube más porque el bloque de texto ocupa la misma altura en una foto que
   mide la mitad. */
/* La primera banda de una colección se mete debajo de la barra, igual que el
   hero: es lo que hace que una barra transparente se note transparente. */
.coleccion--arriba { padding-top: 0; margin-top: calc(var(--alto-tira) * -1); }

.banda {
  position: relative;
  width: calc(100% + var(--margen) * 2);
  margin: 0 calc(var(--margen) * -1) clamp(24px, 4vh, 40px);
}
/* `> img` por lo mismo que en el hero: dentro de la banda hay otra imagen, el
   logotipo de la parte, y esta regla la estiraba a 4:5. */
.banda > img {
  /* `max-width: none` porque la regla global de `img` la caparía al ancho de
     la sección. Y `height: auto` porque el `height="1500"` del HTML es altura
     CSS: sin esto la foto sale de 606 por 1500, o sea una columna. Los
     atributos siguen puestos para que el navegador reserve el hueco antes de
     descargarla y la página no salte. */
  width: 100%; max-width: none; height: auto;
  aspect-ratio: 4/5; object-fit: cover; display: block;
  object-position: var(--foco, 50% center);
}
.banda--foto::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top,
    rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .42) 40%, rgba(0, 0, 0, 0) 78%);
}
.banda--oscura::after {
  background: linear-gradient(to top,
    rgba(242, 240, 236, .9) 0%, rgba(242, 240, 236, .55) 40%, rgba(242, 240, 236, 0) 78%);
}
.banda--foto .banda__texto {
  position: absolute; z-index: 1;
  left: var(--margen); right: var(--margen); bottom: clamp(16px, 3vh, 48px);
}
/* El texto se va al lado que la foto deje vacío. Alineado a la derecha y no
   sólo empujado: un bloque de texto alineado a la izquierda pegado al borde
   derecho deja un canto irregular contra el borde de la foto. */
.banda--derecha .banda__texto { text-align: right; }

/* El nombre en letra, para la parte que no tenga logotipo. */
.banda--clara .banda__nombre { color: #fff; }
.banda--oscura .banda__nombre { color: var(--tinta); }

/* Sin foto la banda es sólo su texto, y necesita una línea que la separe de la
   de arriba: lo que separaba antes era el borde de la foto. */
.banda:not(.banda--foto) {
  width: auto; margin-left: 0; margin-right: 0;
  border-top: 1px solid var(--linea);
}
.banda:not(.banda--foto) .banda__texto { padding: 16px 0 0; }
.coleccion__vacia { color: var(--humo); max-width: 46ch; }

.banda__nombre {
  font-size: clamp(1.9rem, 6vw, 4.2rem); line-height: .94; letter-spacing: -.035em;
  margin: 8px 0 0; font-weight: 700; text-transform: uppercase;
}
/* **Cada logotipo tiene su propia forma, así que se limitan los dos lados.**
   La Previa es una pastilla apaisada de 3.5 a 1, Child of God una firma de 1.6
   y Maranata es «MR» sobre «NT», más alto que ancho. Con un solo alto fijo, el
   apaisado sale enano y el vertical se come la banda. Con tope de ancho y tope
   de alto, cada uno se para donde le toca y los tres pesan parecido.

   Vienen en blanco, que es lo que hace falta encima de estas tres fotos. Sobre
   una foto clara se voltearían con `brightness(0)`, como el del hero. */
.banda__nombre--marca { margin: 0; line-height: 0; }
.banda__marca {
  display: block; width: auto; height: auto;
  max-width: min(340px, 64%);
  max-height: clamp(56px, 8vw, 104px);
}
.banda__marca--alta { max-height: clamp(96px, 14vw, 178px); }
.banda--derecha .banda__marca { margin-left: auto; }

/* **Los dos envoltorios se ciñen al rótulo, y el rótulo se mide contra ellos.**
   Meter un `<span>` entre la banda y la imagen rompía el `max-width: 64%` de
   arriba: ese 64% pasaba a contarse contra el propio envoltorio, que a su vez
   se medía por la imagen, y las dos medidas se perseguían hasta quedarse en
   29 píxeles de ancho. La regla es que **la medida en porcentaje va en el
   envoltorio, contra la banda, y la imagen de dentro se mide contra él.**

   Y la orilla derecha se muda también al envoltorio: puesta en la imagen, la
   empujaba dentro de una caja que ya estaba ceñida y no movía nada. */
.banda__cromo, .banda__plata {
  display: block; width: fit-content; max-width: min(340px, 64%);
}
.banda__cromo > img, .banda__plata > img { max-width: 100%; }
.banda--derecha .banda__cromo, .banda--derecha .banda__plata { margin-left: auto; }
.banda--oscura .banda__marca { filter: brightness(0); }

/* **El botón sobre foto va hueco, no relleno.**
   Relleno de hueso sobre una foto es un bloque de crema pegado encima, y con
   dos fotos frías de las tres el tono cálido del hueso se veía sucio. Hueco
   sólo hay dos colores, el blanco de la letra y lo que haya detrás, y al pasar
   el ratón se rellena, que es cuando conviene que grite. */
.banda .boton {
  /* Más aire que cuando había párrafo: entre un logotipo y un botón pegados no
     se sabe si el botón es parte de la marca. */
  margin-top: clamp(20px, 3.4vh, 32px);
  background: transparent; border-width: 1px;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.banda--clara .boton { color: #fff; border-color: rgba(255, 255, 255, .85); }
.banda--clara .boton:hover { background: #fff; color: var(--tinta); border-color: #fff; }
.banda--oscura .boton { color: var(--tinta); border-color: var(--tinta); }
.banda--oscura .boton:hover { background: var(--tinta); color: var(--hueso); }

@media (min-width: 701px) {
  .banda--foto > img { aspect-ratio: 2/1; }
  /* En 2:1 el texto ocupa mucha menos parte del alto, así que el velo puede
     empezar más abajo y dejar las caras limpias. */
  .banda--foto::after {
    background: linear-gradient(to top,
      rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .28) 34%, rgba(0, 0, 0, 0) 62%);
  }
  .banda--oscura::after {
    background: linear-gradient(to top,
      rgba(242, 240, 236, .82) 0%, rgba(242, 240, 236, .4) 34%, rgba(242, 240, 236, 0) 62%);
  }
  }

/* **En la portada las bandas van pegadas, una tras otra.**
   Ahí no hay prendas, sólo tres fotos, y separadas con aire se leen como tres
   cosas sueltas; seguidas se leen como una colección. Va sólo en `#catalogo`:
   dentro de una colección la banda sí necesita separarse de la rejilla que
   viene debajo. */
#catalogo .coleccion { padding: 0; }
#catalogo .banda { width: 100%; margin: 0; }
#catalogo .banda:not(.banda--foto) { padding: 0 var(--margen) 24px; }

/* Con la barra pegada arriba, un salto a un ancla deja el destino tapado. */
.pasarela, .coleccion, .rejilla { scroll-margin-top: calc(var(--alto-tira) + 14px); }

.rejilla { display: grid; gap: clamp(16px, 3vw, 30px); grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (min-width: 860px) { .rejilla { grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* ── La ficha de una prenda ───────────────────────────────────────────────
   **Sin caja.** La foto tenía fondo `#E6E2DC` sobre una página `#F2F0EC`:
   dos tonos casi iguales que dibujan un marco sin querer, y con la prenda
   dentro se leían tres cajas metidas una en otra. Victor: «rediseña los
   contenedores».

   Ahora la prenda va directa sobre el fondo de la página. Lo que la separa de
   la de al lado es el aire, no una línea, que es como se ven las tiendas de
   ropa: manda la silueta, no el recuadro.

   `contain` sigue: estas fotos son más altas que anchas, y recortarlas se
   comía los hombros y el bajo. */
.prenda__foto {
  margin-bottom: 14px;
  /* **El aire es el diseño.** Con la prenda pegada a los bordes la ficha se
     ve apretada; con este margen queda enmarcada y respira, que es lo que
     hace que un catálogo pequeño parezca cuidado. Va en porcentaje para que
     el marco se mantenga igual de ancho en teléfono que en monitor. Vive en
     las caras y no aquí, para que el carril mida la caja entera y un paso
     sea exactamente una prenda. */
  --aire: 15%;
  display: block; position: relative;
  appearance: none; border: 0; padding: 0; width: 100%; background: none;
  font: inherit; color: inherit; text-align: inherit; cursor: zoom-in;
}
/* **Recorta el marco, no el botón.**
   WebKit no aplica `overflow` a un `<button>`: puesto ahí, las dos caras del
   carril se ven a la vez en todo iPhone, y en ningún navegador de escritorio.
   Un `span` recorta en todos. */
.prenda__marco {
  display: block; overflow: hidden;
  aspect-ratio: 1/1.15; background: #E6E2DC;
}
.prenda__foto:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }
.prenda__carril {
  display: flex; height: 100%;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}
.prenda__cara {
  flex: 0 0 100%; height: 100%;
  padding: var(--aire); box-sizing: border-box;
}
.prenda__foto img { width: 100%; height: 100%; object-fit: contain; display: block; }
.prenda:hover .prenda__carril { transform: translateX(-100%); }
@media (prefers-reduced-motion: reduce) { .prenda__carril { transition: none; } }

.prenda__nombre {
  font-size: .92rem; font-weight: 600; margin: 0; letter-spacing: -.01em;
}
/* Precio y tallas en la misma fila: son los dos datos que se miran a la vez al
   comparar entre prendas, y en renglones separados obligan a bajar la vista
   dos veces por ficha. */
.prenda__precio {
  font-size: .92rem; color: var(--tinta); margin: 5px 0 0;
  display: flex; gap: 8px; align-items: baseline;
}
.prenda__precio s { color: var(--humo); font-size: .82rem; text-decoration-thickness: 1px; }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border: 1px solid var(--tinta); background: var(--tinta);
  color: var(--hueso); text-decoration: none; font-size: .82rem;
  letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
}

.pie { margin-top: clamp(72px, 10vh, 140px); padding: clamp(44px, 7vw, 92px) var(--margen) 24px; display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 42px 28px; color: var(--hueso); background: var(--tinta); }
.pie__marca img { width: min(190px, 70%); filter: invert(1); }
.pie__marca p { max-width: 24ch; margin: 20px 0 0; color: rgba(242,240,236,.62); font-size: .88rem; }
.pie__col { display: grid; align-content: start; gap: 11px; }
.pie__col span { margin-bottom: 8px; color: rgba(242,240,236,.45); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; }
.pie__col a { color: var(--hueso); font-size: .82rem; text-decoration: none; }
.pie__col a:hover { text-decoration: underline; text-underline-offset: 4px; }
.pie__base { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 18px; padding-top: 20px; border-top: 1px solid rgba(242,240,236,.18); color: rgba(242,240,236,.48); font-size: .68rem; }

/* ── La tinta corrida ─────────────────────────────────────────────────────
   El filtro vive en el HTML porque un `url(#tinta)` desde CSS necesita que el
   `<filter>` esté en el documento, no en la hoja.

   **Sólo titulares.** En texto de leer, desplazar los bordes lo vuelve una
   sopa. Y con `prefers-reduced-motion` no se quita —no se mueve nada—, pero sí
   se quita en impresión: en papel la tinta ya se corre sola y el filtro sólo
   emborrona. */
.tinta { filter: url(#tinta); }
@media print { .tinta { filter: none; } }

/* Si el navegador no sabe de filtros SVG, el titular sale limpio y ya está.
   Nada que degradar: el texto es texto. */
@supports not (filter: url(#tinta)) { .tinta { filter: none; } }

/* ── El logo en 3D, arriba ────────────────────────────────────────────────
   Aquí sí se gana su peso: es lo primero que se ve y se mira una vez. En la
   barra fija no iría, que ésa te acompaña toda la página y son 670 KB.

   Nace con el SVG plano dentro y `logo3d.js` lo sustituye por el lienzo. Si
   el guión no carga, lo plano se queda y no hay hueco. */
/* En la barra. Victor lo quiso arriba y ahí va: son 670 KB de three.js en una
   barra fija, y es una decisión suya sabiendo el peso. Se carga con `defer`,
   así que no frena el pintado de la página. */
.logo3d { width: 68px; height: 68px; flex: none; }
/* **El mismo café que el logo de tres dimensiones.**
   El SVG plano vive dentro hasta que three.js llega y lo sustituye. Heredaba
   `currentColor`, que aquí es la tinta, así que en la entrada aparecía un logo
   **negro** durante una fracción de segundo y luego saltaba a café: un
   parpadeo justo en lo primero que se ve de la tienda. Con el mismo color, el
   cambio no se nota, y si three.js falla se queda un logo del color correcto.

   El número está también en `logo3d.js`, en el material. Son dos técnicas
   distintas para el mismo color y no hay forma de que una lea a la otra: si se
   cambia, se cambia en los dos sitios. */
.logo3d > svg { width: 100%; height: 100%; color: #6B4A2F; }
.logo3d > canvas { width: 100%; height: 100%; display: block; }

/* El nombre del drop encima del titular. Pequeño y en versalitas: sitúa sin
   competir con la colección, que es lo que tiene que leerse primero. */
.portada__drop {
  font-size: .76rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--humo); margin: 0 0 14px;
}

/* ── La puerta ────────────────────────────────────────────────────────────
   La tienda cerrada hasta que abre la preventa. El atributo lo pone
   `puerta.js` antes de que se pinte nada, así que la tienda no llega a
   asomarse: `display:none` y no `opacity`, o los lectores de pantalla la leen
   entera por detrás de la cortina. */
html[data-puerta="cerrada"] body > *:not(.puerta) { display: none !important; }
html[data-puerta="cerrada"] body { overflow: hidden; }

/* El cielo de fondo, y encima todo en blanco.

   **El velo oscuro no es decoración.** Midiendo el blanco sobre esta foto sin
   nada salía en 2.9:1 donde va el formulario, y sobre una nube se caía a
   1.1:1, que es texto invisible. El degradado sube desde abajo, que es justo
   por donde va bajando el texto, y deja el cielo limpio arriba donde sólo hay
   marcas. */
.puerta {
  position: fixed; inset: 0; z-index: 200;
  /* Sólo el color de respaldo. El cielo va en la capa fija de `::before`, no
     aquí: la puerta se desplaza cuando el contenido no cabe, y un fondo pegado
     al contenido se acaba a la altura de la ventana, así que al bajar salía
     una franja cruda. `background-attachment: fixed` lo arreglaría, pero en
     Safari de iPhone es de los que dan tirones o directamente no se aplica. */
  background: #0B1220;
  /* **Cabe en una pantalla y no se desplaza.**
     `100dvh` y no `100vh`: en el móvil, `vh` cuenta la altura con las barras
     del navegador escondidas, así que un diseño de 100vh siempre sobresale un
     poco por abajo. `dvh` mide lo que de verdad se ve.

     Lo que hace que quepa no es esto, sino que todo lo de dentro se mide con
     `min(vw, vh)`: cuando la ventana es baja, encoge por alto igual que encoge
     por ancho. Con `vw` sola, una ventana apaisada mantenía el tamaño de
     escritorio dentro de 500 px de alto y se salía. */
  display: grid; align-content: center; justify-items: center;
  gap: 0;
  padding: clamp(10px, 2.5vh, 34px) var(--margen)
           calc(clamp(10px, 2.5vh, 34px) + env(safe-area-inset-bottom));
  height: 100dvh; overflow: hidden;
  text-align: center; color: #FFF;
}
/* **El cielo, con un velo parejo encima.**
   Estuvo un rato con un degradado que se iba cerrando hacia abajo hasta el
   82%, y era feo: dejaba media pantalla en gris oscuro. La culpa era de una
   cuenta mía mal hecha, no del método. Midiendo la foto de verdad, píxel a
   píxel, las nubes más brillantes no llegan a donde yo suponía, y **con un
   velo parejo del 55% ya no queda un solo píxel del cielo por debajo de 4.5:1
   con letra blanca**. Aquí va al 58%, con margen.

   Parejo y no degradado a propósito: un velo uniforme se lee como que la foto
   está de noche, y un degradado se lee como una mancha.

   Va en `fixed` porque la puerta se desplaza cuando el contenido no cabe, y un
   fondo pegado al contenido se acaba a la altura de la ventana: al bajar salía
   una franja cruda. Capa aparte y no `background-attachment: fixed`, que en
   Safari de iPhone da tirones o no se aplica. */
.puerta::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background:
    linear-gradient(rgba(6, 12, 24, .58), rgba(6, 12, 24, .58)),
    url("puerta.webp") center / cover no-repeat;
}
/* Tres planos, y el orden importa: las prendas al fondo, el velo encima de
   ellas, y el texto encima de todo. Así el mismo degradado que hace legible el
   contador apaga también las prendas, y ninguna se le pone delante a un
   número. `isolation` para que estos tres números no compitan con nada de
   fuera. */
.puerta { isolation: isolate; }
.puerta > *:not(.puerta__stickers) { position: relative; z-index: 3; }

/* ── Cómo se arma la pantalla ─────────────────────────────────────────────
   Antes salía entera de golpe, y una foto con letras encima que aparece de
   golpe es una captura de pantalla: no hay nada que mirar mientras llega.

   La secuencia entera dura poco más de un segundo y va en este orden, que no
   es caprichoso: **primero se monta el sitio y al final llega lo que hay que
   leer**. El cielo se asienta, las prendas se van pegando por la orilla, las
   tres marcas dan una vuelta, y sólo entonces suben el rótulo, el titular y el
   botón. Al revés, el texto queda quieto esperando a que el decorado termine.

   Todo en CSS y con `both`, así que cada pieza se queda escondida hasta que le
   toca sin que haya una línea de JavaScript pendiente de ella. */

/* **El cielo se asienta.** Empieza un 7% más cerca y se va a su sitio con una
   curva que gasta casi todo el movimiento en el primer segundo, que es cuando
   se está mirando. Acaba clavado en `scale(1)`, no en algo mayor, para que no
   se le vea una orilla. */
.puerta::before { animation: cielo-baja 5.5s cubic-bezier(.16, .84, .44, 1) both; }
@keyframes cielo-baja { from { transform: scale(1.07); } }

/* **Las prendas se desdoblan sobre el cielo.**
   La primera versión sólo las hacía crecer desde un poco más grandes, y crecer
   es acercarse, no pegarse: se leía a que la imagen entraba en zoom.

   Ahora caen de canto. Empiezan casi de perfil, giradas de más, y se van
   abriendo hasta quedar planas, con un rebote corto al final. Eso es lo que
   hace un sticker cuando se suelta: se apoya, se abre y se asienta.

   Las cuatro llaves del giro llevan la lista de funciones **exactamente
   igual**, con su `perspective` y su `rotateX` aunque valgan cero. Si una lista
   no cuadra con la otra, el navegador deja de interpolar función por función y
   pasa a interpolar matrices, y el desdoble se convierte en un resbalón raro.

   El eje del giro va por el centro y no por el borde: `transform-origin` afecta
   también al `rotate(var(--g))` de la regla de arriba, así que moverlo al borde
   cambiaría dónde acaba pegada cada prenda.

   El retraso de cada una lo pone `puerta.js` en `--d`. */
.puerta__sticker { animation: sticker-pega .62s cubic-bezier(.22, .8, .3, 1) var(--d, 0ms) both; }
@keyframes sticker-pega {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(calc(var(--g) * 2.1))
               perspective(620px) rotateX(-84deg);
  }
  45% { opacity: 1; }
  76% {
    transform: translate(-50%, -50%) rotate(var(--g))
               perspective(620px) rotateX(11deg);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(var(--g))
               perspective(620px) rotateX(0deg);
  }
}

/* Las tres marcas no suben ni escalan: su entrada es la vuelta que dan, y la
   da `logo3d.js` con el mismo empujón que daría un dedo. Aquí sólo se
   encienden. */
.puerta__marcas { animation: marcas-llegan .7s ease both; }
@keyframes marcas-llegan { from { opacity: 0; } }

/* Y lo que se lee, subiendo. Cada uno con lo suyo en `--e`, que es más claro
   que una cadena de `nth-child` y no se rompe al meter un renglón nuevo. */
.puerta__rotulo, .puerta__cuando, .puerta__meta, .puerta__pasa,
.puerta__cuentas, .reloj, .pistas, .puerta__forma {
  animation: sube .55s cubic-bezier(.2, .7, .3, 1) var(--e, 0ms) both;
}
.puerta__rotulo  { --e: 300ms; }
.puerta__cuando  { --e: 380ms; }
.reloj           { --e: 470ms; }
.puerta__meta    { --e: 470ms; }
.puerta__pasa    { --e: 560ms; }
.pistas          { --e: 560ms; }
.puerta__forma   { --e: 640ms; }
.puerta__cuentas { --e: 720ms; }
@keyframes sube { from { opacity: 0; transform: translateY(14px); } }

/* Con el sistema en modo quieto no se anima nada de esto: la pantalla sale
   armada, que es exactamente lo que pide quien lo activa. */
@media (prefers-reduced-motion: reduce) {
  .puerta::before, .puerta__sticker, .puerta__marcas, .puerta__rotulo,
  .puerta__cuando, .puerta__meta, .puerta__pasa, .puerta__cuentas,
  .reloj, .pistas, .puerta__forma { animation: none; }
}

/* ── El halo de la letra ──────────────────────────────────────────────────
   Lo que hace legible el blanco sobre el cielo no es un panel, es esto. Medido
   sobre `puerta.webp`, el blanco a pelo da 2.9:1 donde va el formulario y se
   cae a 1.1:1 sobre una nube: para llevarlo a 4.5:1 con un velo haría falta
   taparlo al 78%, o sea la pantalla oscura que Victor no quiere.

   Un halo oscuro alrededor de cada letra resuelve lo mismo sin tocar la foto:
   es lo que hacen los subtítulos de televisión, que van sobre cualquier cosa.
   Dos sombras, una cerrada para el filo y otra abierta para separar del fondo.

   **Seamos claros sobre lo que es:** por número de contraste sigue siendo
   flojo, porque la norma mide el color de fondo, no el halo. A la vista
   funciona, y sobre esta foto es la única salida que deja el cielo a la vista.
*/
.puerta__cuando, .reloj__bloque b {
  text-shadow:
    0 1px 3px rgba(6, 12, 24, .95),
    0 2px 18px rgba(6, 12, 24, .82);
}
/* **La letra chica necesita más halo que la grande, no menos.**
   Un titular de tres centímetros tiene trazo de sobra para aguantar una nube
   detrás; un renglón de trece píxeles no. La de abajo, además, es justo la que
   cae sobre la parte con más nubes de la foto: medido, ahí el cielo sube a
   0.315 de luminancia y el blanco a pelo se queda en 2.9:1. Tres sombras: una
   pegada al trazo para el filo, otra cerrada que hace de contorno, y una
   abierta que separa del fondo. */
.puerta__rotulo, .puerta__meta, .puerta__pista,
.puerta__cuentas, .puerta__campo span, .reloj__bloque i,
.pistas > summary, .pistas__cita, .pistas__pide, .pistas__pie {
  text-shadow:
    0 1px 2px rgba(6, 12, 24, .98),
    0 0 7px rgba(6, 12, 24, .95),
    0 2px 14px rgba(6, 12, 24, .85);
}
/* Y los enlaces algo más gordos: un subrayado fino sobre una nube desaparece
   antes que la letra. */
.puerta a { text-decoration-thickness: 2px; }

/* ── Las prendas de alrededor ─────────────────────────────────────────────
   Recortadas con contorno blanco por `stickers.py`, no con `drop-shadow`
   apilado: el alfa de estas fotos tiene borde suave y cada sombra arrastra ese
   degradado, así que sale un halo lechoso en vez de un canto. */
/* **Por encima del velo, no por debajo.** Debajo, el mismo degradado que hace
   legible el contador las apagaba a ellas: en la parte de abajo el velo llega
   al 82% y una prenda recortada se veía como una mancha translúcida, que es
   justo lo contrario de un sticker. Encima van a su color, opacas, con su
   contorno blanco entero.

   Siguen debajo del texto, y todas caen por los bordes, así que el contador no
   pierde nada. `fixed` por lo mismo que el cielo: si se desplazan con el
   texto, al bajar se acaban. */
.puerta__stickers {
  position: fixed; inset: 0; z-index: 2;
  overflow: hidden; pointer-events: none;
}
.puerta__sticker {
  position: absolute; left: var(--x); top: var(--y);
  /* **El tamaño va con el lado corto de la pantalla, no con el ancho.**
     Con escalones por ancho, una ventana apaisada y baja las dejaba a tamaño
     de escritorio dentro de 500 px de alto y se montaban unas sobre otras.
     `vmin` las encoge cuando falta alto, que es justo cuando estorban. El tope
     de arriba es su tamaño de diseño y el de abajo evita que en un móvil
     apaisado se queden de sello. */
  width: clamp(64px, calc(var(--t) * 0.125vmin), calc(var(--t) * 1px));
  height: auto; display: block;
  transform: translate(-50%, -50%) rotate(var(--g));
  filter: drop-shadow(0 10px 22px rgba(6, 12, 24, .45));
}

/* Las tres girando. En fila y del mismo alto, que es lo que las lee como un
   conjunto y no como tres cosas que coincidieron. */
/* **Rejilla de tres, con las dos de fuera arrimadas al centro.**
   Así el hueco de La Previa a IMPRL y el de IMPRL a Maná son los dos el `gap`
   de la rejilla, ni uno más, y como las dos columnas de fuera son `1fr`
   iguales, IMPRL cae en el eje pase lo que pase.

   Eso sólo funciona **si cada hueco se ciñe a su marca**. Con las tres en
   cajas iguales, que fue el intento anterior, La Previa llenaba la suya a lo
   ancho y Maná sólo el 47%: las cajas estaban a la misma distancia y aun así
   se veía La Previa pegada a IMPRL y Maná suelta al otro lado, porque lo que
   se mira es la tinta, no la caja. */
.puerta__marcas {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: clamp(18px, min(5vw, 5.4vh), 58px);
  isolation: isolate;   /* el z-index de IMPRL se resuelve aquí dentro */
  width: min(92vw, 760px);
  padding-block: clamp(18px, min(5.5vh, 6vw), 48px);
  margin-bottom: clamp(2px, 1vh, 10px);
}
.puerta__marcas > :first-child { justify-self: end; }
.puerta__marcas > :last-child  { justify-self: start; }

/* **El tamaño se manda por el alto, no por el ancho.** El ancho de cada marca
   lo pone su propia forma: la pastilla de La Previa es 3.54 a 1 y el orbe de
   Maná 1.15 a 1, así que a igual ancho una sería una raya y la otra un
   pegote. A igual alto las tres pesan lo mismo en la fila. */
.puerta__marca {
  display: block; position: relative;
  height: clamp(38px, min(8vw, 8.4vh), 74px); width: auto;
  max-width: 100%;
}
/* La Previa, más baja que las otras dos. Su ancho sale de su alto por la forma
   del logotipo, 3.54 a 1, así que bajarla de alto es la única manera de que
   deje de ser la más ancha de la fila con diferencia. */
.puerta__marca[data-marca="la-previa"] { height: clamp(26px, min(5.1vw, 5.5vh), 48px); }
/* La diana. Cada marca se agarra por su cuenta, y una marca de treinta píxeles
   de alto es poca cosa para un pulgar: esto le da un cerco invisible alrededor
   sin moverla de sitio ni encoger el lienzo. */
.puerta__marca::after { content: ""; position: absolute; inset: -16px; }
/* IMPRL, un punto por encima de las otras dos y por delante. Poco: es la del
   medio, no el titular. */
.puerta__marca--jefa {
  height: clamp(48px, min(9.5vw, 10vh), 88px);
  z-index: 2;
  filter: drop-shadow(0 8px 20px rgba(6, 12, 24, .5));
}
/* El SVG es el respaldo instantáneo mientras llega Three.js. Tiene el mismo
   encuadre que el lienzo y se apaga sólo cuando el 3D ya está montado. */
.puerta__marca > img {
  width: 100%; height: 100%; object-fit: contain;
  filter: brightness(0) invert(1);
}
.puerta__marca[data-lista] > img { visibility: hidden; }

/* Los tres sellos de la puerta se leen como gráficos planos. Dan exactamente
   una vuelta sobre el plano, juntos, y terminan de frente; ninguno puede
   desaparecer de canto mientras los otros dos siguen visibles. */
.puerta__marcas--planas .puerta__marca {
  pointer-events: none;
  animation: sello-vuelta-plana .9s cubic-bezier(.25, .72, .28, 1) both;
  transform-origin: center;
}
/* En plano, la fila se mide por la silueta real de cada archivo. La rejilla
   anterior dependía de que Three.js escribiera estas proporciones; sin canvas,
   La Previa estiraba su columna invisible y parecía separada de IMPRL. */
.puerta__marcas.puerta__marcas--planas {
  display: flex;
  justify-content: center;
  gap: clamp(18px, 2.5vw, 40px);
}
.puerta__marcas--planas .puerta__marca[data-marca="la-previa"] {
  aspect-ratio: 803 / 227;
}
.puerta__marcas--planas .puerta__marca[data-marca="imprl"] {
  aspect-ratio: 74.46 / 67.83;
}
.puerta__marcas--planas .puerta__marca[data-marca="mana"] {
  aspect-ratio: 127.2 / 110.98;
}
@keyframes sello-vuelta-plana {
  from { transform: rotate(-1turn); }
  to   { transform: rotate(0turn); }
}
.puerta__marcas--planas .puerta__marca::after { content: none; }
.puerta__marcas--planas .puerta__marca::before { content: none; }

/* IMPRL vuelve al centro en platino casi blanco. Es el único con reflejo
   metálico; La Previa y Maná conservan su blanco mate limpio. */
.puerta__marcas--planas .puerta__marca[data-marca="imprl"] > img {
  visibility: visible;
  filter: brightness(0) invert(1);
}
.puerta__marcas--planas .puerta__marca[data-marca="imprl"]::before {
  content: none;
}
@supports (mask-image: url("marcas/imprl.svg")) or
          (-webkit-mask-image: url("marcas/imprl.svg")) {
  .puerta__marcas--planas .puerta__marca[data-marca="imprl"] > img {
    visibility: hidden;
  }
  .puerta__marcas--planas .puerta__marca[data-marca="imprl"]::before {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(135deg,
      #D8DDE3 0%, #FFFFFF 24%, #EEF1F4 43%, #BFC6CE 55%,
      #FAFBFC 72%, #D5DAE0 100%);
    -webkit-mask: url("marcas/imprl.svg") center / contain no-repeat;
    mask: url("marcas/imprl.svg") center / contain no-repeat;
    filter: drop-shadow(0 8px 18px rgba(6, 12, 24, .5));
  }
}
@media (prefers-reduced-motion: reduce) {
  .puerta__marcas--planas .puerta__marca { animation: none; }
}
/* Un piso muy tenue basta para que las piezas parezcan suspendidas en el
   mismo espacio y no tres archivos pegados sobre la fotografía. */
.puerta__marcas:not(.puerta__marcas--planas) .puerta__marca::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 8%; right: 8%; bottom: -18%; height: 28%; border-radius: 50%;
  background: rgba(3, 8, 18, .62); filter: blur(9px);
  transform: perspective(120px) rotateX(68deg);
}
/* **El lienzo se sale de la caja a propósito.**
   `--holgura` la pone `logo3d.js` y es el margen que la cámara deja alrededor
   de la marca para que al girarla no se corte contra el borde. Sacando el
   lienzo hacia fuera justo esa cantidad, la marca dibujada mide exactamente la
   caja: la fila sigue midiendo por la tinta y el sitio para girar sale por
   detrás, sin empujar a nadie.

   `pointer-events: none` porque los lienzos de dos marcas vecinas se solapan
   ahí fuera, y sin esto el dedo podía acabar girando la de al lado. Quien
   escucha es el cerco de `::after`. */
.puerta__marca canvas, .banda__cromo canvas {
  position: absolute; display: block; pointer-events: none;
  inset: calc((1 - var(--holgura, 1)) * 50%);
  width: calc(var(--holgura, 1) * 100%);
  height: calc(var(--holgura, 1) * 100%);
}

/* ── El rótulo cromado de la banda ────────────────────────────────────────
   La imagen se queda debajo y es la que manda: le da el tamaño a la caja, le
   pone nombre al encabezado y es lo que se ve si three.js no llega. En cuanto
   hay lienzo encima se apaga, pero **no se quita**: quitarla dejaría la caja
   sin alto y el lienzo, que va en absoluto, se iría a cero.

   `visibility` y no `opacity`: con la imagen a cero de opacidad seguía
   recibiendo el dedo por encima del lienzo. */
.banda__cromo { position: relative; }
.banda__cromo[data-lista] img { visibility: hidden; }
/* La sombra va aquí y no en el lienzo: un `filter` sobre un lienzo de WebGL lo
   aplana y deja una silueta pegada, en vez de una sombra debajo de una pieza. */
.banda__cromo[data-lista] { filter: drop-shadow(0 10px 26px rgba(6, 12, 24, .45)); }

/* ── El cromado plano ─────────────────────────────────────────────────────
   Para los dos rótulos de caligrafía. Extruidos en 3D no funcionan: su trazo
   es más fino que el fondo que les daría la extrusión, así que al girar los
   trazos se tapan unos a otros y lo que queda es un enredo. Esto les da el
   metal sin tocarles un pelo del trazo.

   **El logotipo es la máscara, no la imagen.** Lo que se pinta es un degradado
   de plata, y el SVG sólo decide por dónde se ve. Así el metal se puede afinar
   aquí, en una línea, sin editar tres archivos que además se usan en otros
   sitios.

   La banda oscura del medio es fina y va sobre letra de tamaño de titular, que
   es donde el mínimo de contraste es 3 a 1 y no 4.5. Medida sobre el asfalto
   de Child of God, la parte más oscura del degradado da 3.4 a 1 y el resto del
   trazo se queda en blanco, en 5.2.

   Si el navegador no supiera de máscaras se quedaría un rótulo invisible, así
   que la imagen sólo se apaga donde `mask` existe. */
.banda__plata { position: relative; }
@supports (mask-image: url(#a)) or (-webkit-mask-image: url(#a)) {
  .banda__plata img { visibility: hidden; }
  .banda__plata::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(177deg,
      #FFFFFF 0%, #FFFFFF 34%, #EAEFF4 44%,
      #CBD5DF 50%, #F2F6F9 57%, #FFFFFF 68%, #FFFFFF 100%);
    /* El respaldo del `var` es una máscara transparente, o sea nada visible.
       Sin él, un rótulo al que le faltara `--marca` no dejaría la máscara sin
       poner: dejaría la declaración entera inválida, y lo que se vería sería el
       degradado en crudo, un rectángulo blanco encima de la foto. */
    -webkit-mask: var(--marca, linear-gradient(#0000, #0000)) no-repeat center / contain;
    mask: var(--marca, linear-gradient(#0000, #0000)) no-repeat center / contain;
    filter: drop-shadow(0 8px 20px rgba(6, 12, 24, .38));
  }
}

/* **El aviso de que se arrastran.**
   Las tres marcas están quietas a propósito, y una pieza quieta no se ve como
   algo que se pueda tocar: sin esta línea, nadie las movería nunca. Late
   despacio para llamar la atención sin pedirla a gritos, y desaparece en
   cuanto alguien toca una, que es cuando ya sobra. */
.puerta__pista {
  margin: 0 0 clamp(10px, 2.2vh, 20px); font-size: clamp(.6rem, 1.5vh, .7rem); letter-spacing: .2em;
  text-transform: uppercase; color: rgba(255,255,255,.62);
  transition: opacity .5s ease, transform .5s ease;
  /* Dos animaciones seguidas y no una: la de entrada acaba justo en el .55
     donde arranca el latido, así que no hay salto al pasar de una a otra.
     Llega la última de toda la pantalla, cuando las marcas ya dieron su vuelta
     y se ve para qué sirve el aviso. */
  animation: pista-llega 1.1s ease 700ms both,
             pista-late 2.6s ease-in-out 1.8s infinite;
}
@keyframes pista-llega {
  0%   { opacity: 0; transform: translateY(9px); }
  40%  { opacity: 1; transform: none; }
  100% { opacity: .55; transform: none; }
}
.puerta__pista::before { content: "⇄ "; letter-spacing: 0; }
.puerta__pista--vista { opacity: 0; transform: translateY(-4px); animation: none; }
@keyframes pista-late {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .puerta__pista { animation: none; opacity: .8; }
}

.puerta__rotulo {
  margin: 0; font-size: clamp(.72rem, 1.1vw, .88rem); letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255,255,255,.78);
}
/* `min(90vw, 22ch)` y no `18ch` pelado: con dieciocho, una pantalla de
   ordenador partía el titular en cuatro renglones cortos y toda la puerta se
   veía como una captura de teléfono estirada. */
.puerta__cuando {
  margin: clamp(6px, 1.4vh, 12px) 0 0; font-size: clamp(1.35rem, min(5vw, 5.4vh), 3.8rem);
  font-weight: 700; letter-spacing: -.03em; line-height: 1.1;
  text-transform: uppercase; max-width: min(90vw, 22ch); color: #FFF;
  text-shadow: 0 2px 18px rgba(6, 12, 24, .5);
}
.puerta__cuando b { font-weight: 700; }
/* **En el saludo el titular va un escalón más grande, y sólo en pantalla
   ancha.** Entre los stickers de arriba y las marcas queda una franja de cielo
   vacía, y el titular a tamaño de puerta se veía chico en medio de tanto aire.
   La puerta se queda como está: ahí, debajo del titular, van el reloj y las
   pistas, y un escalón más los empuja fuera de la pantalla. */
@media (min-width: 760px) {
  .puerta--saludo .puerta__cuando { font-size: clamp(1.35rem, min(5.8vw, 6.2vh), 4.5rem); }
}
/* ── La guía de tallas ────────────────────────────────────────────────────
   Una tabla de medidas es de las pocas cosas de una tienda que se lee de
   verdad, con el número en la mano, así que va con cifras de ancho fijo y sin
   adornos: aquí lo que importa es comparar columnas de un vistazo. */
.tallas { padding: clamp(28px, 6vh, 64px) var(--margen) clamp(48px, 9vh, 96px); }
.tallas__intro { max-width: 62ch; margin-bottom: clamp(28px, 5vh, 52px); }
.tallas__intro h1 { margin: 8px 0 18px; }
.tallas__dicho { margin: 0 0 12px; line-height: 1.6; max-width: 62ch; }
.tallas__dicho b { font-weight: 700; }
.tallas__bloque { margin-bottom: clamp(34px, 6vh, 64px); }

/* Se desplaza sola en su caja: la tabla de las sudaderas son cinco columnas y
   en un teléfono no caben. Que se mueva la tabla y no la página. */
.tallas__tabla { overflow-x: auto; margin-top: 14px; }
.tallas__tabla table {
  border-collapse: collapse; width: 100%; min-width: 460px;
  font-variant-numeric: tabular-nums;
}
.tallas__tabla th, .tallas__tabla td {
  padding: 11px 14px 11px 0; text-align: right;
  border-bottom: 1px solid var(--linea); white-space: nowrap;
}
.tallas__tabla thead th {
  text-align: right; font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--humo); font-weight: 400;
}
/* La talla manda la fila, así que va a la izquierda y en negrita. */
.tallas__tabla th[scope="row"], .tallas__tabla thead th:first-child {
  text-align: left; font-weight: 700; color: var(--tinta);
}
.tallas__nota { margin: 12px 0 0; color: var(--humo); font-size: .84rem; }

/* El enlace desde el visor, pegado al rótulo de las tallas. Ahí es donde hace
   falta: quien está eligiendo talla es quien tiene la duda. */
.visor__tallas legend { display: flex; align-items: baseline; gap: 10px; }
.tallas__enlace {
  font-size: .68rem; letter-spacing: .06em; text-transform: none;
  color: var(--humo); text-decoration: underline; text-underline-offset: 3px;
}
.tallas__enlace:hover { color: var(--tinta); }

/* ── El reloj ─────────────────────────────────────────────────────────────
   Cuatro casillas grandes. `tabular-nums` no es un detalle: sin él, cada
   segundo cambia el ancho de la cifra y el renglón entero da un tironcito
   sesenta veces por minuto.

   El ancho de cada casilla es fijo en `ch` y no depende del número que le
   toque, así que los cuatro bloques se quedan quietos toda la cuenta. */
.reloj {
  display: flex; justify-content: center; align-items: flex-start;
  gap: clamp(8px, 3.5vw, 34px);
  margin: clamp(8px, 2.8vh, 34px) 0 0;
  font-variant-numeric: tabular-nums;
}
.reloj__bloque { display: grid; justify-items: center; gap: clamp(2px, .7vh, 6px); }
.reloj__bloque b {
  font-size: clamp(1.7rem, min(12vw, 11.5vh), 5.6rem); font-weight: 700;
  line-height: .92; letter-spacing: -.045em; color: #FFF;
  width: 2.1ch; text-align: center;
  text-shadow: 0 3px 26px rgba(6, 12, 24, .55);
}
.reloj__bloque i {
  font-style: normal; font-size: clamp(.6rem, 1.5vw, .74rem);
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.72);
}

/* ── Las pistas ───────────────────────────────────────────────────────────
   Cerradas de entrada: con las tres abiertas la puerta deja de caber en una
   pantalla, y que quepa es la promesa. Abiertas, se permite desplazar, que es
   lo correcto cuando alguien acaba de pedir más contenido. */
.pistas { margin: clamp(10px, 2.4vh, 24px) 0 0; max-width: 40ch; }
.pistas > summary {
  cursor: pointer; list-style: none;
  font-size: clamp(.78rem, 1.9vh, .92rem); font-weight: 700;
  color: #FFF; text-decoration: underline;
  text-underline-offset: 4px; text-decoration-thickness: 1px;
}
.pistas > summary::-webkit-details-marker { display: none; }
.pistas > summary::after { content: " +"; font-weight: 400; }
.pistas[open] > summary::after { content: " −"; }
.pistas > summary:focus-visible { outline: 2px solid #FFF; outline-offset: 3px; }

.pistas__lista {
  display: grid; gap: clamp(8px, 1.6vh, 14px);
  margin: clamp(12px, 2vh, 18px) 0 0; padding: 0; list-style: none;
  text-align: left;
}
.pistas__lista li { display: grid; gap: 5px; }

/* **El dibujo de los ocho huecos.**
   Antes ponía «las tres de en medio» con palabras, y una frase obliga a
   traducirla a posiciones. Los cuadritos se leen de un vistazo: se ve cuántas
   casillas llena esta pista y en qué parte de la clave caen, sin regalar
   ninguna respuesta. */
.huecos {
  display: flex; align-items: center; gap: 5px;
  font-size: .58rem; letter-spacing: .22em; line-height: 1;
  color: rgba(255,255,255,.3);
}
.huecos i { font-style: normal; color: rgba(255,255,255,.22); letter-spacing: 0; }
.huecos__grupo--esta { color: #FFF; }

/* La cita, en cursiva y más grande que lo demás: es Escritura, no interfaz, y
   distinguirla es lo que hace que la pista se lea como un acertijo. */
.pistas__cita {
  margin: 0; font-style: italic;
  font-size: clamp(.92rem, 2.2vh, 1.08rem); line-height: 1.35;
  color: #FFF; text-wrap: pretty;
}
.pistas__cita--llana { font-style: normal; }
/* Y debajo, en pequeño y en versalitas, lo que hay que contestar. */
.pistas__pide {
  margin: 0; font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.62);
}

/* Entran escalonadas al abrir. Poco recorrido y rápido: lo que se busca es que
   se note que aparecieron, no una función de teatro. */
.pistas[open] .pistas__lista li {
  animation: pista-entra .34s cubic-bezier(.2, .7, .3, 1) both;
}
.pistas[open] .pistas__lista li:nth-child(2) { animation-delay: .07s; }
.pistas[open] .pistas__lista li:nth-child(3) { animation-delay: .14s; }
@keyframes pista-entra {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pistas[open] .pistas__lista li { animation: none; }
}
.pistas__pie {
  margin: clamp(10px, 1.8vh, 16px) 0 0;
  font-size: clamp(.78rem, 1.8vh, .88rem); color: rgba(255,255,255,.82);
}
html[data-puerta="cerrada"] .puerta:has(.pistas[open]) { overflow-y: auto; }

/* La otra manera de que abra. Va en pequeño y debajo del reloj: es la promesa,
   no el titular. */
.puerta__meta {
  margin: clamp(9px, 2.2vh, 24px) 0 0; max-width: 42ch;
  font-size: clamp(.78rem, min(1.5vw, 1.9vh), 1rem); line-height: 1.45;
  color: rgba(255,255,255,.86);
}
.puerta__meta b { font-weight: 700; color: #FFF; }
/* Subrayado con hueco, no `text-decoration` pelado: sobre una foto, una raya
   pegada a la letra se confunde con el borde de una nube. */
.puerta a {
  color: #FFF; font-weight: 700; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.puerta a:hover { text-decoration-thickness: 2px; }

/* Las tres cuentas del drop, al pie y en el mismo orden que las tres marcas
   de arriba. */
.puerta__cuentas {
  margin: clamp(10px, 3vh, 38px) 0 0; font-size: clamp(.7rem, 1.7vh, .8rem);
  letter-spacing: .06em; color: rgba(255,255,255,.75);
}
.puerta__cuentas span { opacity: .6; }

.puerta__forma {
  display: flex; flex-wrap: wrap; gap: clamp(8px, 1.6vh, 14px); align-items: center;
  justify-content: center; margin-top: clamp(12px, 3.4vh, 44px);
  padding-top: clamp(10px, 2.6vh, 30px);
  border-top: 1px solid rgba(255,255,255,.28);
  width: min(520px, 100%);
}
.puerta__campo {
  margin: 0; flex: 1 0 100%; text-align: center;
}
.puerta__campo span {
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.78);
}

/* ── La clave, en casillas ────────────────────────────────────────────────
   **Partida igual que como se reparte.** La clave se esconde con forma de
   código de lote, `KC · JX4 · A7X`, y un cuadro de texto vacío no se parece en
   nada a eso: obliga a memorizar lo leído y escribirlo de corrido. Con las
   casillas en los mismos grupos, teclear es copiar lo que se tiene delante.

   El ancho va en `ch` para que no dependa del cuerpo de letra, y hay un
   `clamp` por debajo porque en un teléfono ocho casillas más dos puntos tienen
   que caber en el ancho de la pantalla. */
.clave {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(5px, 1.6vw, 10px); flex: 1 0 100%;
}
.clave__grupo { display: flex; gap: clamp(3px, 1vw, 6px); }
.clave__punto { color: rgba(255,255,255,.55); font-weight: 400; }
.clave__casilla {
  font: inherit; font-weight: 700; text-align: center;
  font-size: clamp(.95rem, 3.6vw, 1.25rem);
  width: clamp(28px, 8.4vw, 42px);
  padding: clamp(6px, 1.2vh, 10px) 0;
  border: 1px solid rgba(255,255,255,.45);
  background: rgba(6, 12, 24, .4); color: #FFF;
  text-transform: uppercase; caret-color: #FFF;
}
.clave__casilla:focus-visible { outline: 2px solid #FFF; outline-offset: -1px; }
/* La que toca escribir se marca sola: en una fila de ocho cajas iguales, sin
   esto hay que buscar el cursor. */
.clave__casilla:focus { background: rgba(6, 12, 24, .72); border-color: #FFF; }
/* El botón de la tienda es tinta sobre hueso: aquí se da la vuelta, o queda
   un rectángulo negro en medio del cielo. */
.puerta .boton {
  background: #FFF; color: #0B1220; border-color: #FFF;
  flex: 0 0 auto;
}
.puerta .boton:hover { background: rgba(255,255,255,.86); border-color: rgba(255,255,255,.86); }
/* El rojo de la tienda sobre el cielo oscuro no se lee: aquí el aviso va en
   blanco, que ya destaca porque es lo único que aparece de golpe. */
.puerta__fallo { margin: 12px 0 0; font-size: .86rem; color: #FFD9D4; }
.puerta__fallo[hidden] { display: none; }

/* ── La bienvenida ────────────────────────────────────────────────────────
   La misma pantalla que la puerta, con la tienda ya abierta detrás. Dos
   diferencias, y las dos importan.

   **No esconde nada.** La puerta marca el documento y esto de arriba apaga la
   tienda entera; el saludo sólo se pone encima. Así lo de debajo sigue en el
   HTML para quien lo lea sin pintarlo, que es como llega un buscador la
   primera vez, y no hay manera de que se quede una tienda apagada por un
   guión que falló.

   **Y se va con un desvanecido.** La puerta desaparece de golpe porque detrás
   hay algo que se estaba esperando; aquí detrás está lo mismo que ya se
   adivina de fondo, y un corte seco se lee a fallo. */
html[data-saludo] body { overflow: hidden; }
.puerta--saludo {
  transition: opacity .38s ease;
  /* Sin esto, el dedo que se pasa arrastrando una marca sigue de largo y
     desplaza la tienda de detrás. */
  overscroll-behavior: contain;
}
.puerta--fuera { opacity: 0; pointer-events: none; }
/* El botón es lo único que hay que tocar en toda la pantalla: pegado al
   renglón de encima se lee como parte del párrafo. */
.puerta__pasa {
  margin-top: clamp(16px, 3.4vh, 36px);
  min-width: min(84vw, 230px);
  box-shadow: 0 12px 34px rgba(3, 8, 18, .28);
}

@media (max-width: 700px) {
  .puerta__marcas {
    width: min(94vw, 560px);
    gap: clamp(14px, 4vw, 24px);
    padding-block: clamp(14px, 3.6vh, 26px);
  }
  .puerta__marca { height: clamp(40px, 9vw, 50px); }
  .puerta__marca[data-marca="la-previa"] { height: clamp(28px, 5.8vw, 34px); }
  .puerta__marca--jefa { height: clamp(56px, 11.5vw, 66px); }
}
@media (prefers-reduced-motion: reduce) {
  .puerta--saludo { transition: none; }
}

/* Los escalones por ancho se fueron: los sustituye el `vmin` de arriba, que
   además cubre las ventanas bajas.

   En pantalla estrecha se quedan sólo las seis pegadas al borde. Se van las
   dos de media altura, porque ahí el contador ocupa de lado a lado, y las dos
   del centro arriba y abajo, que en un teléfono caen justo detrás del rótulo y
   del pie: una prenda por detrás de un renglón es lo que se veía raro. */
@media (max-width: 700px) {
  /* Más grandes que la cuenta de `vmin`: en un teléfono el lado corto es 375,
     y con el mismo factor que en escritorio salían de 79 px, o sea un sello.
     Aquí se ve poca prenda de cada una, pero se ve grande. */
  .puerta__sticker {
    width: clamp(104px, calc(var(--t) * 0.215vmin), calc(var(--t) * 1px));
  }
  .puerta__sticker:nth-child(3),
  .puerta__sticker:nth-child(7),
  .puerta__sticker:nth-child(9),
  .puerta__sticker:nth-child(10) { display: none; }
  /* Y las que quedan se van casi fuera del cuadro. En un teléfono el texto
     llega casi al borde, así que a un 4% del margen la prenda acaba por
     detrás de un renglón. */
  .puerta__sticker { left: var(--xm, var(--x)); }
}
/* **La válvula de escape.**
   Todo está medido para caber sin desplazar, pero por debajo de unos 430 px de
   alto no cabe ni encogiendo: un teléfono en horizontal con el teclado abierto
   llega a eso. Ahí vale más que se pueda desplazar que perder el formulario
   fuera de la pantalla, que es lo que de verdad hace falta alcanzar. */
@media (max-height: 430px) {
  .puerta { overflow-y: auto; }
}

/* En una ventana baja, la de arriba y la de abajo caen encima del rótulo y del
   formulario, que ahí están a un dedo del borde. */
@media (max-height: 620px) {
  .puerta__sticker:nth-child(9), .puerta__sticker:nth-child(10) { display: none; }
}

/* ── La entrada ───────────────────────────────────────────────────────────
   El logo girando en el centro mientras carga, y luego se muda a la barra.

   **Se esconde sola aunque el guión no llegue.** La animación `irse` corre en
   CSS con retardo, así que si three.js falla o el JavaScript está apagado, a
   los 3,4 segundos la entrada se aparta igual y la página queda usable. Una
   pantalla de carga que depende del guión que está cargando es la manera de
   dejar a alguien mirando un cuadro para siempre. */
.entrada {
  position: fixed; inset: 0; z-index: 100; background: var(--hueso);
  display: grid; place-items: center;
  animation: irse .5s ease 3.4s forwards;
}
.entrada .logo3d { width: min(46vw, 260px); height: min(46vw, 260px); }
/* No hay un SVG que se transforme delante de quien entra. Se reserva el hueco
   mientras llega Three.js y la primera marca visible ya es la pieza 3D café. */
.entrada .logo3d > svg { visibility: hidden; }
/* Cuando el guión termina, se va antes. */
.entrada.lista { animation: irse .5s ease forwards; }
@keyframes irse {
  to { opacity: 0; visibility: hidden; }
}

/* Ya en la barra, vuelve a su tamaño. La transición hace que el salto se lea
   como que baja, no como que aparece de golpe. */
.tira__marca .logo3d { transition: width .45s ease, height .45s ease; }

@media (prefers-reduced-motion: reduce) {
  /* Sin espera: quien pide menos movimiento no quiere una pantalla que gira. */
  .entrada { animation-delay: 0s; animation-duration: .01s; }
  .tira__marca .logo3d { transition: none; }
}

/* ── La cinta de avisos ───────────────────────────────────────────────────
   Va encima de la barra y no dentro: la barra es fija y la cinta no, así que
   al bajar se pierde y deja de robar alto en el móvil.

   La pista lleva el contenido dos veces y se desplaza exactamente la mitad:
   con una sola copia se vería el hueco al reiniciar el bucle. */
.cinta {
  background: #E6E2DC; border-bottom: 1px solid var(--linea);
  overflow: hidden; font-size: .72rem; letter-spacing: .04em;
  padding: 7px 0; white-space: nowrap;
}
.cinta__pista { display: inline-flex; animation: correr 34s linear infinite; }
.cinta__grupo { display: inline-flex; align-items: center; }
.cinta__grupo span { padding: 0 18px; }
.cinta__grupo i { font-style: normal; color: var(--humo); }
/* El paso lo pone el guión: es el ancho de un grupo, medido. */
@keyframes correr { to { transform: translateX(calc(var(--paso, 50%) * -1)); } }
/* Quien pide menos movimiento no quiere un texto corriendo: se queda quieto y
   se lee igual, que para eso los avisos importantes van los primeros. */
@media (prefers-reduced-motion: reduce) {
  .cinta__pista { animation: none; }
  .cinta { white-space: normal; text-align: center; }
  .cinta__grupo:last-child { display: none; }
}


/* ── El panel de colecciones ──────────────────────────────────────────────
   De lado a lado de la ventana, debajo de la barra fija. `top` va a la altura
   de la barra y no a un número escrito a mano: la barra crece con el logo, y
   un número fijo dejaría el panel montado encima o separado. */
.mega {
  position: fixed; left: 0; right: 0; top: var(--alto-barra, 84px); z-index: 15;
  background: var(--hueso); border-bottom: 1px solid var(--linea);
  display: grid; grid-template-columns: repeat(var(--partes, 3), 1fr) auto;
  animation: caer .18s ease;
}
/* **Sin esto el panel no se esconde nunca.**
   `[hidden]` lo pinta el navegador con `display:none`, pero cualquier
   `display` del autor le gana: no es cuestión de especificidad, es que las
   reglas del autor van por delante de las del navegador. Con `.mega` puesto a
   `grid`, el `hidden` del HTML no hacía nada y el menú quedaba abierto de
   entrada. */
.mega[hidden] { display: none; }
@keyframes caer { from { opacity: 0; transform: translateY(-6px); } }

/* **Apaisada, no de retrato.** Las fotos de las partes son 2:1; en una ficha
   4:5 se quedaba con el 40% del ancho y el panel se convertía en un muro de
   imágenes de la altura de la ventana. En 3:2 se ve casi la foto entera y el
   panel es una tira. */
.mega__ficha {
  position: relative; aspect-ratio: 3/2; text-decoration: none; color: var(--hueso);
  background: #C9C2B8 center/cover no-repeat; display: flex; flex-direction: column;
  justify-content: flex-end; padding: 16px; gap: 2px; overflow: hidden;
}
/* Un velo bajo el texto: sobre una foto clara el nombre desaparecería, y
   quién sabe qué foto va a poner Victor en cada ficha. */
.mega__ficha::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 55%);
}
.mega__ficha > * { position: relative; z-index: 1; }
.mega__con { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.mega__nombre { font-size: clamp(1rem, 1.5vw, 1.35rem); font-weight: 700; letter-spacing: -.02em; }
.mega__ficha:hover { filter: brightness(1.06); }
/* La foto de la parte es 2:1 y la ficha 4:5: recortada al centro se queda con
   el 40% del ancho, y en dos de las tres la gente está a un lado. Cada ficha
   dice por dónde mirar con el mismo `--foco` que usa la banda en teléfono. */
.mega__ficha { background-position: var(--foco, center); }

.mega__todo {
  display: grid; place-items: center; padding: 0 clamp(20px, 4vw, 56px);
  text-decoration: none; color: var(--tinta); font-size: 1.05rem; white-space: nowrap;
}
.mega__todo:hover { text-decoration: underline; }

/* En estrecho no caben en fila, y apiladas el panel tapaba la ventana entera:
   tres fichas de 4:5 de media ventana de ancho son más alto que la pantalla.
   Se deslizan de lado, como la pasarela, y el panel se queda en una tira. */
@media (max-width: 780px) {
  .mega {
    display: flex; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; scrollbar-width: none;
  }
  .mega::-webkit-scrollbar { display: none; }
  .mega__ficha { flex: 0 0 66%; scroll-snap-align: start; }
  .mega__todo { flex: 0 0 auto; padding: 0 24px; }
}

/* La espalda encima del frente, al pasar el ratón. En estas prendas el
   estampado grande va detrás: enseñar sólo el frente es esconder el diseño.
   En táctil no hay `hover`, así que ahí se queda el frente. */
/* **La de detrás ocupa exactamente el mismo hueco que la de delante.**
   No se encoge con `inset`, porque la regla `.prenda__foto img` le fija ancho
   y alto y entonces los `inset` dejan de recortar nada: se estiraba a la caja
   entera. Se estira igual, y el aire se lo quita su propio relleno, que es la
   misma cuenta que hace el padre. Así las dos prendas caen encima y el paso de
   una a otra se lee como que cambia el estampado, no como que se mueve. */
/* ===== El visor ===== */

/* `display` de autor gana siempre al `[hidden]` del navegador, así que sin
   esta línea el visor se queda abierto para siempre. */
.visor[hidden] { display: none !important; }
/* **`flex` con `stretch`, no `grid` con `place-items: center`.**
   Centrando, la caja del panel se mide por su contenido, así que su
   `height: 100%` no tenía contra qué resolverse y se quedaba en el alto de lo
   que hubiera dentro. En una ventana de 560 px el panel medía 1016: la foto se
   comía todo y las tallas y el botón caían a 725, fuera de la pantalla y sin
   nada que bajara, porque el cuerpo está bloqueado mientras el visor está
   abierto. Se veía una prenda que no se podía comprar.

   Estirado, el panel mide lo que la ventana y de ahí no pasa. En escritorio
   vuelve a centrarse, que allí ya tiene su propio alto. */
.visor {
  position: fixed; inset: 0; z-index: 60;
  display: flex; justify-content: center; align-items: stretch;
}
.visor__fondo { position: absolute; inset: 0; background: rgba(11, 11, 11, .82); }
body.quieto { overflow: hidden; }

.visor__panel {
  position: relative; z-index: 1;
  width: min(1100px, 100%); height: 100%; max-height: 100dvh; overflow: hidden;
  /* `minmax(0, 1fr)` y no `1fr`: un `1fr` no baja del tamaño de su contenido, y
     el contenido aquí es una foto grande. Con esto la foto cede todo lo que
     haga falta y los datos siempre caben. */
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  background: var(--hueso);
}
@media (min-width: 900px) {
  .visor { align-items: center; }
  .visor__panel {
    height: min(92vh, 900px); border-radius: 2px;
    grid-template-rows: none; grid-template-columns: minmax(0, 1fr) 430px;
  }
}

.visor__foto {
  position: relative; overflow: hidden;
  background: #E6E2DC;
  /* La prenda pide alto, no ancho: en un teléfono se le da todo el que sobre
     de los datos, que es lo que hace que se vea grande de verdad. */
  min-height: 0;
}
.visor__carril {
  display: flex; height: 100%;
  transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}
.visor__cara { flex: 0 0 100%; height: 100%; padding: 5%; box-sizing: border-box; }
.visor__cara img { width: 100%; height: 100%; object-fit: contain; display: block; }
@media (prefers-reduced-motion: reduce) { .visor__carril { transition: none; } }

.visor__flecha, .visor__cerrar {
  position: absolute; z-index: 2;
  appearance: none; border: 0; background: rgba(242, 240, 236, .9);
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  transition: opacity .2s ease, background .2s ease;
}
.visor__flecha svg, .visor__cerrar svg {
  width: 20px; height: 20px; fill: none;
  stroke: var(--tinta); stroke-width: 1.6; stroke-linecap: round;
}
.visor__flecha { top: 50%; transform: translateY(-50%); }
.visor__flecha--antes { left: 12px; }
.visor__flecha--sig { right: 12px; }
/* Apagadas y no escondidas: si desaparecen, la foto salta al llegar al final. */
.visor__flecha[disabled] { opacity: .3; cursor: default; }
.visor__cerrar { top: 12px; right: 12px; }
.visor__flecha:hover:not([disabled]), .visor__cerrar:hover { background: var(--hueso); }

.visor__caras {
  position: absolute; bottom: 14px; left: 0; right: 0; z-index: 2;
  display: flex; justify-content: center; gap: 7px; pointer-events: none;
}
.visor__caras i {
  display: block; width: 6px; height: 6px; border-radius: 50%;
  background: rgba(11, 11, 11, .22); transition: background .25s ease;
}
.visor__caras i.es { background: rgba(11, 11, 11, .62); }

/* Y si aun así la ventana es más baja que los datos, que bajen ellos en vez de
   salirse: un teléfono en horizontal deja menos de 400 px de alto. */
.visor__datos {
  padding: 20px 22px 26px; display: grid; gap: 6px; align-content: start;
  max-height: 100%; overflow-y: auto;
}
@media (min-width: 900px) { .visor__datos { padding: 32px 30px 40px; } }
.visor__nombre { margin: 0; font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.visor__precio { margin: 2px 0 0; display: flex; gap: 8px; align-items: baseline; }
.visor__precio s { color: var(--humo); font-size: .85rem; text-decoration-thickness: 1px; }
.visor__tallas { margin: 0; font-size: .82rem; color: var(--humo); }
.visor__datos .boton { margin-top: 12px; }

.visor__ofertas { margin-top: 12px; padding: 14px; background: #e8e4de; }
.visor__ofertas > p { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.visor__ofertas > p b { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.visor__ofertas > p span { max-width: 19ch; color: var(--humo); font-size: .65rem; line-height: 1.35; text-align: right; }
.visor__ofertas > div { display: grid; grid-template-columns: repeat(3, 1fr); }
.visor__ofertas > div > span { min-width: 0; padding: 8px 9px; border-left: 1px solid rgba(11,11,11,.14); }
.visor__ofertas > div > span:first-child { border-left: 0; padding-left: 0; }
.visor__ofertas small, .visor__ofertas strong { display: block; }
.visor__ofertas small { min-height: 2.4em; color: var(--humo); font-size: .59rem; line-height: 1.2; }
.visor__ofertas strong { margin-top: 4px; font-size: .82rem; line-height: 1.1; }
.visor__ofertas .es-fit { background: rgba(255,255,255,.5); }

.visor__beneficios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 18px; background: var(--linea); border: 1px solid var(--linea); }
.visor__beneficios span { min-width: 0; min-height: 82px; padding: 10px 5px; display: grid; align-content: center; justify-items: center; gap: 7px; background: var(--hueso); text-align: center; }
.visor__beneficios svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.visor__beneficios b { font-size: .55rem; font-weight: 500; line-height: 1.15; }

.visor__acordiones { margin-top: 12px; border-top: 1px solid var(--linea); }
.visor__acordiones details { border-bottom: 1px solid var(--linea); }
.visor__acordiones summary { padding: 15px 0; cursor: pointer; list-style: none; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.visor__acordiones summary::-webkit-details-marker { display: none; }
.visor__acordiones summary::after { content: "+"; float: right; font-size: 1rem; font-weight: 400; }
.visor__acordiones details[open] summary::after { content: "−"; }
.visor__acordiones p { margin: -2px 0 16px; color: var(--humo); font-size: .76rem; line-height: 1.55; }

.visor__completa { display: grid; grid-template-columns: 82px minmax(0, 1fr) auto; min-height: 98px; margin-top: 18px; overflow: hidden; border: 1px solid var(--linea); background: #fff; color: var(--tinta); }
.visor__completa > div { min-width: 0; padding: 15px 14px; align-self: center; }
.visor__completa p { margin: 0 0 5px; color: var(--humo); font-size: .54rem; letter-spacing: .14em; }
.visor__completa h4 { margin: 0; overflow: hidden; font-size: .82rem; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.visor__completa span { display: block; margin-top: 6px; color: var(--humo); font-size: .64rem; line-height: 1.25; }
.visor__completa span b { color: var(--tinta); }
.visor__completa button { align-self: stretch; min-width: 64px; border: 0; border-left: 1px solid var(--linea); background: var(--hueso); color: var(--tinta); font: inherit; font-size: .62rem; cursor: pointer; }
.visor__completa button i { display: block; margin-top: 5px; font-size: .9rem; font-style: normal; transition: transform .2s ease; }
.visor__completa button:hover i { transform: translateX(3px); }
.visor__completa img { width: 82px; height: 100%; min-height: 98px; object-fit: contain; background: #e8e4dd; }

@keyframes visor-entra { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
.visor:not([hidden]) .visor__panel { animation: visor-entra .32s cubic-bezier(.2,.8,.2,1) both; }

@media (max-width: 899px) {
  .visor__panel { grid-template-rows: minmax(220px, 42dvh) minmax(0, 1fr); }
  .visor__datos { max-height: none; padding-bottom: 24px; }
  .visor__cerrar { position: fixed; top: 12px; right: 12px; background: var(--tinta); }
  .visor__cerrar svg { stroke: var(--hueso); }
  .visor__anadir { position: sticky; z-index: 4; bottom: 0; min-height: 52px; box-shadow: 0 -10px 22px rgba(242,240,236,.9); }
}
@media (max-height: 620px) and (max-width: 899px) {
  .visor__panel { grid-template-rows: minmax(170px, 34dvh) minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .visor:not([hidden]) .visor__panel { animation: none; } }

/* Entrada editorial: una sola coreografía suave, no efectos distintos por bloque. */
.home [data-reveal=""] { opacity: 0; transform: translateY(24px); }
.home [data-reveal="visible"] { opacity: 1; transform: none; transition: opacity .65s ease, transform .65s cubic-bezier(.2,.8,.2,1); }
@media (prefers-reduced-motion: reduce) {
  .home [data-reveal] { opacity: 1; transform: none; transition: none; }
}


/* ===== Tallas y bolsa ===== */

.visor__tallas { border: 0; padding: 0; margin: 10px 0 0; }
.visor__tallas legend {
  padding: 0; font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--humo); margin-bottom: 8px;
}
.visor__tallas { display: flex; flex-wrap: wrap; gap: 11px 9px; padding-top: 4px; }
.visor__tallas legend { flex-basis: 100%; }
/* El botón de opción de verdad sigue ahí, sólo que invisible: es lo que hace
   que funcione con teclado y que el lector de pantalla sepa que es una elección
   entre seis, cosa que una fila de botones no dice. */
.visor__tallas input { position: absolute; opacity: 0; width: 0; height: 0; }
.visor__tallas span {
  position: relative;
  display: grid; place-items: center;
  min-width: 46px; padding: 9px 10px;
  border: 1px solid var(--linea); font-size: .82rem; cursor: pointer;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
/* Las que llevas, en la esquina de su propia pastilla. Es el dato que hace que
   se puedan pedir varias tallas sin perder la cuenta, y cabe sin abrir la
   pastilla en dos cajas, que es lo que quedaba feo. */
.talla__cuenta {
  position: absolute; top: -7px; right: -7px;
  min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box;
  display: grid; place-items: center;
  background: var(--tinta); color: var(--hueso);
  border-radius: 9px; font-style: normal; font-size: .62rem;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.talla__cuenta[hidden] { display: none; }
/* Elegida y con cantidad son cosas distintas: una está en el pedido, la otra
   es la que editan el menos y el más. Por eso la puesta lleva el borde de
   tinta y sólo la elegida se rellena. */
.visor__tallas .talla--puesta span { border-color: var(--tinta); }
.visor__tallas input:checked + span .talla__cuenta {
  background: var(--hueso); color: var(--tinta);
}
.visor__tallas label:hover span { border-color: var(--tinta); }
.visor__tallas input:checked + span { background: var(--tinta); color: var(--hueso); border-color: var(--tinta); }
.visor__tallas input:focus-visible + span { outline: 2px solid var(--tinta); outline-offset: 2px; }
.visor__stock { margin: 8px 0 0; font-size: .8rem; color: var(--humo); }
.visor__tallas .talla__estado { font-size: .58rem; line-height: 1.3; margin-top: 3px; }
.visor__tallas .talla__estado:empty { display: none; }
.visor__tallas input:disabled + span { cursor: not-allowed; color: var(--humo); border-style: dashed; background: transparent; }
.visor__tallas label:has(input:disabled):hover span { border-color: var(--linea); }

/* La cantidad, en su renglón y con el rótulo a la izquierda: separada de las
   tallas para que no se lea como una talla más. */
.visor__cuantas {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin: 14px 0 2px;
}
.visor__cuantas-rotulo {
  font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--humo);
}
.paso { display: flex; align-items: stretch; border: 1px solid var(--linea); }
.paso button {
  appearance: none; border: 0; background: none; cursor: pointer;
  width: 38px; color: var(--tinta); font: inherit; font-size: 1rem; line-height: 1;
}
.paso button:hover:not([disabled]) { background: var(--linea); }
.paso button[disabled] { opacity: .35; cursor: default; }
.paso button:focus-visible { outline: 2px solid var(--tinta); outline-offset: -2px; }
.paso output {
  min-width: 40px; display: grid; place-items: center;
  font-size: .9rem; font-variant-numeric: tabular-nums;
  border-left: 1px solid var(--linea); border-right: 1px solid var(--linea);
}

/* ── Los pedidos ──────────────────────────────────────────────────────────
   Una tarjeta por pedido, con el estado arriba a la izquierda porque es lo
   único que se viene a mirar. */
.pedidos { padding: clamp(28px, 6vh, 64px) var(--margen) 0; }
.pedidos__vacio { color: var(--humo); max-width: 46ch; line-height: 1.6; }
.pedido {
  border: 1px solid var(--linea); padding: 18px 20px 16px;
  margin-bottom: 14px; max-width: 560px;
}
.pedido__arriba {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.pedido__sello {
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  padding: 4px 9px; border: 1px solid var(--tinta);
}
.pedido--entregado .pedido__sello { background: var(--tinta); color: var(--hueso); }
.pedido--pendiente .pedido__sello { border-color: var(--linea); color: var(--humo); }
.pedido__fecha { font-size: .78rem; color: var(--humo); }
/* Con foto: en una lista de pedidos, lo que se reconoce primero es la prenda,
   no su nombre escrito. */
.pedido__piezas { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.pieza { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; }
.pieza__foto {
  width: 52px; height: 60px; object-fit: contain;
  background: #E6E2DC; display: block;
}
.pieza__foto--falta { background: var(--linea); }
.pieza__que { display: grid; gap: 2px; min-width: 0; font-size: .78rem; color: var(--humo); }
.pieza__que b { font-size: .92rem; color: var(--tinta); font-weight: 600; }
.pieza__n { font-size: .92rem; font-variant-numeric: tabular-nums; }

/* Entrar con el correo: abajo del todo y en tono menor. Es la salida para
   quien no encuentra lo suyo, no el camino principal. */
.entrar {
  max-width: 560px; margin-top: clamp(28px, 5vh, 52px);
  padding-top: 22px; border-top: 1px solid var(--linea);
}
.entrar h2 { margin: 0; font-size: 1.02rem; font-weight: 600; letter-spacing: -.01em; }
.entrar p { margin: 8px 0 0; color: var(--humo); font-size: .9rem; line-height: 1.55; }
.entrar__forma { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 16px; }
.entrar__campo { display: grid; gap: 6px; flex: 1 1 240px; }
.entrar__campo span {
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--humo);
}
.entrar__campo input {
  font: inherit; font-size: .92rem; padding: 11px 12px;
  border: 1px solid var(--linea); background: none; color: var(--tinta);
}
.entrar__campo input:focus-visible { outline: 2px solid var(--tinta); outline-offset: -1px; }
.entrar__aviso { margin-top: 12px; font-size: .86rem; }
.entrar__aviso[hidden] { display: none; }
.pedido__pie {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linea);
  font-size: .82rem; color: var(--humo);
}
.pedido__pie b { font-size: 1.02rem; color: var(--tinta); }
.pedido__nota { margin: 10px 0 0; font-size: .8rem; color: var(--humo); line-height: 1.5; }

/* ── La vuelta del pago ───────────────────────────────────────────────────
   Lo primero que dice no es «gracias», es **cuándo y dónde**: quien acaba de
   pagar una preventa que se entrega en un evento tiene una sola pregunta. */
.gracias { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; }
.gracias__fondo { position: absolute; inset: 0; background: rgba(11, 11, 11, .55); }
.gracias__panel {
  position: relative; z-index: 1;
  width: min(420px, calc(100% - 32px)); background: var(--hueso);
  padding: 30px 28px 28px; max-height: 88dvh; overflow-y: auto;
}
.gracias__sello {
  margin: 0; font-size: .7rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--humo);
}
.gracias__panel h2 {
  margin: 8px 0 0; font-size: 2rem; font-weight: 700;
  letter-spacing: -.035em; text-transform: uppercase; line-height: 1;
}
.gracias__que { margin: 12px 0 0; color: var(--humo); font-size: .94rem; }
.gracias__donde {
  margin: 20px 0 24px; padding: 16px 0 0; border-top: 1px solid var(--linea);
  display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; font-size: .92rem;
}
.gracias__donde dt {
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--humo); align-self: center;
}
.gracias__donde dd { margin: 0; font-weight: 600; }
.gracias__panel .boton { width: 100%; }
.gracias__seguir {
  display: block; width: 100%; margin-top: 10px;
  appearance: none; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .84rem; color: var(--humo);
  text-decoration: underline; text-underline-offset: 3px; padding: 6px;
}
.gracias__seguir:hover { color: var(--tinta); }

.tira__bolsa { font-variant-numeric: tabular-nums; }

.bolsa[hidden] { display: none !important; }
.bolsa { position: fixed; inset: 0; z-index: 70; }
.bolsa__fondo { position: absolute; inset: 0; background: rgba(11, 11, 11, .5); }
.bolsa__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(420px, 100%); background: var(--hueso);
  display: grid; grid-template-rows: auto 1fr auto;
}
.bolsa__cabecera {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--linea);
}
.bolsa__cabecera h2 { margin: 0; font-size: .95rem; letter-spacing: -.01em; }
.bolsa__cerrar {
  appearance: none; border: 0; background: none; cursor: pointer;
  width: 32px; height: 32px; display: grid; place-items: center;
}
.bolsa__cerrar svg { width: 20px; height: 20px; fill: none; stroke: var(--tinta); stroke-width: 1.6; stroke-linecap: round; }

.bolsa__lista { overflow-y: auto; padding: 6px 20px; }
.bolsa__vacia { color: var(--humo); font-size: .88rem; padding: 24px 0; }

.renglon {
  display: grid; grid-template-columns: 56px 1fr auto;
  gap: 12px; align-items: center;
  padding: 14px 0; border-bottom: 1px solid var(--linea);
}
.renglon img { width: 56px; height: 64px; object-fit: contain; background: #E6E2DC; }
.renglon__que { display: grid; gap: 2px; font-size: .8rem; color: var(--humo); min-width: 0; }
.renglon__que b { color: var(--tinta); font-size: .85rem; font-weight: 600; }
.renglon__cuantas { display: flex; align-items: center; gap: 4px; }
.renglon__cuantas button {
  appearance: none; border: 1px solid var(--linea); background: none;
  width: 26px; height: 26px; cursor: pointer; color: var(--tinta); font-size: .9rem;
  display: grid; place-items: center;
}
.renglon__cuantas button:hover { border-color: var(--tinta); }
.renglon__cuantas span { min-width: 20px; text-align: center; font-size: .85rem; font-variant-numeric: tabular-nums; }
.renglon__quitar {
  grid-column: 2 / -1; justify-self: start;
  appearance: none; border: 0; background: none; padding: 0; cursor: pointer;
  font-size: .74rem; color: var(--humo); text-decoration: underline; text-underline-offset: 3px;
}
.renglon__quitar:hover { color: var(--tinta); }

.bolsa__pie { padding: 16px 20px 22px; border-top: 1px solid var(--linea); display: grid; gap: 8px; }
.bolsa__total { display: flex; justify-content: space-between; align-items: baseline; font-size: .95rem; }
.bolsa__total b { font-size: 1.05rem; }
.bolsa__nota { margin: 0; font-size: .74rem; color: var(--humo); }
.bolsa__promo {
  margin: 0; padding: 11px 12px; background: #E6E2DC;
  font-size: .76rem; color: var(--tinta);
}
.bolsa__promo b { font-weight: 700; }
.bolsa__promo strong { letter-spacing: .06em; }
.bolsa__fallo { margin: 0; font-size: .78rem; color: #A8322A; line-height: 1.45; }
.bolsa__fallo[hidden] { display: none; }
.bolsa__pie .boton[disabled] { opacity: .55; cursor: default; }
.bolsa__pie .boton { width: 100%; }
.bag-progreso { display: grid; gap: 10px; padding: 12px 0 14px; border-block: 1px solid var(--linea); }
.bag-progreso__encabezado { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.bag-progreso__encabezado b { color: var(--tinta); font-size: .66rem; letter-spacing: .14em; }
.bag-progreso__encabezado span { color: var(--humo); font-size: .72rem; text-align: right; }
.bag-progreso__barra { height: 7px; overflow: hidden; background: #dedad3; }
.bag-progreso__barra i { display: block; width: var(--avance); height: 100%; background: var(--tinta); transform-origin: left; animation: progreso-entra .7s cubic-bezier(.2,.8,.2,1) both; }
.bag-progreso__niveles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.bag-progreso__niveles span { display: grid; gap: 2px; color: var(--humo); font-size: .6rem; line-height: 1.1; }
.bag-progreso__niveles span:not(:first-child) { text-align: center; }
.bag-progreso__niveles span:last-child { text-align: right; }
.bag-progreso__niveles b { color: var(--tinta); font-size: .68rem; }
.bag-progreso__niveles .esta b, .bag-progreso__niveles .esta { color: var(--tinta); }
.bag-recomendacion { position: relative; display: grid; grid-template-columns: 62px minmax(0, 1fr) 54px; gap: 11px; align-items: center; overflow: hidden; padding: 10px; border: 1px solid var(--linea); background: #fff; animation: recomendacion-entra .3s ease both; }
.bag-recomendacion__foto { align-self: stretch; display: grid; place-items: center; background: #ebe7e0; }
.bag-recomendacion img { width: 62px; height: 74px; object-fit: contain; }
.bag-recomendacion__texto { display: grid; gap: 3px; min-width: 0; }
.bag-recomendacion small { color: var(--humo); font-size: .52rem; letter-spacing: .14em; }
.bag-recomendacion b { overflow: hidden; font-size: .68rem; letter-spacing: .02em; text-overflow: ellipsis; white-space: nowrap; }
.bag-recomendacion__texto > span { color: var(--humo); font-size: .67rem; line-height: 1.3; }
.bag-recomendacion button { align-self: stretch; border: 0; border-left: 1px solid var(--linea); background: transparent; color: var(--tinta); cursor: pointer; font: inherit; font-size: .62rem; }
.bag-recomendacion button i { display: block; margin-top: 5px; font-size: .9rem; font-style: normal; }
.bag-recomendacion--cerca::after { content: ""; position: absolute; inset: -80% -30%; pointer-events: none; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.75) 50%, transparent 60%); transform: translateX(-55%); animation: oferta-destello 3.8s 1s ease-in-out infinite; }
.bag-recomendacion--cerca button i { animation: oferta-flecha 1.8s ease-in-out infinite; }
@keyframes progreso-entra { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes recomendacion-entra { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes oferta-destello { 0%, 62%, 100% { transform: translateX(-55%); } 78% { transform: translateX(55%); } }
@keyframes oferta-flecha { 0%, 65%, 100% { transform: translateX(0); } 78% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .bag-progreso__barra i, .bag-recomendacion, .bag-recomendacion--cerca::after, .bag-recomendacion--cerca button i { animation: none; } }
.visor__bundle { margin: 10px 0 0; color: var(--humo); font-size: .76rem; }

/* ── Home IMPRL Studio ─────────────────────────────────────────────────── */
.hero--editorial { min-height: min(760px, 82vh); overflow: hidden; }
.hero--editorial > img { height: min(760px, 82vh); object-fit: cover; object-position: center 38%; }
.hero--editorial::after { inset: 0; background: linear-gradient(90deg, rgba(8, 8, 8, .72), rgba(8, 8, 8, .1) 72%); }
.hero--editorial .hero__texto { left: clamp(20px, 8vw, 120px); right: auto; bottom: clamp(34px, 8vh, 88px); justify-items: start; text-align: left; color: #fff; max-width: min(500px, calc(100vw - 40px)); min-width: 0; }
.hero--editorial .hero__texto .eyebrow { color: rgba(255,255,255,.78); }
.hero--editorial .hero__marca { max-width: 8ch; margin: 0; font-family: "Avenir Next", "Helvetica Neue", sans-serif; font-size: clamp(3.2rem, 6.8vw, 6.5rem); line-height: .9; letter-spacing: .01em; font-weight: 700; text-wrap: balance; }
.hero--editorial .portada__drop { font-size: clamp(1rem, 1.7vw, 1.35rem); margin-top: 22px; }
.hero__acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.boton--fantasma { background: transparent; color: currentColor; border: 1px solid currentColor; }
.atributos { display: flex; justify-content: space-between; gap: 16px; max-width: 1200px; margin: auto; padding: 18px var(--margen); border-bottom: 1px solid var(--linea); font-size: .7rem; text-transform: uppercase; letter-spacing: .14em; }
.home-seccion { max-width: 1480px; margin: auto; padding: clamp(72px, 10vw, 150px) var(--margen) 0; }
.home-seccion--compact { max-width: none; padding-top: clamp(56px, 8vw, 100px); }
.home-seccion__cabecera { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 28px; }
.home-seccion__cabecera h2, .home-seccion > h2 { margin: 0; max-width: 100%; font-size: clamp(2.4rem, 6vw, 6rem); line-height: .9; letter-spacing: 0; text-wrap: balance; text-transform: uppercase; }
.home-seccion__cabecera a { font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; }
.eyebrow { margin: 0 0 12px; color: var(--humo); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; }
.best-sellers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.best-sellers .pasarela__ficha:nth-child(n+5) { display: none; }
.ofertas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 1480px; margin: auto; padding: 0 var(--margen); }
.oferta { min-height: 320px; padding: clamp(24px, 4vw, 56px); display: flex; flex-direction: column; align-items: flex-start; justify-content: end; background: #ded8d0; }
.oferta--principal { background: var(--tinta); color: var(--hueso); }
.oferta h3 { margin: 0; font-size: clamp(2.5rem, 5vw, 5rem); line-height: .85; letter-spacing: -.06em; text-transform: uppercase; }
.oferta p:not(.eyebrow) { max-width: 28ch; margin: 18px 0; }
.oferta strong { font-size: 1.15rem; margin-bottom: 24px; }
.oferta s { margin-left: 6px; color: var(--humo); font-size: .78rem; }
.unlock-grid, .why__grid, .purpose__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--linea); }
.unlock-grid article, .why__grid article, .purpose__grid article { background: var(--hueso); padding: 28px; min-height: 190px; }
.unlock-grid span { font-size: .7rem; color: var(--humo); }
.unlock-grid h3, .why__grid h3, .purpose__grid h3 { margin: 34px 0 8px; font-size: .86rem; text-transform: uppercase; letter-spacing: .08em; }
.unlock-grid strong { display: block; font-size: 1.35rem; text-transform: uppercase; }
.unlock-grid p, .why__grid p, .purpose__grid p { max-width: 32ch; margin-bottom: 0; color: var(--humo); font-size: .88rem; }
.why { padding-bottom: 0; }
.why__grid { grid-template-columns: repeat(4, 1fr); margin-top: 32px; }
.why__grid h3 { margin-top: 0; }
.purpose { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; max-width: 1480px; margin: auto; padding: clamp(72px, 10vw, 150px) var(--margen) 0; }
.purpose h2 { margin: 0; font-size: clamp(2.4rem, 6vw, 6rem); line-height: .88; letter-spacing: -.055em; text-transform: uppercase; }
.purpose__grid { grid-template-columns: repeat(2, 1fr); }
.purpose__grid h3 { margin-top: 0; font-size: 1.3rem; }
.purpose__grid a { display: inline-block; margin-top: 28px; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; }
.lifestyle h2 { margin: 0 0 32px; font-size: clamp(2.4rem, 6vw, 6rem); line-height: .88; letter-spacing: -.055em; text-transform: uppercase; }
.lifestyle__grid { display: grid; grid-template-columns: 1.2fr .8fr .8fr; gap: 12px; }
.lifestyle__grid img { width: 100%; height: 520px; object-fit: cover; }
.lifestyle__grid img:nth-child(2) { height: 420px; margin-top: 100px; }
.lifestyle__grid img:nth-child(3) { height: 320px; margin-top: 200px; }
.collection-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.collection-grid a { text-decoration: none; }
.collection-grid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; margin-bottom: 14px; }
.collection-grid strong, .collection-grid span { display: block; text-transform: uppercase; }
.collection-grid strong { font-size: .9rem; letter-spacing: .08em; }
.collection-grid span { margin-top: 4px; color: var(--humo); font-size: .78rem; }
.faq { max-width: 900px; }
.faq h2 { margin-bottom: 34px; }
.faq details { border-top: 1px solid var(--linea); padding: 19px 0; }
.faq details:last-child { border-bottom: 1px solid var(--linea); }
.faq summary { cursor: pointer; font-size: .92rem; font-weight: 700; list-style: none; text-transform: uppercase; letter-spacing: .06em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; font-size: 1.1rem; }
.faq details[open] summary::after { content: "−"; }
.faq details p { max-width: 56ch; color: var(--humo); }
.catalogo-legado { max-width: 1480px; margin: auto; padding: clamp(72px, 10vw, 150px) var(--margen) 0; }
@media (max-width: 780px) {
  .hero--editorial { min-height: 670px; }
  .hero--editorial > img { height: 670px; object-position: 58% center; }
  .hero--editorial .hero__texto { bottom: 34px; }
  .hero--editorial .hero__marca { font-size: clamp(2.9rem, 15vw, 5rem); }
  .atributos { display: grid; grid-template-columns: repeat(3, 1fr); font-size: .57rem; }
  .best-sellers, .ofertas { grid-template-columns: repeat(2, 1fr); }
  .oferta { min-height: 270px; padding: 22px; }
  .oferta:last-child { grid-column: 1 / -1; }
  .unlock-grid, .why__grid, .purpose, .purpose__grid { grid-template-columns: 1fr; }
  .lifestyle__grid { grid-template-columns: 1fr 1fr; }
  .lifestyle__grid img, .lifestyle__grid img:nth-child(n) { height: 300px; margin-top: 0; }
  .lifestyle__grid img:first-child { grid-column: 1 / -1; height: 430px; }
  .collection-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .best-sellers, .ofertas { grid-template-columns: 1fr; }
  .oferta:last-child { grid-column: auto; }
  .hero__acciones { width: 100%; }
  .hero__acciones .boton { flex: 1; text-align: center; }
}

.colecciones-destacadas {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(28px, 6vw, 96px);
  max-width: 1480px;
  margin: auto;
  padding: clamp(72px, 10vw, 150px) var(--margen) 0;
}
.colecciones-destacadas__intro { align-self: end; padding-bottom: 12px; }
.colecciones-destacadas__intro h2 {
  margin: 0;
  max-width: 10ch;
  font-size: clamp(2.5rem, 5.5vw, 6rem);
  line-height: .92;
  letter-spacing: 0;
  text-wrap: balance;
  text-transform: uppercase;
}
.colecciones-destacadas__intro > p:last-child { max-width: 30ch; margin-top: 24px; color: var(--humo); }
.colecciones-destacadas__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 12px; align-items: end; }
.colecciones-destacadas__grid a { position: relative; min-width: 0; color: #fff; text-decoration: none; overflow: hidden; background: var(--tinta); }
.colecciones-destacadas__grid a:first-child { grid-row: span 2; }
.colecciones-destacadas__grid a::after { content: ""; position: absolute; inset: 42% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.8)); pointer-events: none; }
.colecciones-destacadas__grid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .45s ease; }
.colecciones-destacadas__grid a:first-child img { aspect-ratio: 4 / 5.6; }
.colecciones-destacadas__grid a:hover img { transform: scale(1.035); }
.colecciones-destacadas__grid span, .colecciones-destacadas__grid strong { position: absolute; z-index: 1; left: 18px; right: 18px; }
.colecciones-destacadas__grid span { bottom: 56px; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; opacity: .78; }
.colecciones-destacadas__grid strong { bottom: 18px; font-size: clamp(1.1rem, 2vw, 1.6rem); line-height: 1; text-transform: uppercase; }
.best-sellers .prenda:first-child { grid-column: span 2; }
.best-sellers .prenda:first-child .prenda__marco { aspect-ratio: 1.15; }
.ofertas { grid-template-columns: 1.25fr .75fr; }
.oferta:nth-child(3) { grid-column: 1 / -1; min-height: 190px; flex-direction: row; align-items: center; justify-content: space-between; gap: 22px; }
.oferta:nth-child(3) .eyebrow, .oferta:nth-child(3) p, .oferta:nth-child(3) strong { margin: 0; }
.oferta:nth-child(3) h3 { margin-right: auto; }
.oferta h3, .unlock-grid h3, .why__grid h3, .purpose__grid h3, .faq summary { overflow-wrap: anywhere; }
.boton { max-width: 100%; text-align: center; white-space: normal; line-height: 1.15; }
@media (max-width: 780px) {
  .colecciones-destacadas { grid-template-columns: 1fr; gap: 26px; }
  .colecciones-destacadas__intro h2 { max-width: 14ch; }
  .colecciones-destacadas__grid { grid-template-columns: 1.1fr .9fr; }
  .ofertas { grid-template-columns: 1fr 1fr; }
  .oferta:nth-child(3) { grid-column: 1 / -1; flex-wrap: wrap; min-height: 230px; }
  .oferta:nth-child(3) h3 { margin-right: 0; }
}
@media (max-width: 480px) {
  .colecciones-destacadas__grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .colecciones-destacadas__grid img, .colecciones-destacadas__grid a:first-child img { aspect-ratio: 3 / 4; }
  .colecciones-destacadas__grid span, .colecciones-destacadas__grid strong { left: 12px; right: 12px; }
  .colecciones-destacadas__grid span { bottom: 42px; font-size: .52rem; }
  .colecciones-destacadas__grid strong { bottom: 13px; font-size: .9rem; }
  .best-sellers .prenda:first-child { grid-column: auto; }
  .best-sellers .prenda:first-child .prenda__marco { aspect-ratio: auto; }
  .ofertas { grid-template-columns: 1fr; }
  .oferta:nth-child(3) { grid-column: auto; }
}

.catalogo-inicio { max-width: 1480px; margin: auto; padding-top: clamp(70px, 9vw, 130px); }
.catalogo-inicio__intro { padding: 0 var(--margen); }
.catalogo-inicio__intro h2 { margin: 0; font-size: clamp(2rem, 4vw, 4rem); line-height: .9; text-transform: uppercase; }
.catalogo-inicio #catalogo .coleccion { padding-top: 28px; }
.catalogo-inicio #catalogo .banda--foto { min-height: 0; }
.catalogo-inicio #catalogo .banda--foto > img { aspect-ratio: 2.35 / 1; object-fit: cover; }
.catalogo-inicio #catalogo .banda__marca { max-height: clamp(42px, 5vw, 68px); }
.catalogo-inicio #catalogo .banda__marca--alta { max-height: clamp(60px, 8vw, 104px); }
.registro { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 7vw, 100px); align-items: end; max-width: 1480px; margin: clamp(72px, 10vw, 150px) auto 0; padding: clamp(36px, 6vw, 76px) var(--margen); color: var(--hueso); background: var(--tinta); position: relative; overflow: hidden; }
.registro::before { content: "IMPRL / 01"; position: absolute; top: 22px; right: var(--margen); color: rgba(242,240,236,.45); font-size: .62rem; letter-spacing: .16em; }
.registro > div, .registro__forma { position: relative; z-index: 1; }
.registro h2 { max-width: 12ch; margin: 0; font-size: clamp(2.4rem, 5vw, 5.5rem); line-height: .9; text-wrap: balance; text-transform: uppercase; }
.registro > div > p:last-child { max-width: 42ch; margin: 24px 0 0; color: rgba(242,240,236,.7); }
.registro__forma { display: grid; gap: 9px; }
.registro__forma label { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; }
.registro__forma > div { display: flex; gap: 8px; }
.registro__forma input { min-width: 0; flex: 1; border: 1px solid rgba(242,240,236,.35); background: transparent; color: var(--hueso); padding: 14px; font: inherit; }
.registro__forma input::placeholder { color: rgba(242,240,236,.5); }
.registro__forma .boton { flex: 0 0 auto; border-color: var(--hueso); background: var(--hueso); color: var(--tinta); }
.registro__estado { margin: 3px 0 0; color: var(--hueso); font-size: .8rem; }
.registro__estado[data-error="true"] { color: #f3b3a9; }
@keyframes registro-brillo { from { transform: translateX(-110%) rotate(12deg); } to { transform: translateX(360%) rotate(12deg); } }
.registro::after { content: ""; position: absolute; top: -30%; bottom: -30%; left: -40%; width: 18%; background: rgba(255,255,255,.08); transform: rotate(12deg); animation: registro-brillo 9s ease-in-out infinite; pointer-events: none; }
@media (max-width: 700px) {
  .catalogo-inicio #catalogo .banda--foto > img { aspect-ratio: 1.45 / 1; }
  .registro { grid-template-columns: 1fr; }
  .registro__forma > div { display: grid; }
  .registro__forma .boton { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .registro::after { animation: none; } }

/* La home no necesita tres tarjetas grandes para explicar las ofertas. */
.ofertas.ofertas--compactas { grid-template-columns: repeat(3, 1fr); gap: 0; max-width: 1480px; padding-inline: var(--margen); margin-top: clamp(52px, 7vw, 90px); border-block: 1px solid var(--linea); }
.ofertas--compactas .oferta { min-height: 116px; padding: 18px 20px; justify-content: center; gap: 7px; border-right: 1px solid var(--linea); background: transparent; color: var(--tinta); }
.ofertas--compactas .oferta:last-child { border-right: 0; }
.ofertas--compactas .oferta--principal { background: var(--tinta); color: var(--hueso); }
.ofertas--compactas .oferta span { font-size: .62rem; letter-spacing: .14em; }
.ofertas--compactas .oferta strong { margin: 0; font-size: .95rem; }
.ofertas--compactas .oferta a { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; }
.registro-modal { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(11,11,11,.54); }
.registro-modal[hidden] { display: none; }
.registro-modal .registro { position: relative; width: min(720px, 100%); height: min(650px, calc(100svh - 32px)); margin: 0; padding: 0; display: grid; grid-template-rows: 170px 1fr; overflow: hidden; box-shadow: 0 24px 80px rgba(0,0,0,.3); animation: registro-entrada .35s cubic-bezier(.2,.8,.2,1) both; }
.registro__imagen { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #171717; }
.registro__imagen::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.7)); }
.registro__imagen img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: center bottom; }
.registro__imagen span { position: absolute; z-index: 1; left: 24px; bottom: 22px; color: #fff; font-size: .65rem; letter-spacing: .16em; }
.registro__contenido { display: flex; flex-direction: column; justify-content: flex-start; padding: 34px clamp(28px, 5vw, 64px) 40px; background: var(--hueso); color: var(--tinta); overflow-y: auto; }
.registro__contenido .eyebrow { color: var(--humo); }
.registro__contenido h2 { max-width: none; margin: 0; font-size: clamp(2.5rem, 5vw, 4.3rem); line-height: .94; letter-spacing: 0; overflow-wrap: normal; text-transform: uppercase; }
.registro__contenido > p { max-width: 30ch; color: var(--humo); }
.registro__oferta { display: grid; gap: 3px; margin: 18px 0 2px; padding: 14px 16px; border-left: 3px solid var(--tinta); background: #e7e2da; }
.registro__oferta span { font-size: .6rem; letter-spacing: .14em; color: var(--humo); }
.registro__oferta strong { font-size: 1.8rem; line-height: .95; letter-spacing: .02em; }
.registro__oferta b { font-size: .92rem; }
.registro__oferta small { color: var(--humo); font-size: .7rem; }
.registro__contenido .registro__forma { margin-top: 18px; }
.registro__contenido .registro__forma input { border-color: var(--linea); color: var(--tinta); background: #fff; }
.registro__contenido .registro__forma input::placeholder { color: var(--humo); }
.registro__contenido .registro__forma .boton { border-color: var(--tinta); background: var(--tinta); color: var(--hueso); }
.registro__contenido .registro__forma label { color: var(--humo); }
.registro__contenido .registro__estado { color: var(--tinta); }
.registro-modal__cerrar { position: absolute; top: 14px; right: 18px; z-index: 2; border: 0; background: none; color: var(--hueso); font-size: 1.7rem; line-height: 1; cursor: pointer; }
@keyframes registro-entrada { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
@media (max-width: 700px) {
  .ofertas.ofertas--compactas { grid-template-columns: 1fr; }
  .ofertas--compactas .oferta, .ofertas--compactas .oferta:last-child { border-right: 0; border-bottom: 1px solid var(--linea); }
  .ofertas--compactas .oferta:last-child { border-bottom: 0; }
  .registro-modal .registro { grid-template-rows: 130px 1fr; height: min(640px, calc(100svh - 32px)); overflow-y: auto; }
  .registro__imagen { min-height: 130px; height: 130px; }
  .registro__imagen img { min-height: 0; height: 100%; }
  .registro__contenido { padding: 28px 24px 30px; }
}
@media (prefers-reduced-motion: reduce) { .registro-modal .registro { animation: none; } }
@media (max-width: 700px) {
  .pie { grid-template-columns: 1fr 1fr; gap: 34px 24px; }
  .pie__marca { grid-column: 1 / -1; }
  .pie__base { flex-direction: column; }
}

/* ── Home editorial 2026 ──────────────────────────────────────────────── */
.home .hero--editorial { min-height: 0; overflow: visible; }
.home .hero--editorial > img { height: auto; aspect-ratio: 2 / 1; filter: saturate(.9) contrast(1.03); }
.home .hero--editorial::after { display: none; }
.home .hero--editorial .hero__texto { position: static; width: 100%; max-width: none; min-width: 0; padding: 22px var(--margen); display: flex; align-items: center; justify-content: space-between; gap: 24px; background: var(--tinta); color: var(--hueso); text-align: left; }
.home .hero--editorial .hero__texto .eyebrow { margin-bottom: 6px; color: rgba(242,240,236,.58); }
.home .hero--editorial .hero__marca { max-width: none; margin: 0; font-size: clamp(1.8rem, 3.2vw, 3.2rem); line-height: .92; letter-spacing: -.055em; white-space: nowrap; }
.home .hero__acciones { flex: 0 0 auto; margin-top: 0; }
.home .hero__acciones .boton:first-child { border-color: #fff; background: #fff; color: var(--tinta); }
.home .hero__acciones .boton--fantasma { border-color: rgba(255,255,255,.75); background: transparent; color: #fff; }
.home .home-seccion { padding-top: clamp(64px, 8vw, 112px); }
.home .home-seccion__cabecera h2, .home .home-seccion > h2 { max-width: 13ch; font-size: clamp(2.6rem, 5.8vw, 5.8rem); letter-spacing: -.065em; }
.seccion-nota { max-width: 29ch; margin: 0; color: var(--humo); font-size: .8rem; }

.prenda__meta { margin: 5px 0 0; color: var(--humo); font-size: .72rem; }
.prenda__ver { margin: 14px 0 0; padding: 0 0 3px; border: 0; border-bottom: 1px solid currentColor; background: none; color: var(--tinta); font: inherit; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }

.home .ofertas-seccion { max-width: 1480px; }
.home .ofertas { padding: 0; }
.home .oferta { min-height: 330px; }
.home .oferta:nth-child(3) { min-height: 170px; }
.home .oferta h3 { font-size: clamp(2.3rem, 4.8vw, 5rem); }
.home .oferta p:not(.eyebrow) { color: var(--humo); }
.home .oferta--principal p:not(.eyebrow) { color: rgba(242,240,236,.66); }
.boton--claro { border-color: var(--hueso); background: var(--hueso); color: var(--tinta); }

.unlock-rail { display: grid; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--tinta); }
.unlock-rail article { position: relative; min-height: 210px; padding: 30px 24px; border-right: 1px solid var(--linea); }
.unlock-rail article:last-child { border-right: 0; }
.unlock-rail article::before { content: ""; position: absolute; top: -5px; left: 24px; width: 1px; height: 9px; background: var(--tinta); }
.unlock-rail span { color: var(--humo); font-size: .66rem; letter-spacing: .12em; }
.unlock-rail h3 { margin: 46px 0 2px; font-size: 1.25rem; letter-spacing: -.03em; text-transform: uppercase; }
.unlock-rail strong { font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; }
.unlock-rail p { max-width: 28ch; margin: 13px 0 0; color: var(--humo); font-size: .8rem; }
.unlocks__nota { margin: 14px 0 0; color: var(--humo); font-size: .68rem; }

.home .purpose { align-items: end; }
.home .purpose__grid article { min-height: 210px; }
.home .purpose__grid h3 { max-width: 14ch; font-size: clamp(1.4rem, 2.6vw, 2.4rem); line-height: 1; letter-spacing: -.04em; }
.home .lifestyle__grid img { filter: saturate(.9); }

/* Las tres vitrinas principales comparten una retícula simple y estable. */
.home .best-sellers { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.3vw, 18px); }
.home .best-sellers .prenda:first-child { grid-column: auto; }
.home .best-sellers .prenda:first-child .prenda__marco { aspect-ratio: 1 / 1.15; }

.home .lifestyle__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.3vw, 18px); }
.home .lifestyle__grid figure { position: relative; min-width: 0; margin: 0; overflow: hidden; background: #d9d4cc; }
.home .lifestyle__grid img,
.home .lifestyle__grid img:nth-child(n) { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; margin: 0; object-fit: cover; transition: transform .7s cubic-bezier(.2,.8,.2,1), filter .4s ease; }
.home .lifestyle__grid figcaption { position: absolute; inset: auto 0 0; display: grid; gap: 5px; padding: 54px 18px 18px; color: #fff; background: linear-gradient(transparent, rgba(6,6,6,.72)); transform: translateY(6px); transition: transform .35s ease; }
.home .lifestyle__grid figcaption span { font-size: .55rem; letter-spacing: .14em; text-transform: uppercase; }
.home .lifestyle__grid figcaption strong { font-size: .88rem; font-weight: 500; }
.home .lifestyle__grid figure:hover img { transform: scale(1.025); filter: saturate(1); }
.home .lifestyle__grid figure:hover figcaption { transform: none; }

.home .colecciones-destacadas { display: block; }
.home .colecciones-destacadas__intro { padding: 0 0 30px; }
.home .colecciones-destacadas__intro h2 { max-width: none; }
.home .colecciones-destacadas__intro > p:last-child { max-width: 48ch; margin-top: 14px; }
.home .colecciones-destacadas__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.3vw, 18px); align-items: stretch; }
.home .colecciones-destacadas__grid a:first-child { grid-row: auto; }
.home .colecciones-destacadas__grid img,
.home .colecciones-destacadas__grid a:first-child img { aspect-ratio: 4 / 5; }
.home .colecciones-destacadas__grid a::after { inset: 52% 0 0; }

/* Los nombres de colección recuperan el volumen 3D sin tapar las fotos. */
.colecciones-destacadas__grid .coleccion-card__nombre { bottom: 18px; display: block; height: 56px; line-height: 0; }
.colecciones-destacadas__grid .coleccion-card__logo { position: relative; inset: auto; display: block; width: min(210px, 78%); height: 56px; }
.colecciones-destacadas__grid .coleccion-card__logo > img { width: auto; max-width: 100%; height: 100%; object-fit: contain; object-position: left center; }
.colecciones-destacadas__grid a:nth-child(2) .coleccion-card__logo { width: min(180px, 82%); height: 48px; }
.colecciones-destacadas__grid .coleccion-card__logo--alta { width: 62px; height: 66px; }

/* La única ruptura de la retícula es comercial: una oferta concreta. */
.home .registro-modal { padding: 18px; background: rgba(11,11,11,.62); backdrop-filter: blur(3px); }
.home .oferta-popup { position: relative; width: min(860px, 100%); max-height: calc(100svh - 36px); display: grid; grid-template-columns: 1.08fr .92fr; overflow: hidden; background: #fff; color: var(--tinta); box-shadow: 0 28px 90px rgba(0,0,0,.28); animation: registro-entrada .35s cubic-bezier(.2,.8,.2,1) both; }
.home .oferta-popup__foto { min-height: 540px; overflow: hidden; background: #d8d5cf; }
.home .oferta-popup__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.home .oferta-popup__contenido { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(34px, 5vw, 64px); }
.home .oferta-popup__contenido h2 { margin: 0; font-size: clamp(3.4rem, 6vw, 5.5rem); line-height: .8; letter-spacing: -.075em; text-transform: uppercase; }
.home .oferta-popup__descripcion { max-width: 24ch; margin: 24px 0 0; color: var(--humo); font-size: .96rem; }
.home .oferta-popup__precio { display: flex; align-items: baseline; gap: 10px; margin: 22px 0 24px; }
.home .oferta-popup__precio strong { font-size: 1.7rem; letter-spacing: -.04em; }
.home .oferta-popup__precio s { color: var(--humo); font-size: .82rem; }
.home .oferta-popup__contenido .boton { width: 100%; min-height: 50px; display: grid; place-items: center; }
.home .oferta-popup__contenido > small { margin-top: 14px; color: #777; font-size: .67rem; line-height: 1.45; }
.home .registro-modal__cerrar { top: 12px; right: 16px; color: var(--tinta); font-size: 2rem; }

/* Bolsa: una jerarquía de checkout, no otro bloque promocional. */
.bolsa__paso { margin: 0; color: var(--humo); font-size: .62rem; letter-spacing: .14em; }
.bolsa__pagar { min-height: 54px; margin-top: 6px; font-weight: 700; }
.bolsa__seguro { margin: 0; color: var(--humo); font-size: .66rem; text-align: center; }
.bolsa__promo { margin: -2px 0 0; padding: 8px 10px; background: #e6e1d9; font-size: .7rem; text-align: center; }

/* Footer amplio en móvil: newsletter, menú y métodos de pago visibles. */
.pie { grid-template-columns: 1.45fr repeat(3, 1fr); }
.pie__newsletter { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 8vw, 110px); padding-bottom: clamp(44px, 7vw, 82px); border-bottom: 1px solid rgba(242,240,236,.2); }
.pie__newsletter .eyebrow { color: rgba(242,240,236,.5); }
.pie__newsletter h2 { grid-column: 1; margin: 2px 0 12px; max-width: 10ch; font-size: clamp(2.6rem, 6vw, 6.2rem); line-height: .86; letter-spacing: -.065em; text-transform: uppercase; }
.pie__newsletter > p:not(.eyebrow) { grid-column: 1; max-width: 34ch; margin: 0; color: rgba(242,240,236,.62); }
.pie__newsletter form { grid-column: 2; grid-row: 1 / span 3; align-self: end; display: grid; grid-template-columns: 1fr 58px; }
.pie__newsletter input { min-width: 0; height: 58px; padding: 0 18px; border: 1px solid rgba(242,240,236,.5); border-right: 0; background: transparent; color: var(--hueso); font: inherit; }
.pie__newsletter button { border: 1px solid var(--hueso); background: var(--hueso); color: var(--tinta); font-size: 1.5rem; cursor: pointer; }
.pie__newsletter form span { grid-column: 1 / -1; min-height: 1.2em; margin-top: 8px; color: rgba(242,240,236,.7); font-size: .7rem; }
.pie__redes { grid-column: 2; display: flex; gap: 10px; margin-top: 20px; }
.pie__redes a { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(242,240,236,.45); border-radius: 50%; color: var(--hueso); text-decoration: none; font-size: .65rem; }
.pie__base a { color: inherit; }
.pie__marca img { filter: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 780px) {
  .home .hero--editorial { min-height: 0; }
  .home .hero--editorial > img { min-height: 0; height: auto; aspect-ratio: 5 / 4; object-position: center; }
  .home .hero--editorial .hero__texto { padding-block: 20px; display: grid; gap: 18px; }
  .home .hero--editorial .hero__marca { font-size: clamp(1.75rem, 8vw, 2.5rem); white-space: normal; }
  .home .hero__acciones { width: 100%; }
  .home .atributos { grid-template-columns: repeat(3, 1fr); gap: 4px; overflow: hidden; padding-inline: 12px; font-size: .5rem; letter-spacing: .08em; text-align: center; }
  .unlock-rail { grid-template-columns: 1fr; }
  .unlock-rail article { min-height: 150px; border-right: 0; border-bottom: 1px solid var(--linea); }
  .unlock-rail article:last-child { border-bottom: 0; }
  .unlock-rail h3 { margin-top: 28px; }
  .home .purpose { gap: 28px; }
  .home .best-sellers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home .lifestyle__grid,
  .home .colecciones-destacadas__grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; gap: 10px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scrollbar-width: none; }
  .home .lifestyle__grid::-webkit-scrollbar,
  .home .colecciones-destacadas__grid::-webkit-scrollbar { display: none; }
  .home .lifestyle__grid figure,
  .home .colecciones-destacadas__grid a { scroll-snap-align: start; }
  .home .lifestyle__grid figure:first-child { grid-column: auto; height: auto; }
  .home .oferta-popup { grid-template-columns: 1fr; grid-template-rows: 180px auto; overflow-y: auto; }
  .home .oferta-popup__foto { min-height: 180px; height: 180px; }
  .home .oferta-popup__foto img { object-position: center 42%; }
  .home .oferta-popup__contenido { padding: 28px 24px 30px; }
  .home .oferta-popup__contenido h2 { font-size: clamp(3rem, 16vw, 4.4rem); }
  .pie { grid-template-columns: 1fr 1fr; }
  .pie__newsletter { grid-template-columns: 1fr; }
  .pie__newsletter h2, .pie__newsletter > p:not(.eyebrow), .pie__newsletter form, .pie__redes { grid-column: 1; grid-row: auto; }
  .pie__newsletter form { margin-top: 28px; }
  .pie__marca { grid-column: 1 / -1; }
  .pie__base { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
  .home .hero__acciones { display: grid; grid-template-columns: 1fr 1fr; }
  .home .hero__acciones .boton { padding-inline: 10px; font-size: .68rem; }
  .home .home-seccion__cabecera { align-items: start; }
  .home .oferta:nth-child(3) { display: flex; min-height: 260px; }
  .home .best-sellers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home .oferta-popup__descripcion { margin-top: 18px; }
  .home .oferta-popup__precio { margin-block: 16px 18px; }
  .pie { padding-inline: 24px; }
  .pie__newsletter h2 { font-size: 3.2rem; }
  .colecciones-destacadas__grid .coleccion-card__nombre { left: 12px; right: 12px; bottom: 12px; height: 42px; }
  .colecciones-destacadas__grid .coleccion-card__logo { width: min(145px, 88%); height: 42px; }
  .colecciones-destacadas__grid a:nth-child(2) .coleccion-card__logo { width: min(120px, 88%); height: 38px; }
  .colecciones-destacadas__grid .coleccion-card__logo--alta { width: 44px; height: 48px; }
}