/* ══════════════════════════════════════════════════════
   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);
  --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; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
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: hidden;
}

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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


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


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


/* ══════════════════════════════════════════════════════
   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;
  margin-bottom: var(--space-7);
}


/* ══════════════════════════════════════════════════════
   CÓMO COMPRAR
══════════════════════════════════════════════════════ */
.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);
}

.pasos-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-5);
}

.paso {
  flex: 1;
  max-width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.paso-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  color: var(--accent);
  position: relative;
}
.paso-icon svg { width: 26px; height: 26px; }

.paso-num {
  position: absolute;
  top: -8px;
  right: -8px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-bg);
  border: 2px solid var(--surface);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.paso h3 {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--t1);
  margin-bottom: var(--space-2);
}
.paso p {
  font-size: 0.825rem;
  color: var(--t2);
  font-family: var(--font-body);
  line-height: 1.55;
}

/* Centrado exacto respecto a los 64px del paso-icon */
.paso-arrow-wrap {
  display: flex;
  align-items: center;
  height: 64px;
  flex-shrink: 0;
}

.paso-arrow {
  width: 32px;
  height: 14px;
  color: var(--line);
  flex-shrink: 0;
}


/* ══════════════════════════════════════════════════════
   LAS VUELTAS QUE TE AHORRAMOS
══════════════════════════════════════════════════════ */
.vueltas {
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-soft);
}
.vueltas-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-9) var(--space-5);
}

.nosotros-intro {
  text-align: center;
  padding-top: var(--space-2);
}
.nosotros-eyebrow {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: var(--space-3);
}
.nosotros-title {
  font-size: clamp(1.3rem, 2.6vw, 1.6rem);
  font-weight: 600;
  color: var(--t1);
  letter-spacing: -0.02em;
  margin: 0 auto var(--space-3);
  max-width: 460px;
}
.nosotros-text {
  font-size: 0.9rem;
  color: var(--t2);
  line-height: 1.75;
  font-family: var(--font-body);
  margin: 0 auto var(--space-3);
  max-width: 460px;
}
.nosotros-text:last-child { margin-bottom: 0; }

/* Conector visual entre la intro y el diagrama de vueltas */
.nosotros-conector {
  display: flex;
  justify-content: center;
  margin: var(--space-6) auto;
}
.nosotros-conector svg {
  width: 24px;
  height: 64px;
  color: var(--accent);
}

.vueltas-svg-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.vueltas-svg {
  width: 100%;
  min-width: 600px;
  display: block;
}

/* Alternativa compacta al diagrama para pantallas angostas. */
.vueltas-mobile { display: none; }


/* ══════════════════════════════════════════════════════
   BENEFICIOS
══════════════════════════════════════════════════════ */
.beneficios {
  background: var(--surface);
  border-bottom: 1px solid var(--line-soft);
}
.beneficios-inner {
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: var(--space-9) var(--space-5);
}

.beneficios-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-5);
}

.beneficio {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-3);
  border-radius: var(--r4);
  border: 1px solid transparent;
  background: transparent;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
  cursor: default;
}
.beneficio:hover {
  background: var(--surface);
  border-color: var(--line);
  transform: translateY(-4px);
  box-shadow: var(--s2);
}
.beneficio-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s var(--ease), transform 0.3s cubic-bezier(.34,1.56,.64,1);
}
.beneficio:hover .beneficio-icon-wrap {
  background: var(--accent);
  transform: scale(1.1);
}
.beneficio svg {
  width: 24px;
  height: 24px;
  color: var(--accent);
  transition: color 0.25s var(--ease);
}
.beneficio:hover svg { color: white; }
.beneficio p {
  font-size: 0.8rem;
  color: var(--t2);
  line-height: 1.4;
  font-family: var(--font-body);
  transition: color 0.25s var(--ease);
}
.beneficio:hover p { color: var(--t1); }


/* ══════════════════════════════════════════════════════
   CATEGORÍAS PRINCIPALES
══════════════════════════════════════════════════════ */
.categorias-home {
  background: var(--bg);
  border-bottom: 1px solid var(--line-soft);
}
.categorias-home-inner {
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: var(--space-9) var(--space-5);
}

/* Destacados: franjita angosta con scroll horizontal (no una sección más) */
.destacados-strip {
  background: var(--accent-bg);
  border-bottom: 1px solid var(--line-soft);
}
.destacados-strip-inner {
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-5);
}
.destacados-strip-label {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-right: var(--space-4);
  border-right: 1px solid var(--accent-line);
}
.destacados-strip-title {
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--t1);
  white-space: nowrap;
}

.destacados-scroller {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}
.destacados-track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px 6px;
  scrollbar-width: none;
}
.destacados-track::-webkit-scrollbar { display: none; }

.destacados-track .card {
  flex: 0 0 132px;
  scroll-snap-align: start;
}
.destacados-track .card-img-wrap { aspect-ratio: 1.15; }
.destacados-track .card-body { padding: var(--space-2) var(--space-3) var(--space-3); }
.destacados-track .card-marca { font-size: 0.62rem; }
.destacados-track .card-nombre { font-size: 0.78rem; -webkit-line-clamp: 2; }
.destacados-track .card-variante-label { display: none; }
.destacados-track .card-precio { font-size: 0.86rem; }
.destacados-track .card-precio-dto { font-size: 0.68rem; }

.destacados-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  box-shadow: var(--s2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--t1);
  cursor: pointer;
  z-index: 2;
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.destacados-arrow:hover { border-color: var(--accent-line); }
.destacados-arrow svg { width: 16px; height: 16px; }
.destacados-arrow--prev { left: -14px; }
.destacados-arrow--next { right: -14px; }
.destacados-arrow[disabled] { opacity: 0; pointer-events: none; }

.categorias-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-4);
}

.categoria-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r4);
  padding: var(--space-5) var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.categoria-card::before {
  content: '';
  position: absolute;
  top: -30px;
  right: -30px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 1.5px dashed var(--accent-line);
  opacity: 0;
  transform: scale(0.8) rotate(-20deg);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
  pointer-events: none;
}
.categoria-card:hover {
  border-color: var(--accent-line);
  box-shadow: var(--s2);
}
.categoria-card:hover::before {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.categoria-img-wrap {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent-bg);
  border: 1px solid var(--accent-line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.3s cubic-bezier(.34,1.56,.64,1);
}
.categoria-card:hover .categoria-img-wrap {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.08);
}
.categoria-img-wrap svg { width: 25px; height: 25px; transition: color 0.25s var(--ease); }
.categoria-card:hover .categoria-img-wrap svg { color: white; }

.categoria-card span {
  font-size: 0.825rem;
  font-weight: 500;
  color: var(--t1);
  text-align: center;
}

.categoria-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  color: var(--accent);
  margin-top: -4px;
}
.categoria-arrow svg { width: 14px; height: 14px; }
.categoria-card:hover .categoria-arrow {
  opacity: 1;
  transform: translateY(0);
}


/* ══════════════════════════════════════════════════════
   CTA FINAL
══════════════════════════════════════════════════════ */
.cta-final {
  background: var(--bg);
  padding: 0 var(--space-5) var(--space-9);
}
.cta-final-inner {
  position: relative;
  overflow: hidden;
  max-width: 1040px;
  margin: 0 auto;
  padding: var(--space-9) var(--space-5);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  background: var(--accent-bg);
  border: 1px solid var(--accent-line);
  border-radius: var(--r5);
}
.cta-final-inner > * { position: relative; z-index: 1; }
.cta-final h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.8rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--t1);
}
/* Frase clave destacada, igual concepto que en móvil pero en línea,
   sin apilar, ya que en escritorio/tablet hay ancho de sobra. */
.cta-final h2 strong {
  font: inherit;
  color: var(--accent);
  font-weight: 700;
}


/* ══════════════════════════════════════════════════════
   ETIQUETA Y TÍTULO COMPARTIDOS (usados por FAQ)
══════════════════════════════════════════════════════ */
.sobre-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: var(--space-4);
}
.sobre-title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--t1);
  margin-bottom: var(--space-5);
}


/* ══════════════════════════════════════════════════════
   FAQ
══════════════════════════════════════════════════════ */
.faq-section {
  background: var(--bg);
  border-bottom: 1px solid var(--line-soft);
}
.faq-inner {
  max-width: 680px;
  margin: 0 auto;
  padding: var(--space-9) var(--space-5);
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-8);
  align-items: start;
}
.faq-header { position: static; }

.faq-list { display: flex; flex-direction: column; }

.faq-item {
  position: relative;
  border-top: 1px solid var(--line-soft);
  padding-left: var(--space-4);
  transition: padding-left 0.25s var(--ease);
}
.faq-item:last-child { border-bottom: 1px solid var(--line-soft); }
.faq-item::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s var(--ease);
}
.faq-item.open::after { transform: scaleY(1); }

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

.faq-icono {
  font-size: 1.1rem;
  font-style: normal;
  font-weight: 300;
  color: var(--t3);
  flex-shrink: 0;
  line-height: 1.4;
  transition: transform var(--t) var(--ease), color var(--t);
}
.faq-item.open .faq-icono { transform: rotate(45deg); color: var(--accent); }

.faq-respuesta {
  display: none;
  padding-bottom: var(--space-4);
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--t2);
}
.faq-item.open .faq-respuesta { display: block; }


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

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

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

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

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


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

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

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

/* Filtros */
.filtros-wrap {
  background: var(--surface);
  border-bottom: 1px solid var(--line-soft);
  overflow-x: auto;
  scrollbar-width: none;
}
.filtros-wrap::-webkit-scrollbar { display: none; }

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

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

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

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

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

/* Grid */
.catalogo-main {
  max-width: var(--content-wide);
  margin: 0 auto;
  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); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 10px;
}


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

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

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

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

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

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

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

/* Expanded */
.card-expanded {
  display: none;
  padding: 0 var(--space-4) var(--space-4);
  border-top: 1px solid var(--line-soft);
  margin-top: var(--space-1);
}
.card.expanded .card-expanded { display: block; }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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


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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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


/* ══════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .hero { flex-direction: column; min-height: unset; }
  .hero-inner { padding: var(--space-7) var(--space-4); max-width: none; }
  .hero-visual { min-height: 280px; width: 100%; }
  .hero-photo {
    position: absolute;
    object-position: center 65%;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .faq-inner { grid-template-columns: 1fr; gap: var(--space-5); }
  .faq-header { position: static; }

  .pasos-row { flex-direction: column; align-items: center; gap: var(--space-6); }
  .paso-arrow-wrap { height: auto; }
  .paso-arrow { transform: rotate(90deg); margin-top: 0; }
  .paso { max-width: 280px; }

  .beneficios-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6) var(--space-4); }
  .categorias-grid { grid-template-columns: repeat(3, 1fr); }

  /* Destacados: en pantallas medianas ya no hace falta el botón de flecha,
     el swipe táctil alcanza */
  .destacados-arrow { display: none; }
  .destacados-strip-inner { gap: var(--space-3); }
}

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

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

  /* Destacados en mobile: label arriba (angosto), franja de scroll abajo,
     cards un poco más chicas para que entren 2 y pico por pantalla */
  .destacados-strip-inner { flex-direction: column; align-items: stretch; gap: var(--space-2); padding: var(--space-3) var(--space-4); }
  .destacados-strip-label { flex-direction: row; align-items: baseline; gap: 6px; border-right: none; padding-right: 0; }
  .destacados-track .card { flex-basis: 116px; }

  .catalogo-main { padding: var(--space-4) var(--space-4) 100px; }
  .catalogo-topbar-inner { padding: 0 var(--space-4); }
  .filtros { padding: var(--space-2) var(--space-4); }
  .subfiltros { padding: var(--space-1) var(--space-4); }
  .filtro-btn { height: 36px; background: var(--surface); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
  .subfiltro-btn { height: 34px; }
  /* Los botones +/- de cantidad se sacan en mobile: tocarlos varias veces
     seguidas rápido dispara el zoom nativo del navegador y rompe la UI.
     Queda solo el campo, que ya se puede editar con el teclado. */
  .qty-btn { display: none; }
  .qty-num-wrap { border-left: none; border-right: none; }
  .qty-num { width: 64px; font-size: 0.95rem; padding: 8px 0; }
  .agregar-btn { height: 40px; }
  .cerrar-card { padding: var(--space-2); }
  .carrito-panel { max-height: 92dvh; }
  .carrito-close { width: 36px; height: 36px; }
  .ci-qty-btn { display: none; }
  .ci-qty-wrap { border-style: solid; }
  .ci-qty-num { width: 48px; font-size: 0.9rem; padding: 6px 0; }
  .ci-eliminar { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; padding: 0; }
  .carrito-footer { padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); }
  /* Hero móvil: la foto pasa a ser el escenario completo, no un bloque aparte. */
  .hero { position: relative; min-height: 560px; overflow: hidden; isolation: isolate; }
  .hero-visual { position: absolute; inset: 0; min-height: 0; z-index: 0; background: var(--accent-2); }
  .hero-photo {
    inset: 0;
    object-position: center;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(27, 39, 29, .34) 0%, rgba(27, 39, 29, .12) 32%, rgba(27, 39, 29, .82) 100%);
  }
  .hero-inner { position: relative; z-index: 2; flex: 1; justify-content: flex-start; padding: var(--space-6) var(--space-5); }
  .hero-title { font-size: clamp(2.25rem, 11vw, 2.8rem); white-space: normal; color: white; text-shadow: 0 2px 16px rgba(0, 0, 0, .22); margin-bottom: var(--space-4); }
  .hero-pills { flex-direction: column; align-items: flex-start; gap: var(--space-2); margin-bottom: var(--space-5); }
  .hero-pill { display: inline-flex; align-items: center; gap: 10px; padding: 7px 13px 7px 10px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .72); border-bottom: 1px solid rgba(255, 255, 255, .72); border-radius: var(--rf); color: white; backdrop-filter: blur(4px); font-size: .82rem; }
  .hero-pill svg { display: block; width: 16px; height: 16px; color: white; flex-shrink: 0; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: var(--space-2); margin-top: auto; }
  .hero-actions .btn-primary, .hero-actions .btn-ghost-dark { width: 100%; }
  .hero-actions .btn-ghost-dark { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .75); color: white; backdrop-filter: blur(4px); }
  .pasos-row { gap: var(--space-3); }
  .paso-arrow-wrap { height: 20px; }
  .paso-icon { margin-bottom: var(--space-3); }
  .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, .beneficios-inner,
  .categorias-home-inner, .cta-final-inner { padding: var(--space-7) var(--space-4); }
  .beneficios-grid { display: flex; flex-direction: column; gap: var(--space-2); }
  .beneficio { flex-direction: row; align-items: center; text-align: left; gap: var(--space-3); padding: var(--space-3); background: var(--surface); border-color: var(--line-soft); border-radius: var(--r3); }
  .beneficio-icon-wrap { width: 42px; height: 42px; flex: 0 0 42px; }
  .beneficio svg { width: 20px; height: 20px; }
  .beneficio p { font-family: var(--font); font-size: .86rem; font-weight: 500; line-height: 1.3; color: var(--t1); }
  .categorias-grid { grid-template-columns: 1fr; gap: var(--space-2); }
  .categoria-card { flex-direction: row; justify-content: flex-start; gap: var(--space-3); padding: var(--space-3); text-align: left; }
  .categoria-img-wrap { width: 42px; height: 42px; flex: 0 0 42px; }
  .categoria-img-wrap svg { width: 20px; height: 20px; }
  .categoria-card span { text-align: left; font-size: .86rem; }
  .categoria-arrow { opacity: 1; transform: none; margin: 0 0 0 auto; }
  .vueltas-svg-wrap { display: none; }
  .vueltas-mobile {
    display: flex;
    flex-direction: column;
    position: relative;
    max-width: 380px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-5) var(--space-5);
    background: var(--surface);
    border-radius: var(--r3);
    box-shadow: var(--s3);
  }
  /* Borde perforado arriba y abajo, como un tique */
  .vueltas-mobile::before, .vueltas-mobile::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    height: 14px;
    background-image: radial-gradient(circle at 8px 8px, var(--surface-2) 6px, transparent 7px);
    background-size: 16px 16px;
    background-repeat: repeat-x;
  }
  .vueltas-mobile::before { top: -1px; }
  .vueltas-mobile::after { bottom: -1px; transform: rotate(180deg); }

  .vueltas-ticket-heading {
    text-align: center;
    font-family: var(--font-body);
    font-size: .78rem;
    color: var(--t3);
    letter-spacing: .04em;
    margin-bottom: var(--space-4);
  }
  .vueltas-ticket-line {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 7px 0;
    color: var(--t3);
    font-size: .86rem;
  }
  .vueltas-ticket-dots {
    flex: 1;
    border-bottom: 1.5px dotted var(--line);
    transform: translateY(-3px);
  }
  .vueltas-ticket-name {
    text-decoration: line-through;
    text-decoration-color: rgba(111, 116, 110, .4);
    white-space: nowrap;
  }
  .vueltas-ticket-mark {
    color: var(--t3);
    font-weight: 600;
    white-space: nowrap;
  }
  .vueltas-ticket-divider {
    border: none;
    border-top: 1.5px dashed var(--line-soft);
    margin: var(--space-4) 0;
  }
  .vueltas-ticket-stamp {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-3);
    border: 2px dashed var(--accent);
    border-radius: var(--r3);
    transform: rotate(-1.5deg);
  }
  .vueltas-ticket-stamp-text strong {
    display: block;
    color: var(--accent-2);
    font-size: .95rem;
    text-transform: uppercase;
    letter-spacing: .03em;
  }
  .vueltas-ticket-stamp-text span {
    display: block;
    font-size: .8rem;
    color: var(--t2);
    font-family: var(--font-body);
    margin-top: 2px;
  }
  .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. */
  .cta-final h2 { display: flex; flex-direction: column; align-items: center; gap: 0; font-size: 1.1rem; line-height: 1.05; letter-spacing: -.04em; }
  .cta-final h2 span { font-weight: 500; }
  .cta-final h2 strong { color: var(--accent); font-size: clamp(1.75rem, 9vw, 2.25rem); font-weight: 700; letter-spacing: -.055em; }
  .footer-inner { padding: var(--space-6) var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom, 0px)); text-align: center; }
  .footer-logo { margin: 0 auto var(--space-5); height: 32px; }
  .footer-nav { display: flex; justify-content: center; gap: 0 var(--space-4); margin-bottom: var(--space-5); }
  .footer-nav-link { width: auto; height: 30px; padding: 0; color: rgba(255,255,255,.78); }
  .footer-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); padding-top: var(--space-4); align-items: center; text-align: center; }
  .footer-dot { display: none; }
  .footer-copy { font-size: .72rem; }
  .footer-whatsapp { grid-column: 1 / -1; grid-row: 1; display: flex; align-items: center; justify-content: center; height: 42px; border: 1px solid rgba(255,255,255,.55); border-radius: var(--r2); font-size: .82rem; }

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

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


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

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

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

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

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

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

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

/* ── Categorías — transición base (hover visual definido arriba) ── */
.categoria-card {
  transition:
    border-color var(--t) var(--ease),
    box-shadow 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); }

/* ── Pasos — hover en ícono ── */
.paso-icon {
  transition: background var(--t), border-color var(--t), transform 0.2s cubic-bezier(.34,1.56,.64,1);
}
.paso:hover .paso-icon {
  background: var(--accent-bg);
  border-color: var(--accent-line);
  transform: scale(1.08);
}

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

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

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

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


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

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

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

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

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

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

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

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