/* ==========================================================================
   Catálogo de ejemplo — hoja de estilos del sitio

   Paleta: cuero y ámbar sobre papel. El marrón profundo hace de tinta de
   marca (botones, marca, pestaña activa) y el ámbar es el único color que
   grita: cuenta atrás, iconos de servicio, sello del hero. Los fondos son
   dos grises de papel, nunca blanco puro contra blanco puro.

   Esta hoja define TAMBIÉN las primitivas —botón, campo, tabla, píldora— de
   las que depende nucleo/assets/css/admin.css. El panel hereda de aquí, así
   que un cambio de marca alcanza también a la pantalla de gestión.

   Tipografía autoalojada en assets/fonts/ (subconjunto latino, ~31 kB). No
   se enlaza a Google Fonts: una hoja externa bloquea el primer pintado y
   deja la tipografía de la marca en manos de un tercero.
   ========================================================================== */

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* --------------------------------------------------------------- color */
  --tinta:       #191919;   /* titulares y cuerpo */
  --tinta-2:     #6b6b6b;   /* secundario sobre blanco (5,4:1) */
  --tinta-3:     #8f8f8f;   /* terciario: solo texto grande o iconos */

  --marron:      #4a2617;   /* la tinta de la marca */
  --marron-osc:  #331a0f;
  --marron-claro:#7a4a30;

  --ambar:       #f7b23b;   /* el único color que grita */
  --ambar-osc:   #d99020;
  --ambar-suave: #fdf1dc;

  --verde:       #1f8f52;   /* descuento */
  --rojo:        #b3392f;   /* agotado, error */

  --papel:       #f4f4f4;   /* fondo de sección */
  --papel-2:     #fafafa;
  --linea:       #e7e7e7;
  --linea-2:     #d8d8d8;
  --blanco:      #fff;

  /* compatibilidad con el motor: retail.css y admin.css leen estos nombres */
  --navy:        var(--marron);
  --turq:        var(--marron);
  --turq-dark:   var(--marron-claro);
  --ink:         var(--tinta);
  --muted:       var(--tinta-2);
  --line:        var(--linea);
  --sand:        var(--papel);

  /* ----------------------------------------------------------- medidas */
  --font: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --wrap: 1180px;
  --r-sm: 6px;
  --r:    10px;
  --r-lg: 16px;
  --r-pill: 999px;
  --header-h: 76px;
  --carril-col: 262px;
  /* Lo que hay del borde del contenido al de la ventana. Lo usa el hero para
     sangrar la foto sin salirse del sistema de rejilla. */
  --sangra: calc(50% - 50vw);

  --sombra-sm: 0 2px 10px rgba(25, 25, 25, 0.06);
  --sombra:    0 10px 30px rgba(25, 25, 25, 0.10);
  --sombra-lg: 0 24px 60px rgba(25, 25, 25, 0.16);

  /* Una sola curva en todo el sitio: salida exponencial desde un estado ya
     visible. La animación no esconde nada, solo lo coloca. */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }

/* `hidden` tiene que ganar siempre.

   El navegador lo apaga con `[hidden] { display: none }`, que es un selector
   de atributo: cualquier `.btn { display: inline-flex }` le gana por
   especificidad y el elemento se queda en pantalla. Así salía el botón de
   «Cerrar sesión» sobre el formulario de acceso, antes de que hubiera sesión
   ninguna. Estaba parcheado elemento por elemento —diez reglas repartidas
   entre retail.css y admin.css—; dicho una vez aquí, deja de hacer falta
   acordarse la próxima vez. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.7;
  color: var(--tinta);
  background: var(--blanco);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1.1em; }

h1, h2, h3, h4 {
  margin: 0 0 0.45em;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--tinta);
}

:focus-visible {
  outline: 3px solid var(--marron);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

::selection { background: var(--ambar); color: var(--marron-osc); }

/* ------------------------------------------------------------- utilidades */
.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }

.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;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  padding: 10px 16px; border-radius: var(--r);
  background: var(--marron); color: var(--blanco);
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 12px; }

.section { padding: 76px 0; }
.section--alt { background: var(--papel); }
.section--tight { padding: 46px 0; }

.section-title {
  margin: 0 0 10px;
  font-size: clamp(1.6rem, 3vw, 2.05rem);
  font-weight: 600;
}
.section-lead {
  margin: 0 0 34px;
  max-width: 60ch;
  color: var(--tinta-2);
}

.tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: var(--ambar-suave);
  color: var(--marron);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.pill {
  display: inline-block;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: rgba(74, 38, 23, 0.08);
  color: var(--marron);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.breadcrumb {
  margin-bottom: 18px;
  font-size: 0.85rem;
  color: var(--tinta-2);
}
.breadcrumb a:hover { color: var(--marron); }
.breadcrumb span[aria-hidden] { margin: 0 6px; color: var(--linea-2); }

.empty-state {
  grid-column: 1 / -1;
  padding: 48px 24px;
  text-align: center;
  color: var(--tinta-2);
  background: var(--papel);
  border-radius: var(--r-lg);
}
.empty-state__link {
  border: 0; background: none; padding: 0;
  color: var(--marron); font-weight: 600; text-decoration: underline;
}

/* ------------------------------------------------------------------ botón */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--btn-bg, var(--marron));
  color: var(--btn-fg, var(--blanco));
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: center;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease),
              box-shadow 0.25s var(--ease);
}
.btn:hover {
  background: var(--btn-bg-hover, var(--marron-osc));
  transform: translateY(-2px);
  box-shadow: 0 10px 24px var(--btn-shadow, rgba(74, 38, 23, 0.28));
}
.btn:active { transform: translateY(0); }
.btn--block { width: 100%; }
.btn--ghost {
  background: transparent;
  color: var(--marron);
  box-shadow: inset 0 0 0 1.5px var(--linea-2);
}
.btn--ghost:hover {
  background: var(--marron);
  color: var(--blanco);
  box-shadow: inset 0 0 0 1.5px var(--marron);
}
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }
.btn svg { flex: none; }

/* ----------------------------------------------------------------- campos */
.field { margin-bottom: 18px; }
.field label,
.field > label {
  display: block;
  margin-bottom: 7px;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--tinta);
}
.field .req { color: var(--rojo); }

input[type="text"], input[type="email"], input[type="tel"], input[type="search"],
input[type="password"], input[type="number"], input[type="datetime-local"],
/* `url` entró tarde y se notó: la lista es por tipos, así que el que no esté
   nombrado no se estiliza, y un campo sin ancho ni borde parece roto al lado
   de los de arriba. Lo estrenó la dirección de la web en Configuración ›
   Marca. */
input[type="url"],
select, textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1.5px solid var(--linea);
  border-radius: var(--r-sm);
  background: var(--blanco);
  font: inherit;
  font-size: 0.9rem;
  color: var(--tinta);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--tinta-3); }
input:focus, select:focus, textarea:focus {
  outline: 0;
  border-color: var(--marron);
  box-shadow: 0 0 0 3px rgba(74, 38, 23, 0.10);
}
textarea { min-height: 128px; resize: vertical; }
select { appearance: none; background-image: none; }

.field__error {
  margin: 6px 0 0;
  font-size: 0.78rem;
  color: var(--rojo);
  display: none;
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--rojo); }
.field.has-error .field__error { display: block; }

.field__hint {
  margin: 6px 0 0;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--tinta-2);
}

.check { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.check input[type="checkbox"] {
  width: 17px; height: 17px; flex: none;
  accent-color: var(--marron);
}
.check label { margin: 0; font-size: 0.85rem; font-weight: 400; }

.form-status {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: var(--r-sm);
  font-size: 0.85rem;
  display: none;
}
.form-status.is-visible { display: block; }
.form-status--err { background: rgba(179, 57, 47, 0.09); color: var(--rojo); }
.form-status--ok  { background: rgba(31, 143, 82, 0.10); color: var(--verde); }

/* ================================================================ CABECERA */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--blanco);
  border-bottom: 1px solid var(--linea);
}
/* Tres columnas y no una fila.

   Con flex, el menú se colocaba con márgenes automáticos —dos en el \`.nav\` y
   otro en \`.acciones\`— y tres automáticos se reparten el hueco a tercios: el
   menú acababa donde sobrara sitio, no en el centro. Con un logotipo ancho a
   un lado y tres iconos al otro, eso lo empujaba a la izquierda.

   Aquí las dos columnas de los lados son iguales pase lo que pase
   (\`minmax(0, 1fr)\`), así que la del medio cae en el centro de la cabecera
   aunque la marca mida el triple que los iconos. El \`0\` del minmax es lo que
   deja encoger el logotipo en vez de desbordar cuando la ventana se estrecha. */
.site-header__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  height: var(--header-h);
  width: min(100% - 40px, var(--wrap));
  margin-inline: auto;
}

.marca { display: flex; align-items: center; gap: 10px; min-width: 0; }
.marca__mark {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--marron);
  color: var(--ambar);
  font-size: 0.9rem;
  font-weight: 600;
}
.marca__nombre {
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--tinta);
  /* Antes que comerse los iconos de la derecha, el nombre se recorta. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* El catálogo con logotipo propio lo enseña entero y sin la inicial al lado:
   el logotipo ya dice el nombre, y repetirlo lo dice dos veces. Manda la
   altura —la cabecera mide 76— y el ancho lo pone la proporción del archivo.
   `object-fit` no sobra: la hoja le pone `max-width: 100%` a toda imagen, y
   en una cabecera estrecha eso estrujaría el logotipo de ancho sin bajarle
   el alto, que es la manera de que una marca salga deformada. */
.marca--logo { gap: 0; }
.marca__logo {
  display: block;
  height: 40px;
  width: auto;
  object-fit: contain;
  object-position: left center;
}

.nav { min-width: 0; }
.nav__list { display: flex; align-items: center; gap: 26px; }
.nav__link {
  position: relative;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--tinta-2);
  transition: color 0.2s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--marron);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav__link:hover { color: var(--tinta); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"] { color: var(--tinta); font-weight: 600; }

/* --------------------------------------------------------------- submenú
   Las categorías cuelgan de «Catálogo». Se abre al pasar por encima y también
   al llegar con el tabulador, que es la misma intención por otro camino.

   El puente invisible de arriba no es un adorno: entre el enlace y la lista
   hay hueco, y sin él el menú se cierra al cruzarlo con el ratón. */
.nav__it { position: relative; }
.nav__it--con-sub > .nav__link { display: inline-flex; align-items: center; gap: 6px; }
.nav__flecha { transition: transform 0.25s var(--ease); }
.nav__it--con-sub:hover .nav__flecha,
.nav__it--con-sub:focus-within .nav__flecha { transform: rotate(180deg); }

/* El envoltorio del submenú no existe aquí: `display: contents` no genera
   caja, así que el <ul> sigue colocándose en absoluto contra el `.nav__it`,
   que es el único elemento posicionado del grupo. Solo cobra cuerpo en móvil,
   donde es lo que se pliega. */
.nav__sub { display: contents; }
/* Y el botón de la flecha es solo de móvil: en escritorio abre el paso del
   ratón y un botón más en la barra sería un objetivo que nadie usa. */
.nav__desplegar { display: none; }

.submenu {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 60;
  min-width: 190px;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  box-shadow: var(--sombra);

  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 6px);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s;
}
.submenu::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -14px;
  height: 14px;
}
/* Descendiente y no hijo directo: entre el `<li>` y el `<ul>` hay ahora el
   envoltorio `.nav__sub`, que aquí es `display: contents` —no genera caja,
   pero sí cuenta como un escalón para el combinador `>`—. Con el `>` puesto,
   el desplegable de escritorio dejaba de abrirse. */
.nav__it--con-sub:hover .submenu,
.nav__it--con-sub:focus-within .submenu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.submenu__link {
  display: block;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  font-size: 0.85rem;
  color: var(--tinta-2);
  white-space: nowrap;
  /* Centrado, como la caja que los contiene: son cuatro palabras sueltas de
     largo parecido, no una lista que se recorra con el dedo por su margen. */
  text-align: center;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.submenu__link:hover { background: var(--papel); color: var(--tinta); }
/* «Todos» es el catálogo entero: va primero y separado de las secciones. */

@media (prefers-reduced-motion: reduce) {
  .submenu { transition: none; }
  .nav__flecha { transition: none; }
  .nav__sub { transition: none; }
  .nav__desplegar svg { transition: none; }
}

.acciones { display: flex; align-items: center; gap: 2px; justify-self: end; }
.acciones__btn {
  position: relative;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: none;
  color: var(--tinta);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.acciones__btn:hover { background: var(--papel); color: var(--marron); }

.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 0 9px;
  border: 0; background: none;
}
.nav-toggle span {
  display: block; height: 2px; border-radius: 2px;
  background: var(--tinta);
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==================================================================== HERO */
.hero {
  position: relative;
  background: var(--papel);
  overflow: hidden;
}

/* Los tres pases ocupan la misma celda y se cruzan con un fundido. No se
   desplazan de lado: el bloque de texto de la izquierda es lo que hay que
   leer, y verlo pasar de largo cuesta más que verlo aparecer. */
.hero__pase {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.65s var(--ease), visibility 0s linear 0.65s;
}
.hero { display: grid; }
.hero__pase.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
/* Lo que no se ve tampoco se tabula. */
.hero__pase:not(.is-active) a,
.hero__pase:not(.is-active) button { pointer-events: none; }

.hero__mandos {
  grid-area: 1 / 1;
  align-self: end;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 26px;
  pointer-events: none;
}
.hero__mandos > * { pointer-events: auto; }

.hero__flecha {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--blanco);
  color: var(--tinta);
  box-shadow: var(--sombra-sm);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.hero__flecha:hover { background: var(--marron); color: var(--blanco); }

.hero__puntitos { display: flex; gap: 7px; }
.hero__puntito {
  width: 9px; height: 9px;
  padding: 0;
  border: 0; border-radius: var(--r-pill);
  background: var(--linea-2);
  /* Solo el color se transiciona. Animar el ancho obliga al navegador a
     recalcular la maqueta sesenta veces por segundo, y a este tamaño el
     cambio de forma no se percibe: lo que se lee es el color. */
  transition: background 0.3s var(--ease);
}
.hero__puntito.is-active { width: 26px; background: var(--marron); }

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  align-items: center;
  gap: 24px;
  width: min(100% - 40px, var(--wrap));
  margin-inline: auto;
  min-height: 610px;
}

/* El hueco de abajo es de los mandos del carrusel: sin él, las flechas y los
   puntos se comían el botón. No es margen de adorno, es su sitio. */
.hero__texto { padding: 64px 0 108px; max-width: 30rem; }

.hero__oferta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 22px;
  padding: 8px 18px 8px 9px;
  border-radius: var(--r-pill);
  background: var(--blanco);
  box-shadow: var(--sombra-sm);
  font-size: 0.82rem;
  font-weight: 500;
}
.hero__oferta b { font-weight: 600; }
.hero__oferta-icono {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--marron);
  color: var(--ambar);
}

.hero__titulo {
  margin: 0 0 18px;
  font-size: clamp(1.85rem, 4.4vw, 3.05rem);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.035em;
  text-wrap: balance;
  /* Sin esto, una palabra larga se sale en vez de partirse. */
  overflow-wrap: break-word;
}
.hero__lead {
  margin: 0 0 30px;
  max-width: 38ch;
  color: var(--tinta-2);
}

/* ------------------------------------------------------- foto y adornos */
.hero__figura {
  position: relative;
  align-self: end;
  height: 100%;
  min-height: 610px;
  /* Hasta el borde de la ventana: en la referencia la foto no se detiene en
     la columna, y esa sangría es la mitad de la fuerza que tiene el hero. */
  margin-right: var(--sangra);
}
/* `<picture>` no pinta nada por sí mismo: `display: contents` lo saca de la
   maquetación para que el <img> siga siendo hijo directo de `.hero__figura`,
   que es contra quien se coloca en absoluto. Sin esto habría una caja en
   línea de por medio, y en el hero de móvil —donde la foto se estira a toda
   la sección— eso se nota. */
picture { display: contents; }

.hero__foto {
  position: absolute;
  inset: 0 0 0 auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  /* La foto se recorta con una esquina blanda arriba a la izquierda: así el
     bloque de texto respira sin necesidad de un recorte transparente, que
     una foto de catálogo real casi nunca trae. */
  border-radius: 180px 0 0 0;
}

/* La trama de puntos y el sello son del hero, no adornos genéricos: repiten
   el ámbar de la marca y anclan la esquina que la foto deja libre. */
.hero__puntos {
  position: absolute;
  width: 132px; height: 62px;
  background-image: radial-gradient(var(--linea-2) 1.6px, transparent 1.6px);
  background-size: 13px 13px;
}
.hero__puntos--arriba { top: 34px; left: 6%; }
.hero__puntos--abajo  { bottom: 26px; left: 16%; }

.hero__sello {
  position: absolute;
  right: 5%;
  top: 26%;
  width: 108px; height: 108px;
  display: grid;
  place-items: center;
}
.hero__sello-disco {
  width: 58px; height: 58px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ambar);
  color: var(--marron-osc);
  grid-area: 1 / 1;
}
.hero__sello-texto {
  grid-area: 1 / 1;
  width: 108px; height: 108px;
  animation: girar 22s linear infinite;
}
.hero__sello-texto text {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  fill: var(--marron);
  text-transform: uppercase;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ============================================================== VENTAJAS */
.ventajas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  padding: 44px 0;
}
.ventaja { display: flex; align-items: center; gap: 16px; }
.ventaja__icono {
  width: 46px; height: 46px;
  flex: none;
  display: grid; place-items: center;
  border-radius: var(--r);
  background: var(--ambar-suave);
  color: var(--ambar-osc);
}
.ventaja__titulo { margin: 0 0 2px; font-size: 0.98rem; font-weight: 600; }
.ventaja__texto { margin: 0; font-size: 0.82rem; color: var(--tinta-2); line-height: 1.5; }

/* ============================================================ CATEGORÍAS */
.categorias {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 22px;
}
.categorias__col { display: grid; gap: 22px; grid-template-rows: 1fr 1fr; }

.catcard {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  align-items: stretch;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--papel);
  isolation: isolate;
}
.catcard__cuerpo {
  position: relative;
  z-index: 2;
  padding: 30px 26px 30px 32px;
  align-self: center;
}
.catcard__items {
  display: inline-block;
  margin-bottom: 16px;
  padding: 6px 15px;
  border-radius: var(--r-pill);
  background: var(--blanco);
  font-size: 0.78rem;
  font-weight: 500;
  box-shadow: var(--sombra-sm);
}
.catcard__titulo {
  margin: 0 0 10px;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  font-weight: 600;
}
.catcard__lead {
  margin: 0 0 16px;
  overflow-wrap: anywhere;
  font-size: 0.86rem;
  color: var(--tinta-2);
}
.catcard__lista { display: grid; gap: 7px; }
.catcard__lista span {
  font-size: 0.86rem;
  color: var(--tinta-2);
  transition: color 0.2s var(--ease), transform 0.25s var(--ease);
  width: fit-content;
}
.catcard:hover .catcard__lista span { color: var(--tinta); }

.catcard__foto {
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 25%;
  transition: transform 0.6s var(--ease);
}
.catcard:hover .catcard__foto { transform: scale(1.04); }

/* La grande da más sitio al texto: es la que lleva descripción y seis
   nombres, no solo cuatro. */
.catcard--grande { min-height: 520px; grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr); }
.catcard--grande .catcard__foto { object-position: 50% 18%; }
.catcard--grande .catcard__cuerpo { padding: 38px 30px 38px 36px; }

.catcard--chica { min-height: 249px; }
.catcard--chica .catcard__cuerpo { padding: 26px 22px 26px 28px; }

/* ============================================================= PRODUCTOS */
.prod-cab {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 34px;
  flex-wrap: wrap;
}
.prod-cab__titulo { margin: 0; font-size: clamp(1.6rem, 3vw, 2.05rem); }

.filtros { display: flex; gap: 10px; flex-wrap: wrap; }
.chip {
  padding: 10px 22px;
  border: 1.5px solid var(--linea);
  border-radius: var(--r-sm);
  background: var(--blanco);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--tinta-2);
  transition: all 0.22s var(--ease);
}
.chip:hover { border-color: var(--marron); color: var(--marron); }
.chip.is-active {
  background: var(--marron);
  border-color: var(--marron);
  color: var(--blanco);
}

/* La parrilla del catálogo. En la portada el mismo listado va en carril
   horizontal (.grid-products--carril), que es como lo enseña la referencia:
   deja ver que hay más de lo que cabe. */
.grid-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 26px;
}
.grid-products--carril {
  display: grid;
  grid-auto-flow: column;
  /* Ancho FIJO, no `1fr`: con `1fr` las tarjetas se repartían el hueco y al
     filtrar por una categoría con pocas prendas crecían hasta ocupar la
     fila entera. Una prenda no cambia de tamaño porque haya menos. */
  grid-auto-columns: var(--carril-col, 262px);
  grid-template-columns: none;
  justify-content: start;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 14px;
  scrollbar-width: thin;
}
.grid-products--carril > * { scroll-snap-align: start; }

/* --------------------------------------------------------- buscador */
.catalog-search {
  position: relative;
  max-width: 420px;
  margin-bottom: 22px;
}
.catalog-search input { padding-left: 44px; }
.catalog-search__icon {
  position: absolute;
  left: 15px; top: 50%;
  transform: translateY(-50%);
  color: var(--tinta-3);
  pointer-events: none;
}

.catalog-count {
  margin: 26px 0 0;
  font-size: 0.84rem;
  color: var(--tinta-2);
}

/* ------------------------------------------------------------ paginación */
.pagination { display: flex; gap: 8px; justify-content: center; margin-top: 36px; }
.page-btn {
  min-width: 40px; height: 40px;
  padding: 0 12px;
  border: 1.5px solid var(--linea);
  border-radius: var(--r-sm);
  background: var(--blanco);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--tinta-2);
  transition: all 0.2s var(--ease);
}
.page-btn:hover:not([disabled]) { border-color: var(--marron); color: var(--marron); }
.page-btn.is-active { background: var(--marron); border-color: var(--marron); color: var(--blanco); }
.page-btn[disabled] { opacity: 0.4; cursor: default; }

/* ================================================================ REBAJA
   Una tarjeta apilada: la foto de portada arriba, a todo el ancho, y debajo
   el bloque con el titular, el texto y el botón.

   Antes eran dos columnas, foto a un lado y texto al otro. En el carril de
   varias rebajas eso deja el texto en media tarjeta —una columna de 40 ch en
   430 px— y la foto peleando con él por la atención. Apilada, la foto hace de
   portada y el texto se lee de corrido sobre fondo liso, que es de lo que se
   trata: el texto NO va encima de la foto en ningún tamaño.

   Una rebaja puede no tener foto: es el único campo que el panel deja en
   blanco. Con las filas en `auto 1fr` eso ya no necesita ninguna regla — sin
   `<img>` la primera fila no existe y la tarjeta empieza por el texto. */
.oferta {
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--papel);
  border-radius: var(--r-lg);
  overflow: hidden;
}
/* Apaisada y con tope. A lo ancho de la portada, una foto de proporción libre
   se estiraría hasta hacerse una valla de 600 px de alto, y el texto —que es
   lo que hay que leer— empezaría por debajo del pliegue. */
.oferta__foto {
  width: 100%;
  height: clamp(190px, 23vw, 300px);
  object-fit: cover;
}
.oferta__cuerpo { padding: 32px 40px 38px; }
.oferta__titulo {
  margin: 0 0 12px;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  line-height: 1.14;
}
/* Con la tarjeta entera de ancho, el texto necesita medida propia o se
   convierte en un renglón de 120 caracteres que nadie sigue. */
.oferta__lead { margin: 0; max-width: 62ch; color: var(--tinta-2); }
.oferta__cuerpo .btn { margin-top: 24px; }

/* ============================================================== CATÁLOGO */

.cat-cab { padding-bottom: 26px; }
.cat-cab__titulo {
  margin: 0 0 8px;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  letter-spacing: -0.03em;
}
.cat-cab__lead { margin: 0; max-width: 58ch; color: var(--tinta-2); }

/* La columna de filtros a la izquierda y la lista a la derecha. Se queda
   pegada al desplazarse: con cinco criterios, perderlos de vista al bajar
   obliga a subir cada vez que se quiere cambiar uno. */
.cat-layout {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.cat-filtros { position: sticky; top: calc(var(--header-h) + 20px); }
.cat-filtros__cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--linea);
}
.cat-filtros__titulo { margin: 0; font-size: 1rem; font-weight: 600; }
.cat-filtros__limpiar {
  border: 0; background: none; padding: 0;
  color: var(--marron);
  font-size: 0.78rem;
  font-weight: 500;
  text-decoration: underline;
}
.cat-filtros__limpiar[hidden] { display: none; }

.cat-grupo { margin-bottom: 26px; }
.cat-grupo__titulo {
  margin: 0 0 11px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-2);
}

.cat-lista { display: grid; gap: 2px; }
.cat-lista__btn {
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  text-align: left;
  font-size: 0.88rem;
  color: var(--tinta-2);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.cat-lista__btn:hover { background: var(--papel); color: var(--tinta); }
.cat-lista__btn.is-active {
  background: var(--marron);
  color: var(--blanco);
  font-weight: 500;
}

.cat-tallas { display: flex; flex-wrap: wrap; gap: 7px; }
.cat-talla { cursor: pointer; }
.cat-talla input { position: absolute; opacity: 0; pointer-events: none; }
.cat-talla span {
  display: grid;
  place-items: center;
  min-width: 42px;
  padding: 8px 10px;
  border: 1.5px solid var(--linea);
  border-radius: var(--r-sm);
  font-size: 0.82rem;
  transition: all 0.2s var(--ease);
}
.cat-talla input:checked + span {
  border-color: var(--marron);
  background: var(--marron);
  color: var(--blanco);
}
.cat-talla input:focus-visible + span { outline: 3px solid var(--marron); outline-offset: 2px; }

/* ------------------------------------------------------ rango de precio
   Dos <input type=range> superpuestos sobre un riel dibujado aparte. Los
   nativos se quedan transparentes y solo se ven sus mandos, de modo que el
   control sigue siendo accesible con teclado sin renunciar al aspecto. */
.rango { position: relative; height: 32px; margin-bottom: 6px; }
.rango__riel {
  position: absolute;
  left: 0; right: 0; top: 14px;
  height: 4px;
  border-radius: 2px;
  background: var(--linea);
}
.rango__tramo {
  position: absolute;
  top: 0; bottom: 0;
  border-radius: 2px;
  background: var(--marron);
}
.rango input[type="range"] {
  position: absolute;
  left: 0; top: 8px;
  width: 100%;
  height: 16px;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  appearance: none;
  pointer-events: none;
}
.rango input[type="range"]:focus { box-shadow: none; }
.rango input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 3px solid var(--marron);
  background: var(--blanco);
  cursor: grab;
  pointer-events: auto;
}
.rango input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 3px solid var(--marron);
  background: var(--blanco);
  cursor: grab;
  pointer-events: auto;
}
.rango input[type="range"]:focus-visible::-webkit-slider-thumb {
  outline: 3px solid var(--marron); outline-offset: 2px;
}
.rango__valor {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------- barra de lista */
.cat-barra {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.cat-barra .catalog-search { margin: 0; flex: 1 1 260px; }

/* Pegado a la derecha. El buscador tiene ancho máximo y no llega al borde,
   así que sin este margen el selector se quedaba a su lado, en medio de la
   fila, como si fuera parte de la búsqueda. */
.cat-orden {
  position: relative;
  flex: none;
  margin-left: auto;
}
.cat-orden select {
  width: auto;
  min-width: 218px;
  padding: 12px 38px 12px 42px;
  cursor: pointer;
}
.cat-orden__icono,
.cat-orden__flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--tinta-2);
  pointer-events: none;
}
.cat-orden__icono { left: 14px; }
.cat-orden__flecha { right: 13px; }
.cat-orden:hover .cat-orden__icono,
.cat-orden:hover .cat-orden__flecha { color: var(--marron); }

.cat-filtros-abrir { display: none; }

@media (max-width: 900px) {
  .cat-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }

  /* En pantalla estrecha los filtros se pliegan tras un botón: en columna
     ocuparían la primera pantalla entera antes de enseñar una sola prenda. */
  .cat-filtros-abrir {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    padding: 11px 20px;
    border: 1.5px solid var(--linea);
    border-radius: var(--r-sm);
    background: var(--blanco);
    font-size: 0.85rem;
    font-weight: 500;
  }
  /* El plegado va sobre UN solo hijo: `grid-template-rows: 0fr` colapsa la
     primera fila, así que con un grupo por fila los demás se quedaban a la
     vista. Envolviéndolos, la rejilla tiene una fila y se cierra entera. */
  .cat-filtros {
    position: static;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.34s var(--ease);
  }
  .cat-filtros__dentro { overflow: hidden; min-height: 0; }
  .cat-filtros.is-open {
    grid-template-rows: 1fr;
    margin-bottom: 28px;
    border-bottom: 1px solid var(--linea);
  }
  .cat-filtros.is-open .cat-filtros__dentro { padding-bottom: 12px; }
}


@media (max-width: 860px) {
}

/* ================================================================= PIE */
.site-footer {
  margin-top: 96px;
  padding: 64px 0 0;
  background: var(--marron-osc);
  color: rgba(255, 255, 255, 0.78);
}
/* Las columnas del pie no son cuatro fijas: el bloque de la tienda no se
   pinta si el sitio no tiene dirección ni horario, y con `repeat(3, 1fr)` su
   hueco se quedaba abierto a la derecha. Así la marca manda y el resto se
   reparten lo que quede, sean dos o tres. */
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 40px;
  padding-bottom: 48px;
}
.marca--pie { margin-bottom: 16px; }
.marca--pie .marca__mark { background: var(--ambar); color: var(--marron-osc); }
.marca--pie .marca__nombre { color: var(--blanco); }
.footer__about { max-width: 34ch; font-size: 0.86rem; line-height: 1.7; }
.footer__heading {
  margin: 0 0 14px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ambar);
}
.footer__list { display: grid; gap: 9px; font-size: 0.86rem; }
.footer__list a { transition: color 0.2s var(--ease); }
.footer__list a:hover { color: var(--blanco); }

.footer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  font-size: 0.8rem;
  flex-wrap: wrap;
}
.footer__bar p { margin: 0; }
/* La firma del que lo ha hecho: apagada, que es una firma y no un anuncio.
   Se enciende al pasar por encima para que se vea que lleva a algún sitio. */
.footer__autor a { color: inherit; transition: color 0.2s var(--ease); }
.footer__autor a:hover { color: var(--ambar); }
.footer__socials { display: flex; gap: 10px; }
.footer__socials a {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.09);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.footer__socials a:hover { background: var(--ambar); color: var(--marron-osc); }

/* ---------------------------------------------------------- volver arriba */
.to-top {
  position: fixed;
  right: 22px; bottom: 92px;
  z-index: 55;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--marron);
  color: var(--blanco);
  opacity: 0; visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }

/* ------------------------------------------------------------------ toast */
.toast {
  position: fixed;
  left: 50%; bottom: 26px;
  z-index: 300;
  transform: translate(-50%, 14px);
  padding: 13px 22px;
  border-radius: var(--r);
  background: var(--marron-osc);
  color: var(--blanco);
  font-size: 0.85rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
}
.toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.toast--err { background: var(--rojo); }

.no-scroll { overflow: hidden; }

/* ==================================================== la entrada del hero
   El único momento coreografiado del sitio: al cargar, el bloque de texto
   se coloca por partes con la misma curva. No hay una segunda animación de
   entrada repetida sección a sección. */
@keyframes subir {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.hero__texto > * { animation: subir 0.7s var(--ease) backwards; }
.hero__texto > *:nth-child(1) { animation-delay: 0.05s; }
.hero__texto > *:nth-child(2) { animation-delay: 0.13s; }
.hero__texto > *:nth-child(3) { animation-delay: 0.21s; }
.hero__texto > *:nth-child(4) { animation-delay: 0.29s; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}


/* ================================================ EL HERO EN MÓVIL Y TABLET

   Aquí el hero deja de ser dos columnas y pasa a ser LA FOTO, con el texto
   encima. No es solo que en una pantalla estrecha no quepan dos columnas: en
   un teléfono la foto es el argumento de venta, y relegarla a un bloque de
   380 px debajo del texto la convierte en una ilustración.

   El velo oscuro de abajo no es un adorno: el texto va en blanco y las fotos
   del hero cambian. Sin él, un pase con una foto clara dejaría el titular
   ilegible, y eso no se puede dejar al azar de qué foto toque.

   El alto es `min(72vh, 560px)`: el 72 % deja ver que abajo sigue habiendo
   página —si ocupara la pantalla entera nadie sabría que hay más— y el tope
   en píxeles evita que en una tablet apaisada el hero se estire hasta hacerse
   una valla publicitaria. */
@media (max-width: 1020px) {
  .hero__inner {
    display: block;
    position: relative;
    width: 100%;
    min-height: 0;
  }

  .hero__figura {
    position: absolute;
    inset: 0;
    z-index: 1;
    margin: 0;
    width: auto;
    min-height: 0;
  }
  .hero__foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
  }
  /* El velo. De abajo arriba, porque es abajo donde va el texto. */
  .hero__figura::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to top,
      rgba(20, 16, 11, 0.88) 0%,
      rgba(20, 16, 11, 0.74) 40%,
      rgba(20, 16, 11, 0.42) 68%,
      rgba(20, 16, 11, 0.06) 92%,
      rgba(20, 16, 11, 0) 100%
    );
  }
  /* La trama de puntos y el sello sobran: compiten con el texto que ahora
     está encima de la foto, no al lado. */
  .hero__puntos, .hero__sello { display: none; }

  .hero__texto {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: min(72vh, 560px);
    width: min(100% - 40px, var(--wrap));
    margin-inline: auto;
    /* El hueco de abajo es de los puntos del carrusel. */
    padding: 96px 0 78px;
    max-width: none;
    color: #fff;
  }
  .hero__titulo { color: #fff; }
  .hero__lead {
    color: rgba(255, 255, 255, 0.86);
    margin-bottom: 22px;
    max-width: 32ch;
  }
  /* La píldora deja de ser una tarjeta blanca y pasa a ser cristal: sobre una
     foto, un rectángulo blanco macizo tapa justo lo que se quiere enseñar. */
  .hero__oferta {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    box-shadow: none;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .hero__oferta-icono { background: #fff; color: var(--marron); }

  /* El botón se invierte: el de marca es casi negro y sobre el velo oscuro
     desaparecería. */
  .hero__texto .btn {
    align-self: flex-start;
    background: #fff;
    color: var(--marron-osc);
  }
  .hero__texto .btn:hover { background: rgba(255, 255, 255, 0.88); }

  /* Los mandos, al pie de la foto y por encima del velo. */
  .hero__mandos {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 3;
    width: min(100% - 40px, var(--wrap));
    margin-inline: auto;
    padding-bottom: 24px;
  }
  /* Las flechas sobran donde se arrastra con el dedo: quedan los puntos, que
     además dicen cuántos pases hay. */
  .hero__flecha { display: none; }
}
/* ============================================ AJUSTES DE MÓVIL Y TABLET
   Lo que en escritorio funciona y en un teléfono estorba. Va después del
   bloque del hero para poder pisarlo. */
@media (max-width: 1020px) {
  /* El hero, más alto y sin tope: en un teléfono la foto es el argumento de
     venta y 560 px la dejaban a media asta. El 70 % sigue dejando ver que
     abajo hay más página, que es lo que ese margen compra. */
  .hero__texto { min-height: 70vh; }

  /* Las flechas vuelven. Se arrastra con el dedo, sí, pero eso hay que
     descubrirlo: dos flechas dicen «esto se mueve» sin que nadie lo intente,
     y los puntos solos no lo dicen. */
  .hero__flecha {
    display: grid;
    width: 38px; height: 38px;
    background: rgba(255, 255, 255, 0.92);
  }
  .hero__mandos { gap: 10px; }

  /* ------------------------------------------------- respiro entre secciones
     En un teléfono la portada entera es una pila de `.section--tight`, así
     que el hueco entre dos secciones es la suma de sus dos rellenos: con 60
     px cada uno eran 120 px de blanco entre «Productos destacados» y
     «Últimas colecciones». Más separación que en escritorio, y en la
     pantalla donde menos sitio hay.

     Venía de que la regla de ≤860 px decía `.section { padding: 60px 0 }` y
     eso pisaba a `.section--tight` —misma especificidad, y va después—, así
     que la clase que existe para apretar no apretaba nada. Aquí se declaran
     las dos, en este orden, y la de la variante gana por ir la última. */
  .section { padding: 48px 0; }
  .section--tight { padding: 22px 0; }

  /* Fuera la tira de ventajas: son tres frases de servicio y en un teléfono
     se comían la pantalla entera entre el hero y el primer producto. Quien
     entra viene a ver ropa. */
  .ventajas { display: none; }


  /* ------------------------------------------- categorías en carril
     De columna a carril horizontal: apiladas ocupaban tres pantallas para
     decir tres palabras. Arrastrando se ven las tres de una vez y se sabe
     que hay más a la derecha. La grande deja de serlo — en un carril, una
     tarjeta del doble de alto solo descuadra la fila. */
  .categorias {
    display: grid;
    /* `none` y no heredar: la regla de escritorio deja dos columnas de 1fr
       declaradas, y en un carril que desborda esas dos se resolvían a CERO —
       la primera tarjeta salía con 0 px de ancho y la categoría desaparecía.
       Aquí todas las columnas tienen que ser implícitas. */
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 74%;
    align-items: start;
    gap: 14px;
    /* Sangra a los dos lados para que el carril empiece en el borde de la
       pantalla y se vea que continúa. */
    margin-inline: var(--sangra);
    padding-inline: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .categorias::-webkit-scrollbar { display: none; }
  /* Las paradas del carril son las TARJETAS, no los hijos directos.
     `.categorias > *` parecía lo mismo y no lo era: el segundo hijo es
     `.categorias__col`, que aquí abajo es `display: contents` y por tanto no
     tiene caja — no puede ser parada de nada. Quedaba una sola parada válida,
     la primera tarjeta, y con `scroll-snap-type: mandatory` el navegador está
     obligado a acabar en una: se arrastraba y el carril volvía solo al
     principio. Parecía que no se movía, y en realidad se movía y regresaba. */
  .categorias .catcard { scroll-snap-align: start; }
  /* La columna de la derecha deja de ser una columna: sus dos tarjetas pasan
     a ser dos paradas más del carril. */
  /* La columna de la derecha deja de ser columna: sus dos tarjetas pasan a
     ser dos paradas más del carril. */
  .categorias__col { display: contents; }

  /* Y la tarjeta se apila: foto arriba y texto debajo. De lado no cabe —son
     dos columnas dentro de 260 px— y el texto se quedaba sin ancho. El orden
     se invierte con la rejilla y no en el HTML porque en escritorio el texto
     va primero a propósito: es lo que lee un buscador antes que la imagen. */
  /* `align-items: start` en el carril y `height: auto` en la tarjeta: sin
     los dos, la fila del carril le daba a la tarjeta el alto de la foto y el
     bloque de texto —que va debajo— se quedaba recortado por el
     `overflow: hidden` de la propia tarjeta. Se veía la foto y nada más. */
  .catcard, .catcard--grande, .catcard--chica {
    min-height: 0;
    height: auto;
    aspect-ratio: auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
  }
  .catcard__foto { grid-row: 1; aspect-ratio: 4 / 3; height: auto; }
  .catcard__cuerpo,
  .catcard--grande .catcard__cuerpo,
  .catcard--chica .catcard__cuerpo { grid-row: 2; padding: 16px 18px 20px; }

  /* En una tarjeta de carril sobran la descripción y la lista de prendas: lo
     que hace falta saber es qué sección es y cuánto tiene. Lo demás está a un
     toque, dentro. */
  .catcard__lead, .catcard__lista { display: none; }
  .catcard__items { margin-bottom: 10px; }

  /* El «Ver más» se quedaba solo en la línea de abajo: el titular ocupaba
     el ancho entero y empujaba. Dejándolo encoger, parte su propio texto y el
     enlace se queda a su lado, que es donde se busca. */
  .prod-cab { align-items: baseline; gap: 12px; margin-bottom: 22px; }
  /* `flex: 1 1 0` y no solo `min-width: 0`. Con `flex-wrap: wrap` en el
     padre, el navegador reparte por el tamaño de CONTENIDO de cada hijo antes
     de encoger a nadie: «Categorías destacadas» pedía más ancho del que hay y
     el «Ver más» se caía a la línea de abajo, a la izquierda, como si fuera
     otra cosa. Con base 0 el titular siempre cabe, parte su propio texto y el
     enlace se queda a su lado. La fila de pestañas —que en móvil va al 100 %—
     sigue bajando a su propia línea, que es lo que tiene que hacer. */
  .prod-cab__titulo { min-width: 0; flex: 1 1 0; }

  /* ------------------------------------------------- la barra del catálogo
     El buscador entero en su línea y, debajo, filtros y orden juntos: son
     las dos maneras de recortar la lista y se buscan a la vez. */
  .cat-barra { display: grid; gap: 10px; }
  /* `grid-column: 1 / -1` y no solo `width: 100%`: la barra es una rejilla
     de dos columnas —filtros y orden van debajo, una en cada una— y sin
     esto el buscador se quedaba en la primera, a media anchura. */
  .cat-barra .catalog-search {
    grid-column: 1 / -1;
    flex: none;
    max-width: none;
    width: 100%;
  }
  .cat-barra { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cat-barra .cat-filtros-abrir,
  .cat-barra .cat-orden {
    grid-row: 2;
    margin: 0;
    width: 100%;
  }
  .cat-barra .cat-filtros-abrir { grid-column: 1; }
  .cat-barra .cat-orden { grid-column: 2; }
  .cat-barra .cat-orden select { width: 100%; min-width: 0; }
  .cat-barra .cat-filtros-abrir { justify-content: center; }
}
/* ============================================================== RESPONSIVE */
@media (max-width: 1020px) {


  /* La tarjeta ya está apilada de serie; en un teléfono solo se aprieta. */
  .oferta__cuerpo { padding: 26px 24px 30px; }
  .oferta__foto { height: 210px; }

  .footer__grid { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }

  /* La barra de abajo, en columna y centrada: el copyright en su renglón, la
     firma en el suyo y las redes debajo. En fila, los tres se repartían el
     ancho de un teléfono y el copyright partía por la mitad — y con
     `space-between` acababan pegados a los bordes, que es donde peor se leen
     dos líneas cortas. */
  .footer__bar {
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    text-align: center;
  }
  /* En el HTML las redes van en medio, que es lo que en escritorio empuja la
     firma contra el borde derecho. Apiladas eso las metería ENTRE las dos
     líneas de texto, y lo que se pide es el copyright y la firma seguidos, uno
     debajo del otro. `order` lo arregla sin tocar el marcado. */
  .footer__socials { order: 3; }
}

@media (max-width: 860px) {
  /* El menú pasa a ser un panel absoluto colgado de la cabecera, así que sale
     de la rejilla y las tres columnas dejan de tener sentido: aquí la barra
     vuelve a ser una fila con la marca, el botón y los iconos. */
  .site-header__inner { display: flex; }
  .acciones { margin-left: auto; }
  .nav-toggle { display: flex; }
  .nav {
    position: absolute;
    left: 0; right: 0; top: var(--header-h);
    margin: 0;
    background: var(--blanco);
    border-bottom: 1px solid var(--linea);
    box-shadow: var(--sombra);
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows 0.34s var(--ease), visibility 0.34s;
  }
  .nav.is-open { grid-template-rows: 1fr; visibility: visible; }
  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    overflow: hidden;
    width: min(100% - 40px, var(--wrap));
    margin-inline: auto;
  }
  /* El menú desplegado es una lista de destinos que se pulsan con el pulgar,
     no una barra de navegación encogida: cada entrada es un renglón entero,
     centrado y de 58 px de alto — por encima de los 48 que pide un objetivo
     táctil, y con una línea entre medias que dice dónde acaba uno y empieza
     el siguiente.

     `display: flex` no es un capricho de maquetación: **es lo que hace que lo
     demás funcione**. El `<a>` era `display: inline`, y en un elemento en
     línea el relleno vertical no abre hueco ninguno y `text-align` no centra
     nada —centra el contenido DE una caja, y ahí la caja se ajustaba al
     texto—. «Inicio» medía 46 px de ancho pegado a la izquierda dentro de un
     renglón de 350, y el `<li>` entero medía 29 px de alto en lugar de los 59
     que aparentaba. Con caja de bloque, el relleno y el centrado son de
     verdad. Se nombra también el selector de «Catálogo» porque ese lo pone
     `inline-flex` con más especificidad que `.nav__link` a secas. */
  .nav__link,
  .nav__it--con-sub > .nav__link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    /* Sitio a los lados para la flecha, que va superpuesta a la derecha: sin
       él, un nombre largo se le metería debajo. */
    padding: 0 56px;
    border-bottom: 1px solid var(--linea);
    font-size: 1.05rem;
    text-align: center;
  }
  .nav__link::after { display: none; }
  /* La flechita de dentro del enlace es la de escritorio y aquí sobra: su
     trabajo lo hace el botón, que sí se puede tocar sin navegar. */
  .nav__flecha { display: none; }

  /* -------------------------------------------------- desplegar categorías
     Ocupa el alto entero del renglón y se pega a la derecha, superpuesto: así
     el nombre de la sección se queda centrado de verdad, igual que el de las
     que no tienen categorías dentro. Si el botón fuera un hermano en la fila,
     «Catálogo» quedaría descentrado respecto a «Inicio» — y descentrado por
     una cantidad que depende del ancho de la flecha. */
  .nav__desplegar {
    position: absolute;
    top: 0; right: 0;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 58px; height: 58px;
    border: 0;
    background: none;
    color: var(--tinta-2);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .nav__desplegar svg { transition: transform 0.25s var(--ease); }
  .nav__it.is-open > .nav__desplegar { color: var(--tinta); }
  .nav__it.is-open > .nav__desplegar svg { transform: rotate(180deg); }

  /* ------------------------------------------------ el acordeón en sí
     Mismo truco de rejilla que el menú entero: la fila pasa de 0fr a 1fr y el
     contenido se recorta mientras tanto. Es la única manera de animar «de
     cero a lo que mida» sin escribir una altura a mano que se quedaría corta
     en cuanto haya una categoría más. */
  .nav__sub {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s var(--ease);
  }
  .nav__it.is-open > .nav__sub { grid-template-rows: 1fr; }

  /* Sin ratón no hay «pasar por encima»: las categorías se despliegan con la
     flecha y quedan dentro del menú, centradas como todo lo demás. */
  .submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    /* Un fondo apenas más oscuro es lo que dice «esto está DENTRO de
       Catálogo». Antes lo decía una sangría a la izquierda, que con el resto
       del menú centrado dejaba las categorías descolgadas hacia un lado. */
    background: var(--papel);
    /* `min-height: 0` y `overflow: hidden` son los dos imprescindibles del
       truco de 0fr: sin ellos el contenido se niega a encogerse por debajo de
       su tamaño mínimo y el acordeón no cierra. */
    min-height: 0;
    overflow: hidden;
    /* Un suelo para el bloque sombreado. Sin él la última categoría acababa
       exactamente en el borde del panel —medido: la fila cierra en 418 y el
       menú en 419— y aunque no falte un píxel, a ras se lee como una lista
       cortada por la mitad. Va dentro del elemento que se pliega, así que se
       anima con él. */
    padding-bottom: 10px;
  }
  .submenu::before { display: none; }
  .submenu__link {
    padding: 15px 0;
    border-radius: 0;
    font-size: 0.95rem;
    text-align: center;
    color: var(--tinta-2);
    white-space: normal;
  }
  .submenu li + li .submenu__link { border-top: 1px solid var(--linea); }

  /* Y ESTO no es opcional: las reglas de hover del escritorio siguen vivas
     aquí. `.nav__it--con-sub:hover .submenu` vale (0,3,0) y le gana al
     `.submenu` de este bloque, que vale (0,1,0) — una media query no suma
     especificidad. El resultado era que al pasar el dedo por «Catálogo» el
     desplegable entero se desplazaba media anchura de golpe. */
  .nav__it--con-sub:hover .submenu,
  .nav__it--con-sub:focus-within .submenu { transform: none; }

  /* Los tres iconos, separados y más grandes. Estaban a 2 px el carrito del
     icono de cuenta y a 4 px de la hamburguesa, con 34 px de lado: tres
     objetivos táctiles pegados en la esquina superior derecha, donde el pulgar
     llega peor y con menos precisión. Ahora son 40 px con 10 y 12 de aire, y
     siguen cabiendo de sobra — a 390 px el logotipo acaba en 202 y los tres
     empiezan en 228. */
  .site-header__inner { gap: 12px; }
  .marca { gap: 8px; }
  .marca__nombre { font-size: 1rem; }
  .acciones { gap: 10px; }
  .acciones__btn { width: 40px; height: 40px; }
  .nav-toggle { width: 40px; height: 40px; padding: 0 8px; }

  /* En un teléfono no caben la marca y cuatro iconos sin recortar algo. Se
     va la lupa: buscar ya está dentro del catálogo, con un campo de verdad,
     y el carrito y la cuenta no se pueden perder. */
  .acciones__btn--buscar { display: none; }

  /* Equilibrar líneas necesita sitio: en un teléfono alarga la primera hasta
     salirse. Aquí manda el ancho. */
  .hero__titulo { text-wrap: normal; font-size: clamp(1.7rem, 8.2vw, 2.4rem); }

  /* Orden en pantalla estrecha: marca a la izquierda, y a la derecha los
     iconos y el botón del menú, por ese orden. Sin fijarlo, el botón se
     queda en medio y empuja los iconos fuera de la pantalla. */
  .marca      { order: 1; margin-right: auto; }
  .acciones   { order: 2; margin-left: 0; }
  .nav-toggle { order: 3; margin-left: 0; }

  /* El relleno de las secciones lo fija el bloque de ≤1020 px, que distingue
     `.section` de `.section--tight`. Aquí había un `.section { padding: 60px 0 }`
     que lo pisaba y dejaba las dos iguales. */
  /* Las pestañas no se parten en dos filas ni se cortan: se arrastran, que
     es lo que se espera de una fila de filtros en un teléfono. */
  .filtros {
    flex-wrap: nowrap;
    overflow-x: auto;
    width: 100%;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .filtros::-webkit-scrollbar { display: none; }
  .chip { flex: none; }
}

@media (max-width: 560px) {
  :root { --carril-col: 74vw; }
  /* Solo la FOTO. Esta regla nombraba también a `.catcard`, así que le
     ponía 190 px de alto a la tarjeta entera y su bloque de texto quedaba
     recortado por el `overflow: hidden` — se veía la foto y nada más. */
  .catcard__foto { grid-row: 1; height: 190px; }
  .catcard__cuerpo { grid-row: 2; padding: 24px 22px 26px; }

  .footer__grid { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
  .hero__sello { width: 84px; height: 84px; }
  .hero__sello-texto { width: 84px; height: 84px; }
  .hero__sello-disco { width: 46px; height: 46px; }
}