/* ============================================================
   FUENTES — alojadas en el propio sitio (antes Google Fonts).
   Una sola fuente variable por familia (cubre todos los pesos) y
   recortada a latín + signos del español. Sin la hoja externa de
   Google se evitan dos conexiones nuevas y una petición que
   bloqueaba el renderizado. Sora e Inter se precargan en el <head>.
   ============================================================ */
@font-face {
  font-family: 'Sora';
  src: url('../fonts/sora.woff2') format('woff2');
  font-weight: 100 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrains-mono.woff2') format('woff2');
  font-weight: 100 800; font-style: normal; font-display: swap;
}

/* ============================================================
   TOKENS — paleta verde de Descous (acento #1B6B4C)
   ============================================================ */
:root {
  /* BASE */
  --c-base-950: #FFFFFF;
  --c-base-900: #F8F9FA;
  --c-base-800: #F1F3F5;
  --c-base-700: #E9ECEF;

  /* ACENTO — verde de la marca. Todo lo accionable (botones, precios,
     badges, focus) sale de aquí, así que cambiarlo tiñe el sitio entero. */
  --c-accent:       #1B6B4C;
  --c-accent-light: #26895F;
  --c-accent-dark:  #12513A;
  --c-accent-glow:  rgba(27, 107, 76, .35);
  --c-accent-muted: rgba(27, 107, 76, .10);
  --c-accent-rgb:   27, 107, 76;

  /* TEXTO */
  --c-ink:     #0F172A;
  --c-ink-mid: #475569;
  /* Subido desde #94A3B8: a 12-14px no llegaba a 4.5:1 sobre blanco. */
  --c-ink-dim: #64748B;

  /* BORDES */
  --c-border:       rgba(15, 23, 42, .08);
  --c-border-light: rgba(15, 23, 42, .14);
  --c-border-focus: rgba(27, 107, 76, .55);

  /* VERDE — tomado del hero, para teñir el resto del sitio */
  --c-verde-hondo:  #0B2A20;
  --c-verde:        #1E6A4E;
  --c-verde-claro:  #CFEBC7;
  --c-verde-lavado: #F3F9F0;
  --c-verde-rgb:    30, 106, 78;

  /* SEMÁNTICOS */
  /* Verde y ambar oscurecidos: los textos de stock son de 10-11px y en
     los tonos anteriores quedaban en ~3:1 sobre blanco. */
  --c-success: #15803D;
  --c-warning: #B45309;
  --c-error:   #DC2626;

  /* TIPOGRAFÍA */
  --f-display: 'Sora', system-ui, sans-serif;
  --f-sans:    'Inter', system-ui, sans-serif;
  --f-mono:    'JetBrains Mono', monospace;

  --text-xs:   .75rem;
  --text-sm:   .875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;
  --text-3xl:  2.25rem;
  --text-hero: clamp(2rem, 5vw, 3.5rem);

  /* ESPACIADO */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;
  --sp-4: 1rem;    --sp-5: 1.25rem; --sp-6: 1.5rem;  --sp-8: 2rem;
  --sp-10: 2.5rem; --sp-12: 3rem;   --sp-16: 4rem;
  --section-y: clamp(1rem, 7vw, 3rem);
  --container: min(1200px, 92vw);
  /* Alto real del navbar. Vivia solo dentro de .hero; subirlo aca permite
     usarlo para el scroll-padding de los anclajes. */
  --nav-alto: 74px;
  --gutter:    clamp(1rem, 3vw, 2rem);

  /* RADIUS */
  --r-sm: 6px;  --r-md: 10px;  --r-lg: 16px;  --r-xl: 22px;
  --r-pill: 9999px;

  /* SOMBRAS */
  --shadow-sm:     0 2px 8px rgba(15, 23, 42, .06);
  --shadow-md:     0 8px 28px rgba(15, 23, 42, .10);
  --shadow-lg:     0 20px 56px rgba(15, 23, 42, .14);
  --shadow-accent: 0 8px 28px var(--c-accent-glow);

  /* MOTION */
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-sharp:  cubic-bezier(.4, 0, .2, 1);
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  /* El navbar es sticky: sin este colchon, al llegar por #ancla el titulo
     de la seccion queda escondido debajo de la barra. */
  scroll-padding-top: calc(var(--nav-alto) + var(--sp-4));
}
body {
  font-family: var(--f-sans);
  background: var(--c-base-950);
  color: var(--c-ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  line-height: 1.6;
}
img, video { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; -webkit-tap-highlight-color: transparent; }

.skip-link {
  position: absolute; top: -100%; left: var(--sp-4);
  background: var(--c-accent); color: #fff;
  padding: var(--sp-3) var(--sp-6); border-radius: var(--r-md);
  font-weight: 600; z-index: 9999; transition: top .2s;
}
.skip-link:focus { top: var(--sp-4); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section-pad { padding-block: var(--section-y); }

/* REVEAL — con red de seguridad (lección Amado Leather) */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
[data-reveal].visible { opacity: 1; transform: none; }

/* ============================================================
   BARRA DE ANUNCIOS
   ============================================================ */
.announce {
  background: var(--c-ink); color: #fff;
  font-size: var(--text-xs); letter-spacing: .02em;
  overflow: hidden; height: 34px;
}
.announce__viewport { height: 100%; position: relative; }
.announce__item {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  opacity: 0; visibility: hidden;
  white-space: nowrap;
  transition: opacity .5s var(--ease-out), visibility .5s var(--ease-out);
}
/* visibility (y no solo opacity): con opacity 0 los tres mensajes siguen
   en el arbol de accesibilidad y el lector de pantalla los lee los tres. */
.announce__item.active { opacity: 1; visibility: visible; }

/* ============================================================
   NAVBAR
   ============================================================ */
/* El blur va en un pseudo-elemento a propósito: backdrop-filter en .navbar
   crearía un containing block y el menú móvil (position:fixed) se posicionaría
   respecto al navbar en vez del viewport. */
/* El <header> es quien se fija, no el .navbar: al estar el nav dentro de
   un header de 74px de alto, `sticky` sólo podía desplazarse dentro de
   esos 74px y la barra se iba con el scroll. */
body > header {
  position: sticky; top: 0; z-index: 900;
}
.navbar {
  position: relative; z-index: 900;
  background: rgba(255,255,255,.88);
  border-bottom: 1px solid var(--c-border);
  transition: box-shadow .3s var(--ease-out);
}
.navbar::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
}
.navbar.scrolled { box-shadow: var(--shadow-sm); }
.navbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); padding-block: var(--sp-4);
}
.navbar__logotype {
  font-family: var(--f-display); font-size: var(--text-xl);
  font-weight: 800; letter-spacing: -.02em;
}
.navbar__logotype span { color: var(--c-accent); }

.navbar__nav { display: flex; align-items: center; }
.navbar__nav-head, .navbar__nav-pie { display: none; }
.navbar__links { display: flex; align-items: center; gap: var(--sp-8); }
.navbar__link {
  font-size: var(--text-sm); font-weight: 500; color: var(--c-ink-mid);
  position: relative; padding-block: var(--sp-1); transition: color .25s;
}
.navbar__link::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 100%; height: 2px; background: var(--c-accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease-out);
}
.navbar__link:hover { color: var(--c-ink); }
.navbar__link:hover::after,
.navbar__link:focus-visible::after { transform: scaleX(1); }

.navbar__actions { display: flex; align-items: center; gap: var(--sp-2); }

.cart-btn {
  position: relative; width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-md); color: var(--c-ink);
  transition: background .25s;
}
.cart-btn:hover { background: var(--c-base-800); }
.cart-btn__count {
  position: absolute; top: 4px; right: 3px;
  min-width: 18px; height: 18px; padding-inline: 4px;
  background: var(--c-accent); color: #fff;
  font-family: var(--f-mono); font-size: 10px; font-weight: 700;
  border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  transform: scale(0); transition: transform .3s var(--ease-spring);
}
.cart-btn__count.show { transform: scale(1); }

.burger { display: none; flex-direction: column; gap: 5px; width: 42px; height: 42px; align-items: center; justify-content: center; }
.burger span {
  display: block; width: 20px; height: 2px; background: var(--c-ink);
  border-radius: 2px; transition: transform .35s var(--ease-out), opacity .35s;
}

.navbar__fondo {
  position: fixed; inset: 0; z-index: 840;
  background: rgba(15, 23, 42, .5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease-out);
}
.navbar__fondo.open { opacity: 1; pointer-events: all; }

@media (max-width: 900px) {
  .burger { display: flex; }

  /* Panel lateral en vez de overlay a pantalla completa: deja ver
     el sitio detrás y se siente como una app, no como otra página. */
  .navbar__nav {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 850;
    width: min(330px, 86vw);
    background: #fff;
    flex-direction: column; align-items: stretch;
    transform: translateX(100%);
    transition: transform .35s var(--ease-out);
    box-shadow: var(--shadow-lg);
    overscroll-behavior: contain;
    overflow-y: auto;
  }
  .navbar__nav.open { transform: translateX(0); }

  .navbar__nav-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--c-border);
  }
  .navbar__nav-cerrar {
    width: 38px; height: 38px; border-radius: var(--r-md);
    display: grid; place-items: center;
    color: var(--c-ink-mid); background: var(--c-base-800);
    transition: background .25s, color .25s;
  }
  .navbar__nav-cerrar:hover { background: var(--c-accent-muted); color: var(--c-accent); }
  .navbar__nav-cerrar svg { width: 18px; height: 18px; }

  .navbar__links {
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--sp-2) var(--sp-3);
  }
  .navbar__links li + li { border-top: 1px solid var(--c-border); }
  .navbar__links .navbar__link {
    display: flex; align-items: center; justify-content: space-between;
    font-family: var(--f-display); font-size: var(--text-base); font-weight: 600;
    color: var(--c-ink);
    padding: var(--sp-4) var(--sp-3);
    border-radius: var(--r-md);
    transition: background .2s, color .2s, padding-left .2s;
  }
  .navbar__links .navbar__link::after { content: none; }
  .navbar__links .navbar__link:active { background: var(--c-accent-muted); color: var(--c-accent); }

  .navbar__nav-pie {
    display: grid; gap: var(--sp-3);
    margin-top: auto;
    padding: var(--sp-5);
    border-top: 1px solid var(--c-border);
  }
  .navbar__nav-cta { width: 100%; }
  .navbar__nav-wa { width: 100%; gap: var(--sp-2); font-size: var(--text-xs); }
  .navbar__nav-wa svg { width: 16px; height: 16px; color: #25D366; }
}

/* ============================================================
   BOTONES
   ============================================================ */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-8);
  background: var(--c-accent); color: #fff;
  font-weight: 700; font-size: var(--text-sm);
  border-radius: var(--r-md);
  transition: background .25s, box-shadow .3s, transform .2s var(--ease-spring);
}
.btn-primary:hover { background: var(--c-accent-dark); box-shadow: var(--shadow-accent); transform: translateY(-2px); }
.btn-primary:active { transform: translateY(0); }
.btn-primary[disabled] {
  background: var(--c-base-700); color: var(--c-ink-dim);
  cursor: not-allowed; transform: none; box-shadow: none;
}

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-8);
  border: 1.5px solid var(--c-border-light);
  color: var(--c-ink); font-weight: 600; font-size: var(--text-sm);
  border-radius: var(--r-md); background: #fff;
  transition: border-color .25s, background .25s, transform .2s var(--ease-spring);
}
.btn-ghost:hover { border-color: var(--c-accent); background: var(--c-accent-muted); transform: translateY(-2px); }

/* ============================================================
   LABELS DE SECCIÓN
   ============================================================ */
.section-label {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-family: var(--f-mono); font-size: var(--text-xs);
  color: var(--c-accent); text-transform: uppercase; letter-spacing: .12em;
  margin-bottom: var(--sp-3);
}
.section-label::before { content: ''; display: block; width: 22px; height: 2px; background: var(--c-accent); }

.section-title {
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  font-weight: 800; line-height: 1.15; letter-spacing: -.025em;
}
.section-sub { color: var(--c-ink-mid); font-size: var(--text-base); margin-top: var(--sp-2); }

/* ============================================================
   HERO — dos columnas, oscuro, con tarjeta flotante y botón de video
   ============================================================ */
/* ============================================================
   HERO — foto a sangre con el texto encima.
   Paleta propia en verde, tomada de la foto, con más contraste que la
   del resto del sitio para que el texto se lea sobre la imagen.
   ============================================================ */
.hero {
  --hero-verde-hondo: var(--c-verde-hondo);
  --hero-verde-claro: var(--c-verde-claro);
  --hero-crema: #F2FAEE;

  position: relative;
  background: var(--hero-verde-hondo);
  color: #fff;
  overflow: hidden;
  /* Alto por ancho, pero sin aspect-ratio fijo: combinarlo con un tope
     recortaba el contenido en pantallas bajas (a 1280x800 las ventajas
     quedaban fuera del hero). Con min-height la caja crece si hace falta. */
  /* El hero arranca arriba del todo y pasa por detrás del navbar, que es
     transparente: así el fondo verde llega hasta el borde de la pantalla
     y no hay ninguna costura. El padding devuelve el espacio que ocupa la
     barra para que el texto no quede debajo. */
  --nav-alto: 74px;
  margin-top: calc(-1 * var(--nav-alto));
  padding-top: var(--nav-alto);
  min-height: calc(clamp(460px, 39vw, 620px) + var(--nav-alto));
  display: grid;
  align-items: center;
}
/* Fondo: sólo el degradado verde, sin producto. */
.hero__fondo {
  position: absolute; inset: 0; z-index: 0;
  display: block; width: 100%; height: 100%;
  object-fit: cover;
}

/* Producto: capa aparte. Para moverlo o cambiarle el tamaño basta con
   tocar estas tres variables, no hay que regenerar ninguna imagen.
   --prod-ancho  : ancho respecto al hero
   --prod-derecha: separación desde el borde derecho
   --prod-abajo  : separación desde el pie del hero */
.hero {
  --prod-ancho: 30%;
  --prod-alto: 60%;
  --prod-derecha: 14%;
  --prod-abajo: 13%;
  --prod-arriba: auto;
  --prod-anclaje: bottom right;
}
/* Halo ambiental detrás del producto: refuerza la profundidad de la foto
   con un pulso muy sutil, sin competir con el texto. Va como elemento
   propio (no ::before) porque necesita el mismo tamaño/posición que la
   foto, controlados por las mismas variables --prod-*. */
.hero__producto-halo {
  position: absolute; z-index: 1;
  right: var(--prod-derecha);
  bottom: var(--prod-abajo);
  top: var(--prod-arriba);
  width: var(--prod-ancho);
  height: var(--prod-alto);
  background: radial-gradient(circle, rgba(207, 235, 199, .38), rgba(207, 235, 199, 0) 68%);
  filter: blur(22px);
  opacity: 0;
  pointer-events: none;
}
.hero.is-listo .hero__producto-halo {
  animation: halo-entra .9s var(--ease-out) .3s both,
             halo-pulso 5s ease-in-out 1.3s infinite;
}
@keyframes halo-entra { to { opacity: 1; } }
@keyframes halo-pulso { 0%, 100% { opacity: .5; scale: 1; } 50% { opacity: .85; scale: 1.06; } }

.hero__producto {
  position: absolute; z-index: 2;
  right: var(--prod-derecha);
  bottom: var(--prod-abajo);
  top: var(--prod-arriba);
  width: var(--prod-ancho);
  height: auto;
  /* Tope de alto: sin esto, en pantallas anchas y bajas el producto crece
     por ancho y se sale del hero por arriba. `contain` lo achica en vez
     de deformarlo. */
  max-height: var(--prod-alto);
  object-fit: contain;
  object-position: var(--prod-anclaje);
  /* La sombra de contacto venía pegada a la foto original; al recortar el
     producto se rehace por CSS, que además se adapta si se reposiciona. */
  filter: drop-shadow(0 26px 30px rgba(4, 22, 16, .45));
  pointer-events: none;
  /* Tilt sutil que sigue el cursor (ver initHeroTilt en app.js). Usa
     `transform`, que ninguna otra animación toca en este elemento
     (prod-entra anima `scale`, prod-flota anima `translate`), así que
     conviven sin pisarse. will-change evita reflow en cada frame. */
  transform: perspective(900px) rotateX(0deg) rotateY(0deg);
  will-change: transform;
}

/* Luz aurora: dos brillos lima muy difusos que flotan lento sobre el
   fondo. Debajo del velo lateral (z-index 1 < 2), así en la zona del
   texto casi no se nota y el contraste queda intacto. Solo transform:
   no toca LCP ni CLS. */
.hero__aurora {
  position: absolute; inset: 0; z-index: 1;
  overflow: hidden; pointer-events: none;
  opacity: 0; transition: opacity 1.4s var(--ease-out);
}
.hero.is-listo .hero__aurora { opacity: 1; }
.hero__aurora::before, .hero__aurora::after {
  content: ''; position: absolute; border-radius: 50%;
  mix-blend-mode: screen; will-change: transform;
}
.hero__aurora::before {
  width: 55%; aspect-ratio: 1; right: 4%; top: -12%;
  background: radial-gradient(circle, rgba(207, 235, 199, .34), rgba(207, 235, 199, 0) 65%);
  animation: aurora-a 18s ease-in-out infinite alternate;
}
.hero__aurora::after {
  width: 45%; aspect-ratio: 1; right: 26%; bottom: -24%;
  background: radial-gradient(circle, rgba(120, 200, 150, .24), rgba(120, 200, 150, 0) 65%);
  animation: aurora-b 24s ease-in-out infinite alternate;
}
@keyframes aurora-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-22%, 18%, 0) scale(1.15); } }
@keyframes aurora-b { from { transform: translate3d(0, 0, 0) scale(1.1); } to { transform: translate3d(18%, -20%, 0) scale(.9); } }

/* Órbita magnética: pocos puntos de luz que giran alrededor del producto.
   La posición la calcula initHeroOrbita() (app.js) cuadro a cuadro;
   cada punto salta entre la capa de atrás (debajo del producto) y la de
   adelante según en qué mitad de la elipse va. */
.hero__orbita { position: absolute; inset: 0; pointer-events: none; }
.hero__orbita--atras { z-index: 1; }
.hero__orbita--frente { z-index: 2; }
.hero__orbita i {
  position: absolute; left: 0; top: 0; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px 2px rgba(220, 255, 210, .75), 0 0 14px 5px rgba(220, 255, 210, .22);
  opacity: 0; will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
  .hero__aurora::before, .hero__aurora::after { animation: none; }
  .hero__orbita { display: none; }
}

/* Velo lateral: la foto tiene zonas claras y el texto necesita contraste
   garantizado, no depender de dónde caiga el degradado. */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(180deg,
      rgba(9, 38, 28, .55) 0%,
      rgba(9, 38, 28, .28) 7%,
      rgba(9, 38, 28, 0) 16%),
    linear-gradient(100deg,
      rgba(9, 38, 28, .90) 0%,
      rgba(9, 38, 28, .70) 32%,
      rgba(9, 38, 28, .22) 54%,
      rgba(9, 38, 28, 0) 70%);
  pointer-events: none;
}

.hero__inner {
  position: relative; z-index: 3;
  width: 100%;
  padding-block: clamp(1.75rem, 3.6vw, 2.75rem);
}
/* El tope proporcional evita que en anchos intermedios (~900px) la
   columna de texto se meta en la zona del producto. */
.hero__texto { max-width: min(32rem, 52%); }

/* Badge: contorno fino, no bloque sólido */
.hero__badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: transparent;
  border: 1px solid rgba(207, 235, 199, .55);
  color: var(--hero-verde-claro);
  font-family: var(--f-mono);
  font-size: .6rem;
  font-weight: 600;
  text-transform: uppercase; letter-spacing: .22em;
  padding: .6rem 1.35rem; border-radius: var(--r-pill);
}

/* Titular a dos pesos: lo normal en fino y claro, el <em> en blanco y
   bold. La copy del home marca con <em> la parte que debe destacar. */
.hero__title {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -.025em;
  color: var(--hero-crema);
  margin-top: clamp(.85rem, 1.8vw, 1.2rem);
}
.hero__title em {
  font-style: normal;
  font-weight: 800;
  color: #fff;
  display: block;
}

/* ---------- título con frase rotativa ----------
   Lo arma montarTituloRotativo() (app.js). Todas las frases se apilan en
   la misma celda del grid:
   la línea toma la altura de la más larga y cambiar de frase no mueve
   nada debajo (CLS 0). Las palabras no se cortan: cada una es un bloque
   que no se parte, y adentro van las letras. */
.hero__rota {
  display: inline-grid; justify-items: start;
  font-weight: 800; color: #fff;
  perspective: 800px;
}
@media (max-width: 860px) { .hero__rota { justify-items: center; } }
.hero__rota-frase { grid-area: 1 / 1; visibility: hidden; }
.hero__rota-frase.activa, .hero__rota-frase.sale { visibility: visible; }
.hero__rota-palabra { display: inline-block; white-space: nowrap; }
.hero__rota-letra { display: inline-block; transform-origin: 50% 85%; backface-visibility: hidden; }

/* Entrada: cada letra sube girando desde abajo, se desenfoca menos a
   medida que llega y "asienta" con un rebote corto. Escalonado cada
   24 ms, así la frase se lee de izquierda a derecha. */
.hero__rota-frase.entra .hero__rota-letra {
  animation: rota-entra .7s cubic-bezier(.2, .85, .25, 1.18) both;
  animation-delay: calc(var(--i) * 24ms);
}
@keyframes rota-entra {
  0%   { opacity: 0; transform: translateY(.62em) rotateX(-88deg); filter: blur(6px); }
  55%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: none; filter: none; }
}
/* Salida: más corta y sin rebote, hacia arriba, para que la nueva sea
   la protagonista. */
.hero__rota-frase.sale .hero__rota-letra {
  animation: rota-sale .38s cubic-bezier(.55, 0, .75, .1) both;
  animation-delay: calc(var(--i) * 14ms);
}
@keyframes rota-sale {
  to { opacity: 0; transform: translateY(-.38em) rotateX(72deg); filter: blur(4px); }
}

.hero__sub {
  color: rgba(242, 250, 238, .82);
  font-size: clamp(.95rem, 1.5vw, 1.12rem);
  line-height: 1.58;
  max-width: 30rem;
  margin-top: clamp(.75rem, 1.4vw, 1rem);
}

/* CTA: pastilla verde oscura, texto espaciado en versalitas */
.hero__cta {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  margin-top: clamp(1.1rem, 2.2vw, 1.6rem);
  padding: .7rem 1.9rem;
  background: var(--hero-verde-hondo);
  border: 1px solid rgba(207, 235, 199, .22);
  color: #fff;
  font-family: var(--f-mono);
  font-size: clamp(.7rem, 1.15vw, .8rem);
  font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em;
  border-radius: var(--r-pill);
  transition: background .25s var(--ease-out), transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
  position: relative; isolation: isolate;
  border-color: transparent;
}
.hero__cta svg { width: 17px; height: 17px; transition: transform .35s var(--ease-spring); }
.hero__cta:hover {
  background: #0F3A2C;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .28);
}

/* Borde de luz que gira: un anillo cónico recorre el contorno en loop.
   Va en ::before (y no en el botón) porque el botón ya usa `animation`
   para la entrada del hero (hero-entra) y se pisarían. La máscara deja
   visible solo el aro de 1.5px. Sin soporte de @property (navegadores
   viejos) el anillo queda quieto como un borde con un brillo. */
@property --cta-giro { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.hero__cta::before {
  content: ''; position: absolute; inset: -1px; z-index: -1;
  border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--cta-giro),
    rgba(207, 235, 199, .10) 0%, rgba(207, 235, 199, .95) 12%,
    rgba(207, 235, 199, .10) 26%, rgba(207, 235, 199, .10) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  animation: cta-giro 3.2s linear infinite;
  pointer-events: none;
}
@keyframes cta-giro { to { --cta-giro: 360deg; } }

/* Texto que rueda al hover: la primera copia sube y la segunda (lima)
   entra desde abajo; la flecha avanza y gira. Solo con mouse: en
   pantallas táctiles el :hover se queda "pegado" después del toque. */
.hero__cta-txt {
  position: relative; display: inline-block; overflow: hidden;
  height: 1.25em; line-height: 1.25em;
}
.hero__cta-txt > span { display: block; transition: transform .4s var(--ease-out); }
.hero__cta-b { position: absolute; left: 0; top: 100%; color: var(--hero-verde-claro); }
@media (hover: hover) {
  .hero__cta:hover .hero__cta-txt > span { transform: translateY(-100%); }
  .hero__cta:hover svg { transform: translateX(4px) rotate(-45deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__cta::before { animation: none; }
  .hero__cta-txt > span, .hero__cta svg { transition: none; }
}

/* Fila de ventajas, separadas por líneas finas */
.hero__ventajas {
  display: flex; flex-wrap: wrap;
  margin-top: clamp(1rem, 2.2vw, 1.5rem);
}
.hero__ventajas li {
  display: flex; flex-direction: column; align-items: center; gap: .65rem;
  padding-inline: clamp(1rem, 2.4vw, 1.9rem);
  text-align: center;
  font-family: var(--f-mono);
  font-size: clamp(.56rem, 1vw, .66rem);
  font-weight: 600;
  line-height: 1.7;
  text-transform: uppercase; letter-spacing: .13em;
  color: rgba(242, 250, 238, .78);
}
.hero__ventajas li:first-child { padding-left: 0; }
.hero__ventajas li + li { border-left: 1px solid rgba(207, 235, 199, .22); }
.hero__ventaja-icono {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border: 1px solid rgba(207, 235, 199, .38);
  border-radius: 50%;
  color: var(--hero-verde-claro);
}
.hero__ventaja-icono svg { width: 19px; height: 19px; }

/* Botón circular de video con texto girando.
   Va sobre la foto y elevado: abajo a la derecha chocaría con el botón
   flotante de WhatsApp, que es fijo al viewport. */
.hero__play {
  position: absolute; z-index: 4;
  right: 45vw; left: auto;
  bottom: 2rem;
  width: 116px; height: 116px;
  background: var(--hero-crema); color: var(--hero-verde-hondo);
  border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: var(--shadow-lg);
  transition: transform .3s var(--ease-spring);
}
.hero__play:hover { transform: scale(1.06); }

/* Ondas de pulso: un aro que se expande y se desvanece cada 4 s.
   Intensidad (de más a menos impacto): cuánto crece (scale final),
   opacidad inicial, grosor del borde y cada cuánto sale. */
.hero__play::before, .hero__play::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  border-radius: 50%;
  /* Blanco y no crema: sobre la zona verde clara del fondo, la crema
     casi desaparecía. */
  border: 1.5px solid rgba(255, 255, 255, .8);
  animation: play-onda 4s var(--ease-out) infinite;
  pointer-events: none;
}
/* Una sola onda: la segunda (::after) queda apagada. */
.hero__play::after { display: none; }
@keyframes play-onda {
  from { transform: scale(1); opacity: .5; }
  60%, to { transform: scale(1.3); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__play::before, .hero__play::after { animation: none; opacity: 0; }
}
.hero__play-texto {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  fill: var(--hero-verde-hondo);
  animation: girar-texto 14s linear infinite;
}
.hero__play-texto text {
  font-family: var(--f-mono); font-size: 10.5px;
  font-weight: 700; letter-spacing: .14em;
}
@keyframes girar-texto { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hero__play-texto { animation: none; } }

/* ============================================================
   HERO — microanimaciónes
   El contenido lo inyecta renderHero() después del fetch, así que sin
   esto aparece de golpe. La clase .is-listo la pone el JS al terminar
   de rellenar; si el JS falla, todo queda visible sin animación.
   ============================================================ */
@keyframes hero-entra        { from { opacity: 0; filter: blur(6px); transform: translateY(14px); } }
@keyframes hero-entra-titulo { from { filter: blur(6px); transform: translateY(14px); } }

.hero.is-listo .hero__badge,
.hero.is-listo .hero__sub,
.hero.is-listo .hero__cta,
.hero.is-listo .hero__ventajas {
  animation: hero-entra .45s var(--ease-out) both;
}
/* El <h1> es el candidato a LCP: si arranca en opacity 0, la métrica se
   retrasa lo que dure el fade. Por eso solo se desplaza. */
.hero.is-listo .hero__title    { animation: hero-entra-titulo .4s var(--ease-out) .07s both; }
.hero.is-listo .hero__sub      { animation-delay: .14s; }
.hero.is-listo .hero__cta      { animation-delay: .21s; }
.hero.is-listo .hero__ventajas { animation-delay: .28s; }

/* Producto: entrada y flotación permanente. Usan propiedades distintas
   (scale y translate) a propósito: si las dos animaran transform, la
   segunda pisaría a la primera. */
@keyframes prod-entra { from { opacity: 0; scale: .94; } }
@keyframes prod-flota { to   { translate: 0 -8px; } }

.hero.is-listo .hero__producto {
  animation: prod-entra .7s var(--ease-out) .15s both,
             prod-flota 6s ease-in-out 1s infinite alternate;
}

/* Punto vivo del badge. Va como pseudo-elemento para no tocar el HTML, y
   el :not(:empty) evita que se vea el punto solo mientras el badge
   todavía no tiene texto. */
.hero__badge:not(:empty)::before {
  content: ""; flex: none;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--hero-verde-claro);
  animation: punto-late 2.4s ease-in-out infinite;
}
@keyframes punto-late {
  0%, 100% { opacity: 1;   box-shadow: 0 0 0 0 rgba(207, 235, 199, .45); }
  70%      { opacity: .55; box-shadow: 0 0 0 7px rgba(207, 235, 199, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero.is-listo .hero__producto,
  .hero.is-listo .hero__producto-halo,
  .hero__badge:not(:empty)::before { animation: none; }
}

.hero__play-icono {
  width: 42px; height: 42px;
  background: var(--hero-verde-hondo); color: var(--hero-crema);
  border-radius: 50%;
  display: grid; place-items: center;
  transition: transform .25s var(--ease-spring);
}
.hero__play-icono svg { width: 16px; height: 16px; margin-left: 2px; }
.hero__play:hover .hero__play-icono { transform: scale(1.1); }

/* Riel de redes al costado */
/* Riel "Síguenos" (solo escritorio, ver media 1100px). Cápsula de
   vidrio oscuro: el blanco sobre la zona verde clara del fondo casi no
   se leía. Entra escalonado cuando el hero está listo y cada 5 s un
   destello cruza los íconos. */
.hero__social {
  position: absolute; z-index: 4;
  right: 5rem; top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
  padding: 18px 6px;
  border-radius: var(--r-pill);
  background: rgba(11, 42, 32, .36);
  border: 1px solid rgba(207, 235, 199, .16);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
          backdrop-filter: blur(10px) saturate(1.15);
  box-shadow: 0 10px 30px rgba(4, 22, 16, .16);
}
.hero__social-titulo {
  writing-mode: vertical-rl;
  font-family: var(--f-mono); font-size: var(--text-xs);
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(242, 250, 238, .92);
  margin-bottom: var(--sp-2);
}
.hero__social a {
  position: relative; overflow: hidden;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: 1px solid rgba(207, 235, 199, .22);
  border-radius: 50%;
  color: #fff;
  transition: background .25s var(--ease-out), border-color .25s var(--ease-out),
              color .25s var(--ease-out), transform .3s var(--ease-spring);
}
.hero__social a:hover {
  background: var(--hero-verde-claro);
  border-color: var(--hero-verde-claro);
  color: var(--hero-verde-hondo);
  transform: scale(1.1);
}
.hero__social a:focus-visible { outline: 2px solid var(--hero-verde-claro); outline-offset: 3px; }
.hero__social svg { width: 16px; height: 16px; position: relative; z-index: 1; }

/* Destello: una franja de luz cruza cada ícono cada 5 s, el segundo
   un poco después que el primero. */
.hero__social a::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
  transform: translateX(-120%);
  animation: social-destello 5s ease-in-out infinite;
  pointer-events: none;
}
.hero__social a:nth-of-type(2)::after { animation-delay: .25s; }
.hero__social a:nth-of-type(3)::after { animation-delay: .5s; }
@keyframes social-destello {
  0%, 70% { transform: translateX(-120%); }
  85%, 100% { transform: translateX(120%); }
}

/* Entrada escalonada: título e íconos llegan desde la derecha, después
   de que el hero terminó su propia entrada. */
.hero__social > * { opacity: 0; transform: translateX(14px); }
.hero.is-listo .hero__social > * { animation: social-entra .6s var(--ease-out) forwards; }
.hero.is-listo .hero__social > :nth-child(1) { animation-delay: .5s; }
.hero.is-listo .hero__social > :nth-child(2) { animation-delay: .62s; }
.hero.is-listo .hero__social > :nth-child(3) { animation-delay: .74s; }
.hero.is-listo .hero__social > :nth-child(4) { animation-delay: .86s; }
@keyframes social-entra { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .hero__social > * { opacity: 1; transform: none; animation: none !important; }
  .hero__social a::after { animation: none; display: none; }
}

@media (max-width: 1100px) {
  /* El riel de redes se come el ancho útil y compite con el botón de
     video. Bajo esta medida se prescinde de él: las mismas redes están
     en el footer. */
  .hero__social { display: none; }
  .hero__play { width: 96px; height: 96px; }
}

/* Bajo 860px entra el recorte vertical: el producto queda al centro-abajo,
   así que el texto se centra arriba y el velo baja desde el techo. */
@media (max-width: 860px) {
  .hero {
    /* Mismo criterio que en escritorio: el ancho manda, con piso y techo,
       y si el texto pide más alto la caja crece en vez de recortarse. */
    /* Bajado desde 176vw/590-800px: el producto se posiciona en % del
       alto del hero, asi que encoger la caja mantiene la composicion y
       adelanta ~70px el catalogo en un telefono tipico. */
    min-height: calc(clamp(540px, 158vw, 730px) + var(--nav-alto));
    align-items: stretch;
    /* En vertical el producto se centra y crece: hay menos ancho pero más
       alto libre entre el titular y la franja del CTA. */
    /* El producto se ancla por arriba, en la banda que queda libre entre
       la bajada y el CTA. Anclado abajo caía siempre sobre el botón,
       porque el CTA y las ventajas ocupan todo el pie del hero. */
    --prod-ancho: 68%;
    --prod-alto: 31%;
    --prod-derecha: 16%;
    --prod-abajo: auto;
    --prod-arriba: 46%;
    --prod-anclaje: top center;
  }
  /* Velo por arriba y por abajo: el de arriba sostiene el titular y el de
     abajo despeja la franja del CTA y las ventajas, que si no caen sobre
     el ventilador. El medio queda limpio para que se vea el producto. */
  .hero::before {
    background: linear-gradient(180deg,
      rgba(9, 38, 28, .90) 0%,
      rgba(9, 38, 28, .74) 16%,
      rgba(9, 38, 28, .52) 28%,
      rgba(9, 38, 28, .14) 42%,
      rgba(9, 38, 28, .10) 56%,
      rgba(9, 38, 28, .46) 72%,
      rgba(9, 38, 28, .84) 100%);
  }
  .hero__inner { padding-block: clamp(1.75rem, 6vw, 2.75rem); }
  .hero__texto {
    max-width: 32rem;
    margin-inline: auto;
    text-align: center;
  }
  .hero__sub { margin-inline: auto; }
  .hero__title { font-size: clamp(1.75rem, 7.4vw, 2.6rem); }
  /* En vertical las ventajas van al pie del hero, que es donde la foto
     vuelve a tener zona libre. Se empujan con margin-top:auto en lugar de
     position:absolute — al estar anidadas en .hero__texto, un `bottom`
     se calcula contra ese bloque y terminan montadas sobre el CTA. */
  .hero__inner { display: flex; }
  /* align-items:center evita que el badge y el CTA se estiren a todo el
     ancho, que es lo que hace flex-direction:column por defecto. */
  .hero__texto { display: flex; flex-direction: column; align-items: center; width: 100%; }
  .hero__title, .hero__sub, .hero__ventajas { width: 100%; }
  /* Las ventajas se empujan al pie y el CTA queda junto a la bajada: el
     hueco que queda entre los dos es la banda donde vive el producto. */
  /* Una sola regla: antes habia dos declaraciones encadenadas y la
     primera dejaba un margin-bottom de 4rem (el clamp con min > max
     resuelve al min) que abria un hueco muerto al pie del hero. */
  .hero__ventajas {
    justify-content: center;
    margin-top: auto;
    margin-bottom: 0;
    padding-top: clamp(1.25rem, 4vw, 2rem);
  }
  .hero__ventaja-icono { width: 38px; height: 38px; }
  .hero__ventaja-icono svg { width: 16px; height: 16px; }
  /* El botón circular de video no cabe: arriba se cruza con el titular,
     abajo con la fila de ventajas y con el botón flotante de WhatsApp.
     En vertical se oculta, igual que en la referencia. El video del
     producto sigue disponible desde su ficha. */
  .hero__play { display: none; }
}

/* El producto vive en la banda libre entre el CTA y las ventajas. Esa
   banda se estrecha al bajar el ancho: el titular y la bajada ocupan más
   líneas mientras el hero se acorta. Medida real de la banda, como % del
   alto del hero: 860px→34% · 430px→38% · 390px→34% · 360px→29% · 320px→20%.
   Por eso se reajusta por tramos y no con un valor único. */
@media (max-width: 440px) {
  .hero { --prod-arriba: 49%; --prod-alto: 31%; }
}
@media (max-width: 400px) {
  .hero__ventajas li { padding-inline: .6rem; letter-spacing: .09em; }
  .hero__ventaja-icono { width: 34px; height: 34px; }
}
@media (max-width: 375px) {
  .hero { --prod-arriba: 52%; --prod-alto: 27%; }
}
@media (max-width: 340px) {
  .hero { --prod-arriba: 60%; --prod-alto: 18%; }
}

@media (max-width: 520px) {
  .hero-card { flex-wrap: wrap; }
  .hero-card__btn { width: 100%; }
}

/* ============================================================
   MODAL DE VIDEO
   ============================================================ */
.vmodal {
  position: fixed; inset: 0; z-index: 990;
  display: grid; place-items: center;
  padding: var(--gutter);
}
.vmodal[hidden] { display: none; }

.vmodal__fondo {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, .82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity .3s var(--ease-out);
}
.vmodal.abierto .vmodal__fondo { opacity: 1; }

.vmodal__caja {
  position: relative;
  /* El ancho lo fija el propio video: los clips de producto son verticales
     y con una caja fija de 16/9 quedaban con franjas negras a los lados. */
  width: auto;
  max-width: min(920px, 100%);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: #000;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: scale(.94) translateY(12px);
  transition: opacity .3s var(--ease-out), transform .35s var(--ease-spring);
}
.vmodal.abierto .vmodal__caja { opacity: 1; transform: none; }

.vmodal__video { background: #000; line-height: 0; }
.vmodal__video video {
  display: block;
  width: auto; height: auto;
  max-width: min(920px, 88vw);
  max-height: 82vh;
}

.vmodal__cerrar {
  position: absolute; top: var(--sp-3); right: var(--sp-3); z-index: 2;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(15,23,42,.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #fff;
  display: grid; place-items: center;
  transition: background .25s, transform .25s var(--ease-spring);
}
.vmodal__cerrar:hover { background: var(--c-accent); transform: scale(1.08); }
.vmodal__cerrar svg { width: 18px; height: 18px; }

/* ============================================================
   BARRA DE CONFIANZA — tres tarjetas
   ============================================================ */

.trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}

.trust__item {
  display: flex; align-items: flex-start; gap: var(--sp-4);
  padding: var(--sp-6);
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  transition: border-color .3s, box-shadow .3s, transform .3s var(--ease-out);
}
.trust__item:hover {
  border-color: var(--c-accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.trust__icon {
  width: 46px; height: 46px; flex-shrink: 0;
  background: var(--c-accent-muted); color: var(--c-accent);
  border-radius: var(--r-md);
  display: grid; place-items: center;
  transition: background .3s, color .3s;
}
.trust__item:hover .trust__icon { background: var(--c-accent); color: #fff; }
.trust__icon svg { width: 23px; height: 23px; }

.trust__txt { min-width: 0; }
.trust__title {
  font-family: var(--f-display);
  font-weight: 700; font-size: var(--text-base);
  letter-spacing: -.01em;
  margin-bottom: 4px;
}
.trust__text { color: var(--c-ink-mid); font-size: var(--text-sm); line-height: 1.5; }

@media (max-width: 860px) {
  .trust { grid-template-columns: 1fr; gap: var(--sp-3); }
  .trust__item { padding: var(--sp-4); align-items: center; }
  .trust__item:hover { transform: none; }
  .trust__icon { width: 40px; height: 40px; }
  .trust__icon svg { width: 20px; height: 20px; }
  .trust__text { font-size: var(--text-xs); }
}

/* ============================================================
   CARD DE PRODUCTO
   ============================================================ */
.grid-productos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}

.card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--c-border-light); }

.card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--c-base-800);
  border-bottom: 1px solid var(--c-border);
  overflow: hidden;
}
.card__img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .4s var(--ease-out);
}
.card:hover .card__img { transform: scale(1.05); }

.card__badges {
  position: absolute; top: var(--sp-3); left: var(--sp-3);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2);
  z-index: 2;
}
.badge {
  font-family: var(--f-mono); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  padding: 4px 8px; border-radius: var(--r-sm);
}
.badge--descuento { background: var(--c-accent); color: #fff; }
.badge--nuevo     { background: var(--c-ink);    color: #fff; }
.badge--viral     { background: #fff; color: var(--c-ink); border: 1px solid var(--c-border-light); }

/* Las fotos de producto traen texto quemado en la franja superior, así
   que el badge viral se ancla al pie de la foto (el indicador de video
   ocupa la esquina contraria) y deja de competir con ese texto. */
.card__badge-pie {
  position: absolute; left: var(--sp-3); bottom: var(--sp-3);
  z-index: 2;
  box-shadow: var(--shadow-sm);
}

.card__body { padding: var(--sp-4); display: flex; flex-direction: column; flex: 1; gap: var(--sp-2); }
.card__nombre {
  font-family: var(--f-display); font-size: var(--text-base);
  font-weight: 700; line-height: 1.3; letter-spacing: -.01em;
}
.card__sub { color: var(--c-ink-mid); font-size: var(--text-xs); line-height: 1.45; }

.card__precios { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2); margin-top: auto; }
/* ink-mid y no ink-dim: el tachado fino a 12-14px no llegaba a 4.5:1. */
.card__precio-antes { color: var(--c-ink-mid); font-size: var(--text-sm); text-decoration: line-through; }
.card__precio-ahora { font-family: var(--f-display); font-size: var(--text-lg); font-weight: 800; }
.card__ahorro { font-family: var(--f-mono); font-size: 11px; color: var(--c-accent); font-weight: 700; }

.card__stock {
  font-family: var(--f-mono); font-size: 11px; font-weight: 600;
  display: flex; align-items: center; gap: 6px;
}
.card__stock--bajo   { color: var(--c-warning); }
.card__stock--ok     { color: var(--c-success); }
.card__stock--cero   { color: var(--c-ink-dim); }
.card__stock::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.card__cta { width: 100%; margin-top: var(--sp-2); }

/* Enlace a la ficha, bajo el botón. Va como texto y no como segundo
   botón: dos botónes del mismo peso compiten entre sí, y el que vende es
   el de agregar al carrito. */
.card__link {
  align-self: center;
  margin-top: var(--sp-1);
  font-family: var(--f-mono);
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: .06em;
  color: var(--c-ink-mid);
  border-bottom: 1px solid var(--c-border-light);
  padding-bottom: 1px;
  transition: color .2s, border-color .2s;
}
.card__link:hover { color: var(--c-accent); border-color: var(--c-accent); }

/* ============================================================
   DRAWER DE CARRITO
   ============================================================ */
.drawer-overlay {
  position: fixed; inset: 0; z-index: 950;
  background: rgba(15, 23, 42, .45);
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease-out);
}
.drawer-overlay.open { opacity: 1; pointer-events: all; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 960;
  width: min(420px, 100%);
  background: #fff;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .35s var(--ease-out);
  box-shadow: var(--shadow-lg);
}
.drawer.open { transform: translateX(0); }

.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-6);
  border-bottom: 1px solid var(--c-border);
}
.drawer__title { font-family: var(--f-display); font-size: var(--text-lg); font-weight: 800; }
.drawer__close {
  width: 36px; height: 36px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-ink-mid); transition: background .25s, color .25s;
}
.drawer__close:hover { background: var(--c-base-800); color: var(--c-ink); }

.drawer__body { flex: 1; overflow-y: auto; padding: var(--sp-4) var(--sp-6); }
.drawer__vacio { text-align: center; padding-block: var(--sp-12); color: var(--c-ink-mid); }
.drawer__vacio p { margin-bottom: var(--sp-4); }

.cart-item { display: flex; gap: var(--sp-3); padding-block: var(--sp-4); border-bottom: 1px solid var(--c-border); }
.cart-item__img {
  width: 68px; height: 68px; flex-shrink: 0;
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  object-fit: contain; padding: 4px; background: #fff;
}
.cart-item__info { flex: 1; min-width: 0; }
.cart-item__nombre { font-weight: 700; font-size: var(--text-sm); }
.cart-item__precio { color: var(--c-ink-mid); font-size: var(--text-xs); margin-top: 2px; }
.cart-item__acciones { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); }

.qty { display: flex; align-items: center; border: 1px solid var(--c-border-light); border-radius: var(--r-sm); overflow: hidden; }
.qty button {
  width: 28px; height: 28px; font-size: var(--text-sm); font-weight: 700;
  color: var(--c-ink-mid); transition: background .2s;
}
.qty button:hover { background: var(--c-base-800); color: var(--c-ink); }
.qty__valor { min-width: 30px; text-align: center; font-family: var(--f-mono); font-size: var(--text-sm); font-weight: 600; }

.cart-item__eliminar {
  font-size: var(--text-xs); color: var(--c-ink-dim);
  text-decoration: underline; transition: color .2s;
}
.cart-item__eliminar:hover { color: var(--c-error); }

.drawer__foot { border-top: 1px solid var(--c-border); padding: var(--sp-4) var(--sp-6) var(--sp-6); }
.drawer__linea { display: flex; justify-content: space-between; font-size: var(--text-sm); margin-bottom: var(--sp-2); color: var(--c-ink-mid); }
.drawer__total {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--f-display); font-weight: 800; font-size: var(--text-lg);
  padding-top: var(--sp-3); margin-bottom: var(--sp-4);
  border-top: 1px solid var(--c-border);
}
.drawer__nota { font-size: var(--text-xs); color: var(--c-ink-dim); text-align: center; margin-top: var(--sp-3); }

/* ============================================================
   TOAST
   ============================================================ */
.toast {
  position: fixed; bottom: var(--sp-6); left: 50%;
  transform: translate(-50%, 120%);
  z-index: 980;
  background: var(--c-ink); color: #fff;
  padding: var(--sp-3) var(--sp-6); border-radius: var(--r-md);
  font-size: var(--text-sm); font-weight: 600;
  box-shadow: var(--shadow-lg);
  visibility: hidden;
  transition: transform .35s var(--ease-spring), visibility .35s;
}
.toast.show { transform: translate(-50%, 0); visibility: visible; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--c-base-900); border-top: 1px solid var(--c-border); padding-block: var(--sp-12) var(--sp-8); }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer__grid { grid-template-columns: 1fr; } }

.footer__logotype { font-family: var(--f-display); font-size: var(--text-xl); font-weight: 800; }
.footer__logotype span { color: var(--c-accent); }
.footer__desc { color: var(--c-ink-mid); font-size: var(--text-sm); margin-top: var(--sp-3); max-width: 26rem; }
.footer__col-title { font-weight: 700; font-size: var(--text-sm); margin-bottom: var(--sp-3); }
.footer__col li { margin-bottom: var(--sp-2); }
.footer__col a { color: var(--c-ink-mid); font-size: var(--text-sm); transition: color .2s; }
.footer__col a:hover { color: var(--c-accent); }

.footer__bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-4);
  border-top: 1px solid var(--c-border);
  padding-top: var(--sp-6); margin-top: var(--sp-10);
  font-family: var(--f-mono); font-size: var(--text-xs); color: var(--c-ink-dim);
}

/* Acordeón con la razón social / RUT: la ley exige que el dato esté
   disponible, no que ocupe espacio permanente en el footer. Nativo
   <details>, sin JS: teclado y lectores de pantalla lo manejan solos. */
.footer__legal {
  border-top: 1px solid var(--c-border);
  margin-top: var(--sp-8); padding-top: var(--sp-6);
}
.footer__legal summary {
  cursor: pointer; list-style: none;
  font-family: var(--f-mono); font-size: var(--text-xs); color: var(--c-ink-dim);
  display: inline-flex; align-items: center; gap: var(--sp-2);
}
.footer__legal summary::-webkit-details-marker { display: none; }
.footer__legal summary::after { content: '▾'; font-size: 10px; transition: transform .2s; }
.footer__legal[open] summary::after { transform: rotate(180deg); }
.footer__legal summary:hover { color: var(--c-ink); }
.footer__legal-datos {
  display: grid; grid-template-columns: max-content 1fr;
  gap: var(--sp-1) var(--sp-4);
  margin-top: var(--sp-4);
  font-size: var(--text-xs);
}
.footer__legal-datos dt { opacity: .7; }
.footer__legal-datos dd { font-weight: 600; }
@media (max-width: 540px) { .footer__legal-datos { grid-template-columns: 1fr; } .footer__legal-datos dt { margin-top: var(--sp-2); } }

.social { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
.social a {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--c-border-light);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-ink-mid);
  transition: border-color .25s, color .25s, background .25s;
}
.social a:hover { border-color: var(--c-accent); color: var(--c-accent); background: var(--c-accent-muted); }
.social svg { width: 17px; height: 17px; }

/* ============================================================
   WHATSAPP FLOTANTE
   ============================================================ */
.whatsapp-float {
  position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 700;
  width: 52px; height: 52px;
  background: #25D366; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: 0 4px 20px rgba(37, 211, 102, .4);
  transition: transform .3s var(--ease-spring), box-shadow .3s;
}
.whatsapp-float:hover { transform: scale(1.1); box-shadow: 0 8px 30px rgba(37, 211, 102, .55); }
.whatsapp-float img { width: 28px; height: 28px; }

/* ============================================================
   DESTACADOS — grid en desktop, slider con snap en móvil
   ============================================================ */
.destacados {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
}

.dest-card {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--c-base-800);
  isolation: isolate;
}
.dest-card__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease-out);
}
.dest-card:hover .dest-card__img { transform: scale(1.06); }

/* El degradado va en un pseudo-elemento para que quede sobre la foto
   y bajo el texto sin necesidad de otro div. */
.dest-card::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top,
    rgba(15,23,42,.92) 0%,
    rgba(15,23,42,.55) 42%,
    rgba(15,23,42,.10) 72%,
    rgba(15,23,42,.25) 100%);
}

.dest-card__spec {
  position: absolute; top: 0; left: 0; z-index: 2;
  background: var(--c-ink); color: #fff;
  padding: var(--sp-3) var(--sp-4);
  border-bottom-right-radius: var(--r-md);
  display: flex; align-items: center; gap: var(--sp-3);
  max-width: 78%;
}
.dest-card__spec-txt p:first-child {
  font-weight: 700; font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: .05em; line-height: 1.25;
}
.dest-card__spec-txt p:last-child {
  font-family: var(--f-mono); font-size: 10px;
  color: rgba(255,255,255,.7); line-height: 1.3;
}
.dest-card__spec svg { width: 20px; height: 20px; flex-shrink: 0; }

.dest-card__body {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: var(--sp-6);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2);
}
.dest-card__eyebrow {
  background: var(--c-accent); color: #fff;
  font-family: var(--f-mono); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  padding: 5px 12px; border-radius: var(--r-pill);
}
.dest-card__titulo {
  font-family: var(--f-display); color: #fff;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 800; line-height: 1.15; letter-spacing: -.02em;
}
.dest-card__bajada { color: rgba(255,255,255,.82); font-size: var(--text-sm); }
.dest-card__cta {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-3);
  background: var(--c-accent); color: #fff;
  font-weight: 700; font-size: var(--text-sm);
  padding: var(--sp-3) var(--sp-6); border-radius: var(--r-md);
  transition: background .25s, transform .2s var(--ease-spring);
}
.dest-card:hover .dest-card__cta { background: var(--c-accent-dark); transform: translateX(3px); }
.dest-card__cta svg { width: 16px; height: 16px; }

@media (max-width: 860px) {
  .destacados {
    display: flex;
    gap: var(--sp-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* sangría negativa + padding: la primera card parte alineada al
       contenedor y la última alcanza a scrollear hasta el borde */
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: var(--sp-2);
  }
  .destacados::-webkit-scrollbar { display: none; }
  .dest-card {
    flex: 0 0 82%;
    scroll-snap-align: start;
    /* Más alta que en la versión 4/5: con el bloque de texto abajo, una
       card más cuadrada dejaba al producto casi sin aire arriba. */
    aspect-ratio: 5 / 7;
  }
}

.slider-hint {
  display: none;
  font-family: var(--f-mono); font-size: var(--text-xs);
  color: var(--c-ink-dim); margin-top: var(--sp-3);
  align-items: center; gap: var(--sp-2);
}
.slider-hint svg { width: 14px; height: 14px; }
@media (max-width: 860px) { .slider-hint { display: flex; } }

/* ============================================================
   PRODUCTO DEL MES — compra directa
   ============================================================ */
.pdm__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.pdm__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #f1f3f500;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.pdm__img { width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 12px;}
.pdm__desc-badge {
  position: absolute; top: var(--sp-4); left: var(--sp-4);
  background: var(--c-accent); color: #fff;
  font-family: var(--f-mono); font-size: var(--text-sm); font-weight: 700;
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-md);
}
.pdm__eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--f-mono); font-size: var(--text-xs); font-weight: 700;
  color: var(--c-accent); text-transform: uppercase; letter-spacing: .12em;
}
.pdm__titular {
  font-family: var(--f-display);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 800; line-height: 1.1; letter-spacing: -.03em;
  margin-block: var(--sp-3) var(--sp-3);
}
.pdm__bajada { color: var(--c-ink-mid); font-size: var(--text-base); }
.pdm__puntos { margin-block: var(--sp-6); display: grid; gap: var(--sp-3); }
.pdm__puntos li { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--text-sm); }
.pdm__check {
  width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px;
  background: var(--c-accent-muted); color: var(--c-accent);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.pdm__check svg { width: 12px; height: 12px; }

.pdm__precios {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.pdm__precio-antes { color: var(--c-ink-dim); font-size: var(--text-lg); text-decoration: line-through; }
.pdm__precio-ahora { font-family: var(--f-display); font-size: var(--text-2xl); font-weight: 800; }
.pdm__ahorro { font-family: var(--f-mono); font-size: var(--text-sm); font-weight: 700; color: var(--c-accent); }
.pdm__stock { font-family: var(--f-mono); font-size: var(--text-xs); margin-bottom: var(--sp-4); }
.pdm__acciones { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.pdm__acciones .btn-primary { flex: 1 1 220px; padding-block: var(--sp-4); }
.pdm__nota {
  font-size: var(--text-xs); color: var(--c-ink-dim);
  margin-top: var(--sp-4); display: flex; align-items: center; gap: var(--sp-2);
}
.pdm__nota svg { width: 14px; height: 14px; flex-shrink: 0; }

@media (max-width: 820px) {
  .pdm__inner { grid-template-columns: 1fr; gap: var(--sp-8); }
  .pdm__media { max-width: 26rem; margin-inline: auto; }
}

/* En móvil, menos alto que el 1:1 de desktop: a ancho de pantalla
   completo, un cuadrado se ve desproporcionadamente alto y empuja
   el precio y el CTA muy abajo. */
@media (max-width: 640px) {
  .pdm__media { max-width: none; aspect-ratio: 16 / 10; }
}

/* En móvil el botón flotante se achica para no tapar los CTA de compra */
@media (max-width: 640px) {
  .whatsapp-float { width: 46px; height: 46px; bottom: 1rem; right: 1rem; }
  .whatsapp-float img { width: 25px; height: 25px; }
}

/* ============================================================
   VIDEO EN HOVER — catálogo y destacados
   El video se monta recién en el primer hover (ver app.js), se
   superpone a la foto y aparece con fundido cuando ya puede
   reproducir. Si falla o no existe, la foto queda intacta.
   ============================================================ */
.media-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity .35s var(--ease-out);
  pointer-events: none;
  z-index: 1;
}
.is-playing .media-video { opacity: 1; }

/* La foto de la card no debe escalar mientras corre el video */
.card__media.is-playing .card__img,
.dest-card.is-playing .dest-card__img { transform: none; }

/* En destacados el degradado y el texto van sobre el video */
.dest-card::after { z-index: 2; }
.dest-card__spec, .dest-card__body { z-index: 3; }

/* Indicador sutil de que la card tiene video */
.media-play {
  position: absolute; bottom: var(--sp-3); right: var(--sp-3);
  z-index: 2;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 50%;
  color: #fff;
  opacity: 1;
  transition: opacity .3s var(--ease-out);
}
.media-play svg { width: 11px; height: 11px; }
.is-playing .media-play { opacity: 0; }
.dest-card .media-play { z-index: 4; bottom: auto; top: var(--sp-4); right: var(--sp-4); }

/* En táctil el video sí se reproduce (al entrar en pantalla, ver app.js),
   así que el indicador se mantiene. Con motion reducido no hay video y el
   indicador tampoco tiene sentido. */
@media (prefers-reduced-motion: reduce) {
  .media-play { display: none; }
}

/* Card de slot libre — se lee como espacio reservado, no como producto roto */
.badge--proximamente {
  background: #fff; color: var(--c-ink-mid);
  border: 1px solid var(--c-border-light);
}
.card--proximamente { border-style: dashed; border-color: var(--c-border-light); }
.card--proximamente:hover { transform: none; box-shadow: none; }
.card--proximamente .card__media { background: var(--c-base-900); }
.card--proximamente .card__img { opacity: .5; }
.card--proximamente .card__nombre { color: var(--c-ink-mid); }

/* ============================================================
   FAQ — acordeón accesible
   La animación de altura usa grid-template-rows 0fr → 1fr, que es
   la forma actual de animar hacia altura automática sin fijar un
   max-height inventado que corte respuestas largas.
   ============================================================ */
.faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 900px) {
  .faq__grid { grid-template-columns: 1fr; gap: var(--sp-8); }
}

.faq__intro { position: sticky; top: 100px; }
@media (max-width: 900px) { .faq__intro { position: static; } }
.faq__ayuda {
  margin-top: var(--sp-6);
  padding: var(--sp-4);
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
}
.faq__ayuda p { font-size: var(--text-sm); color: var(--c-ink-mid); margin-bottom: var(--sp-3); }

.faq__lista {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.faq__item + .faq__item { border-top: 1px solid var(--c-border); }

.faq__pregunta {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  text-align: left;
  font-family: var(--f-display);
  font-size: var(--text-base); font-weight: 700; color: var(--c-ink);
  line-height: 1.35;
  transition: background .2s, color .2s;
}
.faq__pregunta:hover { background: var(--c-accent-muted); color: var(--c-accent-dark); }
.faq__item.abierto .faq__pregunta { color: var(--c-accent); }

.faq__icono {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--c-accent-muted); color: var(--c-accent);
  display: flex; align-items: center; justify-content: center;
  transition: transform .35s var(--ease-out), background .25s;
}
.faq__icono svg { width: 14px; height: 14px; }
.faq__item.abierto .faq__icono { transform: rotate(45deg); background: var(--c-accent); color: #fff; }

.faq__respuesta {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s var(--ease-out);
}
.faq__item.abierto .faq__respuesta { grid-template-rows: 1fr; }
.faq__respuesta > div { overflow: hidden; }
.faq__respuesta p {
  padding: 0 var(--sp-6) var(--sp-5);
  color: var(--c-ink-mid);
  font-size: var(--text-sm);
  max-width: 62ch;
}

/* ============================================================
   CATÁLOGO COMPACTO EN MÓVIL
   Dos columnas en vez de una: a una sola columna la card ocupaba
   casi la pantalla completa por producto (imagen 1:1 a ancho total)
   y había que scrollear muchísimo para ver los 8.
   ============================================================ */
@media (max-width: 640px) {
  .grid-productos {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-3);
  }

  .card { border-radius: var(--r-md); }
  .card:hover { transform: none; box-shadow: none; }

  .card__media { aspect-ratio: 1 / 1; }

  .card__body { padding: var(--sp-3); gap: 5px; }
  .card__nombre { font-size: var(--text-sm); line-height: 1.25; }

  /* El subtítulo se corta a dos líneas: es apoyo, no debe empujar
     el precio y el botón fuera de vista en pantallas chicas. */
  .card__sub {
    font-size: 11px; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .card__precios { gap: var(--sp-2); row-gap: 2px; }
  .card__precio-antes { font-size: var(--text-xs); }
  .card__precio-ahora { font-size: var(--text-base); }
  .card__ahorro { font-size: 10px; }
  .card__stock { font-size: 10px; }

  .card__cta { padding: var(--sp-3) var(--sp-2); font-size: var(--text-xs); margin-top: var(--sp-1); }

  .card__badges { top: 6px; left: 6px; gap: 4px; }
  .card__badge-pie { left: 6px; bottom: 6px; }
  .badge { font-size: 9px; padding: 3px 6px; }

  /* En pantalla chica sobra: el descuento ya se ve en el badge */
  .card__ahorro { display: none; }
}

@media (max-width: 380px) {
  .grid-productos { gap: var(--sp-2); }
  .card__body { padding: var(--sp-2); }
}

/* ============================================================
   CHECKOUT — layout de dos columnas simples, sin cajas por
   sección (referencia: formularios de checkout tipo "Delivery
   Details" / "Order Summary" con resumen editable al costado).
   ============================================================ */
.checkout-page { background: var(--c-base-900); }

.checkout { padding-block: clamp(2rem, 5vw, 3rem) 6rem; }
.checkout__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.checkout__titulo {
  font-family: var(--f-display); font-size: var(--text-xl); font-weight: 800;
  letter-spacing: -.01em;
  margin-bottom: var(--sp-5);
}
.checkout__titulo--pago { margin-top: var(--sp-8); }

.campo-grupo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-bottom: var(--sp-2); }
.campo--full { grid-column: 1 / -1; }

/* Nota de entrega: desplegable para no ocupar una fila del formulario
   cuando casi nadie la necesita. .campo va en el cuerpo (no en el
   <details>) para heredar el estilo de input por el selector descendiente
   de .campo — no hace falta duplicarlo acá. */
.campo-nota { grid-column: 1 / -1; }
.campo-nota > summary {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--text-sm); font-weight: 600; color: var(--c-accent);
}
.campo-nota > summary::-webkit-details-marker { display: none; }
.campo-nota > summary::before { content: '+'; font-family: var(--f-mono); }
.campo-nota[open] > summary::before { content: '\2212'; }
.campo-nota > summary span { font-weight: 400; color: var(--c-ink-mid); }
.campo-nota__cuerpo { margin-top: var(--sp-3); }
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo label { font-size: var(--text-sm); font-weight: 600; color: var(--c-ink); }
.campo input, .campo select, .campo textarea {
  /* Sin esto, un input de texto no se achica más allá de un ancho mínimo
     propio del navegador (~170-200px), sin importar cuán angosta sea su
     columna en el grid — y termina desbordándose sobre la columna del
     resumen en anchos intermedios (tablet), aunque en el celular normal y
     en desktop no se note porque ahí sí hay espacio de sobra. */
  min-width: 0;
  width: 100%;
  font-family: var(--f-sans); font-size: var(--text-base); color: var(--c-ink);
  padding: var(--sp-3) var(--sp-4);
  border: 1.5px solid var(--c-border-light); border-radius: var(--r-md);
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
}
.campo textarea { resize: vertical; min-height: 110px; font-family: inherit; line-height: 1.5; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--c-ink-dim); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-muted);
}

/* ---------- Reseñas: selector de estrellas + estado de envío ---------- */
.resena__intro { margin-bottom: var(--sp-6); }
.resena__intro .section-title { font-size: var(--text-2xl); margin-bottom: var(--sp-2); }
.resena__intro .section-sub { color: var(--c-ink-mid); }
.resena__producto {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  background: var(--c-base-800); margin-bottom: var(--sp-6);
}
.resena__producto img { width: 52px; height: 52px; object-fit: cover; border-radius: var(--r-sm); flex-shrink: 0; }
.resena__producto p { font-weight: 600; font-size: var(--text-sm); }

.resena-form__estrellas { display: flex; gap: 4px; }
.resena-form__estrella-btn {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  color: var(--c-border-light); transition: color .15s, transform .1s;
}
.resena-form__estrella-btn svg { width: 32px; height: 32px; }
.resena-form__estrella-btn:hover, .resena-form__estrella-btn:focus-visible { transform: scale(1.08); }
.resena-form__estrella-btn.is-activa, .resena-form__estrella-btn.is-hover { color: #F5A623; }
.resena-form__nota-texto { font-size: var(--text-sm); color: var(--c-ink-mid); margin-top: 6px; min-height: 1.4em; }

.resena__enviado { text-align: center; padding-block: var(--sp-8); }
.resena__enviado svg { width: 56px; height: 56px; color: var(--c-accent); margin-inline: auto var(--sp-4); }

.resena__error-campo { color: #C0392B; font-size: var(--text-sm); margin-top: 4px; display: none; }
.resena__error-campo.visible { display: block; }
@media (max-width: 560px) { .campo-grupo { grid-template-columns: 1fr; } }

/* Método de pago: radio + logos de tarjeta, sin caja envolvente pesada */
.pago-opciones { display: grid; gap: var(--sp-3); }
.pago-opcion {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4); border: 1.5px solid var(--c-border-light); border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.pago-opcion:has(input:checked) { border-color: var(--c-accent); background: var(--c-accent-muted); }
/* Forma de entrega única (sin radio): se ve igual que una opción ya
   elegida, sin el cursor de "puedes hacer clic" porque no hay nada que
   elegir. */
.pago-opcion--fija { cursor: default; border-color: var(--c-accent); background: var(--c-accent-muted); }
.pago-opcion input[type="radio"] { width: 18px; height: 18px; accent-color: var(--c-accent); flex-shrink: 0; }
.pago-opcion__marcas { display: flex; gap: 6px; flex-shrink: 0; }
.pago-opcion__marcas svg { border-radius: 4px; }
.pago-opcion--wa .pago-opcion__marcas svg { border-radius: 0; }
.pago-opcion__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pago-opcion__marca { font-weight: 700; font-size: var(--text-sm); }
.pago-opcion__desc { font-size: var(--text-xs); color: var(--c-ink-mid); }

.checkout__checkbox {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  font-size: var(--text-sm); color: var(--c-ink-mid);
  margin-top: var(--sp-6);
}
.checkout__checkbox input { margin-top: 3px; accent-color: var(--c-accent); width: 16px; height: 16px; flex-shrink: 0; }

.checkout__legal { font-size: var(--text-xs); color: var(--c-ink-dim); line-height: 1.6; margin-top: var(--sp-4); }
.checkout__legal a { color: var(--c-accent); text-decoration: underline; }

/* Resumen: caja blanca contenedora, sticky en desktop */
.checkout__col-der { position: sticky; top: 100px; }

.resumen-caja { background: #fff; border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-5); }

.resumen-items { display: grid; gap: var(--sp-4); max-height: 360px; overflow-y: auto; }
.resumen-item { display: flex; gap: var(--sp-3); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--c-border); }
.resumen-item:last-child { border-bottom: none; padding-bottom: 0; }
.resumen-item img {
  width: 64px; height: 64px; object-fit: cover;
  border-radius: var(--r-md); border: 1px solid var(--c-border); flex-shrink: 0;
}
.resumen-item__info { flex: 1; min-width: 0; }
.resumen-item__nombre { font-size: var(--text-sm); font-weight: 700; }
.resumen-item__precio-unit { font-size: var(--text-xs); color: var(--c-ink-mid); margin: 2px 0 var(--sp-2); }

.resumen-item__qty { display: inline-flex; align-items: center; border: 1px solid var(--c-border-light); border-radius: var(--r-sm); overflow: hidden; }
.resumen-item__qty button {
  width: 26px; height: 26px; font-size: var(--text-sm); font-weight: 700; color: var(--c-ink-mid);
  transition: background .2s;
}
.resumen-item__qty button:hover { background: var(--c-base-800); color: var(--c-ink); }
.resumen-item__qty span { min-width: 26px; text-align: center; font-family: var(--f-mono); font-size: var(--text-sm); font-weight: 600; }

.resumen-item__der { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; flex-shrink: 0; }
.resumen-item__borrar { color: var(--c-ink-dim); transition: color .2s; }
.resumen-item__borrar:hover { color: var(--c-error); }
.resumen-item__borrar svg { width: 17px; height: 17px; }
.resumen-item__precio { font-size: var(--text-sm); font-weight: 700; white-space: nowrap; }

.resumen-vacio { color: var(--c-ink-mid); font-size: var(--text-sm); }

.resumen-totales { border-top: 1px solid var(--c-border); margin-top: var(--sp-4); padding-top: var(--sp-4); }
.resumen-linea { display: flex; justify-content: space-between; font-size: var(--text-sm); color: var(--c-ink-mid); margin-bottom: var(--sp-2); }
.resumen-nota { font-size: var(--text-xs); color: var(--c-accent); text-align: right; margin-bottom: var(--sp-2); }
.resumen-total {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--f-display); font-weight: 800; font-size: var(--text-xl);
  padding-top: var(--sp-3); margin-top: var(--sp-2); border-top: 1px solid var(--c-border);
}

.checkout__pagar { width: 100%; margin-top: var(--sp-5); padding-block: var(--sp-4); }
.checkout__pagar[disabled] { opacity: .5; cursor: not-allowed; }
.checkout__seguro {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-size: var(--text-xs); color: var(--c-ink-dim); margin-top: var(--sp-3);
}
.checkout__seguro svg { width: 14px; height: 14px; }

.checkout__barra-movil { display: none; }

@media (max-width: 900px) {
  .checkout__grid { grid-template-columns: 1fr; }
  .checkout__col-der { position: static; order: -1; }
  .checkout__pagar, .checkout__seguro { display: none; }

  .checkout { padding-bottom: 6.5rem; }
  .checkout__barra-movil {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 500;
    background: #fff; border-top: 1px solid var(--c-border);
    padding: var(--sp-3) var(--sp-4);
    box-shadow: 0 -4px 20px rgba(15,23,42,.08);
  }
  .checkout__barra-movil-total { display: flex; flex-direction: column; line-height: 1.2; }
  .checkout__barra-movil-total span { font-size: var(--text-xs); color: var(--c-ink-mid); }
  .checkout__barra-movil-total strong { font-family: var(--f-display); font-size: var(--text-lg); }
  .checkout__barra-movil .btn-primary { padding-inline: var(--sp-8); }
}

/* ============================================================
   FICHA DE PRODUCTO — producto.html
   ============================================================ */

/* --- miga de pan --- */
.miga { padding-top: calc(var(--sp-16) + var(--sp-8)); padding-bottom: var(--sp-2); }
.miga ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.miga li { display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--text-sm); color: var(--c-ink-dim); }
.miga li + li::before { content: "/"; color: var(--c-ink-dim); }
.miga a { color: var(--c-ink-mid); transition: color .2s var(--ease-out); }
.miga a:hover { color: var(--c-accent); }
.miga span { color: var(--c-ink); font-weight: 500; }

/* --- layout --- */
.ficha { padding-block: var(--sp-6) var(--sp-12); }
.ficha__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.ficha__cargando { color: var(--c-ink-mid); grid-column: 1 / -1; }
/* Mientras la ficha carga, ocupa una pantalla completa: así el footer
   arranca fuera de la vista y no "salta" hacia abajo cuando llega el
   producto (era un CLS de 0,72 en la ficha). */
.ficha__inner:has(> [data-cargando]) { min-height: 100svh; }
.ficha__vacio { grid-column: 1 / -1; max-width: 46ch; padding-block: var(--sp-12); }
.ficha__vacio code { font-family: var(--f-mono); font-size: .9em;
  background: var(--c-base-800); padding: 2px 6px; border-radius: var(--r-sm); }

/* --- galería --- */
.ficha__galeria { position: sticky; top: 96px; }
.ficha__principal {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--c-base-800);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.ficha__img { width: 100%; height: 100%; object-fit: cover; object-position: center 95%; }
.ficha__badges {
  position: absolute; top: var(--sp-4); left: var(--sp-4); z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2);
}

.ficha__video-btn {
  position: absolute; bottom: var(--sp-4); left: var(--sp-4); z-index: 2;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--c-border-light);
  border-radius: var(--r-pill);
  font-size: var(--text-sm); font-weight: 600; color: var(--c-ink);
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.ficha__video-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.ficha__video-icono {
  display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--c-accent); color: #fff;
}
.ficha__video-icono svg { width: 10px; height: 10px; }

.ficha__miniaturas {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3); margin-top: var(--sp-3);
}
.ficha__mini {
  aspect-ratio: 1 / 1; overflow: hidden; padding: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-base-800);
  transition: border-color .2s var(--ease-out), transform .2s var(--ease-out);
}
.ficha__mini img { width: 100%; height: 100%; object-fit: cover; }
.ficha__mini:hover { transform: translateY(-2px); }
.ficha__mini.is-activa { border-color: var(--c-accent); box-shadow: 0 0 0 1px var(--c-accent); }

/* --- info --- */
.ficha__categoria {
  font-family: var(--f-mono); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--c-accent); margin-bottom: var(--sp-3);
}
.ficha__nombre {
  font-family: var(--f-display); font-weight: 800;
  font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1.1;
  letter-spacing: -.02em;
}
.ficha__sub { color: var(--c-ink-mid); margin-top: var(--sp-3); font-size: var(--text-lg); }

.ficha__precios {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-3);
  margin-top: var(--sp-6);
}
.ficha__precio-antes { color: var(--c-ink-dim); text-decoration: line-through; font-size: var(--text-lg); }
.ficha__precio-ahora { font-family: var(--f-display); font-weight: 800; font-size: var(--text-3xl); }
.ficha__ahorro {
  font-family: var(--f-mono); font-size: var(--text-sm); font-weight: 700;
  color: var(--c-accent); background: var(--c-accent-muted);
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill);
}
.ficha__stock { margin-top: var(--sp-3); }

/* ============================================================
   FICHA — bloque de oferta con vencimiento
   Solo se dibuja con datos reales: la cuenta atrás sale de oferta_hasta
   y la barra de stock / stock_inicial. El precio de oferta también
   caduca en precio_final(), así que lo que se muestra es lo que se cobra.
   ============================================================ */
.oferta {
  --oferta-acento: var(--c-error);
  margin-top: var(--sp-5);
  padding: var(--sp-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: #fff;
  display: grid; gap: var(--sp-3);
}
.oferta__titulo {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--text-base); font-weight: 700; color: var(--c-ink);
}
.oferta__punto {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--c-accent);
  animation: oferta-late 2s ease-in-out infinite;
}
@keyframes oferta-late { 50% { opacity: .3; } }

.oferta__stock { font-size: var(--text-sm); color: var(--c-ink-mid); }
.oferta__stock strong { color: var(--c-accent); }

.oferta__barra {
  height: 8px; border-radius: var(--r-pill);
  background: rgba(15, 23, 42, .08);
  overflow: hidden;
}
.oferta__barra span {
  display: block; height: 100%;
  background: var(--c-accent);
  border-radius: inherit;
  transition: width .4s var(--ease-out);
}

.oferta__reloj { display: flex; gap: var(--sp-2); }
.oferta__caja {
  flex: 1; min-width: 0;
  display: grid; justify-items: center; gap: 3px;
  padding: var(--sp-3) var(--sp-2);
  background: var(--c-ink);
  border-radius: var(--r-md);
  color: #fff;
}
.oferta__caja b {
  font-family: var(--f-display);
  font-size: var(--text-xl); font-weight: 700; line-height: 1;
  /* Sin esto los dígitos cambian de ancho y el reloj tiembla cada segundo. */
  font-variant-numeric: tabular-nums;
}
.oferta__caja i {
  font-family: var(--f-mono); font-style: normal;
  font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}

@media (prefers-reduced-motion: reduce) { .oferta__punto { animation: none; } }

.ficha__bullets {
  display: grid; gap: var(--sp-3);
  margin-top: var(--sp-6); padding-top: var(--sp-6);
  border-top: 1px solid var(--c-border);
}
.ficha__bullets li { display: flex; gap: var(--sp-3); align-items: flex-start; color: var(--c-ink-mid); }
.ficha__check {
  flex: none; display: grid; place-items: center;
  width: 20px; height: 20px; margin-top: 3px;
  border-radius: 50%; background: var(--c-accent-muted); color: var(--c-accent);
}
.ficha__check svg { width: 11px; height: 11px; }

/* --- compra ---
   "Comprar ahora" es la acción principal, junto a la cantidad: salta
   directo al checkout (misma lógica que el Producto del Mes del home).
   "Agregar al carrito" queda como secundaria, de ancho completo debajo,
   para quien todavía quiere seguir viendo otros productos. */
.ficha__compra { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-8); }
.ficha__compra-fila { display: flex; gap: var(--sp-3); align-items: stretch; }
.ficha__comprar { flex: 1; min-height: 52px; }
.ficha__add { width: 100%; min-height: 52px; }
/* El ícono del carrito sólo se usa en móvil (ver max-width: 520px) */
.ficha__add-icono { display: none; width: 24px; height: 24px; flex: none; }
.ficha__aviso { margin-top: var(--sp-3); width: 100%; }

.qty {
  display: flex; align-items: center;
  border: 1px solid var(--c-border-light);
  border-radius: var(--r-md);
  background: var(--c-base-950);
  overflow: hidden;
}
.qty__btn {
  width: 44px; align-self: stretch;
  font-size: var(--text-lg); font-weight: 600; color: var(--c-ink);
  transition: background .2s var(--ease-out);
}
.qty__btn:hover:not(:disabled) { background: var(--c-base-800); }
.qty__btn:disabled { color: var(--c-ink-dim); cursor: not-allowed; }
.qty__valor {
  min-width: 40px; text-align: center;
  font-family: var(--f-mono); font-weight: 700; font-size: var(--text-base);
}

/* Recordatorio de envío gratis bajo "Comprar ahora": repite el gancho
   del anuncio justo donde se decide la compra. */
.ficha__envio-nota {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  margin-top: var(--sp-3);
  font-size: var(--text-sm); color: var(--c-ink-mid); text-align: center;
}
.ficha__envio-nota svg { flex: none; width: 18px; height: 18px; color: var(--c-accent); }
.ficha__envio-nota strong { color: var(--c-accent); font-weight: 600; }

/* Garantías como fila de íconos: rótulo corto, se lee de un vistazo.
   El detalle de cada una queda para lectores de pantalla (y en title). */
.ficha__garantias {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-6); padding-block: var(--sp-5);
  border-block: 1px solid var(--c-border);
}
.ficha__garantias li {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  text-align: center;
}
.ficha__garantia-icono {
  flex: none; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: var(--r-pill);
  background: var(--c-accent-muted); color: var(--c-accent);
}
.ficha__garantia-icono svg { width: 22px; height: 22px; }
.ficha__garantia-titulo {
  font-size: var(--text-xs); font-weight: 600; line-height: 1.3; color: var(--c-ink);
}
.ficha__garantias + .oferta { margin-top: var(--sp-6); }
@media (max-width: 340px) {
  .ficha__garantias { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-4); }
}

/* --- bloques de detalle --- */
.detalle {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.detalle__titulo {
  font-family: var(--f-display); font-weight: 700;
  font-size: var(--text-xl); letter-spacing: -.01em;
  margin-bottom: var(--sp-4);
}
.detalle__sub {
  font-family: var(--f-display); font-weight: 700;
  font-size: var(--text-base);
  margin-top: var(--sp-8); margin-bottom: var(--sp-3);
}
.detalle__texto { color: var(--c-ink-mid); }
.detalle__texto + .detalle__texto { margin-top: var(--sp-4); }

.detalle__incluye { display: grid; gap: var(--sp-2); }
.detalle__incluye li {
  position: relative; padding-left: var(--sp-5); color: var(--c-ink-mid);
}
.detalle__incluye li::before {
  content: ""; position: absolute; left: 0; top: .65em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--c-accent);
}

.detalle__lateral { display: grid; gap: var(--sp-8); }
.specs, .envios {
  background: var(--c-base-900);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
}
.specs__lista { display: grid; }
.specs__fila {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: var(--sp-4);
  padding-block: var(--sp-3);
  border-top: 1px solid var(--c-border);
  font-size: var(--text-sm);
}
.specs__fila:first-child { border-top: none; padding-top: 0; }
.specs__fila dt { color: var(--c-ink-mid); }
.specs__fila dd { font-weight: 600; }

.detalle__link {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-4);
  font-size: var(--text-sm); font-weight: 600; color: var(--c-accent);
}
.detalle__link svg { width: 15px; height: 15px; transition: transform .25s var(--ease-out); }
.detalle__link:hover svg { transform: translateX(3px); }

/* --- barra fija de compra (móvil) --- */
.barra-compra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--gutter);
  padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--c-border);
  transform: translateY(110%);
  transition: transform .3s var(--ease-out);
}
.barra-compra.visible { transform: none; }
.barra-compra__info { flex: 1; min-width: 0; }
.barra-compra__nombre {
  font-size: var(--text-sm); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.barra-compra__precio { font-family: var(--f-display); font-weight: 800; }
.barra-compra .btn-primary { flex: none; padding-inline: var(--sp-6); }

@media (max-width: 900px) {
  .ficha__inner { grid-template-columns: 1fr; gap: var(--sp-8); }
  .ficha__galeria { position: static; }
  .detalle { grid-template-columns: 1fr; }
  /* La barra fija sólo aparece donde el botón real ya salió de pantalla */
  .barra-compra { display: flex; }
  /* display:flex ganaría sobre el [hidden] del navegador; en productos
     sin compra (agotado, próximamente, 404) hay que ocultarla igual. */
  .barra-compra[hidden] { display: none; }
  /* El botón de WhatsApp subiría encima de la barra de compra */
  .barra-compra.visible ~ .whatsapp-float { bottom: 5.5rem; }
}

@media (max-width: 520px) {
  .ficha__miniaturas { grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); }
  /* Compra en móvil: "Comprar ahora" pasa a ser el botón grande, de
     ancho completo y abajo, al alcance del pulgar. Arriba quedan la
     cantidad y "Agregar al carrito" como botón cuadrado sólo con ícono
     (el texto sigue para lectores de pantalla). La fila de escritorio se
     disuelve con display: contents para reubicar sus hijos en la grilla
     sin duplicar markup. Los modificadores dejan fuera el estado
     Agotado / Próximamente, que conserva su botón de ancho completo. */
  .ficha__compra--activa { display: grid; grid-template-columns: 1fr auto; }
  .ficha__compra--activa .ficha__compra-fila { display: contents; }
  .ficha__compra--activa .ficha__pack { grid-column: 1 / -1; order: 0; }
  .ficha__compra--activa .qty { order: 1; justify-content: space-between; }
  .ficha__add--icono { order: 2; width: 56px; min-height: 56px; padding: 0; }
  .ficha__add--icono .ficha__add-icono { display: block; }
  .ficha__add--icono .ficha__add-texto {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  .ficha__compra--activa .ficha__comprar {
    order: 3; grid-column: 1 / -1;
    min-height: 60px; font-size: var(--text-base);
  }
}

.campo--error input,
.campo--error select { border-color: #E5484D; }

/* ============================================================
   PALETA VERDE — continuidad con el hero
   El verde entra como ambiente, no como color de acción: tiñe fondos,
   bordes y el cierre del sitio. El acento (--c-accent) es un verde más
   vivo, reservado para lo accionable: botones, precios y badges.
   Regla de dosis: mucho más blanco que verde, y el color nunca aparece
   en dos secciones seguidas.
   ============================================================ */

/* 1-3. Fondos de sección como modificadores, no por ID.
   Se aplican en el HTML (class="... fondo-lavado"), así el fondo viaja
   con la sección si se reordena el home. Atarlos a #id fue lo que dejó
   la "salida del hero" en destacados cuando destacados dejó de ir
   después del hero.
   Ritmo actual: hero · confianza (salida) · producto del mes (lavado) ·
   catálogo · banner · destacados · reseñas (lavado) · FAQ · footer.
   Nunca dos lavados seguidos. Sin border-block: el degradado ya se
   funde a blanco en los bordes, una línea encima sobra. */

/* Salida del hero: el verde se desvanece en el primer 45% de la sección
   que va pegada al hero, para que el corte oscuro → blanco no sea seco. */
.fondo-salida-hero {
  background: linear-gradient(180deg,
    rgba(var(--c-verde-rgb), .13) 0%,
    rgba(var(--c-verde-rgb), .05) 18%,
    rgba(var(--c-verde-rgb), .015) 32%,
    #fff 46%);
}

/* Lavado verdísimo suave, con blanco arriba y abajo para que el bloque
   no se lea como una franja de color. */
.fondo-lavado {
  background: linear-gradient(180deg,
    #fff 0%,
    var(--c-verde-lavado) 32%,
    var(--c-verde-lavado) 68%,
    #fff 100%);
}

.trust__item { border-color: rgba(var(--c-verde-rgb), .12); }

/* 4. Cierre: el footer pasa a verde profundo, el mismo del hero, para que
      el sitio abra y cierre con el mismo color. */
.footer {
  background: var(--c-verde-hondo);
  border-top: none;
  color: rgba(242, 250, 238, .72);
}
.footer__logotype { color: #fff; }
.footer__logotype span { color: var(--c-verde-claro); }
.footer__desc { color: rgba(242, 250, 238, .68); }
.footer__col-title { color: #fff; }
.footer__col a { color: rgba(242, 250, 238, .68); }
.footer__col a:hover { color: var(--c-verde-claro); }
.footer__bottom {
  border-top-color: rgba(207, 235, 199, .16);
  color: rgba(242, 250, 238, .5);
}
.footer__legal { border-top-color: rgba(207, 235, 199, .16); }
.footer__legal summary { color: rgba(242, 250, 238, .55); }
.footer__legal summary:hover { color: rgba(242, 250, 238, .85); }
.footer__legal-datos dt { color: rgba(242, 250, 238, .55); }
.footer__legal-datos dd { color: rgba(242, 250, 238, .85); }

/* Crédito del estudio: subrayado propio en vez de text-decoration, para
   controlar el grosor y que no compita con el copyright de al lado. */
.footer__credito {
  color: rgba(242, 250, 238, .78);
  border-bottom: 1px solid rgba(207, 235, 199, .28);
  padding-bottom: 1px;
  transition: color .2s, border-color .2s;
}
.footer__credito:hover { color: var(--c-verde-claro); border-color: var(--c-verde-claro); }
.footer .social a {
  border-color: rgba(207, 235, 199, .24);
  color: rgba(242, 250, 238, .78);
}
.footer .social a:hover {
  border-color: var(--c-verde-claro);
  color: var(--c-verde-hondo);
  background: var(--c-verde-claro);
}

/* 5. Barra de anuncios: comparte el verde del hero, que está justo debajo. */
.announce { background: var(--c-verde-hondo); }

/* 6. Detalles que seguían en azul marino y rompían la continuidad verde. */
.dest-card__spec { background: rgba(11, 42, 32, .88); }
.badge--nuevo { background: var(--c-verde-hondo); }
.hero-card { background: rgba(11, 42, 32, .82); }

/* ============================================================
   NAVBAR VERDE — continúa el hero, que arranca justo debajo
   ============================================================ */
.navbar {
  /* Transparente sobre el hero: el fondo verde se ve por detrás y llega
     hasta arriba. Al bajar aparece el color, porque ahí ya tiene detrás
     las secciones claras y el texto blanco necesita fondo propio. */
  background: transparent;
  border-bottom: none;
}
.navbar.scrolled {
  background: rgba(11, 42, 32, .92);
}
.navbar:not(.scrolled)::before {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.navbar__logotype { color: #fff; }
.navbar__logotype span { color: var(--c-verde-claro); }
.navbar__link { color: rgba(242, 250, 238, .78); }
.navbar__link:hover { color: #fff; }
.navbar__link::after { background: var(--c-verde-claro); }
.cart-btn { color: #fff; }
.cart-btn:hover { background: rgba(255, 255, 255, .12); }
.burger span { background: #fff; }

/* El panel lateral del menú sí se mantiene claro: es una superficie de
   lectura, no parte de la cabecera. Ahí los enlaces vuelven al tono
   oscuro del resto del sitio. */
@media (max-width: 900px) {
  .navbar__nav .navbar__link { color: var(--c-ink-mid); }
  .navbar__nav .navbar__link:hover { color: var(--c-ink); }
  /* El panel repite el logotipo en su cabecera: ahí va oscuro, si no
     queda blanco sobre blanco. */
  .navbar__nav .navbar__logotype { color: var(--c-ink); }
  .navbar__nav .navbar__logotype span { color: var(--c-accent); }
}

/* ============================================================
   LOGOTIPO — imagen en lugar del texto
   El archivo es blanco con transparencia, así que funciona directo
   sobre el navbar y el footer, que son verdes. En el panel lateral del
   menú, que es claro, se invierte a negro con un filtro en vez de
   mantener un segundo archivo.
   ============================================================ */
.navbar__logo-img {
  height: clamp(22px, 2.4vw, 30px);
  width: auto;
  display: block;
}
.navbar__logo-img--oscuro { filter: brightness(0); }

.footer__logo-img {
  height: 30px;
  width: auto;
  display: block;
}

/* ============================================================
   PRODUCTO DEL MES EN VERTICAL — ficha compacta, tipo app
   En vertical el bloque medía casi 1000px: foto cuadrada enorme, bajada
   larga y dos botones apilados. Aquí se arma como una tarjeta única:
   foto apaisada, texto al mínimo y una sola acción principal.
   ============================================================ */
@media (max-width: 820px) {
  /* La sección aporta su propio aire además del de la tarjeta: en vertical
     se recorta para que el bloque no quede flotando en medio de la nada. */
  .pdm { padding-block: clamp(2rem, 7vw, 3rem); }

  .pdm__inner {
    gap: 0;
    background: var(--c-base-950);
    border: 1px solid var(--c-border);
    border-radius: var(--r-xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
  }

  /* La foto pierde su marco propio: ahora es la cabecera de la tarjeta. */
  .pdm__media {
    max-width: none;
    margin: 0;
    aspect-ratio: 16 / 10;
    border: none;
    border-radius: 0;
  }
  /* En movil el marco es mas bajo: con el padding de escritorio la foto
     quedaba diminuta dentro de la tarjeta. */
  .pdm__img { padding: var(--sp-4); }
  .pdm__desc-badge {
    top: var(--sp-3); left: var(--sp-3);
    font-size: var(--text-xs);
    padding: var(--sp-1) var(--sp-3);
  }

  .pdm__info { padding: var(--sp-5); }

  .pdm__titular {
    font-size: 1.55rem;
    margin-block: var(--sp-2) 0;
  }
  /* La bajada repite lo que ya dicen los puntos; en pantalla chica es el
     bloque que más alto ocupa sin aportar. */
  .pdm__bajada { display: none; }

  .pdm__puntos { margin-block: var(--sp-4); gap: var(--sp-2); }
  .pdm__puntos li { font-size: var(--text-xs); line-height: 1.45; gap: var(--sp-2); }
  .pdm__check { width: 16px; height: 16px; margin-top: 1px; }
  .pdm__check svg { width: 9px; height: 9px; }

  .pdm__precios { gap: var(--sp-2); margin-bottom: var(--sp-1); }
  .pdm__precio-ahora { font-size: var(--text-xl); }
  .pdm__precio-antes { font-size: var(--text-base); }
  /* Más chico para que quepa en la misma línea del precio. */
  .pdm__ahorro { font-size: var(--text-xs); }
  .pdm__stock { margin-bottom: var(--sp-3); }

  /* Una sola acción con peso: "Ver detalle" pasa a enlace de texto. */
  .pdm__acciones { gap: var(--sp-2); }
  .pdm__acciones .btn-primary { flex: 1 1 100%; padding-block: var(--sp-3); }
  .pdm__acciones .btn-ghost {
    flex: 1 1 100%;
    border: none;
    background: transparent;
    padding-block: var(--sp-2);
    font-size: var(--text-sm);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .pdm__nota { margin-top: var(--sp-3); font-size: 10px; line-height: 1.4; }
}

/* Relacionados: suelen ser sólo dos productos, y con auto-fit a pantalla
   completa las cards se estiraban a más de 500px. Se les pone techo y se
   centran, en vez de dejarlas crecer sin límite. */
#relacionados {
  grid-template-columns: repeat(auto-fit, minmax(230px, 340px));
  justify-content: center;
}

/* ============================================================
   CATÁLOGO — 3 por fila fijo en escritorio
   Mismo ancho que las cards de destacados. Con auto-fit, al publicar
   el cuarto producto la grilla pasaba a 4 por fila y las cards bajaban
   a ~266px. Bajo 861px sigue mandando la regla de siempre (auto-fit
   y 2 columnas en móvil). #relacionados tiene su propia grilla por ID
   y no se ve afectado.
   ============================================================ */
@media (min-width: 861px) {
  .grid-productos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ============================================================
   BANNER — espacio de imagen entre catálogo y destacados
   Corta dos filas seguidas de 3 cards. La proporción sale del JSON
   (home_bloques.banner) vía variables, así cambiar de formato no
   obliga a tocar el CSS. Sin padding propio: el aire lo ponen las
   secciones de arriba y abajo.
   ============================================================ */
.banner__marco {
  --banner-ratio: 12 / 5;
  --banner-ratio-movil: 4 / 5;
  position: relative;
  aspect-ratio: var(--banner-ratio);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--c-verde-lavado);
}
.banner__marco picture,
.banner__link { display: block; width: 100%; height: 100%; }
.banner__img { width: 100%; height: 100%; object-fit: cover; }
.banner__link:focus-visible { outline-offset: -4px; }

/* Vista previa sin archivo todavía: se muestra el hueco con sus medidas
   en lugar de una imagen rota. */
.banner__marco--vacio {
  display: grid; place-items: center;
  border: 2px dashed rgba(var(--c-verde-rgb), .35);
}
.banner__marco--vacio picture { display: none; }
.banner__marco--vacio::after {
  content: attr(data-medidas);
  padding: var(--sp-4);
  font-family: var(--f-mono); font-size: var(--text-xs);
  color: var(--c-ink-mid); text-align: center; white-space: pre-line;
}

@media (max-width: 640px) {
  .banner__marco { aspect-ratio: var(--banner-ratio-movil); border-radius: var(--r-lg); }
}

/* ============================================================
   RESEÑAS — franja baja con resumen de Google + 3 reseñas
   Las estrellas son un solo elemento: una máscara de estrella repetida
   rellenada con un degradado cortado en --nota, así una nota de 4,7 se
   ve con la última estrella a medias sin armar cinco nodos.
   ============================================================ */
.resenas {
  --c-estrella: #E9A20B;
  padding-block: clamp(2rem, 4.5vw, 3.25rem);
}
.resenas__inner {
  display: grid;
  grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

.resenas__resumen { display: grid; gap: var(--sp-2); justify-items: start; }
.resenas__marca {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--text-sm); font-weight: 600; color: var(--c-ink-mid);
}
.resenas__google { height: 22px; width: auto; }
.resenas__titulo {
  font-family: var(--f-display); font-size: var(--text-lg);
  font-weight: 700; line-height: 1.25; letter-spacing: -.01em;
}
.resenas__nota { display: flex; align-items: center; gap: var(--sp-3); }
.resenas__nota strong {
  font-family: var(--f-display); font-size: var(--text-3xl);
  font-weight: 800; line-height: 1; letter-spacing: -.02em;
}
.resenas__total { font-size: var(--text-sm); color: var(--c-ink-mid); }
.resenas__link {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--text-sm); font-weight: 600; color: var(--c-accent);
}
.resenas__link svg { width: 15px; height: 15px; transition: transform .25s var(--ease-out); }
.resenas__link:hover svg { transform: translateX(3px); }

.estrellas {
  --tam: 16px;
  display: inline-block; flex-shrink: 0;
  width: calc(var(--tam) * 5); height: var(--tam);
  background: linear-gradient(90deg,
    var(--c-estrella) calc(var(--nota, 5) / 5 * 100%),
    var(--c-base-700) 0);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 0 26 24'%3E%3Cpath d='M12 2l2.9 6.6 7.1.7-5.4 4.7 1.6 7L12 17.3 5.8 21l1.6-7L2 9.3l7.1-.7z'/%3E%3C/svg%3E") 0 0 / var(--tam) var(--tam) repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 0 26 24'%3E%3Cpath d='M12 2l2.9 6.6 7.1.7-5.4 4.7 1.6 7L12 17.3 5.8 21l1.6-7L2 9.3l7.1-.7z'/%3E%3C/svg%3E") 0 0 / var(--tam) var(--tam) repeat-x;
}
.resenas__nota .estrellas { --tam: 20px; }

.resenas__lista {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4);
}
/* Google entrega hasta 5; en escritorio se ven 3 y el resto queda
   para el slider de móvil. */
.resena:nth-child(n + 4) { display: none; }

.resena {
  display: grid; gap: var(--sp-2); align-content: start;
  padding: var(--sp-4) var(--sp-5);
  background: #fff;
  border: 1px solid rgba(var(--c-verde-rgb), .12);
  border-radius: var(--r-lg);
}
.resena__head { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.resena__avatar {
  width: 34px; height: 34px; flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 50%; overflow: hidden;
  background: var(--c-accent-muted); color: var(--c-accent);
  font-family: var(--f-display); font-size: var(--text-sm); font-weight: 700;
}
.resena__avatar img { width: 100%; height: 100%; object-fit: cover; }
.resena__autor { font-size: var(--text-sm); font-weight: 600; line-height: 1.3; }
.resena__fecha { font-size: var(--text-xs); color: var(--c-ink-dim); line-height: 1.3; }
.resena .estrellas { --tam: 14px; }
.resena__texto {
  font-size: var(--text-sm); color: var(--c-ink-mid); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Aviso visible sólo en ?vista=previa, para que el contenido de ejemplo
   nunca se confunda con reseñas reales. */
.aviso-previa {
  grid-column: 1 / -1; justify-self: start;
  font-family: var(--f-mono); font-size: 11px; font-weight: 700;
  background: #FEF3C7; color: #92400E;
  padding: 4px 10px; border-radius: var(--r-pill);
}

/* Tablet horizontal: tres reseñas quedaban de ~185px, se muestran dos. */
@media (min-width: 861px) and (max-width: 1100px) {
  .resenas__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .resena:nth-child(n + 3) { display: none; }
}

/* Móvil y tablet: mismo patrón que destacados. Resumen compacto arriba
   y reseñas en slider con snap. */
@media (max-width: 860px) {
  .resenas__inner { grid-template-columns: 1fr; gap: var(--sp-5); }
  .resenas__resumen {
    grid-template-columns: auto 1fr;
    align-items: center; column-gap: var(--sp-4); row-gap: var(--sp-1);
  }
  .resenas__marca, .resenas__titulo, .resenas__link { grid-column: 1 / -1; }
  .resenas__nota strong { font-size: var(--text-2xl); }
  .resenas__lista {
    display: flex; gap: var(--sp-3);
    overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
  .resenas__lista::-webkit-scrollbar { display: none; }
  .resena, .resena:nth-child(n + 4) { display: grid; flex: 0 0 82%; scroll-snap-align: start; }
}

/* ============================================================
   PÁGINA DE POLÍTICAS
   Índice pegajoso a la izquierda en escritorio, apilado en móvil.
   ============================================================ */
.legal__grid {
  display: grid; grid-template-columns: 240px 1fr; gap: var(--sp-12);
  align-items: start;
}
.legal__indice { position: sticky; top: calc(var(--nav-alto, 74px) + var(--sp-6)); }
.legal__indice ul { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); }
.legal__indice a {
  font-size: var(--text-sm); color: var(--c-ink-mid);
  padding-block: var(--sp-1); transition: color .2s;
}
.legal__indice a:hover { color: var(--c-accent); }

.legal__cuerpo { max-width: 72ch; }
.legal__head { padding-bottom: var(--sp-8); border-bottom: 1px solid var(--c-border); }
.legal__fecha {
  font-family: var(--f-mono); font-size: var(--text-xs);
  color: var(--c-ink-mid); margin-top: var(--sp-4);
}

/* scroll-margin: sin esto el navbar fijo tapa el título al llegar por ancla */
.legal__bloque {
  padding-block: var(--sp-10);
  border-bottom: 1px solid var(--c-border);
  scroll-margin-top: calc(var(--nav-alto, 74px) + var(--sp-4));
}
.legal__bloque h2 {
  font-family: var(--f-display); font-weight: 800;
  font-size: var(--text-2xl); letter-spacing: -.02em;
  margin-bottom: var(--sp-5);
}
.legal__bloque h3 {
  font-size: var(--text-base); font-weight: 700;
  margin-top: var(--sp-6); margin-bottom: var(--sp-2);
}
.legal__bloque p { color: var(--c-ink-mid); line-height: 1.75; margin-bottom: var(--sp-3); }
.legal__bloque ul, .legal__bloque ol {
  color: var(--c-ink-mid); line-height: 1.75;
  margin: var(--sp-3) 0 var(--sp-3) var(--sp-5);
  display: grid; gap: var(--sp-2);
}
.legal__bloque ul { list-style: disc; }
.legal__bloque ol { list-style: decimal; }
.legal__bloque strong { color: var(--c-ink); }
.legal__bloque a { color: var(--c-accent); text-decoration: underline; }

.legal__nota {
  font-size: var(--text-sm); color: var(--c-ink-mid);
  border-left: 2px solid var(--c-border-light);
  padding-left: var(--sp-4); margin-top: var(--sp-5);
}

/* Datos de la empresa: etiqueta a la izquierda, valor a la derecha. */
.legal__datos {
  display: grid; grid-template-columns: 180px 1fr;
  gap: var(--sp-2) var(--sp-4);
  margin: var(--sp-5) 0;
  padding: var(--sp-5);
  background: var(--c-verde-lavado);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  font-size: var(--text-sm);
}
.legal__datos dt { color: var(--c-ink-mid); }
.legal__datos dd { font-weight: 600; color: var(--c-ink); }

/* La garantía de entrega se ve distinta al resto a propósito: es la única
   sección de esta página que, además de informar, vende. */
.legal__bloque--destacada {
  background: var(--c-verde-lavado);
  border: 1px solid var(--c-accent-muted);
  border-radius: var(--r-lg);
  padding: var(--sp-8);
  margin-block: var(--sp-8);
}
.legal__promesa {
  font-family: var(--f-display); font-weight: 700;
  font-size: var(--text-lg); line-height: 1.5;
  color: var(--c-accent-dark) !important;
  padding: var(--sp-4);
  background: #fff;
  border-radius: var(--r-md);
  border-left: 3px solid var(--c-accent);
}

.legal__contacto { padding-top: var(--sp-10); text-align: center; }
.legal__contacto h2 {
  font-family: var(--f-display); font-weight: 800;
  font-size: var(--text-xl); margin-bottom: var(--sp-2);
}
.legal__contacto p { color: var(--c-ink-mid); margin-bottom: var(--sp-5); }
.legal__contacto .btn-primary { display: inline-flex; }

@media (max-width: 900px) {
  .legal__grid { grid-template-columns: 1fr; gap: var(--sp-8); }
  .legal__indice { position: static; }
  .legal__indice ul { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }
  .legal__datos { grid-template-columns: 1fr; gap: 0; }
  .legal__datos dt { margin-top: var(--sp-3); }
  .legal__bloque--destacada { padding: var(--sp-5); }
}

/* ============================================================
   IDENTIFICACIÓN DEL VENDEDOR
   Vive como <dl> en el bloque "Quiénes somos" de politicas.html,
   no en el footer. Ver el artículo #empresa en ese archivo.
   ============================================================ */

/* ============================================================
   CHECKOUT — garantía de entrega
   ============================================================ */
.garantia-entrega {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  margin-top: var(--sp-4); padding-top: var(--sp-4);
  border-top: 1px dashed var(--c-border-light);
  font-size: var(--text-xs); color: var(--c-ink-mid); line-height: 1.6;
}
.garantia-entrega svg {
  width: 16px; height: 16px; color: var(--c-accent);
  flex-shrink: 0; margin-top: 2px;
}
.garantia-entrega strong { color: var(--c-ink); }
.garantia-entrega a { color: var(--c-accent); text-decoration: underline; }

/* ============================================================
   NAVBAR EN PÁGINAS CLARAS
   El tratamiento verde y transparente de más arriba está hecho para el
   hero del home, que arranca por detrás de la barra. En las páginas que
   empiezan en blanco eso dejaba logo blanco sobre fondo blanco y enlaces
   invisibles hasta que el usuario hacía scroll.
   El home se marca con data-pagina="home"; todo lo demás cae acá.
   ============================================================ */
body:not([data-pagina="home"]) .navbar {
  background: rgba(255, 255, 255, .88);
  border-bottom: 1px solid var(--c-border);
}
/* El blur del pseudo-elemento se desactivaba mientras no hubiera scroll,
   porque sobre el hero no hacía falta. Acá sí: la barra es traslúcida
   desde el primer pixel. */
body:not([data-pagina="home"]) .navbar:not(.scrolled)::before {
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
}
body:not([data-pagina="home"]) .navbar.scrolled {
  background: rgba(255, 255, 255, .92);
  box-shadow: var(--shadow-sm);
}

/* El logo es un archivo blanco con transparencia, así que sobre fondo
   claro hay que invertirlo. El selector apunta solo al logo de la barra:
   el del panel lateral del menú ya se invierte con su propia clase. */
body:not([data-pagina="home"]) .navbar__inner > .navbar__logo .navbar__logo-img {
  filter: brightness(0);
}
body:not([data-pagina="home"]) .navbar__inner > .navbar__logo .navbar__logotype { color: var(--c-ink); }
body:not([data-pagina="home"]) .navbar__inner > .navbar__logo .navbar__logotype span { color: var(--c-accent); }

body:not([data-pagina="home"]) .navbar__links .navbar__link { color: var(--c-ink-mid); }
body:not([data-pagina="home"]) .navbar__links .navbar__link:hover { color: var(--c-ink); }
body:not([data-pagina="home"]) .navbar__link::after { background: var(--c-accent); }
body:not([data-pagina="home"]) .cart-btn { color: var(--c-ink); }
body:not([data-pagina="home"]) .cart-btn:hover { background: var(--c-base-800); }
body:not([data-pagina="home"]) .burger span { background: var(--c-ink); }

/* ============================================================
   PRODUCTO DEL MES — tira de miniaturas
   Cinco visibles en una fila bajo la imagen principal. Si el bloque trae
   más, la tira scrollea con snap en vez de apretar las miniaturas hasta
   volverlas intocables.
   ============================================================ */
/* La tira va como hermana del marco, no dentro: .pdm__media es un
   cuadrado con overflow:hidden y la recortaria. */
.pdm__visual { display: block; }
.pdm__img { transition: opacity .22s var(--ease-out); }

.pdm__galeria {
  display: grid;
  grid-auto-flow: column;
  /* Exactamente 3 por fila, descontando los 2 espacios entre ellas.
     El resto de la tira queda fuera de cuadro y se llega a ella con
     swipe: miniaturas mas grandes, mas faciles de acertar con el pulgar,
     y la imagen principal sigue siendo la que manda. */
  grid-auto-columns: calc((100% - var(--sp-2) * 2) / 3);
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  /* Aire para que el anillo de foco no quede cortado. */
  padding: 2px;
  margin-inline: -2px;
}
.pdm__galeria::-webkit-scrollbar { display: none; }

.pdm__thumb {
  scroll-snap-align: start;
  /* aspect-ratio en el botón, no en la imagen: así la altura está
     reservada antes de que cargue y no hay salto de layout. */
  aspect-ratio: 1024 / 811;
  /* Piso de área táctil: en pantallas angostas la proporción sola deja
     miniaturas de ~40px, difíciles de acertar con el pulgar. */
  min-height: 46px;
  padding: 0;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer;
  /* Atenuadas en reposo: la que manda es la imagen grande, la tira es
     secundaria y no debe competir con ella. */
  opacity: .68;
  transition: opacity .2s, border-color .2s, box-shadow .2s;
}
.pdm__thumb img {
  display: block; width: 100%; height: 100%;
  /* Mismo criterio que la imagen grande: la miniatura muestra el
     producto entero, no un recorte del centro. */
  object-fit: contain;
  padding: 3px;
}
.pdm__thumb:hover { opacity: 1; border-color: var(--c-accent-muted); }
.pdm__thumb.is-activa {
  opacity: 1;
  border-color: var(--c-accent);
  box-shadow: inset 0 0 0 1px var(--c-accent);
}
.pdm__thumb:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .pdm__img, .pdm__thumb { transition: none; }
}


/* ============================================================
   CAPA MOVIL — toque, ritmo, feedback y seguridad de area
   Va al final a proposito: son ajustes sobre componentes que ya
   existen, no un sistema nuevo. Nada de aqui cambia el diseno en
   escritorio salvo donde se indica.
   ============================================================ */

/* ------------------------------------------------------------
   1. HOVER SOLO CON PUNTERO FINO
   En tactil el :hover se queda pegado despues de tocar: el boton
   se ve levantado y con sombra hasta que tocas otra cosa. Eso da
   la sensacion de que la interfaz "se traba".
   ------------------------------------------------------------ */
@media (hover: none) {
  .btn-primary:hover,
  .btn-ghost:hover,
  .card:hover,
  .trust__item:hover,
  .ficha__mini:hover,
  .ficha__video-btn:hover,
  .whatsapp-float:hover,
  .social a:hover,
  .hero__cta:hover,
  .hero__play:hover,
  .vmodal__cerrar:hover,
  .pdm__thumb:hover { transform: none; }

  .btn-primary:hover { background: var(--c-accent); box-shadow: none; }
  .btn-ghost:hover   { border-color: var(--c-border-light); background: #fff; }
  .card:hover        { box-shadow: none; border-color: var(--c-border); }
  .card:hover .card__img,
  .dest-card:hover .dest-card__img { transform: none; }
  .whatsapp-float:hover { box-shadow: 0 4px 20px rgba(37, 211, 102, .4); }
  .hero__cta:hover { background: var(--hero-verde-hondo); box-shadow: none; }
  .faq__pregunta:hover { background: none; color: var(--c-ink); }
  .card__link:hover { color: var(--c-ink-mid); border-color: var(--c-border-light); }
}

/* ------------------------------------------------------------
   2. FEEDBACK AL TOCAR
   Sin hover, el unico acuse de recibo posible es el :active. Un
   hundido de 60-80ms hace que el boton se sienta fisico y evita
   el doble toque por duda.
   ------------------------------------------------------------ */
a, label, summary, [role="button"] { -webkit-tap-highlight-color: transparent; }

@media (hover: none) {
  .btn-primary:active,
  .btn-ghost:active,
  .card__cta:active,
  .hero__cta:active,
  .dest-card__cta:active,
  .barra-compra .btn-primary:active,
  .checkout__barra-movil .btn-primary:active {
    transform: scale(.97);
    transition-duration: .08s;
  }
  .qty button:active,
  .qty__btn:active,
  .resumen-item__qty button:active { background: var(--c-accent-muted); }
  .navbar__links .navbar__link:active,
  .footer__col a:active { opacity: .6; }
}

/* ------------------------------------------------------------
   3. AREAS TACTILES
   Piso de 44px en todo lo accionable. Donde subir la caja movia
   el diseno (enlaces de texto con subrayado), el area se agranda
   con un pseudo-elemento invisible en vez de con padding.
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .qty button, .qty__btn { min-width: 44px; min-height: 44px; }
  .qty__valor { min-width: 44px; }
  .resumen-item__qty button { min-width: 40px; min-height: 40px; }
  .resumen-item__qty span { min-width: 34px; }

  /* El carrito y el burger se dejan en sus 42px: son ellos los que
     fijan el alto del navbar (74px) del que cuelga el calce del hero,
     y a 42px ya estan sobre el minimo de area tactil. */
  .drawer__close,
  .navbar__nav-cerrar { width: 44px; height: 44px; }

  .card__cta { min-height: 44px; }
  .faq__pregunta { min-height: 56px; }
  .campo input, .campo select { min-height: 48px; }
  .pago-opcion { min-height: 60px; }

  /* Los enlaces del footer y del indice legal son listas densas:
     un poco de aire vertical evita el toque errado en la fila de al lado. */
  .footer__col li { margin-bottom: var(--sp-1); }
  .footer__col a,
  .legal__indice a { display: inline-block; padding-block: var(--sp-2); }
}

/* Area ampliada sin mover un pixel: el subrayado y la tipografia
   quedan donde estan y el dedo tiene 44px reales. */
.card__link,
.cart-item__eliminar,
.resumen-item__borrar,
.detalle__link,
.resenas__link { position: relative; }
@media (max-width: 900px) {
  .card__link::after,
  .cart-item__eliminar::after,
  .detalle__link::after,
  .resenas__link::after {
    content: ''; position: absolute; inset: -12px -10px;
  }
  .resumen-item__borrar { width: 40px; height: 40px; display: grid; place-items: center; margin-right: -8px; }
}

/* ------------------------------------------------------------
   4. SAFE AREA (iPhone con barra de gestos)
   Todo lo fijo al borde inferior quedaba bajo el indicador de
   inicio: el boton de WhatsApp y la barra de pago se tocaban mal.
   ------------------------------------------------------------ */
.whatsapp-float { bottom: calc(1.25rem + env(safe-area-inset-bottom)); }
.toast { bottom: calc(var(--sp-6) + env(safe-area-inset-bottom)); }
.drawer__foot { padding-bottom: calc(var(--sp-6) + env(safe-area-inset-bottom)); }

@media (max-width: 900px) {
  .navbar__nav-pie { padding-bottom: calc(var(--sp-5) + env(safe-area-inset-bottom)); }
  .checkout__barra-movil { padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom)); }
  .checkout { padding-bottom: calc(7rem + env(safe-area-inset-bottom)); }
  .barra-compra.visible ~ .whatsapp-float { bottom: calc(5.5rem + env(safe-area-inset-bottom)); }
}
@media (max-width: 640px) {
  .whatsapp-float { bottom: calc(1rem + env(safe-area-inset-bottom)); }
}

/* ------------------------------------------------------------
   5. BLOQUEO DE SCROLL AL ABRIR CAPAS
   overflow:hidden en el body no sujeta a Safari iOS: el fondo
   sigue corriendo detras del carrito y al cerrar la pagina vuelve
   al tope. position:fixed si lo sujeta; el JS guarda y restituye
   la posicion (ver app.js).
   ------------------------------------------------------------ */
body.sin-scroll {
  position: fixed;
  left: 0; right: 0;
  width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
.drawer__body,
.navbar__nav { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* ------------------------------------------------------------
   6. ANCLAJES
   El scroll-padding de <html> cubre los saltos con teclado y con
   scrollIntoView; esto cubre los #ancla del menu y del footer.
   ------------------------------------------------------------ */
main [id],
section[id],
header[id],
footer[id] { scroll-margin-top: calc(var(--nav-alto) + var(--sp-4)); }

/* ------------------------------------------------------------
   7. CARRITO A PANTALLA COMPLETA EN TELEFONO
   A 100% de ancho gana area de lectura y los controles de cantidad
   caben en 44px sin apretar el precio.
   ------------------------------------------------------------ */
@media (max-width: 640px) {
  .drawer { width: 100%; }
  .drawer__head { padding: var(--sp-3) var(--sp-4); }
  .drawer__body { padding: var(--sp-2) var(--sp-4); }
  .drawer__foot { padding-inline: var(--sp-4); }
  .cart-item__img { width: 60px; height: 60px; }
  .cart-item__acciones { gap: var(--sp-3); }
}

/* ------------------------------------------------------------
   8. ESQUELETOS DE CARGA
   El catalogo se pinta despues del fetch: antes el hueco era una
   linea de texto y al llegar los productos la pagina pegaba un
   salto (CLS). Los esqueletos reservan exactamente el alto final.
   ------------------------------------------------------------ */
.card--sk { pointer-events: none; border-color: var(--c-border); }
.card--sk .card__media { background: var(--c-base-800); }
.card--sk .card__body { gap: var(--sp-2); }
.sk {
  position: relative; overflow: hidden;
  background: var(--c-base-800);
  border-radius: var(--r-sm);
}
.sk::after {
  content: ''; position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent);
  animation: sk-brillo 1.3s var(--ease-sharp) infinite;
}
.sk--titulo { height: 14px; width: 75%; }
.sk--linea  { height: 10px; width: 92%; }
.sk--precio { height: 18px; width: 46%; margin-top: auto; }
.sk--boton  { height: 44px; width: 100%; border-radius: var(--r-md); margin-top: var(--sp-2); }
@keyframes sk-brillo { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .sk::after { animation: none; } }

/* ------------------------------------------------------------
   9. RITMO VERTICAL EN TELEFONO
   El aire pensado para escritorio se lee como pagina vacia en una
   pantalla de 390px. Se recorta donde no aporta jerarquia.
   ------------------------------------------------------------ */
@media (max-width: 640px) {
  /* La miga arrancaba a 96px del navbar: casi un tercio de pantalla
     en blanco antes del producto. */
  .miga { padding-top: var(--sp-5); padding-bottom: var(--sp-1); }
  .ficha { padding-block: var(--sp-4) var(--sp-8); }

  .section-label { margin-bottom: var(--sp-2); }
  .section-sub { font-size: var(--text-sm); }

  /* El encabezado del catalogo lleva un margin-bottom de 2rem en linea;
     con el subtitulo mas corto, 1.5rem basta. */
  #productos > .container > header { margin-bottom: var(--sp-6) !important; }

  .faq__grid { gap: var(--sp-6); }
  .faq__pregunta { padding: var(--sp-4) var(--sp-4); gap: var(--sp-3); }
  .faq__respuesta p { padding: 0 var(--sp-4) var(--sp-4); font-size: var(--text-sm); }
  .faq__ayuda { margin-top: var(--sp-4); }

  .footer { padding-block: var(--sp-10) var(--sp-6); }
  .footer__grid { gap: var(--sp-6); }
  .footer__bottom { margin-top: var(--sp-6); padding-top: var(--sp-5); }
  .footer__pagos { margin-top: var(--sp-6); }
}

/* ------------------------------------------------------------
   10. RESUMEN DEL CHECKOUT COMPACTO
   En vertical el resumen va arriba del formulario (order:-1). Con
   fotos de 64px y separadores gruesos empujaba el primer campo
   fuera de pantalla; comprimido, el formulario arranca visible.
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .resumen-caja { padding: var(--sp-4); }
  .resumen-items { gap: var(--sp-3); max-height: none; }
  .resumen-item { gap: var(--sp-3); padding-bottom: var(--sp-3); }
  .resumen-item img { width: 52px; height: 52px; }
  .resumen-item__precio-unit { margin: 1px 0 var(--sp-1); }
  .resumen-totales { margin-top: var(--sp-3); padding-top: var(--sp-3); }
  .checkout__titulo { margin-bottom: var(--sp-4); }
}

/* ------------------------------------------------------------
   11. DETALLES DE LEGIBILIDAD
   ------------------------------------------------------------ */
@media (max-width: 380px) {
  .announce { font-size: 11px; }
}
/* Los bancos son 12px sobre verde profundo: al 50% de opacidad no
   llegaban a 4.5:1. */
.footer__bancos { color: rgba(242, 250, 238, .66); }
.footer__pagos-nota,
.footer__pagos-titulo { color: rgba(242, 250, 238, .66); }

/* ============================================================
   FOOTER — medios de pago (Mercado Pago)
   ============================================================ */
.footer__pagos { margin-top: var(--sp-6); padding-top: var(--sp-6); border-top: 1px solid rgba(242, 250, 238, .12); }
.footer__pagos-titulo { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--sp-3); }
.footer__pagos-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.footer__pago-chip { display: block; width: 48px; height: 32px; border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.footer__pago-chip svg { display: block; width: 100%; height: 100%; }
.footer__pagos-nota { font-size: var(--text-xs); max-width: 32rem; }

/* El foco se recorta cuando el elemento esta al borde de un carril
   con overflow. */
.destacados .dest-card:focus-visible,
.resenas__lista .resena:focus-visible,
.pdm__thumb:focus-visible { outline-offset: -2px; }

/* En pantallas chicas el precio tachado y el actual competian en la
   misma linea; el tachado baja de peso y el vigente manda. */
/* Sin opacity en el tachado: bajaba el contraste bajo 4.5:1. La jerarquía
   ya la dan el tamaño y el peso del precio vigente. */
@media (max-width: 640px) {
  .card__precio-ahora { letter-spacing: -.02em; }
}


/* ============================================================
   AJUSTES — confianza compacta y catalogo a una columna
   ============================================================ */

/* ------------------------------------------------------------
   12. BARRA DE CONFIANZA COMPACTA (movil / tablet)
   Eran tres tarjetas sueltas de ~90px con su propio marco y aire
   entre ellas: casi 290px de alto para tres frases de apoyo, justo
   donde el usuario deberia estar llegando al producto.
   Pasa a ser UNA tarjeta con tres filas separadas por hairline:
   se lee igual de rapido, mantiene el texto (incluido el enlace de
   garantia, que vende) y ocupa un tercio menos.
   ------------------------------------------------------------ */
@media (max-width: 860px) {
  .trust-sec { padding-block: clamp(1.5rem, 5.5vw, 2.25rem); }

  .trust {
    grid-template-columns: 1fr;
    gap: 0;
    background: #fff;
    border: 1px solid rgba(var(--c-verde-rgb), .14);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
  }

  /* Las filas pierden marco propio: el marco ahora es el del bloque. */
  .trust__item {
    padding: var(--sp-3) var(--sp-4);
    gap: var(--sp-3);
    align-items: center;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
  .trust__item + .trust__item { border-top: 1px solid var(--c-border); }

  .trust__icon { width: 34px; height: 34px; border-radius: var(--r-sm); }
  .trust__icon svg { width: 17px; height: 17px; }

  .trust__title { font-size: var(--text-sm); line-height: 1.3; margin-bottom: 1px; }
  .trust__text  { font-size: 11px; line-height: 1.4; }
  .trust__text a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 2px; }
}

/* Pantallas muy angostas: el icono deja de ser necesario para entender
   la fila y el texto gana el ancho que ocupaba. */
@media (max-width: 360px) {
  .trust__item { padding-inline: var(--sp-3); gap: var(--sp-2); }
  .trust__icon { width: 30px; height: 30px; }
  .trust__icon svg { width: 15px; height: 15px; }
}

/* ------------------------------------------------------------
   13. CATALOGO A UNA COLUMNA EN MOVIL
   Con una sola card por fila hay ancho de sobra, asi que se revierte
   todo lo que se habia comprimido para el modo de dos columnas: la
   foto respira, el precio vuelve a su peso y reaparece el "Ahorras".
   La foto pasa de 1:1 a 4:3 para que una card no ocupe una pantalla
   entera y el scroll siga siendo corto.
   ------------------------------------------------------------ */
@media (max-width: 640px) {
  .grid-productos {
    grid-template-columns: repeat(1, 1fr);
    gap: var(--sp-4);
  }

  .card { border-radius: var(--r-lg); }
  .card__media { aspect-ratio: 4 / 3; }
  .card__img { object-position: center; }

  .card__body { padding: var(--sp-4); gap: var(--sp-2); }
  .card__nombre { font-size: var(--text-base); line-height: 1.3; }

  /* Con el ancho completo el subtitulo cabe entero: no hace falta
     cortarlo a dos lineas como en el modo de dos columnas. */
  .card__sub {
    font-size: var(--text-xs); line-height: 1.45;
    -webkit-line-clamp: 3;
  }

  .card__precios { gap: var(--sp-2); row-gap: var(--sp-1); }
  .card__precio-antes { font-size: var(--text-sm); }
  .card__precio-ahora { font-size: var(--text-xl); }
  .card__ahorro { display: inline; font-size: 11px; }
  .card__stock { font-size: var(--text-xs); }

  .card__cta {
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--text-sm);
    min-height: 48px;
    margin-top: var(--sp-2);
  }
  .card__link { margin-top: var(--sp-2); font-size: var(--text-xs); }

  .card__badges { top: var(--sp-3); left: var(--sp-3); gap: var(--sp-2); }
  .card__badge-pie { left: var(--sp-3); bottom: var(--sp-3); }
  .badge { font-size: 10px; padding: 4px 8px; }
}

@media (max-width: 380px) {
  .grid-productos { gap: var(--sp-3); }
  .card__body { padding: var(--sp-3); }
}

/* El esqueleto tiene que medir lo mismo que la card real o el salto de
   layout vuelve, ahora al reves. */
@media (max-width: 640px) {
  .card--sk .card__media { aspect-ratio: 4 / 3; }
  .sk--boton { height: 48px; }
}


/* ============================================================
   14. CARACTERISTICAS — slider de la ficha de producto
   Banda verde a sangre completa entre la caja de compra y el texto
   largo. Ahi la pagina es toda blanca y el usuario ya decidio si le
   interesa: un bloque oscuro corta el scroll y da una segunda pasada
   de argumentos sin obligar a leer parrafos.
   Es un carrusel nativo con scroll-snap: swipe en tactil, flechas y
   teclado en escritorio, cero librerias.
   ============================================================ */
.carac {
  position: relative;
  background: var(--c-verde-hondo);
  color: #fff;
  padding-block: var(--section-y);
  overflow: hidden;
}

/* Halo de acento para que la banda no se lea como un rectangulo plano. */
.carac::before {
  content: '';
  position: absolute; inset: -30% -10% auto -10%;
  height: 70%;
  background: radial-gradient(60% 100% at 50% 0%, rgba(var(--c-accent-rgb), .45), transparent 70%);
  pointer-events: none;
}
.carac > .container { position: relative; }

/* ---------- encabezado ---------- */
.carac__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-6);
  margin-bottom: var(--sp-8);
}
.carac__label { color: var(--c-verde-claro); margin-bottom: var(--sp-2); }
.carac__titulo { color: #fff; }
.carac__sub {
  color: rgba(255, 255, 255, .72);
  font-size: var(--text-base);
  margin-top: var(--sp-2);
  max-width: 52ch;
}

.carac__nav { display: flex; gap: var(--sp-2); flex-shrink: 0; }
.carac__flecha {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  cursor: pointer;
  transition: background .2s var(--ease-sharp), border-color .2s var(--ease-sharp),
              opacity .2s var(--ease-sharp), transform .2s var(--ease-spring);
}
.carac__flecha svg { width: 20px; height: 20px; }
.carac__flecha:disabled { opacity: .3; cursor: default; }
@media (hover: hover) {
  .carac__flecha:not(:disabled):hover {
    background: var(--c-accent-light);
    border-color: transparent;
    transform: scale(1.06);
  }
}
.carac__flecha:not(:disabled):active { transform: scale(.94); }

/* ---------- pista ---------- */
.carac__pista {
  display: grid;
  grid-auto-flow: column;
  /* Fraccion a proposito: la card siguiente asoma y el bloque se lee
     como deslizable sin necesidad de un cartel que lo explique. */
  --carac-vis: 3.25;
  --carac-gap: var(--sp-5);
  grid-auto-columns: calc((100% - var(--carac-gap) * 2) / var(--carac-vis));
  gap: var(--carac-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Espacio para que la sombra y el foco no se recorten contra la pista. */
  padding: 4px 4px var(--sp-4);
  margin-inline: -4px;
  list-style: none;
}
.carac__pista::-webkit-scrollbar { display: none; }
.carac__pista:focus-visible { outline: 2px solid var(--c-verde-claro); outline-offset: 4px; border-radius: var(--r-lg); }
.carac__item { scroll-snap-align: start; }

/* ---------- card ---------- */
.carac__card {
  height: 100%;
  display: flex; flex-direction: column;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-xl);
  overflow: hidden;
  transition: border-color .3s var(--ease-sharp), background .3s var(--ease-sharp),
              transform .4s var(--ease-out);
}
@media (hover: hover) {
  .carac__card:hover {
    background: rgba(255, 255, 255, .09);
    border-color: rgba(var(--c-accent-rgb), .8);
    transform: translateY(-4px);
  }
  .carac__card:hover .carac__img { transform: scale(1.06); }
}

.carac__media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: rgba(0, 0, 0, .25);
  overflow: hidden;
}
.carac__img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease-out);
}
/* Degradado al pie de la foto: el numero se lee sobre cualquier imagen. */
.carac__media::after {
  content: '';
  position: absolute; inset: auto 0 0 0; height: 45%;
  background: linear-gradient(to top, rgba(11, 42, 32, .85), transparent);
  pointer-events: none;
}
.carac__num {
  position: absolute; left: var(--sp-4); bottom: var(--sp-3);
  z-index: 1;
  font-family: var(--f-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--c-verde-claro);
}

.carac__cuerpo {
  padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.carac__card-titulo {
  font-family: var(--f-display);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
}
.carac__card-texto {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: rgba(255, 255, 255, .74);
}

/* ---------- barra de progreso ----------
   Reemplaza a los puntos: con 5 cards y vista fraccionada, los puntos
   mienten (nunca hay una card "activa" clara); la barra si refleja
   cuanto queda por recorrer. */
.carac__progreso {
  height: 3px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .14);
  overflow: hidden;
  margin-top: var(--sp-5);
}
.carac__progreso span {
  display: block; height: 100%;
  width: 30%;
  border-radius: inherit;
  background: var(--c-verde-claro);
  transform-origin: left;
  transition: width .18s var(--ease-sharp);
}

/* ---------- adaptacion ---------- */
@media (max-width: 1024px) { .carac__pista { --carac-vis: 2.4; } }
@media (max-width: 860px) {
  .carac__pista { --carac-vis: 1.85; --carac-gap: var(--sp-4); }
  .carac__head { margin-bottom: var(--sp-6); }
}
@media (max-width: 640px) {
  .carac__pista { --carac-vis: 1.12; }
  /* Las flechas sobran donde se hace swipe y ocupan ancho del titulo. */
  .carac__nav { display: none; }
  .carac__head { display: block; }
  .carac__media { aspect-ratio: 1 / 1; }
  .carac__cuerpo { padding: var(--sp-4); }
}

@media (prefers-reduced-motion: reduce) {
  .carac__pista { scroll-behavior: auto; }
  .carac__card, .carac__img, .carac__progreso span { transition: none; }
}

/* ============================================================
   MOMENTOS DE USO — tres tarjetas + foto de clientes
   ============================================================ */
.clientes__inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
/* Columnas de la grilla: sin esto, el navegador no deja que el
   contenido de adentro (el slider de tarjetas) se encoja para caber
   en la pantalla, y empuja todo hacia la derecha. */
.clientes__texto, .clientes__foto { min-width: 0; }
.clientes__stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3); margin-top: var(--sp-6);
}
.clientes__stat {
  background: var(--c-verde-lavado); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: var(--sp-5) var(--sp-4);
  display: grid; gap: var(--sp-2); align-content: start;
  transition: transform .3s var(--ease-out), border-color .3s, box-shadow .3s, background .3s;
}
/* Entrada escalonada: las tres tarjetas no llegan juntas, se encadenan.
   El delay cuelga del [data-reveal] del contenedor, asi que no necesita
   JS nuevo. */
.clientes__texto[data-reveal] .clientes__stat {
  opacity: 0; transform: translateY(18px);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out),
              border-color .3s, box-shadow .3s, background .3s;
}
.clientes__texto[data-reveal].visible .clientes__stat { opacity: 1; transform: none; }
.clientes__texto[data-reveal].visible .clientes__stat:nth-child(1) { transition-delay: .10s; }
.clientes__texto[data-reveal].visible .clientes__stat:nth-child(2) { transition-delay: .20s; }
.clientes__texto[data-reveal].visible .clientes__stat:nth-child(3) { transition-delay: .30s; }

.clientes__stat:hover {
  transform: translateY(-4px);
  background: #fff;
  border-color: var(--c-accent-muted);
  box-shadow: var(--shadow-md);
}
.clientes__icono {
  width: 38px; height: 38px; border-radius: var(--r-md);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-accent-muted); color: var(--c-accent);
  transition: transform .35s var(--ease-spring), background .3s;
}
.clientes__icono svg { width: 19px; height: 19px; }
.clientes__stat:hover .clientes__icono {
  transform: scale(1.08) rotate(-4deg);
  background: var(--c-verde-claro);
}
.clientes__stat strong {
  font-family: var(--f-display); font-size: var(--text-lg);
  font-weight: 700; letter-spacing: -.01em; color: var(--c-accent); line-height: 1.25;
}
.clientes__stat span { font-size: var(--text-sm); color: var(--c-ink-mid); line-height: 1.45; }

/* CTA suave hacia el producto del mes: la seccion cuenta el uso, este
   link cierra el circulo sin competir con el CTA principal del hero. */
.clientes__cta {
  margin-top: var(--sp-6);
  display: inline-flex; align-items: center; gap: var(--sp-2);
  width: auto;
}
.clientes__cta svg { width: 17px; height: 17px; transition: transform .3s var(--ease-out); }
.clientes__cta:hover svg { transform: translateX(4px); }

/* La foto: marco con overflow para el zoom sutil y el barrido de luz. */
.clientes__foto {
  margin: 0; position: relative;
  border-radius: var(--r-xl); overflow: hidden;
}
.clientes__foto img {
  width: 100%; height: auto; border-radius: var(--r-xl);
  transition: transform .8s var(--ease-out);
}
.clientes__foto:hover img { transform: scale(1.035); }
/* Barrido de luz al entrar en pantalla: una sola pasada, no un loop. */
.clientes__foto::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.42) 50%, transparent 62%);
  transform: translateX(-120%);
  pointer-events: none;
}
.clientes__foto[data-reveal].visible::after { animation: clientes-brillo 1.1s var(--ease-out) .35s 1; }
@keyframes clientes-brillo { to { transform: translateX(120%); } }

.clientes__badge {
  position: absolute; left: var(--sp-4); bottom: var(--sp-4);
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--text-xs); font-weight: 600; color: var(--c-ink);
  box-shadow: var(--shadow-sm);
}
.clientes__badge-punto {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-accent);
  animation: clientes-pulso 2.4s var(--ease-out) infinite;
}
@keyframes clientes-pulso {
  0%, 100% { box-shadow: 0 0 0 0 var(--c-accent-glow); }
  50%      { box-shadow: 0 0 0 6px rgba(27, 107, 76, 0); }
}

@media (max-width: 900px) {
  .clientes__inner { grid-template-columns: 1fr; }
}
/* La foto a media altura en vez de cuadrada: a ancho de pantalla
   completo, 1200×1200 se veía enorme y empujaba el resto muy abajo. */
@media (max-width: 900px) {
  .clientes__foto img { aspect-ratio: 16 / 11; object-fit: cover; }
}
@media (max-width: 560px) {
  .clientes__cta { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .clientes__stat, .clientes__icono, .clientes__foto img, .clientes__cta svg { transition: none; }
  .clientes__texto[data-reveal] .clientes__stat { opacity: 1; transform: none; transition: none; }
  .clientes__foto[data-reveal].visible::after { animation: none; }
  .clientes__badge-punto { animation: none; }
}

/* ============================================================
   LOGO MERCADO PAGO — checkout, ficha y footer
   Archivo oficial en assets/img/marcas/mercadopago.png
   (mercadopago.com.ar/mp/logo-oficial). Se respeta el área libre
   alrededor del logo: nada pegado a sus bordes.
   ============================================================ */
.pago-opcion--mp .pago-opcion__marcas img { display: block; height: 20px; width: auto; }

.ficha__cuotas {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2);
  margin-top: var(--sp-2); font-size: var(--text-sm); color: var(--c-ink-mid);
}
.ficha__cuotas img { display: block; height: 22px; width: auto; }

.footer__pago-chip--mp { width: auto; padding: 0 8px; background: #fff; display: flex; align-items: center; }
.footer__pago-chip--mp img { display: block; height: 18px; width: auto; }

.pdm__pago {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2);
  margin-top: var(--sp-2); font-size: var(--text-sm); color: var(--c-ink-mid);
}
.pdm__pago img { display: block; height: 22px; width: auto; }

/* ============================================================
   PRODUCTO DEL MES — video dentro de la galería
   ============================================================ */
.pdm__media [hidden] { display: none !important; }
.pdm__video { display: block; background: #000; }
.pdm__thumb { position: relative; }
.pdm__thumb video {
  display: block; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none;
}
.pdm__thumb-play {
  position: absolute; inset: 0; margin: auto;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(15, 23, 42, .62); color: #fff;
  pointer-events: none;
}
.pdm__thumb-play svg { width: 14px; height: 14px; margin-left: 2px; }
/* ---------- Reseñas en la ficha de producto ----------
   Prefijo prod-resenas__ para no chocar con las clases .resenas* /
   .estrellas que ya usa el bloque de testimonios de Google del home. */
.prod-resenas__head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;
  gap: var(--sp-6); margin-bottom: var(--sp-8);
}
.prod-resenas__resumen { display: flex; align-items: center; gap: var(--sp-3); }
.prod-resenas__promedio { font-family: var(--f-display); font-size: var(--text-4xl); font-weight: 800; line-height: 1; }
.prod-resenas__resumen > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.prod-resenas__estrellas { display: flex; gap: 2px; }
.prod-resenas__total { font-size: var(--text-sm); color: var(--c-ink-mid); }

.prod-resenas__estrella { width: 18px; height: 18px; color: var(--c-border-light); display: inline-flex; }
.prod-resenas__estrella svg { width: 100%; height: 100%; }
.prod-resenas__estrella.is-activa { color: #F5A623; }
.prod-resenas__estrellas-fila { display: flex; gap: 2px; margin-bottom: var(--sp-3); }
.prod-resenas__estrellas-fila .prod-resenas__estrella { width: 16px; height: 16px; }

.prod-resenas__lista {
  display: grid; gap: var(--sp-5);
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.prod-resenas__card {
  background: var(--c-base-900); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); padding: var(--sp-5);
}
.prod-resenas__card-texto { color: var(--c-ink); line-height: 1.6; margin-bottom: var(--sp-3); }
.prod-resenas__card-autor { font-size: var(--text-sm); color: var(--c-ink-mid); font-weight: 600; }

/* ============================================================
   CHECKOUT — CABECERA PROPIA (lote 1)
   La navbar del sitio es transparente: está pensada para el hero verde
   del home, que se mete por detrás. En el checkout el fondo es #F8F9FA
   y el logo y el burger son blancos, así que quedaban invisibles hasta
   scrollear 20px. Acá va cabecera sólida, logo invertido y cero enlaces
   de fuga: en el checkout cada enlace del menú era una salida.
   ============================================================ */
.checkout-head {
  position: sticky; top: 0; z-index: 900;
  background: #fff;
  border-bottom: 1px solid var(--c-border);
}
.checkout-head__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); padding-block: var(--sp-4);
}
/* logo.webp es blanco con transparencia: sobre fondo claro hay que invertirlo. */
.checkout-head__logo img {
  height: clamp(22px, 2.4vw, 30px); width: auto; display: block;
  filter: brightness(0);
}
.checkout-head__seguro {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--text-xs); font-weight: 600; color: var(--c-ink-mid);
}
.checkout-head__seguro svg { width: 15px; height: 15px; color: var(--c-accent); }

/* ---------- error de la pasarela (lote 1) ----------
   Un fallo al abrir Mercado Pago se muestra en pantalla con las dos
   salidas explícitas, en vez de cambiar el método de pago en silencio. */
.pago-error {
  margin-top: var(--sp-4); padding: var(--sp-4);
  border: 1.5px solid var(--c-error-borde); border-radius: var(--r-md);
  background: var(--c-error-fondo);
}
.pago-error[hidden] { display: none; }
.pago-error__txt { font-size: var(--text-sm); color: var(--c-ink); margin-bottom: var(--sp-3); }
.pago-error__acciones { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.pago-error__acciones .btn-primary,
.pago-error__acciones .btn-ghost { flex: 1 1 12rem; padding-inline: var(--sp-5); }

/* .pago-opcion es display:flex y le gana al display:none de [hidden]. */
.pago-opcion[hidden] { display: none; }

/* ---------- footer reducido (lote 1) ---------- */
.footer--checkout { padding-block: var(--sp-8); }
.footer--checkout .footer__pagos { margin-top: 0; padding-top: 0; border-top: none; }
.footer__checkout-links {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
  margin-top: var(--sp-6); font-size: var(--text-sm);
}
.footer__checkout-links a { color: rgba(242, 250, 238, .68); transition: color .2s; }
.footer__checkout-links a:hover { color: var(--c-verde-claro); }

/* ============================================================
   CHECKOUT — VALIDACIÓN, ENVÍOS Y PERSISTENCIA (lote 2)
   Tokens propios del estado de error: el rojo estaba hardcodeado en un
   solo lugar (.campo--error) y ahora lo usan cuatro componentes.
   ============================================================ */
:root {
  --c-error-texto: #C0392B;
  --c-error-borde: #E5484D;
  --c-error-fondo: rgba(229, 72, 77, .06);
}

/* El mensaje va bajo su campo y ocupa lugar sólo cuando existe: el
   formulario no puede saltar cada vez que aparece o desaparece uno. */
.campo__error {
  font-size: var(--text-xs); color: var(--c-error-texto);
  line-height: 1.45; margin-top: 2px;
}
.campo__error[hidden] { display: none; }

.campo input[aria-invalid="true"],
.campo select[aria-invalid="true"] { border-color: var(--c-error-borde); }
.campo input[aria-invalid="true"]:focus,
.campo select[aria-invalid="true"]:focus {
  border-color: var(--c-error-borde);
  box-shadow: 0 0 0 3px var(--c-error-fondo);
}

/* Estado de fallo de /api/envios: sin regiones no hay forma de elegir
   despacho, así que el error tiene que ser visible y accionable en vez
   de dejar al usuario con un select vacío. */
.envios-error {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-4); padding: var(--sp-4);
  border: 1.5px solid var(--c-error-borde); border-radius: var(--r-md);
  background: var(--c-error-fondo);
  font-size: var(--text-sm);
}
.envios-error[hidden] { display: none; }
.envios-error p { flex: 1 1 14rem; color: var(--c-ink); }
.envios-error .btn-ghost { padding-inline: var(--sp-5); }

/* El título "Forma de entrega" necesita el mismo aire que el de pago:
   antes el bloque lo inyectaba el JS y heredaba el margen del de al lado. */
.checkout__titulo--entrega { margin-top: var(--sp-8); }

/* Precio del despacho dentro de cada opción de entrega: el monto pesa
   más que la descripción, así que va en mono y en el acento. */
.pago-opcion__precio {
  margin-left: auto; flex-shrink: 0;
  font-family: var(--f-mono); font-size: var(--text-sm); font-weight: 700;
  color: var(--c-accent);
}
.pago-opcion__precio--gratis { color: var(--c-accent); }

/* Aviso de datos recuperados + salida para equipos compartidos. */
.checkout__restaurado {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-3);
  font-size: var(--text-xs); color: var(--c-ink-mid);
}
.checkout__restaurado[hidden] { display: none; }
.checkout__limpiar {
  color: var(--c-accent); font-weight: 600; text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 900px) {
  .footer__checkout-links a { display: inline-block; padding-block: var(--sp-2); }

  /* El sello de seguridad vivía sólo en la columna derecha, que bajo
     900px está oculta: en móvil no quedaba ninguna señal de pago seguro. */
  .checkout__barra-movil { flex-wrap: wrap; }
  .checkout__barra-movil-seguro {
    flex-basis: 100%; order: 3;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    font-size: var(--text-xs); color: var(--c-ink-dim);
    margin-top: var(--sp-2);
  }
  .checkout__barra-movil-seguro svg { width: 13px; height: 13px; color: var(--c-accent); }

  

  /* El toast salía por debajo de la barra fija de pago. */
  .checkout-page .toast { bottom: calc(7.5rem + env(safe-area-inset-bottom)); }
}

@media (max-width: 420px) {
  .checkout-head__seguro span { display: none; }
}

/* ---------- resumen: estado "actualizando" (lote 3) ----------
   Los +/- salen a revalidar contra el servidor. Sin ninguna señal, en una
   conexión lenta el resumen se veía idéntico mientras cambiaba por debajo.
   Sólo se atenúan los totales: los productos no se mueven. */
.resumen-caja[aria-busy="true"] .resumen-totales {
  opacity: .5;
  transition: opacity .15s var(--ease-out);
}
/* ============================================================
   AVISO DE PEDIDO SIN PAGAR (lote 4)
   Barra en flujo normal, arriba del header: el hero del home se mete por
   debajo del navbar con margen negativo, así que esto no puede ir dentro
   de <main>. Ámbar y no rojo: no es un error, es una compra a medias que
   todavía se puede terminar.
   ============================================================ */
.pendiente {
  background: #7A4A00;
  color: #FFF6E5;
  font-size: var(--text-sm);
}
.pendiente__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--sp-3);
  padding-block: var(--sp-3);
}
.pendiente__txt { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: baseline; }
.pendiente__titulo { font-weight: 700; }
.pendiente__detalle { color: rgba(255, 246, 229, .8); font-size: var(--text-xs); }

.pendiente__acciones { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pendiente__retomar {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--sp-2) var(--sp-5);
  background: #FFF6E5; color: #7A4A00;
  border-radius: var(--r-md); font-weight: 700; font-size: var(--text-xs);
  transition: background .2s;
}
.pendiente__retomar:hover { background: #fff; }
.pendiente__retomar[hidden] { display: none; }
.pendiente__cancelar {
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid rgba(255, 246, 229, .4); border-radius: var(--r-md);
  color: rgba(255, 246, 229, .9); font-size: var(--text-xs); font-weight: 600;
  transition: border-color .2s, color .2s;
}
.pendiente__cancelar:hover { border-color: #FFF6E5; color: #fff; }
.pendiente__cancelar[disabled] { opacity: .6; cursor: progress; }

@media (max-width: 640px) {
  .pendiente__inner { flex-direction: column; align-items: stretch; }
  .pendiente__acciones { justify-content: space-between; }
  .pendiente__retomar, .pendiente__cancelar { flex: 1 1 auto; min-height: 40px; }
}

/* ============================================================
   ENVÍO VISIBLE ANTES DEL CHECKOUT (lote 5)
   El costo del despacho puede ser la mitad del precio de un producto de
   $6.990. Enterarse recién en el checkout, con el formulario lleno, es
   la primera causa de abandono: acá se ve en la ficha y en el carrito.
   ============================================================ */

/* ---------- selector de región en el carrito ---------- */
.drawer__region {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  font-size: var(--text-xs); color: var(--c-ink-mid);
}
.drawer__region > span { flex-shrink: 0; font-weight: 600; }
.drawer__region select {
  flex: 1; min-width: 0; min-height: 40px;
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--f-sans); font-size: var(--text-sm); color: var(--c-ink);
  background: #fff;
  border: 1.5px solid var(--c-border-light); border-radius: var(--r-md);
  transition: border-color .2s, box-shadow .2s;
}
.drawer__region select:focus {
  outline: none; border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-muted);
}
.drawer__region select[disabled] { opacity: .6; cursor: progress; }

.drawer__plazo {
  font-size: var(--text-xs); color: var(--c-accent); font-weight: 600;
  text-align: right; margin-top: var(--sp-1);
}

/* ---------- estimador en la ficha de producto ---------- */
.ficha__envio {
  display: grid; gap: var(--sp-2);
  margin-top: var(--sp-6); padding: var(--sp-4);
  background: var(--c-base-900);
  border: 1px solid var(--c-border); border-radius: var(--r-md);
}
.ficha__envio[hidden] { display: none; }
.ficha__envio-label { font-size: var(--text-xs); font-weight: 700; color: var(--c-ink); }
.ficha__envio-select {
  width: 100%; min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--f-sans); font-size: var(--text-sm); color: var(--c-ink);
  background: #fff;
  border: 1.5px solid var(--c-border-light); border-radius: var(--r-md);
  transition: border-color .2s, box-shadow .2s;
}
.ficha__envio-select:focus {
  outline: none; border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-muted);
}
.ficha__envio-txt { font-size: var(--text-sm); color: var(--c-ink-mid); line-height: 1.5; }
.ficha__envio-txt--gratis { color: var(--c-accent); font-weight: 600; }

/* ============================================================
   PUNTO DE RETIRO EN EL CHECKOUT (lote 6)
   Aparece sólo con "retiro en Punto Blue". El bloque lo dibuja el JS
   según la región: lista si esa región tiene puntos cargados, campo de
   texto con el buscador de blue.cl si todavía no.
   ============================================================ */
.retiro { margin-top: var(--sp-4); }
.retiro[hidden] { display: none; }
.retiro__aviso {
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-base-800);
  border-radius: var(--r-md);
  font-size: var(--text-sm); color: var(--c-ink-mid);
}
.retiro__ayuda { font-size: var(--text-xs); color: var(--c-ink-dim); line-height: 1.5; margin-top: 2px; }
.retiro__ayuda a { color: var(--c-accent); text-decoration: underline; }

/* ============================================================
   MODO DE USO — escenario fijo con fundido entre pasos
   Inspirado en las fichas de producto de Apple: una sola imagen
   grande, texto corto al lado y un indicador segmentado que avanza
   solo. Nada de carril horizontal: el orden de los pasos importa y
   se lee mejor de a uno.
   ============================================================ */
.modo { padding-block: var(--section-y); background: var(--c-base-900); }

.modo__head { max-width: 46rem; margin-bottom: var(--sp-10); }
.modo__titulo { margin-top: var(--sp-2); }
.modo__sub {
  margin-top: var(--sp-3);
  font-size: var(--text-base); color: var(--c-ink-mid); line-height: 1.6;
}

.modo__escena {
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
}

/* ---- visor ---- */
.modo__visor {
  position: relative;
  aspect-ratio: 462 / 411;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--c-base-800);
  border: 1px solid var(--c-border);
}
/* Las figuras se apilan y solo cambia la opacidad: el fundido cruzado
   no mueve el layout, asi que no hay saltos ni reflow entre pasos. */
.modo__figura {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; transform: scale(1.03);
  transition: opacity .6s var(--ease-out), transform .9s var(--ease-out);
  will-change: opacity, transform;
}
.modo__figura.is-activa { opacity: 1; transform: none; }
.modo__img { width: 100%; height: 100%; object-fit: cover; }

.modo__flecha {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(10px);
  border: 1px solid var(--c-border);
  color: var(--c-ink);
  opacity: 0;
  transition: opacity .25s var(--ease-out), background .25s, transform .25s var(--ease-out);
}
.modo__flecha svg { width: 18px; height: 18px; }
.modo__flecha--prev { left: var(--sp-3); }
.modo__flecha--next { right: var(--sp-3); }
.modo__flecha:hover { background: #fff; }
.modo__flecha--prev:hover { transform: translateY(-50%) translateX(-2px); }
.modo__flecha--next:hover { transform: translateY(-50%) translateX(2px); }
/* Las flechas aparecen cuando hay intencion: mouse encima o foco de
   teclado. En tactil el gesto es el swipe, no el boton. */
.modo__visor:hover .modo__flecha,
.modo__flecha:focus-visible { opacity: 1; }

/* ---- texto ---- */
/* Grid de dos filas: los pasos comparten la primera celda (por eso el
   alto lo fija el texto mas largo y el bloque no salta al cambiar de
   paso) y las barras ocupan la segunda. */
.modo__texto { display: grid; grid-template-rows: auto auto; }

.modo__paso {
  grid-area: 1 / 1;
  opacity: 0; transform: translateY(10px);
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
  pointer-events: none;
}
.modo__paso.is-activa { opacity: 1; transform: none; pointer-events: auto; }

.modo__num {
  font-family: var(--f-mono); font-size: var(--text-sm); font-weight: 700;
  color: var(--c-accent); letter-spacing: .08em;
}
.modo__paso-titulo {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700;
  letter-spacing: -.02em; line-height: 1.2;
  color: var(--c-ink); margin-top: var(--sp-2);
}
.modo__paso-texto {
  margin-top: var(--sp-3);
  font-size: var(--text-base); color: var(--c-ink-mid); line-height: 1.65;
  max-width: 34ch;
}

/* ---- barras segmentadas ---- */
.modo__barras {
  grid-area: 2 / 1;
  display: flex; gap: var(--sp-2);
  margin-top: var(--sp-8);
}
.modo__barra {
  position: relative; flex: 1;
  height: 3px; border-radius: var(--r-pill);
  background: var(--c-border-light);
  padding: 0;
  transition: background .3s;
}
/* Area de toque real sin engordar la barra: en movil 3px de alto es
   imposible de apretar. */
.modo__barra::before {
  content: ''; position: absolute; inset: -12px 0;
}
.modo__barra:hover { background: rgba(var(--c-accent-rgb), .3); }
.modo__barra-relleno {
  display: block; height: 100%; width: 0;
  border-radius: inherit; background: var(--c-accent);
}
/* Los pasos ya vistos quedan llenos: la fila de barras cuenta el
   avance completo, no solo el paso actual. */
.modo__barra.is-vista .modo__barra-relleno { width: 100%; }
@keyframes modo-avance { from { width: 0; } to { width: 100%; } }
/* Sin autoplay (pausado o reduced-motion) el paso activo igual se
   marca lleno, para que el indicador nunca quede en blanco. */
.modo__barra.is-activa .modo__barra-relleno { width: 100%; }

@media (max-width: 860px) {
  .modo__escena { grid-template-columns: 1fr; gap: var(--sp-6); }
  .modo__head { margin-bottom: var(--sp-8); }
  .modo__paso-texto { max-width: none; }
  .modo__barras { margin-top: var(--sp-6); }
  /* En tactil no hay hover: las flechas se quedan fuera y manda el swipe. */
  .modo__flecha { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .modo__figura, .modo__paso, .modo__flecha { transition: none; }
  .modo__figura { transform: none; }
  .modo__barra-relleno { animation: none !important; }
}

/* ============================================================
   RESUMEN DEL CHECKOUT PLEGABLE
   Cerrado por defecto. El botón muestra unidades y total para que
   el dato clave siga a la vista. Animación con grid-rows 0fr → 1fr:
   no necesita medir alturas en JS.
   ============================================================ */
.resumen-toggle {
  width: 100%;
  display: flex; align-items: center; gap: var(--sp-3);
  background: #fff; border: 1px solid var(--c-border-light);
  border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5);
  text-align: left; cursor: pointer;
  transition: border-color .2s, box-shadow .2s, border-radius .2s;
}
.resumen-toggle:hover { border-color: var(--c-accent-muted); box-shadow: var(--shadow-sm); }
.resumen-toggle:focus-visible { outline: 2px solid var(--c-border-focus); outline-offset: 2px; }
.resumen-toggle__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.resumen-toggle__accion { font-size: var(--text-sm); font-weight: 700; color: var(--c-accent); }
.resumen-toggle__n { font-size: var(--text-xs); color: var(--c-ink-mid); }
.resumen-toggle__total { font-family: var(--f-display); font-weight: 800; font-size: var(--text-lg); white-space: nowrap; }
.resumen-toggle__flecha { width: 20px; height: 20px; color: var(--c-ink-mid); flex-shrink: 0; transition: transform .3s var(--ease-out); }
.resumen-toggle[aria-expanded="true"] { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom-color: transparent; }
.resumen-toggle[aria-expanded="true"] .resumen-toggle__flecha { transform: rotate(180deg); }

.resumen-plegable {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .35s var(--ease-out);
}
.resumen-plegable.abierto { grid-template-rows: 1fr; }
.resumen-plegable__inner { min-height: 0; overflow: hidden; }
.resumen-plegable .resumen-caja { border-top-left-radius: 0; border-top-right-radius: 0; border-top: none; }

@media (max-width: 900px) {
  .resumen-toggle { padding: var(--sp-3) var(--sp-4); }
}
@media (prefers-reduced-motion: reduce) {
  .resumen-plegable, .resumen-toggle__flecha { transition: none; }
}

/* ============================================================
   SLIDERS MÓVILES — confianza (.trust) y momentos de uso
   (.clientes__stats). Scroll nativo con snap + puntos. El
   autoplay de .clientes__stats lo maneja assets/js/sliders.js.
   ============================================================ */
.slider-dots { display: none; }

@media (max-width: 900px) {
  .trust,
  .clientes__stats {
    display: flex; position: relative;
    gap: var(--sp-3);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-block: 2px;
  }
  .trust::-webkit-scrollbar,
  .clientes__stats::-webkit-scrollbar { display: none; }

  .trust__item,
  .clientes__stat {
    flex: 0 0 88%;
    scroll-snap-align: start;
  }
  .clientes__stat:hover { transform: none; }

  .slider-dots {
    display: flex; justify-content: center; gap: 6px;
    margin-top: var(--sp-3);
  }
  .slider-dots__dot {
    width: 7px; height: 7px; padding: 0; border: 0;
    border-radius: var(--r-pill);
    background: var(--c-border-light);
    cursor: pointer;
    transition: width .3s var(--ease-out), background .3s;
  }
  .slider-dots__dot[aria-current="true"] { width: 20px; background: var(--c-accent); }
}
@media (prefers-reduced-motion: reduce) {
  .slider-dots__dot { transition: none; }
}

/* ============================================================
   PRODUCTO DEL MES — "Comprar ahora" + "Agregar al carrito"
   Comprar ahora = acción principal (ancho completo).
   Agregar al carrito = secundaria con borde, no compite.
   ============================================================ */
.pdm__acciones .pdm__comprar { flex: 1 1 100%; }
.pdm__agregar {
  flex: 1 1 200px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--sp-3) var(--sp-6);
  border: 1.5px solid var(--c-accent); border-radius: var(--r-md);
  background: #fff; color: var(--c-accent);
  font-weight: 700; font-size: var(--text-sm);
  cursor: pointer;
  transition: background .25s, transform .2s var(--ease-spring);
}
.pdm__agregar:hover { background: var(--c-accent-muted); transform: translateY(-2px); }
.pdm__agregar:focus-visible { outline: 2px solid var(--c-border-focus); outline-offset: 2px; }

@media (max-width: 860px) {
  .pdm__agregar { flex: 1 1 100%; padding-block: var(--sp-3); }
  .pdm__agregar:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pdm__agregar { transition: none; }
}

/* ============================================================
   PRODUCTO DEL MES — imagen completa, sin recorte
   Las fotos de proveedor vienen en proporciones distintas (1:1,
   4:3, collages): con cover se cortaban. contain + fondo blanco
   muestra siempre el producto entero; el padding superior deja
   aire para que el badge de descuento no tape la foto.
   Los videos siguen en cover: son escenas, no fotos de producto.
   ============================================================ */
.pdm__media { background: #fff; }
.pdm__img:not(.pdm__video) {
  object-fit: contain;
  padding: clamp(2.75rem, 5vw, 3.5rem) var(--sp-5) var(--sp-5);
  border-radius: 0;
}
.pdm__video { object-fit: cover; padding: 0; }

/* En móvil, 4:3 en vez de 16:10: con contain, un marco tan apaisado
   dejaba la foto chica y con franjas vacías a los lados. */
@media (max-width: 640px) {
  .pdm__media { aspect-ratio: 4 / 3; }
  .pdm__img:not(.pdm__video) { padding: var(--sp-10) var(--sp-3) var(--sp-3); }
}

/* ============================================================
   SLIDERS MÓVILES v2 — una tarjeta completa por vez (sin la
   siguiente asomando cortada) + barra de progreso en el punto
   activo que marca cuándo avanza. Reemplaza el ancho 88%.
   ============================================================ */
@media (max-width: 900px) {
  .trust,
  .clientes__stats {
    margin-inline: 0;
    padding-inline: 0;
    scroll-padding-inline: 0;
    gap: var(--sp-4);
  }
  .trust__item,
  .clientes__stat { flex: 0 0 100%; }

  .trust__item { padding: var(--sp-4) var(--sp-5); min-height: 96px; }
  .trust__title { font-size: var(--text-base); margin-bottom: 2px; }
  .trust__text { font-size: var(--text-xs); line-height: 1.45; }

  /* El <button> es el área táctil (24px de alto, mínimo recomendado) y
     va transparente; el punto visible se dibuja con ::after y el relleno
     de progreso con ::before encima. Antes el botón medía 8px y el área
     extra salía de un pseudo-elemento que Lighthouse no cuenta. */
  .slider-dots { gap: 0; margin-top: var(--sp-2); }
  .slider-dots__dot {
    position: relative;
    width: 24px; height: 24px;
    background: none;
    transition: width .3s var(--ease-out);
  }
  .slider-dots__dot::after,
  .slider-dots__dot[aria-current="true"]::before {
    content: ''; position: absolute; left: 50%; top: 50%;
    translate: -50% -50%;
    height: 8px; border-radius: var(--r-pill);
  }
  .slider-dots__dot::after {
    width: 8px;
    background: var(--c-border-light);
    transition: width .3s var(--ease-out), background .3s;
  }
  .slider-dots__dot[aria-current="true"] { width: 36px; background: none; }
  .slider-dots__dot[aria-current="true"]::after {
    width: 28px;
    background: var(--c-accent-muted);
  }
  /* relleno que avanza mientras corre el tiempo de la tarjeta */
  .slider-dots__dot[aria-current="true"]::before {
    width: 28px; z-index: 1;
    background: var(--c-accent);
    transform-origin: left;
    animation: slider-progreso var(--slider-ms, 4000ms) linear forwards;
  }
  .slider-dots.pausado .slider-dots__dot[aria-current="true"]::before,
  .slider-dots:not(.autoplay) .slider-dots__dot[aria-current="true"]::before {
    animation: none; transform: none;
  }
}
@keyframes slider-progreso { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .slider-dots__dot[aria-current="true"]::before { animation: none; transform: none; }
  .slider-dots__dot, .slider-dots__dot::after { transition: none; }
}

/* ============================================================
   PACK DE 2 UNIDADES
   Selector en la ficha (1 unidad / pack) y la oferta de "lleva 2" en el
   carrito y el checkout. El descuento lo calcula el servidor por
   cantidad; esto solo fija cuántas se llevan.
   ============================================================ */
.ficha__pack { border: 0; display: grid; gap: var(--sp-2); }
.ficha__pack-op {
  position: relative;
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 60px; padding: var(--sp-3) var(--sp-4);
  border: 1.5px solid var(--c-border-light); border-radius: var(--r-md);
  background: var(--c-base-950);
  cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.ficha__pack-op:hover { border-color: var(--c-border-focus); }
.ficha__pack-op.is-activa {
  border-color: var(--c-accent);
  background: var(--c-verde-lavado);
}
.ficha__pack-op input {
  position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none;
}
.ficha__pack-op:has(input:focus-visible) {
  outline: 2px solid var(--c-border-focus); outline-offset: 2px;
}
.ficha__pack-radio {
  flex-shrink: 0; width: 18px; height: 18px;
  border: 2px solid var(--c-border-light); border-radius: 50%;
  transition: border-color .2s, box-shadow .2s;
}
.ficha__pack-op.is-activa .ficha__pack-radio {
  border-color: var(--c-accent);
  box-shadow: inset 0 0 0 3px var(--c-base-950), inset 0 0 0 9px var(--c-accent);
}
.ficha__pack-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: var(--text-sm); }
.ficha__pack-sub { color: var(--c-ink-mid); font-size: var(--text-xs); }
.ficha__pack-precio {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  font-family: var(--f-display); font-weight: 800; font-size: var(--text-base);
  white-space: nowrap;
}
.ficha__pack-ahorro {
  font-family: var(--f-mono); font-size: var(--text-xs); font-weight: 700;
  color: var(--c-accent); background: var(--c-accent-muted);
  padding: 1px var(--sp-2); border-radius: var(--r-pill);
}

.pack-oferta {
  display: inline-flex; align-items: center;
  min-height: 34px; margin-top: var(--sp-2); padding: var(--sp-1) var(--sp-3);
  border: 1px dashed var(--c-accent); border-radius: var(--r-pill);
  color: var(--c-accent); background: var(--c-accent-muted);
  font-size: var(--text-xs); font-weight: 600; text-align: left;
  transition: background-color .2s;
}
.pack-oferta:hover { background: rgba(var(--c-accent-rgb), .16); }
.pack-oferta[hidden] { display: none; }
.cart-item__pack-ok { color: var(--c-accent); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .ficha__pack-op, .ficha__pack-radio, .pack-oferta { transition: none; }
}

/* ============================================================
   AUDITORÍA DE CONVERSIÓN — OCT 2026
   Ajustes de la ficha y del menú móvil para el tráfico de anuncios
   (casi todo celular desde Instagram/Facebook).
   ============================================================ */

/* Carrito y menú móvil cerrados: los dos paneles quedaban justo fuera
   de pantalla con su sombra de 56px de difuminado asomando por el borde
   derecho — una franja gris de arriba abajo en todas las páginas que lo
   cargan, que se lee como sitio roto. Cerrados ahora quedan ocultos de
   verdad (sin sombra y fuera del orden de tabulación); al abrir,
   visibility vuelve al instante y el deslizamiento es el mismo de
   siempre. */
.drawer {
  visibility: hidden;
  transition: transform .35s var(--ease-out), visibility 0s linear .35s;
}
.drawer.open {
  visibility: visible;
  transition: transform .35s var(--ease-out), visibility 0s;
}
@media (max-width: 900px) {
  .navbar__nav {
    visibility: hidden;
    transition: transform .35s var(--ease-out), visibility 0s linear .35s;
  }
  .navbar__nav.open {
    visibility: visible;
    transition: transform .35s var(--ease-out), visibility 0s;
  }
}

/* Primera pantalla de la ficha en móvil: la miga y el rótulo de
   categoría ocupaban ~90px antes de llegar al precio. Las migas siguen
   en el JSON-LD (Google las lee igual); en pantalla no ayudan a quien
   llega desde un anuncio. */
@media (max-width: 640px) {
  .miga { display: none; }
  .ficha { padding-top: var(--sp-3); }
  .ficha__inner { gap: var(--sp-5); }
  .ficha__categoria { display: none; }
  .ficha__sub { margin-top: var(--sp-2); font-size: var(--text-base); }
  .ficha__precios { margin-top: var(--sp-4); }
}

/* Bullets debajo de las garantías: ya no abren bloque con borde
   (la fila de garantías trae el suyo). */
.ficha__bullets--abajo { border-top: 0; padding-top: 0; }

/* "· Envío gratis" junto al precio de la barra fija */
.barra-compra__envio {
  font-family: var(--f-sans); font-weight: 600; font-size: var(--text-xs);
  color: var(--c-accent);
}
.barra-compra__envio[hidden] { display: none; }

/* --- dudas antes de comprar (producto.js → renderDudas) --- */
.dudas { padding-block: var(--sp-8) var(--sp-10); }
.dudas .container { max-width: 760px; }
.dudas__titulo {
  font-family: var(--f-display); font-weight: 800;
  font-size: var(--text-xl); letter-spacing: -.01em;
  margin-bottom: var(--sp-4);
}
.dudas__lista { border-top: 1px solid var(--c-border); }
.dudas__item { border-bottom: 1px solid var(--c-border); }
.dudas__pregunta {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  min-height: 52px; padding-block: var(--sp-3);
  font-weight: 600; color: var(--c-ink); cursor: pointer;
  list-style: none;
}
.dudas__pregunta::-webkit-details-marker { display: none; }
.dudas__pregunta::after {
  content: "+"; flex: none;
  font-family: var(--f-mono); font-size: var(--text-lg); color: var(--c-accent);
  transition: transform .2s var(--ease-out);
}
.dudas__item[open] .dudas__pregunta::after { transform: rotate(45deg); }
.dudas__pregunta:focus-visible { outline: 2px solid var(--c-border-focus); outline-offset: 2px; }
.dudas__respuesta {
  padding-bottom: var(--sp-4);
  color: var(--c-ink-mid); font-size: var(--text-sm); line-height: 1.65;
}
.dudas__wa {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 44px; margin-top: var(--sp-5);
  font-size: var(--text-sm); font-weight: 600; color: var(--c-accent);
}
.dudas__wa img { width: 20px; height: 20px; }
.dudas__wa:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .dudas__pregunta::after { transition: none; } }

/* --- barra de confianza bajo el nombre (producto.js → barraConfianza) ---
   Con reseñas reales: estrellas + promedio + total, enlazado a las
   opiniones. Sin reseñas: hechos de la tienda en una línea. */
.ficha__rating {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2);
  min-height: 32px; margin-top: var(--sp-3);
  font-size: var(--text-sm); color: var(--c-ink-mid);
}
.ficha__rating .prod-resenas__estrella { width: 17px; height: 17px; }
.ficha__rating-nota { color: var(--c-ink); font-weight: 700; }
.ficha__rating-total { text-decoration: underline; text-underline-offset: 3px; }
.ficha__rating:hover .ficha__rating-total { color: var(--c-accent); }
.ficha__rating:focus-visible { outline: 2px solid var(--c-border-focus); outline-offset: 3px; border-radius: var(--r-sm); }

.ficha__confianza {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-3);
  font-size: var(--text-xs); font-weight: 600; color: var(--c-ink-mid);
}
.ficha__confianza li { display: inline-flex; align-items: center; gap: 6px; }
.ficha__confianza-icono { display: inline-flex; color: var(--c-accent); }
.ficha__confianza-icono svg { width: 15px; height: 15px; }

/* --- pack de 2 destacado (producto.js → selectorPack) ---
   Sello arriba a la derecha, montado sobre el borde; la opción gana
   aire arriba para que el sello no tape el texto. No se preselecciona. */
.ficha__pack { padding-top: var(--sp-2); }
.ficha__pack-op--destacado { margin-top: var(--sp-2); padding-top: var(--sp-4); border-color: var(--c-accent); }
.ficha__pack-sello {
  position: absolute; top: 0; right: var(--sp-4); transform: translateY(-50%);
  padding: 2px var(--sp-3); border-radius: var(--r-pill);
  background: var(--c-accent); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .02em; line-height: 1.6;
  white-space: nowrap; pointer-events: none;
}
.ficha__pack-uso { color: var(--c-accent); font-size: var(--text-xs); font-weight: 600; margin-top: 2px; line-height: 1.35; }
/* En celulares muy angostos "· Envío gratis" partía la barra fija en dos
   líneas; ahí ya lo dice la nota bajo el botón. */
@media (max-width: 360px) { .barra-compra__envio { display: none; } }

/* ============================================================
   PRODUCTO DEL MES — CARRUSEL MÓVIL (app.js → carruselPDM)
   Hasta 820 px la foto grande + miniaturas se reemplaza por un
   carrusel 4:5 a todo el ancho de la tarjeta: se pasa con el dedo,
   con contador arriba y puntos abajo. Fotos de escena en cover;
   formato pensado: vertical 1080x1350.
   ============================================================ */
.pdm__carrusel { display: none; }

@media (max-width: 820px) {
  .pdm__media,
  .pdm__galeria { display: none; }

  /* De borde a borde de la tarjeta: .pdm__inner trae el padding lateral
     de .container (--gutter); se compensa para que la foto toque los
     bordes y tome las esquinas redondeadas de la tarjeta, como en
     Instagram. */
  .pdm__carrusel { display: block; position: relative; margin-inline: calc(var(--gutter) * -1); }

  .pdm__pista {
    display: flex;
    aspect-ratio: 4 / 5;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    background: var(--c-base-800);
  }
  .pdm__pista::-webkit-scrollbar { display: none; }
  .pdm__pista:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; }

  .pdm__slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
  .pdm__slide-media {
    display: block; width: 100%; height: 100%;
    object-fit: cover; object-position: center;
  }

  .pdm__contador {
    position: absolute; top: var(--sp-3); right: var(--sp-3);
    padding: 3px 10px; border-radius: var(--r-pill);
    background: rgba(11, 42, 32, .82); color: #fff;
    font-size: var(--text-xs); font-weight: 600;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
  }

  /* Puntos: el botón mide 24px de alto para que sea fácil de tocar; lo
     que se ve es la píldora dibujada con ::before. */
  .pdm__dots {
    display: flex; justify-content: center; gap: 2px;
    padding-top: var(--sp-2);
  }
  .pdm__dot {
    display: grid; place-items: center;
    width: 24px; height: 24px; padding: 0;
    border: 0; background: transparent; cursor: pointer;
  }
  .pdm__dot::before {
    content: ""; display: block;
    width: 8px; height: 8px; border-radius: var(--r-pill);
    background: rgba(15, 23, 42, .2);
    transition: width .25s var(--ease-out), background-color .25s;
  }
  .pdm__dot.is-activa::before { width: 20px; background: var(--c-accent); }
  .pdm__dot:focus-visible { outline: 2px solid var(--c-accent); outline-offset: -2px; border-radius: var(--r-sm); }

  /* Sin miniaturas, la info arranca más cerca de los puntos. */
  .pdm__carrusel + * { margin-top: 0; }
}

@media (max-width: 820px) and (prefers-reduced-motion: reduce) {
  .pdm__dot::before { transition: none; }
}

/* ============================================================
   FICHA — GALERÍA EN SLIDER (producto.js)
   Con más de 4 imágenes las miniaturas van en UNA fila que se
   desliza (antes saltaban a una segunda fila y empujaban el precio
   hacia abajo). Se ven 4 y media: la cortada avisa que hay más.
   La foto grande muestra "n / total" y se pasa con el dedo.
   ============================================================ */
.ficha__contador {
  position: absolute; top: var(--sp-4); right: var(--sp-4); z-index: 2;
  padding: 3px 10px; border-radius: var(--r-pill);
  background: rgba(11, 42, 32, .82); color: #fff;
  font-size: var(--text-xs); font-weight: 600;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.ficha__miniaturas--slider {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - var(--sp-2) * 4) / 4.5);
  gap: var(--sp-2);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  /* Aire para el borde de la activa y el anillo de foco. */
  padding: 3px;
  margin-inline: -3px;
}
.ficha__miniaturas--slider::-webkit-scrollbar { display: none; }
.ficha__miniaturas--slider .ficha__mini { scroll-snap-align: start; }
/* Dentro de una tira con overflow el salto del hover se recortaba. */
.ficha__miniaturas--slider .ficha__mini:hover { transform: none; }

@media (max-width: 520px) {
  .ficha__miniaturas--slider {
    grid-template-columns: none;
    grid-auto-columns: calc((100% - var(--sp-2) * 4) / 4.5);
  }
}

/* Primera pantalla adelantada por ficha.php: la altura mínima de carga
   (100svh) no debe estirar las filas de la grilla, que dejaban un hueco
   entre la foto y el nombre. */
.ficha__inner:has(> [data-cargando]) { align-content: start; }

/* ============================================================
   CHECKOUT — aviso de aceptación junto a Pagar (reemplaza la
   casilla de términos). Visible antes de pagar, con enlaces.
   ============================================================ */
.checkout__acepta {
  margin-top: var(--sp-2);
  font-size: var(--text-xs); line-height: 1.5; color: var(--c-ink-dim);
  text-align: center;
}
.checkout__acepta a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 2px; }
.checkout__acepta--movil { display: none; }

@media (max-width: 900px) {
  .checkout__acepta { display: none; }
  .checkout__acepta--movil {
    display: block; flex-basis: 100%; order: 4;
    margin-top: 2px; font-size: 11px; line-height: 1.4;
  }
  .checkout__barra-movil .checkout__barra-movil-seguro { margin-top: var(--sp-1); }
  /* La barra fija creció una línea: el final del formulario y el toast
     no pueden quedar tapados. */
  .checkout { padding-bottom: 8rem; }
  .checkout-page .toast { bottom: calc(8.5rem + env(safe-area-inset-bottom)); }
}

/* ============================================================
   CHECKOUT SIMPLIFICADO (oct 2026)
   Título que explica el paso + dos líneas informativas en lugar de los
   recuadros de entrega y pago (había una sola opción en cada uno).
   ============================================================ */
.checkout__titulo:has(+ .checkout__bajada) { margin-bottom: var(--sp-1); }
.checkout__bajada {
  color: var(--c-ink-mid);
  font-size: var(--text-sm);
  margin: 0 0 var(--sp-5);
}
.checkout__info {
  list-style: none; margin: var(--sp-6) 0 0; padding: 0;
  display: grid; gap: var(--sp-3);
}
.checkout__info li {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  font-size: var(--text-sm); line-height: 1.45;
}
.checkout__info svg { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.checkout__info svg { color: var(--c-accent); }
/* Los recuadros de entrega/pago quedan ocultos; display propio le ganaría a [hidden]. */
.pago-opciones[hidden], .checkout__titulo[hidden] { display: none; }

/* Barra fija móvil: solo el botón a lo ancho, con el monto adentro. */
@media (max-width: 900px) {
  .checkout__barra-movil .checkout__barra-movil-btn {
    flex: 1 1 100%; width: 100%; justify-content: center; text-align: center;
    padding-inline: var(--sp-4);
  }
}