/* ============================================================
   DISTRIBUIDORA KORUK — sistema de diseño (v2 · moderno)
   Deportivo, audaz, limpio. Negro + rojo Koruk + blanco.
   Sin mayúsculas. Botones pill. Menús liquid glass.
   ============================================================ */

/* Las fuentes (Archivo + Public Sans) se cargan en el <head> de index.php, NO acá:
   styles.css carga async, así que un @import las demoraría hasta después del
   primer pintado. Ver el <link> de fonts.googleapis en index.php. */

/* Tres colores y nada más: negro, ROJO (el único acento) y BLANCO como
   secundario, sobre un fondo CREMA.
   --paper = el fondo de la web (crema). --surface = el blanco secundario, el de
   las superficies que tienen que despegarse del fondo (botón de favoritos,
   chips, franjas). El negro es el de las cabeceras y las bandas de cierre. */
:root {
  --ink:       #0B0B0B;
  --ink-2:     #1A1A1A;
  --paper:     #F6F3EC;
  --surface:   #FFFFFF;
  --surface-2: #EFEBE0;

  --on-ink:    #FFFFFF;
  --on-ink-2:  rgba(255,255,255,0.66);
  --on-ink-3:  rgba(255,255,255,0.42);
  --muted:     #78736A;

  --line:      #E5E0D5;
  --line-2:    #D6D0C2;
  --line-dark: #262626;

  --red:        #ED1B2D;
  --red-bright: #FF2535;
  --red-deep:   #C20F20;

  --display: 'Archivo', system-ui, sans-serif;   /* títulos — grotesco tipo Nike */
  --sans:    'Public Sans', system-ui, sans-serif; /* cuerpo / UI */

  --pad: clamp(18px, 3.4vw, 64px);
  /* Ritmo vertical de la portada. Es MEDIO aire: cada sección lo pone de su lado,
     así que el hueco entre dos secciones vecinas es siempre 2×--sec-y (88px en
     desktop, 48px en teléfono). Antes cada sección lo resolvía a su manera —el
     carrusel no ponía nada abajo y confiaba en que la de al lado lo pusiera— y el
     hueco salía distinto según qué sección cayera al lado: 0px entre un carrusel
     y la banda del CTA, 86px alrededor de las categorías. */
  --sec-y: clamp(24px, 3vw, 44px);
  --nav-h: 68px;
  --bar-h: 34px;                                  /* barra roja de anuncio (fija, arriba del nav) */
  --head-h: calc(var(--nav-h) + var(--bar-h));    /* alto total del header fijo — usalo para offsets */
  --maxw: 1760px;

  --r-pill: 999px;
  --r-lg: 22px;
  --r-md: 16px;
  --ease: cubic-bezier(.22,1,.36,1);
}

*, *::before, *::after { box-sizing: border-box; }
/* Sin el resaltado de toque del navegador: en iOS/Android pintaba un rectángulo
   oscuro sobre todo lo que se tocaba (en una card de producto, un bloque negro
   del tamaño de la foto). La respuesta al toque la dan los :active de cada botón. */
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overscroll-behavior-y: none; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
  overflow-x: hidden;
  overscroll-behavior-y: none;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }
input, select, textarea { font-family: inherit; font-size: inherit; }
::selection { background: rgba(237,27,45,.55); color: #fff; }
::-moz-selection { background: rgba(237,27,45,.55); color: #fff; }

/* ——— Scrollbars a medida (nunca el default del navegador) ——— */
/* Firefox */
* { scrollbar-width: thin; scrollbar-color: var(--line-2, #cfccc4) transparent; }
:root { scrollbar-color: #cfccc4 transparent; }
/* WebKit / Chromium / Safari */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #cfccc4;
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background .2s;
}
::-webkit-scrollbar-thumb:hover { background: var(--ink); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }
/* (Ya no hay dropdowns oscuros: el de orden y el de cuenta pasaron a crema, así
   que el thumb por defecto sirve para todos.) */

/* ——— Tipografía ——— */
.display {
  font-family: var(--display);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.02em;
}
.eyebrow { font-weight: 600; font-size: 14px; color: var(--muted); letter-spacing: 0; }
.eyebrow.on-red { color: rgba(255,255,255,.85); }
.label { font-weight: 600; font-size: 13px; color: var(--muted); }
.num-tag { font-family: var(--display); color: var(--red); }

.container { width: 100%; padding-inline: var(--pad); margin-inline: auto; max-width: var(--maxw); }

/* ============================================================
   TICKER
   ============================================================ */
.ticker {
  background: var(--ink);
  color: var(--on-ink);
  overflow: hidden;
  border-bottom: 1px solid var(--line-dark);
  height: 38px;
  display: flex;
  align-items: center;
}
.ticker-track {
  display: inline-flex;
  white-space: nowrap;
  animation: ticker 48s linear infinite;
  will-change: transform;
}
.ticker-track span {
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.01em;
  padding: 0 26px;
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--on-ink-2);
}
.ticker-track span::after {
  content: '';
  position: absolute; right: -3px; top: 50%;
  width: 4px; height: 4px; border-radius: 999px;
  background: var(--red); transform: translateY(-50%);
}
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-33.333%); } }

/* ============================================================
   NAV — links izquierda · logo centro · acciones derecha
   ============================================================ */
/* ——— Barra de anuncio (roja, fija arriba de todo) ——— */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 81;                 /* sobre el nav (80) y sobre el menú móvil (79) */
  height: var(--bar-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding-inline: var(--pad);
  background: var(--red);
  color: #fff;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.2;
}
.topbar svg { flex-shrink: 0; opacity: .9; }
.topbar-short { display: none; }
/* En mobile la barra baja a 30px y muestra la versión corta del mensaje (la larga
   entraría en dos líneas y rompería el alto fijo del header). */
@media (max-width: 780px) {
  :root { --bar-h: 30px; }
  .topbar { font-size: 10.5px; letter-spacing: .05em; gap: 7px; white-space: nowrap; }
  .topbar svg { width: 14px; height: 14px; }
  .topbar-full { display: none; }
  /* Último recurso: si aun así no entra, el mensaje se corta con "…" y "Ver más"
     queda entero. Partido en dos renglones se salía de los 30px de la barra. */
  .topbar-short { display: inline; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
/* Celulares angostos (≤380, ej. iPhone SE de 1ª gen. y Android de 360): por
   debajo de 360px el mensaje partía en dos renglones. Menos tracking y, en los
   más chicos, sin el camión. */
@media (max-width: 380px) {
  .topbar { font-size: 10px; letter-spacing: .03em; gap: 6px; }
  .topbar .topbar-more { margin-left: 0; }   /* la base de .topbar-more está más abajo */
}
@media (max-width: 340px) { .topbar svg { display: none; } }

.nav {
  position: fixed;
  top: var(--bar-h); left: 0; right: 0;
  z-index: 80;
  color: var(--ink);
  height: var(--nav-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-inline: var(--pad);
}
/* El fondo va en un pseudo-elemento y no en .nav: cualquier hijo con
   backdrop-filter tomaría a .nav como "backdrop root" y el efecto se rompería al
   scrollear. Hoy el mega-menú y su scrim cuelgan del body (no del nav), pero la
   regla se sostiene sola y el menú de cuenta sigue adentro.
   El header es SIEMPRE blanco opaco y liso: sin borde inferior ni sombra, en
   todas las páginas y en cualquier posición de scroll. */
.nav::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--paper);
}
.nav-left { display: flex; align-items: center; gap: 2px; justify-self: center; height: 100%; }
.nav-logo {
  font-family: var(--display);
  font-weight: 900;
  font-size: 26px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--red);
  display: inline-flex;
  align-items: center;
  line-height: 1;
  justify-self: start;
}
.nav-logo .mark { color: var(--red); margin-left: 1px; }
.nav-item { position: relative; height: 100%; display: flex; align-items: center; }
.nav-link {
  font-weight: 500;
  font-size: 15px;
  padding: 8px 14px;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--r-pill);
  transition: opacity .18s;
}
.nav-link .chev { transition: transform .3s var(--ease); }
.nav-item.is-open .nav-link .chev { transform: rotate(180deg); }
/* Con el mega-menú abierto —o con el mouse sobre el grupo— se atenúan TODOS los
   links y sólo el apuntado (o el que abrió el panel) queda al 100%. Es el gesto
   de Apple: el nav retrocede y deja al frente lo que estás por elegir. */
@media (hover: hover) and (pointer: fine) {
  .nav-left:has(.nav-item.is-open) .nav-link,
  .nav-left:hover .nav-link { opacity: .55; }
  .nav-left .nav-item.is-open .nav-link,
  .nav-left .nav-item:hover .nav-link,
  .nav-left .nav-link:hover { opacity: 1; }
}

/* ——— Mega menú · panel único que morfea la altura (estilo Apple) ———
   Ya no es una tarjeta flotante: es una franja a lo ancho de la pantalla que baja
   del nav creciendo de 0 al alto real de su contenido, sobre el resto de la página
   desenfocada. Por eso el alto lo escribe Nav.jsx (hay que medirlo para animarlo)
   y acá sólo vive la transición. El `top` de abajo es el fallback hasta la primera
   medición: coincide con el borde del header fijo. */
.nav-mega {
  position: fixed;
  left: 0; right: 0;
  top: var(--head-h);
  z-index: 78;                 /* bajo el nav (80): el nav tapa la costura de arriba */
  background: var(--paper);
  color: var(--ink);
  height: 0;
  overflow: hidden;
  visibility: hidden;
  /* La visibilidad espera a que termine de plegarse; al abrir cambia de una. */
  transition: height .42s cubic-bezier(.4,0,.2,1), visibility 0s linear .42s;
  will-change: height;
}
.nav-mega.open {
  visibility: visible;
  transition: height .42s cubic-bezier(.4,0,.2,1), visibility 0s;
}
/* El contenido no se estira con el panel: entra con su propio fade + subida, que
   se reproduce sola cada vez que vuelve la clase .open. */
@keyframes koMegaIn {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}
/* Las columnas arrancan bajo el texto de "Productos", no en el margen de la
   página: ese x lo mide Nav.jsx y lo pasa inline en --mega-x. El var() es el
   fallback hasta que se mide. */
.nav-mega-inner {
  padding: 44px var(--pad) 56px var(--mega-x, var(--pad));
  display: flex;
  justify-content: flex-start;
  gap: clamp(48px, 5vw, 88px);
}
.nav-mega.open .nav-mega-inner { animation: koMegaIn .34s cubic-bezier(.4,0,.2,1) both; }
.mega-col { display: flex; flex-direction: column; align-items: flex-start; }
.mega-col-items { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
/* Nueve tipos en una sola columna dejarían el panel a media pantalla: fluyen de a
   cinco por columna, las dos arrancando a la misma altura que el resto. */
.mega-col--wide .mega-col-items {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(5, auto);
  grid-auto-columns: max-content;
  column-gap: clamp(28px, 3vw, 56px);
  row-gap: 6px;
  justify-items: start;
}
.mega-col-label {
  font-family: var(--sans);
  font-weight: 400; font-size: 15px; letter-spacing: 0;
  color: var(--muted);
  margin-bottom: 10px;
}
/* Todas las columnas con el mismo tamaño de link, como Apple. Sin jerarquías. */
.mega-link {
  font-family: var(--sans);
  font-size: clamp(19px, 1.9vw, 26px); font-weight: 500;
  letter-spacing: -.015em; line-height: 1.25;
  color: var(--ink);
  display: inline-flex; align-items: center; gap: 8px;
  transition: opacity .16s ease;
}
@media (hover: hover) and (pointer: fine) {
  /* Al apuntar un link, los de SU columna se corren atrás y él queda al frente. */
  .mega-col:has(.mega-link:hover) .mega-link { opacity: .42; }
  .mega-col:has(.mega-link:hover) .mega-link:hover { opacity: 1; }
}
/* Scrim: la página de atrás, desenfocada, desde el borde del nav para abajo. */
.nav-mega-scrim {
  position: fixed;
  inset: 0;
  top: var(--head-h);
  z-index: 77;
  background: rgba(20,20,18,.04);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  opacity: 0; visibility: hidden;
  transition: opacity .46s ease, visibility .46s;
}
.nav-mega-scrim.open { opacity: 1; visibility: visible; }
/* El botón flotante de WhatsApp (z-index 900) quedaría encima del desenfoque. */
body.mega-open .wa-float { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .nav-mega, .nav-mega.open, .nav-mega-scrim { transition: none; }
  .nav-mega.open .nav-mega-inner { animation: none; }
}

.nav-actions { display: flex; align-items: center; gap: 2px; justify-self: end; }
.icon-btn {
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink); border-radius: 999px;
  position: relative;
  transition: opacity .2s;
}
.icon-btn:hover { opacity: .55; }
.cart-count {
  position: absolute; top: 4px; right: 2px;
  background: var(--red); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
}
.nav-burger { display: none; }

/* ——— Campo de búsqueda dentro del nav ———
   Fondo transparente y borde negro; al apuntarlo o al escribir pasa a rojo. Es la
   única excepción a "el hover sólo cambia la opacidad": acá el borde ES el
   control, y el rojo marca el campo activo. La lupa deja lugar a una X cuando hay
   texto — cancelar la búsqueda es lo único que se necesita a esa altura. */
.nav-search-box {
  display: flex; align-items: center; gap: 8px;
  width: clamp(170px, 16vw, 230px);
  margin-right: 6px;
  padding: 9px 16px;
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: var(--r-pill);
  transition: border-color .2s ease;
}
.nav-search-box:hover,
.nav-search-box:focus-within { border-color: var(--red); }
.nav-search-input {
  flex: 1; min-width: 0;
  border: none; outline: none; -webkit-appearance: none; appearance: none;
  background: transparent; color: var(--ink);
  font-family: var(--sans); font-size: 14px;
}
.nav-search-input::placeholder { color: var(--muted); opacity: 1; }
.nav-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.nav-search-ico { color: var(--muted); flex-shrink: 0; }
.nav-search-x {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--ink); padding: 0;
  transition: opacity .2s;
}
.nav-search-x:hover { opacity: .55; }
/* En desktop manda el pill; el botón lupa aparece recién cuando el nav se achica. */
.nav-search-btn { display: none; }

/* Con el menú móvil abierto, el nav se funde con el overlay: como el overlay es
   blanco, el nav se queda claro y opaco. */
.nav.menu-open { color: var(--ink); }
.nav.menu-open .nav-link,
.nav.menu-open .icon-btn { color: var(--ink); }
.nav.menu-open::before {
  opacity: 1 !important;
  background: var(--paper) !important;
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}

/* ============================================================
   MENÚ MÓVIL — overlay full-screen (hamburguesa)
   Calcado del patrón de Kegam, en blanco (paleta clara del sitio).
   El overlay queda por debajo del nav (z-index 79 < 80) para que la barra
   con la X siga visible y clickeable arriba.
   ============================================================ */
.ham-svg .ham-bar { transform-box: fill-box; transform-origin: center; transition: transform .38s var(--ease); }
.ham-svg--open .ham-bar--top { transform: translateY(4.2px) rotate(45deg); }
.ham-svg--open .ham-bar--bot { transform: translateY(-4.2px) rotate(-45deg); }

.mobile-menu {
  display: none;
  position: fixed; inset: 0;
  z-index: 79;
  background: var(--paper);
  color: var(--ink);
  flex-direction: column;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .28s var(--ease), visibility .28s var(--ease);
}
.mobile-menu.open { opacity: 1; visibility: visible; pointer-events: auto; }
.mobile-menu-scroll {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: calc(var(--head-h) + 40px) var(--pad) 40px;
}
.mm-cat, .mm-toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  font-family: var(--display); font-weight: 800;
  font-size: clamp(30px, 8vw, 46px); letter-spacing: -.02em; line-height: 1.05;
  color: var(--ink); text-align: left; background: none;
  padding: 14px 0; border-bottom: 1px solid var(--line);
  transition: color .2s;
}
.mm-cat:active, .mm-toggle:active { color: var(--muted); }
.mm-chev { transition: transform .3s var(--ease); flex-shrink: 0; }
.mm-chev.open { transform: rotate(180deg); }
.mm-toggle.open { border-bottom-color: transparent; }
.mm-shop-cats { overflow: hidden; max-height: 0; opacity: 0; transition: max-height .4s var(--ease), opacity .2s; }
.mm-shop-cats.open { max-height: 460px; opacity: 1; transition: max-height .45s var(--ease), opacity .3s .08s; }
.mm-sub {
  display: flex; align-items: center;
  font-family: var(--sans); font-weight: 500; font-size: 17px;
  color: var(--muted); padding: 13px 0 13px 4px;
  border-bottom: 1px solid var(--line);
  transition: color .2s;
}
.mm-sub:active { color: var(--ink); }
.mm-shop-cats .mm-sub:last-child { border-bottom: none; }

.mobile-menu-auth {
  flex-shrink: 0; display: flex; flex-direction: column; gap: 12px;
  padding: 18px var(--pad);
  padding-bottom: max(24px, env(safe-area-inset-bottom, 24px));
  border-top: 1px solid var(--line);
}
.mobile-menu-auth button:first-child {
  padding: 15px 24px; font-family: var(--sans); font-weight: 600; font-size: 15px;
  background: var(--red); color: #fff; border-radius: var(--r-pill);
  transition: opacity .2s;
}
.mobile-menu-auth button:first-child:hover { opacity: .78; }
.mobile-menu-auth button:last-child {
  padding: 8px; font-family: var(--sans); font-weight: 500; font-size: 15px;
  color: var(--muted); text-align: center; transition: color .2s;
}
.mobile-menu-auth button:last-child:hover { color: var(--ink); }

@media (max-width: 1024px) { .mobile-menu { display: flex; } }

/* Con el menú abierto ocultamos el botón flotante de WhatsApp (z-index 900). */
body.menu-open .wa-float { opacity: 0; pointer-events: none; }

/* ============================================================
   BUSCADOR — panel que baja del nav (estilo Missoma)
   Dejó de ser un drawer lateral: usa la misma mecánica que el mega-menú (alto
   animado desde el borde del nav, scrim desenfocado detrás) y el mismo scrim.
   La diferencia es que su contenido puede pasarse de pantalla, así que el alto
   viene topeado desde Nav.jsx y de ahí para abajo scrollea adentro.
   ============================================================ */
.nav-search {
  position: fixed;
  left: 0; right: 0;
  top: var(--head-h);
  z-index: 78;
  background: var(--paper);
  color: var(--ink);
  height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: height .42s cubic-bezier(.4,0,.2,1), visibility 0s linear .42s;
  will-change: height;
}
.nav-search.open {
  visibility: visible;
  transition: height .42s cubic-bezier(.4,0,.2,1), visibility 0s;
}
/* Sin padding propio: lo pone cada bloque. Así la barra pegajosa de arriba puede
   pintar su fondo de borde a borde sin pelearse con el padding del contenedor. */
.nav-search-inner {
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nav-search.open .nav-search-inner { animation: koMegaIn .34s cubic-bezier(.4,0,.2,1) both; }

/* Campo: pill con la lupa a la derecha, como el buscador de referencia.
   Queda pegado arriba: con la grilla de resultados el panel scrollea, y el campo
   tiene que seguir a la vista para poder corregir lo escrito sin volver al tope.
   Los márgenes negativos le devuelven el ancho completo del panel, así el
   contenido que pasa por debajo (el carrusel sangra hasta el borde) no asoma. */
/* En desktop el campo está en el nav, así que esta fila queda sólo con las
   acciones (Limpiar / cerrar) y se alinea a la derecha. */
.nsearch-bar {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  background: var(--paper);
  padding: 14px var(--pad) 10px;
}
.nav-search .nsearch-field { display: none; }
/* Fondo transparente y borde negro; al apuntarlo o al escribir, el borde pasa a
   rojo. Es la única excepción a la regla de "el hover sólo cambia la opacidad":
   acá el borde ES el control, y el rojo marca el campo activo. */
.nsearch-field {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 14px;
  padding: 13px 24px;
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: var(--r-pill);
  transition: border-color .2s ease;
}
.nsearch-field:hover,
.nsearch-field:focus-within { border-color: var(--red); }
.nsearch-field-icon { color: var(--ink); flex-shrink: 0; }
.nsearch-input {
  flex: 1; min-width: 0;
  border: none; outline: none; -webkit-appearance: none; appearance: none;
  background: transparent; color: var(--ink);
  font-family: var(--sans); font-size: clamp(17px, 1.5vw, 21px); font-weight: 400;
}
.nsearch-input::placeholder { color: var(--muted); opacity: 1; }
.nsearch-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.nsearch-clear {
  flex-shrink: 0;
  font-family: var(--sans); font-size: 15px; color: var(--muted);
  padding: 8px 4px;
  transition: opacity .2s;
}
.nsearch-clear:hover { opacity: .62; }
.nav-search .icon-btn { color: var(--ink); flex-shrink: 0; }

.nsearch-body { padding: 14px var(--pad) 32px; }
.nsearch-label {
  display: block;
  font-family: var(--sans); font-size: 14px; color: var(--muted);
  margin-bottom: 16px;
}
/* Con resultados: columna de categorías a la izquierda y la grilla al lado. */
.nsearch-body--results {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 clamp(28px, 3vw, 56px);
}
.nsearch-body--results:has(.nsearch-side) { grid-template-columns: 190px minmax(0, 1fr); }
.nsearch-side { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.nsearch-side-link {
  font-family: var(--sans); font-size: 16px; font-weight: 500; color: var(--ink);
  transition: opacity .2s;
}
.nsearch-side-link:hover { opacity: .55; }
.nsearch-main { min-width: 0; }
.nsearch-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.search-empty { font-size: 15px; color: var(--muted); padding: 4px 0 22px; }
.search-all-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 26px; padding: 15px 34px;
  background: var(--red); color: #fff;
  font-family: var(--sans); font-size: 15px; font-weight: 600; border-radius: var(--r-pill);
  transition: opacity .2s;
}
.search-all-btn:hover { opacity: .78; }

/* Sin texto escrito el panel baja sólo con el campo: el padding de abajo de la
   barra iguala al de arriba para que quede centrado en la franja. */
.nav-search-inner:not(:has(.nsearch-body)) .nsearch-bar { padding-bottom: 22px; }

@media (max-width: 1024px) {
  .nsearch-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nsearch-body--results:has(.nsearch-side) { grid-template-columns: 150px minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .nsearch-bar { padding-top: 16px; padding-bottom: 12px; }
  .nsearch-field { padding: 11px 18px; }
  .nsearch-body { padding-top: 12px; }
  /* La columna de categorías pasa a ser una fila arriba de la grilla. */
  .nsearch-body--results,
  .nsearch-body--results:has(.nsearch-side) { grid-template-columns: minmax(0, 1fr); }
  .nsearch-side { flex-direction: row; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 22px; }
  .nsearch-side .nsearch-label { width: 100%; margin-bottom: 0; }
  .nsearch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .search-all-btn { width: 100%; }
}

/* ============================================================
   BOTONES — pill
   ============================================================ */
/* Los botones NO llevan borde de color: el color lo pone el relleno. El borde
   transparente queda sólo para no cambiar la geometría (los 1.5px cuentan en el
   alto). Y el hover es SIEMPRE opacidad — nunca un salto a otro color.
   El relleno por defecto es el ROJO de la marca: el negro dejó de hacer de
   primario (quedaba como si el acento fuese el negro). El negro sobrevive sólo
   como fondo de bandas/cabeceras y como estado "ya agregado" de la ficha. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 600; font-size: 15px; white-space: nowrap;
  padding: 14px 28px;
  border: 1.5px solid transparent;
  background: var(--red); color: #fff;
  border-radius: var(--r-pill);
  transition: opacity .2s, transform .08s, box-shadow .2s;
  cursor: pointer;
}
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }
.btn:hover { opacity: .78; }
.btn-red { background: var(--red); color: #fff; }
/* Negro explícito, para lo que NO es la acción principal. */
.btn-dark { background: var(--ink); color: var(--on-ink); }
.btn-light { background: var(--surface); color: var(--ink); }
/* "Outline" sin línea: se distingue por el relleno gris clarito. */
.btn-outline { background: rgba(255,255,255,0.16); color: inherit; }
.btn-outline-dark { background: var(--surface); color: var(--ink); }
.btn-glass {
  background: rgba(255,255,255,0.14);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  color: #fff;
}
.btn-block { width: 100%; }
.btn-lg { padding: 17px 34px; font-size: 16px; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 15px; white-space: nowrap;
  color: var(--ink);
  transition: gap .2s, opacity .2s;
}
.link-arrow:hover { gap: 14px; opacity: .62; }

/* ============================================================
   PLACEHOLDERS DE IMAGEN
   ============================================================ */
.ph {
  position: relative;
  background: linear-gradient(135deg, #EFEFEF 0%, #DBDBDB 100%);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.ph::before {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(115deg, rgba(0,0,0,0.035) 0 2px, transparent 2px 24px);
}
.ph .ph-glyph { width: 54%; max-width: 240px; opacity: .26; color: var(--ink); position: relative; z-index: 1; }
.ph .ph-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.ph .ph-code { display: none; }
.ph.tone-dark { background: linear-gradient(135deg, #2B2B2B 0%, #131313 100%); }
.ph.tone-dark::before { background-image: repeating-linear-gradient(115deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 24px); }
.ph.tone-dark .ph-glyph { color: #fff; opacity: .22; }
.ph.tone-dark .ph-code { color: rgba(255,255,255,0.45); }
.ph.tone-choco { background: linear-gradient(135deg, #C9B59C 0%, #9C8163 100%); }
.ph.tone-choco .ph-glyph { color: #3A2817; opacity: .3; }
.ph.tone-rosa { background: linear-gradient(135deg, #EFC9D5 0%, #D98EA6 100%); }
.ph.tone-rosa .ph-glyph { color: #7A2E45; opacity: .32; }
.ph.tone-red { background: linear-gradient(135deg, var(--red-bright) 0%, var(--red-deep) 100%); }
.ph.tone-red .ph-glyph { color: #fff; opacity: .3; }

/* ============================================================
   HERO — full bleed
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  color: #fff;
  overflow: hidden;
  background: var(--ink);
}
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg .ph { position: absolute; inset: 0; }
.hero-bg .ph-glyph { width: min(60%, 760px); max-width: none; opacity: .26; }
.hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 80% 30%, rgba(237,27,45,0.28) 0%, rgba(237,27,45,0) 55%),
    linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.12) 48%, rgba(0,0,0,.34) 100%);
}
.hero-inner {
  position: relative; z-index: 2;
  padding: 0 var(--pad) clamp(48px, 7vw, 112px);
  max-width: 980px;
}
.hero h1, .hero .hero-ph-title {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(30px, 4vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0;
}
.hero h1 .red { color: var(--red-bright); }
.hero-sub { max-width: 52ch; margin-top: 22px; font-size: clamp(16px, 1.5vw, 20px); line-height: 1.5; color: rgba(255,255,255,.82); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }

/* Hero de Nazaret: título, bajada y botón centrados, en el medio de la foto.
   El margin-top compensa la altura del header fijo para que el texto quede
   ópticamente centrado en el área visible, no en la sección completa.
   Si cambiás esto, espejalo en el critical-css de index.php. */
.hero.hero-center { align-items: center; justify-content: center; text-align: center; }
.hero.hero-center .hero-inner { max-width: 980px; margin-inline: auto; padding-bottom: 0; margin-top: calc(var(--head-h) / 2); }
.hero.hero-center .hero-sub { margin-inline: auto; }
.hero.hero-center .hero-cta { justify-content: center; }
/* Óvalo oscuro detrás del texto (el banner de "Tres metales" de Nazaret hace lo
   mismo): con el copy al centro, el degradado lateral de antes dejaba el título
   sobre la parte más clara de la foto. */
.hero.hero-center .hero-bg::after {
  background:
    radial-gradient(ellipse 60% 48% at 50% 54%, rgba(0,0,0,.52) 0%, rgba(0,0,0,.30) 52%, rgba(0,0,0,0) 82%),
    linear-gradient(to bottom, rgba(0,0,0,.22) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,.28) 100%);
}
.hero-eyebrow { font-size: clamp(13px,1.3vw,17px); font-weight: 600; color: #fff; margin-bottom: 14px; }

/* ============================================================
   CARRUSEL horizontal (rail estilo Nike)
   ============================================================ */
/* padding lateral en el wrap (no en el scroller): garantiza margen izq/der como las categorías */
/* Medio ritmo arriba y abajo, como toda sección (ver --sec-y). Tenía 0 abajo y
   quedaba pegado a lo que viniera después si esa sección tampoco ponía aire
   arriba — es lo que pasaba con la banda del CTA, tanto en la portada como
   debajo de "También te podría gustar" en la ficha. */
.rail-wrap { padding-block: var(--sec-y); padding-inline: var(--pad); }
/* El ancho útil de un .container (--maxw menos su --pad de cada lado): con el
   --maxw entero, pasando los 1760px el título quedaba corrido hacia afuera
   respecto de las secciones de al lado. */
.rail-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  max-width: calc(var(--maxw) - 2 * var(--pad)); margin: 0 auto clamp(20px,2.4vw,32px);
}
.rail-head-left { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.rail-head .rail-title { font-family: var(--display); font-weight: 800; font-size: clamp(30px, 4.4vw, 60px); line-height: .98; letter-spacing: -.025em; margin: 0; }
/* Flechas dentro del carrusel: prev a la izquierda, next a la derecha, centradas en vertical */
.rail-viewport { position: relative; }
/* --rail-arrow-y lo calcula el Carousel: el centro de la foto de la card. */
.rail-btn {
  position: absolute; top: var(--rail-arrow-y, 50%); transform: translateY(-50%); z-index: 4;
  width: 48px; height: 48px; border-radius: 999px;
  background: var(--paper); color: var(--ink);
  border: none;
  box-shadow: 0 2px 12px rgba(11,11,11,.12);
  display: inline-flex; align-items: center; justify-content: center;
  transition: opacity .25s;
}
.rail-btn--prev { left: 12px; }
.rail-btn--next { right: 12px; }
.rail-btn:disabled { opacity: .3; cursor: not-allowed; pointer-events: none; }
/* Desktop (puntero fino): ocultas por defecto, aparecen al hacer hover sobre el carrusel */
@media (hover: hover) and (pointer: fine) {
  .rail-viewport .rail-btn { opacity: 0; pointer-events: none; }
  .rail-viewport:hover .rail-btn { opacity: 1; pointer-events: auto; }
  .rail-viewport:hover .rail-btn:hover { opacity: .72; }
  .rail-viewport:hover .rail-btn:disabled { opacity: .3; pointer-events: none; }
}
.rail-link { display: none; }
/* El riel llega hasta el borde del bloque (margen negativo = el --pad del
   .rail-wrap) y devuelve ese aire como padding y scroll-padding: la primera card
   sigue alineada con el título, pero al deslizar las cards salen por el borde
   en vez de cortarse contra una línea invisible a 18–64px del costado.
   Pasando --maxw ese aire crece hasta el borde del contenedor, así la primera
   card sigue alineada con el título y con el resto de la página. Los dos % se
   miden contra cajas distintas: el padding contra el .rail-viewport (100vw
   menos los dos --pad) y el scroll-padding contra el propio riel (100vw). */
.rail {
  display: flex; gap: 12px;
  align-items: stretch;
  overflow-x: auto; scroll-snap-type: x mandatory;
  margin-inline: calc(var(--pad) * -1);
  padding-inline: max(var(--pad), calc(50% - var(--maxw) / 2 + 2 * var(--pad)));
  scroll-padding-inline: max(var(--pad), calc(50% - var(--maxw) / 2 + var(--pad)));
  padding-bottom: 8px;
  scrollbar-width: none; -ms-overflow-style: none;
  scroll-behavior: smooth;
}
.rail::-webkit-scrollbar { display: none; }
/* Ancho de card del carrusel = ancho de la card del catálogo por breakpoint (paridad home↔tienda) */
/* height:auto NO es cosmético: .product trae height:100%, que en la grilla resuelve
   contra el alto (definido) de la fila, pero acá desactiva el stretch del flex —un
   cross-size porcentual no es `auto`— y encima resuelve contra un .rail de alto
   indefinido. Resultado: cada ficha se dimensionaba por su contenido y bastaba un
   nombre de dos renglones para que su CTA quedara más abajo que la de al lado.
   Con auto vuelve el stretch, todas cierran al alto de la más alta y el
   margin-top:auto de .product-cta apoya el botón abajo, igual que en .pgrid. */
/* Mismos escalones que .pgrid: 4 · 3 · 2. Se descuentan los (n-1) gaps para que
   entren n cards justas en el ancho útil. */
.rail .product { flex: 0 0 clamp(260px, 22vw, 340px); align-self: stretch; height: auto; scroll-snap-align: start; padding-bottom: 4px; }
/* Arriba de --maxw el ancho útil deja de crecer: medido contra 100vw, en
   pantallas anchas las cuatro cards se pasaban del borde del contenedor. */
@media (min-width: 1201px) { .rail .product { flex-basis: calc((min(100vw, var(--maxw)) - 2 * var(--pad) - 36px) / 4); } }
@media (max-width: 1200px) { .rail { gap: 10px; } .rail .product { flex-basis: calc((100vw - 2 * var(--pad) - 20px) / 3); } }
@media (max-width: 640px)  { .rail .product { flex-basis: calc((100vw - 2 * var(--pad) - 10px) / 2); } }

/* ============================================================
   BLOQUE PROMO full-bleed (editorial Nike)
   ============================================================ */
.promo {
  position: relative; min-height: clamp(440px, 64vh, 720px);
  display: flex; align-items: flex-end; justify-content: center;
  text-align: center; color: #fff; overflow: hidden;
  background: var(--ink);
}
.promo .ph { position: absolute; inset: 0; }
.promo .ph-glyph { width: min(54%, 640px); max-width: none; opacity: .24; }
.promo::after { content:''; position:absolute; inset:0; background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,0) 55%); }
.promo-inner { position: relative; z-index: 2; padding: 0 var(--pad) clamp(40px,6vw,80px); max-width: 880px; }
.promo-eyebrow { font-size: 16px; font-weight: 600; color: rgba(255,255,255,.86); margin-bottom: 14px; }
.promo h2 { font-family: var(--display); font-weight: 900; font-size: clamp(40px,7vw,108px); line-height: .94; letter-spacing: -.03em; margin: 0; }
.promo p { color: rgba(255,255,255,.85); font-size: 18px; max-width: 50ch; margin: 18px auto 0; }
.promo .hero-cta { justify-content: center; }

/* ============================================================
   SECCIONES
   ============================================================ */
.section { padding-block: clamp(56px, 7vw, 116px); }
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  margin-bottom: clamp(28px, 4vw, 52px);
}
.section-title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(32px, 4.6vw, 64px);
  line-height: .98; margin: 0; letter-spacing: -.025em;
}
.section-title .red { color: var(--red); }

/* ——— Cabecera de sección estilo Nazaret (cr-head / mat-head) ——— */
.cr-head, .mat-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  margin-bottom: clamp(28px, 3.5vw, 48px);
}
.cr-head-left { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.cr-title, .mat-headline {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(30px, 4.4vw, 60px); line-height: .98;
  letter-spacing: -.025em; margin: 0; text-transform: uppercase;
}
.cr-title .red, .mat-headline .red { color: inherit; }

/* ——— Categorías (showcase de cards con imagen + overlay) ——— */
/* ——— Secciones "Elegí tu rubro" y "Elegí por línea" — misma estética que la product card ——— */
.cat-showcase { padding-block: var(--sec-y); }

/* El hero va a sangre y no aporta medio ritmo como las demás: la sección que le
   sigue pone el aire entero para que ese hueco mida igual que el resto. */
.hero + .rail-wrap,
.hero + .cat-showcase,
.hero + .mosaic-wrap,
.hero + .banner-duo { padding-top: calc(var(--sec-y) * 2); }
.hero + .trust,
.hero + .ko-reviews,
.hero + .cta-band { margin-top: calc(var(--sec-y) * 2); }
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

#material { padding-top: clamp(40px, 5vw, 64px); }
/* Mosaico estilo Nike: card grande a la izquierda + dos apiladas a la derecha */
.mat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mat-tile { padding: 0; }
.mat-tile .product-media { margin-bottom: 0; height: 100%; aspect-ratio: 3 / 4; }
.mat-overlay {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: clamp(16px, 1.8vw, 28px);
}
.mat-tile-title {
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(1.15rem, 1.6vw, 1.6rem); line-height: 1.05;
  letter-spacing: -.01em; color: #fff; margin: 0;
  text-shadow: 0 1px 12px rgba(0,0,0,.4);
}

/* .cat-card es <button>, .mat-tile es <div>; ambos reusan .product / .product-media */
.cat-card { width: 100%; text-align: left; font: inherit; color: inherit; border: none; background: var(--paper); padding-bottom: 0; }

/* Categorías: título + botón DEBAJO de la imagen (no encima). El gradiente
   .cat-overlay queda sólo para .mat-tile, que sí lleva texto sobre la foto. */
.cat-card .product-media { margin-bottom: 0; }
.cat-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(8,8,7,.42) 0%, rgba(8,8,7,.04) 55%, rgba(8,8,7,.16) 100%);
}
.cat-info {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 16px; padding: 22px 12px 4px;
}
.cat-title {
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(1.3rem, 2vw, 1.9rem); line-height: 1.05;
  text-transform: uppercase; letter-spacing: -.01em; color: var(--ink); margin: 0;
}
.cat-info .btn { font-family: var(--sans); pointer-events: none; }
/* La card entera es el botón: el hover del CTA se dispara desde cualquier lado. */
.cat-card:hover .cat-info .btn { opacity: .78; }

/* Bloque bajo la imagen (usado por "Elegí por línea"): título mayúsculas + botón pill */
.sec-info { padding: 16px 12px 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; font-family: var(--sans); }
.sec-title {
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(1.3rem, 1.9vw, 1.8rem); line-height: 1.05;
  text-transform: uppercase; letter-spacing: -.01em; color: var(--ink); margin: 0;
}
.sec-blurb { font-family: var(--sans); font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0 auto; max-width: 40ch; }
.sec-info .btn { font-family: var(--sans); }

@media (max-width: 1024px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
@media (max-width: 640px) {
  .cat-grid { grid-template-columns: 1fr; }
  .mat-grid { grid-template-columns: 1fr; gap: 12px; }
  .mat-tile { max-width: none; margin: 0; width: 100%; }
  .mat-tile:first-child { grid-row: auto; }
  .mat-tile:first-child .product-media,
  .mat-tile:not(:first-child) .product-media { aspect-ratio: 16 / 9; }
  .cr-head, .mat-head { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ——— Dúo de banners editoriales full-bleed (estilo Nike) ——— */
.banner-duo {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  padding-block: var(--sec-y);
  padding-inline: var(--pad); max-width: var(--maxw); margin-inline: auto;
}
.banner {
  position: relative; overflow: hidden;
  aspect-ratio: 3 / 4;
  display: flex; align-items: flex-end;
  background: var(--ink); cursor: pointer;
}
.banner-plain { cursor: default; }
.banner .ph { position: absolute; inset: 0; }
.banner .ph-glyph { width: min(60%, 520px); max-width: none; opacity: .16; }
.banner .ph.tone-dark { background: linear-gradient(150deg, #2a2a2c 0%, #111 60%, #050505 100%); }
.banner .ph.tone-red  { background: linear-gradient(150deg, #b71a1a 0%, #7f0f0f 55%, #3a0808 100%); }
.banner::after { content:''; position:absolute; inset:0; background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 45%); }
.banner-content {
  position: relative; z-index: 2;
  padding: clamp(24px, 3vw, 48px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 18px;
}
.banner-title {
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(20px, 2vw, 28px); color: #fff; margin: 0;
  text-shadow: 0 1px 12px rgba(0,0,0,.4);
}
@media (max-width: 640px) {
  .banner-duo { grid-template-columns: 1fr; }
  .banner { aspect-ratio: 4 / 5; }
}

/* ——— Trío editorial (mismas cards que "Elegí tu rubro") ——— */
.editorial { padding-block: clamp(12px, 2vw, 24px); }
.editorial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.editorial-card { cursor: pointer; }
.editorial-card .product-media { margin-bottom: 0; }
.editorial-card .product-media .ph-img { object-fit: cover; padding: 0; mix-blend-mode: normal; }
.editorial-overlay {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  gap: 12px; padding: clamp(18px, 2vw, 30px);
  background: linear-gradient(to top, rgba(8,8,7,.62) 0%, rgba(8,8,7,.16) 42%, rgba(8,8,7,0) 68%);
}
/* La bajada es una LÍNEA DE APOYO del título, no un segundo título: va un par de
   escalones más chica y en un blanco apagado. Antes competía con el título en
   tamaño y peso, y la card no tenía jerarquía. Misma escala que .mo-desc, así el
   layout `overlay` y el mosaico se leen igual. */
.editorial-caption {
  font-family: var(--sans); font-weight: 400;
  font-size: clamp(14px, 1.05vw, 16px); line-height: 1.5;
  color: rgba(255,255,255,.86); margin: 0; max-width: 34ch;
  text-shadow: 0 1px 10px rgba(0,0,0,.45);
}
.editorial-overlay .mat-tile-title { font-size: clamp(1.35rem, 2.1vw, 2rem); font-weight: 800; }
@media (max-width: 1024px) { .editorial-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
@media (max-width: 640px)  { .editorial-grid { grid-template-columns: 1fr; } }

/* ——— Mosaico: una foto grande + chicas debajo (layout `mosaic`) ———
   Geometría del bloque "Tres metales. Un solo proveedor." de Nazaret: la
   primera card va a lo ancho, baja (3:1) y con el texto CENTRADO; las
   siguientes van a la mitad del ancho (4:3) con el texto abajo a la izquierda.
   Las fotos van a sangre y separadas por 8px.
   Los encuadres por dispositivo (desktop 3:1 · 4:3, iPad 2:1 · 1:1, celular
   1:1 · 3:4) son los que se le piden al cliente en el panel (admin.html,
   cardEditor): si acá cambia una proporción, cambiá también esos tamaños. */
.mosaic-wrap { padding-block: var(--sec-y); }
/* A sangre, como el hero: sin --pad ni --maxw. El título sí queda dentro del
   .container (lo envuelve Home.jsx), así que alinea con el resto de las
   cabeceras de sección aunque las fotos lleguen al borde de la pantalla. */
.mosaic { display: grid; gap: 8px; }
/* Dos columnas SIEMPRE, también en teléfono (Nazaret pone Acero y Goldfilled
   lado a lado en el celular). Apiladas, tres fotos verticales a todo el ancho
   eran casi dos pantallas de scroll para elegir un rubro. */
.mo-quad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mo-quad[data-n="1"] { grid-template-columns: minmax(0, 1fr); }

.mo-tile {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end;
  background: var(--ink); cursor: pointer;
}
.mo-tile--static { cursor: default; }
.mo-tile .ph { position: absolute; inset: 0; }
/* A sangre y sin multiply: son fotos editoriales, no la muestra sobre fondo
   blanco de la ficha de producto. */
.mo-tile .ph-img { object-fit: cover; padding: 0; mix-blend-mode: normal; }
.mo-tile .ph-glyph { width: min(50%, 420px); max-width: none; opacity: .16; }
.mo-tile .ph.tone-dark { background: linear-gradient(150deg, #2a2a2c 0%, #111 60%, #050505 100%); }
.mo-tile .ph.tone-red  { background: linear-gradient(150deg, #b71a1a 0%, #7f0f0f 55%, #3a0808 100%); }
/* Degradado propio (y no el de .ph): el texto tiene que leerse sobre cualquier
   foto que suba el cliente, clara u oscura. */
.mo-tile::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.22) 40%, rgba(0,0,0,0) 72%);
}
@media (hover: hover) and (pointer: fine) {
  .mo-tile:not(.mo-tile--static):hover .ph-img { transform: scale(1.03); }
  .mo-tile .ph-img { transition: transform .5s var(--ease); }
}

/* NO usar max-height para topearlas: junto a aspect-ratio el navegador encoge la
   caja ENTERA para conservar la proporción, así que la foto dejaba de llegar a
   los bordes. El techo lo pone la proporción. */
.mo-lead { aspect-ratio: 3 / 1; }
.mo-cell { aspect-ratio: 4 / 3; }

/* El padding lateral es var(--pad), el mismo margen del nav y del hero: sin la
   caja del contenedor, es lo único que mantiene el texto de la celda izquierda
   alineado con el resto de la página. */
.mo-overlay {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 12px; padding: clamp(24px, 2.6vw, 46px) var(--pad);
}
.mo-title {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(26px, 3vw, 46px); line-height: 1;
  letter-spacing: -.025em;
  color: #fff; margin: 0;
  text-shadow: 0 1px 14px rgba(0,0,0,.45);
}
.mo-desc {
  font-family: var(--sans); font-weight: 400;
  font-size: clamp(14px, 1.15vw, 18px); line-height: 1.45;
  color: rgba(255,255,255,.9); margin: 0; max-width: 38ch;
  text-shadow: 0 1px 10px rgba(0,0,0,.45);
}
.mo-btn { font-family: var(--sans); margin-top: 6px; }
/* La card entera es clickeable: el hover del botón se dispara desde cualquier
   punto de la foto, igual que en .cat-card. */
@media (hover: hover) and (pointer: fine) {
  .mo-tile:not(.mo-tile--static):hover .mo-btn { opacity: .78; }
}

/* La grande: copy centrado en el medio de la foto, un escalón más de título.
   Óvalo oscuro detrás del texto en vez del degradado desde abajo, que no llega
   al centro (el mismo velo que usa Nazaret en ese banner). */
.mo-lead { align-items: center; justify-content: center; }
/* El óvalo termina en un velo parejo y no en transparente: sobre una pared
   blanca (la foto de Dama) el borde del óvalo se veía como una mancha gris. */
.mo-lead::after {
  background: radial-gradient(ellipse 75% 90% at 50% 50%, rgba(0,0,0,.34) 0%, rgba(0,0,0,.18) 55%, rgba(0,0,0,.10) 100%);
}
.mo-lead .mo-overlay { align-items: center; text-align: center; padding: clamp(32px, 5vw, 72px); }
.mo-lead .mo-title { font-size: clamp(34px, 4.2vw, 64px); }
.mo-lead .mo-desc  { max-width: 46ch; }

/* iPad: la grande pasa a 2:1 y las chicas a cuadradas, como Nazaret. */
@media (max-width: 1024px) {
  .mo-lead { aspect-ratio: 2 / 1; }
  .mo-cell { aspect-ratio: 1 / 1; }
}
/* Teléfono: la grande cuadrada con el texto abajo a la izquierda y las chicas
   verticales (3:4) de a dos. A media pantalla la píldora blanca no entra: el CTA
   pasa a link subrayado, el mismo de las cards de categorías. */
@media (max-width: 640px) {
  .mo-lead { aspect-ratio: 1 / 1; align-items: flex-end; justify-content: flex-start; }
  .mo-lead::after { background: linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.22) 40%, rgba(0,0,0,0) 72%); }
  .mo-lead .mo-overlay { align-items: flex-start; text-align: left; padding: 28px var(--pad) 30px; gap: 10px; }
  .mo-lead .mo-title { font-size: clamp(32px, 9.5vw, 44px); }
  .mo-lead .mo-desc  { font-size: 15px; }
  .mo-cell { aspect-ratio: 3 / 4; }
  .mo-cell .mo-overlay { padding: 14px 13px 14px; gap: 8px; }
  .mo-cell .mo-title { font-size: clamp(19px, 5.2vw, 28px); letter-spacing: -.02em; }
  /* La bajada a media pantalla se come cuatro renglones y empuja el título
     contra la foto: el nombre y el CTA alcanzan. */
  .mo-cell .mo-desc { display: none; }
  .mo-quad[data-n="1"] .mo-cell { aspect-ratio: 1 / 1; }
  .mo-tile .mo-btn {
    position: relative; display: inline-block; height: auto; margin-top: 2px;
    padding: 0 0 5px; background: none; color: #fff; border: 0; border-radius: 0;
    font-size: 15px; font-weight: 600; text-shadow: 0 1px 12px rgba(0,0,0,.3);
  }
  .mo-tile .mo-btn::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0;
    height: 2px; background: rgba(255,255,255,.9);
  }
  .mo-cell .mo-btn { font-size: clamp(12.5px, 3.5vw, 15px); }
}

/* ============================================================
   TARJETA DE PRODUCTO + GRILLA (gap moderno)
   ============================================================ */
.pgrid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  gap: 12px;
}
/* Columnas por breakpoint: 4 (desktop) · 3 (iPad) · 2 (teléfono ≤640).
   El corte en 1200 y no en 1024: el catálogo lleva el sidebar de filtros de
   260px hasta 1024, así que a 4 columnas la card quedaría de ~180px. Con 1200
   todos los iPad (retrato 744–834, apaisado 1080–1194) caen en 3 y las notebook
   (1280 para arriba) en 4. */
@media (max-width: 1200px) { .pgrid { --cols: 3; gap: 10px; } }
@media (max-width: 640px)  { .pgrid { --cols: 2; } }

/* ============================================================
   PRODUCT CARD  (portada de Kegam — una card, dos contenedores: .pgrid y .rail)
   ============================================================ */
/* height:100%: las fichas de una fila tienen que cerrar a la misma altura. Con
   .product-cta en margin-top:auto el botón se apoya abajo; sin el 100% el botón
   sigue al texto y basta que un nombre ocupe dos renglones para que las cards de
   una fila terminen desparejas. */
/* La ficha sigue en --paper: el cuerpo (nombre, precio, CTA) se funde con el
   crema de la página. El único que cambia de color es el pozo de la foto
   (.product-media / .ph, abajo), que va en blanco. */
.product {
  background: var(--paper);
  padding: 0 0 22px;
  display: flex; flex-direction: column;
  height: 100%;
  position: relative;
  cursor: pointer;
}
/* Link que cubre la ficha entera (ver Shop.jsx). Va por debajo de la CTA
   (z-index 3) y del nombre (2), así que no les roba el clic. */
.product-link { position: absolute; inset: 0; z-index: 1; display: block; }
.product-media {
  position: relative;
  aspect-ratio: 1 / 1.18;
  overflow: hidden;
  margin-bottom: 14px;
  /* Sólo se ve mientras la foto carga (la .ph la tapa al montarse). Va apenas
     por debajo del blanco del pozo —no el gris de antes— para que el paso de
     placeholder a foto no sea un salto de tono, pero con contraste suficiente
     como para que el barrido de .product-shimmer se lea. */
  background: linear-gradient(135deg, #f4f4f5 0%, #efeff1 45%, #e8e8eb 100%);
}
.product-media .ph { position: absolute; inset: 0; transition: opacity .5s ease; }
/* Cruce a la segunda foto en hover. Sólo con puntero fino: en touch no hay hover
   y el estado quedaría pegado tras el primer toque. */
.product-media .ph.alt { opacity: 0; }
.product-media .ph.img-loading { opacity: 0; }
@media (hover: hover) and (pointer: fine) {
  .product:hover .product-media .ph.primary { opacity: 0; }
  .product:hover .product-media .ph.alt { opacity: 1; }
  .product--no-alt:hover .product-media .ph.primary { opacity: 1; }
}

/* Barrido de carga. Viaja con transform y no con background-position:
   background-position NO es compositable —el navegador repinta en el hilo
   principal en cada frame— y como las fotos van con loading="lazy" siempre hay
   varios shimmers vivos justo mientras se scrollea la grilla, compitiendo con la
   rasterización del propio scroll. transform lo resuelve el compositor. */
@keyframes shimmer-sweep {
  0%   { transform: translateX(-66.67%); }
  100% { transform: translateX(200%); }
}
.product-shimmer { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.product-shimmer::after {
  content: '';
  position: absolute; top: 0; bottom: 0; left: 0; width: 60%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
  animation: shimmer-sweep 1.5s ease-in-out infinite;
}
.product-media .ph,
.product-media .ph.tone-dark,
.product-media .ph.tone-choco,
.product-media .ph.tone-rosa,
.product-media .ph.tone-red { background: linear-gradient(135deg, #f4f4f5 0%, #efeff1 45%, #e8e8eb 100%); }
/* Con foto, el pozo va en blanco: la foto viene con fondo blanco y el multiply de
   .ph-img la deja intacta, así que la card se lee como una sola superficie. El
   degradé de arriba queda sólo para los modelos sin foto cargada, donde el pozo
   liso se vería como un hueco. */
.product-media .ph:has(.ph-img) { background: var(--surface); }
.product-media .ph-glyph { display: none; }
.product-media .ph::before { display: none; }
/* Foto de muestra: contenida (sin recortar ni agrandar) y con el fondo blanco
   fundido contra el fondo de la card mediante multiply.
   z-index:auto anula el z-index:1 que .ph-img trae de base (ahí sirve para pasar
   por encima de .ph::before y del glifo, que acá van en display:none). Si se deja,
   empata con .product-link —también z-index:1— y como la foto viene después en el
   DOM le gana: el clic sobre la imagen no navegaba a la ficha. */
.product-media .ph-img { object-fit: contain; padding: 12%; mix-blend-mode: multiply; z-index: auto; }
/* En cards de rubro/categoría la imagen es editorial: llena la card a sangre. */
.cat-card .product-media .ph-img,
.mat-tile .product-media .ph-img { object-fit: cover; padding: 0; mix-blend-mode: normal; }

.product-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  pointer-events: none;   /* si no, el badge se come el clic sobre .product-link */
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  padding: 6px 12px;
  background: var(--paper); color: var(--ink);
  border-radius: 6px; white-space: nowrap;
}
/* El badge se apoya sobre el pozo de la foto, que ahora es blanco: en blanco
   sobre blanco desaparecía, así que va en un tono de la paleta cálida. */
.product-badge.accent { background: var(--surface-2); color: var(--ink); }
.product-badge.sold   { background: var(--ink); color: #fff; }

/* === Agregar al pedido — barra a lo ancho debajo de la ficha ===
   Era un "+" de 36px flotando sobre la esquina de la foto: a esa escala se leía
   como un adorno de la imagen y no como la acción de compra. Ahora la card
   termina en un botón lleno, como el del detalle. */
/* El z-index va en cada estado y no en el contenedor, así el aire alrededor del
   botón sigue cayendo sobre .product-link y la card entera navega. */
.product-cta { padding: 14px 12px 0; margin-top: auto; }
.pc-add-btn,
.pc-added,
.pc-stepper {
  position: relative; z-index: 3;
  width: 100%; height: 52px;
  border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sans);
  /* Escalado contra .product-name (clamp 18–21px), no a 15px fijos: el botón es
     la acción principal de la ficha y a esa escala se leía como una nota al pie
     del nombre. */
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 600; line-height: 1;
  white-space: nowrap;
  touch-action: manipulation;
}
/* El CTA de pedido va SIEMPRE en rojo: en la ficha, en el catálogo y en los
   carruseles es la misma acción y tiene que leerse igual. */
.pc-add-btn {
  padding: 0 14px;
  background: var(--red); color: #fff;
  border: none; cursor: pointer;
  transition: opacity .2s ease;
}
.pc-add-btn svg { flex-shrink: 0; }
@media (hover: hover) and (pointer: fine) {
  .pc-add-btn:hover { opacity: .78; }
}
.pc-add-btn:active { transform: scale(.985); }

/* ——— Card de categoría (carrusel de categorías de la home) ———
   Reusa el esqueleto entero de la ficha de producto —.product, .product-media,
   .product-info, .product-cta— para que el riel de categorías y el de modelos se
   lean como la misma pieza: mismo ancho de card, mismo pozo blanco, misma barra
   abajo. Va DESPUÉS de .pc-add-btn a propósito: el color del botón se pisa por
   orden, no por especificidad.
   La card entera es un <a>, así que no lleva el .product-link superpuesto. */
a.cat-tile { text-decoration: none; color: inherit; }
.cat-tile-count {
  font-family: var(--sans); font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.4; color: var(--muted); margin-top: 4px;
}
/* Toma la geometría de .pc-add-btn (incluidos sus escalones de mobile) y también
   su color: el rojo es el acento de la marca y lo usa cualquier acción principal,
   no sólo el "Agregar al pedido". */
.cat-tile-cta { background: var(--red); color: #fff; cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  .cat-tile:hover .cat-tile-cta { opacity: .78; }
}

/* Confirmación tras agregar — ocupa el mismo lugar que el botón para que la card
   no cambie de alto al confirmar. */
/* Confirmado ya no es rojo: el rojo pasó a ser el botón, así que el estado se
   distingue en negro. */
.pc-added {
  background: var(--ink); color: #fff;
  animation: pc-cta-in .3s cubic-bezier(0.34,1.56,0.64,1) both;
}

/* Elegir cantidad antes de agregar, en el lugar del botón. Misma pill oscura que
   el stepper del carrito (.cart-qty). */
.pc-stepper {
  justify-content: flex-start; gap: 0;
  background: var(--ink); color: #fff;
  overflow: hidden;
  animation: pc-cta-in .3s cubic-bezier(0.34,1.56,0.64,1) both;
}
.pc-stepper-btn {
  width: 46px; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 300; color: #fff;
  background: transparent; border: none; border-radius: 0; cursor: pointer;
  flex-shrink: 0;
  transition: background .12s ease;
}
@media (hover: hover) and (pointer: fine) {
  .pc-stepper-btn:hover { opacity: .7; }
}
.pc-stepper-qty {
  min-width: 26px; text-align: center;
  font-size: 16px; font-weight: 500; line-height: 1;
  flex-shrink: 0;
  animation: pc-pop .26s ease both;
}
.pc-stepper-confirm {
  flex: 1 1 auto; min-width: 0; height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 0 12px;
  font-family: var(--sans);
  /* Un escalón por debajo del botón: comparte fila con el stepper y tiene que
     poder achicarse antes que él, pero sin quedar de otra escala al cambiar de
     estado. */
  font-size: clamp(15px, 1.15vw, 17px);
  font-weight: 600; color: #fff;
  background: transparent; border: none;
  border-left: 1px solid rgba(255,255,255,0.20);
  border-radius: 0; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background .12s ease;
}
@media (hover: hover) and (pointer: fine) {
  .pc-stepper-confirm:hover { opacity: .8; }
}
@keyframes pc-cta-in { from { transform: scale(0.965); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes pc-pop { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Lo que ya está en el pedido sigue viviendo sobre la foto: el botón de abajo es
   la acción, esto es sólo estado. */
.pc-cart-count {
  position: absolute; bottom: 12px; right: 12px;
  height: 32px; display: flex; align-items: center; padding: 0 12px;
  /* Crema y no blanco: la pastilla se apoya sobre el pozo de la foto, que ahora
     es blanco, y en blanco sobre blanco no se veía. */
  background: rgba(246, 243, 236, 0.92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: none; border-radius: 999px; color: var(--ink);
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  white-space: nowrap; z-index: 2; pointer-events: none;
}

/* === Info ===
   Escala de la ficha: un escalón por encima de lo que era. A 15/14 el bloque de
   texto se leía chico contra una foto que ocupa un tercio de la pantalla. */
.product-info { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 0 12px; }
/* display:block porque el nombre es un <a> (link real a la ficha, ver Shop.jsx).
   z-index 2: tiene que quedar por encima de .product-link para ser clickeable. */
.product-name { display: block; position: relative; z-index: 2; font-family: var(--sans); font-size: clamp(18px, 1.5vw, 21px); font-weight: 500; letter-spacing: -0.01em; line-height: 1.25; margin-bottom: 6px; color: inherit; text-decoration: none; }
.product-material { font-family: var(--sans); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.4; color: var(--muted); margin-top: 4px; }
.product-sku { color: var(--muted); font-size: clamp(15px, 1.2vw, 17px); }
.product-sizes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.product-size-pill { font-family: var(--sans); font-size: 11px; font-weight: 600; color: var(--ink); border: 1.5px solid var(--line-2); border-radius: 6px; padding: 2px 7px; white-space: nowrap; }
.product-price { font-family: var(--sans); font-size: clamp(17px, 1.35vw, 19px); font-weight: 500; white-space: nowrap; }
.product-swatches { display: flex; gap: 4px; margin-top: 10px; }
.product-swatches .swatch { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--line-2); }

/* Proporción de imagen por breakpoint */
@media (max-width: 820px) { .product-media { aspect-ratio: 1 / 1.45; margin-bottom: 8px; } }
@media (max-width: 640px) { .product-media { aspect-ratio: 3 / 4; } }

/* Las cards de rubro/editoriales reusan .product como contenedor pero no tienen
   CTA propia: el padding de abajo lo pone la card, no la barra. */
.cat-card .product-cta, .editorial-card .product-cta { display: none; }

/* Mobile: texto compacto + botón cómodo al tacto */
@media (max-width: 820px) {
  .product { padding: 0 0 14px; }
  .product-name { font-size: 16px; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(2 * 1.25em); }
  .product-price { font-size: 15px; }
  .product-material { font-size: 14px; }
  .product-info { gap: 6px; padding: 0 8px; }
  .product-info > :first-child { min-width: 0; flex: 1; }
  /* En grilla y riel el precio baja debajo del nombre: al ir en una columna a la
     derecha le comía el ancho al nombre justo donde menos sobra. */
  .pgrid .product-info,
  .rail .product-info { flex-direction: column; gap: 2px; }
  .pgrid .product-info > :first-child,
  .rail .product-info > :first-child { flex: 0 0 auto; width: 100%; }
  .pgrid .product-name,
  .rail .product-name { font-size: 17px; margin-bottom: 4px; }
  .pgrid .product-price,
  .rail .product-price { font-size: 16px; }
  .product-cta { padding: 12px 8px 0; }
  .pc-add-btn, .pc-added, .pc-stepper { height: 48px; font-size: 15px; }
  .pc-add-btn { gap: 6px; padding: 0 8px; }
  .pc-stepper-btn { width: 36px; font-size: 19px; }
  .pc-stepper-qty { min-width: 20px; font-size: 15px; }
  .pc-stepper-confirm { padding: 0 6px; font-size: 14px; }
  .pc-cart-count { bottom: 8px; right: 8px; height: 28px; padding: 0 10px; font-size: 12px; }
}

/* Teléfono: dos cards por fila. La ficha mide ~la mitad del ancho de pantalla
   (~160px), así que la barra de compra baja otro escalón: sin el "+" (el rótulo
   ya dice qué hace) y con el stepper más angosto. Va con nowrap, o sea que lo
   que no entra se desborda: por eso se mide contra el teléfono más chico
   (320px → card de ~137px) y no contra el promedio. */
@media (max-width: 640px) {
  .pgrid .product-name,
  .rail .product-name { font-size: 15px; }
  .pgrid .product-price,
  .rail .product-price { font-size: 14px; }
  .pgrid .product-material,
  .rail .product-material { font-size: 13px; }
  .pgrid .pc-add-btn svg,
  .rail .pc-add-btn svg { display: none; }
  .pgrid .pc-add-btn, .pgrid .pc-added, .pgrid .pc-stepper,
  .rail .pc-add-btn, .rail .pc-added, .rail .pc-stepper { height: 44px; font-size: 13px; }
  .pgrid .pc-add-btn,
  .rail .pc-add-btn { padding: 0 6px; gap: 0; }
  .pgrid .pc-stepper-btn,
  .rail .pc-stepper-btn { width: 30px; font-size: 17px; }
  .pgrid .pc-stepper-qty,
  .rail .pc-stepper-qty { min-width: 18px; font-size: 14px; }
  .pgrid .pc-stepper-confirm,
  .rail .pc-stepper-confirm { padding: 0 5px; font-size: 13px; }
  .pgrid .product-badge,
  .rail .product-badge { top: 8px; left: 8px; font-size: 12px; padding: 5px 9px; }
  .pgrid .pc-cart-count,
  .rail .pc-cart-count { font-size: 11px; height: 26px; padding: 0 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .pc-add-btn, .pc-added, .pc-stepper, .pc-cart-count { animation: none; transition: none; }
  .product-shimmer::after { animation: none; }
  .product-media .ph { transition: none; }
}

/* ============================================================
   TRANSICIÓN AL CAMBIAR DE PÁGINA (calcada de Kegam: cross-fade por opacidad)
   ============================================================ */
.page-fade { opacity: 0; transition: opacity 0.25s ease; }
.page-fade--in { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .page-fade { transition: none; }
}

/* ============================================================
   CÓMO COMPRAR (3 pasos)
   ============================================================ */
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.step { background: var(--ink); color: var(--on-ink); padding: clamp(28px,3vw,44px); border-radius: var(--r-lg); position: relative; }
.step-num { font-family: var(--display); font-weight: 900; font-size: clamp(48px,6vw,86px); line-height: .85; color: var(--red); letter-spacing: -.03em; }
.step-title { font-family: var(--display); font-weight: 800; font-size: clamp(21px,2vw,28px); margin-top: 16px; letter-spacing: -.02em; }
.step-desc { color: var(--on-ink-2); margin-top: 12px; font-size: 15px; max-width: 34ch; }

/* ——— franja de confianza ——— */
/* Crema: la franja se separa con los dos filetes, no con un bloque blanco.
   Las franjas con fondo propio piden el aire en MARGIN y no en padding: el
   padding las haría más altas en vez de despegarlas de la sección vecina. */
.trust { background: var(--paper); border-block: 1px solid var(--line); margin-block: var(--sec-y); }
.trust-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: clamp(20px,3vw,48px); padding-block: clamp(36px,4vw,56px); }
.trust-cell .v { font-family: var(--display); font-weight: 800; font-size: clamp(26px,2.4vw,38px); line-height: 1; letter-spacing: -.02em; }
.trust-cell .v .red { color: var(--red); }
.trust-cell .k { margin-top: 10px; color: var(--ink-2); font-size: 15px; max-width: 32ch; }

/* ——— CTA mayorista ——— */
/* Aire arriba en margin (es una franja con fondo). Abajo va al ras: cierra la
   página contra el pie, no es una sección más en el medio del flujo. */
.cta-band { background: var(--ink); color: #fff; margin-top: var(--sec-y); }
.cta-inner { padding: clamp(48px,6vw,96px) var(--pad); display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; max-width: var(--maxw); margin-inline: auto; }
.cta-band h2 { font-family: var(--display); font-weight: 900; font-size: clamp(34px,4.6vw,72px); line-height: .98; margin: 0; letter-spacing: -.03em; }
.cta-band p { color: rgba(255,255,255,.88); font-size: 18px; max-width: 42ch; margin-top: 18px; }
.cta-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.cta-btn { flex: 0 0 auto; }
.cta-note { color: rgba(255,255,255,.72); font-size: 13px; }

/* ============================================================
   PLP — toolbar + filtros
   ============================================================ */
.shop-hero { background: var(--paper); color: var(--ink); padding: calc(var(--head-h) + clamp(40px,5vw,80px)) var(--pad) clamp(28px,3vw,44px); }
.shop-hero h1 { font-family: var(--display); font-weight: 900; font-size: clamp(40px,6vw,96px); line-height: .96; margin: 0; letter-spacing: -.03em; }
.shop-hero h1 .red { color: var(--ink); }
.shop-hero .eyebrow { color: var(--muted); }
.shop-hero .lead { color: var(--ink-2); font-size: 17px; margin-top: 14px; max-width: 52ch; }

/* ——— Barra de filtros: pastillas + panel lateral (el patrón de Nazaret) ———
   Se fue el sidebar de 260px con casilleros: la grilla ocupa todo el ancho y
   los filtros viven en una barra sticky de pastillas ("Rubro: Dama ⌄"). Cada
   pastilla abre el MISMO panel de la izquierda mostrando sólo su dimensión;
   en mobile/iPad las pastillas se reemplazan por un botón único "Filtros" que
   abre ese panel con todos los grupos y un pie "Limpiar / Ver N modelos". */
.shop-toolbar {
  position: sticky; top: var(--head-h);
  z-index: 30;
  background: var(--paper);
  /* Hairline a sangre completa: es lo único que separa la barra de las fichas
     cuando la grilla empieza a pasar por debajo. */
  box-shadow: 0 1px 0 var(--line);
}
.shop-toolbar-inner {
  max-width: var(--maxw); margin-inline: auto;
  padding: 14px var(--pad);
  display: flex; align-items: center; gap: 16px;
}
.filter-pills {
  display: flex; gap: 10px; flex-wrap: nowrap;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  min-width: 0;
  /* overflow-x:auto arrastra overflow-y:auto, y el contenedor recorta la pastilla
     justo en su borde. El padding la aleja del corte; el margen negativo devuelve
     el alto original de la barra. */
  padding: 3px 0; margin: -3px 0;
}
.filter-pills::-webkit-scrollbar { display: none; }
.filter-pill, .filter-trigger {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  /* 44px: el mínimo de un blanco táctil en las guías de Apple. Con el padding
     solo medían 37px, y en iPad estas pastillas se tocan con el dedo. */
  min-height: 44px; padding: 0 18px;
  background: var(--surface);
  border-radius: var(--r-pill);
  font-family: var(--sans); font-size: 15px; line-height: 1;
  color: var(--ink); white-space: nowrap; cursor: pointer;
  transition: opacity .2s, background .2s, color .2s;
}
.filter-pill:hover, .filter-trigger:hover { opacity: .7; }
.filter-pill-label { color: var(--muted); font-weight: 400; }
.filter-pill-value { font-weight: 600; }
.filter-pill-chev { color: var(--muted); flex: none; transition: transform .25s var(--ease); }
.filter-pill.open .filter-pill-chev { transform: rotate(180deg); }
/* Dimensión con filtro puesto → rojo, el acento de "elegido" en todo el sitio.
   Panel abierto → negro, y gana sobre el rojo: mientras el panel está abierto
   importa más de qué pastilla salió. */
.filter-pill.on { background: var(--red); color: #fff; }
.filter-pill.on .filter-pill-label,
.filter-pill.on .filter-pill-chev { color: rgba(255,255,255,.72); }
.filter-pill.open { background: var(--ink); color: var(--on-ink); }
.filter-pill.open .filter-pill-label,
.filter-pill.open .filter-pill-chev { color: var(--on-ink-2); }

/* Botón único de filtros — sólo mobile/iPad; en desktop mandan las pastillas. */
.filter-trigger { display: none; font-weight: 600; }
.filter-trigger.open { background: var(--ink); color: var(--on-ink); }
.filter-trigger-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill);
  background: var(--red); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 1;
}
.filter-trigger.open .filter-trigger-badge { background: var(--on-ink); color: var(--ink); }

.shop-count { margin-left: auto; flex: none; font-size: 14px; color: var(--muted); }
.shop-count b { color: var(--ink); font-weight: 700; }

@media (max-width: 1024px) {
  .filter-pills { display: none; }
  .filter-trigger { display: inline-flex; }
}

/* ——— Panel de filtros (entra desde la izquierda, en las dos vistas) ——— */
.filter-scrim { position: fixed; inset: 0; z-index: 200; background: rgba(11,11,11,.32); }
.filter-drawer {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: min(420px, 100%); z-index: 201;
  background: var(--paper);
  display: flex; flex-direction: column;
  overflow: hidden;                  /* sólo scrollea el body; cabecera y pie quedan fijos */
  transform: translateX(-100%);
  box-shadow: 4px 0 40px rgba(11,11,11,.12);
  /* visibility con retardo: cerrado el panel queda fuera de pantalla pero en el
     DOM, y sin esto sus botones seguían atrapando el tab. */
  visibility: hidden;
  transition: transform .38s cubic-bezier(.4,0,.1,1), visibility 0s linear .38s;
}
.filter-drawer.open {
  transform: none; visibility: visible;
  transition: transform .38s cubic-bezier(.4,0,.1,1), visibility 0s;
}
/* En celulares anchos el tope de 420px dejaba una franja del catálogo asomando
   a la derecha; ahí el panel tapa toda la pantalla. */
@media (max-width: 640px) { .filter-drawer { width: 100%; box-shadow: none; } }

.filter-drawer-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px var(--pad); min-height: 68px;
  border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.filter-drawer-title { font-family: var(--display); font-weight: 800; font-size: 24px; letter-spacing: -.02em; color: var(--ink); }
.filter-drawer-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-right: -8px; color: var(--ink);
  border-radius: var(--r-pill); transition: opacity .2s;
}
.filter-drawer-close:hover { opacity: .55; }

.filter-drawer-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--pad); }
.filter-drawer-group { border-bottom: 1px solid var(--line); padding: 22px 0 14px; }
.filter-drawer-group:last-child { border-bottom: none; }
.filter-drawer-group-label { font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); margin-bottom: 10px; }
.filter-drawer-opt {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 0; border-bottom: 1px solid var(--line);
  font-family: var(--sans); font-size: 15px; text-align: left;
  color: var(--ink-2); transition: opacity .2s;
}
.filter-drawer-opt:last-child { border-bottom: none; }
.filter-drawer-opt:hover { opacity: .6; }
/* El tilde se dibuja siempre y sólo cambia de opacidad: así la fila no se
   reacomoda al elegirla. */
.filter-drawer-opt::after { content: '\2713'; font-size: 13px; color: var(--red); opacity: 0; transition: opacity .2s; }
.filter-drawer-opt.active { color: var(--ink); font-weight: 600; }
.filter-drawer-opt.active::after { opacity: 1; }
.filter-drawer-opt-label { display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; }
.filter-drawer-count { font-size: 12.5px; color: var(--muted); font-weight: 500; }

/* Talle: la única dimensión multi-selección, y como son números va en grilla de
   fichas (mismo relleno blanco / rojo elegido que el resto del sitio). */
.filter-drawer-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 8px; padding-bottom: 6px; }
.filter-drawer-chip {
  display: flex; align-items: center; justify-content: center; min-height: 44px;
  background: var(--surface); padding: 0 4px; text-align: center;
  font-weight: 600; font-size: 14.5px; border-radius: var(--r-md);
  transition: opacity .15s, background .15s, color .15s;
}
.filter-drawer-chip:hover { opacity: .7; }
.filter-drawer-chip.on { background: var(--red); color: #fff; }

.filter-drawer-foot {
  flex-shrink: 0; display: flex; flex-direction: column; gap: 6px;
  padding: 14px var(--pad);
  padding-bottom: max(18px, env(safe-area-inset-bottom, 18px));
  border-top: 1px solid var(--line);
}
.filter-drawer-clear { font-size: 14px; font-weight: 600; color: var(--muted); padding: 8px; text-align: center; transition: opacity .2s; }
.filter-drawer-clear:hover { opacity: .6; }
.filter-drawer-apply {
  width: 100%; padding: 15px 24px;
  background: var(--red); color: #fff;
  font-family: var(--sans); font-size: 15px; font-weight: 600; border-radius: var(--r-pill);
  transition: opacity .2s;
}
.filter-drawer-apply:hover { opacity: .78; }

/* La grilla ya no vive dentro de un grid con sidebar: se centra sola. */
.shop-grid-wrap {
  max-width: var(--maxw); margin-inline: auto;
  padding: clamp(18px,2.2vw,28px) var(--pad) clamp(56px,7vw,104px);
}
.shop-empty { padding: 80px var(--pad); text-align: center; }
.shop-empty .display { font-size: 40px; }

/* Filtros aplicados: fichas con ✕ arriba de la grilla, como las de Nike. Mismo
   relleno blanco que las pastillas; el ✕ es parte del blanco táctil entero. */
.shop-active { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: clamp(16px, 1.8vw, 24px); }
.shop-active-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px 0 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill);
  font-size: 14px; font-weight: 600; color: var(--ink);
  transition: background .2s, border-color .2s;
}
.shop-active-chip svg { color: var(--muted); transition: color .2s; }
.shop-active-chip:hover { border-color: var(--ink); }
.shop-active-chip:hover svg { color: var(--ink); }
.shop-active-clear {
  min-height: 36px; padding: 0 8px; font-size: 14px; font-weight: 600; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px; transition: color .2s;
}
.shop-active-clear:hover { color: var(--ink); }
@media (max-width: 640px) {
  /* En el teléfono se tocan con el dedo: vuelven a los 44px. */
  .shop-active-chip, .shop-active-clear { min-height: 44px; }
}

/* ——— Texto del catálogo, al pie de la grilla ———
   El bloque de texto de las páginas de categoría de Nike: un título, dos o tres
   párrafos que explican la vista y, al costado, las categorías vecinas como
   links. Va sobre una superficie apenas más oscura que el papel y con filete
   arriba: se lee como el cierre del catálogo, no como una sección más de fichas. */
.shop-seo { border-top: 1px solid var(--line); background: var(--paper); }
.shop-seo-inner {
  max-width: var(--maxw); margin-inline: auto;
  padding: clamp(48px, 6vw, 96px) var(--pad);
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 112px); align-items: start;
}
.shop-seo-title {
  font-family: var(--display); font-weight: 800; letter-spacing: -.025em;
  font-size: clamp(28px, 3vw, 44px); line-height: 1.02; margin: 0 0 20px; color: var(--ink);
}
.shop-seo-copy p { max-width: 62ch; margin: 0 0 14px; font-size: 16px; line-height: 1.65; color: var(--ink-2); }
.shop-seo-copy p.shop-seo-lead { font-size: 18px; line-height: 1.55; color: var(--ink); }
.shop-seo-copy a {
  color: var(--ink); font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--line-2);
  text-underline-offset: 3px; text-decoration-thickness: 1px;
  transition: text-decoration-color .2s, color .2s;
}
.shop-seo-nav { display: grid; gap: 32px; }
.shop-seo-group-title { margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--muted); }
.shop-seo-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.shop-seo-links a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  background: var(--surface); border-radius: var(--r-pill);
  font-size: 14.5px; font-weight: 500; color: var(--ink);
  transition: background .2s, color .2s;
}
.shop-seo-n { font-size: 12.5px; color: var(--muted); font-weight: 500; transition: color .2s; }
/* Hover sólo con mouse: en el celular el :hover queda pegado después del toque
   y la pastilla tocada se quedaba negra. Al tacto alcanza con el :active. */
@media (hover: hover) and (pointer: fine) {
  .shop-seo-copy a:hover { color: var(--red); text-decoration-color: currentColor; }
  .shop-seo-links a:hover { background: var(--ink); color: var(--on-ink); }
  .shop-seo-links a:hover .shop-seo-n { color: var(--on-ink-2); }
}
.shop-seo-links a:active { opacity: .7; }
@media (max-width: 900px) {
  .shop-seo-inner { grid-template-columns: minmax(0, 1fr); }
}
/* La banda negra ya marca el corte: sin su margen de sección, que acá sumaba
   un hueco de papel vacío al aire propio del bloque. */
.shop-seo + .cta-band { margin-top: 0; }
@media (max-width: 640px) {
  .shop-seo-copy p { font-size: 15px; }
  .shop-seo-copy p.shop-seo-lead { font-size: 16.5px; }
}

/* Con el panel de filtros abierto, ocultamos el botón flotante de WhatsApp. */
body.filters-open .wa-float { opacity: 0; pointer-events: none; }

/* ============================================================
   PDP
   ============================================================ */
/* La ficha usa el mismo contenedor que el resto del sitio (--maxw + --pad):
   migas, foto, reseñas, "También te podría gustar" y el texto de abajo arrancan
   en el mismo borde que el catálogo. Antes se cortaba en 1480px y en pantallas
   anchas quedaba metida para adentro, con el riel recortado contra esa caja.
   El alto de la foto ya no depende del ancho: lo topea .pdp-slide. */
.pdp {
  padding: calc(var(--head-h) + clamp(14px, 1.8vw, 28px)) 0 clamp(56px, 6vw, 100px);
}
.pdp-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  max-width: var(--maxw); margin: 0 auto clamp(14px, 1.6vw, 24px);
  padding-inline: var(--pad);
  font-size: 13px; color: var(--muted);
}
.pdp-crumbs a { color: var(--muted); transition: color .2s; }
.pdp-crumbs .sep { color: var(--line-2); }
@media (hover: hover) and (pointer: fine) { .pdp-crumbs a:hover { color: var(--ink); } }

.pdp-grid {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(340px, 1fr);
  gap: clamp(28px, 4vw, 72px); align-items: start;
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad);
}

/* ——— Galería: una foto por vez en un riel con scroll-snap ———
   En la compu queda fija mientras se recorre la columna de info (que es más
   larga): antes la galería terminaba a mitad de página y dejaba un hueco. */
.pdp-gallery {
  position: sticky; top: calc(var(--head-h) + 20px);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start;
}
.pdp-gallery--thumbs { grid-template-columns: 76px minmax(0, 1fr); }
.pdp-thumbs { display: flex; flex-direction: column; gap: 10px; }
.pdp-thumb, .color-thumb {
  position: relative; aspect-ratio: 1; padding: 0; border: 0; cursor: pointer;
  border-radius: 12px; background: var(--surface);
}
/* El borde de la elegida va en un ::after por encima de la foto: un inset
   box-shadow en el botón quedaba tapado por la imagen. */
.pdp-thumb::after, .color-thumb::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit; box-shadow: inset 0 0 0 1.5px var(--line); transition: box-shadow .2s;
}
.pdp-thumb.on::after, .color-thumb.on::after { box-shadow: inset 0 0 0 2px var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .pdp-thumb:not(.on):hover::after, .color-thumb:not(.on):hover::after { box-shadow: inset 0 0 0 1.5px var(--muted); }
}
.pdp-stage { position: relative; min-width: 0; border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.pdp-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain; scrollbar-width: none;
}
.pdp-track::-webkit-scrollbar { display: none; }
/* Cuadrada, salvo que no entre en la pantalla: ahí manda el alto disponible
   (las fotos de calzado son apaisadas, el contain las deja enteras igual). */
.pdp-slide {
  position: relative; flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always;
  aspect-ratio: 1 / 1; max-height: calc(100svh - var(--head-h) - 60px);
}
/* Mismo pozo que la product card: blanco cuando hay foto (el multiply funde su
   fondo blanco con el del pozo) y el degradé claro sólo sin foto. */
.pdp-slide .ph, .pdp-thumb .ph, .color-thumb .ph {
  position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(135deg, #f4f4f5 0%, #efeff1 45%, #e8e8eb 100%);
}
.pdp-thumb .ph, .color-thumb .ph { border-radius: 12px; }
.pdp-slide .ph:has(.ph-img), .pdp-thumb .ph:has(.ph-img), .color-thumb .ph:has(.ph-img) { background: var(--surface); }
.pdp-slide .ph::before, .pdp-thumb .ph::before, .color-thumb .ph::before { display: none; }
.pdp-slide .ph-img, .pdp-thumb .ph-img, .color-thumb .ph-img { object-fit: contain; mix-blend-mode: multiply; }
/* Sin margen interno: las fotos del catálogo son cuadradas y casi blancas, y con
   aire alrededor su propio fondo se leía como un recuadro gris dentro del blanco. */
.pdp-slide .ph-img, .pdp-thumb .ph-img, .color-thumb .ph-img { padding: 0; }
.pdp-thumb .ph-glyph, .color-thumb .ph-glyph { display: none; }

/* Flechas: aparecen al pasar el mouse por la foto; al tacto se desliza. */
.pdp-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 44px; height: 44px; border: 0; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper); color: var(--ink); box-shadow: 0 2px 12px rgba(11,11,11,.12);
  transition: opacity .2s;
}
.pdp-nav--prev { left: 14px; }
.pdp-nav--next { right: 14px; }
.pdp-nav:disabled { opacity: 0; pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .pdp-stage .pdp-nav { opacity: 0; }
  .pdp-stage:hover .pdp-nav:not(:disabled) { opacity: 1; }
  .pdp-stage:hover .pdp-nav:not(:disabled):hover { opacity: .72; }
}
@media (hover: none) { .pdp-nav { display: none; } }
.pdp-dots {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 3;
  display: flex; gap: 6px; pointer-events: none;
}
.pdp-dots span { width: 6px; height: 6px; border-radius: 999px; background: rgba(11,11,11,.2); transition: width .25s var(--ease), background .25s; }
.pdp-dots span.on { width: 18px; background: var(--ink); }
/* Con miniaturas al costado los puntos sobran. */
@media (min-width: 901px) { .pdp-gallery--thumbs .pdp-dots { display: none; } }

/* ——— Columna de info ——— */
.pdp-info { min-width: 0; padding-top: 2px; }
.pdp-title {
  font-family: var(--display); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(28px, 2.5vw, 40px); line-height: 1.04; margin: 0;
}
.pdp-kind { margin: 8px 0 0; font-size: 16px; color: var(--ink-2); }
.pdp-meta { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.pdp-code { font-size: 13.5px; color: var(--muted); }
.pdp-price-row { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
/* line-height acotado: con el 1.5 heredado, el precio arrastraba aire de más
   arriba y abajo y los márgenes escritos no eran los que se veían. */
.pdp-price { font-weight: 700; font-size: clamp(24px, 2vw, 30px); line-height: 1.1; letter-spacing: -.01em; }
.pdp-price-note { font-size: 14px; color: var(--muted); }

.pdp-block { margin-top: 28px; }
.pdp-block .blk-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.pdp-block .blk-head .label { font-size: 15px; font-weight: 600; color: var(--ink); }
.pdp-block .blk-head .sel { font-size: 14px; font-weight: 500; color: var(--muted); text-align: right; }
.pdp-warn { color: var(--red); }
.color-row { display: flex; gap: 10px; flex-wrap: wrap; }
.color-sw { width: 40px; height: 40px; border-radius: 999px; position: relative; cursor: pointer; box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.12); }
.color-sw.on { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }
.color-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.color-thumb { width: 76px; }
.color-thumb .color-sw-badge { z-index: 3; top: -6px; right: -6px; }
/* Talles en grilla pareja: antes cada botón medía lo que su número y la última
   fila quedaba desalineada. */
.size-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 8px; }
.size-btn {
  height: 48px; padding: 0; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--surface); color: var(--ink); font-weight: 600; font-size: 14.5px;
  box-shadow: inset 0 0 0 1.5px var(--line); transition: box-shadow .15s, background .15s, color .15s;
}
@media (hover: hover) and (pointer: fine) { .size-btn:not(.on):hover { box-shadow: inset 0 0 0 1.5px var(--ink); } }
.size-btn.on { background: var(--red); color: #fff; box-shadow: none; }
.pdp-block--warn .size-btn:not(.on) { box-shadow: inset 0 0 0 1.5px var(--red); }
.curva-note { margin-top: 12px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
/* Pill roja: es el mismo acento del "Agregar al pedido" que está justo abajo. */
.qty-row { display: flex; align-items: center; gap: 0; background: var(--red); border-radius: var(--r-pill); width: max-content; overflow: hidden; }
.qty-row button { width: 48px; height: 48px; font-size: 20px; font-weight: 300; color: #fff; display: inline-flex; align-items: center; justify-content: center; transition: opacity .12s ease; }
.qty-row button:hover { opacity: .7; }
.qty-row span { min-width: 56px; text-align: center; font-weight: 600; font-size: 16px; color: #fff; }
/* Un stepper por talle elegido (la PDP permite armar la curva completa). */
.pdp-qty-list { display: flex; flex-direction: column; }
.pdp-qty-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--line); }
.pdp-qty-item:first-child { border-top: none; }
.pdp-qty-label { font-size: 15px; font-weight: 600; color: var(--ink); }
.qty-row--sm button { width: 40px; height: 40px; font-size: 18px; }
.qty-row--sm span { min-width: 44px; font-size: 15px; }
.pdp-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; }
/* Favoritos: contorno sobre el papel, sin relleno. */
.pdp-fav { background: transparent; color: var(--ink); border-color: var(--line-2); }
.pdp-fav.on { color: var(--red); }
/* Condiciones de compra bajo el botón. */
.pdp-perks {
  list-style: none; margin: 20px 0 0; padding: 18px 20px;
  display: grid; gap: 14px; background: var(--surface); border-radius: var(--r-md);
}
.pdp-perks li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.pdp-perks svg { flex-shrink: 0; color: var(--red); margin-top: 1px; }
.pdp-perks b { font-weight: 600; color: var(--ink); }
.pdp-desc { margin: 28px 0 0; font-size: 15.5px; line-height: 1.65; color: var(--ink-2); }

@media (max-width: 900px) {
  .pdp-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  /* En el celular la galería va de borde a borde, sin miniaturas: se desliza. */
  .pdp-gallery, .pdp-gallery--thumbs {
    position: static; grid-template-columns: minmax(0, 1fr);
    margin-inline: calc(var(--pad) * -1);
  }
  .pdp-thumbs { display: none; }
  .pdp-stage { border-radius: 0; }
  .pdp-slide { max-height: none; }
}
@media (max-width: 640px) {
  .pdp-title { font-size: 26px; }
  .pdp-crumbs { margin-bottom: 12px; }
  .color-thumb { width: 64px; }
}

.accord { margin-top: 34px; border-top: 1px solid var(--line); }
.accord .acc-item { border-bottom: 1px solid var(--line); }
.accord .acc-head {
  width: 100%; background: none; border: 0; margin: 0; text-align: left;
  font-family: inherit; color: inherit; cursor: pointer; padding: 18px 0;
  font-weight: 600; font-size: 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.accord .acc-head::after {
  content: '+'; font-size: 22px; font-weight: 400; color: var(--ink);
  line-height: 1; flex: none; transition: transform .4s cubic-bezier(.22,.61,.36,1);
}
.accord .acc-item.open .acc-head::after { transform: rotate(45deg); }
/* El panel anima su alto (medido en JS); el nativo <details> no permite esto. */
.accord .acc-panel { height: 0; overflow: hidden; transition: height .4s cubic-bezier(.22,.61,.36,1); }
/* El contenido entra con fade + leve desplazamiento, apenas después del alto. */
.accord .acc-body {
  padding-bottom: 20px; color: var(--ink-2); font-size: 15px;
  opacity: 0; transform: translateY(-6px);
  transition: opacity .3s ease, transform .3s ease;
}
.accord .acc-item.open .acc-body { opacity: 1; transform: none; transition-delay: .08s; }
@media (prefers-reduced-motion: reduce) {
  .accord .acc-panel, .accord .acc-body, .accord .acc-head::after { transition: none; }
}
.spec-list li { display: flex; justify-content: space-between; padding: 10px 0; border-top: 1px dashed var(--line); font-size: 14.5px; }
.spec-list li span:first-child { color: var(--muted); font-weight: 500; }
.spec-list li span:last-child { font-weight: 600; }

/* ============================================================
   CARRITO DRAWER — estructura y estilo del de Nazaret: cabecera con
   hairline, ítems en sans chica (el display pesado queda para el título),
   subtotal grande en sans y la barra de avance hacia el pedido mínimo.
   ============================================================ */
.scrim {
  position: fixed; inset: 0; z-index: 100; background: rgba(11,11,11,.35);
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.scrim.open { opacity: 1; pointer-events: auto; }
/* Con el carrito o el checkout abiertos ocultamos el botón flotante de WhatsApp
   (z-index 900): se superpone al panel y tapa el botón principal. */
body.cart-open .wa-float,
body.checkout-open .wa-float { opacity: 0; pointer-events: none; }
.drawer {
  position: fixed; top: 0; right: 0; z-index: 101;
  width: min(440px, 100vw);
  height: 100vh; height: 100dvh;
  background: var(--paper); color: var(--ink);
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateX(100%);
  /* Cerrado no lleva sombra ni es visible: los 48px de difuminado de la sombra
     se metían en la pantalla aunque el panel estuviera afuera, y en todas las
     páginas se veía una franja gris sobre el borde derecho. visibility con
     retardo (como .filter-drawer) para que además sus botones no atrapen el tab. */
  box-shadow: none; visibility: hidden;
  transition: transform .42s cubic-bezier(.4,0,.1,1), box-shadow .42s, visibility 0s linear .42s;
}
.drawer.open {
  transform: translateX(0); visibility: visible;
  box-shadow: 0 8px 48px rgba(0,0,0,.18), 0 2px 12px rgba(0,0,0,.08);
  transition: transform .42s cubic-bezier(.4,0,.1,1), box-shadow .42s, visibility 0s;
}
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px; background: var(--paper); color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.drawer-head .ttl { font-family: var(--display); font-weight: 800; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.05; letter-spacing: -.02em; }
.drawer-head .icon-btn { color: var(--ink); border-radius: 999px; transition: background .18s ease; }
@media (hover: hover) and (pointer: fine) {
  .drawer-head .icon-btn:hover { background: rgba(11,11,11,.06); }
}
.minbar { padding: 13px var(--pad); font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.minbar.ok { background: #11331F; color: #BFF0CE; }
.minbar.warn { background: #FFE9EB; color: var(--red-deep); }
.minbar .track { flex: 1; height: 5px; background: rgba(0,0,0,.1); position: relative; overflow: hidden; border-radius: 999px; }
.minbar.ok .track { background: rgba(255,255,255,.18); }
.minbar .fill { position: absolute; inset: 0 auto 0 0; background: var(--red); transition: width .3s; border-radius: 999px; }
.minbar.ok .fill { background: #4FD37E; }
/* overscroll-behavior: contain — al llegar al final de la lista, iOS encadena el
   gesto al documento y el rebote arrastra el drawer entero. */
.drawer-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 8px 24px; }
.empty-cart { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 80px 20px; text-align: center; color: var(--muted); }
.empty-cart-text { font-size: 13px; line-height: 1.5; color: var(--muted); }
.cart-item { display: grid; grid-template-columns: 72px 1fr auto; gap: 16px; align-items: flex-start; padding: 20px 0; border-bottom: 1px solid var(--line); }
.cart-item-img { width: 72px; aspect-ratio: 1/1; border-radius: 10px; overflow: hidden; }
.cart-item-img .ph-glyph { opacity: .3; }
.cart-item-info { min-width: 0; }
.cart-item-name { font-family: var(--sans); font-size: 14px; font-weight: 500; line-height: 1.35; margin-bottom: 4px; }
.cart-item-meta { font-size: 12px; color: var(--muted); }
.cart-item-img .ph, .checkout-item-img .ph { width: 100%; height: 100%; }
/* Stepper: pill roja, igual que la del PDP (.qty-row). En la product card el
   stepper sigue siendo NEGRO a propósito (.pc-stepper): ahí ocupa el lugar del
   "Agregar al pedido" rojo y en rojo no se distinguiría el estado. */
.cart-qty { display: inline-flex; align-items: center; gap: 0; height: 36px; background: var(--red); border-radius: var(--r-pill); margin-top: 8px; overflow: hidden; }
.cart-qty button { width: 36px; height: 36px; font-size: 18px; font-weight: 300; color: #fff; display: inline-flex; align-items: center; justify-content: center; transition: background .12s ease; touch-action: manipulation; }
.cart-qty button:hover { opacity: .7; }
.cart-qty span { min-width: 28px; text-align: center; font-weight: 500; font-size: 13px; color: #fff; }
.cart-item-col3 { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.cart-rm { font-family: var(--sans); font-size: 14px; color: var(--muted); padding: 0; transition: color .2s; }
@media (hover: hover) and (pointer: fine) {
  .cart-rm:hover { color: var(--red); }
}
.cart-item-price { font-family: var(--sans); font-weight: 500; font-size: 14px; text-align: right; white-space: nowrap; }
.drawer-foot { flex-shrink: 0; border-top: 1px solid var(--line); padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.drawer-foot .sumrow { display: flex; align-items: baseline; justify-content: space-between; }
.drawer-foot .sumrow .label { font-size: 15px; font-weight: 500; color: var(--ink); }
.drawer-foot .sumrow .tot { font-family: var(--sans); font-size: 22px; font-weight: 500; letter-spacing: -.01em; }
.min-note { font-size: 13px; font-weight: 600; line-height: 1.45; color: var(--red-deep); text-align: center; }
@media (max-width: 780px) {
  .drawer { width: 100vw; }
  .drawer-foot { gap: 10px; padding-bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 16px)); }
}

/* Avance hacia el pedido mínimo — la barra fina de Nazaret (envío gratis), acá
   contando pares. La comparten el drawer y el resumen del checkout. */
.cart-min-bar-wrap { display: flex; flex-direction: column; gap: 6px; }
.cart-min-bar { height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.cart-min-bar-fill { height: 100%; background: var(--red); border-radius: 2px; transition: width .4s ease; }
.cart-min-text { font-size: 13px; line-height: 1.5; color: var(--muted); }

/* ============================================================
   CHECKOUT — pantalla completa, estructura del CheckoutOverlay de
   Nazaret con la lógica de presupuesto de Koruk.
   Desktop: debajo del header, resumen | datos, cada columna con su scroll.
   Mobile: encabezado propio, resumen en acordeón y un solo scroll.
   ============================================================ */
.checkout-overlay {
  position: fixed; inset: 0;
  background: var(--paper); color: var(--ink);
  z-index: 130;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
  overflow-y: auto;
}
.checkout-overlay--open { opacity: 1; pointer-events: auto; }

.checkout-overlay-inner {
  width: min(1080px, 90vw);
  display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: start;
}

.co-section-label {
  font-family: var(--display); font-weight: 800; font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.05; letter-spacing: -.02em; color: var(--ink); margin: 0 0 20px;
}
.co-section-label--divided { border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.co-section-label--next { margin-top: 36px; }

/* El "Volver" de escritorio; en mobile vive en .checkout-mobile-head. */
.checkout-desk-back { display: none; }

/* —— Resumen —— */
.checkout-summary { border-right: 1px solid var(--line); padding-right: 48px; }
/* El acordeón existe sólo en mobile. En escritorio la barra se oculta y los dos
   wrappers desaparecen con display: contents, para que .checkout-items y
   .checkout-summary-foot sigan siendo hijos flex de .checkout-summary y
   conserven su scroll propio. */
.checkout-sum-toggle { display: none; }
.checkout-sum-panel,
.checkout-sum-panel-in { display: contents; }

.checkout-items { display: flex; flex-direction: column; }
.checkout-item {
  /* Precio con ancho fijo: cada fila es su propia grilla y con `auto` los
     steppers quedaban corridos según el largo del precio de esa fila. */
  display: grid; grid-template-columns: 76px 1fr auto 88px 36px;
  gap: 12px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line);
}
.checkout-item-img { width: 76px; height: 76px; flex-shrink: 0; border-radius: 10px; overflow: hidden; }
.checkout-item-img .ph-glyph { opacity: .3; }
.checkout-item-info { min-width: 0; }
.checkout-item .cart-qty { margin-top: 0; }
.checkout-item-name { font-family: var(--sans); font-size: 14px; font-weight: 400; line-height: 1.35; margin-bottom: 3px; }
.checkout-item-meta { font-size: 12px; color: var(--muted); }
.checkout-item-price { font-family: var(--sans); font-size: 14px; text-align: right; white-space: nowrap; }
.checkout-item-remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 999px; border: none; background: none;
  padding: 0; color: var(--ink); flex-shrink: 0; transition: color .2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .checkout-item-remove:hover { color: var(--red); }
}

.checkout-summary-foot { display: flex; flex-direction: column; gap: 12px; }
.checkout-totals { padding-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.checkout-total-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 15px; color: var(--ink-2); }
.checkout-total-row > span:first-child { color: var(--muted); }
.checkout-total-final { padding-top: 16px; margin-top: 6px; border-top: 1px solid var(--line); color: var(--ink); }
.checkout-total-final > span { font-size: 17px; font-weight: 600; }
.checkout-total-row.checkout-total-final > span:first-child { color: var(--ink); }
.co-mini-note { font-size: 12px; color: var(--muted); margin: 0; line-height: 1.5; }

/* —— Formulario —— */
.checkout-form-col { padding-left: 48px; }
.co-fields { display: flex; flex-direction: column; gap: 16px; }
.co-field { display: flex; flex-direction: column; gap: 7px; }
.co-label { font-family: var(--sans); font-weight: 500; font-size: 13px; color: var(--ink); }
.co-label::after { content: ' *'; color: var(--red); }
.co-label--opt::after { content: none; }
.co-opt { color: var(--muted); font-weight: 400; }
/* Relleno gris en vez de subrayado: el campo de Nazaret. El foco es negro y el
   error rojo — en Koruk el rojo es la marca, así que no puede marcar también
   el foco sin que todo campo enfocado parezca estar mal. */
.co-input {
  width: 100%; padding: 13px 15px;
  border: none; border-radius: 10px;
  background: rgba(11,11,11,.055);
  font-size: 14px; font-family: var(--sans); color: var(--ink);
  outline: 2px solid transparent; outline-offset: 0;
  transition: background .2s, outline-color .2s;
}
@media (hover: hover) and (pointer: fine) {
  .co-input:hover { background: rgba(11,11,11,.075); }
}
.co-input:focus { outline-color: var(--ink); }
.co-input::placeholder { color: var(--muted); opacity: .75; }
.co-input--error, .co-input--error:focus { outline-color: var(--red); }
textarea.co-input { resize: none; min-height: 88px; line-height: 1.5; }
.co-error { font-size: 12px; color: var(--red); animation: errorFadeIn .22s ease both; }
.co-help { display: block; font-size: 12px; line-height: 1.45; color: var(--muted); }

.checkout-form-foot { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.co-min-note { font-size: 13px; font-weight: 600; line-height: 1.45; color: var(--red-deep); text-align: center; margin: 0; }
/* Apagado pero vivo: el click marca los campos que faltan (ver sendForm). */
.co-submit--idle { opacity: .4; }
.co-submit--idle:hover { opacity: .4; }

/* Error de envío: el pedido NO salió y el carrito quedó intacto. Explica qué pasó
   y ofrece WhatsApp como salida, para que un problema de red no cueste la venta. */
.co-submit-error { text-align: center; margin: 0; }
.co-submit-error-msg { font-size: 13px; line-height: 1.45; color: var(--red-deep); margin: 0; }
.co-submit-error-alt { font-size: 12.5px; line-height: 1.45; color: var(--muted); margin: 6px 0 0; }
.co-submit-error-alt a { color: var(--ink); text-decoration: underline; }
.co-back-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 4px 0; font-size: 13.5px; color: var(--muted);
  background: none; border: none; cursor: pointer;
}
.co-back-link:hover { color: var(--ink); }

/* Pie del catálogo: "Ver más modelos" + cuántos se están mostrando. */
.shop-more { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 0 8px; }
.shop-more-count { font-size: 13px; color: var(--muted); }

/* —— Estado enviado —— */
.checkout-success {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 4px; padding: 60px var(--pad); max-width: 520px; margin: 0 auto;
}
.sent-check { width: 72px; height: 72px; border-radius: 999px; background: var(--red); color: #fff; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 22px; }
.checkout-success-title { font-family: var(--display); font-weight: 800; font-size: clamp(32px,4vw,52px); margin: 0; letter-spacing: -.02em; }
.checkout-success-sub { color: var(--ink-2); max-width: 44ch; margin: 16px auto 28px; font-size: 16px; line-height: 1.6; }

/* —— Cabecera mobile (oculta en desktop) —— */
.checkout-mobile-head { display: none; }

/* —— Desktop: debajo del header y cada columna con su propio scroll ——
   z-index 76: bajo el nav (80), el buscador y el mega-menú (78) y su scrim
   (77), así el header sigue visible y usable, y el desenfoque del mega-menú
   alcanza al checkout. Cualquier link del nav lo cierra (onNav). */
@media (min-width: 1101px) {
  .checkout-overlay { overflow: hidden; z-index: 76; }
  .checkout-overlay-inner {
    flex: 1; min-height: 0; align-items: stretch;
    /* Fila 1: el "Volver". La 2 absorbe el alto restante. */
    grid-template-rows: auto minmax(0, 1fr);
  }
  .checkout-desk-back {
    grid-column: 1 / -1; justify-self: start;
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: calc(var(--head-h) + 14px);
    font-family: var(--sans); font-size: 13px; color: var(--muted);
    background: none; border: none; padding: 0; cursor: pointer;
    transition: color .2s ease;
  }
  .checkout-desk-back:hover { color: var(--ink); }
  .checkout-summary { display: flex; flex-direction: column; overflow: hidden; }
  /* Sin ">": el h2 cuelga de .checkout-sum-panel-in, que acá es display: contents. */
  .checkout-summary h2 { flex-shrink: 0; padding-top: 22px; }
  .checkout-items { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .checkout-summary-foot { flex-shrink: 0; border-top: 1px solid var(--line); background: var(--paper); padding-bottom: 40px; }
  .checkout-form-col { display: flex; flex-direction: column; overflow: hidden; }
  .checkout-form-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 22px 3px 16px; }
  .checkout-form-foot { flex-shrink: 0; margin-top: 0; padding: 16px 3px 40px; }
  .checkout-success { padding-top: calc(var(--head-h) + 40px); }
}

/* —— Mobile: un solo scroll, resumen en acordeón —— */
@media (max-width: 1100px) {
  /* `clip` y no `hidden`: `hidden` igual crea una caja scrolleable y al abrir el
     teclado iOS la corre hacia arriba para mostrar el campo — el encabezado
     desaparecía. `clip` no crea scroller: el navegador scrollea
     .checkout-overlay-inner, que es el que corresponde. */
  .checkout-overlay { overflow: hidden; overflow: clip; }

  .checkout-mobile-head {
    flex-shrink: 0; width: 100%; display: flex; justify-content: space-between; align-items: center;
    padding: 20px var(--pad); border-bottom: 1px solid var(--line); background: var(--paper);
  }
  .checkout-mobile-title { font-family: var(--display); font-weight: 800; font-size: 24px; line-height: 1.05; letter-spacing: -.02em; }
  .checkout-mobile-head-back {
    display: flex; align-items: center; gap: 5px; font-family: var(--sans); font-size: 13px;
    color: var(--muted); background: none; border: none; cursor: pointer; padding: 0; flex-shrink: 0;
  }
  /* El título del resumen lo reemplaza la barra del acordeón. */
  .checkout-step-title { display: none; }

  .checkout-overlay-inner {
    width: 100%; flex: 1; min-height: 0; display: flex; flex-direction: column;
    align-items: stretch; padding: 0;
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  }

  /* El fondo gris lo lleva la sección entera, no sólo la barra: si el panel
     desplegado volviera al fondo de la página, la barra se leería como un
     botón suelto en vez de como la tapa de lo que abre. */
  .checkout-summary {
    flex-shrink: 0; border-right: none; padding: 0;
    border-bottom: 1px solid var(--line);
    background: rgba(11,11,11,.035);
  }
  .checkout-sum-toggle {
    display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px var(--pad); background: transparent; border: none; cursor: pointer;
    font-family: var(--sans); color: var(--ink); text-align: left;
  }
  .checkout-sum-toggle-label { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 500; }
  .checkout-sum-toggle svg { transition: transform .3s ease; }
  .checkout-sum-toggle--open svg { transform: rotate(180deg); }
  .checkout-sum-toggle-total { font-size: 16px; font-weight: 600; flex-shrink: 0; }

  /* 0fr → 1fr anima hasta la altura natural del contenido, sin un max-height
     inventado que recorte un pedido largo. */
  .checkout-sum-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
  .checkout-sum-panel--open { grid-template-rows: 1fr; }
  /* visibility, no sólo overflow: con altura 0 los steppers y las X seguían
     siendo tabulables y el lector de pantalla los anunciaba igual. */
  .checkout-sum-panel-in { display: block; min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s linear .3s; }
  .checkout-sum-panel--open .checkout-sum-panel-in { visibility: visible; transition-delay: 0s; }

  .checkout-items { padding: 4px var(--pad) 0; }
  .checkout-summary-foot { padding: 0 var(--pad) 20px; }
  .checkout-summary-foot .checkout-totals { padding-top: 16px; }
  /* Como en Nazaret: el subtotal se lee grande y el "Total" (que repite el
     mismo número) no se muestra. */
  .checkout-total-row > span:first-child { color: var(--ink); font-weight: 500; }
  .checkout-total-row--sub > span:last-child { font-size: 22px; letter-spacing: -.01em; color: var(--ink); }
  .checkout-summary-foot .checkout-total-final { display: none; }

  /* El formulario fluye con la página. */
  .checkout-form-col { flex: none; display: block; overflow: visible; padding: 0; }
  .checkout-form-body { padding: 20px var(--pad) 24px; }
  /* sticky, no fijo: se apoya en el borde inferior mientras haya página por
     recorrer, pero es parte del flujo — no recorta ni bloquea el scroll. */
  .checkout-form-foot {
    position: sticky; bottom: 0; z-index: 2; margin-top: 0;
    border-top: 1px solid var(--line); background: var(--paper);
    padding: 14px var(--pad) max(20px, env(safe-area-inset-bottom, 0px));
  }

  /* Ítem: imagen a la izquierda, info arriba, stepper + precio + quitar abajo. */
  .checkout-item { grid-template-columns: 64px 1fr auto; grid-template-rows: auto auto; gap: 10px 12px; align-items: start; }
  .checkout-item-img { width: 64px; height: 64px; grid-row: 1 / 3; }
  .checkout-item-info { grid-column: 2; grid-row: 1; }
  .checkout-item .cart-qty { grid-column: 2; grid-row: 2; align-self: center; width: fit-content; }
  .checkout-item-price { grid-column: 3; grid-row: 2; align-self: center; font-size: 13px; }
  .checkout-item-remove { grid-column: 3; grid-row: 1; align-self: start; margin-top: -6px; }
}

/* El alto tiene que seguir a las barras del navegador: `inset: 0` mide el
   layout viewport, que en iOS incluye la franja de la barra de direcciones, y
   el pie del checkout se metía debajo. 100dvh lo ata al alto visible. */
@media (max-width: 1100px) and (pointer: coarse) {
  .checkout-overlay { bottom: auto; height: 100vh; height: 100dvh; }
}
@media (prefers-reduced-motion: reduce) {
  .checkout-sum-panel { transition: none; }
}

/* ============================================================
   PÁGINAS DE CONTENIDO
   ============================================================ */
.page-hero { background: var(--ink); color: var(--on-ink); padding: calc(var(--head-h) + clamp(44px,6vw,104px)) var(--pad) clamp(44px,6vw,104px); }
.page-hero h1 { font-family: var(--display); font-weight: 900; font-size: clamp(44px,7vw,116px); line-height: .96; margin: 0; letter-spacing: -.03em; }
.page-hero h1 .red { color: var(--red); }
.page-hero p { color: var(--on-ink-2); font-size: 18px; max-width: 56ch; margin-top: 20px; }

/* ——— Cómo comprar — guía visual ———
   La estructura es la de la guía de Nazaret (hero partido, franja de cifras,
   pasos con foto, banda de color para el pago, panel de envíos y cierre
   centrado); el vestido es el de Koruk: fondo crema, el rojo como único acento,
   cards redondeadas en --r-lg y las fotos anidadas con un radio menor. El único
   bloque negro es el hero, igual que el resto de las cabeceras del sitio. */
.htb-hero-sec { padding: calc(var(--head-h) + clamp(16px,2.4vw,36px)) 0 clamp(28px,3.4vw,56px); }
.htb-hero-card {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(320px,.92fr);
  min-height: min(600px, 46vw);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink);
  color: var(--on-ink);
}
.htb-hero-copy {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  padding: clamp(32px,4.4vw,76px);
}
.htb-hero-copy h1 {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(40px,5.2vw,88px); line-height: .94; letter-spacing: -.03em;
  margin: 0; max-width: 12ch;
}
.htb-intro { color: var(--on-ink-2); font-size: clamp(16px,1.5vw,20px); line-height: 1.6; max-width: 42ch; margin: clamp(20px,2.4vw,30px) 0 0; }
/* Aire largo antes del pie: lo que en Nazaret separaba el filete del texto. */
.htb-hero-note { color: var(--on-ink-2); font-size: 14px; line-height: 1.55; max-width: 34ch; margin: clamp(30px,4vw,54px) 0 0; }
/* Foto de figura entera en un recorte apaisado: anclarla abajo deja el calzado
   —lo que se vende— completo en cuadro, en vez de cortar la cabeza al medio. */
.htb-hero-media { min-height: 100%; }
.htb-hero-media .ph-img { object-position: 50% 100%; }

.htb-facts { padding-bottom: clamp(36px,4.6vw,80px); }
.htb-facts-panel {
  display: grid;
  grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr);
  gap: clamp(28px,4vw,72px);
  align-items: center;
  padding: clamp(28px,3.4vw,56px);
  border-radius: var(--r-lg);
  /* Crema como el fondo: los paneles de esta página se recortan con el filete,
     no con un relleno blanco. */
  background: var(--paper);
  border: 1px solid var(--line);
}
.htb-facts-copy h2 { font-family: var(--display); font-weight: 800; font-size: clamp(26px,3.2vw,46px); line-height: 1; letter-spacing: -.025em; margin: 0; max-width: 14ch; }
.htb-facts-note { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 16px 0 0; max-width: 42ch; }
.htb-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
.htb-stat { display: flex; flex-direction: column; justify-content: center; padding: 6px clamp(16px,2.4vw,40px); }
.htb-stat:first-child { padding-left: 0; }
.htb-stat + .htb-stat { border-left: 1px solid var(--line); }
.htb-stat-value {
  font-family: var(--display); font-weight: 900; color: var(--red);
  font-size: clamp(36px,4vw,62px); line-height: .9; letter-spacing: -.035em;
  display: flex; flex-direction: column; gap: 8px;
}
.htb-stat-unit { font-family: var(--sans); font-weight: 600; font-size: 14px; letter-spacing: 0; color: var(--ink); }
.htb-stat-label { color: var(--ink-2); font-size: 14px; line-height: 1.45; margin-top: 12px; max-width: 22ch; }

.htb-process { padding-bottom: clamp(48px,6vw,104px); }
.htb-head { margin-bottom: clamp(24px,3vw,44px); }
.htb-head--tight { margin-bottom: clamp(20px,2.4vw,32px); }
.htb-head h2 { font-family: var(--display); font-weight: 800; font-size: clamp(28px,3.6vw,54px); line-height: 1; letter-spacing: -.025em; margin: 0; max-width: 20ch; }
.htb-head h2 .red { color: var(--red); }

.htb-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(12px,1.5vw,22px); list-style: none; margin: 0; padding: 0; }
/* Card = marco crema con la foto adentro: por eso el padding y el radio interior
   menor (el de la foto sigue la curva del marco, no la corta). El marco es del
   mismo crema del fondo y se dibuja con el filete. */
.htb-card { display: flex; flex-direction: column; padding: clamp(10px,1.1vw,14px); border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line); }
.htb-card-media { aspect-ratio: 1.13 / 1; border-radius: var(--r-md); }
.htb-card-body { padding: clamp(20px,2.2vw,30px) clamp(8px,1.1vw,16px) clamp(12px,1.4vw,18px); }
.htb-card-num { display: block; font-family: var(--display); font-weight: 800; font-size: 13px; letter-spacing: .12em; line-height: 1; color: var(--red); }
.htb-card-title { font-family: var(--display); font-weight: 800; font-size: clamp(20px,1.9vw,27px); line-height: 1.1; letter-spacing: -.02em; margin: 14px 0 0; }
.htb-card-body p { color: var(--ink-2); font-size: 15px; line-height: 1.6; margin: 12px 0 0; }

/* La banda de pago va de borde a borde, como la verde de Nazaret. */
.htb-pay { background: var(--red); color: #fff; }
.htb-pay-panel {
  display: grid;
  grid-template-columns: minmax(240px,.74fr) minmax(0,1.26fr);
  gap: clamp(32px,5vw,96px);
  align-items: start;
  padding: clamp(44px,6vw,104px) 0;
}
.htb-pay-copy h2 { font-family: var(--display); font-weight: 800; font-size: clamp(28px,3.6vw,54px); line-height: 1; letter-spacing: -.025em; margin: 0; max-width: 12ch; }
.htb-pay-note { color: rgba(255,255,255,.82); font-size: 15px; line-height: 1.6; margin: 20px 0 0; max-width: 36ch; }
/* auto-fit: si mañana se suma un tercer medio de pago, entra sin tocar el CSS. */
.htb-pay-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: clamp(12px,1.4vw,18px); }
.htb-pay-card {
  display: flex; flex-direction: column;
  min-height: 230px;
  padding: clamp(24px,2.4vw,36px);
  border-radius: var(--r-lg);
  background: rgba(255,255,255,.14);
}
.htb-pay-card .htb-card-num { color: rgba(255,255,255,.72); }
/* El título se apoya abajo: el número queda solo arriba y la card respira. */
.htb-pay-card-title { font-family: var(--display); font-weight: 800; font-size: clamp(20px,1.9vw,27px); line-height: 1.1; letter-spacing: -.02em; margin: auto 0 0; padding-top: clamp(32px,4vw,60px); }
.htb-pay-card p { color: rgba(255,255,255,.82); font-size: 14.5px; line-height: 1.6; margin: 12px 0 0; }

.htb-ship { padding: clamp(48px,6vw,104px) 0; }
.htb-ship-panel {
  display: grid;
  grid-template-columns: minmax(260px,.8fr) minmax(0,1.2fr);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
}
.htb-ship-media { min-height: 100%; }
.htb-ship-content { padding: clamp(30px,4vw,72px); }
.htb-ship-list { border-top: 1px solid var(--line); }
.htb-ship-row { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 16px; padding: clamp(20px,2.2vw,28px) 0; }
.htb-ship-row + .htb-ship-row { border-top: 1px solid var(--line); }
.htb-ship-row .htb-card-num { padding-top: 6px; }
.htb-ship-row-title { font-family: var(--display); font-weight: 800; font-size: clamp(19px,1.8vw,25px); line-height: 1.1; letter-spacing: -.02em; margin: 0; }
.htb-ship-row-body { color: var(--ink-2); font-size: clamp(15px,1.3vw,17px); line-height: 1.55; margin: 10px 0 0; }
.htb-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.htb-chips li { padding: 6px 13px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-2); font-size: 12.5px; font-weight: 500; line-height: 1.2; }

.htb-closing { padding-bottom: clamp(48px,6vw,104px); }
.htb-closing-panel { display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(24px,3vw,48px) 0; }
.htb-thanks { font-family: var(--display); font-weight: 800; font-size: clamp(26px,3.4vw,50px); line-height: 1.06; letter-spacing: -.025em; margin: 0; max-width: 24ch; }
.htb-closing-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: clamp(24px,3vw,34px); }
.htb-fineprint { color: var(--muted); font-size: 13px; line-height: 1.55; margin: 24px 0 0; max-width: 66ch; }

@media (max-width: 1100px) {
  .htb-hero-card { grid-template-columns: 1fr 1fr; min-height: 460px; }
  .htb-facts-panel { grid-template-columns: 1fr; gap: 30px; }
  .htb-facts-copy h2 { max-width: none; }
  .htb-pay-panel { grid-template-columns: 1fr; gap: 32px; }
  .htb-pay-copy h2, .htb-pay-note { max-width: 52ch; }
  .htb-ship-panel { grid-template-columns: minmax(220px,.66fr) minmax(0,1.34fr); }
}
@media (max-width: 860px) {
  .htb-grid { grid-template-columns: 1fr; }
  /* Los pasos pasan a foto-izquierda / texto-derecha, como en Nazaret: en una
     sola columna, tres fotos apiladas a todo el ancho estiran la página de más. */
  .htb-card { display: grid; grid-template-columns: minmax(120px,.7fr) minmax(0,1.3fr); }
  .htb-card-media { height: 100%; aspect-ratio: auto; min-height: 190px; }
  .htb-card-body { padding: 16px 10px 12px 16px; }
  .htb-card-title { font-size: 20px; }
  .htb-card-body p { font-size: 14px; }
}
@media (max-width: 720px) {
  .htb-hero-card { grid-template-columns: 1fr; min-height: 0; }
  .htb-hero-copy { padding: 34px 26px 44px; }
  .htb-hero-media { min-height: 300px; aspect-ratio: 1.25 / 1; }
  .htb-stat-grid { grid-template-columns: 1fr; }
  .htb-stat { padding: 18px 0; }
  .htb-stat:first-child { padding-top: 0; }
  .htb-stat + .htb-stat { border-left: 0; border-top: 1px solid var(--line); }
  .htb-stat-label { max-width: none; }
  .htb-ship-panel { grid-template-columns: 1fr; }
  .htb-ship-media { min-height: 260px; aspect-ratio: 1.3 / 1; }
  .htb-ship-content { padding: 30px 22px; }
}
@media (max-width: 460px) {
  .htb-card { grid-template-columns: 1fr; }
  .htb-card-media { aspect-ratio: 1.2 / 1; min-height: 0; }
  .htb-card-body { padding: 20px 10px 12px; }
  .htb-closing-actions { width: 100%; flex-direction: column; }
  .htb-closing-actions .btn { width: 100%; }
}

.faq { border-top: 1px solid var(--line); }

.account-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; max-width: var(--maxw); margin-inline: auto; }
.account-info { padding: clamp(36px,4vw,72px) var(--pad); border-right: 1px solid var(--line); }
.account-info h2 { font-family: var(--display); font-weight: 800; font-size: clamp(28px,3.2vw,48px); line-height: 1; margin: 0 0 24px; letter-spacing: -.02em; }
.benefit { display: flex; gap: 16px; padding: 18px 0; border-top: 1px solid var(--line); }
.benefit .bi { width: 44px; height: 44px; flex: none; background: var(--ink); color: var(--red); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-md); }
.benefit h4 { font-weight: 700; font-size: 16px; margin: 0 0 5px; letter-spacing: -.01em; }
.benefit p { font-size: 14.5px; color: var(--ink-2); margin: 0; }
.account-form { padding: clamp(36px,4vw,72px) var(--pad); background: var(--paper); }
.account-form h3 { font-family: var(--display); font-weight: 800; font-size: 28px; margin: 0 0 6px; letter-spacing: -.02em; }
.contact-strip { display: flex; flex-wrap: wrap; gap: 28px; padding: 28px var(--pad); background: var(--ink); color: var(--on-ink); }
.contact-strip .ci { display: flex; flex-direction: column; gap: 4px; }
.contact-strip .ci .k { font-size: 13px; font-weight: 500; color: var(--on-ink-3); }
.contact-strip .ci .v { font-weight: 600; font-size: 15px; }
.contact-strip .ci a.v:hover { opacity: .7; }

/* ============================================================
   CONTACTO — calcado de la tab de contacto de Kegam.
   Única diferencia intencional: el título usa la font de
   títulos de Koruk (--display / Archivo) en vez de la serif.
   ============================================================ */
.contact-page {
  min-height: 100vh;
  padding: clamp(120px, 14vw, 160px) var(--pad) clamp(80px, 10vw, 120px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 8vw, 120px);
  align-items: start;
  background: var(--paper);
}

/* —— Columna izquierda —— */
.contact-left { display: flex; flex-direction: column; }
.contact-eyebrow { margin-bottom: 16px; display: block; }
.contact-title {
  font-family: var(--display);        /* ← Koruk: grotesco Archivo, no serif */
  font-weight: 800;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin-bottom: 40px;
}
.contact-panel { width: 100%; display: flex; flex-direction: column; gap: 20px; }
.contact-field { display: flex; flex-direction: column; gap: 7px; }
.contact-field label { font-family: var(--sans); font-size: 12px; color: var(--muted); }
.required-mark { color: var(--red); }
.contact-error {
  color: var(--red);
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.25;
  animation: errorFadeIn 0.22s ease both;
}
@keyframes errorFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.contact-field input,
.contact-field textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--line-2);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  padding: 10px 0;
  outline: none;
  transition: border-color 0.2s ease;
}
.contact-field input:hover,
.contact-field textarea:hover,
.contact-field input:focus,
.contact-field textarea:focus { border-color: var(--ink); }
.contact-field textarea { resize: none; min-height: 120px; }

.btn-filled {
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  padding: 16px 28px;
  cursor: pointer;
  transition: opacity 0.2s ease, background 0.35s ease;
}
.btn-filled:hover { opacity: 0.82; }
.btn-filled--sent { background: #1C4A2E; opacity: 1; }

/* —— Columna derecha —— */
.contact-right { display: flex; flex-direction: column; gap: 52px; padding-top: 8px; }
.contact-description { display: flex; flex-direction: column; gap: 20px; }
.contact-description p {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(19px, 2vw, 26px);
  line-height: 1.45;
  color: var(--ink);
}
.contact-entries { display: flex; flex-direction: column; gap: 28px; }
.contact-entry { display: flex; flex-direction: column; gap: 6px; }
.contact-entry-label {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--muted);
  transition: color 0.2s ease;
}
.contact-entry-label--copied { color: #1C4A2E; animation: label-copied-in 0.25s ease both; }
@keyframes label-copied-in {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}
.contact-entry-value {
  font-family: var(--sans);
  font-size: clamp(19px, 2vw, 26px);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.45;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
  display: inline;
}
.contact-entry-value--copyable { cursor: pointer; }
a.contact-entry-value:hover,
.contact-entry-value--copyable:hover { border-bottom-color: var(--ink); }
.contact-map-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
  list-style: none;
  padding: 0;
  padding-left: 24px;
}
.contact-map-link {
  display: inline-flex;
  align-items: center;
  font-family: var(--sans);
  font-size: clamp(15px, 1.3vw, 18px);
  color: var(--ink);
  text-decoration: none;
}
.contact-map-arrow { opacity: 0; transition: opacity 0.2s ease; }
.contact-map-link:hover .contact-map-arrow { opacity: 1; }

@media (max-width: 860px) {
  .contact-page {
    grid-template-columns: 1fr;
    padding-top: calc(var(--head-h) + 48px);
  }
  .contact-title { text-align: center; }
  .contact-panel .btn-filled { align-self: center !important; }
  .contact-description p { font-size: 18px; }
  .contact-entry-value { font-size: 18px; }
}

/* ============================================================
   FOOTER
   ============================================================ */
/* Crema, como el resto de la página: en blanco cortaba con una costura visible
   justo debajo de la banda negra del CTA. La línea de arriba alcanza para
   separarlo. */
.footer { background: var(--paper); color: var(--ink); border-top: 1px solid var(--line); }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; padding: clamp(48px,5vw,80px) var(--pad) 40px; max-width: var(--maxw); margin-inline: auto; }
.footer-brand .nav-logo { font-size: 40px; }
.footer-brand p { color: var(--muted); max-width: 34ch; margin-top: 14px; font-size: 14.5px; }
.footer-col .label { display: block; color: var(--muted); margin-bottom: 14px; font-weight: 600; }
.footer-col a { display: block; padding: 6px 0; color: var(--ink-2); font-size: 14.5px; font-weight: 500; transition: color .18s; }
.footer-col a:hover { opacity: .62; }
.footer-word { font-family: var(--display); font-weight: 900; font-size: clamp(80px,21vw,360px); line-height: .76; padding: 0 var(--pad); color: transparent; -webkit-text-stroke: 1px var(--line-2); user-select: none; letter-spacing: -.04em; max-width: var(--maxw); margin-inline: auto; }
.footer-word .mark { color: var(--red); -webkit-text-stroke: 0; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; padding: 24px var(--pad); font-size: 13px; color: var(--muted); font-weight: 500; max-width: var(--maxw); margin-inline: auto; }

/* ============================================================
   reveal
   ============================================================ */
.reveal, .reveal.in { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .rubros { flex-wrap: wrap; }
}
/* Nav → hamburguesa en tablet/iPad y mobile (cubre iPad portrait 768 y landscape 1024) */
@media (max-width: 1024px) {
  .nav { grid-template-columns: auto 1fr auto; }
  .nav-left { display: none; }
  /* Sin links en el nav no hay de dónde colgar el mega-menú: manda la hamburguesa.
     El scrim NO se oculta: lo comparte el buscador, que sí vive en mobile. */
  .nav-mega { display: none; }
  /* El pill no entra en un nav de tres íconos: vuelve el botón lupa y el campo
     pasa a dibujarse adentro del panel. */
  .nav-search-box { display: none; }
  .nav-search-btn { display: inline-flex; }
  .nav-search .nsearch-field { display: flex; }
  .nsearch-bar { justify-content: flex-start; padding-top: 22px; padding-bottom: 14px; }
  .nav-logo { justify-self: start; }
  .nav-burger { display: inline-flex; }
  /* Especificidad extra: la definición base de .nav-account aparece más abajo
     en el archivo y, a igual especificidad, ganaría por orden. */
  .nav .nav-account { display: none; }
}
@media (max-width: 900px) {
  .modal { grid-template-columns: 1fr; }
  .modal-side { display: none; }
  .cta-inner, .account-grid, .footer-top { grid-template-columns: 1fr; }
  .account-info { border-right: none; border-bottom: 1px solid var(--line); }
  .steps, .trust-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .rubros { flex-wrap: wrap; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .hero h1, .hero .hero-ph-title { font-size: clamp(28px, 7vw, 44px); }
}

/* ============================================================
   SELECTOR DE TALLES RÁPIDO (quick add) — SizePickerModal
   Calcado del picker de Nazaret Joyas (Kegam): card centrada en
   desktop, bottom-sheet en mobile, CTA negra full-width.
   ============================================================ */
.spicker-scrim {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(11,11,11,.50);
  display: flex; align-items: flex-end; justify-content: center;
  animation: spicker-fadein .2s ease;
}
@keyframes spicker-fadein { from { opacity: 0; } to { opacity: 1; } }
.spicker-card {
  background: var(--paper); color: var(--ink);
  width: 100%; max-width: 560px;
  border-radius: 6px 6px 0 0;
  padding: 12px 28px 44px;
  max-height: 90dvh; overflow-y: auto;
  animation: spicker-slide-up .32s cubic-bezier(.22,1,.36,1) both;
}
@keyframes spicker-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (min-width: 641px) {
  .spicker-scrim { align-items: center; padding: 24px; }
  .spicker-card { border-radius: 6px; max-width: 480px; }
}
.spicker-handle { width: 40px; height: 4px; background: var(--line-2); border-radius: 2px; margin: 0 auto 20px; }
@media (min-width: 641px) { .spicker-handle { display: none; } }

.spicker-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.spicker-thumb { width: 52px; height: 52px; flex-shrink: 0; border-radius: 6px; overflow: hidden; }
.spicker-thumb .ph { width: 100%; height: 100%; }
.spicker-thumb .ph-glyph { opacity: .3; }
.spicker-thumb .ph-code { display: none; }
.spicker-header-text { flex: 1; min-width: 0; }
.spicker-name { font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.3; letter-spacing: -.01em; }
.spicker-label { font-size: 12px; color: var(--muted); margin-top: 3px; }
.spicker-close { flex-shrink: 0; color: var(--muted); display: inline-flex; transition: color .16s ease; }
.spicker-close:hover { color: var(--ink); }

.spicker-colors { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
/* Etiqueta de sección dentro del modal (Color / Talles) */
.spicker-section-label { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 10px; }
.spicker-section-label b { color: var(--ink); }
/* Badge con la cantidad de talles elegidos por color */
.color-sw-badge {
  position: absolute; top: -5px; right: -5px;
  min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--red); color: #fff;
  font-family: var(--sans); font-size: 11px; font-weight: 700; line-height: 1;
  border-radius: 999px; box-shadow: 0 0 0 2px var(--paper);
}

.spicker-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; }
.spicker-chip {
  font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--ink);
  border: 1.5px solid transparent; border-radius: 6px;
  padding: 13px 10px; background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  transition: border-color .18s, background .18s, color .18s, transform .26s cubic-bezier(.34,1.56,.64,1);
  user-select: none;
}
.spicker-chip:hover { opacity: .7; }
.spicker-chip--on { background: var(--red); color: #fff; }

@keyframes spicker-appear { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.spicker-qty-section {
  margin-top: 16px; display: flex; flex-direction: column; gap: 8px;
  animation: spicker-appear .28s cubic-bezier(.22,1,.36,1) both;
}
.spicker-qty-row { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; }
.spicker-qty-label { font-family: var(--sans); font-size: 16px; font-weight: 600; color: var(--ink); }
.spicker-stepper {
  display: flex; align-items: center; height: 36px; flex-shrink: 0;
  background: var(--red); border-radius: 999px; overflow: hidden;
}
.spicker-stepper-btn {
  width: 36px; height: 36px; font-size: 18px; font-weight: 300; color: #fff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  touch-action: manipulation; transition: background .12s ease;
}
.spicker-stepper-btn:hover { opacity: .7; }
.spicker-stepper-num {
  min-width: 28px; text-align: center; color: var(--on-ink);
  font-family: var(--sans); font-size: 13px; font-weight: 600; line-height: 1;
  animation: pc-pop .24s ease both;
}

.spicker-cta {
  display: flex; align-items: center; justify-content: center;
  margin-top: 20px; width: 100%; height: 52px;
  background: var(--red); color: #fff;
  border: none; border-radius: var(--r-pill);
  font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: .01em;
  transition: background .22s ease, color .22s ease;
  animation: spicker-appear .28s cubic-bezier(.22,1,.36,1) both;
}
.spicker-cta:hover { opacity: .78; }
/* Confirmado: botón lleno en negro, el mismo "ya agregado" que .pc-added en la
   card. Con fondo transparente el rótulo quedaba suelto sobre el crema del modal
   y parecía que el botón había desaparecido. */
.spicker-cta--done { background: var(--ink); color: var(--on-ink); cursor: default; pointer-events: none; }
/* El botón flotante de WhatsApp (z-index 900) quedaba encima del CTA del
   selector en celular. Mientras el selector está abierto, se va. */
body.picker-open .wa-float { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .spicker-scrim, .spicker-card, .spicker-qty-section, .spicker-cta, .spicker-stepper-num { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Favoritos (wishlist) + Cuenta de cliente + Auth overlay
   ═══════════════════════════════════════════════════════════════ */

/* La ficha del catálogo ya no lleva corazón (igual que Nazaret): se marca desde
   el detalle, con .pdp-fav. Sobre la foto competía con el contador de pedido de
   la esquina opuesta y con el cruce a la segunda foto. */


/* —— Menú de cuenta en el nav (crema opaco, igual que el mega de Productos) —— */
.nav-account { position: relative; display: inline-flex; align-items: center; }
.nav-account-menu {
  position: absolute;
  top: calc(100% + 12px); right: 0;
  min-width: 248px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px rgba(11,11,11,0.12);
  padding: 10px;
  color: var(--ink);
  transform: translateY(-10px) scale(.99);
  transform-origin: top right;
  opacity: 0;
  pointer-events: none;
  transition: transform .42s var(--ease), opacity .3s;
  z-index: 90;
}
/* Puente invisible sobre el hueco ícono↔menú (mismo truco que el mega). */
.nav-account-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }
.nav-account:hover .nav-account-menu,
.nav-account:focus-within .nav-account-menu { transform: none; opacity: 1; pointer-events: auto; }

.nav-am-head { padding: 8px 12px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
.nav-am-name { display: block; font-family: var(--sans); font-weight: 700; font-size: 14px; color: var(--ink); }
.nav-am-email { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-am-sub { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.nav-am-item {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border: none; background: transparent;
  font-family: var(--sans); font-size: 14px; color: var(--ink);
  border-radius: 10px; cursor: pointer; text-align: left;
  transition: opacity .15s ease;
}
.nav-am-item:hover { opacity: .62; }
.nav-am-item--danger { color: var(--red); }
.nav-am-item--danger:hover { opacity: .62; }

/* ═══════════════════════ Página de Favoritos ═══════════════════════ */
/* Misma estética que la tienda: shop-hero + grid de product cards. */
.fav-body { padding: 0 var(--pad) clamp(72px, 9vw, 110px); max-width: var(--maxw); margin-inline: auto; }
.fav-sync-row {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  padding-bottom: 18px; margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.fav-count { font-family: var(--sans); font-size: 14px; color: var(--muted); }
.fav-count b { color: var(--ink); font-weight: 700; }
.fav-sync-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  color: #1C6B3A; background: rgba(28,107,58,0.10);
  padding: 7px 13px; border-radius: 999px;
}
/* Favoritos usa la escalera de .pgrid (4 · 3 · 2) sin overrides propios: es la
   misma card y tiene que cortar en los mismos breakpoints que el catálogo. */
.fav-empty {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: clamp(56px, 11vw, 120px) 0; gap: 18px;
}
.fav-empty-text { font-family: var(--sans); font-size: 16px; color: var(--ink-2); line-height: 1.55; max-width: 40ch; margin: 0; }
.fav-empty-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 6px; }
/* "Ya tengo cuenta": pill gris clarito, sin línea de borde. */
.fav-signin-link {
  background: var(--surface); border: 1.5px solid transparent; cursor: pointer;
  font-family: var(--sans); font-size: 16px; font-weight: 600; color: var(--ink);
  padding: 17px 34px; border-radius: var(--r-pill);
  transition: opacity .28s var(--ease);
}
.fav-signin-link:hover { opacity: .7; }

/* ═══════════════════════ Auth (pantalla completa, no drawer) ═══════════════════════ */
.auth-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: var(--surface);
  padding: clamp(10px, 1.4vw, 16px);
  box-sizing: border-box;
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
.auth-overlay--open { opacity: 1; pointer-events: auto; }
.auth-split { display: flex; width: 100%; height: 100%; }
.auth-panel-left {
  position: relative;
  flex: 1;
  background: var(--paper);
  border-radius: var(--r-md);
  padding: 24px;
  overflow-y: auto;
  display: flex; align-items: center; justify-content: center;
}

.auth-back-btn {
  position: absolute; top: clamp(20px, 3vw, 32px); left: clamp(20px, 3vw, 36px);
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: none; cursor: pointer;
  font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--muted);
  padding: 0; transition: color .2s ease;
}
.auth-back-btn:hover { color: var(--ink); }

.auth-form-wrap { width: min(360px, 86vw); display: flex; flex-direction: column; transition: opacity .2s ease; }
.auth-form-wrap--fading { opacity: 0; }
.auth-form { display: flex; flex-direction: column; }
.auth-title {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(28px, 3.6vw, 38px); letter-spacing: -0.01em;
  color: var(--red);
  margin: 0 0 10px; cursor: pointer; user-select: none; text-align: center;
}
.auth-sub { font-family: var(--sans); font-size: 14px; color: var(--muted); line-height: 1.55; margin: 0 0 28px; text-align: center; }

.auth-fields { display: flex; flex-direction: column; gap: 18px; margin-bottom: 22px; }
.auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.auth-field { display: flex; flex-direction: column; gap: 7px; }
.auth-label { font-family: var(--sans); font-size: 12px; color: var(--muted); }
.auth-input {
  width: 100%; border: none; border-bottom: 1px solid var(--line-2);
  border-radius: 0; background: transparent; color: var(--ink);
  font-family: var(--sans); font-size: 15px; padding: 10px 0; outline: none;
  transition: border-color .2s ease;
}
.auth-input:hover, .auth-input:focus { border-color: var(--ink); }
.auth-input--error { border-color: var(--red); }
.auth-field-error { color: var(--red); font-family: var(--sans); font-size: 12px; line-height: 1.25; animation: errorFadeIn .22s ease both; }

.auth-pwd-wrap { position: relative; display: flex; align-items: center; }
.auth-pwd-wrap .auth-input { padding-right: 34px; }
.auth-pwd-toggle {
  position: absolute; right: 0; bottom: 8px;
  background: none; border: none; cursor: pointer; color: var(--muted);
  display: inline-flex; padding: 4px; transition: color .2s ease;
}
.auth-pwd-toggle:hover { color: var(--ink); }

.auth-forgot-line { font-family: var(--sans); font-size: 13px; color: var(--muted); margin: 0 0 18px; }
.auth-forgot-cta, .auth-error { font-family: var(--sans); }
.auth-forgot-cta { background: none; border: none; cursor: pointer; color: var(--ink); font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; padding: 0; }
.auth-forgot-cta:hover { opacity: .6; }
.auth-error { color: var(--red); font-size: 13px; margin: 0 0 14px; }

.auth-submit {
  width: 100%; border: none; border-radius: 999px; cursor: pointer;
  background: var(--red); color: #fff;
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  padding: 16px 28px; transition: opacity .2s ease, transform .08s ease;
}
.auth-submit:hover { opacity: 0.86; }
.auth-submit:active { transform: scale(.99); }
.auth-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.auth-btn-ghost {
  width: 100%; margin-top: 12px; cursor: pointer;
  background: var(--surface); border: 1.5px solid transparent; color: var(--ink);
  border-radius: 999px; font-family: var(--sans); font-size: 15px; font-weight: 600;
  padding: 15px 28px; transition: opacity .2s ease;
}
.auth-btn-ghost:hover { opacity: .7; }

.auth-sent { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; color: var(--muted); }
.auth-sent svg { color: var(--ink); opacity: 0.7; }
.auth-sent p { font-family: var(--sans); font-size: 15px; line-height: 1.7; margin: 0; }
.auth-sent .auth-btn-ghost, .auth-sent .auth-submit { margin-top: 6px; }

@media (max-width: 520px) {
  .auth-row { grid-template-columns: 1fr; }
}

/* ── Botón flotante de WhatsApp (index.php) ───────────────────── */
/* .wa-float es el contenedor fijo (botón + menú de vendedoras): las reglas
   body.*-open .wa-float lo esconden entero. */
.wa-float {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 900;
  transition: opacity 0.18s ease;
}
.wa-float-btn {
  width: 54px;
  height: 54px;
  border: 0;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #25D366;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  transition: opacity 0.18s ease;
}
/* Sin el salto hacia arriba: en hover sólo baja la opacidad, como el resto de los
   botones del sitio. El anillo de foco queda para el teclado y en rojo, no negro. */
@media (hover: hover) and (pointer: fine) { .wa-float-btn:hover { opacity: .8; } }
.wa-float-btn:focus { outline: none; }
.wa-float-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.wa-float-btn svg { width: 26px; height: 26px; }

.wa-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  width: 248px;
  padding: 8px;
  background: var(--surface);
  border: 0;
  border-radius: var(--r-md);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
  transform-origin: bottom right;
  transform: translateY(6px) scale(0.98);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.22s var(--ease), visibility 0s linear 0.22s;
}
.wa-float.is-open .wa-menu {
  transform: none;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.18s ease, transform 0.22s var(--ease), visibility 0s;
}
.wa-menu-title {
  margin: 4px 10px 6px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.wa-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 12px;
  color: var(--ink);
  text-decoration: none;
}
/* Hover (sólo con mouse) y foco de teclado: el nombre y el número pasan a rojo,
   sin fondo gris. */
.wa-menu-item:focus { outline: none; }
.wa-menu-txt strong, .wa-menu-txt span { transition: color 0.15s ease; }
.wa-menu-item:focus-visible .wa-menu-txt strong,
.wa-menu-item:focus-visible .wa-menu-txt span { color: var(--red); }
@media (hover: hover) and (pointer: fine) {
  .wa-menu-item:hover .wa-menu-txt strong,
  .wa-menu-item:hover .wa-menu-txt span { color: var(--red); }
}
.wa-menu-avatar {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #25D366;
  color: #fff;
  font-family: var(--display);
  font-weight: 800;
  font-size: 16px;
}
.wa-menu-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wa-menu-txt strong { font-family: var(--sans); font-size: 15px; font-weight: 600; }
.wa-menu-txt span { font-family: var(--sans); font-size: 13px; color: var(--muted); }

@media (max-width: 640px) {
  .wa-float { right: 14px; bottom: 14px; }
  .wa-float-btn { width: 50px; height: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-menu, .wa-float.is-open .wa-menu { transition: none; transform: none; }
}

/* ── Footer: links legales en la barra inferior ───────────────── */
.footer-bottom-links { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.footer-bottom-links a { color: var(--muted); text-decoration: none; }
.footer-bottom-links a:hover { color: var(--ink); text-decoration: underline; }
.footer-dot { color: var(--line-2); }

/* ── Página "Mis pedidos" ─────────────────────────────────────── */
.orders-page { padding-top: calc(var(--head-h) + clamp(28px, 4vw, 56px)); padding-bottom: clamp(56px, 7vw, 100px); min-height: 70vh; }
.orders-head { max-width: 62ch; margin-bottom: clamp(28px, 4vw, 44px); }
.orders-title { font-family: var(--display); font-size: clamp(30px, 4.5vw, 48px); line-height: 1.05; margin-bottom: 12px; }
.orders-sub { color: var(--muted); font-size: 16px; line-height: 1.55; }

.orders-empty { border: 1px solid var(--line); border-radius: 14px; padding: clamp(32px, 5vw, 56px); text-align: center; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.orders-empty-title { font-size: 20px; font-weight: 600; color: var(--ink); }
.orders-empty p { max-width: 46ch; }

.orders-list { display: grid; gap: 16px; }
.orders-card { border: 1px solid var(--line); border-radius: 14px; padding: clamp(18px, 2.4vw, 26px); background: var(--paper); }
.orders-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.orders-card-id { font-weight: 600; font-size: 15px; }
.orders-card-date { color: var(--muted); font-size: 13px; margin-top: 2px; text-transform: capitalize; }
.orders-badge { font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
.orders-badge--pending   { background: #FEF3E2; color: #9A5B00; }
.orders-badge--contacted { background: #E7F1FF; color: #1A5FB4; }
.orders-badge--closed    { background: #EAF7EC; color: #1C7A34; }

.orders-card-items { display: grid; gap: 8px; padding: 14px 0; }
.orders-item { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; }
.orders-item-name { color: var(--ink); }
.orders-item-code { color: var(--muted); }
.orders-item-meta { color: var(--muted); white-space: nowrap; }

.orders-card-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.orders-card-pares { color: var(--muted); font-size: 14px; }
.orders-card-total { font-weight: 600; font-size: 15px; }

@media (max-width: 560px) {
  .orders-item { flex-direction: column; gap: 2px; }
  .orders-item-meta { white-space: normal; }
}

/* ── Página legal (Privacidad y términos) ─────────────────────── */
.legal-page { padding-top: calc(var(--head-h) + clamp(28px, 4vw, 56px)); padding-bottom: clamp(56px, 7vw, 100px); max-width: 820px; }
.legal-head { margin-bottom: clamp(28px, 4vw, 44px); }
.legal-title { font-family: var(--display); font-size: clamp(30px, 4.5vw, 48px); line-height: 1.05; margin-bottom: 12px; }
.legal-sub { color: var(--muted); font-size: 16px; }
.legal-body h2 { font-size: 20px; font-weight: 600; margin: 32px 0 10px; }
.legal-body p { color: var(--ink-2); line-height: 1.65; margin-bottom: 12px; }
.legal-body ul { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 7px; }
.legal-body li { color: var(--ink-2); line-height: 1.6; }
.legal-body a { color: var(--red); text-decoration: none; }
.legal-body a:hover { text-decoration: underline; }
/* Las fichas de Envíos ("Datos para el despacho") son una lista: sin esto
   heredaban la grilla con sangría de .legal-body ul y salían como barras. */
.legal-body .htb-chips { display: flex; padding-left: 0; margin-bottom: 12px; }
.legal-foot { margin-top: 36px; padding-top: 24px; display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

/* ── Home editable: grillas con cantidad de columnas configurable ──────────────
   La cantidad de cards por fila la elige el cliente en el panel (Inicio) y viaja
   en data-cols. Va acá abajo de todo a propósito: el selector clase+atributo pesa
   más que el .cat-grid / .banner-duo de arriba, así que estas reglas mandan —
   incluidas las de mobile, que sin esto perderían contra el data-cols. */
.ko-grid { display: grid; }
.ko-grid[data-cols="1"] { grid-template-columns: minmax(0, 1fr); }
.ko-grid[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ko-grid[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ko-grid[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Cards sin link (banner decorativo, card sin destino): no simulan ser clickeables. */
.ko-card--static { cursor: default; }

@media (max-width: 1024px) {
  .ko-grid[data-cols="3"],
  .ko-grid[data-cols="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .ko-grid[data-cols="2"],
  .ko-grid[data-cols="3"],
  .ko-grid[data-cols="4"] { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   RESEÑAS (.rv-*) — riel de estrellas, bloque del detalle,
   modal del formulario y marquesina de la home.
   Portado de Nazaret/Kegam y reencuadrado al lenguaje de Koruk.
   ============================================================ */

:root {
  /* Ámbar y no rojo: el rojo es la marca (CTAs, acentos) y en una estrella se
     leería como error. El ámbar es el código universal de puntuación. */
  --star:       #F5A524;
  --star-empty: #D8D5CD;
}

/* Riel de estrellas: dos capas del mismo SVG de 5 estrellas superpuestas — la
   gris de fondo y la ámbar recortada por ancho. Un solo elemento resuelve medias
   estrellas sin depender de un set de íconos. El viewBox son 5 celdas iguales
   con la estrella centrada en cada una, así el ancho del riel es exactamente 5
   estrellas y el porcentaje del relleno cae donde corresponde. */
.rv-stars { display: inline-flex; align-items: center; gap: 6px; font-size: var(--rv-star-size, 14px); line-height: 1; }
.rv-stars-track { position: relative; display: inline-block; line-height: 0; }
.rv-stars-svg {
  display: block;
  width: calc(var(--rv-star-size, 14px) * 5.4);
  height: var(--rv-star-size, 14px);
  color: var(--star);
}
.rv-stars-bg { color: var(--star-empty); }
.rv-stars-fill { position: absolute; top: 0; left: 0; bottom: 0; overflow: hidden; }
.rv-stars-count { font-family: var(--sans); font-size: 0.86em; color: var(--muted); }
.rv-star-svg { display: block; width: 1em; height: 1em; }

/* Estrellas clickeables del formulario */
.rv-star-input-wrap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rv-star-input { display: inline-flex; gap: 3px; }
.rv-star-btn {
  background: none; border: none; padding: 2px;
  font-size: 26px; line-height: 0;
  color: var(--star-empty); cursor: pointer; border-radius: 4px;
  transition: color .15s ease, transform .15s ease;
}
@media (hover: hover) and (pointer: fine) { .rv-star-btn:hover { transform: scale(1.08); } }
.rv-star-btn--on { color: var(--star); }
.rv-star-hint { font-family: var(--sans); font-size: 13px; color: var(--muted); min-height: 1em; }

/* Estrellas en la ficha del catálogo — mismo padding lateral que .product-info
   para que el riel arranque alineado con el nombre. */
.product-rating { padding: 0 12px; margin-bottom: 6px; line-height: 1; }
@media (max-width: 820px) { .product-rating { padding: 0 8px; margin-bottom: 4px; } }

/* Estrellas bajo el título del detalle.
   Va como flex de bloque (no inline-flex): siendo inline quedaba montado sobre
   una línea del contenedor, que aporta su propio interlineado y empujaba el
   precio hacia abajo con aire que no estaba declarado en ninguna parte. Con
   `line-height: 1` la caja mide lo que se ve, así que los márgenes de acá abajo
   son los que terminan leyéndose en pantalla.
   El h1 tiene line-height 1.02 y margin 0: sin margen propio, las estrellas
   quedaban pegadas al nombre del modelo. Este margen y el del precio están
   calibrados para que quede el mismo aire arriba que abajo de las estrellas
   (~18px de tinta a tinta), igual que en el bloque de reseñas. */
.pdp-rating-link {
  display: flex; width: fit-content;
  align-items: center; gap: 8px; line-height: 1;
  background: none; border: none; padding: 0; margin: 0;
  cursor: pointer; transition: opacity .2s ease;
}
@media (hover: hover) and (pointer: fine) { .pdp-rating-link:hover { opacity: .62; } }
.pdp-rating-text { font-family: var(--sans); font-size: 13.5px; color: var(--muted); }

/* ── Bloque de reseñas del detalle ── */
.rv-section {
  /* Un solo ritmo para todo el bloque: título→resumen, resumen→lista y el aire
     entre reseñas miden lo mismo. Antes cada tramo tenía su propio clamp y la
     zona se leía despareja. */
  --rv-gap: clamp(22px, 2.6vw, 32px);
  /* Separación contra la ficha del producto. Bajada de 5vw/72px: la galería
     termina antes que la columna de info (el grid alinea arriba), así que del
     lado de la foto este padding se suma al desnivel entre columnas y el hueco
     se veía del doble de lo que dice el número. */
  padding: clamp(36px, 3.6vw, 52px) 0 0;
  background: var(--paper);
  /* El header es fijo: sin esto, bajar a #resenas deja el título tapado. */
  scroll-margin-top: calc(var(--head-h) + 20px);
}
.rv-inner { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.rv-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--rv-gap); }
/* Titular de sección, no de página: tiene que quedar por debajo del nombre del
   producto (h1 de la ficha), no competirle. */
.rv-title {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(22px, 2.1vw, 30px); line-height: 1.1;
  letter-spacing: -.02em; margin: 0;
}
.rv-sub { font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 48ch; margin: 0; }

/* Franja de resumen: distribución, promedio y el CTA para valorar, a lo ancho y
   arriba de la lista. */
.rv-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .85fr) minmax(0, .85fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  padding-bottom: var(--rv-gap);
  border-bottom: 1px solid var(--line);
}
.rv-dist { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 7px; }
.rv-dist-row { display: grid; grid-template-columns: 34px 1fr 24px; align-items: center; gap: 12px; }
.rv-dist-label {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--sans); font-size: 12px; color: var(--muted); white-space: nowrap;
}
/* Ámbar en las filas que tienen reseñas: la estrella acompaña a la barra; gris
   en las que están en cero, para que se lea igual que la barra vacía. */
.rv-dist-star { color: var(--star-empty); }
.rv-dist-star--on { color: var(--star); }
.rv-dist-bar { height: 4px; background: var(--line); border-radius: 999px; overflow: hidden; }
.rv-dist-fill { display: block; height: 100%; background: var(--star); border-radius: 999px; transition: width .5s ease; }
.rv-dist-n { font-family: var(--sans); font-size: 12px; color: var(--muted); text-align: right; }

.rv-overview-score { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.rv-summary-score { display: flex; align-items: center; gap: 12px; }
.rv-summary-avg {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(34px, 3.2vw, 44px); line-height: 1; letter-spacing: -.03em;
  color: var(--ink);
}
.rv-summary-count { font-family: var(--sans); font-size: 14px; color: var(--muted); }

.rv-rate-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; width: 100%; max-width: 340px; }
.rv-rate-cta-label { font-family: var(--sans); font-size: 15px; font-weight: 600; color: var(--ink); }
.rv-rate-cta .rv-star-input { margin-left: -2px; }

/* Sin reseñas no hay nada que resumir: las mismas estrellas clickeables del
   formulario hacen de CTA.
   Las estrellas van ópticamente centradas entre el título y el texto: el mismo
   aire arriba que abajo (~20px de tinta a tinta). Con el --rv-gap del resumen
   acá arriba quedaban a 42px del título y a 25px del texto, o sea pegadas al
   texto y flotando lejos del título.
   Los números son px fijos y no un clamp a propósito: el hueco de abajo no
   escala (las estrellas miden 26px y el titular 17px en todos los anchos), así
   que si el de arriba escalara, los dos sólo coincidirían en un ancho puntual y
   se volverían a desbalancear en mobile y en iPad. */
.rv-head:has(+ .rv-empty) { margin-bottom: 11px; }
/* Los tramos van en márgenes propios y no en el `gap`: cada pieza arrastra su
   interlineado y las estrellas su padding, así que un gap único se ve distinto
   en cada tramo aunque el número sea el mismo. */
.rv-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
/* -2px: descuenta el padding del botón para que la primera estrella arranque en
   la misma vertical que el texto de abajo. */
.rv-empty .rv-star-input-wrap { margin: 0 0 12px -2px; }
.rv-empty-title {
  font-family: var(--sans); font-weight: 700;
  font-size: 17px; line-height: 1.3; letter-spacing: -.01em;
  color: var(--ink); margin: 0 0 3px;
}
.rv-empty-lead { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0; max-width: 52ch; }

/* ── Lista ── */
.rv-list { display: flex; flex-direction: column; min-width: 0; padding-top: var(--rv-gap); }
.rv-list-msg { font-size: 15px; color: var(--muted); }
/* Quién la escribió a la izquierda, la reseña a la derecha. */
.rv-item {
  display: grid; grid-template-columns: 190px minmax(0, 1fr);
  gap: clamp(22px, 4vw, 52px);
  padding: 0 0 var(--rv-gap);
  margin-bottom: var(--rv-gap);
  border-bottom: 1px solid var(--line);
}
.rv-item:last-of-type { border-bottom: none; margin-bottom: 0; }
.rv-item-author { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.rv-item-name {
  font-family: var(--sans); font-size: 17px; font-weight: 700;
  letter-spacing: -.01em; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere;
}
.rv-item-content { min-width: 0; }
.rv-item-content .rv-stars { margin-bottom: 10px; }
.rv-item-date { font-family: var(--sans); font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.rv-item-title {
  font-family: var(--sans); font-size: clamp(17px, 1.5vw, 20px); font-weight: 700;
  letter-spacing: -.01em; line-height: 1.3; color: var(--ink); margin: 0 0 6px;
}
.rv-item-body {
  font-size: 16px; line-height: 1.65; color: var(--ink-2); margin: 0;
  white-space: pre-line; overflow-wrap: anywhere;
}
.rv-verified {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: .01em; color: var(--red);
}
.rv-verified-seal { flex: none; display: block; }

/* "¿Te resultó útil?" al pie de cada reseña. */
.rv-helpful { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.rv-helpful-label { font-family: var(--sans); font-size: 13px; color: var(--muted); margin-right: 2px; }
.rv-vote {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sans); font-size: 13px; color: var(--muted);
  background: none; border: none; padding: 6px 4px; cursor: pointer;
  transition: color .2s ease;
}
@media (hover: hover) and (pointer: fine) { .rv-vote:hover { color: var(--ink); } }
.rv-vote--on { color: var(--red); }
.rv-vote-n { font-variant-numeric: tabular-nums; }

.rv-more-btn {
  align-self: flex-start; margin-top: 4px;
  font-family: var(--sans); font-size: 14px; font-weight: 600;
  color: var(--ink); background: var(--surface);
  border: 1.5px solid transparent; border-radius: var(--r-pill);
  padding: 13px 26px; cursor: pointer;
  transition: opacity .25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .rv-more-btn:hover { opacity: .7; }
}

@media (max-width: 900px) {
  .rv-overview { grid-template-columns: 1fr; gap: 28px; align-items: start; }
  .rv-dist, .rv-rate-cta { max-width: none; }
  /* El autor pasa a ser una línea arriba de la reseña. */
  .rv-item { grid-template-columns: 1fr; gap: 12px; }
  .rv-item-author { flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; }
}

/* ── Modal del formulario ── */
.rv-modal-scrim {
  position: fixed; inset: 0;
  /* Sobre el header (fijo) y los drawers: se abre desde el detalle y todo lo
     demás tiene que quedar detrás. */
  z-index: 10005;
  background: rgba(11,11,11,.46);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  display: flex; align-items: flex-end; justify-content: center;
  animation: rv-fadein .22s ease;
}
@keyframes rv-fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes rv-slide-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rv-zoom-in  { from { transform: scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.rv-modal {
  position: relative;
  background: var(--paper); color: var(--ink);
  width: 100%; max-width: 620px; max-height: 92dvh;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 -10px 48px rgba(11,11,11,.22);
  animation: rv-slide-up .34s var(--ease) both;
}
@media (min-width: 641px) {
  .rv-modal-scrim { align-items: center; padding: 24px; }
  .rv-modal {
    max-width: 700px; max-height: min(92dvh, 900px);
    border-radius: var(--r-lg);
    box-shadow: 0 28px 72px rgba(11,11,11,.32);
    animation: rv-zoom-in .28s var(--ease) both;
  }
  .rv-modal-head { padding: 24px 28px 20px; gap: 18px; }
  .rv-modal-thumb { width: 68px; height: 68px; }
  .rv-modal-title { font-size: 25px; }
  .rv-modal-body { padding: 24px 28px 28px; gap: 20px; }
  .rv-modal-done { padding: 56px 32px 42px; }
}
.rv-modal-head { flex-shrink: 0; display: flex; align-items: center; gap: 14px; padding: 20px 20px 16px; }
.rv-modal-thumb {
  width: 54px; height: 54px; flex-shrink: 0; border-radius: 10px; overflow: hidden;
  background: linear-gradient(135deg, #ececee 0%, #e2e3e5 45%, #d6d7da 100%);
}
.rv-modal-thumb .ph { width: 100%; height: 100%; }
.rv-modal-thumb .ph-code, .rv-modal-thumb .ph-glyph { display: none; }
.rv-modal-head-text { flex: 1; min-width: 0; }
.rv-modal-title {
  font-family: var(--display); font-weight: 800; font-size: 22px;
  letter-spacing: -.025em; line-height: 1.1; color: var(--ink);
}
.rv-modal-product {
  font-family: var(--sans); font-size: 13px; color: var(--muted); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rv-modal-close { flex-shrink: 0; color: var(--muted); display: inline-flex; transition: color .16s ease; }
.rv-modal-close:hover { color: var(--ink); }

.rv-modal-body { display: flex; flex-direction: column; gap: 18px; padding: 20px 20px 24px; overflow-y: auto; }
.rv-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rv-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 560px) { .rv-field-row { grid-template-columns: 1fr; } }
.rv-label { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--ink); }
.rv-label-opt { font-weight: 400; color: var(--muted); }
.rv-req { color: var(--red); margin-left: 2px; }
.rv-input {
  width: 100%; height: 46px; padding: 0 14px;
  font-family: var(--sans); font-size: 15px; color: var(--ink);
  background: var(--surface); border: 1.5px solid transparent; border-radius: 12px;
  transition: border-color .18s ease, background .18s ease;
}
.rv-input:focus { outline: none; background: var(--paper); border-color: var(--ink); }
.rv-textarea { height: auto; padding: 12px 14px; line-height: 1.5; resize: vertical; min-height: 110px; }
.rv-help { font-family: var(--sans); font-size: 12px; color: var(--muted); }
.rv-error {
  font-family: var(--sans); font-size: 14px; color: var(--red);
  background: rgba(237,27,45,.07); border-radius: 12px; padding: 10px 14px;
}
.rv-modal-submit {
  width: 100%; height: 52px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 15px; font-weight: 700;
  color: #fff; background: var(--red); border: none; border-radius: var(--r-pill);
  cursor: pointer; transition: opacity .2s ease;
}
@media (hover: hover) and (pointer: fine) { .rv-modal-submit:hover { opacity: .78; } }
.rv-modal-submit:disabled { opacity: .55; cursor: not-allowed; }

.rv-modal-done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 44px 24px 32px; }
.rv-modal-done-icon {
  width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--red); color: #fff; margin-bottom: 6px;
}
.rv-modal-done-title { font-family: var(--display); font-weight: 800; font-size: 26px; letter-spacing: -.025em; }
.rv-modal-done-body { font-size: 15px; color: var(--muted); margin: 0 0 14px; max-width: 40ch; }

/* ============================================================
   MARQUESINA DE RESEÑAS DE LA HOME (.ko-reviews)
   Dos juegos idénticos de tarjetas en bucle; el segundo va aria-hidden para no
   repetirle los testimonios a un lector de pantalla.
   ============================================================ */
.ko-reviews { background: var(--ink); color: var(--on-ink); padding-block: clamp(48px, 6vw, 92px); overflow: hidden; margin-block: var(--sec-y); }
.ko-reviews-head { padding-inline: var(--pad); max-width: var(--maxw); margin: 0 auto clamp(26px, 3vw, 44px); }
.ko-reviews-title {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(30px, 4.4vw, 60px); line-height: .98;
  letter-spacing: -.025em; margin: 0;
}
.ko-reviews-title .red { color: var(--red-bright); }
.ko-reviews-rail { position: relative; }
/* Los bordes se desvanecen contra el fondo: sin esto las tarjetas aparecen y
   desaparecen de golpe en el filo de la pantalla. */
.ko-reviews-rail::before,
.ko-reviews-rail::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: clamp(24px, 6vw, 120px);
  z-index: 2; pointer-events: none;
}
.ko-reviews-rail::before { left: 0;  background: linear-gradient(to right, var(--ink), transparent); }
.ko-reviews-rail::after  { right: 0; background: linear-gradient(to left,  var(--ink), transparent); }
.ko-reviews-track { display: flex; width: max-content; animation: ko-reviews-scroll var(--ko-reviews-duration, 72s) linear infinite; }
.ko-reviews-rail:hover .ko-reviews-track,
.ko-reviews-rail:focus-within .ko-reviews-track { animation-play-state: paused; }
@keyframes ko-reviews-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ko-reviews-set { display: flex; gap: 16px; padding-inline: 8px; }
.ko-review-card {
  flex: 0 0 clamp(280px, 26vw, 380px);
  display: flex; flex-direction: column; gap: 14px;
  padding: clamp(22px, 2vw, 30px);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-lg);
}
.ko-review-rating { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ko-review-check {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--sans); font-size: 11px; font-weight: 600; color: var(--on-ink-3);
}
.ko-review-quote {
  margin: 0; font-size: 16px; line-height: 1.6; color: var(--on-ink);
  /* Cuatro líneas: las tarjetas tienen que medir todas igual o el riel salta. */
  display: -webkit-box; -webkit-line-clamp: 5; line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.ko-review-author { display: flex; flex-direction: column; gap: 3px; margin-top: auto; }
.ko-review-name { font-family: var(--sans); font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.ko-review-meta { font-family: var(--sans); font-size: 13px; color: var(--on-ink-3); text-align: left; }
.ko-review-meta--link { background: none; border: none; padding: 0; cursor: pointer; transition: opacity .18s ease; }
.ko-review-meta--link:hover { opacity: .68; }

@media (prefers-reduced-motion: reduce) {
  .ko-reviews-track { animation: none; }
  .ko-reviews-rail { overflow-x: auto; }
  .rv-modal, .rv-modal-scrim, .pc-added { animation: none; }
}

/* La foto del modal comparte el tratamiento de la ficha: contenida y fundida
   contra el fondo de la tarjeta. */
.rv-modal-thumb .ph-img { object-fit: contain; padding: 8%; mix-blend-mode: multiply; }

/* La banda de cierre también es negra: pegadas y sin una línea, la marquesina y
   el "Abrí tu cuenta" se leen como un solo bloque de fondo sin principio ni fin. */
/* Marquesina y CTA son dos negros seguidos: van soldados, separados sólo por el
   filete. Por eso se anulan los márgenes que las despegarían. */
.ko-reviews + .cta-band { border-top: 1px solid rgba(255,255,255,.12); margin-top: 0; }
.ko-reviews:has(+ .cta-band) { margin-bottom: 0; }

/* 404: reusa el cascarón de .legal-page pero la grilla de productos necesita el
   ancho completo, no los 820px del texto legal. */
.legal-page.notfound-page { max-width: none; }
.notfound-page .legal-head { max-width: 820px; margin-inline: auto; }
.notfound-picks { margin-top: clamp(48px, 6vw, 80px); }
/* Titular secundario: tiene que quedar claramente por debajo del h1 de la página. */
.notfound-picks .section-title { margin-bottom: 24px; font-size: clamp(22px, 2.4vw, 30px); }

/* ============================================================
   ESTRUCTURA DE PORTADA ESTILO NAZARET (sep 2026)
   Referencias: nazaretjoyas.com.ar (orden de secciones, garantías, FAQ,
   cierre), Eme Studios / Smud (grilla con pestañas, nombre gigante en el
   footer). Geometría de las referencias, paleta y tipografía de Koruk.
   ============================================================ */

/* Un solo estilo de título de sección en toda la portada. Antes convivían dos:
   los de carrusel en minúscula y los de grilla forzados a MAYÚSCULA
   ("ELEGÍ TU RUBRO"), y los dos a 60px, a la par del h1 del hero. */
.rail-head .rail-title,
.rail-title,
.cr-title {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(28px, 3.3vw, 46px); line-height: 1.02;
  letter-spacing: -.025em; text-transform: none; margin: 0;
}

/* Los nombres de rubro del mosaico iban en MAYÚSCULA y las categorías de abajo
   no: mismo tratamiento para las dos (el peso 900 ya los hace protagonistas). */
.mo-title { text-transform: none; }

/* ——— Grilla de productos con pestañas por rubro ——— */
.pgrid-sec { padding-block: var(--sec-y); }
.pgrid-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px 24px; flex-wrap: wrap; margin-bottom: clamp(20px, 2.4vw, 32px);
}
.pgrid-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.pgrid-tab {
  font-family: var(--sans); font-weight: 600; font-size: 14px; line-height: 1;
  padding: 11px 17px; border: 0; border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink); cursor: pointer;
  transition: opacity .2s;
}
.pgrid-tab:hover { opacity: .7; }
.pgrid-tab.is-on { background: var(--ink); color: #fff; }
.pgrid-more { display: flex; justify-content: center; margin-top: clamp(28px, 3vw, 44px); }
@media (max-width: 640px) {
  /* En teléfono las pestañas no se parten en dos renglones: se deslizan. */
  .pgrid-tabs {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad);
  }
  .pgrid-tabs::-webkit-scrollbar { display: none; }
  .pgrid-tab { flex: 0 0 auto; }
}

/* ——— Categorías con la foto vertical y el nombre encima (layout `overlay`) ——— */
.cat-grid[data-layout="overlay"] .product-media { aspect-ratio: 3 / 4; }
/* CTA de cada card: link subrayado bajo el nombre, como el "Comprar ahora" de
   las categorías de Nazaret, en vez de la píldora blanca. */
.cat-grid[data-layout="overlay"] .editorial-overlay { padding: clamp(18px, 2.2vw, 32px); gap: 10px; }
.cat-grid[data-layout="overlay"] .editorial-overlay .btn {
  position: relative; height: auto; padding: 0 0 5px; margin-top: 2px;
  background: none; color: #fff; border: 0; border-radius: 0;
  font-size: clamp(14px, 1.15vw, 17px); font-weight: 600;
  text-shadow: 0 1px 12px rgba(0,0,0,.3);
}
.cat-grid[data-layout="overlay"] .editorial-overlay .btn::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: rgba(255,255,255,.9);
}
@media (max-width: 640px) {
  /* Como "Comprar por categorías" de Nazaret en celular: fila deslizable con
     dos fotos (y el borde de la tercera asomando, que acá no hay flechas). */
  .cat-grid.ko-grid[data-layout="overlay"] {
    display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad);
    scroll-padding-inline: var(--pad); scrollbar-width: none;
  }
  .cat-grid.ko-grid[data-layout="overlay"]::-webkit-scrollbar { display: none; }
  .cat-grid[data-layout="overlay"] > * { flex: 0 0 calc((100% - 10px) / 2.2); scroll-snap-align: start; }
  /* A media pantalla: nombre y CTA a la escala de las chicas del mosaico, sin
     bajada (se comía la foto). */
  .cat-grid[data-layout="overlay"] .editorial-overlay { padding: 14px 13px; gap: 8px; }
  .cat-grid[data-layout="overlay"] .mat-tile-title { font-size: clamp(18px, 5vw, 24px); line-height: 1.08; }
  .cat-grid[data-layout="overlay"] .editorial-caption { display: none; }
  .cat-grid[data-layout="overlay"] .editorial-overlay .btn { font-size: clamp(12.5px, 3.5vw, 15px); }
}
/* Con una o dos categorías no hay nada que deslizar: con la fila de arriba, la
   segunda quedaba cortada por el borde. Van enteras, lado a lado. */
@media (max-width: 640px) {
  .cat-grid.ko-grid[data-layout="overlay"][data-n="1"],
  .cat-grid.ko-grid[data-layout="overlay"][data-n="2"] {
    display: grid; overflow: visible; scroll-snap-type: none;
    margin-inline: 0; padding-inline: 0;
  }
  .cat-grid.ko-grid[data-layout="overlay"][data-n="1"] { grid-template-columns: minmax(0, 1fr); }
  .cat-grid.ko-grid[data-layout="overlay"][data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat-grid[data-layout="overlay"][data-n="1"] > *,
  .cat-grid[data-layout="overlay"][data-n="2"] > * { flex: none; }
}

/* ——— Garantías: ícono al costado, cuatro en fila (Nazaret / Smud) ——— */
.trust { background: var(--surface); border-block: 0; margin-block: var(--sec-y); }
.trust-grid {
  max-width: var(--maxw); margin-inline: auto;
  padding: clamp(28px, 3vw, 40px) var(--pad);
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px);
}
.trust-grid[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.trust-cell { display: flex; align-items: flex-start; gap: 14px; }
.trust-ico { color: var(--red); flex-shrink: 0; margin-top: 1px; display: inline-flex; }
.trust-cell .v {
  font-family: var(--display); font-weight: 800; font-size: 18px;
  line-height: 1.2; letter-spacing: -.01em;
}
.trust-cell .k { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--ink-2); max-width: 30ch; }
@media (max-width: 1024px) {
  .trust-grid, .trust-grid[data-n="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .trust-grid, .trust-grid[data-n="3"] { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}

/* ——— Preguntas frecuentes en la portada ——— */
.home-faq { padding-block: calc(var(--sec-y) * 1.5); max-width: 860px; }
.home-faq-title { text-align: center; margin-bottom: clamp(20px, 3vw, 36px); }
.home-faq-more { display: flex; justify-content: center; margin-top: 28px; }

/* ——— Banda de cuenta: el botón va contra el borde derecho, como el cierre de
   Nazaret. Estaba en el centro de la columna y quedaba flotando. ——— */
.cta-actions { justify-self: end; }
@media (max-width: 900px) { .cta-actions { justify-self: start; } }
/* En celular, como el cierre de Nazaret: texto centrado y el botón a todo el ancho. */
@media (max-width: 640px) {
  .cta-inner { text-align: center; gap: 28px; }
  .cta-band p { margin-inline: auto; }
  .cta-actions { justify-self: stretch; align-items: stretch; }
}

/* ——— Barra superior: "Ver más" lleva a /envios ——— */
.topbar-more {
  color: #fff; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px; margin-left: 4px; transition: opacity .2s;
}
.topbar-more:hover { opacity: .78; }

/* ——— Footer: cuatro columnas y el nombre a todo el ancho ——— */
.footer-top { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.footer-wordmark { max-width: var(--maxw); margin-inline: auto; padding: clamp(4px, 1.5vw, 20px) var(--pad) 0; }
.footer-wordmark svg { display: block; width: 100%; height: auto; overflow: visible; }
.footer-wordmark text {
  font-family: var(--display); font-weight: 900; font-size: 272px;
  fill: var(--red); letter-spacing: -.02em;
}
.footer-bottom { border-top: 1px solid var(--line); margin-top: clamp(16px, 2vw, 28px); }
@media (max-width: 900px) { .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; } }

/* ——— Flechas de los carruseles en pantallas táctiles ———
   Ahí se desliza con el dedo: la flecha que no lleva a ningún lado (la de
   "anterior" al arrancar) no se muestra, y las dos son más chicas para no tapar
   media foto. */
@media (hover: none) {
  .rail-btn { width: 38px; height: 38px; }
  .rail-btn:disabled { display: none; }
}

/* ——— Ficha de producto: acordeón (como Nazaret) ——— */
.pdp-accord { margin-top: 24px; }
.pdp-accord .acc-body a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.pdp-accord .acc-body a:hover { opacity: .62; }

/* ——— Catálogo: miga de pan y línea "tipo · rubro" en la card ——— */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 13px; color: var(--muted); }
.crumbs a { color: var(--muted); transition: opacity .2s; }
.crumbs a:hover { opacity: .62; }
.crumbs .crumbs-here { color: var(--ink); font-weight: 500; }
.product-meta { margin-top: 3px; font-size: 12.5px; color: var(--muted); line-height: 1.35; }