/* ══════════════════════════════════════════════════════
   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; }
[hidden] { display: none !important; }
/* 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; }


/* La topbar es sticky, así que al saltar a una sección con scrollIntoView el
   arranque quedaba escondido detrás. scroll-margin-top reserva su alto — más
   un respiro — para que lo primero que se vea sea el anteítulo ("Nosotros",
   "Preguntas frecuentes") y no el título grande de más abajo. */
#como-comprar,
#vueltas,
#faq {
  scroll-margin-top: 96px;
}
@media (max-width: 600px) {
  #como-comprar,
  #vueltas,
  #faq {
    scroll-margin-top: 76px;
  }
}


/* ══════════════════════════════════════════════════════
   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 y Facebook en la topbar: mismo lenguaje visual (fondo suave +
   borde, sólido al hover). Ícono con color propio: verde oliva para WA, azul
   Facebook para FB. Van pegados entre sí, antes del botón del carrito. */
.whatsapp-trigger,
.facebook-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;
  text-decoration: none;
  transition: background var(--t), border-color var(--t), color var(--t), transform var(--t);
  flex-shrink: 0;
}
.whatsapp-trigger { color: var(--accent); }
/* Ícono FB: círculo azul + f blanca en reposo sobre el recuadro blanco.
   Al hover el recuadro se hace azul FB, y el ícono se invierte (círculo
   blanco + f azul), igual que WA que el ícono se pone blanco sobre verde. */
.facebook-trigger .fb-circle { fill: #1877F2; transition: fill var(--t) var(--ease); }
.facebook-trigger .fb-f { fill: #fff; transition: fill var(--t) var(--ease); }
.whatsapp-trigger:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(61,107,79,.22);
}
.facebook-trigger:hover {
  background: #1877F2;
  border-color: #1877F2;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(24,119,242,.28);
}
.whatsapp-trigger:active,
.facebook-trigger:active { transform: translateY(0); }
.whatsapp-trigger svg { width: 19px; height: 19px; transition: transform var(--t) var(--ease); }
.facebook-trigger svg { width: 20px; height: 20px; transition: transform var(--t) var(--ease); }
.whatsapp-trigger:hover svg,
.facebook-trigger:hover svg { transform: scale(1.08); }
.facebook-trigger:hover .fb-circle { fill: #fff; }
.facebook-trigger:hover .fb-f { fill: #1877F2; }

/* 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-evento   { display: none;  }
#vista-landing.oculta   { display: none;  }
#vista-catalogo.visible { display: block; }
#vista-evento.visible   { display: block; }


/* ══════════════════════════════════════════════════════
   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 — MULTIHERO
   Cada artículo mantiene su HTML libre; este bloque sólo define el lienzo,
   la navegación y el indicador compartidos por B2C y B2B.
══════════════════════════════════════════════════════ */
.multihero {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--surface);
}

.multihero-track {
  display: flex;
  width: 100%;
  transform: translateX(0);
  transition: transform 520ms var(--ease);
  will-change: transform;
  touch-action: pan-y;
}

.multihero-slide {
  flex: 0 0 100%;
  width: 100%;
  aspect-ratio: 16 / 7;
  overflow: hidden;
}

.multihero-slide--actual { background: var(--surface); }

/* Hero B2C "Comer mejor". Usa artes con los mismos lienzos que el carrusel
   para conservar la composición completa; los textos y CTAs quedan editables
   y accesibles como HTML. */
.hero-comer-mejor {
  position: relative;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  background: #FAFAF7;
}

.hero-comer-mejor__art {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero-comer-mejor__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform: translateX(3%) scale(.89);
  transform-origin: center;
}

.hero-comer-mejor__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 46%;
  height: 100%;
  padding: clamp(2rem, 5vw, 6.25rem) 2rem clamp(2rem, 5vw, 6.25rem) clamp(1.5rem, 6.25vw, 6.25rem);
}

.hero-comer-mejor__title {
  margin: 0 0 clamp(1rem, 1.5vw, 1.5rem);
  color: #2F3430;
  font-family: var(--font-body);
  font-size: clamp(2.5rem, 4.35vw, 4.35rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.045em;
}

.hero-comer-mejor__accent { color: #6E8B5B; }

.hero-comer-mejor__description {
  max-width: 530px;
  margin: 0 0 clamp(1.5rem, 2.4vw, 2.5rem);
  color: #6F746E;
  font-family: var(--font);
  font-size: clamp(1rem, 1.45vw, 1.5rem);
  font-weight: 400;
  line-height: 1.35;
}

.hero-comer-mejor__actions {
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 1.35vw, 1.35rem);
}

.hero-comer-mejor__primary,
.hero-comer-mejor__secondary {
  min-width: clamp(11rem, 15.8vw, 15.8rem);
  min-height: clamp(3.25rem, 4.35vw, 4.35rem);
  padding: 0 1.5rem;
  border-radius: 8px;
  font-family: var(--font);
  font-size: clamp(1rem, 1.3vw, 1.3rem);
  font-weight: 600;
}

.hero-comer-mejor__primary {
  border: 1px solid #6E8B5B;
  background: #6E8B5B;
  color: #FAFAF7;
}

.hero-comer-mejor__secondary {
  border: 2px solid #587547;
  background: transparent;
  color: #587547;
}

.hero-comer-mejor__primary:focus-visible,
.hero-comer-mejor__secondary:focus-visible {
  outline: 3px solid #C8CCBF;
  outline-offset: 3px;
}

/* Hero estándar B2C. Las artes ya incluyen el espacio libre para el texto,
   por eso se alternan por breakpoint sin recortes ni capas sobre la foto. */
.hero-standard {
  position: relative;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  background: #f6f1e7;
}

.hero-standard__art {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero-standard__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-standard__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(45%, 53rem);
  height: 100%;
  margin-left: clamp(1.5rem, 6.75vw, 8rem);
  padding-bottom: clamp(.5rem, 2vw, 2rem);
}

.hero-standard__title {
  margin: 0;
  color: #526244;
  font-family: var(--font);
  font-size: clamp(3.15rem, 5.25vw, 6.2rem);
  font-weight: 700;
  letter-spacing: -.055em;
  line-height: .98;
  white-space: nowrap;
}

.hero-standard__subtitle {
  margin: clamp(.75rem, 1.25vw, 1.5rem) 0 clamp(1.8rem, 2.7vw, 3.25rem);
  color: #2F3430;
  font-family: var(--font);
  font-size: clamp(1.65rem, 2.75vw, 3.25rem);
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: 1.08;
}

.hero-standard__actions {
  display: flex;
  align-items: center;
  gap: clamp(.8rem, 1.65vw, 2rem);
}

.hero-standard__primary,
.hero-standard__secondary {
  min-height: clamp(3.25rem, 4.4vw, 5.25rem);
  padding: 0 clamp(1.35rem, 2.25vw, 2.75rem);
  border-radius: 8px;
  font-family: var(--font);
  font-size: clamp(1rem, 1.6vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1;
  white-space: nowrap;
  transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease), transform 150ms var(--ease);
}

.hero-standard__primary {
  min-width: clamp(12rem, 15.25vw, 18.25rem);
  border: 1px solid #526244;
  background: #526244;
  color: #fff;
}

.hero-standard__secondary {
  min-width: clamp(13rem, 16vw, 19.25rem);
  border: 3px solid #526244;
  background: transparent;
  color: #526244;
}

.hero-standard__primary:hover { background: #445437; border-color: #445437; }
.hero-standard__secondary:hover { background: rgba(246, 244, 238, .58); }
.hero-standard__primary:active,
.hero-standard__secondary:active { transform: scale(.98); }
.hero-standard__primary:focus-visible,
.hero-standard__secondary:focus-visible {
  outline: 3px solid #2F3430;
  outline-offset: 3px;
}

/* El hero estándar conserva su diseño interno, pero se adapta al lienzo del
   carrusel para que todos los slides tengan la misma altura. */
.multihero-slide .hero-bg,
.multihero-slide .hero {
  height: 100%;
  min-height: 0;
}

.multihero-slide .hero-inner { height: 100%; }

.multihero-arrow {
  position: absolute;
  z-index: 3;
  top: 50%;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--accent-2);
  background: rgba(255,255,255,.9);
  box-shadow: var(--s2);
  transform: translateY(-50%);
  transition: background var(--t) var(--ease), transform var(--t) var(--ease);
}

.multihero-arrow:hover {
  background: white;
  transform: translateY(-50%) scale(1.05);
}

.multihero-arrow:focus-visible {
  outline: 3px solid var(--accent-line);
  outline-offset: 3px;
}

.multihero-arrow svg { width: 21px; height: 21px; }
.multihero-arrow--previous { left: var(--space-5); }
.multihero-arrow--next { right: var(--space-5); }

.multihero-dots {
  position: absolute;
  z-index: 3;
  bottom: var(--space-4);
  left: 50%;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 7px 11px;
  border: 1px solid rgba(82,98,68,.18);
  border-radius: var(--rf);
  background: rgba(255,255,255,.82);
  box-shadow: var(--s1);
  transform: translateX(-50%);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.multihero-dot {
  position: relative;
  display: block;
  width: 7px;
  height: 7px;
  overflow: hidden;
  border-radius: 50%;
  background: rgba(82,98,68,.32);
  transition: width 220ms var(--ease), background 220ms var(--ease);
}

.multihero-dot.is-active {
  width: 24px;
  border-radius: var(--rf);
  background: rgba(82,98,68,.2);
}

.multihero-dot.is-active::after {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: var(--accent-2);
  content: '';
}

.multihero-dot.is-active.is-progressing::after {
  animation: multihero-progress 8s linear forwards;
}

.multihero.is-paused .multihero-dot.is-active.is-progressing::after {
  animation-play-state: paused;
}

@keyframes multihero-progress {
  from { width: 0; }
  to { width: 100%; }
}

@media (max-width: 700px) {
  .multihero-slide {
    aspect-ratio: 9 / 13;
  }

  .hero-standard__content {
    justify-content: flex-start;
    width: 100%;
    margin-left: 0;
    padding: clamp(2.5rem, 18.5vw, 12rem) 6.75% 0;
  }

  .hero-standard__title {
    font-size: clamp(2.2rem, 7.7vw, 5.2rem);
    letter-spacing: -.06em;
  }

  .hero-standard__subtitle {
    margin: clamp(.7rem, 2.5vw, 1.4rem) 0 clamp(.95rem, 3.3vw, 2rem);
    font-size: clamp(1.05rem, 4.45vw, 3rem);
    letter-spacing: -.045em;
  }

  .hero-standard__actions {
    flex-direction: column;
    align-items: stretch;
    width: 60%;
    gap: clamp(.7rem, 2.3vw, 1.5rem);
  }

  .hero-standard__primary,
  .hero-standard__secondary {
    width: 100%;
    min-width: 0;
    min-height: clamp(2.75rem, 8.6vw, 5.8rem);
    padding: 0 clamp(.8rem, 2.8vw, 1.8rem);
    font-size: clamp(.95rem, 3.1vw, 2rem);
  }

  .hero-standard__secondary { border-width: 2px; }

  .hero-comer-mejor__content {
    justify-content: flex-start;
    width: 100%;
    padding: clamp(1.5rem, 7vw, 4.5rem) 7.2% 2.85rem;
  }

  .hero-comer-mejor__art img {
    transform: none;
  }

  .hero-comer-mejor__title {
    margin-bottom: clamp(.85rem, 3vw, 1.5rem);
    font-size: clamp(2rem, 9vw, 4.15rem);
    line-height: 1.06;
  }

  .hero-comer-mejor__description {
    max-width: 88%;
    margin-bottom: 0;
    font-size: clamp(1rem, 4.1vw, 1.65rem);
    line-height: 1.27;
  }

  .hero-comer-mejor__actions {
    flex-direction: column;
    align-items: stretch;
    gap: clamp(.55rem, 2.4vw, 1rem);
    margin-top: auto;
  }

  .hero-comer-mejor__primary,
  .hero-comer-mejor__secondary {
    width: 100%;
    min-height: clamp(2.5rem, 10vw, 3.8rem);
    font-size: clamp(.95rem, 4vw, 1.25rem);
  }

  .multihero-arrow { display: none; }
  .multihero-dots { bottom: var(--space-3); }
}

@media (prefers-reduced-motion: reduce) {
  .multihero-track,
  .multihero-dot,
  .multihero-dot.is-active.is-progressing::after {
    transition: none;
    animation: none;
  }
}


/* ══════════════════════════════════════════════════════
   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);
}
.nuevos-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.nuevos-ver-todos {
  height: 36px;
  margin-left: auto;
  padding: 0 var(--space-4);
  flex-shrink: 0;
  background: var(--surface);
  font-size: 0.8rem;
  font-weight: 600;
}
.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; }
.nuevos-strip .destacados-icono {
  background: #C48A2B;
  box-shadow: 0 2px 6px rgba(167,115,30,.28);
}
.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;
  overscroll-behavior-x: contain;
  /* El riel puede desplazarse en X, pero el navegador conserva el gesto
     vertical para seguir recorriendo la landing desde cualquier card. */
  overscroll-behavior-y: auto;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
  scroll-friction: 0.5;
  /* Aire para que la sombra de las cards no se recorte al scrollear */
  padding: 4px var(--space-4) 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; }

/* Nuevos ingresos conserva el riel de la landing, pero permite leer mejor
   cada producto que las cards compactas de la sección anterior. */
.nuevos-track .card {
  flex-basis: 218px;
  width: 218px;
  max-width: 218px;
}
.nuevos-track .card .card-img-wrap img { padding: var(--space-3); }
/* La imagen de Nuevos vive dentro de un riel horizontal. La regla general
   de las cards usa pan-y para el swipe de variantes; acá no hay variantes
   rotables y, en WebKit móvil, esa restricción hace que el gesto vertical
   iniciado sobre la foto quede tomado por el riel. Dejamos que el track
   (pan-x pan-y) resuelva ambos ejes. */
.nuevos-track .card .card-img-wrap,
.nuevos-track .card .card-img-wrap img { touch-action: auto; }
.nuevos-track .card .card-body { padding: var(--space-3) var(--space-4) var(--space-4); }
.nuevos-track .card .card-marca { font-size: .65rem; }
.nuevos-track .card .card-nombre { font-size: .875rem; }
.nuevos-track .card .card-variante-label { font-size: .75rem; }
.nuevos-track .card .card-precio { font-size: 1.05rem; }
.nuevos-track .card .card-precio-dto { font-size: .78rem; }
.nuevos-track .card-nuevos-cta {
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--accent-2);
  font-family: var(--font);
  font-size: .9rem;
  font-weight: 700;
  text-align: center;
}
.nuevos-track .card-nuevos-cta:hover { color: var(--accent); }


/* ══════════════════════════════════════════════════════
   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 ══ */
/* ── Desktop: la sección más alta de la landing ──
   Con la notebook a tamaño completo la sección no entra de un vistazo en
   pantallas de portátil, así que al llegar el botón "Como pedir" el mockup
   quedaba cortado. Acá se comprime lo justo: menos aire vertical, mockup
   algo más chico (el aspect-ratio hace que el alto baje solo) y pasos más
   ajustados. Solo aplica de 1001px para arriba, donde existe la notebook. */
@media (min-width: 1001px) {
  .como-comprar-inner { padding: var(--space-7) var(--space-5) var(--space-8); }
  .como-comprar .seccion-h2-center { font-size: clamp(1.4rem, 2.2vw, 1.7rem); }
  .como-comprar .seccion-sub-center { margin-bottom: var(--space-5); font-size: 0.9rem; }
  .demo-pasos { grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: var(--space-6); max-width: 1000px; }
  .mk-note { max-width: 520px; }
  .mk-note-tapa { padding: 10px 10px 12px; border-radius: 12px 12px 4px 4px; }
  .paso-item { padding: var(--space-3) var(--space-4); }
  .pasos-lista { gap: 2px; }
}

@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(--accent-2);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
/* Adaptacion de textos/tarjeta para fondo verde oscuro */
.vueltas .ns-eyebrow { color: rgba(255,255,255,0.8); }
.vueltas .ns-eyebrow::after { background: rgba(255,255,255,0.25); }
.vueltas .ns-eyebrow::before { background: rgba(255,255,255,0.25); }
.vueltas .ns-frase { color: white; }
.vueltas .ns-frase em { color: #D8E6CA; }
.vueltas .ns-frase em path { stroke: rgba(255,255,255,0.3); }
.vueltas .ns-bajada { color: rgba(255,255,255,0.78); }
.vueltas .ns-bajada strong { color: white; }
.vueltas .bg-circle { border-color: rgba(255,255,255,0.15); }
.vueltas .bg-circle--fill { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); }
.vueltas .ns-esquema {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.18);
  box-shadow: none;
}
.vueltas .ns-esquema-tit { color: rgba(255,255,255,0.7); }
.vueltas .ns-col--no li { color: rgba(255,255,255,0.45); text-decoration-color: rgba(255,255,255,0.25); }
.vueltas .ns-col--no i { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.6); }
.vueltas .ns-col--si li { color: white; }
.vueltas .ns-col--si i { background: var(--accent); color: white; }
.vueltas .ns-flecha { color: rgba(255,255,255,0.3); }
.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; }


/* ══════════════════════════════════════════════════════
   MODAL "CÓMO ENVIAR EL PEDIDO" (solo escritorio)
   Abrir WhatsApp Web obliga a tener el teléfono vinculado, y ese es el
   paso donde más gente abandona. Acá se ofrece la alternativa: pasar el
   pedido al celular con un QR y seguir desde ahí.
══════════════════════════════════════════════════════ */
.env-overlay {
  position: fixed;
  inset: 0;
  z-index: 320;
  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);
}
.env-overlay.visible { opacity: 1; }

.env-panel {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border-radius: var(--r5);
  padding: var(--space-6);
  box-shadow: 0 24px 60px rgba(28, 34, 28, .26);
  transform: translateY(8px) scale(.98);
  transition: transform 220ms var(--ease);
}
.env-overlay.visible .env-panel { transform: none; }

.env-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--t2);
  cursor: pointer;
  transition: background var(--t), color var(--t);
}
.env-close svg { width: 13px; height: 13px; }
.env-close:hover { background: var(--surface-3); color: var(--t1); }

.env-paso[hidden] { display: none; }
.env-panel h3 {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--t1);
  margin-bottom: 4px;
  padding-right: var(--space-6);
}
.env-sub {
  font-family: var(--font-body);
  font-size: .84rem;
  line-height: 1.55;
  color: var(--t2);
  margin-bottom: var(--space-5);
}

/* ── Las dos opciones ── */
.env-op {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r3);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--t), background var(--t), transform var(--t);
}
.env-op:last-child { margin-bottom: 0; }
.env-op:hover {
  border-color: var(--accent);
  background: var(--accent-bg);
  transform: translateY(-1px);
}
.env-ic {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-bg);
  color: var(--accent-2);
}
.env-ic svg { width: 19px; height: 19px; }
.env-ic--wa { background: #E7F8ED; color: #1a8a3d; }
.env-tx { flex: 1; min-width: 0; }
.env-tx b {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  color: var(--t1);
  letter-spacing: -.01em;
}
.env-tx span {
  display: block;
  margin-top: 1px;
  font-family: var(--font-body);
  font-size: .765rem;
  line-height: 1.4;
  color: var(--t3);
}
.env-chev {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--t3);
  transition: color var(--t), transform var(--t);
}
.env-op:hover .env-chev { color: var(--accent-2); transform: translateX(2px); }

/* ── Paso del QR ── */
.env-volver {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: var(--space-3);
  padding: 0;
  border: none;
  background: none;
  font-size: .78rem;
  font-weight: 600;
  color: var(--t2);
  cursor: pointer;
  transition: color var(--t);
}
.env-volver svg { width: 13px; height: 13px; }
.env-volver:hover { color: var(--accent-2); }

.env-qr {
  display: grid;
  place-items: center;
  min-height: 228px;
  padding: var(--space-3);
  margin-bottom: 0;
  background: white;
  border: 1px solid var(--line-soft);
  border-radius: var(--r3);
}
.env-qr img, .env-qr canvas { display: block; }
/* La librería del QR se descarga recién al pedirla: mientras tanto, un
   bloque gris del mismo tamaño para que el panel no salte. */
.env-qr-load {
  width: 208px;
  height: 208px;
  border-radius: var(--r2);
  background: linear-gradient(100deg, var(--surface-2) 30%, var(--surface-3) 50%, var(--surface-2) 70%);
  background-size: 220% 100%;
  animation: env-load 1.2s linear infinite;
}
@keyframes env-load { to { background-position: -220% 0; } }
.env-error {
  font-family: var(--font-body);
  font-size: .8rem;
  color: var(--t2);
  text-align: center;
  max-width: 200px;
}

@media (max-width: 600px) {
  .env-panel { padding: var(--space-5); }
  .env-qr { min-height: 0; }
}


/* Aviso al abrir un pedido que llegó por QR desde otra pantalla. */
.carrito-traspaso {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px var(--space-6);
  background: var(--accent-bg);
  border-bottom: 1px solid var(--accent-line);
  font-family: var(--font-body);
  font-size: .81rem;
  color: var(--accent-2);
  flex-shrink: 0;
}
.carrito-traspaso[hidden] { display: none; }
.carrito-traspaso svg { width: 15px; height: 15px; flex-shrink: 0; }


/* ══════════════════════════════════════════════════════
   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,
.footer-facebook {
  font-size: 0.78rem;
  font-weight: 600;
  color: white;
  text-decoration: none;
  transition: opacity var(--t);
}
.footer-whatsapp:hover,
.footer-facebook:hover { opacity: 0.8; }

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


/* ════════════════════════════════════════════════════
   BARRA DE PROMO (solo catálogo)
   En la landing el hero ya comunica la promo. Acá hace falta porque al
   recorrer el catálogo el descuento quedaría fuera de pantalla.
════════════════════════════════════════════════════ */
.promo-barra {
  /* Sticky justo debajo de la topbar (72px), que también es sticky. */
  position: sticky;
  top: 72px;
  z-index: 90;
  background: var(--accent-2);
  color: white;
  padding: 9px var(--space-8) 9px var(--space-5);
}
.promo-barra[hidden] { display: none; }
.promo-barra-inner {
  max-width: var(--content-wide);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  /* Nunca en dos renglones: en mobile la barra crecía al doble de alto. */
  flex-wrap: nowrap;
  min-width: 0;
}
.promo-barra-txt {
  font-family: var(--font-body);
  font-size: 0.83rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, .92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
/* Versión corta del mensaje: se intercambian por CSS según el ancho, así
   el texto entra en una sola línea sin tocar el HTML. */
.promo-barra-txt .larga  { display: inline; }
.promo-barra-txt .corta  { display: none; }
.promo-barra-txt strong {
  font-family: var(--font);
  font-weight: 700;
  color: white;
}
.promo-barra-cd {
  flex-shrink: 0;
  padding: 2px 10px;
  border-radius: var(--rf);
  background: rgba(255, 255, 255, .18);
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.promo-barra-cd[hidden] { display: none; }
.promo-barra-x {
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: none;
  color: rgba(255, 255, 255, .68);
  cursor: pointer;
  transition: background var(--t), color var(--t);
}
.promo-barra-x svg { width: 11px; height: 11px; }
.promo-barra-x:hover { background: rgba(255, 255, 255, .16); color: white; }

/* Mobile: la topbar mide 60px, no 72. */
@media (max-width: 600px) {
  .promo-barra {
    top: 60px;
    padding: 7px 30px 7px var(--space-3);
  }
  .promo-barra-inner { gap: 7px; }
  .promo-barra-txt { font-size: 0.72rem; }
  /* Mensaje corto: "10% OFF + Envío gratis en Agosto" */
  .promo-barra-txt .larga { display: none; }
  .promo-barra-txt .corta { display: inline; }
  .promo-barra-cd { font-size: 0.63rem; padding: 2px 7px; }
  .promo-barra-x { right: 6px; width: 20px; height: 20px; }
  .promo-barra-x svg { width: 10px; height: 10px; }
}

/* Pantallas muy angostas (iPhone SE y similares): no entran las dos cosas,
   y el mensaje importa más que la cuenta regresiva — que además ya está en
   el hero. Se cae el contador y el texto queda entero. */
@media (max-width: 380px) {
  .promo-barra-cd { 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;
}

/* ══════════════════════════════════════════════════════
   VISTA EVENTO B2C
   Estructura neutral: no define estética ni jerarquía de una campaña.
══════════════════════════════════════════════════════ */
.evento-topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line-soft);
  height: 48px;
}
.evento-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);
}
.evento-titulo-label {
  font-size: 0.845rem;
  color: var(--t3);
  font-weight: 400;
}
.evento-main {
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: var(--space-8) var(--space-5) 120px;
}
.evento-head {
  margin-bottom: var(--space-6);
  max-width: 680px;
}
.evento-head h1 {
  font-family: var(--font);
  color: var(--t1);
  font-size: clamp(1.6rem, 3vw, 2.35rem);
  margin: 0;
}
.evento-head p {
  color: var(--t2);
  margin: var(--space-2) 0 0;
  line-height: 1.55;
}
.evento-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-3);
}
.evento-grid > .event-card { min-width: 0; }

@media (max-width: 600px) {
  .evento-topbar-inner { padding: 0 var(--space-4); }
  .evento-main { padding: var(--space-6) var(--space-4) 110px; }
  .evento-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* 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; }
.filtro-btn--especial {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent-bg);
  border-color: var(--accent-line);
  color: var(--accent-2);
  font-weight: 600;
}
.filtro-btn-icono { display: inline-flex; color: var(--accent); }
.filtro-btn-icono svg { width: 14px; height: 14px; }
.filtro-btn--descuento .filtro-btn-icono svg { width: 16px; height: 16px; }
.filtro-btn--especial.active .filtro-btn-icono { color: white; }

/* 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-btn--especial {
  color: var(--accent-2);
  background: var(--accent-bg);
}
.cat-nav-btn--especial:hover { background: var(--surface-3); }
.cat-nav-btn--especial .cat-nav-icono { color: var(--accent); }
.cat-nav-btn--descuento .cat-nav-icono svg { width: 20px; height: 20px; }
.cat-nav-btn--especial.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, al llegar al final del scroll horizontal el navegador
     se tira a scrollear la pagina verticalmente, muy molesto */
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  /* Friccion nativa: reduce la inercia exagerada a la mitad,
     se siente mas tosco/preciso sin romper el scroll natural */
  scroll-friction: 0.5;
  /* 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 NUEVO (ámbar #C48A2B con estrella, arriba a la derecha en cards) ── */
.badge-nuevo {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  z-index: 2;
  padding: 2px 8px;
  border-radius: var(--rf);
  background: #C48A2B;
  color: #fff;
  font-family: var(--font);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(167,115,30,.35);
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.badge-nuevo svg { width: 8px; height: 8px; flex-shrink: 0; }

/* ── Badge carrito (ícono solo: círculo blanco con borde verde) ── */
.card-en-carrito {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  z-index: 2;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  pointer-events: none;
}
.card-en-carrito.visible { display: flex; }
.card-en-carrito svg { width: 14px; height: 14px; flex-shrink: 0; }

/* Cuando la foto tiene badge NUEVO, el ícono del carrito baja para no
   superponerse (mismo borde derecho, justo debajo). */
.card-img-wrap.tiene-nuevo .card-en-carrito,
.pm-img.tiene-nuevo .card-en-carrito {
  top: 38px;
}
/* Cuando además hay promo + nuevo, el carrito baja más (promo ocupa el
   primer renglón, nuevo el segundo, carrito el tercero). */
.card-img-wrap.tiene-promo.tiene-nuevo .card-en-carrito,
.pm-img.tiene-promo.tiene-nuevo .card-en-carrito {
  top: 68px;
}
/* Promo + carrito sin nuevo: carrito baja debajo de la promo */
.card-img-wrap.tiene-promo:not(.tiene-nuevo) .card-en-carrito,
.pm-img.tiene-promo:not(.tiene-nuevo) .card-en-carrito {
  top: 38px;
}

/* 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;
}
.producto-no-disponible {
  margin: var(--space-2) 0 0;
  color: var(--t2);
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.35;
}
.producto-no-disponible--detalle {
  margin-top: var(--space-3);
  font-size: .82rem;
}
.producto-no-disponible--carrito { margin-bottom: 0; }

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


/* ════════════════════════════════════════════════════
   PROMO: precio tachado + cinta
   Todo en el verde de marca — sin colores nuevos. El precio de lista queda
   chico y tachado, y el de promo toma el lugar del precio principal.
════════════════════════════════════════════════════ */
.precio-viejo {
  margin-right: 6px;
  font-size: 0.74em;
  font-weight: 400;
  color: var(--t3);
  text-decoration: line-through;
  text-decoration-color: var(--line);
}
.precio-promo { color: inherit; }

/* Cinta en la esquina superior izquierda de la card. La card ya es
   position:relative, y el badge de "en carrito" vive a la derecha, así que
   no se pisan. */
.promo-badge {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 2;
  padding: 3px 8px;
  border-radius: var(--rf);
  background: var(--accent);
  color: white;
  font-family: var(--font);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1.4;
  box-shadow: 0 2px 6px rgba(88, 117, 71, .3);
  pointer-events: none;
}
/* Dentro del modal la etiqueta acompaña al precio en la misma línea. */
.promo-badge--inline {
  position: static;
  display: inline-block;
  margin-left: 8px;
  vertical-align: middle;
  font-size: 0.6rem;
  box-shadow: none;
}

/* En la franja de destacados las cards son más chicas: cintas más discretas. */
.destacados-track .card .promo-badge { font-size: .54rem; padding: 2px 7px; }
.destacados-track .card .badge-nuevo { font-size: .48rem; padding: 2px 6px; gap: 2px; }
.destacados-track .card .badge-nuevo svg { width: 7px; height: 7px; }
.destacados-track .card .card-en-carrito { width: 24px; height: 24px; }
.destacados-track .card .card-en-carrito svg { width: 12px; height: 12px; }
.destacados-track .card .card-img-wrap.tiene-nuevo .card-en-carrito { top: 34px; }
.destacados-track .card .card-img-wrap.tiene-promo.tiene-nuevo .card-en-carrito { top: 60px; }
.destacados-track .card .card-img-wrap.tiene-promo:not(.tiene-nuevo) .card-en-carrito { top: 34px; }

/* En los rieles de mobile, ídem */
.riel > .card .promo-badge { font-size: .54rem; padding: 2px 6px; }
.riel > .card .badge-nuevo { font-size: .48rem; padding: 2px 6px; top: var(--space-2); right: var(--space-2); gap: 2px; }
.riel > .card .badge-nuevo svg { width: 7px; height: 7px; }
.riel > .card .card-en-carrito { width: 24px; height: 24px; }
.riel > .card .card-en-carrito svg { width: 12px; height: 12px; }
.riel > .card .card-img-wrap.tiene-nuevo .card-en-carrito { top: 34px; }
.riel > .card .card-img-wrap.tiene-promo.tiene-nuevo .card-en-carrito { top: 60px; }
.riel > .card .card-img-wrap.tiene-promo:not(.tiene-nuevo) .card-en-carrito { top: 34px; }
.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;
  /* Ver nota sobre el zoom en la sección de mobile, más abajo. */
  touch-action: manipulation;
}
.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);
  /* touch-action: manipulation desactiva SOLO el zoom por doble toque sobre
     este botón — el zoom con dos dedos de la página sigue funcionando. Sin
     esto, tocar +/- varias veces rápido lo interpretaba como doble toque.
     user-select evita que el toque repetido seleccione texto y saque la lupa. */
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.qty-btn:hover { background: var(--surface-2); color: var(--t1); }
.qty-btn:active { background: var(--surface-3); 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;
}

/* Badges dentro del modal: todos alineados a la IZQUIERDA (para no chocar
   con la X de cerrar que está arriba-derecha), con más margen que en las
   cards porque el panel es más grande.
   Promo → Nuevo (si aplica) → Carrito, todos apilados en esa esquina. */
.pm-img .promo-badge { top: 14px; left: 14px; font-size: 0.64rem; padding: 4px 10px; }
.pm-img .badge-nuevo { top: 14px; left: 14px; right: auto; font-size: 0.62rem; padding: 4px 10px; gap: 4px; }
.pm-img .badge-nuevo svg { width: 9px; height: 9px; }
.pm-img .card-en-carrito { top: 14px; left: 14px; right: auto; width: 26px; height: 26px; }
.pm-img .card-en-carrito svg { width: 13px; height: 13px; }
/* Cuando hay promo, Nuevo baja un nivel */
.pm-img.tiene-promo .badge-nuevo { top: 46px; }

/* El botón de cerrar (X) tiene z-index 5, los badges 2 — no se pisan. */
.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;
  }
  /* Badges un poco más chicos en mobile, todos a la izquierda */
  .pm-img .promo-badge { top: 10px; left: 10px; font-size: 0.56rem; padding: 3px 8px; }
  .pm-img .badge-nuevo { top: 10px; left: 10px; right: auto; font-size: 0.54rem; padding: 3px 8px; gap: 3px; }
  .pm-img .badge-nuevo svg { width: 8px; height: 8px; }
  .pm-img .card-en-carrito { top: 10px; left: 10px; right: auto; width: 24px; height: 24px; }
  .pm-img .card-en-carrito svg { width: 12px; height: 12px; }
  .pm-img.tiene-promo .badge-nuevo { top: 40px; }
  /* 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-txt {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.carrito-header h2 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--t1);
  letter-spacing: -0.03em;
}
.carrito-count {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--t3);
}

.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: 220px;
  color: var(--t3);
  font-size: 0.875rem;
  gap: var(--space-3);
}
.carrito-empty svg { width: 38px; height: 38px; opacity: .5; }

.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 svg { width: 20px; height: 20px; color: var(--t3); opacity: .55; }
.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);
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.ci-qty-btn:hover { border-color: var(--accent); color: var(--accent); }
.ci-qty-btn:active { background: var(--surface-2); }
.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 svg { width: 15px; height: 15px; }
.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;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}
.ci-subtotal-anterior {
  color: var(--t3);
  font-size: 0.72rem;
  font-weight: 500;
}
.ci-subtotal-con-descuento { color: var(--accent-2); }
.ci-subtotal-etiqueta {
  color: var(--accent);
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
}
body[data-canal="b2c"] .ci-subtotal-etiqueta {
  text-transform: none;
  letter-spacing: .01em;
}

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

/* El desglose queda cerrado de entrada: el botón conserva total y una acción
   explícita, grande y fácil de tocar. */
.carrito-resumen-plegable { margin-bottom: var(--space-3); }
.carrito-resumen-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto 18px;
  align-items: center;
  width: 100%;
  min-height: 52px;
  gap: var(--space-2);
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--surface);
  color: var(--t1);
  font-family: var(--font);
  text-align: left;
  touch-action: manipulation;
}
.carrito-resumen-toggle:hover { border-color: var(--accent); background: var(--accent-bg); }
.carrito-resumen-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cr-toggle-etiqueta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.84rem; font-weight: 600; }
.cr-toggle-total { color: var(--accent-2); font-size: 0.95rem; font-weight: 700; white-space: nowrap; }
.cr-toggle-accion { color: var(--t2); font-size: 0.74rem; font-weight: 600; white-space: nowrap; }
.cr-toggle-chev { width: 16px; height: 16px; color: var(--t2); transition: transform var(--t) var(--ease); }
.carrito-resumen-toggle[aria-expanded="true"] .cr-toggle-chev { transform: rotate(180deg); }
.carrito-resumen-detalle {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: 0;
  padding: 0 var(--space-3);
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--r2);
  background: var(--surface-2);
  opacity: 0;
  transition:
    grid-template-rows 230ms var(--ease),
    margin-top 230ms var(--ease),
    padding 230ms var(--ease),
    border-color 180ms var(--ease),
    opacity 160ms var(--ease);
}
.carrito-resumen-detalle.abierto {
  grid-template-rows: 1fr;
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-3) 0;
  border-color: var(--line-soft);
  opacity: 1;
}
/* Las filas intermedias se ocultan solas cuando no hay promo vigente. */
.carrito-resumen { min-height: 0; overflow: hidden; margin-bottom: var(--space-3); }
.cr-fila {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--t2);
  margin-bottom: 3px;
}
.cr-fila[hidden] { display: none; }
.cr-fila--promo span:last-child {
  font-family: var(--font);
  font-weight: 700;
  color: var(--accent-2);
}
.cr-envio-progreso {
  margin: var(--space-2) 0 var(--space-3);
  font-family: var(--font-body);
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--t2);
}
.cr-envio-progreso[hidden] { display: none; }
.cr-envio-progreso-pista {
  height: 6px;
  overflow: hidden;
  margin-top: 6px;
  border-radius: var(--rf);
  background: var(--surface-2);
}
.cr-envio-progreso-barra {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 220ms var(--ease);
}
.carrito-total-valor {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--accent-2);
  letter-spacing: -0.03em;
}

/* Ahorro total, alineado a la derecha bajo el número del total. Sin caja:
   los dos descuentos ya están detallados arriba, esto solo los suma. */
.cr-ahorro {
  margin-top: 3px;
  text-align: right;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--accent);
}
.cr-ahorro[hidden] { display: none; }

/* En un teléfono la acción baja a una segunda línea: conserva texto legible
   y un área táctil amplia sin competir con el total. */
@media (max-width: 600px) {
  .carrito-resumen-toggle {
    grid-template-columns: minmax(0, 1fr) auto 18px;
    grid-template-areas:
      "etiqueta total flecha"
      "accion accion flecha";
    min-height: 58px;
    padding: 9px 12px;
  }
  .cr-toggle-etiqueta { grid-area: etiqueta; }
  .cr-toggle-total { grid-area: total; }
  .cr-toggle-accion { grid-area: accion; }
  .cr-toggle-chev { grid-area: flecha; }
}

.codigo-promo {
  margin: var(--space-3) 0;
  font-family: var(--font-body);
}
.codigo-promo label {
  display: block;
  margin-bottom: 5px;
  color: var(--t2);
  font-size: 0.78rem;
}
.codigo-promo-control {
  display: flex;
  gap: var(--space-2);
}
.codigo-promo input {
  min-width: 0;
  flex: 1;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--t1);
  font: inherit;
  font-size: 0.86rem;
  padding: 9px 10px;
  text-transform: uppercase;
}
.codigo-promo button {
  flex: 0 0 auto;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  font: 600 0.8rem var(--font-body);
  padding: 0 12px;
}
.codigo-promo button:disabled { cursor: wait; opacity: 0.65; }
.codigo-promo #codigoPromoQuitar { background: var(--surface-2); color: var(--t2); }
.codigo-promo-estado {
  min-height: 1.25em;
  margin: 5px 0 0;
  color: var(--t2);
  font-size: 0.75rem;
  line-height: 1.35;
}
.codigo-promo-estado.error { color: #a84035; }
.codigo-promo-estado.ok { color: var(--accent); }

.carrito-total-valor.sin-precios {
  font-size: 0.825rem;
  color: var(--t3);
  font-weight: 400;
}

.carrito-nota {
  font-size: 0.75rem;
  color: var(--t3);
  line-height: 1.5;
}
/* Solo separa cuando efectivamente hay un aviso que mostrar. */
.carrito-nota:not(:empty) { margin-bottom: var(--space-3); }


.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; }
.whatsapp-btn:disabled { background: var(--surface-3); color: var(--t3); cursor: not-allowed; transform: none; }


/* ══════════════════════════════════════════════════════
   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; }
  .facebook-trigger { width: 34px; height: 34px; }
  .cart-trigger { padding: 0 8px; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }

  /* Nuevos ingresos 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; }
  .nuevos-track .card { flex-basis: min(43vw, 174px); width: min(43vw, 174px); max-width: 174px; }
  .nuevos-ver-todos { height: 36px; padding: 0 var(--space-3); font-size: 0.78rem; }

  .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; }
  /* Botones +/- también en mobile.
     Antes se ocultaban porque tocarlos rápido disparaba el zoom por doble
     toque y el layout saltaba. Eso ya está resuelto en la regla base con
     touch-action: manipulation + user-select: none.
     El otro salto lo causaba el input: iOS hace zoom automático al enfocar
     un campo con fuente menor a 16px, y al salir el layout quedaba corrido.
     Por eso acá el número va en 16px exactos — es el umbral de Safari. */
  .qty-btn { display: flex; width: 46px; height: 46px; font-size: 1.3rem; }
  .qty-num-wrap { padding: 0 2px; }
  .qty-num { width: 46px; font-size: 16px; padding: 8px 0; }
  .qty-edit-icon { width: 12px; height: 12px; }
  .agregar-btn { height: 40px; }
  .cerrar-card { padding: var(--space-2); }
  .carrito-panel { max-height: 92dvh; }
  .carrito-close { width: 36px; height: 36px; }
  /* Ídem en el carrito: botones visibles y el campo a 16px. */
  .ci-qty-btn { display: flex; width: 34px; height: 34px; font-size: 1.05rem; }
  .ci-qty-wrap { border-style: solid; padding: 1px 3px; }
  .ci-qty-num { width: 40px; font-size: 16px; padding: 5px 0; }
  .ci-qty-row { gap: var(--space-2); }
  .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,
  .footer-facebook { 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; grid-column: 1 / -1; }
  .footer-whatsapp { grid-row: 1; }
  .footer-facebook { grid-row: 2; border-color: rgba(24,119,242,.75); color: #fff; }
  .footer-copy { grid-row: 3; }

  .onb-toast {
    bottom: calc(20px + 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; }
  .whatsapp-trigger,
  .facebook-trigger { width: 32px; height: 32px; }
  .whatsapp-trigger svg { width: 17px; height: 17px; }
  .facebook-trigger svg { width: 18px; height: 18px; }
  .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),
              bottom 0.38s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* ══════════════════════════════════════════════════════
   CARTEL NOVEDADES DESDE ABAJO
   Aparece luego de 40s en el sitio, no interrumpe la navegacion
══════════════════════════════════════════════════════ */
.cartel-novedades {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 270; /* por debajo del modal de producto (300) y el carrito (300), por encima del toast (260) */
  padding: 0;
  display: flex;
  justify-content: center;
  animation: slideUpCartel 0.4s cubic-bezier(.16,1,.3,1) forwards;
  /* La capa ocupa todo el ancho: fuera del cartel visible no debe bloquear
     enlaces ni controles de la página. */
  pointer-events: none;
}
.cartel-novedades[hidden] { display: none !important; }

/* Cuando hay un modal de producto abierto, mandamos el cartel al fondo
   para que quede tapado por el overlay oscuro y no interrumpa */
body.modal-abierto .cartel-novedades {
  z-index: 50;
}
.cartel-novedades-inner {
  width: 100%;
  max-width: 480px;
  background: var(--surface);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -4px 24px rgba(47,52,48,.18);
  padding: 28px 20px 20px;
  position: relative;
  pointer-events: auto;
}
/* El handle es un elemento real para poder escuchar el gesto en móvil. */
.cartel-novedades-handle {
  display: none;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 72px;
  height: 24px;
}
.cartel-novedades-handle::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 42px;
  height: 4px;
  border-radius: 999px;
  background: var(--line);
}
.cartel-novedades-cerrar {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: var(--surface-2);
  color: var(--t1);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1;
  transition: background var(--t), color var(--t), transform var(--t);
}
.cartel-novedades-cerrar:hover {
  background: var(--surface-3);
  color: var(--accent-2);
  transform: scale(1.08);
}
.cartel-novedades-cerrar:active {
  transform: scale(0.95);
}
.cartel-novedades h4 {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -.03em;
  margin-top: 8px;
  margin-bottom: 12px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.cartel-novedades h4 svg {
  flex-shrink: 0;
  color: var(--accent-2);
}
.cartel-novedades p {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--t2);
  line-height: 1.5;
  text-align: center;
  margin-bottom: 20px;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}
.cartel-novedades p em {
  font-family: var(--font);
  font-style: normal;
  font-weight: 600;
  color: var(--accent-2);
}
.cartel-error {
  background: var(--rojo-bg);
  color: var(--rojo) !important;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.82rem !important;
  font-weight: 500;
  margin-bottom: 16px !important;
  text-align: center;
  border: 1px solid rgba(196, 84, 58, 0.3);
  animation: shakeError 0.4s ease;
}
@keyframes shakeError {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}
.cartel-campo {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 300px;
  margin: 0 auto 12px;
  border: 2px solid var(--line-soft);
  border-style: solid !important;
  border-radius: 10px;
  padding: 0 12px;
  height: 44px;
  background: var(--bg) !important;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .15s, background .15s;
}
.cartel-campo:last-of-type {
  margin-bottom: 20px;
}
.cartel-campo.cartel-error-campo {
  border: 2px solid var(--rojo) !important;
  border-style: solid !important;
  background: var(--rojo-bg) !important;
  animation: shakeCampo 0.35s ease;
}
.cartel-campo.cartel-error-campo input,
.cartel-campo.cartel-error-campo .cartel-prefijo {
  color: var(--rojo) !important;
  opacity: 1 !important;
  visibility: visible !important;
}
@keyframes shakeCampo {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}
.cartel-prefijo {
  font-weight: 600;
  color: var(--t2);
  font-size: 0.9rem;
}
.cartel-campo input {
  all: unset;
  flex: 1;
  border: none;
  background: transparent !important;
  font-size: 1rem;
  font-family: var(--font-body);
  color: var(--t1);
  height: 100%;
  width: 100%;
  display: block;
  box-shadow: none !important;
  padding: 0;
}
.cartel-campo input::placeholder { color: var(--t3); opacity: 1; }
/* Campo de nombre ocupa todo el ancho */
.cartel-campo:first-of-type input {
  width: 100%;
}
.btn-cartel-principal {
  position: relative;
  gap: 8px;
}
.btn-cartel-principal[disabled] {
  cursor: wait;
  opacity: .85;
}
.btn-spinner {
  animation: spin 1s linear infinite;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.cartel-botones {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 300px;
  margin: 0 auto;
}
.btn-cartel-principal {
  height: 46px;
  width: 100%;
  border: none;
  border-radius: 10px;
  background: var(--accent);
  color: white;
  font-weight: 600;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: background var(--t), transform var(--t);
  box-shadow: 0 2px 8px rgba(110, 139, 91, 0.2);
}
.btn-cartel-principal:hover {
  background: var(--accent-2);
  transform: translateY(-1px);
}
.btn-cartel-secundario {
  height: 40px;
  width: 100%;
  border: none;
  background: transparent;
  font-size: 0.85rem;
  color: var(--t3);
  cursor: pointer;
  transition: color var(--t);
}
.btn-cartel-secundario:hover {
  color: var(--t1);
}
@keyframes slideUpCartel {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* Toast de notificaciones simple */
.mv-toast-notif {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--t1);
  color: white;
  padding: 12px 20px;
  border-radius: var(--r3);
  font-size: 0.88rem;
  font-weight: 500;
  z-index: 10000;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  opacity: 0;
  transition: all 0.3s cubic-bezier(.16,1,.3,1);
}
.mv-toast-notif.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@media (max-width: 768px) {
  .mv-toast-notif {
    bottom: 100px;
    width: calc(100vw - 48px);
    text-align: center;
  }
}

/* En escritorio se ve como un cartel en la esquina inferior, no ocupa toda la pantalla */
@media (min-width: 769px) {
  .cartel-novedades {
    padding: 0 0 24px 24px;
    justify-content: flex-start;
  }
  .cartel-novedades-inner {
    max-width: 340px;
    border-radius: 16px;
  }
}

@media (max-width: 768px) {
  .cartel-novedades-handle {
    display: block;
    touch-action: none;
    cursor: grab;
  }
  .cartel-novedades-handle:active { cursor: grabbing; }
  .cart-floating-btn {
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    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;
  }
}

/* ══════════════════════════════════════════════════════
   BARRA INFERIOR + CABECERA MÓVIL
   El buscador conserva su lugar en la cabecera; Inicio, Catálogo y pedido
   viven en la barra inferior.
══════════════════════════════════════════════════════ */
.mobile-bottom-nav { display: none; }
.facebook-trigger-b2b { display: none; }

@media (max-width: 600px) {
  :root { --mobile-bottom-nav-height: 76px; }

  .cart-trigger { display: none; }
  .topbar-actions .facebook-trigger-b2b { display: flex; }

  #vista-landing { padding-bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom, 0px)); }
  .catalogo-main {
    padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  }
  .cart-floating-btn { display: none !important; }
  .onb-toast,
  .mv-toast-notif {
    bottom: calc(var(--mobile-bottom-nav-height) + 12px + env(safe-area-inset-bottom, 0px));
  }
  .cartel-novedades {
    bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom, 0px));
  }

  .mobile-bottom-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 280;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: var(--mobile-bottom-nav-height);
    padding: 7px 10px calc(7px + env(safe-area-inset-bottom, 0px));
    background: rgba(251, 250, 245, .96);
    border-top: 1px solid var(--line-soft);
    box-shadow: 0 -4px 18px rgba(47, 52, 48, .06);
    backdrop-filter: saturate(145%) blur(12px);
    -webkit-backdrop-filter: saturate(145%) blur(12px);
  }
  .mobile-bottom-nav-action {
    position: relative;
    min-width: 0;
    min-height: 54px;
    padding: 5px 4px;
    border: 1px solid transparent;
    border-radius: 16px;
    background: transparent;
    color: var(--t2);
    font-family: var(--font);
    font-size: .76rem;
    font-weight: 600;
    line-height: 1.1;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: color 180ms var(--ease), background 180ms var(--ease), border-color 180ms var(--ease), transform 150ms var(--ease), box-shadow 180ms var(--ease);
  }
  .mobile-bottom-nav-action svg {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    transition: transform 150ms var(--ease);
  }
  .mobile-bottom-nav-action.is-active {
    background: linear-gradient(135deg, rgba(112, 130, 85, .14), rgba(112, 130, 85, .07));
    border-color: rgba(112, 130, 85, .08);
    color: var(--accent-2);
  }
  .mobile-bottom-nav-action:focus-visible,
  .topbar-actions .whatsapp-trigger:focus-visible,
  .topbar-actions .facebook-trigger:focus-visible {
    outline: 3px solid rgba(61, 107, 79, .28);
    outline-offset: 2px;
  }
  .mobile-bottom-nav-action:active {
    transform: scale(.96);
  }
  .mobile-bottom-nav-action:active svg,
  .topbar-actions .whatsapp-trigger:active svg,
  .topbar-actions .facebook-trigger:active svg {
    transform: scale(.9);
  }
  .mobile-bottom-nav-badge {
    position: absolute;
    top: 3px;
    left: calc(50% + 4px);
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: 2px solid var(--surface);
    border-radius: 999px;
    background: var(--accent);
    color: white;
    font-size: .66rem;
    font-weight: 700;
    line-height: 14px;
    opacity: 0;
    transform: scale(.65);
    transition: opacity 160ms var(--ease), transform 160ms var(--ease);
  }
  .mobile-bottom-nav-badge.visible {
    opacity: 1;
    transform: scale(1);
  }
}

@media (max-width: 380px) {
  .mobile-bottom-nav { padding-right: 7px; padding-left: 7px; }
  .mobile-bottom-nav-action { font-size: .72rem; }
}

@media (hover: hover) and (pointer: fine) {
  .mobile-bottom-nav-action:hover {
    background: rgba(112, 130, 85, .08);
    color: var(--accent-2);
  }
  .mobile-bottom-nav-action.is-active:hover {
    background: rgba(112, 130, 85, .19);
    box-shadow: inset 0 0 0 1px rgba(112, 130, 85, .08);
    transform: translateY(-1px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-bottom-nav-action,
  .mobile-bottom-nav-action svg,
  .mobile-bottom-nav-badge,
  .topbar-actions .whatsapp-trigger,
  .topbar-actions .facebook-trigger,
  .topbar-actions .whatsapp-trigger svg,
  .topbar-actions .facebook-trigger svg {
    transition: none;
  }
}