/* =====================================================================
   KLØA — Sistema de diseño
   Adanola (80%) + Lamborghini (20%)
   =====================================================================

   La mezcla, en una frase: un lookbook editorial impreso en papel blanco,
   interrumpido por dos o tres planos oscuros a sangría.

   De ADANOLA viene la estructura: blanco dominante, hairlines de 1px en vez
   de bordes gruesos, cero sombras, y la fotografía del producto como único
   elemento con color. La interfaz casi desaparece.

   De LAMBORGHINI vienen tres cosas, y sólo tres:
     1. Las mayúsculas con tracking amplio en títulos y navegación.
     2. Los planos oscuros a sangría, reservados al hero y a una franja
        editorial. No alternados por toda la página: eso es showroom de autos,
        no tienda de ropa.
     3. Un único color de acento, usado con avaricia.

   REGLAS QUE NO SE ROMPEN
   · Radio 0 en todo lo que contenga imagen o contenido. 4px sólo en botones.
   · Ni una sombra. La jerarquía se hace con espacio y con hairlines.
   · El acento no se usa para decorar. Sólo marca: descuento, últimas piezas,
     y el contador del carrito. Si aparece en cuatro lugares de la misma
     pantalla, deja de significar algo.
   ===================================================================== */

/* =====================================================================
   1. TOKENS
   ===================================================================== */
:root {
  /* ---- Superficies ---- */
  --papel:        #ffffff;   /* lienzo dominante */
  --marmol:       #f5f5f5;   /* banda alterna entre secciones */
  --niebla:       #f0efe7;   /* crema editorial, secciones cálidas */

  /* ---- Tinta ---- */
  --carbon:       #000000;   /* texto principal, botones llenos */
  --carbon-suave: #202020;   /* planos oscuros a sangría */
  --grafito:      #494949;   /* texto secundario */
  --acero:        #7d7d7d;   /* texto terciario, metadatos */
  --ceniza:       #cccccc;   /* bordes de campos, estados inactivos */

  /* ---- Hairline ----
     Un solo token para TODAS las divisiones. Que sea el mismo gris en el
     header, en las tarjetas y en el pie es lo que da la sensación de rejilla
     editorial impresa en vez de interfaz armada por partes. */
  --linea:        #e5e5e5;
  --linea-oscura: #2e2e2e;   /* la misma idea sobre fondo negro */

  /* ---- Acento ----
     Rosa fucsia KLØA (#E36DAF · Pantone 218 C aprox.): entre el rosa coral
     original y el fucsia de Valentino. Antes: bermellón. Se eligió un tono vivo y no el amarillo de Lamborghini
     porque sobre blanco el amarillo pierde contraste y deja de leerse; el
     bermellón mantiene la energía y sigue siendo legible en texto pequeño. */
  --acento:       #e36daf;
  --acento-fondo: #fcf0f6;

  /* ---- Semántica mínima ---- */
  --exito:        #0f7a3d;
  --alerta:       #b45309;

  /* ---- Tipografía ----
     Inter es el sustituto abierto de Favorit (la tipografía de Adanola).
     Se usan pesos 300–500 nada más: el sistema consigue jerarquía por ESCALA
     y por tracking, nunca por negritas. Un 700 aquí rompe la línea entera. */
  --fuente: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ---- Tracking ----
     La firma visual del sistema. Los títulos van en mayúsculas con estas
     separaciones; sin ellas, las mayúsculas se ven apretadas y baratas. */
  --track-display: 0.18em;
  --track-titulo:  0.14em;
  --track-etiqueta:0.22em;
  --track-cuerpo:  0.025em;

  /* ---- Ritmo ----
     Base de 4px. Los saltos grandes (--e12, --e16) son los que crean el aire
     editorial; usar --e6 donde va --e12 hace que la página se sienta apretada
     aunque todo lo demás esté bien. */
  --e1: 4px;   --e2: 8px;   --e3: 12px;  --e4: 16px;
  --e6: 24px;  --e8: 32px;  --e12: 48px; --e16: 64px;
  --e20: 80px; --e24: 96px; --e32: 128px;

  /* ---- Contenedor ---- */
  --ancho-max: 1440px;
  --margen-lateral: var(--e6);

  /* ---- Movimiento ----
     Lento y sin rebote. Las transiciones elásticas son de app, no de
     editorial impreso. */
  --transicion: 400ms cubic-bezier(0.22, 1, 0.36, 1);
  --transicion-rapida: 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 768px) {
  :root { --margen-lateral: var(--e12); }
}

/* =====================================================================
   2. BASE
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { 
  display: none !important; 
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Red de seguridad: nada puede ensanchar la página en el celular. `clip` (y no
   `hidden`) para no romper los encabezados `position: sticky`. */
html, body { max-width: 100%; overflow-x: clip; }
.fila-scroll { min-width: 0; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--carbon);
  font-family: var(--fuente);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: var(--track-cuerpo);
  font-feature-settings: "ss01" on, "cv11" on;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; }
/* Safari en iPhone pinta el texto de los <button> en AZUL si no se le da color:
   por eso las categorías y tallas se veían azules en el celular. */
button { font-family: inherit; letter-spacing: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }


/* Foco visible y cuadrado: coherente con el radio 0 del sistema.
   Quitar el outline sin reemplazarlo deja la tienda inutilizable con teclado. */
:focus-visible {
  outline: 2px solid var(--carbon);
  outline-offset: 3px;
}

::selection { background: var(--carbon); color: var(--papel); }

/* =====================================================================
   3. TIPOGRAFÍA
   ===================================================================== */
.display {
  font-size: clamp(2.25rem, 7vw, 5.5rem);
  font-weight: 300;
  line-height: 0.96;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  margin: 0;
}

.titulo {
  font-size: clamp(1.125rem, 2.2vw, 1.75rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: var(--track-titulo);
  text-transform: uppercase;
  margin: 0;
}

/* La etiqueta pequeña en mayúsculas: lo que más se repite en el sistema.
   Sirve de encabezado de sección, de metadato y de texto de botón. */
.etiqueta {
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  line-height: 1.4;
}

.etiqueta-sm {
  font-size: 0.625rem;
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  line-height: 1.4;
}

.tenue     { color: var(--grafito); }
.mas-tenue { color: var(--acero); }

/* =====================================================================
   4. ESTRUCTURA
   ===================================================================== */
.contenedor {
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--margen-lateral);
}

.seccion       { padding-block: var(--e16); }
.seccion-amplia{ padding-block: var(--e24); }

@media (min-width: 768px) {
  .seccion       { padding-block: var(--e20); }
  .seccion-amplia{ padding-block: var(--e32); }
}

.marmol  { background: var(--marmol); }
.niebla  { background: var(--niebla); }

/* Plano oscuro. El toque Lamborghini, y por eso está limitado a dos usos en
   toda la portada: el hero y la franja editorial. */
.oscuro {
  background: var(--carbon-suave);
  color: var(--papel);
}
.oscuro .tenue     { color: #b8b8b8; }
.oscuro .mas-tenue { color: #8a8a8a; }
.oscuro .hairline  { border-color: var(--linea-oscura); }

.hairline     { border: 0; border-top: 1px solid var(--linea); }
.hairline-b   { border-bottom: 1px solid var(--linea); }
.hairline-t   { border-top: 1px solid var(--linea); }

/* Encabezado de sección: etiqueta a la izquierda, enlace a la derecha,
   separados por una línea de 1px. Se repite en toda la vitrina. */
.encabezado-seccion {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e4);
  padding-bottom: var(--e4);
  border-bottom: 1px solid var(--linea);
  margin-bottom: var(--e8);
}

/* =====================================================================
   5. BOTONES
   Único lugar del sistema con radio (4px). Todo lo demás es recto.
   ===================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  padding: 14px var(--e8);
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 0.6875rem;
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transicion-rapida),
              color var(--transicion-rapida),
              border-color var(--transicion-rapida),
              opacity var(--transicion-rapida);
  white-space: nowrap;
}

.btn-solido {
  background: var(--carbon);
  color: var(--papel);
  border-color: var(--carbon);
}
.btn-solido:hover:not(:disabled) { background: var(--grafito); border-color: var(--grafito); }

/* Ghost: el botón por defecto de Adanola. Contorno fino, se rellena al pasar. */
.btn-ghost {
  background: transparent;
  color: var(--carbon);
  border-color: var(--carbon);
}
.btn-ghost:hover:not(:disabled) { background: var(--carbon); color: var(--papel); }

.oscuro .btn-ghost { color: var(--papel); border-color: var(--papel); }
.oscuro .btn-ghost:hover:not(:disabled) { background: var(--papel); color: var(--carbon-suave); }

.btn-acento {
  background: var(--acento);
  color: var(--papel);
  border-color: var(--acento);
}
.btn-acento:hover:not(:disabled) { opacity: 0.88; }

.btn:disabled { opacity: 0.35; cursor: not-allowed; }

.btn-bloque { width: 100%; }
.btn-sm     { padding: 10px var(--e4); }

/* Enlace subrayado con offset: se lee como enlace sin gritar. */
.enlace {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: opacity var(--transicion-rapida);
}
.enlace:hover { opacity: 0.55; }

/* =====================================================================
   6. INSIGNIAS
   El acento vive aquí, casi en exclusiva.
   ===================================================================== */
.insignia {
  display: inline-block;
  padding: 5px 10px;
  font-size: 0.5625rem;
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  border-radius: 0;             /* recto, como todo lo que no es botón */
  line-height: 1;
}
.insignia-acento  { background: var(--acento); color: var(--papel); }
.insignia-carbon  { background: var(--carbon); color: var(--papel); }
.insignia-contorno{ background: var(--papel); color: var(--carbon); border: 1px solid var(--carbon); }

/* =====================================================================
   7. TARJETA DE PRODUCTO
   Radio 0, sin sombra, sin borde. La separa el espacio en blanco.
   ===================================================================== */
.tarjeta { position: relative; }

.tarjeta-imagen {
  position: relative;
  aspect-ratio: 3 / 4;          /* proporción editorial vertical */
  overflow: hidden;
  background: var(--marmol);    /* el gris se ve mientras carga la foto */
}

.tarjeta-imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1),
              opacity var(--transicion);
}

/* Zoom lentísimo al pasar. Es el único movimiento de la rejilla: cualquier
   cosa más rápida convierte el lookbook en un carrusel de anuncios. */
.tarjeta:hover .tarjeta-imagen img { transform: scale(1.04); }

/* Segunda foto que aparece en hover. Si el producto sólo tiene una, este
   elemento no se pinta y la tarjeta se comporta igual. */
.tarjeta-imagen .foto-alterna {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.tarjeta:hover .foto-alterna { opacity: 1; }

.tarjeta-insignias {
  position: absolute;
  top: var(--e3);
  left: var(--e3);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  z-index: 2;
}

/* Añadir rápido: entra desde abajo al pasar el cursor. En táctil se queda
   siempre visible, porque ahí no existe el hover. */
.tarjeta-accion {
  position: absolute;
  left: var(--e3);
  right: var(--e3);
  bottom: var(--e3);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--transicion-rapida), transform var(--transicion-rapida);
  z-index: 2;
}
.tarjeta:hover .tarjeta-accion,
.tarjeta:focus-within .tarjeta-accion { opacity: 1; transform: translateY(0); }

@media (hover: none) {
  .tarjeta-accion { opacity: 1; transform: none; }
}

.tarjeta-info { padding-top: var(--e3); }

.tarjeta-nombre {
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: var(--track-cuerpo);
  line-height: 1.35;
  margin: 0 0 4px;
  /* Dos líneas máximo: con tres, las tarjetas de la fila dejan de alinear
     sus precios y la rejilla se desordena. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.precio        { font-size: 0.8125rem; }
.precio-antes  { color: var(--acero); text-decoration: line-through; margin-left: 6px; }

/* Puntos de color. Cuadrados, no círculos: coherente con el radio 0. */
.punto-color {
  width: 10px; height: 10px;
  border: 1px solid var(--linea);
  display: inline-block;
}

/* Corazón de favoritos */
.favorito {
  position: absolute;
  top: var(--e3);
  right: var(--e3);
  z-index: 2;
  background: none;
  border: 0;
  padding: 4px;
  cursor: pointer;
  color: var(--carbon);
  opacity: 0.55;
  transition: opacity var(--transicion-rapida), color var(--transicion-rapida);
}
.favorito:hover     { opacity: 1; }
.favorito.activo    { opacity: 1; color: var(--acento); }

/* =====================================================================
   8. REJILLA
   2 columnas en móvil (no 1: el lookbook necesita comparación lado a lado)
   ===================================================================== */
.rejilla {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--e3) var(--e2);
}

@media (min-width: 640px)  { .rejilla { grid-template-columns: repeat(3, 1fr); gap: var(--e6) var(--e3); } }
@media (min-width: 1024px) { .rejilla { grid-template-columns: repeat(4, 1fr); } }

.rejilla-2 { display: grid; grid-template-columns: 1fr; gap: var(--e2); }
@media (min-width: 768px) { .rejilla-2 { grid-template-columns: repeat(2, 1fr); } }

/* =====================================================================
   9. NAVEGACIÓN
   ===================================================================== */
.barra-anuncio {
  background: var(--carbon);
  color: var(--papel);
  text-align: center;
  /* El inset superior evita que el texto quede bajo el notch/Dynamic Island
     cuando la página está arriba del todo (con viewport-fit=cover). */
  padding: calc(9px + env(safe-area-inset-top)) var(--e4) 9px;
}

.encabezado {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--papel);
  border-bottom: 1px solid var(--linea);
}

/* Tap targets del header: los íconos (buscar, cuenta, bolsa) deben cumplir el
   mínimo táctil de 44x44 recomendado por Apple, sin cambiar su apariencia. */
.encabezado a[aria-label],
.encabezado button[aria-label] {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nav-enlace {
  position: relative;
  color: inherit;
  text-decoration: none;
  padding-block: var(--e2);
  transition: opacity var(--transicion-rapida);
}
.nav-enlace:hover { opacity: 0.55; }

/* Subrayado que crece desde la izquierda. Es el único adorno de la
   navegación; el resto es texto y aire. */
.nav-enlace::after {
  content: "";
  position: absolute;
  left: 0; bottom: 2px;
  width: 0; height: 1px;
  background: currentColor;
  transition: width var(--transicion);
}
.nav-enlace:hover::after,
.nav-enlace[aria-current="page"]::after { width: 100%; }

.contador-carrito {
  position: absolute;
  top: -6px; right: -10px;
  min-width: 16px; height: 16px;
  padding-inline: 4px;
  background: var(--acento);
  color: var(--papel);
  font-size: 0.5625rem;
  display: grid;
  place-items: center;
  line-height: 1;
}

/* =====================================================================
   10. FILTROS
   ===================================================================== */
.chip {
  padding: 9px var(--e4);
  color: var(--carbon);
  white-space: nowrap;
  flex-shrink: 0;
  border: 1px solid var(--linea);
  background: transparent;
  font-size: 0.625rem;
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--transicion-rapida),
              background var(--transicion-rapida),
              color var(--transicion-rapida);
  white-space: nowrap;
}
.chip:hover  { border-color: var(--carbon); }
.chip.activo { background: var(--carbon); color: var(--papel); border-color: var(--carbon); }

/* Selector de talla. La talla agotada se TACHA en vez de esconderse: saber
   que existe pero no hay es información útil; que desaparezca parece un error
   del sitio. */
.talla {
  min-width: 46px;
  padding: 11px var(--e3);
  border: 1px solid var(--ceniza);
  background: transparent;
  font-size: 0.6875rem;
  letter-spacing: var(--track-etiqueta);
  cursor: pointer;
  transition: border-color var(--transicion-rapida), background var(--transicion-rapida);
}
.talla:hover:not(:disabled) { border-color: var(--carbon); }
.talla.activo { background: var(--carbon); color: var(--papel); border-color: var(--carbon); }
.talla:disabled {
  color: var(--ceniza);
  cursor: not-allowed;
  text-decoration: line-through;
  border-color: var(--linea);
}

.campo {
  width: 100%;
  padding: 13px var(--e3);
  border: 1px solid var(--ceniza);
  background: var(--papel);
  font-family: inherit;
  font-size: 0.875rem;
  letter-spacing: var(--track-cuerpo);
  transition: border-color var(--transicion-rapida);
}
.campo:focus { outline: none; border-color: var(--carbon); }
.campo::placeholder { color: var(--acero); }

/* =====================================================================
   11. CARGA Y ESTADOS VACÍOS
   ===================================================================== */
/* Esqueleto sin brillo animado: un pulso lento de opacidad. El shimmer
   diagonal es un gesto de app, no de editorial. */
.esqueleto {
  background: var(--marmol);
  animation: pulso 1.6s ease-in-out infinite;
}
@keyframes pulso { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

.aparece { animation: aparecer 600ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes aparecer {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* Respeta a quien pidió menos movimiento en su sistema operativo. */
@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;
  }
}

/* =====================================================================
   12. PANELES DESLIZANTES (carrito, filtros, menú)
   ===================================================================== */
.velo {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transicion);
  /* Por encima de la barra inferior (9999) para que el carrito/filtros la
     cubran al abrirse, en vez de que la barra flote sobre el panel. */
  z-index: 10000;
}
.velo.abierto { opacity: 1; pointer-events: auto; }

.panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(440px, 100vw);
  background: var(--papel);
  transform: translateX(100%);
  transition: transform var(--transicion);
  z-index: 10001;
  display: flex;
  flex-direction: column;
}
.panel.abierto { transform: none; }

.panel-izquierda { right: auto; left: 0; transform: translateX(-100%); }
.panel-izquierda.abierto { transform: none; }

.panel-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--e6);
  border-bottom: 1px solid var(--linea);
  flex-shrink: 0;
}
.panel-cuerpo { flex: 1; overflow-y: auto; padding: var(--e6); }
.panel-pie    { border-top: 1px solid var(--linea); padding: var(--e6); flex-shrink: 0; }

/* Bloquea el scroll del fondo mientras hay un panel abierto. Sin esto, en
   móvil se desplaza la página detrás del carrito. */
body.sin-scroll { overflow: hidden; }

/* =====================================================================
   12b. BARRA DE NAVEGACIÓN INFERIOR (sólo móvil)
   =====================================================================
   El estándar de app: los accesos principales al alcance del pulgar. Se pinta
   en TODAS las páginas desde comun.js (montarChrome) y sólo se ve por debajo de
   768px. Vive en z-index 45: por debajo del velo (90) y del panel (100), para
   que el carrito abierto la cubra en vez de flotar encima. */
.nav-inferior {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  /* Alto compacto y fijo: 60px de contenido + el inset del notch por debajo. */
  height: calc(60px + env(safe-area-inset-bottom));
  z-index: 9999;
  display: flex;
  align-items: stretch;   /* los ítems llenan los 60px y centran su contenido */
  /* Fondo negro 100% OPACO (sin transparencias, sin backdrop-filter, sin
     opacity): así los textos e íconos de la barra nunca se confunden con la
     foto del carrusel detrás. */
  background-color: #000000;
  border-top: 1px solid var(--linea-oscura);
  /* Libra la barra de gestos (home indicator) de los iPhone con notch. */
  padding-bottom: env(safe-area-inset-bottom);
  /* Capa propia en el compositor: mantiene la barra clavada abajo sin vibrar
     durante el scroll con inercia de iOS (donde las barras fijas "tiemblan"). */
  transform: translateZ(0);
  will-change: transform;
}

.nav-inf-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 56px;
  padding: 8px 0 6px;
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.6);     /* inactivo, sobre fondo oscuro */
  font-family: var(--fuente);
  font-size: 0.5625rem;                 /* etiqueta diminuta, en la voz KLØA */
  font-weight: 400;
  letter-spacing: var(--track-etiqueta);
  text-transform: uppercase;
  transition: color var(--transicion-rapida);
  position: relative;
}
.nav-inf-item svg { display: block; }

/* Activo (página actual) o mientras se toca: blanco pleno. */
.nav-inf-item.activo,
.nav-inf-item:active { color: var(--papel); }

/* Indicador de página activa: una línea corta de acento arriba, discreta. */
.nav-inf-item.activo::before {
  content: "";
  position: absolute;
  top: -1px; left: 50%;
  transform: translateX(-50%);
  width: 26px; height: 2px;
  background: var(--acento);
}

/* Ancla para el contador del carrito (que se posiciona absoluto). */
.nav-inf-icono { position: relative; display: inline-flex; }

/* En escritorio la barra no existe. */
@media (min-width: 768px) {
  .nav-inferior { display: none; }
}

/* Ajustes exclusivos de móvil. */
@media (max-width: 767px) {
  /* Respiro para que la barra fija (60px + notch) NUNCA tape el último texto o
     botón. 90px deja un margen cómodo por encima de la barra. */
  body { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }

  /* El hero mide 100vh; su texto va anclado al fondo, así que sin esto queda
     debajo de la barra fija. Se le resta el alto reservado (barra + notch) para
     que TODO su contenido termine por encima de la barra. */
  #hero-carrusel {
    height: calc(100vh - 90px - env(safe-area-inset-bottom)) !important;
    min-height: 0 !important;
  }

  /* 16px evita que Safari en iOS haga zoom automático al enfocar un campo. */
  input, textarea, select { font-size: 16px; }

  /* Chat de ayuda: la burbuja y la ventana estaban a 24px del fondo, donde la
     barra inferior fija (60px + notch) las TAPABA en el teléfono. Se suben por
     encima de la barra; así ya no se solapan y su z-index original basta (queda
     por debajo del carrito/filtros cuando esos se abren). */
  #burbuja-chat {
    bottom: calc(72px + env(safe-area-inset-bottom)) !important;
  }
  #ventana-chat {
    bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    /* Que la ventana quepa entre el borde superior y la barra inferior. */
    height: min(560px, calc(100vh - 72px - env(safe-area-inset-bottom) - var(--e8))) !important;
  }

  /* Header limpio en móvil: se ocultan los tres íconos de la derecha (búsqueda,
     cuenta y bolsa) y el menú de categorías, usando los selectores que YA
     existen en el markup real (los aria-label de los íconos e #nav-categorias).
     Sus funciones viven ahora en la barra inferior. Queda sólo el logotipo. */
  .encabezado a[aria-label],
  .encabezado button[aria-label] { display: none !important; }
  #nav-categorias { display: none !important; }
  /* Centra el logotipo: la fila del header es el único hijo del .contenedor. */
  .encabezado .contenedor > div { justify-content: center; }
}

/* =====================================================================
   13. UTILIDADES
   ===================================================================== */
.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.fila-scroll {
  display: flex;
  gap: var(--e2);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.fila-scroll::-webkit-scrollbar { display: none; }

/* =====================================================================
   14. PORTADA EN MÓVIL — versión compacta
   Objetivos: menos scroll, una sola columna de lectura, controles de 44px
   mínimo (recomendación de Apple/Google para el pulgar) separados por 8–12px
   para no tocar el de al lado, y filas simétricas.
   ===================================================================== */
@media (max-width: 767px) {
  :root { --margen-lateral: var(--e4); }

  /* Ritmo vertical más corto: de 64/96px a 40/48px. */
  .seccion        { padding-block: 40px; }
  .seccion-amplia { padding-block: var(--e12); }
  .encabezado-seccion { padding-bottom: var(--e3); margin-bottom: var(--e4); }
  .rejilla { gap: var(--e6) var(--e3); }

  /* ---- Hero: más bajo y con los controles en UNA fila simétrica ---- */
  #hero-carrusel {
    height: min(calc(100svh - 90px - env(safe-area-inset-bottom)), 620px) !important;
  }
  /* Degradado inferior: el texto blanco se lee sobre cualquier foto. */
  #hero-carrusel::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: 0; height: 45%;
    z-index: 55; pointer-events: none;
    background: linear-gradient(to top, rgba(0,0,0,0.55), transparent);
  }
  #hero-carrusel .hc-marca   { top: var(--e4) !important; left: var(--e4) !important; }
  #hero-carrusel .hc-marca span { font-size: 10px !important; letter-spacing: 0.18em !important; }
  #hero-carrusel [data-dots] { top: 18px !important; right: var(--e4) !important; }

  #hero-carrusel .hc-info {
    left: var(--e4) !important; right: var(--e4) !important;
    bottom: var(--e4) !important; max-width: none !important;
  }
  #hero-carrusel [data-nombre] { font-size: 17px !important; margin-bottom: 4px !important; }
  #hero-carrusel [data-etq]    { font-size: 11px !important; margin-bottom: var(--e3) !important; }
  #hero-carrusel [data-desc]   { display: none; }   /* el detalle vive en la ficha */
  #hero-carrusel .hc-flechas   { gap: var(--e2) !important; }
  #hero-carrusel [data-prev],
  #hero-carrusel [data-next]   { width: 44px !important; height: 44px !important; }

  /* "Ver prenda" alineado con las flechas: misma altura (44px), mismo borde. */
  #hero-carrusel .hc-cta {
    right: var(--e4) !important; bottom: var(--e4) !important;
    height: 44px; display: flex; align-items: center;
  }
  #hero-carrusel .hc-cta a {
    height: 44px; padding: 0 var(--e4); gap: var(--e2) !important;
    border-radius: 999px; background: #fff; color: #111 !important;
    font-family: var(--fuente) !important; opacity: 1 !important;
  }
  #hero-carrusel .hc-cta a span {
    font-size: 11px !important; font-weight: 600 !important;
    letter-spacing: var(--track-etiqueta) !important;
  }
  #hero-carrusel .hc-cta a svg { width: 16px; height: 16px; }

  /* ---- Franja de IA: sin fotos decorativas, botones en rejilla 2×1 ---- */
  .editorial { gap: 0 !important; }
  .editorial-fotos { display: none !important; }
  .editorial .display { font-size: 1.5rem !important; max-width: none !important; letter-spacing: 0.04em; }
  .editorial .tenue { margin: var(--e3) 0 var(--e6) !important; font-size: 0.875rem; }
  .editorial-botones {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: var(--e2) !important;
  }
  .editorial-botones .btn {
    min-height: 48px; padding: 12px var(--e2);
    white-space: normal; text-align: center; line-height: 1.3;
  }

  /* ---- Barra del catálogo ---- */
  .barra-busqueda { margin-bottom: var(--e3) !important; }
  .barra-busqueda .campo { height: 44px; }
  .acciones-coleccion .chip {
    width: 44px; height: 44px; padding: 0 !important;
    display: inline-flex; align-items: center; justify-content: center;
  }

  /* "Lo más querido" en carrusel horizontal: 1 fila en vez de una rejilla
     larga; se ve que hay más porque la tercera tarjeta asoma. */
  #rejilla-destacados {
    display: flex; gap: var(--e3);
    overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--margen-lateral));
    padding-inline: var(--margen-lateral);
    scroll-padding-inline: var(--margen-lateral);
    scrollbar-width: none;
  }
  #rejilla-destacados::-webkit-scrollbar { display: none; }
  #rejilla-destacados > * { flex: 0 0 44%; scroll-snap-align: start; }

  .barra-filtros {
    /* nowrap: con wrap el contenedor es "multilínea" y la línea toma el ancho
       de su contenido (las 8 categorías ≈ 850px), así que la página entera se
       ensanchaba y en el celular se veía a media pantalla. */
    flex-direction: column; flex-wrap: nowrap !important; align-items: stretch !important;
    gap: var(--e3) !important; margin-bottom: var(--e6) !important;
  }
  /* Las categorías se desplazan de borde a borde (pista visual de que hay más). */
  #filtros-categoria {
    margin-inline: calc(-1 * var(--margen-lateral));
    padding-inline: var(--margen-lateral);
    scroll-snap-type: x proximity;
  }
  #filtros-categoria .chip { scroll-snap-align: start; }

  /* Tallas (S M L) a la izquierda y orden ocupando el resto: misma altura. */
  .barra-orden { width: 100%; }
  .barra-orden #orden { flex: 1; min-width: 0; height: 40px; }
  .barra-filtros .chip { min-height: 40px; padding: 0 var(--e4); font-size: 0.6875rem; }
  #filtros-talla .chip { min-width: 44px; padding: 0; }

  .pie-catalogo { margin-top: var(--e8) !important; }
  #btn-mas { width: 100%; min-height: 48px; }

  /* ---- Promesas: rejilla 2×2 de tarjetas compactas e iguales ---- */
  #promesas { gap: var(--e2) !important; }
  #promesas > div {
    background: var(--papel);
    border: 1px solid var(--linea);
    padding: var(--e3);
    min-height: 100%;
  }
  #promesas .etiqueta { margin-bottom: 4px !important; }
  #promesas .tenue    { font-size: 0.75rem !important; line-height: 1.45; }
}

/* Barra de búsqueda: sólo ocupa lugar cuando está abierta. */
.barra-busqueda:has(> #caja-busqueda[hidden]) { display: none !important; }
.encabezado-seccion:has(.acciones-coleccion) { align-items: center; }

/* Foco visible para teclado y lectores (accesibilidad). */
:where(a, button, select, input, [tabindex]):focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

/* Logo del encabezado alineado al borde, igual que el de la portada (32px). */
@media (min-width: 768px) {
  .encabezado .contenedor { max-width: none; padding-inline: 32px; }
}

/* Flecha propia del <select> (va al final para ganarle al `background` de .campo). */
select, select.campo, select.campo:focus { color: inherit; -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 34px !important; }