/* ==========================================================================
   Blossie — hoja de estilos del sitio

   Paleta sacada del logotipo: un negro cálido de tinta y un dorado apagado.
   El negro hace de tinta de marca (botones, cabecera, pestaña activa) y el
   dorado 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.

   Los nombres de las variables se quedan como estaban —--marron, --ambar—
   aunque el marrón ya sea casi negro: los leen retail.css y admin.css, que
   son del motor y sirven a todos los catálogos. Renombrarlos aquí obligaría
   a renombrarlos allí, y allí no significan un color concreto sino un papel:
   la tinta de la marca y el acento.

   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:      #261e14;   /* la tinta de la marca: el negro del logotipo */
  --marron-osc:  #171009;
  --marron-claro:#574835;

  --ambar:       #b1a287;   /* el dorado del logotipo: el acento */
  --ambar-osc:   #7c6a4b;   /* el mismo, ya legible sobre blanco (5,2:1) */
  --ambar-suave: #f4f0e8;

  --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"],
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); }

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

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

/* ================================================================ OFERTA */
.oferta {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
  align-items: stretch;
  background: var(--papel);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.oferta__foto { width: 100%; height: 100%; min-height: 380px; object-fit: cover; }
.oferta__cuerpo { padding: 56px 56px 56px 48px; align-self: center; }
.oferta__titulo {
  margin: 0 0 14px;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  line-height: 1.12;
}
.oferta__lead { max-width: 42ch; color: var(--tinta-2); }
.oferta__nota {
  margin: 22px 0 0;
  font-size: 0.78rem;
  color: var(--tinta-2);
}

/* ============================================================== 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; }
}

/* ============================================================ CTA TALLER */
.cta-taller {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  padding: 46px 48px;
  border-radius: var(--r-lg);
  background: var(--marron-osc);
  color: rgba(255, 255, 255, 0.82);
}
.cta-taller__titulo {
  margin: 0 0 10px;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  color: var(--blanco);
}
.cta-taller__lead { margin: 0; max-width: 46ch; }
.cta-taller__puntos { display: grid; gap: 12px; }
.cta-taller__puntos li {
  position: relative;
  padding-left: 26px;
  font-size: 0.9rem;
}
.cta-taller__puntos li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ambar);
}

@media (max-width: 860px) {
  .cta-taller { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 34px 26px; }
}

/* ================================================================= 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; }
.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; }

  /* 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; }

  /* Y fuera el banner del taller, por lo mismo: es un argumento largo en
     mitad de un catálogo que se recorre con el pulgar. */
  .cta-taller { 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; }
  .categorias > * { 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; }
  .prod-cab__titulo { min-width: 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) {


  .oferta { grid-template-columns: minmax(0, 1fr); }
  .oferta__cuerpo { padding: 36px 28px 40px; }
  .oferta__foto { min-height: 280px; }

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

@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;
  }
  .nav__link {
    padding: 15px 0;
    border-bottom: 1px solid var(--linea);
    font-size: 0.95rem;
  }
  .nav__link::after { display: none; }

  /* Sin ratón no hay «pasar por encima»: las categorías se quedan a la vista
     dentro del menú, sangradas bajo Catálogo. */
  .submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    min-width: 0;
    padding: 0 0 10px 14px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: none;
  }
  .submenu::before { display: none; }
  /* En móvil el desplegable deja de ser una caja y pasa a ser una lista
     sangrada dentro del menú: ahí el texto vuelve a la izquierda, alineado
     con Inicio y Catálogo. Centrado quedaría flotando en mitad de nada. */
  .submenu__link { padding: 11px 0; font-size: 0.88rem; text-align: left; }
  .nav__flecha { display: none; }

  .site-header__inner { gap: 4px; }
  .marca { gap: 8px; }
  .marca__nombre { font-size: 1rem; }
  .acciones__btn { width: 34px; height: 34px; }
  .nav-toggle { width: 36px; padding: 0 7px; }

  /* 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; }

  .section { padding: 60px 0; }
  /* 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; }
}