/* ══════════════════════════════════════════════════════
   MENOS VUELTAS — Sistema de diseño
   Filosofía: MENOS. Más aire. Más claridad.
══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=Cabin:wght@400;500;600&display=swap');

/* ── Tokens ── */
:root {
  /* Ancho para las secciones visuales en escritorio: deja aire sin encajonar
     la interfaz en el centro de monitores grandes. */
  --content-gutter: 24px;
  --content-wide: min(1280px, calc(100% - var(--content-gutter) - var(--content-gutter)));
  /* Superficies */
  --bg:        #FAFAF7;
  --surface:   #ffffff;
  --surface-2: #F3F4EF;
  --surface-3: #EAECE5;

  /* Bordes */
  --line:      #C8CCBF;
  --line-soft: #D6DAD0;

  /* Texto */
  --t1: #2F3430;
  --t2: #6F746E;
  --t3: #9EA39D;

  /* Acento — verde oliva */
  --accent:      #6E8B5B;
  --accent-2:    #587547;
  --accent-bg:   #EEF2E9;
  --accent-line: #C8D6BB;

  /* Util */
  --red:   #c0392b;
  --wa:    #25D366;

  /* Tipografía */
  --font:      'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Cabin', Georgia, serif;

  /* Espaciado */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 48px;
  --space-9: 64px;

  /* Radios */
  --r1: 4px;
  --r2: 8px;
  --r3: 12px;
  --r4: 16px;
  --r5: 24px;
  --rf: 999px;

  /* Sombras */
  --s1: 0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.04);
  --s2: 0 4px 16px rgba(0,0,0,.06), 0 1px 4px rgba(0,0,0,.04);
  --s3: 0 8px 32px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04);
  --s4: 0 20px 60px rgba(0,0,0,.10), 0 4px 16px rgba(0,0,0,.05);

  --ease: cubic-bezier(.16,1,.3,1);
  /* Desplazamiento del puntero en la demo: acelera y frena parejo */
  --ease-mouse: cubic-bezier(.45,.05,.3,1);
  --t: 180ms;
}

/* En monitores anchos, el contenido visual ocupa el ancho disponible sin
   tocar las medidas de lectura de FAQ, Nosotros y footer. */
@media (min-width: 1440px) {
  :root {
    --content-gutter: clamp(48px, 5vw, 96px);
    --content-wide: min(1760px, calc(100% - var(--content-gutter) - var(--content-gutter)));
  }
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* overflow-x: clip (y no hidden) — hidden convierte al elemento en un
   contenedor de scroll y anula el position:sticky del sidebar del catálogo. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  font-family: var(--font);
  background-color: var(--bg);
  color: var(--t1);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

/* Textos largos y párrafos usan Cabin */
.faq-respuesta,
.carrito-nota {
  font-family: var(--font-body);
}
button { font-family: var(--font); cursor: pointer; }
img { display: block; max-width: 100%; }

/* ══════════════════════════════════════════════════════
   DECORACIÓN GLOBAL — círculos de fondo minimalistas
══════════════════════════════════════════════════════ */
.bg-circles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.bg-circle {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid var(--accent-line);
  opacity: .5;
}
.bg-circle--fill {
  background: var(--accent-bg);
  border-color: var(--accent-line);
}
.bg-circle--dash { border-style: dashed; }
@media (max-width: 860px) {
  .bg-circles .bg-circle:nth-child(2),
  .bg-circles .bg-circle:nth-child(3) { display: none; }
}

.seccion-deco { position: relative; overflow: hidden; }
.seccion-deco > *:not(.bg-circles) { position: relative; z-index: 1; }


/* ══════════════════════════════════════════════════════
   TOPBAR
══════════════════════════════════════════════════════ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 72px;
  background: rgba(255,255,255,.90);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--line-soft);
}

.topbar-inner {
  /* La topbar debe pegarse al borde real del viewport: usa solo un padding
     fijo y chico, sin el límite de --content-wide (ese gutter es para las
     secciones de lectura, no para la barra superior). */
  width: 100%;
  padding: 0 var(--space-4);
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* Marca */
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: none;
  border: none;
  padding: 0;
  flex-shrink: 0;
  text-decoration: none;
}.brand-logo {
  height: 44px;
  width: auto;
  display: block;
}
/* Buscador + nav comparten el espacio disponible, repartido */
.topbar-middle {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  min-width: 0;
}
.search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  max-width: 448px;
  min-width: 140px;
}
.search-icon {
  position: absolute;
  left: 11px;
  width: 15px;
  height: 15px;
  color: var(--t3);
  pointer-events: none;
  flex-shrink: 0;
}
.search-wrap input {
  width: 100%;
  height: 36px;
  padding: 0 var(--space-4) 0 34px;
  border: 1px solid var(--line);
  border-radius: var(--rf);
  background: var(--surface-2);
  font-family: var(--font);
  font-size: 0.845rem;
  color: var(--t1);
  outline: none;
  transition: border-color var(--t) var(--ease),
              background var(--t) var(--ease),
              box-shadow var(--t) var(--ease);
}
.search-wrap input::placeholder { color: var(--t3); }
.search-wrap input:focus {
  border-color: var(--accent-line);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(61,107,79,.10);
}

/* Nav */
.nav-ghost {
  height: 34px;
  padding: 0 var(--space-3);
  border: none;
  background: none;
  color: var(--t2);
  font-size: 0.845rem;
  font-weight: 500;
  border-radius: var(--r2);
  transition: background var(--t), color var(--t);
  white-space: nowrap;
}
.nav-ghost:hover { background: var(--surface-2); color: var(--t1); }

/* Dropdown catálogo */
.nav-dropdown { position: relative; flex-shrink: 0; }

.nav-pill {
  height: 34px;
  padding: 0 var(--space-3);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--t1);
  font-size: 0.845rem;
  font-weight: 500;
  border-radius: var(--r2);
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background var(--t), border-color var(--t), color var(--t);
}
.nav-pill:hover { background: var(--surface-2); }
.nav-pill-icon { display: none; width: 16px; height: 16px; flex-shrink: 0; }
.nav-dropdown.open .nav-pill {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}
.chevron {
  width: 14px;
  height: 14px;
  transition: transform var(--t) var(--ease);
}
.nav-dropdown.open .chevron { transform: rotate(180deg); }

/* Megamenu */
.nav-megamenu {
  display: none;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - var(--space-4) * 2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r4);
  box-shadow: var(--s4);
  z-index: 200;
  padding: var(--space-5) var(--space-6);
}
.nav-dropdown.open .nav-megamenu { display: block; }

.megamenu-grid {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.megamenu-grid::-webkit-scrollbar { display: none; }

.megamenu-col {
  flex: 1;
  min-width: 130px;
  max-width: 180px;
  padding: 0 var(--space-5);
  border-right: 1px solid var(--line-soft);
}
.megamenu-col:first-child { padding-left: 0; }
.megamenu-col:last-child  { border-right: none; padding-right: 0; }

.megamenu-cat {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border: none;
  border-bottom: 1px solid var(--accent-bg);
  background: none;
  font-family: var(--font);
  text-align: left;
  width: 100%;
  cursor: pointer;
  transition: color var(--t);
  display: block;
}
.megamenu-cat:hover { color: var(--accent-2); text-decoration: underline; }
.megamenu-sub {
  display: block;
  width: 100%;
  padding: 5px 0;
  background: none;
  border: none;
  text-align: left;
  font-size: 0.845rem;
  color: var(--t2);
  transition: color var(--t);
  white-space: normal;
  word-break: break-word;
  line-height: 1.35;
}
.megamenu-sub:hover { color: var(--accent); }

/* Carrito trigger */
/* Botón de WhatsApp: mismo lenguaje visual que el resto de los íconos de la
   topbar (fondo suave + borde, sólido al hover). Icono en verde oliva de
   marca (no el verde característico de WhatsApp). Va pegado al carrito,
   sin repartirse espacio con el resto de la topbar como los demás elementos. */
.whatsapp-trigger {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--r2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  text-decoration: none;
  transition: background var(--t), border-color var(--t), color var(--t), transform var(--t);
  flex-shrink: 0;
}
.whatsapp-trigger:hover { background: var(--surface-2); color: var(--t1); }
.whatsapp-trigger svg { width: 19px; height: 19px; }

/* Agrupa WhatsApp y carrito: van pegados entre sí (gap chico propio) y
   empujados al borde derecho, a diferencia del resto de los elementos de
   la topbar que se reparten el espacio disponible. */
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0;
}
.cart-trigger {
  position: relative;
  height: 36px;
  padding: 0 var(--space-3);
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--r2);
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--t2);
  transition: background var(--t), border-color var(--t), color var(--t);
  flex-shrink: 0;
}
.cart-trigger svg { width: 17px; height: 17px; flex-shrink: 0; }
.cart-trigger:hover { background: var(--surface-2); color: var(--t1); }
.cart-label {
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
}

.cart-count {
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: var(--accent);
  color: white;
  border-radius: var(--rf);
  font-size: 0.68rem;
  font-weight: 600;
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cart-count.visible { display: flex; }


/* ══════════════════════════════════════════════════════
   VISTAS
══════════════════════════════════════════════════════ */
#vista-landing  { display: block; }
#vista-catalogo { display: none;  }
#vista-landing.oculta   { display: none;  }
#vista-catalogo.visible { display: block; }


/* ══════════════════════════════════════════════════════
   INTERRUPTOR DE HERO
   Controlado por el atributo data-hero del <body> (ver <head> del HTML).
   Muestra un hero completo y oculta el otro — nunca los dos a la vez.
   Cada campaña se diseña de cero dentro de .hero-promo-bg, sin heredar
   nada del hero anterior; solo hace falta que la sección tenga esa clase
   para que el interruptor la reconozca.
══════════════════════════════════════════════════════ */
body[data-hero="estandar"] .hero-promo-bg { display: none; }
body[data-hero="promo"]    .hero-bg       { display: none; }


/* ══════════════════════════════════════════════════════
   LANDING — HERO
══════════════════════════════════════════════════════ */
.hero-bg {
  background: var(--surface);
  overflow: hidden;
}

.hero {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: calc(100vh - 72px);
  max-width: none;
  margin: 0 auto;
  padding: 0;
  width: 100%;
}

.hero-inner {
  max-width: 520px;
  padding: var(--space-8) var(--space-6) var(--space-8) var(--content-gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
}

.hero-title {
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.04em;
  white-space: nowrap;
  color: var(--accent);
  margin-bottom: var(--space-5);
}

.hero-pills {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-6);
  margin-bottom: var(--space-7);
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--accent);
  border-radius: 0;
  padding: 2px 4px 5px 4px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--t1);
}
/* El ícono se mantiene en el HTML solo para el diseño de las pills en
   móvil (ver media query); en el resto de las versiones no se muestra. */
.hero-pill svg {
  display: none;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.hero-visual {
  flex: 1;
  position: relative;
  align-self: stretch;
  min-height: 400px;
}

.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 85%;
  border-radius: 0;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 22%);
  mask-image: linear-gradient(to right, transparent 0%, black 22%);
  display: block;
}


/* ══════════════════════════════════════════════════════
   LANDING — HERO DE CAMPAÑA (promociones temporales)
   Reemplaza al hero estándar cuando data-hero="promo" (ver interruptor
   arriba). Pensado para rediseñarse de cero en cada campaña: estas
   clases son un punto de partida, no un molde fijo — la próxima promo
   puede tener otra estructura, otros colores, otro layout, lo que haga
   falta para esa comunicación puntual.

   Esta versión: foto de campaña a pantalla completa (hero-promo.jpg) con
   degradé oscuro a la izquierda para que el texto sea siempre legible.

   El contenedor mantiene la MISMA proporción que la foto (aspect-ratio)
   en vez de basarse en el alto de la pantalla (100vh): así la imagen
   nunca necesita agrandarse para cubrir el alto, y por lo tanto nunca
   recorta la parte de arriba (la mano) ni la de abajo (los escalones),
   sea cual sea el ancho de la pantalla (notebook, monitor de escritorio,
   etc). La foto es panorámica (ancha en relación a su alto) a propósito,
   para que el hero entre completo en el primer vistazo sin necesidad de
   scrollear. Si el día de mañana se reemplaza hero-promo.jpg por una
   foto con otra proporción, hay que actualizar este aspect-ratio para
   que coincida con el nuevo archivo (y, si la foto es más "cuadrada",
   conviene pedir una versión más panorámica en vez de solo ajustar el
   número, para no volver a quedar con un hero demasiado alto).
══════════════════════════════════════════════════════ */
.hero-promo-bg {
  position: relative;
  aspect-ratio: 1528 / 704; /* debe coincidir con la proporción real de hero-promo.jpg */
  width: 100%;
  /* Tope de seguridad: en pantallas anchas y no muy altas (ej. monitores
     1920×1080) el aspect-ratio de la foto puede dar un hero apenas más
     alto que el espacio visible bajo la topbar. Este límite evita que
     haga falta scrollear un poquito en esos casos, sin afectar el
     encuadre (la imagen sigue centrada con object-fit: cover). */
  max-height: calc(100vh - 72px);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--accent-2); /* color de respaldo mientras carga la foto */
}

.hero-promo-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-promo-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20,28,18,.78) 0%, rgba(20,28,18,.42) 45%, rgba(20,28,18,.05) 75%);
}

.hero-promo {
  position: relative;
  z-index: 1;
  width: 100%;
}

.hero-promo-inner {
  max-width: 560px;
  padding: var(--space-8) var(--space-5) var(--space-8) var(--content-gutter);
}

.hero-promo-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.5);
  border-radius: var(--rf);
  padding: 6px 16px;
  margin-bottom: var(--space-5);
  color: white;
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}
.hero-promo-badge svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.hero-promo-titulo {
  font-size: clamp(2.1rem, 4.6vw, 3.2rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: white;
  margin-bottom: var(--space-5);
  text-shadow: 0 2px 20px rgba(0,0,0,.25);
}
.hero-promo-titulo strong {
  font: inherit;
  color: #D9E8C9;
}

.hero-promo-texto {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: rgba(255,255,255,.9);
  line-height: 1.6;
  max-width: 420px;
  margin-bottom: var(--space-6);
}

.hero-promo-nota {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: rgba(255,255,255,.72);
  line-height: 1.5;
  max-width: 420px;
  margin-top: var(--space-4);
}

.hero-promo-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Botón principal sobre foto: variante clara del btn-primary, ya que el
   verde de marca no resalta sobre sí mismo. */
.hero-promo-actions .btn-primary {
  background: white;
  color: var(--accent-2);
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
.hero-promo-actions .btn-primary:hover {
  background: var(--surface-2);
  color: var(--accent-2);
}
.hero-promo-actions .btn-ghost-dark {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.65);
  color: white;
}
.hero-promo-actions .btn-ghost-dark:hover {
  background: rgba(255,255,255,.22);
  color: white;
  border-color: white;
}

/* Tablet: la proporción fija ya resuelve el alto, solo achicamos el
   padding lateral para que el texto no quede pegado al borde. */
@media (max-width: 900px) {
  .hero-promo-inner { padding: var(--space-7) var(--space-4); max-width: none; }
}

/* Mobile: la proporción de la pantalla es tan distinta a la de la foto
   (angosta y alta vs. panorámica) que mantener el aspect-ratio dejaría
   un hero larguísimo. Acá se usa el mismo recurso que ya tiene el hero
   estándar en mobile: alto fijo, foto de fondo enfocada hacia la derecha
   (donde están la bolsa y la mano) y degradé de arriba hacia abajo con
   el texto apoyado abajo, sobre la parte más "tranquila" de la imagen
   (el escalón), para que siempre se lea bien. */
@media (max-width: 600px) {
  .hero-promo-bg {
    aspect-ratio: unset;
    min-height: 620px;
    align-items: stretch; /* el bloque de texto ocupa todo el alto del hero */
  }
  .hero-promo-photo {
    object-position: 85% center;
  }
  .hero-promo-bg::after {
    background: linear-gradient(180deg, rgba(20,28,18,.42) 0%, rgba(20,28,18,.16) 32%, rgba(20,28,18,.08) 45%, rgba(20,28,18,.88) 100%);
  }
  .hero-promo {
    display: flex;
  }
  /* El título (con el párrafo debajo) sube al tope del hero, aprovechando
     el espacio vacío del encuadre; los botones y la nota quedan apoyados
     abajo, exactamente donde estaban. La pill no se muestra en mobile. */
  .hero-promo-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: var(--space-6) var(--space-4) var(--space-5);
    max-width: none;
  }
  .hero-promo-badge {
    display: none;
  }
  .hero-promo-titulo {
    font-size: clamp(1.92rem, 8.65vw, 2.4rem);
    margin-bottom: var(--space-3);
    /* Sin la pill arriba, el título necesita más peso visual: sombra más
       marcada + un leve halo oscuro que lo despega de la foto clara. */
    text-shadow: 0 2px 6px rgba(0,0,0,.45), 0 8px 30px rgba(0,0,0,.35);
  }
  .hero-promo-titulo strong {
    text-shadow: 0 2px 6px rgba(0,0,0,.5), 0 8px 30px rgba(0,0,0,.35);
  }
  .hero-promo-texto {
    max-width: 60%; /* corta antes de chocar con la bolsa de la foto */
    margin-bottom: 0;
    text-shadow: 0 1px 5px rgba(0,0,0,.45);
  }
  .hero-promo-nota {
    align-self: stretch;
    max-width: none;
  }
  .hero-promo-actions {
    margin-top: auto; /* empuja botones + nota al pie */
  }
  .hero-promo-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .hero-promo-actions .btn-primary,
  .hero-promo-actions .btn-ghost-dark {
    width: 100%;
  }
}


/* ══════════════════════════════════════════════════════
   BOTONES (sistema)
══════════════════════════════════════════════════════ */
.btn-primary {
  height: 44px;
  padding: 0 var(--space-6);
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--rf);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: background var(--t) var(--ease),
              transform var(--t) var(--ease),
              box-shadow var(--t) var(--ease);
  box-shadow: 0 1px 3px rgba(61,107,79,.25), 0 4px 12px rgba(61,107,79,.15);
}
.btn-primary:hover {
  background: var(--accent-2);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(61,107,79,.25), 0 8px 20px rgba(61,107,79,.18);
}
.btn-primary:active { transform: translateY(0); }

.btn-ghost-dark {
  height: 44px;
  padding: 0 var(--space-5);
  background: none;
  color: var(--t2);
  border: 1px solid var(--line);
  border-radius: var(--rf);
  font-size: 0.875rem;
  font-weight: 500;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.btn-ghost-dark:hover { background: var(--surface-2); color: var(--t1); border-color: var(--surface-3); }


/* ══════════════════════════════════════════════════════
   TÍTULO DE SECCIÓN CENTRADO (reutilizable)
══════════════════════════════════════════════════════ */
.seccion-h2-center {
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--t1);
  text-align: center;
  /* Ajustado: la bajada tiene que leerse pegada al título, como una sola
     unidad. El aire grande va después del par, no en el medio. */
  margin-bottom: var(--space-2);
}


/* ════════════════════════════════════════════════════
   DESTACADOS (franja verde, solo B2B)
   Fondo verde claro que separa la franja del hero y de la sección que sigue.
   Las cards pierden el borde y flotan con sombra. Tocar una abre el modal
   del producto, igual que en el catálogo.
════════════════════════════════════════════════════ */
.destacados-strip {
  position: relative;
  overflow: hidden;
  background: var(--accent-bg);
  border-top: 1px solid var(--accent-line);
  border-bottom: 1px solid var(--accent-line);
}
/* Círculo punteado de fondo, del mismo lenguaje que el resto de la landing */
.destacados-strip::before {
  content: '';
  position: absolute;
  width: 260px;
  height: 260px;
  top: -140px;
  right: 6%;
  border: 1px dashed var(--accent-line);
  border-radius: 50%;
  opacity: .7;
  pointer-events: none;
}
.destacados-strip-inner {
  position: relative;
  z-index: 2;
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: var(--space-6) var(--space-5);
}
.destacados-strip-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-4);
}
.destacados-icono {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  display: grid;
  place-items: center;
}
.destacados-icono svg { width: 14px; height: 14px; }
.destacados-strip-title {
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--t1);
}

/* El riel y sus flechas. Las flechas van a los costados, centradas sobre la
   altura de la foto de las cards (no del alto total, que incluye el texto),
   que es donde el ojo espera encontrarlas. Solo en desktop. */
.destacados-scroller {
  position: relative;
  display: flex;
  /* Alineadas arriba y bajadas a mano hasta el centro de la foto: centrarlas
     sobre el alto total las dejaría a la altura del precio, no de la imagen. */
  align-items: flex-start;
  gap: var(--space-2);
}
.destacados-arrow {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  /* padding-top del riel (4px) + media altura de la foto (148/2) − medio botón */
  margin-top: calc(4px + 74px - 16px);
  display: grid;
  place-items: center;
  border: 1px solid var(--accent-line);
  border-radius: var(--rf);
  background: var(--surface);
  color: var(--t2);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(47, 52, 48, .07);
  transition: color var(--t), border-color var(--t), opacity var(--t);
}
.destacados-arrow svg { width: 15px; height: 15px; }
.destacados-arrow:hover:not(:disabled) { color: var(--accent-2); border-color: var(--accent); }
.destacados-arrow:disabled { opacity: .3; cursor: default; }

.destacados-track {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Aire para que la sombra de las cards no se recorte al scrollear */
  padding: 4px 0 6px;
}
.destacados-track::-webkit-scrollbar { display: none; }

/* Las cards heredan el estilo del catálogo pero acá van en fila, con ancho
   fijo y sin borde: sobre el fondo verde flotan con sombra. */
.destacados-track .card {
  flex: 0 0 148px;
  width: 148px;
  max-width: 148px;
  scroll-snap-align: start;
  border-radius: var(--r3);
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(47, 52, 48, .05), 0 6px 18px rgba(47, 52, 48, .07);
}
.destacados-track .card:hover {
  border-color: transparent;
  box-shadow: 0 2px 6px rgba(47, 52, 48, .07), 0 12px 28px rgba(47, 52, 48, .11);
}
.destacados-track .card .card-img-wrap { aspect-ratio: 1; }
.destacados-track .card .card-img-wrap img { padding: var(--space-2); }
.destacados-track .card .card-body { padding: var(--space-2) var(--space-3) var(--space-3); }
.destacados-track .card .card-marca { font-size: .62rem; }
.destacados-track .card .card-nombre {
  font-size: .74rem;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.destacados-track .card .card-variante-label { font-size: .66rem; }
.destacados-track .card .card-precio { font-size: .86rem; }
.destacados-track .card .card-precio-dto { font-size: .62rem; }


/* ══════════════════════════════════════════════════════
   CÓMO COMPRAR — demo animada
   Un mockup que reproduce cada paso junto a la lista de pasos. El mockup y
   la interfaz cambian según el dispositivo: notebook con la vista de
   escritorio (sidebar + grilla + modal + drawer) o teléfono con la de
   mobile (chips + rieles + modal apilado + app de WhatsApp).
   Los precios van difuminados a propósito para que la animación no quede
   desactualizada cada vez que cambia la lista de precios.
══════════════════════════════════════════════════════ */
.como-comprar {
  background: var(--bg);
  border-bottom: 1px solid var(--line-soft);
}
.como-comprar-inner {
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: var(--space-9) var(--space-5);
}
.seccion-sub-center {
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--t2);
  max-width: 520px;
  margin: 0 auto var(--space-7);
}

.demo-pasos {
  /* Duración de cada paso. En mobile es menor: sin puntero que se traslade,
     los huecos entre toques serían tiempo muerto. */
  --demo-dur: 9s;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
  gap: var(--space-8);
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
}

/* ── Lista de pasos ──
   Los tres pasos van conectados por una línea vertical, como un recorrido.
   Cada número vive dentro de un anillo que se completa mientras corre la
   animación; al pasar el mouse por un paso inactivo el número se convierte
   en un ▶ para dejar claro que se puede tocar. Solo el paso activo despliega
   su descripción y sus datos, así la lista guía la lectura. */
.pasos-lista {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
/* Tramos de línea entre anillo y anillo. Se dibujan por paso (y no como
   una sola línea de punta a punta) para que corten justo en el borde del
   círculo en vez de pasarle por encima. */
.paso-item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 47px;
  /* arranca al pie del anillo y termina donde empieza el siguiente */
  top: calc(var(--space-4) + 46px + 5px);
  bottom: calc(var(--space-4) * -1 - var(--space-2) + 5px);
  width: 2px;
  margin-left: -1px;
  background: var(--line-soft);
  border-radius: var(--rf);
  z-index: -1;
}
.paso-item.activo:not(:last-child)::before { background: var(--accent-line); }

.paso-item {
  position: relative;
  z-index: 1;
  display: flex;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-4) var(--space-5);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--r4);
  text-align: left;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease),
              box-shadow var(--t) var(--ease);
}
.paso-item:hover { background: var(--surface); }
.paso-item.activo {
  background: var(--surface);
  border-color: var(--accent-line);
  box-shadow: var(--s2);
}

/* ── Anillo con número, progreso y play ── */
.paso-anillo {
  position: relative;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  /* Fondo propio para que la línea de conexión no se vea por detrás */
  background: var(--bg);
  border-radius: 50%;
}
.paso-item.activo .paso-anillo,
.paso-item:hover .paso-anillo { background: var(--surface); }
.paso-anillo svg {
  position: absolute;
  inset: 0;
  width: 46px;
  height: 46px;
  transform: rotate(-90deg);
}
.paso-anillo circle { fill: none; stroke-width: 2.5; }
.paso-anillo-pista { stroke: var(--surface-3); }
.paso-anillo-fill {
  stroke: var(--accent);
  stroke-linecap: round;
  stroke-dasharray: 132;
  stroke-dashoffset: 132;
}
.paso-item.activo .paso-anillo-fill {
  animation: paso-anillo-avance var(--demo-dur) linear forwards;
}
@keyframes paso-anillo-avance { to { stroke-dashoffset: 0; } }

.paso-anillo b {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--t2);
  transition: color var(--t), opacity var(--t);
}
.paso-item.activo .paso-anillo b { color: var(--accent-2); }

.paso-anillo-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  color: var(--accent);
  transition: opacity var(--t);
}
.paso-anillo-play svg { position: static; width: 15px; height: 15px; transform: none; }
/* El botón de play con aro solo se usa en mobile (ver media query) */
.paso-play { display: none; }
.paso-item:not(.activo):hover .paso-anillo b { opacity: 0; }
.paso-item:not(.activo):hover .paso-anillo-play { opacity: 1; }

/* ── Texto ── */
.paso-item-txt { display: block; flex: 1; min-width: 0; }
.paso-item-h3 {
  display: block;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--t1);
  margin-bottom: 2px;
}
/* La descripción y los datos solo se muestran en el paso activo */
.paso-item-p {
  display: block;
  font-size: 0.86rem;
  color: var(--t2);
  font-family: var(--font-body);
  line-height: 1.55;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .35s var(--ease), opacity .3s var(--ease);
}
.paso-item.activo .paso-item-p { max-height: 140px; opacity: 1; }


/* ── Pantallas del mockup ── */
.mk-pant {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity .32s var(--ease);
  overflow: hidden;
}
.mk-pant.activa { opacity: 1; }

/* Precios reales del catálogo, con el verde de marca como en las cards */
.mkd-card b, .mkm-card b,
.mkd-linea b, .mkm-linea b,
.mkd-modal-precio, .mkm-modal-precio { color: var(--accent); }

/* ── Puntero de mouse (escritorio) ──
   El span mide 0×0: así left/top indican exactamente el punto al que apunta
   la flecha, y el SVG cuelga desde ahí hacia abajo y a la derecha. */
.mk-puntero {
  position: absolute;
  z-index: 20;
  width: 0;
  height: 0;
  pointer-events: none;
}
.mk-puntero svg {
  position: absolute;
  left: -1px;
  top: -1px;
  width: 13px;
  height: 20px;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}
/* Anillo que marca el clic, centrado en la punta */
.mk-click {
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  opacity: 0;
  transform: scale(.35);
}

@media (prefers-reduced-motion: reduce) {
  .mk-pant *, .paso-anillo-fill, .aro-fill { animation: none !important; }
}

/* ══════════════════════════════════════════════════════
   MOCKUP NOTEBOOK (escritorio)
══════════════════════════════════════════════════════ */
.mk-note { width: 100%; max-width: 620px; margin: 0 auto; }
.mk-note-tapa {
  position: relative;
  background: #1c211c;
  border-radius: 14px 14px 4px 4px;
  padding: 13px 13px 15px;
  box-shadow: var(--s4);
}
.mk-note-tapa::after {
  content: '';
  position: absolute;
  top: 5px; left: 50%;
  transform: translateX(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,.22);
}
.mk-note-screen {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--bg);
  border-radius: 4px;
  overflow: hidden;
}
.mk-note-base {
  display: block;
  height: 12px;
  background: linear-gradient(180deg, #2c322c, #1c211c);
  border-radius: 0 0 12px 12px;
  width: 116%;
  position: relative;
  left: -8%;
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}
.mk-note-base::after {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 15%; height: 4px;
  background: rgba(255,255,255,.14);
  border-radius: 0 0 5px 5px;
}

/* ── Topbar de escritorio ── */
.mkd-top {
  height: 9.5%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: white;
  border-bottom: 1px solid var(--line-soft);
  flex-shrink: 0;
}
.mkd-logo { height: 11px; width: auto; flex-shrink: 0; }
.mkd-search {
  width: 30%;
  height: 12px;
  border-radius: var(--rf);
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
}
.mkd-sp { flex: 1; }
.mkd-cart {
  width: 16px; height: 16px;
  border-radius: 4px;
  border: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--t2);
  flex-shrink: 0;
}
.mkd-cart svg { width: 9px; height: 9px; }

.mkd-cuerpo { flex: 1; display: flex; min-height: 0; }

.mkd-side {
  width: 22%;
  padding: 10px 7px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-right: 1px solid var(--line-soft);
  flex-shrink: 0;
}
.mkd-side-tit {
  font-size: 0.4rem;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: var(--t3);
  font-weight: 700;
  margin-bottom: 3px;
  padding-left: 5px;
}
.mkd-side-item {
  font-size: 0.5rem;
  font-weight: 600;
  color: var(--t1);
  padding: 4px 6px;
  border-radius: 5px;
}
.mkd-side-item.on { background: var(--accent); color: white; }

.mkd-main { flex: 1; padding: 10px 12px; min-width: 0; }
.mkd-h1 {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}
.mkd-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; align-content: start; }
.mkd-grid-4 { grid-template-columns: repeat(4, 1fr); }
.mkd-card {
  background: white;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  padding: 5px;
  text-align: center;
  display: block;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.mkd-card i {
  display: block;
  height: 34px;
  background: var(--surface-2);
  border-radius: 5px;
  overflow: hidden;
  padding: 2px;
}
.mkd-card i img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.mkd-card u {
  display: block;
  font-size: 0.4rem;
  font-weight: 600;
  text-decoration: none;
  margin-top: 3px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mkd-card s {
  display: block;
  font-size: 0.33rem;
  color: var(--t3);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mkd-card b { display: block; font-size: 0.48rem; margin-top: 2px; }

/* ══ PASO 1 (escritorio) ══
   El puntero baja a la card (32.8%, 30%), la abre; después va al "+" de
   cantidad (53%, 66.4%) y por último a "Agregar" (68.1%, 66.4%).
   Las coordenadas están medidas sobre la pantalla real del mockup. */
.mk-pant[data-paso="1"].activa .mk-puntero { animation: pd1-puntero var(--demo-dur) var(--ease-mouse) infinite; }
@keyframes pd1-puntero {
  0%       { left: 56%;   top: 55%;   opacity: 0; }
  4%       { left: 55%;   top: 54%;   opacity: 1; }
  18%, 21% { left: 32.8%; top: 30%;   opacity: 1; }
  30%      { left: 32.8%; top: 30%;   opacity: 1; }
  46%, 49% { left: 53%;   top: 66.4%; opacity: 1; }
  55%      { left: 53%;   top: 66.4%; opacity: 1; }
  68%, 71% { left: 68.1%; top: 66.4%; opacity: 1; }
  /* Termina visible y en el mismo punto donde arranca el paso 2, para que
     los dos pasos se lean como una sola toma continua. */
  100%     { left: 68.1%; top: 66.4%; opacity: 1; }
}
/* Tres clics: card, "+" y "Agregar" */
.mk-pant[data-paso="1"].activa .mk-click { animation: pd1-click var(--demo-dur) linear infinite; }
@keyframes pd1-click {
  0%, 20%  { opacity: 0; transform: scale(.35); }
  21%      { opacity: .9; transform: scale(.35); }
  27%      { opacity: 0; transform: scale(1.15); }
  48%      { opacity: 0; transform: scale(.35); }
  49%      { opacity: .9; transform: scale(.35); }
  55%      { opacity: 0; transform: scale(1.15); }
  70%      { opacity: 0; transform: scale(.35); }
  71%      { opacity: .9; transform: scale(.35); }
  77%,100% { opacity: 0; transform: scale(1.15); }
}
.mk-pant[data-paso="1"].activa .mkd-card.destino { animation: pd1-card var(--demo-dur) var(--ease) infinite; }
@keyframes pd1-card {
  0%, 21%  { transform: scale(1); box-shadow: none; }
  24%      { transform: scale(.95); box-shadow: 0 0 0 2px var(--accent-line); }
  28%, 100%{ transform: scale(1); box-shadow: none; }
}

/* El badge del carrito recién aparece cuando se agregó el producto */
.con-badge-tardio b { opacity: 0; }
.mk-pant[data-paso="1"].activa .con-badge-tardio b { animation: pd1-badge var(--demo-dur) var(--ease) infinite; }
@keyframes pd1-badge {
  0%, 73%  { opacity: 0; transform: scale(.4); }
  78%      { opacity: 1; transform: scale(1.3); }
  83%, 100%{ opacity: 1; transform: scale(1); }
}

/* Modal de producto */
.mk-pant[data-paso="1"].activa .mkd-modal-fondo,
.mk-pant[data-paso="1"].activa .mkm-modal-fondo { animation: pd1-fondo var(--demo-dur) var(--ease) infinite; }
@keyframes pd1-fondo {
  0%, 22%  { opacity: 0; }
  28%, 94% { opacity: 1; }
  99%, 100%{ opacity: 0; }
}

.mkd-modal {
  position: absolute;
  z-index: 11;
  left: 50%;
  top: 50%;
  width: 66%;
  transform: translate(-50%, -46%) scale(.96);
  display: flex;
  background: var(--surface);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(0,0,0,.26);
  opacity: 0;
}
.mk-pant[data-paso="1"].activa .mkd-modal,
.mk-pant[data-paso="1"].activa .mkm-modal { animation: pd1-modal var(--demo-dur) var(--ease) infinite; }
@keyframes pd1-modal {
  0%, 22%   { opacity: 0; transform: translate(-50%, -47%) scale(.96); }
  29%, 94%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  99%, 100% { opacity: 0; transform: translate(-50%, -47%) scale(.96); }
}
.mkd-modal-foto {
  width: 42%;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  flex-shrink: 0;
}
.mkd-modal-foto img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.mkd-modal-col { flex: 1; padding: 11px 12px 12px; display: flex; flex-direction: column; min-width: 0; }
.mkd-modal-marca { font-size: 0.36rem; text-transform: uppercase; letter-spacing: .09em; color: var(--t3); font-weight: 700; }
.mkd-modal-nom { font-size: 0.72rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; margin-top: 1px; }
.mkd-modal-var { font-size: 0.4rem; color: var(--t2); margin-top: 1px; }
.mkd-modal-precio { display: block; font-size: 0.92rem; font-weight: 700; margin-top: 6px; }
.mkd-modal-tit {
  display: block;
  font-size: 0.34rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--t3);
  font-weight: 700;
  margin-top: 9px;
}
.mkd-modal-chips { display: flex; gap: 4px; margin-top: 4px; }
.mkd-modal-chips i {
  font-style: normal;
  font-size: 0.38rem;
  font-weight: 600;
  color: var(--t2);
  border: 1px solid var(--line);
  border-radius: var(--rf);
  padding: 3px 7px;
  background: white;
}
.mkd-modal-chips i.on { background: var(--accent); border-color: var(--accent); color: white; }
.mkd-modal-fila { display: flex; gap: 5px; margin-top: auto; padding-top: 9px; }
.mkd-qty {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--rf);
  overflow: hidden;
  flex-shrink: 0;
}
.mkd-qty em { font-style: normal; font-size: 0.5rem; color: var(--t2); padding: 0 5px; line-height: 17px; }
.mkd-qty u { position: relative; width: 15px; height: 17px; text-decoration: none; }
.mkd-qty u b {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.45rem;
  font-weight: 700;
}
/* El número pasa de 1 a 2 justo cuando el puntero toca "+" (33%) */
.mkd-qty u .q2, .mkm-qty u .q2 { opacity: 0; }
.mk-pant[data-paso="1"].activa .mkd-qty u .q1,
.mk-pant[data-paso="1"].activa .mkm-qty u .q1 { animation: pd1-q1 var(--demo-dur) steps(1) infinite; }
.mk-pant[data-paso="1"].activa .mkd-qty u .q2,
.mk-pant[data-paso="1"].activa .mkm-qty u .q2 { animation: pd1-q2 var(--demo-dur) steps(1) infinite; }
@keyframes pd1-q1 { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes pd1-q2 { 0%, 49% { opacity: 0; } 50%, 100% { opacity: 1; } }
.mk-pant[data-paso="1"].activa .mkd-qty-mas { animation: pd1-boton var(--demo-dur) var(--ease) infinite; }
@keyframes pd1-boton {
  0%, 48%  { color: var(--t2); transform: scale(1); }
  50%      { color: var(--accent); transform: scale(1.25); }
  55%, 100%{ color: var(--t2); transform: scale(1); }
}
.mkd-add {
  flex: 1;
  position: relative;
  height: 19px;
  border-radius: var(--rf);
  background: var(--accent);
  overflow: hidden;
}
.mkd-add b {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.42rem;
  font-weight: 700;
}
.mkd-add .add2, .mkm-add .add2 { opacity: 0; }
.mk-pant[data-paso="1"].activa .mkd-add { animation: pd1-add var(--demo-dur) var(--ease) infinite; }
@keyframes pd1-add {
  0%, 71%  { transform: scale(1); }
  73%      { transform: scale(.95); }
  78%, 100%{ transform: scale(1); }
}
.mk-pant[data-paso="1"].activa .mkd-add .add1,
.mk-pant[data-paso="1"].activa .mkm-add .add1 { animation: pd1-a1 var(--demo-dur) steps(1) infinite; }
.mk-pant[data-paso="1"].activa .mkd-add .add2,
.mk-pant[data-paso="1"].activa .mkm-add .add2 { animation: pd1-a2 var(--demo-dur) steps(1) infinite; }
@keyframes pd1-a1 { 0%, 72% { opacity: 1; } 73%, 100% { opacity: 0; } }
@keyframes pd1-a2 { 0%, 72% { opacity: 0; } 73%, 100% { opacity: 1; } }

/* ══ PASO 2 (escritorio) ══
   Puntero al botón flotante (95.6%, 93%) → se abre el drawer → puntero al
   botón verde (80.1%, 94.1%) → WhatsApp Web a pantalla completa. */
.mkd-flotante {
  position: absolute;
  right: 13px;
  bottom: 13px;
  z-index: 8;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(88,117,71,.45);
}
.mkd-flotante svg { width: 26px; height: 26px; }
.mkd-flotante b {
  position: absolute;
  top: -4px; right: -4px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--t1);
  color: white;
  font-size: 0.62rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mk-pant[data-paso="2"].activa .mkd-flotante { animation: pd2-flotante var(--demo-dur) var(--ease) infinite; }
@keyframes pd2-flotante {
  0%, 23%  { transform: scale(1); opacity: 1; }
  26%      { transform: scale(.86); opacity: 1; }
  31%      { transform: scale(1); opacity: 1; }
  36%, 100%{ transform: scale(1); opacity: 0; }
}

.mk-pant[data-paso="2"].activa .mk-puntero { animation: pd2-puntero var(--demo-dur) var(--ease-mouse) infinite; }
@keyframes pd2-puntero {
  0%, 4%   { left: 68.1%; top: 66.4%; opacity: 1; }
  20%, 23% { left: 95.6%; top: 93%;   opacity: 1; }
  38%      { left: 95.6%; top: 93%;   opacity: 1; }
  54%, 57% { left: 80.1%; top: 94.1%; opacity: 1; }
  62%      { left: 80.1%; top: 94.1%; opacity: 1; }
  67%, 100%{ left: 80.1%; top: 94.1%; opacity: 0; }
}
.mk-pant[data-paso="2"].activa .mk-click { animation: pd2-click var(--demo-dur) linear infinite; }
@keyframes pd2-click {
  0%, 22%  { opacity: 0; transform: scale(.35); }
  23%      { opacity: .9; transform: scale(.35); }
  29%      { opacity: 0; transform: scale(1.15); }
  56%      { opacity: 0; transform: scale(.35); }
  57%      { opacity: .9; transform: scale(.35); }
  63%,100% { opacity: 0; transform: scale(1.15); }
}

.mkd-drawer {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 40%;
  z-index: 9;
  background: white;
  border-left: 1px solid var(--line-soft);
  box-shadow: -8px 0 26px rgba(0,0,0,.12);
  padding: 12px 12px 0;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
}
.mk-pant[data-paso="2"].activa .mkd-drawer { animation: pd2-drawer var(--demo-dur) var(--ease) infinite; }
@keyframes pd2-drawer {
  0%, 25%   { transform: translateX(100%); }
  34%, 100% { transform: translateX(0); }
}
.mkd-drawer-tit { display: block; font-size: 0.62rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 8px; }
.mkd-linea { display: flex; align-items: center; gap: 7px; padding: 4px 0; }
.mkd-linea i {
  width: 22px; height: 22px;
  background: var(--surface-2);
  border-radius: 5px;
  overflow: hidden;
  padding: 2px;
  flex-shrink: 0;
}
.mkd-linea i img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.mkd-linea u { flex: 1; min-width: 0; font-size: 0.44rem; font-weight: 600; text-decoration: none; line-height: 1.3; }
.mkd-linea u em { display: block; font-style: normal; font-weight: 400; color: var(--t3); font-size: 0.38rem; }
.mkd-linea b { font-size: 0.46rem; }
.mkd-drawer-pie { margin-top: auto; padding: 9px 0 12px; border-top: 1px solid var(--line-soft); }
.mkd-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.mkd-total u { font-size: 0.44rem; color: var(--t2); text-decoration: none; }
.mkd-total b { font-size: 0.6rem; font-weight: 700; }
.mkd-wa-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 20px;
  border-radius: var(--rf);
  background: var(--wa);
  color: white;
  font-size: 0.46rem;
  font-weight: 700;
}
.mkd-wa-btn svg { width: 9px; height: 9px; }
.mk-pant[data-paso="2"].activa .mkd-wa-btn { animation: pd2-btn var(--demo-dur) var(--ease) infinite; }
@keyframes pd2-btn {
  0%, 57%  { transform: scale(1); }
  59%      { transform: scale(.94); }
  64%, 100%{ transform: scale(1); }
}

/* WhatsApp Web: ocupa toda la pantalla de la notebook */
.mkd-wa {
  position: absolute;
  inset: 0;
  z-index: 12;
  background: #ECE5DD;
  display: flex;
  flex-direction: column;
  opacity: 0;
}
.mk-pant[data-paso="2"].activa .mkd-wa { animation: pd2-wa var(--demo-dur) var(--ease) infinite; }
@keyframes pd2-wa {
  0%, 62%  { opacity: 0; }
  69%,100% { opacity: 1; }
}
.mkd-wa-barra {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 9px;
  background: #E4E4E0;
  border-bottom: 1px solid rgba(0,0,0,.07);
  flex-shrink: 0;
}
.mkd-wa-barra i { width: 6px; height: 6px; border-radius: 50%; }
.mkd-wa-barra i:nth-child(1) { background: #ff5f57; }
.mkd-wa-barra i:nth-child(2) { background: #febc2e; }
.mkd-wa-barra i:nth-child(3) { background: #28c840; }
.mkd-wa-barra u {
  margin-left: 8px;
  font-size: 0.38rem;
  color: var(--t3);
  text-decoration: none;
  background: white;
  border-radius: var(--rf);
  padding: 2px 10px;
}
.mkd-wa-cuerpo { flex: 1; display: flex; min-height: 0; }
.mkd-wa-lista {
  width: 30%;
  background: white;
  border-right: 1px solid rgba(0,0,0,.08);
  padding: 7px 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}
.mkd-wa-buscar { height: 12px; border-radius: var(--rf); background: var(--surface-2); margin-bottom: 3px; }
.mkd-wa-contacto { display: flex; align-items: center; gap: 5px; padding: 4px 5px; border-radius: 5px; }
.mkd-wa-contacto.activo { background: var(--surface-2); }
.mkd-wa-contacto em {
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  font-style: normal;
  font-size: 0.3rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mkd-wa-contacto:not(.activo) em { background: var(--surface-3); }
.mkd-wa-contacto span { flex: 1; min-width: 0; }
.mkd-wa-contacto u { display: block; font-size: 0.38rem; font-weight: 600; text-decoration: none; }
.mkd-wa-contacto s { display: block; font-size: 0.32rem; color: var(--t3); text-decoration: none; }
.mkd-wa-contacto:not(.activo) u,
.mkd-wa-contacto:not(.activo) s { background: var(--surface-2); border-radius: 3px; height: 4px; margin-top: 2px; }

.mkd-wa-chat { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.mkd-wa-header {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #075E54;
  color: white;
  font-size: 0.48rem;
  font-weight: 600;
  padding: 7px 10px;
  flex-shrink: 0;
}
.mkd-wa-header em {
  width: 15px; height: 15px;
  border-radius: 50%;
  background: rgba(255,255,255,.24);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.32rem;
  font-style: normal;
}
.mkd-wa-scroll { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 10px 6px; min-height: 0; }
.mkd-wa-burbuja {
  margin-left: auto;
  max-width: 74%;
  background: #DCF8C6;
  border-radius: 9px 9px 3px 9px;
  padding: 10px 13px;
  font-size: 0.5rem;
  line-height: 1.6;
  color: #111;
  white-space: pre-line;
  box-shadow: 0 1px 1px rgba(0,0,0,.08);
}
.mkd-wa-burbuja em { display: block; text-align: right; font-style: normal; font-size: 0.42rem; color: #4a9c5e; margin-top: 3px; }
.mkd-wa-input { display: flex; align-items: center; gap: 6px; padding: 7px 10px; background: #F0F0F0; flex-shrink: 0; }
.mkd-wa-input u { flex: 1; height: 15px; background: white; border-radius: var(--rf); }
.mkd-wa-input i {
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--wa);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.4rem;
  font-style: normal;
  flex-shrink: 0;
}

/* ══ PASO 3: la foto ocupa toda la pantalla del dispositivo ══
   Los datos van encima, sobre un degradé, con un zoom lento de fondo. Así
   el cierre se siente una escena y no una ficha con una foto arriba. */
.mk-entrega { flex: 1; display: flex; flex-direction: column; min-height: 0; position: relative; }
.mk-entrega-foto {
  position: absolute;
  inset: 0;
  background: var(--surface-3);
  overflow: hidden;
}
.mk-entrega-foto picture { display: contents; }
.mk-entrega-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 46%;
  display: block;
}
.mk-entrega-foto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,28,18,0) 34%, rgba(20,28,18,.55) 62%, rgba(20,28,18,.88) 100%);
}
/* Zoom lento: le da sensación de video */
.mk-pant[data-paso="3"].activa .mk-entrega-foto img {
  animation: p3-zoom var(--demo-dur) linear both;
}
@keyframes p3-zoom { from { transform: scale(1.04); } to { transform: scale(1.12); } }

.mk-entrega-info {
  position: relative;
  z-index: 2;
  margin-top: auto;
  background: none;
  border-top: none;
  padding: var(--space-6) var(--space-5) var(--space-4);
  flex-shrink: 0;
}
.mk-et {
  display: block;
  font-size: 0.52rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.75);
  font-weight: 700;
}
.mk-entrega-h {
  display: block;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: white;
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
  margin: 3px 0 var(--space-3);
}
.mk-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 9px;
  padding: 6px 10px;
  margin-bottom: 5px;
  font-size: 0.62rem;
  font-weight: 600;
  color: white;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.mk-chip i { font-style: normal; font-size: 0.78rem; }
/* Entradas escalonadas: la escena arma el mensaje de a poco */
.mk-pant[data-paso="3"].activa .mk-et,
.mk-pant[data-paso="3"].activa .mk-entrega-h,
.mk-pant[data-paso="3"].activa .mk-chip { animation: p3-sube .6s var(--ease) both; }
.mk-pant[data-paso="3"].activa .mk-entrega-h { animation-delay: .1s; }
.mk-pant[data-paso="3"].activa .mk-chip:nth-of-type(1) { animation-delay: .26s; }
.mk-pant[data-paso="3"].activa .mk-chip:nth-of-type(2) { animation-delay: .38s; }
@keyframes p3-sube { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ══════════════════════════════════════════════════════
   MOCKUP TELÉFONO (mobile)
   Proporción 9:19.5, como un celular moderno.
══════════════════════════════════════════════════════ */
.mk-tel {
  display: none;
  position: relative;
  width: 186px;
  aspect-ratio: 9 / 19.5;
  background: #1c211c;
  border-radius: 26px;
  padding: 6px;
  margin: 0 auto;
  box-shadow: var(--s4);
}
.mk-tel-notch {
  position: absolute;
  top: 11px; left: 50%;
  transform: translateX(-50%);
  width: 52px; height: 13px;
  background: #1c211c;
  border-radius: var(--rf);
  z-index: 30;
}
.mk-tel-screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--bg);
  border-radius: 21px;
  overflow: hidden;
}

.mkm-status {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 22px;
  padding: 0 11px 2px;
  font-size: 0.42rem;
  font-weight: 600;
  color: var(--t2);
  flex-shrink: 0;
}
.mkm-status u, .mkm-status i { text-decoration: none; font-style: normal; }

.mkm-top {
  height: 26px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 7px;
  background: white;
  border-bottom: 1px solid var(--line-soft);
  flex-shrink: 0;
}
.mkm-logo { height: 9px; width: auto; flex-shrink: 0; }
.mkm-search { flex: 1; height: 13px; border-radius: var(--rf); background: var(--surface-2); border: 1px solid var(--line-soft); }
.mkm-cart {
  width: 14px; height: 14px;
  border-radius: 4px;
  border: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--t2);
  flex-shrink: 0;
}
.mkm-cart svg { width: 8px; height: 8px; }

.mkm-chips { display: flex; gap: 3px; padding: 6px 7px 3px; overflow: hidden; flex-shrink: 0; }
.mkm-chips i {
  font-style: normal;
  font-size: 0.36rem;
  font-weight: 600;
  color: var(--t2);
  border: 1px solid var(--line);
  border-radius: var(--rf);
  padding: 3px 7px;
  white-space: nowrap;
  background: white;
}
.mkm-chips i.on { background: var(--accent); border-color: var(--accent); color: white; }

.mkm-sec { display: block; padding: 7px 7px 4px; }
.mkm-sec u {
  display: block;
  font-size: 0.33rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--t3);
  font-weight: 700;
  text-decoration: none;
}
.mkm-sec em { display: block; font-style: normal; font-size: 0.55rem; font-weight: 700; letter-spacing: -0.02em; }

.mkm-riel { display: flex; gap: 5px; padding: 0 7px; overflow: hidden; flex-shrink: 0; }
.mkm-card {
  width: 52px;
  flex-shrink: 0;
  background: white;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  padding: 4px;
  text-align: center;
  display: block;
  transition: transform .2s var(--ease);
}
.mkm-card i {
  display: block;
  height: 30px;
  background: var(--surface-2);
  border-radius: 4px;
  overflow: hidden;
  padding: 2px;
}
.mkm-card i img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.mkm-card u {
  display: block;
  font-size: 0.33rem;
  font-weight: 600;
  text-decoration: none;
  margin-top: 2px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mkm-card s { display: block; font-size: 0.3rem; color: var(--t3); text-decoration: none; }
.mkm-card b { display: block; font-size: 0.38rem; margin-top: 1px; }

/* ══ PASO 1 (mobile): tap en la card → modal → cantidad → agregar ══ */
.mkm-modal {
  position: absolute;
  z-index: 11;
  left: 50%;
  top: 50%;
  width: 86%;
  transform: translate(-50%, -46%) scale(.96);
  background: var(--surface);
  border-radius: 13px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0,0,0,.28);
  display: flex;
  flex-direction: column;
  opacity: 0;
}
.mkm-modal-foto {
  height: 78px;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px;
  flex-shrink: 0;
}
.mkm-modal-foto img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.mkm-modal-info { padding: 8px 10px 7px; border-bottom: 1px solid var(--line-soft); }
.mkm-modal-marca { display: block; font-size: 0.32rem; text-transform: uppercase; letter-spacing: .09em; color: var(--t3); font-weight: 700; }
.mkm-modal-nom { display: block; font-size: 0.62rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; }
.mkm-modal-precio { display: block; font-size: 0.78rem; font-weight: 700; margin-top: 4px; }
.mkm-modal-det { padding: 7px 10px 10px; }
.mkm-modal-tit {
  display: block;
  font-size: 0.3rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--t3);
  font-weight: 700;
}
.mkm-modal-chips { display: flex; gap: 3px; margin-top: 4px; }
.mkm-modal-chips i {
  font-style: normal;
  font-size: 0.34rem;
  font-weight: 600;
  color: var(--t2);
  border: 1px solid var(--line);
  border-radius: var(--rf);
  padding: 3px 6px;
  background: white;
}
.mkm-modal-chips i.on { background: var(--accent); border-color: var(--accent); color: white; }
.mkm-modal-fila { display: flex; gap: 5px; margin-top: 8px; }
.mkm-qty {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--rf);
  flex-shrink: 0;
}
.mkm-qty em { font-style: normal; font-size: 0.45rem; color: var(--t2); padding: 0 5px; line-height: 16px; }
.mkm-qty u { position: relative; width: 13px; height: 16px; text-decoration: none; }
.mkm-qty u b {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.4rem;
  font-weight: 700;
}
.mkm-add {
  flex: 1;
  position: relative;
  height: 18px;
  border-radius: var(--rf);
  background: var(--accent);
  overflow: hidden;
}
.mkm-add b {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.38rem;
  font-weight: 700;
}

/* ══ PASO 2 (mobile): botón flotante → carrito → WhatsApp ══ */
.mkm-flotante {
  position: absolute;
  right: 9px;
  bottom: 11px;
  z-index: 8;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 14px rgba(88,117,71,.45);
}
.mkm-flotante svg { width: 19px; height: 19px; }
.mkm-flotante b {
  position: absolute;
  top: -3px; right: -3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--t1);
  color: white;
  font-size: 0.52rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ══ PASO 1 (mobile) ══
   Sin puntero: en una pantalla táctil no hay cursor visible. Lo que marca
   dónde se tocó es la reacción del propio elemento — se hunde y se ilumina,
   exagerado respecto de la web real para que el gesto se lea claro. */
.mk-pant[data-paso="1"].activa .mkm-card.destino { animation: pm1-tap-card var(--demo-dur) var(--ease) infinite; }
@keyframes pm1-tap-card {
  0%, 20%  { transform: scale(1);    box-shadow: none; }
  24%      { transform: scale(.93);  box-shadow: 0 0 0 2.5px var(--accent); }
  28%      { transform: scale(1.01); box-shadow: 0 0 0 2px var(--accent-line); }
  33%,100% { transform: scale(1);    box-shadow: none; }
}
/* Botón "+" de cantidad */
.mk-pant[data-paso="1"].activa .mkm-qty-mas { animation: pm1-tap-mas var(--demo-dur) var(--ease) infinite; }
@keyframes pm1-tap-mas {
  0%, 47%  { transform: scale(1);   color: var(--t2);     background: transparent; }
  51%      { transform: scale(.8);  color: white;         background: var(--accent); }
  56%      { transform: scale(1.3); color: var(--accent); background: var(--accent-bg); }
  61%,100% { transform: scale(1);   color: var(--t2);     background: transparent; }
}
/* Botón "Agregar" */
.mk-pant[data-paso="1"].activa .mkm-add { animation: pm1-tap-add var(--demo-dur) var(--ease) infinite; }
@keyframes pm1-tap-add {
  0%, 70%  { transform: scale(1);   filter: brightness(1); }
  74%      { transform: scale(.94); filter: brightness(.82); }
  79%      { transform: scale(1.03);filter: brightness(1.08); }
  85%,100% { transform: scale(1);   filter: brightness(1); }
}

/* ══ PASO 2 (mobile) ══ */
.mk-pant[data-paso="2"].activa .mkm-flotante { animation: pm2-tap-flot var(--demo-dur) var(--ease) infinite; }
@keyframes pm2-tap-flot {
  0%, 22%  { transform: scale(1);   filter: brightness(1);   opacity: 1; }
  26%      { transform: scale(.84); filter: brightness(.8);  opacity: 1; }
  31%      { transform: scale(1.08);filter: brightness(1.1); opacity: 1; }
  35%      { transform: scale(1);   filter: brightness(1);   opacity: 1; }
  39%,100% { transform: scale(1);   filter: brightness(1);   opacity: 0; }
}
.mk-pant[data-paso="2"].activa .mkm-wa-btn { animation: pm2-tap-wa var(--demo-dur) var(--ease) infinite; }
@keyframes pm2-tap-wa {
  0%, 56%  { transform: scale(1);   filter: brightness(1); }
  60%      { transform: scale(.94); filter: brightness(.82); }
  65%      { transform: scale(1.03);filter: brightness(1.1); }
  70%,100% { transform: scale(1);   filter: brightness(1); }
}

.mkm-carrito {
  position: absolute;
  inset: 0;
  z-index: 9;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  padding-top: 22px;
  transform: translateY(100%);
}
.mk-pant[data-paso="2"].activa .mkm-carrito { animation: pd2-carrito var(--demo-dur) var(--ease) infinite; }
@keyframes pd2-carrito {
  0%, 25%   { transform: translateY(100%); }
  34%, 100% { transform: translateY(0); }
}
.mkm-carrito-tit { display: block; padding: 7px 9px 5px; font-size: 0.58rem; font-weight: 700; letter-spacing: -0.02em; }
.mkm-linea { display: flex; align-items: center; gap: 6px; padding: 4px 9px; }
.mkm-linea i {
  width: 20px; height: 20px;
  background: var(--surface-2);
  border-radius: 5px;
  overflow: hidden;
  padding: 2px;
  flex-shrink: 0;
}
.mkm-linea i img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.mkm-linea u { flex: 1; min-width: 0; font-size: 0.38rem; font-weight: 600; text-decoration: none; line-height: 1.3; }
.mkm-linea u em { display: block; font-style: normal; font-weight: 400; color: var(--t3); font-size: 0.33rem; }
.mkm-linea b { font-size: 0.4rem; }
.mkm-pie {
  display: block;
  margin-top: auto;
  padding: 8px 9px 10px;
  border-top: 1px solid var(--line-soft);
  background: white;
}
.mkm-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.mkm-total u { font-size: 0.38rem; color: var(--t2); text-decoration: none; }
.mkm-total b { font-size: 0.55rem; font-weight: 700; }
.mkm-wa-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 20px;
  border-radius: var(--rf);
  background: var(--wa);
  color: white;
  font-size: 0.42rem;
  font-weight: 700;
}
.mkm-wa-btn svg { width: 9px; height: 9px; }

.mkm-wa {
  position: absolute;
  inset: 0;
  z-index: 12;
  background: #ECE5DD;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
}
.mk-pant[data-paso="2"].activa .mkm-wa { animation: pd2-wa-mobile var(--demo-dur) var(--ease) infinite; }
@keyframes pd2-wa-mobile {
  0%, 62%  { transform: translateY(100%); }
  70%,100% { transform: translateY(0); }
}
.mkm-wa-header {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #075E54;
  color: white;
  font-size: 0.46rem;
  font-weight: 600;
  padding: 22px 9px 7px;
  flex-shrink: 0;
}
.mkm-wa-header em {
  width: 15px; height: 15px;
  border-radius: 50%;
  background: rgba(255,255,255,.24);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.32rem;
  font-style: normal;
}
.mkm-wa-burbuja {
  margin: 10px 8px 0 auto;
  max-width: 90%;
  background: #DCF8C6;
  border-radius: 9px 9px 3px 9px;
  padding: 9px 11px;
  font-size: 0.44rem;
  line-height: 1.6;
  color: #111;
  white-space: pre-line;
  box-shadow: 0 1px 1px rgba(0,0,0,.08);
}
.mkm-wa-burbuja em { display: block; text-align: right; font-style: normal; font-size: 0.37rem; color: #4a9c5e; margin-top: 3px; }
.mkm-wa-input { display: flex; align-items: center; gap: 5px; margin-top: auto; padding: 8px; }
.mkm-wa-input u { flex: 1; height: 18px; background: white; border-radius: var(--rf); }
.mkm-wa-input i {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--wa);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.45rem;
  font-style: normal;
  flex-shrink: 0;
}

/* ══ Tablet: mockup arriba, pasos abajo ══ */
@media (max-width: 1000px) {
  .demo-pasos {
    grid-template-columns: 1fr;
    gap: var(--space-7);
    max-width: 620px;
  }
  .pasos-lista { gap: var(--space-1); }
  .paso-item { padding: var(--space-3) var(--space-4); }
}

/* ══ Mobile: fuera la notebook, entra el teléfono ══
   Los pasos suben arriba del dispositivo y se comportan como un acordeón:
   solo el activo muestra su texto. Así la sección no se estira de largo. */
@media (max-width: 700px) {
  .mk-note { display: none; }
  .mk-tel { display: block; }
  /* Sin puntero que se traslade, la secuencia se resuelve más rápido */
  .demo-pasos { --demo-dur: 6.3s; max-width: 400px; gap: var(--space-5); }

  /* Pasos arriba del teléfono, como filas de acordeón. La línea vertical
     que conecta los anillos es solo del layout de escritorio. */
  .pasos-lista { order: -1; gap: 0; }
  .paso-item:not(:last-child)::before { display: none; }

  .paso-item {
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-3) var(--space-3) 0;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid var(--line-soft);
    background: none !important;
    box-shadow: none !important;
  }
  .paso-item:last-child { border-bottom: none; }

  /* El número queda como una pastilla quieta: el progreso se muestra en el
     botón de play de la derecha, que es lo que se toca. */
  .paso-anillo { width: 26px; height: 26px; background: var(--surface-2); }
  .paso-anillo svg,
  .paso-anillo-play { display: none; }
  .paso-anillo b { font-size: 0.76rem; color: var(--t2); }
  .paso-item.activo .paso-anillo { background: var(--accent); }
  .paso-item.activo .paso-anillo b { color: white; }

  .paso-item-h3 { font-size: 0.92rem; margin-bottom: 0; }
  .paso-item.activo .paso-item-h3 { color: var(--accent-2); }
  .paso-item-p { font-size: 0.82rem; }
  .paso-item.activo .paso-item-p { max-height: 160px; margin-top: 3px; }

  /* Botón de play con el anillo de progreso alrededor: deja claro que el
     paso se reproduce, y marca cuánto falta para el siguiente. */
  .paso-play {
    display: grid;
    place-items: center;
    position: relative;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    color: var(--t3);
    transition: color var(--t);
  }
  .paso-play svg.icono { width: 11px; height: 11px; }
  .paso-play svg.aro {
    position: absolute;
    inset: 0;
    width: 30px;
    height: 30px;
    transform: rotate(-90deg);
  }
  .paso-play svg.aro circle { fill: none; stroke-width: 2; }
  .paso-play .aro-pista { stroke: var(--surface-3); }
  .paso-play .aro-fill {
    stroke: var(--accent);
    stroke-linecap: round;
    stroke-dasharray: 81.7;
    stroke-dashoffset: 81.7;
  }
  .paso-item.activo .paso-play { color: var(--accent); }
  .paso-item.activo .paso-play .aro-fill {
    animation: paso-anillo-avance var(--demo-dur) linear forwards;
  }
  /* El paso activo ya se está reproduciendo: se muestra pausa en vez de play */
  .paso-item.activo .paso-play .icono-play { display: none; }
  .paso-item:not(.activo) .paso-play .icono-pausa { display: none; }

  /* Paso 3: en el teléfono se usa la versión vertical de la foto (ver el
     <picture> del HTML), compuesta con las manos y la bolsa en la mitad
     superior y el piso libre abajo, que es donde va el texto. */
  .mk-entrega-foto img { object-position: center top; }
  .mk-pant[data-paso="3"].activa .mk-entrega-foto img { animation: p3-zoom-mobile var(--demo-dur) linear both; }
  @keyframes p3-zoom-mobile { from { transform: scale(1); } to { transform: scale(1.05); } }
  .mk-entrega-info { padding: var(--space-5) var(--space-4) var(--space-4); }
  .mk-entrega-h { font-size: 0.92rem; margin-bottom: var(--space-2); }
  .mk-chip { font-size: 0.56rem; padding: 5px 8px; margin-bottom: 4px; }
  .mk-chip i { font-size: 0.68rem; }
}


/* ══════════════════════════════════════════════════════
   NOSOTROS + LAS VUELTAS QUE TE AHORRAMOS
   Dos columnas en escritorio: el manifiesto a la izquierda y el esquema de
   vueltas a la derecha, para que la sección no se estire de largo. En
   mobile se apila y el esquema queda como lista debajo del texto.
══════════════════════════════════════════════════════ */
.vueltas {
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-soft);
}
.vueltas-inner {
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: var(--space-9) var(--space-5);
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: var(--space-9);
  align-items: center;
}

/* ── Izquierda: manifiesto ── */
.ns-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-4);
}
.ns-eyebrow::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--accent-line);
  max-width: 70px;
}
.ns-frase {
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.1;
  color: var(--t1);
  margin-bottom: var(--space-5);
  max-width: 14ch;
}
/* La palabra clave en verde, con un subrayado dibujado a mano que se traza
   solo cuando la sección entra en pantalla. */
.ns-frase em {
  font-style: normal;
  position: relative;
  color: var(--accent-2);
  white-space: nowrap;
}
.ns-frase em svg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.14em;
  width: 100%;
  height: .3em;
  overflow: visible;
}
.ns-frase em path {
  fill: none;
  stroke: var(--accent-line);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
}
.vueltas.visible .ns-frase em path { animation: ns-trazo 1.1s var(--ease) .3s forwards; }
@keyframes ns-trazo { to { stroke-dashoffset: 0; } }

.ns-bajada {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--t2);
  line-height: 1.7;
  margin-bottom: var(--space-3);
  max-width: 44ch;
}
.ns-bajada:last-child { margin-bottom: 0; }
.ns-bajada strong {
  font-family: var(--font);
  font-weight: 600;
  color: var(--t1);
}

/* ── Derecha: esquema de vueltas ── */
.ns-esquema {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r5);
  padding: var(--space-6) var(--space-6) var(--space-5);
  box-shadow: var(--s1);
}
.ns-esquema-tit {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--t3);
  text-align: center;
  margin-bottom: var(--space-5);
}
/* Dos columnas dentro de la tarjeta: las vueltas a la izquierda, la
   solución a la derecha, con la flecha en el medio. Se mantiene así también
   en mobile (achicando tipografía) porque el contraste izquierda/derecha es
   lo que cuenta la historia. */
.ns-esquema-cols {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
}
.ns-col ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.ns-col li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.88rem;
  line-height: 1.25;
  opacity: 0;
  transform: translateY(7px);
}
.vueltas.visible .ns-col li { animation: ns-sube .45s var(--ease) forwards; }
.vueltas.visible .ns-col li:nth-child(1) { animation-delay: .30s; }
.vueltas.visible .ns-col li:nth-child(2) { animation-delay: .38s; }
.vueltas.visible .ns-col li:nth-child(3) { animation-delay: .46s; }
.vueltas.visible .ns-col li:nth-child(4) { animation-delay: .54s; }
.vueltas.visible .ns-col li:nth-child(5) { animation-delay: .62s; }
.vueltas.visible .ns-col li:nth-child(6) { animation-delay: .70s; }
@keyframes ns-sube { to { opacity: 1; transform: none; } }
.ns-col i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.6rem;
  font-style: normal;
  flex-shrink: 0;
}
/* Las vueltas: tachadas y en gris */
.ns-col--no li {
  color: var(--t3);
  text-decoration: line-through;
  text-decoration-color: var(--line);
}
.ns-col--no i { background: var(--surface-2); color: var(--t3); }
/* La solución: destacada */
.ns-col--si li { color: var(--t1); font-weight: 500; }
.ns-col--si i { background: var(--accent); color: white; }

/* La flecha ahora apunta hacia la derecha y vive en la columna del medio */
.ns-flecha {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-line);
  margin: 0;
}
.ns-flecha svg { width: 24px; height: 24px; }

/* ── Tablet y mobile: una sola columna ──
   Al apilarse, el manifiesto queda centrado: alineado a la izquierda se ve
   como una columna suelta arriba de la tarjeta. La línea del eyebrow pasa a
   los dos lados para que el centrado se lea intencional. */
@media (max-width: 900px) {
  .vueltas-inner {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    max-width: 560px;
  }
  .ns-txt { text-align: center; }
  .ns-eyebrow { justify-content: center; }
  .ns-eyebrow::before {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--accent-line);
    max-width: 70px;
  }
  /* "Comprar debería ser más simple" tiene que entrar en un solo renglón:
     el tamaño se ata al ancho de pantalla y no se permite el corte. */
  .ns-frase {
    max-width: none;
    font-size: min(1.45rem, 5.45vw);
    letter-spacing: -.035em;
    white-space: nowrap;
  }
  .ns-frase em svg { height: .26em; bottom: -.1em; }
  .ns-bajada { max-width: 42ch; margin-left: auto; margin-right: auto; }
  .ns-esquema { padding: var(--space-5) var(--space-4) var(--space-4); }
}

/* En pantallas angostas la tarjeta sigue en dos columnas: se achica la
   tipografía y los espacios en vez de apilar. */
@media (max-width: 560px) {
  .ns-esquema-cols { gap: var(--space-2); }
  .ns-col li { font-size: 0.76rem; gap: 7px; }
  .ns-col i { width: 16px; height: 16px; font-size: 0.54rem; }
  .ns-flecha svg { width: 18px; height: 18px; }
}


/* ════════════════════════════════════════════════════
   FAQ
   Sección deliberadamente callada: encabezado a la izquierda con la salida a
   WhatsApp, acordeón de líneas finas a la derecha. Sin barras de color ni
   sombras — lo único que se mueve es el chevron y la altura de la respuesta.
════════════════════════════════════════════════════ */
.faq-section {
  background: var(--bg);
  border-bottom: 1px solid var(--line-soft);
}
.faq-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--space-9) var(--space-5);
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: var(--space-8);
  align-items: start;
}

/* ── Columna izquierda ── */
.faq-header { position: static; }
.faq-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t3);
  margin-bottom: 8px;
}
.faq-title {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.2;
  color: var(--t1);
  margin-bottom: var(--space-4);
}
.faq-ayuda {
  font-family: var(--font-body);
  font-size: 0.8rem;
  line-height: 1.65;
  color: var(--t2);
}
.faq-ayuda a {
  color: var(--accent-2);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-line);
  transition: border-color var(--t);
}
.faq-ayuda a:hover { border-bottom-color: var(--accent-2); }

/* ── Acordeón ── */
.faq-list { display: flex; flex-direction: column; }

.faq-item { border-bottom: 1px solid var(--line-soft); }
.faq-item:first-child { border-top: 1px solid var(--line-soft); }

.faq-pregunta {
  width: 100%;
  background: none;
  border: none;
  padding: 14px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  text-align: left;
  font-size: 0.855rem;
  font-weight: 500;
  color: var(--t1);
  transition: color var(--t);
}
.faq-pregunta:hover { color: var(--accent-2); }
.faq-item.open .faq-pregunta { color: var(--accent-2); }

.faq-chev {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--t3);
  transition: transform 0.3s var(--ease), color var(--t);
}
.faq-item.open .faq-chev { transform: rotate(180deg); color: var(--accent-2); }

/* La respuesta se despliega con grid-template-rows 0fr→1fr: así transiciona
   el alto sin tener que medirlo en JS. */
.faq-resp-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s var(--ease);
}
.faq-item.open .faq-resp-wrap { grid-template-rows: 1fr; }
.faq-respuesta { overflow: hidden; }
.faq-respuesta p {
  padding: 0 var(--space-5) 14px 0;
  font-family: var(--font-body);
  font-size: 0.83rem;
  line-height: 1.7;
  color: var(--t2);
}

@media (prefers-reduced-motion: reduce) {
  .faq-resp-wrap, .faq-chev { transition: none; }
}


/* ══════════════════════════════════════════════════════
   CTA FINAL
══════════════════════════════════════════════════════ */
/* La sección va en gris y el mensaje en una tarjeta blanca elevada, con un
   patrón de puntitos verdes en dos esquinas opuestas. */
.cta-final {
  background: var(--surface-2);
}
.cta-final-inner {
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: var(--space-8) var(--space-5);
  display: flex;
  justify-content: center;
}
.cta-card {
  position: relative;
  overflow: hidden;
  max-width: 680px;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r5);
  padding: var(--space-8) var(--space-7);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  text-align: center;
  box-shadow: 0 1px 2px rgba(47, 52, 48, .05), 0 16px 40px rgba(47, 52, 48, .07);
}
/* Los puntitos se recortan con una máscara radial para que se desvanezcan
   hacia el centro en vez de cortarse con un borde duro. */
.cta-card::before,
.cta-card::after {
  content: '';
  position: absolute;
  width: 150px;
  height: 150px;
  background-image: radial-gradient(var(--accent-line) 1.2px, transparent 1.2px);
  background-size: 13px 13px;
  opacity: .5;
  pointer-events: none;
}
.cta-card::before {
  top: -20px;
  right: -20px;
  -webkit-mask-image: radial-gradient(circle at 100% 0, #000, transparent 72%);
  mask-image: radial-gradient(circle at 100% 0, #000, transparent 72%);
}
.cta-card::after {
  bottom: -20px;
  left: -20px;
  -webkit-mask-image: radial-gradient(circle at 0 100%, #000, transparent 72%);
  mask-image: radial-gradient(circle at 0 100%, #000, transparent 72%);
}
.cta-final h2 {
  position: relative;
  z-index: 2;
  font-family: var(--font);
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.1;
  color: var(--t1);
  margin: 0;
}
.cta-final h2 strong {
  font-weight: 700;
  color: var(--accent-2);
}
.cta-final .btn-primary { position: relative; z-index: 2; }


/* ══════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════ */
.footer {
  background: var(--accent);
}
.footer-inner {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-5) var(--space-4);
  text-align: center;
}

.footer-logo {
  height: 36px;
  width: auto;
  margin: 0 auto var(--space-3);
  display: block;
  filter: brightness(0) invert(1);
}

.footer-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.footer-nav-link {
  height: 28px;
  padding: 0 var(--space-3);
  border: none;
  background: none;
  color: rgba(255,255,255,0.85);
  font-size: 0.8rem;
  font-weight: 500;
  border-radius: var(--r2);
  transition: background var(--t), color var(--t);
  white-space: nowrap;
}
.footer-nav-link:hover { background: rgba(255,255,255,0.12); color: white; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.2);
  padding-top: var(--space-3);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.footer-copy {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.7);
}
.footer-dot {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.4);
}
.footer-whatsapp {
  font-size: 0.78rem;
  font-weight: 600;
  color: white;
  text-decoration: none;
  transition: opacity var(--t);
}
.footer-whatsapp:hover { opacity: 0.8; }

@media (max-width: 480px) {
  .footer-bottom { flex-direction: column; gap: var(--space-2); }
  .footer-dot { display: none; }
}


/* ══════════════════════════════════════════════════════
   VISTA CATÁLOGO
══════════════════════════════════════════════════════ */
.catalogo-topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line-soft);
  height: 48px;
}
.catalogo-topbar-inner {
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: 0 var(--space-5);
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  font-size: 0.845rem;
  font-weight: 500;
  color: var(--t2);
  padding: var(--space-1) 0;
  border-radius: var(--r1);
  transition: color var(--t);
}
.back-btn svg { width: 16px; height: 16px; }
.back-btn:hover { color: var(--accent); }

.catalogo-titulo-label {
  font-size: 0.845rem;
  color: var(--t3);
  font-weight: 400;
}

/* Filtros (chips). Solo se usan en mobile: en escritorio la navegación la
   resuelve el sidebar, así que se ocultan más abajo con una media query. */
.filtros-wrap {
  background: var(--surface);
  border-bottom: 1px solid var(--line-soft);
  overflow-x: auto;
  scrollbar-width: none;
}
.filtros-wrap::-webkit-scrollbar { display: none; }

.filtros {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  max-width: var(--content-wide);
  margin: 0 auto;
  white-space: nowrap;
}

.filtro-btn {
  height: 30px;
  padding: 0 var(--space-3);
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--rf);
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--t2);
  flex-shrink: 0;
  transition: all var(--t);
}
.filtro-btn:hover { border-color: var(--accent-line); color: var(--accent); background: var(--accent-bg); }
.filtro-btn.active { background: var(--accent); border-color: var(--accent); color: white; font-weight: 600; }

/* Subfiltros */
.subfiltros-wrap {
  background: var(--bg);
  border-bottom: 1px solid var(--line-soft);
  overflow-x: auto;
  scrollbar-width: none;
  display: none;
}
.subfiltros-wrap::-webkit-scrollbar { display: none; }
.subfiltros-wrap.visible { display: block; }

.subfiltros {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  max-width: var(--content-wide);
  margin: 0 auto;
  white-space: nowrap;
}

.subfiltro-btn {
  height: 26px;
  padding: 0 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--rf);
  font-family: var(--font);
  font-size: 0.775rem;
  font-weight: 500;
  color: var(--t2);
  flex-shrink: 0;
  transition: all var(--t);
}
.subfiltro-btn:hover { border-color: var(--accent-line); color: var(--accent); }
.subfiltro-btn.active { background: var(--accent-bg); border-color: var(--accent-line); color: var(--accent); font-weight: 600; }

/* ══════════════════════════════════════════════════════
   LAYOUT DE ESCRITORIO: SIDEBAR + GRILLA
   En pantalla ancha la navegación pasa de una fila de chips a una columna
   fija con categorías y subcategorías siempre visibles. En mobile el
   sidebar se oculta y siguen mandando los chips + los rieles.
══════════════════════════════════════════════════════ */
.catalogo-layout {
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  gap: var(--space-7);
  max-width: var(--content-wide);
  margin: 0 auto;
  align-items: start;
}

.cat-sidebar {
  position: sticky;
  /* topbar (72) + barra del catálogo (48) */
  top: 120px;
  /* Alto exacto de la ventana descontando lo que queda arriba: el sidebar
     nunca se va con el scroll de la página y, si la lista es más larga que
     la pantalla, scrollea por dentro. */
  height: calc(100vh - 120px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.cat-sidebar::-webkit-scrollbar { width: 6px; }
.cat-sidebar::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--rf); }
.cat-sidebar-inner { padding: var(--space-6) 0 var(--space-7); }

.cat-sidebar-titulo {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin: 0 0 var(--space-3) var(--space-3);
}

.cat-nav-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px var(--space-3);
  border: none;
  border-radius: 10px;
  background: none;
  text-align: left;
  font-family: var(--font);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--t1);
  transition: background var(--t), color var(--t);
}
.cat-nav-btn:hover { background: var(--surface-2); }
.cat-nav-btn.active { background: var(--accent); color: white; }
.cat-nav-btn.active .cat-nav-num { color: rgba(255,255,255,.78); }
/* Categoría desplegada pero con una subcategoría elegida: se marca suave */
.cat-nav-btn.en-rama:not(.active) { color: var(--accent-2); }

/* Icono de categoría: mismo set de la sección "Categorías principales" */
.cat-nav-icono {
  display: flex;
  flex-shrink: 0;
  color: var(--accent);
  transition: color var(--t);
}
.cat-nav-icono svg { width: 18px; height: 18px; }
.cat-nav-btn.active .cat-nav-icono { color: white; }
.cat-nav-txt {
  flex: 1;
  min-width: 0;
  /* Los nombres largos ("Desayuno y Mediatarde") se parten en dos líneas
     en vez de cortarse con puntos suspensivos. */
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.cat-nav-num {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--t3);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.cat-nav-chevron {
  display: flex;
  flex-shrink: 0;
  color: var(--t3);
  transition: transform var(--t) var(--ease);
}
.cat-nav-chevron svg { width: 14px; height: 14px; }
.cat-nav-chevron.abierto { transform: rotate(180deg); }
.cat-nav-btn.active .cat-nav-chevron { color: rgba(255,255,255,.8); }

.cat-nav-subs {
  display: none;
  margin: 2px 0 var(--space-3) var(--space-4);
  padding-left: var(--space-3);
  border-left: 1px solid var(--line-soft);
}
.cat-nav-subs.abierto { display: block; }

.cat-nav-sub {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  border: none;
  border-radius: 8px;
  background: none;
  text-align: left;
  font-family: var(--font-body);
  font-size: 0.815rem;
  color: var(--t2);
  transition: background var(--t), color var(--t);
}
.cat-nav-sub:hover { background: var(--accent-bg); color: var(--accent); }
.cat-nav-sub.active {
  background: var(--accent-bg);
  color: var(--accent-2);
  font-weight: 700;
}

/* ── Encabezado de la grilla ── */
.catalogo-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--line-soft);
}
.catalogo-crumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: var(--t3);
  margin-bottom: 5px;
}
.catalogo-crumb-paso {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font);
  font-size: inherit;
  color: var(--t2);
  transition: color var(--t);
}
button.catalogo-crumb-paso:hover { color: var(--accent); text-decoration: underline; }
.catalogo-crumb-paso.actual { color: var(--t3); }
.catalogo-crumb-sep { color: var(--line); }

.catalogo-h1 {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--t1);
  line-height: 1.1;
}
.catalogo-cuenta {
  font-size: 0.8rem;
  color: var(--t3);
  margin-top: 4px;
}

/* Grid */
.catalogo-main {
  min-width: 0;
  padding: var(--space-6) var(--space-5) 120px 0;
}

/* Escritorio: la navegación es el sidebar, no los chips */
@media (min-width: 901px) {
  .filtros-wrap,
  .subfiltros-wrap { display: none !important; }
}

/* Tablet / mobile: sin sidebar, vuelven los chips y el layout es de una
   sola columna. El encabezado grande tampoco aporta en pantalla angosta:
   ya está la barra del catálogo con el nombre de la sección. */
@media (max-width: 900px) {
  .catalogo-layout { display: block; }
  .cat-sidebar { display: none; }
  .catalogo-head { display: none; }
  .catalogo-main { padding: var(--space-6) var(--space-5) 120px; }
}

.seccion-titulo {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: .09em;
  margin: var(--space-7) 0 var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.seccion-titulo::after { content: ''; flex: 1; height: 1px; background: var(--line-soft); }
.seccion-titulo:first-child { margin-top: 0; }

/* Con el sidebar (244px + gap) la zona de grilla ronda los 988px en la
   máxima: con un mínimo de 148px entran 6 columnas en vez de 4. */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 10px;
}

/* Al achicar la columna, la tipografía y los espacios de la card bajan en
   proporción; si no, el texto queda desbordado y la foto se pierde. El
   nombre se recorta a dos renglones para que todas midan lo mismo. */
.grid > .card { border-radius: var(--r3); }
.grid > .card .card-img-wrap img { padding: var(--space-2); }
.grid > .card .card-body { padding: var(--space-2) var(--space-3) var(--space-3); }
.grid > .card .card-marca { font-size: 0.6rem; letter-spacing: .06em; margin-bottom: 2px; }
.grid > .card .card-nombre {
  font-size: 0.78rem;
  line-height: 1.28;
  min-height: calc(0.78rem * 1.28 * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.grid > .card .card-variante-label { font-size: 0.68rem; margin-bottom: 5px; min-height: 12px; }
.grid > .card .card-precio { font-size: 0.92rem; }
.grid > .card .card-precio.sin-precio { font-size: 0.68rem; }
.grid > .card .card-precio-dto { font-size: 0.68rem; }


/* ══════════════════════════════════════════════════════
   RIELES HORIZONTALES (catálogo mobile)
   Con 500+ productos la grilla vertical es un scroll sin fin: en mobile
   cada subcategoría se recorre deslizando en horizontal, y se cambia de
   subcategoría scrolleando hacia abajo.
══════════════════════════════════════════════════════ */
.riel-sec {
  margin: 0 calc(var(--space-4) * -1);
  /* Sin líneas divisorias: el título de cada sección y su barra de scroll
     ya separan visualmente lo suficiente, y las líneas comían alto. */
  padding: var(--space-4) 0 var(--space-3);
}
.riel-sec:first-child { padding-top: var(--space-2); }

/* ── Encabezado de sección ── */
.riel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 var(--space-4) var(--space-3);
}
.riel-head-marca {
  width: 4px;
  align-self: stretch;
  min-height: 30px;
  border-radius: var(--rf);
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-line) 100%);
  flex-shrink: 0;
}
.riel-head-txt { flex: 1; min-width: 0; }
.riel-head-cat {
  display: block;
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 1px;
}
.riel-head-titulo {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--t1);
  line-height: 1.15;
}
.riel-head-cuenta {
  flex-shrink: 0;
  align-self: center;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--t2);
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--rf);
  padding: 3px 10px;
  white-space: nowrap;
}

/* ── Riel ── */
.riel-wrap { position: relative; }
.riel {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding: 2px var(--space-4) var(--space-2);
  /* Sin esto, el snap alinea la primera card contra el borde del contenedor
     ignorando el padding izquierdo: el riel quedaba arrancado en ~16px y
     nunca podía volver al 0 real (mostraba sombra y flecha izquierda desde
     el principio). */
  scroll-padding-left: var(--space-4);
  scroll-padding-right: var(--space-4);
}
.riel::-webkit-scrollbar { display: none; }
.riel > .card {
  /* Entran 2 cards y media por pantalla: la mitad de la tercera asomando
     es, en sí misma, la señal de que la sección sigue hacia la derecha. */
  flex: 0 0 36vw;
  max-width: 158px;
  scroll-snap-align: start;
}
.riel > .card .card-body { padding: var(--space-2) var(--space-3) var(--space-3); }
.riel > .card .card-marca { font-size: 0.6rem; }
.riel > .card .card-nombre { font-size: 0.8rem; }
.riel > .card .card-variante-label { font-size: 0.7rem; }
.riel > .card .card-precio { font-size: 0.95rem; }
.riel > .card .card-precio-dto { font-size: 0.68rem; }
.riel > .card .card-img-wrap { touch-action: pan-x pan-y; }

/* ── Indicadores de "hay más al costado" ──
   Degradés que tapan a medias la card siguiente + flecha tocable. Aparecen
   solo cuando efectivamente queda contenido para ese lado. */
.riel-wrap::before,
.riel-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 46px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms var(--ease);
  z-index: 2;
}
.riel-wrap::before {
  left: 0;
  background: linear-gradient(90deg, rgba(250,250,247,.92) 0%, rgba(250,250,247,.55) 45%, rgba(250,250,247,0) 100%);
}
.riel-wrap::after {
  right: 0;
  background: linear-gradient(270deg, rgba(250,250,247,.92) 0%, rgba(250,250,247,.55) 45%, rgba(250,250,247,0) 100%);
}
.riel-wrap.hay-antes::before { opacity: 1; }
.riel-wrap.hay-mas::after { opacity: 1; }

/* Chevron lateral: solo una insinuación de que la sección sigue para ese
   lado. Sin fondo ni sombra, y sin ser tocable, para que nadie lo lea como
   un botón — el movimiento se hace deslizando. */
.riel-flecha {
  position: absolute;
  top: 30%;
  z-index: 3;
  display: grid;
  place-items: center;
  color: var(--t3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms var(--ease);
}
.riel-flecha svg {
  width: 15px;
  height: 15px;
  filter: drop-shadow(0 0 3px rgba(250,250,247,.95));
}
.riel-flecha-der { right: 5px; }
.riel-flecha-izq { left: 5px; }
.riel-wrap.hay-mas   .riel-flecha-der,
.riel-wrap.hay-antes .riel-flecha-izq { opacity: .85; }

/* ══════════════════════════════════════════════════════
   CARD
══════════════════════════════════════════════════════ */
.card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r4);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: border-color var(--t) var(--ease),
              box-shadow var(--t) var(--ease),
              transform var(--t) var(--ease);
}
.card:hover {
  border-color: var(--accent-line);
  box-shadow: var(--s2);
  transform: translateY(-2px);
}
.card.expanded {
  border-color: var(--accent-line);
  box-shadow: var(--s2);
  transform: none;
  cursor: default;
}

/* Imagen */
.card-img-wrap {
  width: 100%;
  aspect-ratio: 1;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  /* Permite el scroll vertical nativo del navegador; el swipe horizontal
     para cambiar de variante (solo con la card abierta) lo maneja el JS. */
  touch-action: pan-y;
}
.card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-3);
  filter:
    drop-shadow(0px 18px 8px rgba(60, 90, 45, 0.50))
    drop-shadow(0px 22px 18px rgba(60, 90, 45, 0.28))
    drop-shadow(0px 30px 28px rgba(60, 90, 45, 0.12));
  transition: opacity 280ms ease, transform 280ms ease;
}
.card-img-placeholder {
  font-size: 2rem;
  opacity: .2;
  user-select: none;
}

/* Dots variante */
.variante-dots {
  position: absolute;
  bottom: var(--space-2);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
}
.variante-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(0,0,0,.15);
  transition: background var(--t);
}
.variante-dot.active { background: var(--accent); }

/* Badge carrito */
.card-en-carrito {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  height: 20px;
  padding: 0 8px;
  background: var(--accent);
  color: white;
  border-radius: var(--rf);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: .03em;
  display: none;
  align-items: center;
}
.card-en-carrito.visible { display: flex; }

/* Body */
.card-body { padding: var(--space-3) var(--space-4) var(--space-4); }

.card-marca {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 3px;
}
.card-nombre {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--t1);
  line-height: 1.3;
  margin-bottom: var(--space-1);
  letter-spacing: -0.01em;
}
.card-variante-label {
  font-size: 0.75rem;
  color: var(--t3);
  margin-bottom: var(--space-2);
  min-height: 14px;
  transition: opacity 0.2s var(--ease);
}
.card-precio {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: -0.02em;
  transition: opacity 0.2s var(--ease);
}
.card-precio.sin-precio {
  font-size: 0.75rem;
  color: var(--t3);
  font-weight: 400;
}

/* Precio con descuento por cantidad, debajo del precio normal.
   El texto en general queda gris; solo el precio (strong) resalta. */
.card-precio-dto {
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--t3);
  margin-top: 2px;
  transition: opacity 0.2s var(--ease);
}
.card-precio-dto strong {
  color: var(--accent-2);
  font-weight: 700;
}

/* Bloque de opciones + cantidad (vive dentro del modal de producto) */
.card-expanded {
  display: none;
  padding: 0 var(--space-5) var(--space-5);
}
.card-expanded.pm-detalle-visible { display: block; }

.variantes-titulo {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin: var(--space-3) 0 var(--space-2);
}

.variantes-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.chip {
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--rf);
  background: var(--surface);
  font-family: var(--font);
  font-size: 0.775rem;
  font-weight: 500;
  color: var(--t2);
  transition: all var(--t);
}
.chip:hover { border-color: var(--accent-line); color: var(--accent); }
.chip.selected { background: var(--accent); border-color: var(--accent); color: white; }
.chip.disabled { opacity: .3; pointer-events: none; }

/* Precio detalle */
.precio-detalle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--accent-bg);
  border-radius: var(--r2);
  padding: var(--space-2) var(--space-3);
  margin: var(--space-3) 0;
}
.precio-detalle-label { font-size: 0.75rem; color: var(--t2); }
.precio-detalle-valor { font-size: 1.15rem; font-weight: 600; color: var(--accent); letter-spacing: -0.02em; }
.precio-detalle-valor.sin-precio { font-size: 0.8rem; color: var(--t3); font-weight: 400; }

/* Descuento */
.descuento-bloque {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  border: none;
  border-radius: var(--r3);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
  text-align: center;
  box-shadow: 0 6px 16px rgba(88, 117, 71, .28);
}
.descuento-info {
  font-size: 0.8rem;
  color: white;
}
.descuento-info .dto-cantidad {
  display: block;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, .85);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 2px;
}
.descuento-info strong {
  display: block;
  font-size: 1.5rem;
  color: white;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Qty + agregar */
.qty-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.qty-ctrl {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--rf);
  overflow: hidden;
  flex-shrink: 0;
}
.qty-btn {
  width: 30px;
  height: 30px;
  border: none;
  background: none;
  font-size: 1rem;
  font-weight: 400;
  color: var(--t2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--t), color var(--t);
}
.qty-btn:hover { background: var(--surface-2); color: var(--t1); }

.qty-num::-webkit-inner-spin-button,
.qty-num::-webkit-outer-spin-button,
.ci-qty-num::-webkit-inner-spin-button,
.ci-qty-num::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.qty-num-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
  border-left: 1px solid var(--line-soft);
  border-right: 1px solid var(--line-soft);
  padding: 0 4px;
  cursor: pointer;
  transition: all var(--t);
}
.qty-num-wrap:hover {
  background: var(--accent-bg);
}
.qty-num-wrap:focus-within {
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--accent);
}

.qty-num {
  width: 28px;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  border: none;
  outline: none;
  font-family: var(--font);
  background: transparent;
  color: var(--t1);
  padding: 4px 0;
  cursor: pointer;
  -moz-appearance: textfield;
}
.qty-edit-icon-wrap {
  display: inline-flex;
  align-items: center;
  pointer-events: none;
}
.qty-edit-icon, .ci-qty-edit-icon {
  width: 13px;
  height: 13px;
  stroke: var(--t2);
  opacity: 0.6;
  pointer-events: none;
  flex-shrink: 0;
  transition: opacity var(--t);
}

.qty-num-wrap:focus-within .qty-edit-icon,
.ci-qty-wrap:focus-within .ci-qty-edit-icon {
  opacity: 0;
}

.qty-ctrl.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--surface-2);
}
.qty-ctrl.disabled * {
  cursor: not-allowed !important;
}

@keyframes optionShake {
  0% { transform: translateX(0); }
  15% { transform: translateX(-6px); }
  30% { transform: translateX(5px); }
  45% { transform: translateX(-4px); }
  60% { transform: translateX(3px); }
  75% { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}

@keyframes optionGlow {
  0% {
    box-shadow: 0 0 0 0 rgba(110, 139, 91, 0);
  }
  30% {
    box-shadow: 0 0 0 5px rgba(110, 139, 91, 0.4);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(110, 139, 91, 0);
  }
}

.chip.option-alert {
  animation: optionShake 0.45s ease-in-out, optionGlow 0.8s ease-in-out !important;
  border-color: var(--accent) !important;
  color: var(--accent-2) !important;
  background: var(--accent-bg) !important;
  font-weight: 600 !important;
}

.variantes-titulo.option-alert {
  animation: optionShake 0.45s ease-in-out !important;
  color: var(--accent-2) !important;
  font-weight: 700 !important;
}

.agregar-btn {
  flex: 1;
  height: 34px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: var(--rf);
  font-family: var(--font);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  transition: background var(--t), transform var(--t);
}
.agregar-btn:hover { background: var(--accent-2); }
.agregar-btn:active { transform: scale(.98); }
.agregar-btn:disabled { background: var(--surface-3); color: var(--t3); cursor: pointer; }

@media (min-width: 769px) {
  .agregar-btn-text {
    display: none;
  }
}

@media (max-width: 768px) {
  .agregar-btn-text {
    display: inline;
    margin-left: 2px;
  }
}

.cerrar-card {
  display: block;
  width: 100%;
  margin-top: var(--space-3);
  background: none;
  border: none;
  font-family: var(--font);
  font-size: 0.75rem;
  color: var(--t3);
  text-align: center;
  padding: var(--space-1);
  transition: color var(--t);
}
.cerrar-card:hover { color: var(--t2); }


/* ══════════════════════════════════════════════════════
   MODAL DE PRODUCTO
   Tocar una card abre el detalle centrado, con el catálogo desenfocado
   detrás. En escritorio el panel es apaisado (foto a la izquierda, datos a
   la derecha) para que entre entero sin scroll; en mobile se apila.
══════════════════════════════════════════════════════ */
body.modal-abierto {
  /* position:fixed + top negativo congela la página de fondo sin perder la
     posición de scroll (overflow:hidden solo no alcanza en iOS). */
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

.pm-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  background: rgba(28, 34, 28, .48);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  opacity: 0;
  transition: opacity 200ms var(--ease);
  overscroll-behavior: contain;
}
.pm-overlay.visible { opacity: 1; }

.pm-panel {
  position: relative;
  display: flex;
  width: 100%;
  max-width: 700px;
  max-height: min(86dvh, 500px);
  background: var(--surface);
  border-radius: var(--r5);
  box-shadow: var(--s4);
  overflow: hidden;
  transform: translateY(10px) scale(.98);
  transition: transform 220ms var(--ease);
}
.pm-overlay.visible .pm-panel { transform: translateY(0) scale(1); }

.pm-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--line-soft);
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  color: var(--t1);
  display: grid;
  place-items: center;
  transition: background var(--t), color var(--t);
}
.pm-close svg { width: 15px; height: 15px; }
.pm-close:hover { background: var(--surface-2); color: var(--accent-2); }

/* ── Columna de la foto ── */
.pm-media {
  position: relative;
  flex: 0 0 44%;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: pan-y;
}
.pm-img {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.pm-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--space-5);
  mix-blend-mode: multiply;
}
.pm-img-placeholder { font-size: 2.6rem; opacity: .35; }

/* Flechas para cambiar de variante: discretas, al costado de la foto. */
.pm-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,0,0,.06);
  color: var(--t2);
  display: grid;
  place-items: center;
  transition: background var(--t), color var(--t);
}
.pm-nav svg { width: 14px; height: 14px; }
.pm-nav:hover { background: white; color: var(--accent-2); }
.pm-nav-prev { left: 8px; }
.pm-nav-next { right: 8px; }
.pm-panel.sin-variantes .pm-nav,
.pm-panel.sin-variantes .pm-dots { display: none; }

.pm-dots {
  position: absolute;
  bottom: var(--space-3);
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  gap: 5px;
}
.pm-dots .variante-dot { width: 5px; height: 5px; background: rgba(0,0,0,.18); }
/* Sin esta regla, la de arriba (misma especificidad pero posterior en el
   archivo) dejaba también en gris el punto de la variante seleccionada. */
.pm-dots .variante-dot.active { background: var(--accent); }

/* ── Columna de datos ── */
.pm-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.pm-info {
  padding: var(--space-6) var(--space-5) var(--space-3);
  border-bottom: 1px solid var(--line-soft);
}
.pm-marca {
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 3px;
}
.pm-nombre {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--t1);
  line-height: 1.15;
}
.pm-variante {
  font-size: 0.82rem;
  color: var(--t2);
  margin-top: 4px;
  min-height: 16px;
  transition: opacity .2s var(--ease);
}
.pm-precio-wrap { margin-top: var(--space-4); }
.pm-precio {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.03em;
  transition: opacity .2s var(--ease);
}
.pm-precio.sin-precio { font-size: 0.9rem; color: var(--t3); font-weight: 400; }
.pm-precio-dto {
  font-size: 0.82rem;
  color: var(--t3);
  margin-top: 2px;
  transition: opacity .2s var(--ease);
}
.pm-precio-dto strong { color: var(--accent-2); font-weight: 700; }

/* El detalle reutiliza los estilos de chips / precio / cantidad que ya
   tenía la card expandida, solo se ajusta el espaciado y el tamaño. */
.pm-detalle { padding: var(--space-4) var(--space-5) var(--space-5); margin-top: auto; }
/* En el modal el precio unitario ya está arriba, en grande. */
.pm-detalle .precio-detalle { display: none; }
.pm-detalle .chip { height: 32px; padding: 0 13px; font-size: 0.8rem; }
/* Espaciado de los grupos de opciones: el primer título no separa (ya lo
   hace el padding del bloque) y el último grupo deja aire antes del bloque
   verde de descuento, que si no quedaba pegado a los chips. */
.pm-detalle .variantes-titulo { margin: var(--space-3) 0 var(--space-2); }
.pm-detalle .variantes-titulo:first-child { margin-top: 0; }
.pm-detalle .variantes-chips { margin-bottom: var(--space-3); }
.pm-detalle .qty-row { margin-top: var(--space-3); }
.pm-detalle .agregar-btn { height: 46px; font-size: 0.9rem; }
/* La card del catálogo es angosta y ahí el botón va solo con el "+";
   dentro del modal siempre se muestra el texto completo. */
.pm-detalle .agregar-btn-text { display: inline; margin-left: 4px; }
.pm-detalle .cerrar-card { display: none; }

/* Bloque de descuento por cantidad dentro del modal: en una sola línea,
   para no estirar el alto cuando hay dos grupos de opciones. */
.pm-detalle .descuento-bloque {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  padding: var(--space-2) var(--space-3);
  margin-bottom: 0;
  box-shadow: 0 4px 12px rgba(88, 117, 71, .22);
}
.pm-detalle .descuento-info {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.pm-detalle .descuento-info .dto-cantidad { display: inline; margin-bottom: 0; font-size: 0.68rem; }
.pm-detalle .descuento-info strong { display: inline; font-size: 1.05rem; }

/* ── Mobile: columnas apiladas, panel centrado ── */
@media (max-width: 700px) {
  .pm-overlay { padding: var(--space-4); align-items: center; }
  .pm-panel {
    flex-direction: column;
    max-width: 340px;
    max-height: 88dvh;
  }
  /* La foto arranca con un alto cómodo pero puede encogerse: cuando el
     producto tiene dos grupos de opciones (sabor + tamaño) le cede lugar a
     los datos, y así el modal entra entero sin scroll. */
  .pm-media {
    /* La foto absorbe casi toda la compresión antes que los datos: si el
       producto tiene dos grupos de opciones, se achica ella y el modal
       sigue entrando entero. El shrink alto es lo que hace que ceda
       primero la imagen y no la ficha. */
    flex: 0 1000 auto;
    width: 100%;
    /* Con el panel angosto (340px) este alto deja la foto casi cuadrada. */
    height: min(34dvh, 260px);
    min-height: 96px;
  }
  .pm-img img { padding: var(--space-3); }
  /* La foto cede primero (shrink alto) y la columna de datos conserva su
     alto natural: así no aparece scroll interno. En pantallas muy chicas la
     columna sí puede encoger y scrollear, pero nunca queda contenido
     cortado fuera del panel. */
  .pm-col { flex: 0 1 auto; }
  .pm-info { padding: var(--space-3) var(--space-5) var(--space-3); }
  .pm-precio-wrap { margin-top: var(--space-2); }
  /* Con dos grupos de opciones (sabor + tamaño) el detalle crece mucho:
     acá se compacta todo un punto para que siga entrando sin scroll. */
  .pm-detalle { padding: var(--space-3) var(--space-5) var(--space-4); }
  .pm-detalle .variantes-titulo { margin: var(--space-2) 0 6px; }
  .pm-detalle .variantes-chips { margin-bottom: var(--space-2); }
  .pm-detalle .chip { height: 30px; }
  .pm-detalle .qty-row { margin-top: var(--space-2); }
  .pm-detalle .agregar-btn { height: 42px; }
  .pm-nombre { font-size: 1.15rem; }
  .pm-precio { font-size: 1.4rem; }
  .pm-nav { width: 32px; height: 32px; }
}

/* Pantallas mobile muy bajas (iPhone SE y similares): con dos grupos de
   opciones no alcanza con encoger la foto, así que se comprime también la
   ficha de datos. */
@media (max-width: 700px) and (max-height: 620px) {
  .pm-media { height: min(26dvh, 180px); min-height: 84px; }
  .pm-info { padding: var(--space-3) var(--space-4) var(--space-2); }
  .pm-nombre { font-size: 1.02rem; }
  .pm-variante { font-size: 0.76rem; margin-top: 2px; }
  .pm-precio { font-size: 1.2rem; }
  .pm-precio-dto { font-size: 0.74rem; }
  .pm-detalle { padding: var(--space-2) var(--space-4) var(--space-3); }
  .pm-detalle .variantes-titulo { margin: 8px 0 5px; }
  .pm-detalle .variantes-chips { margin-bottom: 6px; }
  .pm-detalle .chip { height: 28px; font-size: 0.76rem; }
  .pm-detalle .descuento-bloque { padding: 6px var(--space-3); }
  .pm-detalle .descuento-info strong { font-size: 0.95rem; }
  .pm-detalle .agregar-btn { height: 40px; }
}


/* ══════════════════════════════════════════════════════
   ESTADOS
══════════════════════════════════════════════════════ */
.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-9) var(--space-5);
  color: var(--t3);
  font-size: 0.875rem;
}
.loading-spinner {
  width: 28px;
  height: 28px;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .65s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.empty-msg {
  text-align: center;
  padding: var(--space-9) var(--space-5);
  color: var(--t3);
  font-size: 0.875rem;
}


/* ══════════════════════════════════════════════════════
   CARRITO (drawer lateral en desktop, bottom sheet en mobile)
══════════════════════════════════════════════════════ */
.carrito-overlay {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0);
  z-index: 300;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s var(--ease), visibility 0s linear 0.28s,
              background 0.28s var(--ease), backdrop-filter 0.28s var(--ease);
  pointer-events: none;
}
.carrito-overlay.open {
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.28s var(--ease), visibility 0s linear 0s,
              background 0.28s var(--ease), backdrop-filter 0.28s var(--ease);
  pointer-events: auto;
}

@media (min-width: 640px) {
  .carrito-overlay { align-items: flex-start; justify-content: flex-end; }
}

.carrito-panel {
  background: var(--surface);
  width: 100%;
  max-width: 420px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--r4) var(--r4) 0 0;
  box-shadow: var(--s4);
  transform: translateY(24px);
  opacity: 0;
  transition: transform 0.32s var(--ease), opacity 0.28s var(--ease);
}
.carrito-overlay.open .carrito-panel {
  transform: translateY(0);
  opacity: 1;
}

@media (min-width: 640px) {
  .carrito-panel {
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    border-left: 1px solid var(--line-soft);
    margin-top: 0;
    transform: translateX(32px);
  }
  .carrito-overlay.open .carrito-panel {
    transform: translateX(0);
  }
}

.carrito-header {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.carrito-header h2 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--t1);
  letter-spacing: -0.02em;
}

.carrito-close {
  width: 30px;
  height: 30px;
  background: var(--surface-2);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--t2);
  transition: background var(--t), color var(--t);
}
.carrito-close svg { width: 14px; height: 14px; }
.carrito-close:hover { background: var(--surface-3); color: var(--t1); }

.carrito-items {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4) var(--space-6);
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.carrito-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--t3);
  font-size: 0.875rem;
  gap: var(--space-3);
}

.carrito-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--line-soft);
}
.carrito-item:last-child { border-bottom: none; }

.ci-thumb {
  width: 76px;
  height: 76px;
  border-radius: var(--r3);
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.ci-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}
.ci-img-placeholder {
  font-size: 1.6rem;
  opacity: 0.3;
}
.ci-img-placeholder.hidden { display: none; }


.ci-info { flex: 1; min-width: 0; }
.ci-nombre {
  font-size: 0.845rem;
  font-weight: 600;
  color: var(--t1);
  line-height: 1.35;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ci-variante { font-size: 0.75rem; color: var(--t3); margin-top: 2px; }
.ci-precio   { font-size: 0.8rem;  color: var(--accent); font-weight: 600; margin-top: var(--space-1); }

.ci-qty-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.ci-qty-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  color: var(--t2);
  transition: all var(--t);
}
.ci-qty-btn:hover { border-color: var(--accent); color: var(--accent); }
.ci-qty-wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--surface-2);
  border: 1px dashed var(--line);
  border-radius: var(--r1);
  padding: 1px 4px 1px 2px;
  cursor: pointer;
  transition: all var(--t);
}
.ci-qty-wrap:hover {
  border-color: var(--accent);
  background: var(--accent-bg);
}
.ci-qty-wrap:focus-within {
  border-style: solid;
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 2px var(--accent-bg);
}
.ci-qty-num {
  font-size: 0.845rem;
  font-weight: 600;
  width: 28px;
  text-align: center;
  color: var(--t1);
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font);
  padding: 2px 0;
  cursor: pointer;
  -moz-appearance: textfield;
}
.ci-qty-edit-icon {
  font-size: 0.6rem;
  opacity: 0.5;
  pointer-events: none;
  transition: opacity var(--t);
}
.ci-qty-wrap:focus-within .ci-qty-edit-icon {
  opacity: 0;
}

.ci-eliminar {
  background: none;
  border: none;
  color: var(--t3);
  font-size: 0.9rem;
  padding: 4px;
  transition: color var(--t);
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 2px;
}
.ci-eliminar:hover { color: var(--red); }

.ci-subtotal {
  font-size: 0.845rem;
  font-weight: 600;
  color: var(--t1);
  white-space: nowrap;
  flex-shrink: 0;
  align-self: flex-end;
}

.carrito-footer {
  padding: var(--space-5) var(--space-6);
  border-top: 1px solid var(--line-soft);
  background: var(--surface);
  flex-shrink: 0;
}

.carrito-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-3);
}
.carrito-total-label {
  font-size: 0.845rem;
  color: var(--t2);
  font-weight: 500;
}
.carrito-total-valor {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: -0.03em;
}
.carrito-total-valor.sin-precios {
  font-size: 0.825rem;
  color: var(--t3);
  font-weight: 400;
}

.carrito-nota {
  font-size: 0.75rem;
  color: var(--t3);
  margin-bottom: var(--space-4);
  line-height: 1.5;
}

.whatsapp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  height: 44px;
  background: #1a8a3d;
  color: white;
  border: none;
  border-radius: var(--rf);
  font-family: var(--font);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: background var(--t) var(--ease), transform var(--t) var(--ease);
}
.whatsapp-btn:hover { background: #157032; transform: translateY(-1px); }
.whatsapp-btn:active { transform: translateY(0); }
.whatsapp-btn svg { width: 18px; height: 18px; flex-shrink: 0; }


/* ══════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .hero { flex-direction: column; min-height: unset; }
  .hero-inner { padding: var(--space-7) var(--space-4); max-width: none; }
  .hero-visual { min-height: 280px; width: 100%; }
  .hero-photo {
    position: absolute;
    object-position: center 65%;
    -webkit-mask-image: none;
    mask-image: none;
  }
  /* Apilado: el encabezado se centra sobre el acordeón. Las preguntas
     siguen alineadas a la izquierda — es una lista, no un título. */
  .faq-inner { grid-template-columns: 1fr; gap: var(--space-5); }
  .faq-header { text-align: center; }
  .faq-title { font-size: 1.25rem; }
  .faq-ayuda { max-width: 34ch; margin: 0 auto; }



}

/* Zona intermedia (tablet / ventana achicada): el buscador ya se encogió
   a su mínimo y no hay más margen — achicamos el botón de Catálogo a
   ícono-solo antes de que compita por espacio con el resto de la topbar.
   El dropdown se mantiene funcional, solo cambia su tamaño. */
@media (max-width: 860px) {
  .topbar-inner { gap: var(--space-3); }
  .nav-pill { padding: 0 8px; gap: 0; }
  .nav-pill-icon { display: block; }
  .nav-pill-text, .nav-pill .chevron { display: none; }
}

@media (max-width: 600px) {
  .topbar { height: 60px; }
  .topbar-inner { padding: 0 var(--space-3); gap: var(--space-2); }
  .brand-logo { height: 30px; }
  .topbar-middle { gap: var(--space-2); }
  .search-wrap { max-width: none; min-width: 0; flex: 1 1 auto; }
  .search-wrap input { padding-left: 30px; font-size: 0.8rem; }
  .search-icon { left: 9px; }
  .nav-pill { padding: 0 8px; gap: 0; }
  .nav-pill-icon { display: block; }
  .nav-pill-text, .nav-pill .chevron { display: none; }
  .nav-dropdown { display: none; }
  .hide-mobile { display: none; }
  .nav-megamenu { max-width: calc(100vw - var(--space-3) * 2); }
  .megamenu-col { min-width: 120px; }
  .whatsapp-trigger { width: 34px; height: 34px; }
  .cart-trigger { padding: 0 8px; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }

  /* Destacados en mobile: el riel sangra hasta el borde derecho para que se
     vea que hay más cards al costado. */
  .destacados-strip-inner { padding: var(--space-5) 0 var(--space-5) var(--space-4); }
  .destacados-strip-label { padding-right: var(--space-4); margin-bottom: var(--space-3); }
  .destacados-arrow { display: none; }
  .destacados-track { padding-right: var(--space-4); }
  .destacados-track .card { flex-basis: 132px; width: 132px; max-width: 132px; }

  .catalogo-main { padding: var(--space-4) var(--space-4) 100px; }
  .catalogo-topbar-inner { padding: 0 var(--space-4); }
  .filtros { padding: var(--space-2) var(--space-4); }
  .subfiltros { padding: var(--space-1) var(--space-4); }
  .filtro-btn { height: 36px; background: var(--surface); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
  .subfiltro-btn { height: 34px; }
  /* Los botones +/- de cantidad se sacan en mobile: tocarlos varias veces
     seguidas rápido dispara el zoom nativo del navegador y rompe la UI.
     Queda solo el campo, que ya se puede editar con el teclado. */
  .qty-btn { display: none; }
  .qty-num-wrap { border-left: none; border-right: none; }
  .qty-num { width: 64px; font-size: 0.95rem; padding: 8px 0; }
  .agregar-btn { height: 40px; }
  .cerrar-card { padding: var(--space-2); }
  .carrito-panel { max-height: 92dvh; }
  .carrito-close { width: 36px; height: 36px; }
  .ci-qty-btn { display: none; }
  .ci-qty-wrap { border-style: solid; }
  .ci-qty-num { width: 48px; font-size: 0.9rem; padding: 6px 0; }
  .ci-eliminar { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; padding: 0; }
  .carrito-footer { padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); }
  /* Hero móvil: la foto pasa a ser el escenario completo, no un bloque aparte. */
  .hero { position: relative; min-height: 560px; overflow: hidden; isolation: isolate; }
  .hero-visual { position: absolute; inset: 0; min-height: 0; z-index: 0; background: var(--accent-2); }
  .hero-photo {
    inset: 0;
    object-position: center;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(27, 39, 29, .34) 0%, rgba(27, 39, 29, .12) 32%, rgba(27, 39, 29, .82) 100%);
  }
  .hero-inner { position: relative; z-index: 2; flex: 1; justify-content: flex-start; padding: var(--space-6) var(--space-5); }
  .hero-title { font-size: clamp(2.25rem, 11vw, 2.8rem); white-space: normal; color: white; text-shadow: 0 2px 16px rgba(0, 0, 0, .22); margin-bottom: var(--space-4); }
  .hero-pills { flex-direction: column; align-items: flex-start; gap: var(--space-2); margin-bottom: var(--space-5); }
  .hero-pill { display: inline-flex; align-items: center; gap: 10px; padding: 7px 13px 7px 10px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .72); border-bottom: 1px solid rgba(255, 255, 255, .72); border-radius: var(--rf); color: white; backdrop-filter: blur(4px); font-size: .82rem; }
  .hero-pill svg { display: block; width: 16px; height: 16px; color: white; flex-shrink: 0; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: var(--space-2); margin-top: auto; }
  .hero-actions .btn-primary, .hero-actions .btn-ghost-dark { width: 100%; }
  .hero-actions .btn-ghost-dark { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .75); color: white; backdrop-filter: blur(4px); }
  .faq-inner { padding: var(--space-8) var(--space-4); }
  /* Beneficios: una lista de atajos, más fácil de recorrer que seis mini tarjetas. */
  .como-comprar-inner, .vueltas-inner,
  .cta-final-inner { padding: var(--space-7) var(--space-4); }
  .cta-card { padding: var(--space-6) var(--space-5); gap: var(--space-4); }
  .card.expanded { grid-column: 1 / -1; }
  .carrito-items { padding: var(--space-4); }
  .carrito-header { padding: var(--space-4); }
  .carrito-footer { padding: var(--space-4) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); }

  /* Footer: jerarquía clara, navegación liviana y WhatsApp como acción principal. */
  /* Mobile: el título se parte en dos renglones — "Listo para comprar" arriba
     y "más simple" abajo, grande y en verde. */
  .cta-final h2 { display: flex; flex-direction: column; align-items: center; gap: 0; font-size: 1.25rem; line-height: 1.15; letter-spacing: -.035em; }
  .cta-final h2 span { font-weight: 500; }
  .cta-final h2 strong { color: var(--accent-2); font-size: clamp(1.75rem, 9vw, 2.25rem); font-weight: 700; letter-spacing: -.05em; line-height: 1.05; }
  .footer-inner { padding: var(--space-6) var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom, 0px)); text-align: center; }
  .footer-logo { margin: 0 auto var(--space-5); height: 32px; }
  .footer-nav { display: flex; justify-content: center; gap: 0 var(--space-4); margin-bottom: var(--space-5); }
  .footer-nav-link { width: auto; height: 30px; padding: 0; color: rgba(255,255,255,.78); }
  .footer-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); padding-top: var(--space-4); align-items: center; text-align: center; }
  .footer-dot { display: none; }
  .footer-copy { font-size: .72rem; }
  .footer-whatsapp { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: center; justify-content: center; height: 42px; border: 1px solid rgba(255,255,255,.55); border-radius: var(--r2); font-size: .82rem; }

  /* En mobile el botón flotante del carrito vive abajo a la derecha;
     subimos la franja de onboarding para que no se solapen */
  .onb-toast {
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    width: calc(100vw - 32px);
  }
}

@media (max-width: 380px) {
  .topbar-inner { padding: 0 var(--space-2); gap: var(--space-1); }
  .brand-logo { height: 24px; }
  .topbar-middle { gap: var(--space-1); }
  .search-wrap input { height: 34px; padding: 0 var(--space-3) 0 28px; }
  .nav-pill { height: 32px; padding: 0 7px; }
  .cart-trigger { height: 34px; padding: 0 6px; }
}


/* ══════════════════════════════════════════════════════
   ANIMACIONES
══════════════════════════════════════════════════════ */

/* ── Keyframes ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Hero — entrada escalonada ── */
.hero-inner > * {
  opacity: 0;
  animation: fadeUp 0.6s var(--ease) forwards;
}
.hero-title    { animation-delay: 0.05s; }
.hero-pills    { animation-delay: 0.20s; }
.hero-actions  { animation-delay: 0.34s; }

.hero-photo {
  animation: fadeIn 0.8s ease forwards;
  animation-delay: 0.2s;
  opacity: 0;
}

/* ── Scroll reveal — base ── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Escalonado para grids */
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }
.reveal-delay-5 { transition-delay: 0.40s; }
.reveal-delay-6 { transition-delay: 0.48s; }

/* ── Cards — micro-interacción al hover ── */
.card {
  transition:
    border-color var(--t) var(--ease),
    box-shadow 0.25s var(--ease),
    transform 0.25s var(--ease);
}

/* ── Botones — press feedback ── */
.btn-primary,
.btn-ghost-dark {
  transition:
    background var(--t) var(--ease),
    transform 0.15s var(--ease),
    box-shadow 0.2s var(--ease);
}
.btn-primary:active,
.btn-ghost-dark:active { transform: scale(0.97); }

/* ── FAQ — transición de respuesta ── */
.faq-respuesta {
  overflow: hidden;
  max-height: 0;
  padding-bottom: 0;
  transition: max-height 0.35s var(--ease), padding-bottom 0.35s var(--ease);
  display: block !important; /* override display:none con height */
}
.faq-item.open .faq-respuesta {
  max-height: 300px;
  padding-bottom: var(--space-4);
}

/* ── Pills hero — entrada escalonada ── */
.hero-pill:nth-child(1) { animation-delay: 0.30s; }
.hero-pill:nth-child(2) { animation-delay: 0.38s; }
.hero-pill:nth-child(3) { animation-delay: 0.46s; }

/* Respetar preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ══════════════════════════════════════════════════════
   ONBOARDING: franja flotante que explica que se puede
   tocar una card, se muestra una sola vez (ver app.js)
══════════════════════════════════════════════════════ */
.onb-toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translate(-50%, 0);
  width: min(92vw, 460px);
  background: var(--t1);
  color: white;
  border-radius: var(--r3);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
  z-index: 260; /* por encima de las cards, por debajo del carrito (300) */
  animation: onbUp 0.35s ease;
}
@keyframes onbUp {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.onb-toast-icon {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  display: flex;
  align-items: center;
  justify-content: center;
}
.onb-toast-icon svg { width: 16px; height: 16px; }
.onb-toast-text {
  flex: 1;
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.35;
}
.onb-toast-close {
  background: rgba(255,255,255,.14);
  border: none;
  color: white;
  font-family: var(--font);
  font-size: 0.76rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--rf);
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
}


/* ══════════════════════════════════════════════════════
   BOTÓN FLOTANTE CARRITO
══════════════════════════════════════════════════════ */
.cart-floating-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 250;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 5px 20px rgba(0,0,0,0.2), 0 3px 10px rgba(110,139,91,0.38);
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px) scale(0.8);
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              background var(--t);
}

.cart-floating-btn.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.cart-floating-btn:hover {
  background: var(--accent-2);
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 7px 24px rgba(0,0,0,0.25), 0 4px 14px rgba(88,117,71,0.42);
}

.cart-floating-btn:active {
  transform: translateY(0) scale(0.95);
}

.cart-floating-btn svg {
  width: 30px;
  height: 30px;
}

.cart-floating-count {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--red);
  color: white;
  font-size: 0.80rem;
  font-weight: 700;
  min-width: 24px;
  height: 24px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  box-shadow: 0 2px 7px rgba(0,0,0,0.28);
  border: 2px solid var(--surface);
  opacity: 0;
  transform: scale(0.5);
  transition: all var(--t);
}

.cart-floating-count.visible {
  opacity: 1;
  transform: scale(1);
}

@media (max-width: 768px) {
  .cart-floating-btn {
    bottom: 20px;
    right: 18px;
    width: 58px;
    height: 58px;
  }
  .cart-floating-btn svg {
    width: 27px;
    height: 27px;
  }
  .cart-floating-count {
    min-width: 22px;
    height: 22px;
    font-size: 0.76rem;
  }
}