/* ─── VARIABLES & RESET ─── */
    :root {
      --dark:    #1a3a2a;
      --primary: #3d7a56;
      --light:   #a8d5a2;
      --accent:  #c4895a;
      --white:   #ffffff;
      --gray:    #6b7280;
      --gray-lt: #9ca3af;
      --border:  #e8ede9;
      --bg:      #f4faf6;
      /* ── ESCALA TIPOGRAFICA FRESQUI · 7 pasos ──────────────────
         Un solo lugar donde se define el tamano de CUALQUIER texto.
         Los cinco pasos de abajo van en rem: con html a 112.5% desde
         1024px, crecen solos x1.125 en escritorio y no hace falta
         repetirlos en cada media query. Los dos titulares usan clamp
         porque tienen que crecer mas que el cuerpo.

           token         movil    escritorio   rol
           --t-micro      11        12.4       etiquetas, unidades, metadatos
           --t-menor      13        14.6       nav, botones, notas, pie
           --t-cuerpo     15        16.9       prosa y nombres
           --t-destac     17        19.1       precio, intro, pregunta FAQ
           --t-sub        19        21.4       subtitulos y titulos de tarjeta
           --t-titulo     22        32         titulo de seccion  (Anton)
           --t-display    29        50         H1 de pagina       (Anton)
      ── */
      --t-micro:   0.6875rem;
      --t-menor:   0.8125rem;
      --t-cuerpo:  0.9375rem;
      --t-destac:  1.0625rem;
      --t-sub:     1.1875rem;
      /* En rem, no en px, para que también bajen cuando la base baja a 15px
         por debajo de 680px. Con px se quedaban grandes justo donde molesta. */
      --t-titulo:  clamp(1.3rem, 1.6vw + 0.75rem, 1.78rem);
      --t-display: clamp(1.7rem, 2.6vw + 1.1rem, 2.78rem);

      --shadow:  0 2px 14px rgba(26,58,42,0.07);
      --shadow-md: 0 6px 24px rgba(26,58,42,0.12);
      --radius:  16px;

      /* ── TIPOGRAFÍA ──
         Base: 1rem = 16px (definido en html { font-size: 100% })
         H1/H2/H3 usan clamp() para escala fluida sin media queries.
         Mínimo garantizado: 0.75rem (12px) — cumple accesibilidad móvil.
      */
      --h1:   clamp(2rem, 4vw + 0.5rem, 3rem);       /* 32px → 48px */
      --h2:   clamp(1.625rem, 3vw + 0.25rem, 2.25rem); /* 26px → 36px */
      --h3:   clamp(1.375rem, 2vw + 0.25rem, 1.75rem); /* 22px → 28px */
      --body: 1rem;        /* 16px */
      --sm:   0.875rem;    /* 14px */
      --xs:   0.75rem;     /* 12px — mínimo permitido */
      --lh-title: 1.2;     /* títulos: compacto y legible */
      --lh-body:  1.55;    /* párrafos: cómodo para lectura */
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    /* BASE MÓVIL — debe ir ANTES que la media query para que esta la pueda sobrescribir */
    html {
      font-size: 100%;          /* 16px base móvil */
      scroll-behavior: smooth;
    }

    /* ── ESCALA DESKTOP ──────────────────────────────────────────
       IMPORTANTE: esta regla va DESPUÉS de html { font-size: 100% }
       para que pueda sobrescribirla correctamente en cascada.
       Con font-size: 125% → 1rem = 20px; todo lo escrito en rem
       escala automáticamente sin tocar ninguna otra regla.
    ── */
    @media (min-width: 1024px) {
      html { font-size: 112.5%; }   /* 18px base escritorio */
      /* Este :root duplicaba la escala solo para escritorio. Con la escala
         nueva sobra: los cinco pasos en rem ya crecen con el html a 112.5%
         y los dos titulares usan clamp. Se conserva solo el interlineado. */
      :root { --lh-body: 1.6; }

      /* ── HERO ESCRITORIO ─────────────────────────────────────────
         Con base 20px el H1 sube a ~60-70px pero la imagen
         mantiene su tamaño px. Reequilibramos: más imagen,
         contenedor más estrecho, gap reducido y columnas 52/48.
      ── */
      .hero-container {
        grid-template-columns: 50% 50%;
        max-width: 1200px;
        margin: 0 auto;
        padding: 64px 60px;
        gap: 48px;
        align-items: center;
      }

      .hero-image {
        align-items: center;             /* centra imagen verticalmente */
        justify-content: center;
      }

      .hero-image img {
        width: 100%;
        max-width: 520px;                /* límite de imagen para no desbordarse */
        height: auto;
      }

      /* H1 en rem puro — el clamp con base 20px ya sería demasiado grande */
      .hero h1 {
        /* 45px con base 18px */
        letter-spacing: -1.5px;
        margin-bottom: 18px;
      }

      .hero-h2 {
        /* 20px → 24px */
        margin-bottom: 36px;
      }
    .hero-kw {
      font-family: 'Nunito Sans', sans-serif;
      font-weight: 800;
      color: #145A3A;
      line-height: 1.3;
      margin: 0 0 22px;
    }

      .hero-cta {
        padding: 0.85rem 2rem;
        /* 20px — ni muy grande ni pequeño */
      }
    }
    body {
      font-family: 'Nunito Sans', sans-serif;
      /* Base de la escala: cualquier texto sin regla propia hereda el paso
         de cuerpo, en vez del 1rem del navegador. Sin esto los <p> sueltos
         del blog quedaban 1px por encima del resto de la prosa. */
      font-size: var(--t-cuerpo);
      background: var(--white);
      color: var(--dark);
      -webkit-font-smoothing: antialiased;
      min-height: 100vh;
    }

    .logo-mascot {
      height: 42px; width: auto;
      display: block; flex-shrink: 0;
    }
    /* ─── HEADER ─── */
    header {
      background: var(--white);
      position: sticky; top: 0; z-index: 100;
      padding: 12px 20px 0;
      display: flex; flex-direction: column; align-items: stretch;
      border-bottom: 1.5px solid var(--border);
      box-shadow: 0 1px 8px rgba(26,58,42,0.05);
    }
    .header-top {
      display: flex; align-items: center; justify-content: space-between;
      gap: 12px; height: 48px;
    }
    .header-bottom {
      display: flex; align-items: center;
      padding: 4px 0 0;
    }
    /* ─── NAV SECCIONES ─── */
    .section-nav {
      display: flex; align-items: center; gap: 0;
      overflow-x: auto; scroll-snap-type: x mandatory;
      scrollbar-width: none; padding: 6px 0 8px;
      border-top: 1px solid var(--border); margin-top: 6px;
    }
    .section-nav::-webkit-scrollbar { display: none; }
    .section-nav a {
      flex-shrink: 0; scroll-snap-align: start;
      font-size: var(--t-menor); font-weight: 700; color: var(--gray);
      text-decoration: none; padding: 4px 14px;
      border-radius: 20px; white-space: nowrap;
      transition: background 0.15s, color 0.15s;
    }
    .section-nav a:hover { color: var(--primary); }
    .section-nav a.snav-active {
      background: var(--primary); color: var(--white);
    }
    .snav-sep {
      width: 1px; height: 14px; background: var(--border);
      flex-shrink: 0; align-self: center; margin: 0 4px;
    }

    /* ─── MENÚ CATEGORÍAS ─── */
    .cat-menu-wrap { position: relative; }
    .cat-menu-btn {
      display: flex; align-items: center; gap: 7px;
      background: none; border: none; cursor: pointer;
      font-family: 'Nunito Sans', sans-serif;
      font-size: var(--t-menor); font-weight: 800; letter-spacing: 0.2px;
      color: var(--dark);
      padding: 8px 10px 8px 0; border-radius: 8px;
      transition: background 0.15s;
    }
    .cat-menu-btn:hover { background: var(--bg); }
    .cat-menu-btn svg { flex-shrink: 0; }
    .cat-dropdown {
      position: absolute; top: calc(100% + 8px); left: 0;
      background: var(--white); border: 1.5px solid var(--border);
      border-radius: 14px; box-shadow: var(--shadow-md);
      min-width: 200px; overflow: hidden;
      opacity: 0; pointer-events: none;
      transform: translateY(-6px);
      transition: opacity 0.18s, transform 0.18s;
      z-index: 200;
    }
    .cat-dropdown.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
    .cat-dropdown-item {
      display: flex; align-items: center; gap: 10px;
      padding: 12px 16px; cursor: pointer;
      font-size: var(--t-menor); font-weight: 700; color: var(--dark);
      transition: background 0.12s;
      border-bottom: 1px solid var(--border);
    }
    .cat-dropdown-item:last-child { border-bottom: none; }
    .cat-dropdown-item:hover { background: var(--bg); }
    .cat-dropdown-item .cat-dd-emoji { font-size: 20px; width: 28px; text-align: center; }
    .logo {
      display: flex; align-items: center; gap: 10px;
      text-decoration: none;
    }
    .logo-name {
      font-family: 'Anton', sans-serif;
      font-size: 27px; color: var(--dark);
      line-height: 1; letter-spacing: 1px;
    }
    .logo-sub {
      font-size: 9px; color: var(--gray-lt); font-weight: 600;
      letter-spacing: 1.2px; text-transform: uppercase;
      display: block; margin-top: 0;
    }
    .cart-btn {
      background: var(--dark);
      -webkit-tap-highlight-color: transparent;
      border: none; border-radius: 10px;
      padding: 14px 18px 14px 14px;
      color: var(--white); font-size: var(--t-menor); font-weight: 800;
      text-transform: uppercase; letter-spacing: 0.5px;
      cursor: pointer; display: flex; align-items: center; gap: 7px;
      font-family: 'Nunito Sans', sans-serif;
      min-height: 44px;
      transition: background 0.18s, transform 0.1s;
    }
    .cart-btn:hover { background: var(--primary); }
    .cart-btn:active { transform: scale(0.97); }
    .cart-count {
      background: #e03e3e; color: #ffffff;
      border-radius: 10px; min-width: 20px; height: 20px;
      padding: 0 6px; box-sizing: border-box;
      font-size: 11px; font-weight: 800; line-height: 1;
      border: none; outline: none; box-shadow: none;
      display: none; align-items: center; justify-content: center;
    }
    .cart-count.visible { display: flex; }
    /* Footer Instagram */
    .footer-social { margin: 14px 0 4px; }
    .footer-ig {
      display: inline-flex; align-items: center; gap: 7px;
      color: rgba(255,255,255,0.75); text-decoration: none;
      font-size: var(--t-menor); font-weight: 700;
      transition: color 0.18s;
    }
    .footer-ig:hover { color: var(--white); }
    .footer-ig svg { width: 18px; height: 18px; flex-shrink: 0; }

    /* ─── HERO ─── */
    .hero { background: #fff; margin-bottom: 0; }
    .hero-container {
      max-width: 1200px;
      width: 100%;
      margin: 0 auto;
      padding: 60px 80px;
      display: grid;
      grid-template-columns: 50% 50%;
      gap: 80px;
      align-items: center;
    }
    .hero-image {
      display: flex;
      align-items: flex-end;
      justify-content: flex-start;
      min-width: 0;
    }
    .hero-image img {
      width: 100%;
      max-width: 280px;
      height: auto;
      display: block;
      object-fit: contain;
      margin: 0 auto;
      mix-blend-mode: multiply;
      filter: drop-shadow(0px 16px 40px rgba(15, 61, 46, 0.08));
    }
    .hero-content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-width: 0;
    }
    .hero h1 {
      font-family: 'Nunito Sans', sans-serif;
      font-size: var(--t-display); /* 36px → 60px */
      font-weight: 800;
      color: #0F3D2E;
      line-height: 1.05;
      letter-spacing: -2px;
      margin-bottom: 10px;
    }
    .hero-divider {
      border: none;
      border-top: 2px solid #145A3A;
      width: 60%;
      margin: 0 0 26px 0;
    }
    .hero-h2 {
      font-family: 'Nunito Sans', sans-serif;
      font-size: var(--t-sub); /* 18px → 24px */
      font-weight: 400;
      color: #145A3A;
      line-height: 1.55;
      margin-bottom: 40px;
    }
    .hero-cta {
      display: inline-flex; align-items: center; justify-content: center;
      background: #1A3A2A; color: #fff;
      border: none; border-radius: 8px;
      padding: 1rem 2rem; font-size: var(--t-sub); font-weight: 700; /* 16px 32px / 19px */
      cursor: pointer; font-family: 'Nunito Sans', sans-serif;
      text-decoration: none; align-self: flex-start;
      transition: background 0.18s, transform 0.1s;
      letter-spacing: 0.3px;
    }
    .hero-cta:hover { background: #145A3A; }
    .hero-cta:active { transform: scale(0.98); }
    @media (max-width: 680px) {
      .hero-container {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 36px 24px 48px;
      }
      .hero-image { justify-content: center; }
      .hero-image img { max-width: 80%; mix-blend-mode: multiply; }
      .hero h1 { font-size: var(--t-display); letter-spacing: -1px; margin-bottom: 8px; }
      .hero-divider { margin-bottom: 20px; }
      .hero-h2 { font-size: var(--t-sub); margin-bottom: 32px; }
      .hero-cta { width: 100%; text-align: center; padding: 16px 24px; font-size: var(--t-sub); }
    }

    /* ─── ANNOUNCEMENT BAR ─── */
    .trust-strip {
      background: var(--dark);
      padding: 9px 20px; text-align: center;
      position: sticky;
      top: 0;
      z-index: 110;  /* encima del header (z-index: 100) */
    }
    .trust-text {
      font-size: var(--t-menor); font-weight: 600;
      color: rgba(255,255,255,0.85); line-height: 1.4;
      white-space: nowrap;
    }
    .trust-hl { color: var(--white); font-weight: 800; }
    .trust-accent { color: var(--accent); font-weight: 800; }
    @media (max-width: 768px) {
      .trust-strip { padding: 7px 16px; }
      .trust-text { white-space: normal; font-size: var(--t-menor); line-height: 1.5; }
    }
    .trust-accent { color: var(--accent); font-weight: 800; }

    /* ─── VALUE PROPS BANNER ─── */
    .value-props { padding: 28px 20px; background: var(--white); }
    .value-banner {
      background: var(--dark);
      border-radius: 24px;
      padding: 56px 64px;
      text-align: center;
      max-width: 900px; margin: 0 auto;
    }
    .vb-name {
      font-family: 'Anton', sans-serif;
      font-size: var(--t-titulo);
      color: var(--white); line-height: 1.1;
      letter-spacing: 0.5px; margin-bottom: 16px;
    }
    .vb-divider {
      width: 60px; height: 2px;
      background: rgba(255,255,255,0.2);
      margin: 0 auto 18px;
    }
    .vb-body {
      font-size: var(--t-cuerpo);
      color: rgba(255,255,255,0.65);
      line-height: 1.7; font-weight: 600;
      max-width: 600px; margin: 0 auto;
    }
    .vb-c-white { color: var(--white); font-weight: 800; }
    .vb-c-accent { color: var(--accent); font-weight: 800; }
    .vb-c-light  { color: var(--light);  font-weight: 800; }
    @media (max-width: 600px) {
      .value-banner { padding: 40px 24px; }
      .vb-body { font-size: var(--t-cuerpo); }
    }

    /* ─── SECTION HEADERS (otras secciones) ─── */
    .section-sup {
      text-align: center; font-size: var(--t-menor); font-weight: 800;
      letter-spacing: 2.5px; text-transform: uppercase;
      color: var(--accent); margin-bottom: 12px;
    }
    .section-title {
      text-align: center;
      font-family: 'Anton', sans-serif;
      font-size: var(--t-titulo); color: var(--dark);
      margin-bottom: 32px; line-height: 1.12;
      letter-spacing: 0.3px;
    }

    /* ─── HOW IT WORKS ─── */
    .how-it-works {
      background: linear-gradient(160deg, #081a10 0%, #122b1c 40%, #1a3a2a 75%, #0d2318 100%);
      padding: 64px 24px 72px;
    }
    .how-it-works .section-sup { color: var(--light); }
    .how-it-works .section-title {
      color: var(--white);
      margin-bottom: 8px;
    }
    .how-it-works .section-subtitle {
      text-align: center;
      font-size: var(--t-destac);
      color: rgba(255,255,255,0.48);
      font-weight: 500;
      margin-bottom: 40px;
    }
    .how-it-works-inner {
      max-width: 1040px;
      margin: 0 auto;
    }

    /* Grid de tarjetas: 1 col mobile → 2 col desktop */
    .steps {
      display: grid;
      grid-template-columns: 1fr;
      grid-auto-rows: 1fr;
      gap: 16px;
    }

    .step {
      display: flex;
      gap: 20px;
      align-items: flex-start;
      background: rgba(255,255,255,0.07);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 20px;
      padding: 24px;
      transition: background 0.2s, transform 0.15s;
    }
    .step:hover {
      background: rgba(255,255,255,0.11);
      transform: translateY(-2px);
    }
    .step-num {
      width: 56px;
      height: 56px;
      min-width: 56px;
      border-radius: 50%;
      background: var(--accent);
      color: var(--white);
      font-family: 'Anton', sans-serif;
      font-size: 26px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 6px 20px rgba(196,137,90,0.45);
    }
    .step-body {
      display: flex;
      flex-direction: column;
      gap: 6px;
      min-width: 0;
    }
    .step-title { font-size: var(--t-menor); font-weight: 800; color: var(--white); line-height: 1.2; }
    .step-desc { font-size: var(--t-micro); color: rgba(255,255,255,0.65); line-height: 1.6; }

    /* ─── HOW-IT-WORKS LAYOUT ─── */
    @media (min-width: 720px) {
      .how-it-works { padding: 72px 48px 80px; }
      .how-it-works .section-subtitle { font-size: var(--t-destac); color: rgba(255,255,255,0.85); }
      .steps { grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 20px; }
    }
    @media (max-width: 480px) {
      .step { backdrop-filter: none; -webkit-backdrop-filter: none; }
    }

    /* ─── PRICE NOTICE ─── */
    .price-notice {
      background: #fffbeb;
      border-left: 4px solid var(--accent);
      margin: 20px 16px 0;
      padding: 12px 16px;
      font-size: var(--t-micro); color: #92400e; line-height: 1.7;
      border-radius: 0 10px 10px 0;
    }
    .price-notice strong { color: #78350f; }

    /* ─── CATEGORY SECTION ─── */
    .tabs-wrapper { background: var(--white); padding: 44px 20px 40px; text-align: center; }
    .cat-heading {
      font-family: 'Anton', sans-serif;
      font-size: var(--t-titulo); font-weight: 400;
      letter-spacing: 0.3px;
      color: var(--dark); margin-bottom: 6px;
    }
    .cat-heading-hint {
      font-size: var(--t-micro); color: var(--gray);
      text-align: center; margin: 0 0 30px;
      font-weight: 600;
    }
    .cat-track-wrap { position: relative; max-width: 720px; margin: 0 auto; }
    .tabs {
      display: flex; gap: 24px; overflow-x: auto;
      scroll-behavior: smooth; scrollbar-width: none;
      padding: 8px 8px 20px; justify-content: center;
    }
    .tabs::-webkit-scrollbar { display: none; }
    .tab {
      flex-shrink: 0;
      display: flex; flex-direction: column; align-items: center; gap: 12px;
      background: none; border: none; outline: none; cursor: pointer;
      font-family: 'Nunito Sans', sans-serif; padding: 0;
    }
    .tab-circle {
      width: 108px; height: 108px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      transition: transform 0.2s, box-shadow 0.2s;
      overflow: hidden;
    }
    .tab-circle img { width: 100%; height: 100%; object-fit: cover; display: block; }
    /* Achiras: fondo sólido + ilustración centrada con aire */
    #tab-achiras .tab-circle { background: #c4895a; }
    #tab-achiras .tab-circle img { object-fit: contain; width: 72%; height: 72%; }
    .tab:hover .tab-circle { transform: scale(1.06); box-shadow: 0 8px 28px rgba(0,0,0,0.18); }
    .tab.active .tab-circle { box-shadow: 0 0 0 3px var(--white), 0 0 0 6px var(--dark); }
    .tab-label { font-size: var(--t-menor); font-weight: 700; color: var(--gray); transition: color 0.2s; }
    .tab.active .tab-label { color: var(--dark); }
    .cat-arrow {
      position: absolute; top: 54px; transform: translateY(-50%);
      background: var(--white); border: 1.5px solid var(--border);
      border-radius: 50%; width: 38px; height: 38px;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,0.10);
      font-size: 18px; color: var(--dark); line-height: 1;
      transition: background 0.15s; z-index: 2;
    }
    .cat-arrow:hover { background: var(--bg); }
    .cat-arrow-left  { left:  -20px; }
    .cat-arrow-right { right: -20px; }
    @media (max-width: 600px) {
      .cat-arrow { display: none; }
      .tabs { justify-content: flex-start; padding-left: 12px; gap: 12px; }
      .tab { min-width: calc(39vw); align-items: center; }
      .tab-circle { width: calc(33vw); height: calc(33vw); border-radius: 50%; }
      .tab-circle img { width: 100%; height: 100%; object-fit: cover; }
    }

    /* ─── PRODUCTS ─── */
    /* overflow-anchor: none — al filtrar por búsqueda el listado cambia de alto
       y el anclaje de scroll de Chrome movía la página sola. */
    .products-section { padding: 22px 16px 160px; max-width: 1100px; margin: 0 auto; overflow-anchor: none; }
    @media (min-width: 720px) { .products-section { padding: 28px 32px 180px; } }

    /* ─── PEEK estilo Rappi ─── */
    /* El card width se calcula para que quepan exactamente 2 completos + ~25% del 3ro */
    /* Fórmula: 2*card + gap + 0.25*card = container → card ≈ 39vw */

    /* Degradado suave solo en la nav de secciones */
    .section-nav::after {
      content: ''; position: absolute;
      top: 0; right: 0; bottom: 0; width: 36px;
      pointer-events: none; z-index: 2;
      background: linear-gradient(to right, transparent, var(--white));
    }

    /* ─── CARRUSEL ─── */
    .carousel-outer { position: relative; margin: 0 -4px; }
    .products-grid {
      display: flex; gap: 14px;
      overflow-x: auto; scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch; scrollbar-width: none;
      padding: 8px 8px 16px;
      scroll-snap-type: x mandatory;
    }
    .products-grid::-webkit-scrollbar { display: none; }
    .products-grid-full {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
    }
    @media (min-width: 480px) { .products-grid-full { grid-template-columns: repeat(3, 1fr); } }
    @media (min-width: 720px) { .products-grid-full { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
    .products-grid-full .product-card { min-width: unset; max-width: unset; }
    .car-btn {
      position: absolute; top: calc(50% - 28px); transform: translateY(-50%);
      width: 36px; height: 36px; border-radius: 50%;
      background: var(--white); border: 1.5px solid var(--border);
      box-shadow: var(--shadow); font-size: 20px; line-height: 1;
      cursor: pointer; z-index: 3;
      display: flex; align-items: center; justify-content: center;
      transition: box-shadow 0.15s;
    }
    .car-btn:hover { box-shadow: var(--shadow-md); }
    .car-btn-left  { left: -16px; }
    .car-btn-right { right: 4px; }
    @media (max-width: 680px) { .car-btn { display: none; } }

    /* Dots */
    /* dots eliminados — reemplazados por degradado lateral */
    .dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--border); transition: all 0.25s; flex-shrink: 0; cursor: pointer;
    }
    .dot.dot-active { background: var(--dark); width: 20px; border-radius: 4px; }

    /* ─── PRODUCT CARD ─── */
    .product-card {
      background: var(--white);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: hidden;
      display: flex; flex-direction: column;
      border: 1.5px solid var(--border);
      transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
      min-width: calc(39vw); max-width: calc(39vw); flex-shrink: 0;
      scroll-snap-align: start;
    }
    @media (min-width: 480px) { .product-card { min-width: 196px; max-width: 196px; } }
    .product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--light); }
    .product-card.in-cart { border-color: var(--primary); }
    .promo-card { border-color: rgba(224,62,62,0.55); }
    .repeat-banner {
      position: relative;
      display: flex; align-items: center; justify-content: center;
      gap: 12px; flex-wrap: wrap;
      background: var(--accent); color: var(--white);
      padding: 10px 16px; font-size: var(--t-menor); font-weight: 700;
      box-shadow: 0 2px 10px rgba(0,0,0,0.12);
    }
    .repeat-txt { color: var(--white); }
    .repeat-btn {
      background: var(--dark); color: var(--white);
      border: none; border-radius: 8px; padding: 8px 18px;
      font-size: var(--t-menor); font-weight: 800; cursor: pointer;
      font-family: 'Nunito Sans', sans-serif; min-height: 38px;
      transition: transform 0.1s;
    }
    .repeat-btn:active { transform: scale(0.97); }
    .repeat-close {
      background: none; border: none; cursor: pointer;
      color: rgba(255,255,255,0.8); font-size: var(--t-menor);
      padding: 6px; position: absolute; right: 10px;
    }
    @media (max-width: 480px) {
      .repeat-banner { font-size: var(--t-menor); gap: 8px; padding-right: 38px; }
      .repeat-btn { padding: 7px 14px; }
    }
    .repeat-aviso {
      background: #eaf4ee; border: 1.5px solid var(--primary);
      border-radius: 10px; padding: 10px 14px; margin-bottom: 12px;
      font-size: var(--t-micro); font-weight: 600; color: var(--dark); line-height: 1.5;
      display: flex; gap: 8px; align-items: flex-start;
    }
    .repeat-aviso-x {
      background: none; border: none; cursor: pointer;
      color: var(--gray); margin-left: auto; flex-shrink: 0; padding: 2px;
    }

    .cat-endnav {
      margin-top: 28px; padding: 24px 16px 8px;
      border-top: 1.5px solid var(--border);
      text-align: center;
    }
    .endnav-top {
      background: var(--dark); color: var(--white);
      border: none; border-radius: 10px;
      padding: 12px 22px; font-size: var(--t-menor); font-weight: 800;
      font-family: 'Nunito Sans', sans-serif; cursor: pointer;
      margin-bottom: 20px; min-height: 44px;
      transition: background 0.18s;
    }
    .endnav-top:hover { background: var(--primary); }
    .endnav-label {
      font-size: var(--t-menor); font-weight: 700; color: var(--gray);
      margin-bottom: 12px;
    }
    .endnav-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
    .endnav-chip {
      background: var(--bg); border: 1.5px solid var(--border);
      border-radius: 40px; padding: 10px 18px;
      font-size: var(--t-menor); font-weight: 700; color: var(--dark);
      font-family: 'Nunito Sans', sans-serif; cursor: pointer;
      min-height: 44px;
      transition: border-color 0.18s, background 0.18s;
    }
    .endnav-chip:hover { border-color: var(--primary); background: var(--white); }
    /* Variante de la navegación final en las fichas de producto: los chips son enlaces */
    a.endnav-chip { display: inline-flex; align-items: center; text-decoration: none; }
    .pd-endnav { max-width: 1100px; margin: 32px auto 0; }

    .promo-card .product-img { background: #fdf0ee; }

    /* Imagen */
    .product-img {
      background: var(--bg); text-align: center;
      position: relative;
      height: 160px;
      display: flex; align-items: center; justify-content: center;
      overflow: hidden;
    }
    .product-photo {
      width: 100%; height: 100%;
      object-fit: contain; object-position: center;
      padding: 14px;
      display: block;
    }
    .product-emoji { display: block; font-size: 64px; line-height: 1; }

    /* Badges */
    .badge-card {
      position: absolute; top: 10px; left: 10px;
      font-size: var(--t-micro); font-weight: 700; border-radius: 6px;
      padding: 3px 8px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--white);
    }
    .badge-feat  { background: var(--accent); }
    .badge-promo { background: #e03e3e; }

    /* Corazón */
    .card-heart {
      position: absolute; top: 10px; right: 10px;
      background: none; border: none; cursor: pointer;
      font-size: 18px; color: var(--gray-lt); padding: 2px;
      transition: color 0.15s, transform 0.15s;
      line-height: 1;
    }
    .card-heart:hover { color: #e03e3e; transform: scale(1.15); }

    /* Info */
    .product-info { padding: 12px 12px 12px; flex: 1; display: flex; flex-direction: column; }
    .product-cat-tag { font-size: var(--t-micro); font-weight: 700; color: var(--gray-lt); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 3px; }
    .product-name { font-size: var(--t-cuerpo); font-weight: 800; color: var(--dark); line-height: 1.3; margin-bottom: 3px; }
    .pname-link { color: inherit; text-decoration: none; }
    .pname-link:hover { color: var(--primary); text-decoration: underline; }
    .product-unit { font-size: var(--t-micro); color: var(--gray-lt); margin-bottom: 8px; font-weight: 600; }
    .product-desc { font-size: var(--t-micro); color: #999; line-height: 1.45; margin: 2px 0 8px; }
    .product-price { font-size: var(--t-destac); font-weight: 800; color: var(--dark); margin-bottom: 10px; }
    .product-price span { font-size: var(--t-micro); color: var(--gray-lt); font-weight: 600; }
    .product-qty { font-size: var(--t-micro); color: var(--primary); font-weight: 700; line-height: 1.3; margin-bottom: 10px; display: inline-block; width: fit-content; max-width: 100%; box-sizing: border-box; overflow-wrap: anywhere; background: var(--bg); padding: 3px 8px; border-radius: 8px; }
    .cart-item-qty { font-size: var(--t-micro); color: #a85423; font-weight: 800; line-height: 1.25; margin-top: 3px; display: inline-block; width: fit-content; max-width: 100%; box-sizing: border-box; overflow-wrap: anywhere; background: #fce9dc; padding: 2px 8px; border-radius: 999px; }
    .aprox-note { max-width: 1100px; margin: 14px auto 0; padding: 0 16px; font-size: var(--t-menor); color: var(--gray); font-weight: 600; display: flex; align-items: center; gap: 6px; }
    .price-original { font-size: var(--t-micro); color: var(--gray-lt); text-decoration: line-through; font-weight: 600; display: block; margin-bottom: 1px; }
    .promo-title { color: #e03e3e !important; }

    /* Controles */
    .product-controls { display: flex; align-items: center; margin-top: auto; gap: 0; border: 1.5px solid var(--border); border-radius: 10px; overflow: hidden; }
    .qty-btn {
      width: 44px; height: 44px; border: none; background: var(--white);
      font-size: 18px; font-weight: 700; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: background 0.12s; font-family: 'Nunito Sans', sans-serif; flex-shrink: 0;
      color: var(--dark);
    }
    .qty-btn:hover { background: var(--bg); }
    .qty-display { flex: 1; text-align: center; font-size: 15px; font-weight: 800; color: var(--dark); border-left: 1.5px solid var(--border); border-right: 1.5px solid var(--border); height: 44px; display: flex; align-items: center; justify-content: center; }
    .add-btn {
      width: 100%; padding: 14px 0; margin-top: auto;
      background: var(--dark); color: var(--white);
      border: none; border-radius: 10px;
      font-size: var(--t-menor); font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase;
      cursor: pointer; font-family: 'Nunito Sans', sans-serif;
      min-height: 44px;
      transition: background 0.15s;
    }
    .add-btn:hover { background: var(--primary); }

    /* ─── CATEGORY GROUP HEADER ─── */
    .category-group { margin-bottom: 32px; }
    .category-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
    .cat-ver-todo { font-size: var(--t-menor); font-weight: 700; color: var(--primary); text-decoration: underline; cursor: pointer; white-space: nowrap; }
    .cat-ver-todo:hover { color: var(--dark); }
    .cat-icon {
      width: 40px; height: 40px; border-radius: 12px;
      background: var(--dark);
      display: flex; align-items: center; justify-content: center; font-size: 20px;
    }
    .cat-name {
      font-family: 'Anton', sans-serif;
      font-size: var(--t-titulo); color: var(--dark); letter-spacing: 0.3px;
    }
    .cat-count {
      font-size: var(--t-micro); color: var(--gray);
      background: var(--border); border-radius: 20px;
      padding: 3px 10px; font-weight: 700;
    }

    .section-desc {
      font-size: var(--t-menor); font-weight: 600;
      color: var(--gray); margin-bottom: 16px; line-height: 1.5;
    }


    /* ─── COBERTURA ─── */
    .coverage-section {
      background: #fff;
      padding: 52px 20px 60px;
    }
    .coverage-inner {
      max-width: 980px;
      margin: 0 auto;
    }
    .coverage-section .section-sup { color: var(--primary); }
    .coverage-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 32px;
      margin-top: 32px;
    }
    .coverage-map {
      border-radius: 16px;
      overflow: hidden;
      height: 280px;
      box-shadow: 0 4px 24px rgba(0,0,0,0.10);
    }
    .coverage-map iframe {
      width: 100%; height: 100%;
      border: none; display: block;
    }
    #coverageMap { width: 100%; height: 100%; z-index: 1; }
    .zona-label {
      background: none; border: none; box-shadow: none;
      font-weight: 800; font-size: var(--t-menor); color: #1e3932;
      font-family: 'Nunito Sans', sans-serif;
    }
    .coverage-zones {}
    .coverage-zones h3 {
      font-size: var(--t-sub);
      font-weight: 800;
      color: var(--dark);
      margin-bottom: 14px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .zone-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-bottom: 24px;
    }
    .zone-tag {
      background: var(--bg);
      border: 1.5px solid var(--border);
      border-radius: 40px;
      padding: 7px 16px;
      font-size: var(--t-menor);
      font-weight: 700;
      color: var(--dark);
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .zone-tag .dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--primary);
      flex-shrink: 0;
    }
    @media (min-width: 720px) {
      .coverage-grid {
        grid-template-columns: 1fr 1fr;
        align-items: start;
      }
      .coverage-map { height: 340px; }
    }
    @media (min-width: 1024px) {
      .coverage-section { padding: 72px 48px 80px; }
      .coverage-grid { gap: 48px; }
      .coverage-map { height: 380px; }
    }
    /* ─── FAQs ─── */
    .faqs-section { background: var(--bg); padding: 52px 20px; }
    .wa-nudge {
      background: var(--bg); padding: 32px 20px;
      display: flex; justify-content: center;
    }
    .wa-nudge-inner {
      display: flex; align-items: center; gap: 14px;
      background: #fff; border: 1.5px solid #25D366;
      border-radius: 16px; padding: 16px 22px;
      max-width: 420px; width: 100%; text-align: left;
    }
    .wa-nudge-icon { font-size: 28px; flex-shrink: 0; }
    .wa-nudge-text { font-size: var(--t-cuerpo); color: var(--dark); line-height: 1.5; }
    .wa-nudge-text strong { display: block; font-size: var(--t-destac); margin-bottom: 2px; }
    .wa-nudge-text a { color: #25D366; font-weight: 700; text-decoration: none; }
    .faqs-inner { max-width: 640px; margin: 0 auto; }
    .faq-list { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; }
    .faq-item {
      background: var(--white); border-radius: 14px; overflow: hidden;
      box-shadow: var(--shadow);
    }
    .faq-q {
      width: 100%; background: none; border: none;
      text-align: left; padding: 18px 20px;
      font-family: 'Nunito Sans', sans-serif;
      font-size: var(--t-destac); font-weight: 700; color: var(--dark);
      cursor: pointer; min-height: 56px;
      display: flex; justify-content: space-between; align-items: center; gap: 12px;
    }
    .faq-q span.arrow {
      font-size: 20px; color: var(--primary);
      transition: transform 0.2s; flex-shrink: 0; font-weight: 300;
    }
    .faq-item.open .faq-q span.arrow { transform: rotate(45deg); }
    .faq-a {
      font-size: var(--t-cuerpo); color: var(--gray); line-height: 1.65;
      max-height: 0; overflow: hidden;
      transition: max-height 0.3s ease, padding 0.3s;
      padding: 0 20px;
    }
    .faq-item.open .faq-a { max-height: 200px; padding: 0 20px 18px; }

    /* ─── FLOATING CART BAR ─── */
    .float-cart {
      position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
      background: var(--dark);
      padding: 12px 16px;
      display: none; align-items: center; justify-content: space-between; gap: 12px;
      box-shadow: 0 -4px 24px rgba(26,58,42,0.3);
    }
    .float-cart.visible { display: flex; }
    .float-cart-info { color: var(--white); }
    .float-cart-items { font-size: var(--t-micro); color: var(--light); font-weight: 700; }
    .float-cart-total {
      font-family: 'Anton', sans-serif;
      font-size: var(--t-titulo); letter-spacing: 0.3px;
    }
    .float-cart-note { font-size: var(--t-micro); color: rgba(255,255,255,0.4); }
    .float-cart-cta {
      background: var(--accent); color: var(--white);
      border: none; border-radius: 10px;
      padding: 14px 22px; font-size: var(--t-menor); font-weight: 800;
      text-transform: uppercase; letter-spacing: 0.5px;
      cursor: pointer; font-family: 'Nunito Sans', sans-serif;
      display: flex; align-items: center; gap: 6px;
      min-height: 44px;
      white-space: nowrap; transition: background 0.15s;
    }
    .float-cart-cta:active { background: #b5784d; }

    /* ─── MODAL ─── */
    .overlay {
      position: fixed; inset: 0; z-index: 300;
      background: rgba(26,58,42,0.45);
      display: none; align-items: flex-end;
      backdrop-filter: blur(3px);
    }
    .overlay.open { display: flex; }
    .modal {
      background: var(--white);
      border-radius: 24px 24px 0 0;
      width: 100%; max-height: 90vh;
      overflow-y: auto;
      padding: 20px 20px 32px;
      display: flex; flex-direction: column; gap: 16px;
      position: relative;
    }
    .modal-handle {
      width: 40px; height: 4px; border-radius: 2px;
      background: var(--border); margin: 0 auto 4px;
    }
    .modal-title {
      font-family: 'Anton', sans-serif;
      font-size: var(--t-titulo); color: var(--dark); letter-spacing: 0.3px;
    }
    .modal-close {
      position: absolute; top: 20px; right: 20px;
      background: var(--border); border: none;
      width: 32px; height: 32px; border-radius: 50%;
      cursor: pointer; font-size: 16px; color: var(--dark);
      display: flex; align-items: center; justify-content: center;
    }
    .cart-items { display: flex; flex-direction: column; gap: 10px; }
    .cart-item {
      display: flex; align-items: center; gap: 8px; padding: 10px 10px;
      background: var(--bg); border-radius: 12px;
    }
    @media (min-width: 720px) {
      .cart-item { gap: 12px; padding: 10px 12px; }
    }
    .cart-item-emoji { font-size: 30px; flex-shrink: 0; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; }
    .cart-item-photo { width: 52px; height: 52px; object-fit: contain; border-radius: 10px; background: var(--bg); padding: 4px; flex-shrink: 0; }
    .cart-item-info { flex: 1; min-width: 0; }
    .cart-item-name { font-size: var(--t-cuerpo); font-weight: 700; }
    .cart-item-sub { font-size: var(--t-micro); color: var(--gray); }
    .cart-item-price { font-size: var(--t-destac); font-weight: 800; color: var(--primary); white-space: nowrap; }
    .cart-item-remove { background: none; border: none; font-size: 16px; cursor: pointer; color: var(--gray-lt); padding: 4px; }
    .qty-label {
      font-size: var(--t-micro); font-weight: 700; color: var(--primary);
      white-space: nowrap; line-height: 1;
    }
    .cart-qty-col {
      display: flex; flex-direction: column; align-items: center; gap: 2px;
      width: 92px; flex-shrink: 0;
    }
    .cart-item-price { min-width: 58px; text-align: right; flex-shrink: 0; }
    .cart-item-name { overflow-wrap: break-word; }
    .min-qty-note {
      font-size: var(--t-micro); font-weight: 700; color: #b3541e;
      background: #fdf1e7; border-radius: 8px;
      padding: 6px 12px; margin: -4px 0 8px;
    }
    .cart-cat-header { font-size: var(--t-micro); font-weight: 800; color: var(--primary); text-transform: uppercase; letter-spacing: 0.06em; padding: 10px 0 4px; border-bottom: 1.5px solid var(--border); margin-bottom: 2px; }
    .cart-divider { border: none; border-top: 1.5px dashed var(--border); }
    /* Línea fija de empaques: sin controles, no se puede eliminar */
    .cart-item-fijo { background: #f7f7f4; border-radius: 10px; }
    .cart-item-fijo .cart-item-emoji { font-size: 24px; }
    .cart-item-fijo .cart-item-qty { background: #e9ecea; color: #4a5a52; }
    .cart-item-remove-off { opacity: .35; cursor: default; pointer-events: none; }
    /* Desglose previo al total */
    .cart-sub-row { display: flex; justify-content: space-between; align-items: center; font-size: var(--t-menor); color: var(--gray); padding: 2px 0; }
    .cart-sub-label { font-weight: 600; }
    .cart-sub-value { font-weight: 700; color: var(--dark); }
    .cart-total-row { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; padding-top: 6px; border-top: 1.5px solid var(--border); }
    .cart-total-label { font-size: var(--t-menor); font-weight: 600; color: var(--gray); }
    .cart-total-value {
      font-family: 'Anton', sans-serif;
      font-size: var(--t-titulo); color: var(--dark); letter-spacing: 0.3px;
    }
    .cart-total-note { font-size: var(--t-micro); color: var(--gray); margin-top: 4px; }
    .cart-disclaimer {
      background: #fdeeec;
      border: 1.5px solid #f2c1b8;
      border-radius: 10px;
      padding: 12px 14px;
      font-size: var(--t-micro);
      color: #9c4736;
      line-height: 1.55;
      margin: 12px 0 4px;
    }
    .cd-title {
      font-weight: 800; font-size: var(--t-menor); color: #b23a26;
      display: flex; align-items: center; gap: 6px;
      margin-bottom: 6px;
    }
    .cart-disclaimer .cd-icon { flex-shrink: 0; font-size: 15px; }
    .cd-list { margin: 0; padding-left: 18px; }
    .cd-list li { margin-bottom: 4px; }
    .cd-list li:last-child { margin-bottom: 0; }
    .cart-empty { text-align: center; padding: 32px 0; color: var(--gray); font-size: var(--t-destac); }
    .cart-empty span { font-size: 52px; display: block; margin-bottom: 12px; }
    .form-title {
      font-size: var(--t-sub); font-weight: 800; color: var(--dark);
      margin-bottom: 14px; padding-bottom: 10px;
      border-bottom: 1.5px solid var(--border);
    }
    .form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
    .form-group label { font-size: var(--t-menor); font-weight: 700; color: var(--dark); display: flex; align-items: center; gap: 5px; }
    .form-group input, .form-group textarea {
      padding: 12px 14px;
      border: 1.5px solid var(--border); border-radius: 10px;
      font-size: var(--t-cuerpo); font-family: 'Nunito Sans', sans-serif;
      color: var(--dark); background: var(--bg);
      transition: border-color 0.2s; outline: none;
    }
    .form-group input:focus, .form-group textarea:focus {
      border-color: var(--primary); background: var(--white);
    }
    .form-group .field-hint { font-size: var(--t-micro); color: var(--gray); }
    .form-group textarea { resize: none; height: 72px; }
    .required { color: var(--accent); }
    .whatsapp-btn {
      width: 100%; padding: 16px;
      background: #25D366; border: none; border-radius: 14px;
      color: var(--white); font-size: var(--t-sub); font-weight: 800;
      cursor: pointer; font-family: 'Nunito Sans', sans-serif;
      display: flex; align-items: center; justify-content: center; gap: 8px;
      transition: background 0.15s, transform 0.1s;
      box-shadow: 0 4px 16px rgba(37,211,102,0.28);
    }
    .whatsapp-btn:active { background: #1ebe5c; transform: scale(0.99); }
    .whatsapp-btn.wa-disabled {
      background: #b8c4be;
      cursor: not-allowed;
      opacity: 0.75;
    }
    .whatsapp-btn.wa-disabled:hover,
    .whatsapp-btn.wa-disabled:active { background: #b8c4be; transform: none; }
    .min-order-notice {
      background: #fff3e0;
      border: 1.5px solid #f0b45c;
      border-radius: 10px;
      padding: 12px 14px;
      font-size: var(--t-menor);
      color: #7a5210;
      line-height: 1.5;
      margin: 10px 0 4px;
    }
    .whatsapp-icon { font-size: 22px; }
    .wa-hint {
      text-align: center; font-size: var(--t-micro); color: var(--gray);
      margin-top: 8px; line-height: 1.5;
    }

    /* ─── FLOATING CTA ─── */
    .float-cta {
      position: fixed; bottom: 24px; left: 50%;
      transform: translateX(-50%);
      z-index: 180;
      background: var(--dark); color: var(--white);
      border: none; border-radius: 10px;
      padding: 14px 32px; font-size: var(--t-menor); font-weight: 800;
      text-transform: uppercase; letter-spacing: 0.5px;
      font-family: 'Nunito Sans', sans-serif;
      text-decoration: none;
      box-shadow: 0 6px 24px rgba(26,58,42,0.35);
      cursor: pointer; min-height: 44px;
      opacity: 0; pointer-events: none;
      transition: opacity 0.3s, transform 0.3s;
      white-space: nowrap;
    }
    .float-cta.visible {
      opacity: 1; pointer-events: auto;
    }
    .float-cta:hover { background: var(--primary); }

    /* ─── FLOATING WA BUTTON ─── */
    .wa-float {
      position: fixed; bottom: 84px; right: 16px; z-index: 190;
      width: 54px; height: 54px;
      background: #25D366; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 28px; box-shadow: 0 4px 16px rgba(37,211,102,0.4);
      text-decoration: none;
      transition: transform 0.2s;
    }
    .wa-float:hover { transform: scale(1.08); }
    /* Con la barra del carrito abierta, la burbuja de WhatsApp sube por encima
       de ella. La altura real de la barra la publica updateCartUI() en
       --cart-bar-h, así funciona en cualquier breakpoint sin números mágicos. */
    body.con-carrito .wa-float { bottom: calc(var(--cart-bar-h, 84px) + 16px); }

    /* ─── FOOTER ─── */
    .footer { background: var(--dark); padding: 36px 20px; text-align: center; }
    .footer-logo-row {
      display: flex; align-items: center; gap: 10px;
      justify-content: center; margin-bottom: 6px;
    }
    .footer-name {
      font-family: 'Anton', sans-serif;
      font-size: 28px; color: var(--white); letter-spacing: 1px;
    }
    .footer-tagline { font-size: var(--t-menor); color: var(--light); margin-bottom: 20px; font-weight: 600; }
    .footer-divider { border: none; border-top: 1px solid rgba(255,255,255,0.1); margin: 16px 0; }
    .footer-info { font-size: var(--t-menor); color: rgba(255,255,255,0.55); line-height: 2.2; font-weight: 600; }
    .footer-info strong { color: var(--light); }
    .footer-copy { font-size: var(--t-micro); color: rgba(255,255,255,0.28); margin-top: 16px; }
    .footer-legal { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 14px; }
    .footer-legal a { font-size: var(--t-micro); color: rgba(255,255,255,0.45); text-decoration: underline; cursor: pointer; background: none; border: none; font-family: inherit; font-weight: 600; }
    .footer-legal a:hover { color: var(--light); }

    /* ── Modales legales ── */
    .legal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 3000; align-items: center; justify-content: center; padding: 20px; }
    .legal-overlay.open { display: flex; }
    .legal-modal { background: var(--white); border-radius: var(--radius); max-width: 640px; width: 100%; max-height: 85vh; overflow-y: auto; padding: 32px 28px; position: relative; }
    .legal-modal h2 { font-size: var(--t-sub); color: var(--dark); margin-bottom: 16px; font-family: 'Anton', sans-serif; letter-spacing: 0.5px; }
    .legal-modal h3 { font-size: var(--t-sub); font-weight: 800; color: var(--primary); margin: 20px 0 6px; }
    .legal-modal p, .legal-modal li { font-size: var(--t-cuerpo); color: var(--gray); line-height: 1.7; }
    .legal-modal ul { padding-left: 18px; margin: 6px 0; }
    .legal-close { position: absolute; top: 16px; right: 16px; background: var(--bg); border: none; border-radius: 50%; width: 32px; height: 32px; font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--dark); }
    .legal-close:hover { background: var(--border); }
    /* ── Ventana de confirmación + Mis pedidos (Fase 1) ── */
    .legal-overlay.tx-top { z-index: 4000; }
    .confirm-modal { max-width: 420px; text-align: center; padding: 32px 26px 24px; }
    .confirm-emoji { font-size: 44px; line-height: 1; margin-bottom: 6px; }
    .confirm-modal h2 { font-family: 'Nunito Sans', sans-serif; font-weight: 800; color: var(--dark); margin-bottom: 10px; }
    .confirm-lead { font-size: var(--t-destac); color: var(--gray); line-height: 1.6; margin-bottom: 20px; }
    .confirm-wa { width: 100%; background: #25d366; color: #fff; border: none; border-radius: 12px; padding: 15px; font-size: var(--t-sub); font-weight: 800; font-family: 'Nunito Sans', sans-serif; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: background 0.18s, transform 0.1s; }
    .confirm-wa:hover { background: #1ebe5c; }
    .confirm-wa:active { transform: scale(0.99); }
    .confirm-cancel { width: 100%; background: none; border: none; color: var(--gray); font-size: var(--t-menor); font-weight: 700; cursor: pointer; padding: 12px; margin-top: 4px; font-family: 'Nunito Sans', sans-serif; text-decoration: underline; text-underline-offset: 3px; }
    .confirm-cancel:hover { color: var(--dark); }
    .confirm-note { font-size: var(--t-micro); color: var(--gray-lt); line-height: 1.5; margin-top: 8px; font-style: italic; }
    .mp-sub { font-size: var(--t-menor); color: var(--gray); margin-bottom: 16px; }
    .mp-empty { font-size: var(--t-menor); color: var(--gray); line-height: 1.6; }
    .mp-item { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border); }
    .mp-item:last-child { border-bottom: none; }
    .mp-info { flex: 1; min-width: 0; }
    .mp-fecha { font-size: var(--t-micro); color: var(--gray-lt); font-weight: 700; text-transform: capitalize; }
    .mp-resumen { font-size: var(--t-cuerpo); color: var(--dark); font-weight: 800; margin: 2px 0; }
    .mp-detalle { font-size: var(--t-micro); color: var(--gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .mp-repetir { flex-shrink: 0; background: var(--primary); color: #fff; border: none; border-radius: 10px; padding: 10px 16px; font-size: var(--t-menor); font-weight: 800; cursor: pointer; font-family: 'Nunito Sans', sans-serif; }
    .mp-repetir:hover { background: var(--dark); }
    .mp-link { display: inline-block; margin-top: 16px; background: var(--bg); border: 1.5px solid var(--border); color: var(--primary); border-radius: 10px; padding: 10px 16px; font-size: var(--t-menor); font-weight: 800; cursor: pointer; font-family: 'Nunito Sans', sans-serif; }
    .mp-link:hover { background: var(--white); border-color: var(--primary); }
    .repeat-btn-alt { background: var(--white); color: var(--primary); border: 1.5px solid var(--primary); }

    /* ─── RESPONSIVE TEXT ─── */
    .m-only { display: none; }
    @media (max-width: 680px) {
      .d-only { display: none; }
      .m-only { display: inline; }
    }

    /* ─── DESKTOP HEADER (≥ 720px) ─── */
    @media (min-width: 720px) {
      header { padding: 14px 48px 0; }
      .header-top { height: 60px; }
      .logo-name { font-size: 40px; }
      .logo-mascot { height: 52px; }
      .section-nav a { font-size: var(--t-menor); padding: 5px 18px; }
      .cart-btn { font-size: var(--t-menor); padding: 13px 24px 13px 18px; }
    }

    /* ─── HEADER ESCRITORIO GRANDE (≥ 1024px) ─── */
    @media (min-width: 1024px) {
      /* Menú de categorías */
      .section-nav {
        gap: 4px;                  /* separación entre ítems */
      }
      .section-nav a {
        /* 20px con base 125% */
        font-weight: 500;
        padding: 6px 22px;         /* más espacio horizontal al ser más grande */
        letter-spacing: 0.1px;
      }
      .section-nav .snav-sep {
        margin: 0 4px;
      }

      /* Buscador */
      .search-input {
        padding: 11px 48px 11px 18px;
      }
      .search-input::placeholder {
        font-size: 0.95rem;
      }

      /* Botón MI PEDIDO */
      .cart-btn {
        font-weight: 600;
        padding: 14px 26px 14px 20px;
        letter-spacing: 0.5px;
      }

      /* Logo: escala proporcional */
      .logo-name { font-size: 2.25rem; }   /* ~45px */
      .logo-mascot { height: 56px; }
      .header-top { height: 68px; }
    }

    /* ─── VALIDATION ─── */
    .error-msg { color: #e53e3e; font-size: var(--t-micro); font-weight: 600; display: none; }
    .input-error { border-color: #e53e3e !important; }

    /* ─── INTERLINEADO POR RANGO ───
       Este bloque también asignaba TAMAÑOS, y competía con la regla propia
       de cada clase: .product-name pedía --t-cuerpo en su regla y --t-menor
       aquí, así que en celular medía un paso y en escritorio otro. Ese era
       justo el desajuste que se veía. Los tamaños ahora viven en la regla de
       cada componente, uno solo por clase; aquí queda el interlineado. */
    .section-title, .vb-name, .cart-title { line-height: var(--lh-title); }
    .step-title, .prop-title { line-height: var(--lh-title); }
    .vb-body, .step-desc, .trust-text,
    .faq-q, .faq-a, .product-desc { line-height: var(--lh-body); }
    .price-notice, .cart-total-note,
    .field-hint, .error-msg, .footer-copy { line-height: 1.6; }
    /* ─── BUSCADOR ─── */
    .search-wrap {
      flex: 1; max-width: 400px;
      position: relative;
    }
    .search-input {
      width: 100%; padding: 10px 44px 10px 16px;
      border: 1.5px solid var(--border); border-radius: 10px;
      font-family: 'Nunito Sans', sans-serif;
      font-size: var(--t-cuerpo); font-weight: 600; color: var(--dark);
      background: var(--white); outline: none;
      transition: border-color 0.18s;
      min-height: 44px;
    }
    .search-input:focus { border-color: var(--primary); }
    .search-input::placeholder { color: var(--gray-lt); font-weight: 400; }
    .search-icon {
      position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
      color: var(--gray); pointer-events: none; line-height: 1;
    }
    .search-clear {
      position: absolute; right: 38px; top: 50%; transform: translateY(-50%);
      background: var(--border); border: none; border-radius: 50%;
      width: 18px; height: 18px; cursor: pointer;
      font-size: var(--t-micro); color: var(--gray);
      display: none; align-items: center; justify-content: center;
    }
    .search-clear.visible { display: flex; }
    .search-results-header {
      font-size: var(--t-menor); color: var(--gray); font-weight: 600;
      margin-bottom: 16px; padding: 0 4px;
    }
    .search-results-header strong { color: var(--dark); }
    @media (max-width: 680px) {
      /* El buscador baja a su propia fila y ocupa todo el ancho */
      .header-top { flex-wrap: wrap; row-gap: 10px; height: auto; }
      .search-wrap { order: 3; flex-basis: 100%; max-width: none; }
      .search-input { font-size: var(--t-cuerpo); min-height: 46px; }
      /* Botón del carrito compacto y con aire a la derecha */
      .cart-btn {
        margin-left: auto; margin-right: 4px;
        padding: 10px 12px; font-size: var(--t-menor);
        letter-spacing: 0.3px; gap: 6px;
      }
      .logo-mascot { height: 36px; }
    }

    /* Botones CTA — tamaños base (móvil y tablet) */
    .hero-cta { font-size: var(--t-sub); }   /* 17px con base 16px */
    .float-cta { font-size: var(--t-menor); }
    .add-btn { font-size: var(--t-menor); }
    .cart-btn { font-size: var(--t-menor); }
    .float-cart-cta { font-size: var(--t-menor); }
    .wa-submit { font-size: var(--t-cuerpo); }

    /* ── BOTONES + IMAGEN: OVERRIDES FINALES ESCRITORIO ────────────
       Este bloque va AL FINAL del CSS para ganar en cascada sobre
       cualquier regla anterior con la misma especificidad.
    ── */
    @media (min-width: 1024px) {
      /* Botón "Armar mi mercado" */
      .hero-cta {
        font-weight: 600;
        padding: 0.9rem 2.2rem;
        letter-spacing: 0.3px;
      }

      /* Botón "MI PEDIDO" */


      /* Imagen hero: fondo transparente definitivo
         mix-blend-mode: multiply hace que el blanco se fusione con el fondo blanco.
         background: transparent asegura que no haya capa opaca detrás. */
      .hero-image {
        background: transparent;
      }
      .hero-image img {
        width: 100%;
        max-width: 550px;
        mix-blend-mode: multiply;
        background: transparent;
      }

      /* ─── CATÁLOGO / PRODUCTOS EN ESCRITORIO ─── */

      /* Alerta amarilla (ya funciona bien — sin cambios) */
      .price-notice {
        max-width: 1200px;
        margin: 24px auto 0;
        padding: 16px 28px;
      }

      /* Sección de categorías: círculos grandes y texto legible */
      .tabs-wrapper { padding: 24px 0; position: relative; }
      .cat-track-wrap { width: fit-content; max-width: 100%; margin: 0 auto; padding: 0; position: relative; }
      .tabs { gap: 40px; justify-content: center; }
      .cat-heading { font-weight: 700; margin-bottom: 2rem; }
      .cat-arrow { width: 40px; height: 40px; font-size: 20px; z-index: 10; top: 50%; transform: translateY(-50%); }
      .cat-arrow-left  { left: -52px; }
      .cat-arrow-right { right: -52px; }
      .tab-circle {
        width: 170px;
        height: 170px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
      }
      .tab-circle img { width: 100%; height: 100%; object-fit: cover; display: block; }
      #tab-achiras .tab-circle { background: #c4895a; }
      #tab-achiras .tab-circle img { object-fit: contain; width: 72%; height: 72%; }
      .tab.active .tab-circle { box-shadow: 0 0 0 4px #1e3932; }
      .tab-label { font-weight: 600; }

    }

    /* ── CATÁLOGO DESKTOP: fuera del bloque 1024 para mayor especificidad ── */
    @media (min-width: 1024px) {

      /* Contenedor principal del catálogo */
      .products-section {
        padding: 40px 56px 220px;
        max-width: 1400px;
        margin: 0 auto;
      }

      /* Carrusel horizontal: flex, tarjetas niveladas y sin cortes */
      .products-grid {
        gap: 20px;
        padding: 8px 4px 28px;
        align-items: stretch;
      }
      .products-grid .product-card {
        min-width: 240px !important;
        max-width: 240px !important;
        width: 240px !important;
        min-height: 400px;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
      }

      /* Grid "ver todo categoría": columnas amplias, tarjetas niveladas */
      .products-grid-full {
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
        gap: 24px;
        align-items: stretch;
      }
      .products-grid-full .product-card {
        min-width: unset !important;
        max-width: unset !important;
        width: 100%;
        min-height: 400px;
        display: flex;
        flex-direction: column;
      }

      /* Imagen dentro de tarjeta */
      .product-img { height: 200px; flex-shrink: 0; }

      /* Info crece y empuja el botón al fondo */
      .product-info {
        padding: 16px;
        flex: 1;
        display: flex;
        flex-direction: column;
      }

      /* Tipografía interna — forzada sobre el sistema base */
      .product-cat-tag {
        text-transform: uppercase;
        letter-spacing: 0.8px;
        margin-bottom: 5px;
      }
      .product-name {
        font-weight: 600;
        line-height: 1.2;
        margin-bottom: 5px;
      }
      .product-unit {
        color: #555 !important;
        margin-bottom: 12px;
      }
      .product-price {
        font-weight: 700;
        margin-bottom: 16px;
      }

      /* Botón y controles pegados al fondo */
      .product-controls,
      .add-btn { margin-top: auto; }
      .add-btn {
        font-weight: 800;
        padding: 14px 0;
        letter-spacing: 0.5px;
        width: 100%;
      }
      .qty-btn { width: 48px; height: 48px; font-size: 20px; }
      .qty-display { height: 48px; font-size: 16px; font-weight: 800; }
      .cat-ver-todo { font-weight: 700; }

      /* Títulos y descripciones de sección */
      .cat-name {
        font-weight: 700;
        letter-spacing: 0.2px;
      }
      .category-header { margin-bottom: 12px; }
      .section-desc {
        color: #555 !important;
        margin-bottom: 24px !important;
        line-height: 1.6;
      }

      /* ─── FAQ + SOPORTE EN ESCRITORIO ─── */

      /* Bloque WhatsApp */
      .wa-nudge-inner { max-width: 560px; padding: 20px 28px; }
      .wa-nudge-text { line-height: 1.6; }
      .wa-nudge-text strong { margin-bottom: 4px; }
      .wa-nudge-text a { font-weight: 600; }

      /* Contenedor FAQ más ancho */
      .faqs-inner { max-width: 820px; }

      /* Suptítulo "RESOLVEMOS TUS DUDAS" */
      .faqs-section .section-sup {
        letter-spacing: 1px;
      }

      /* Título "Preguntas frecuentes" */
      .faqs-section .section-title {
        line-height: 1.2;
      }

      /* Pregunta del acordeón */
      .faq-q {
        font-weight: 600;
        padding: 20px 24px;
      }

      /* Respuesta del acordeón */
      .faq-a {
        line-height: 1.6;
        padding: 0 24px;
      }
      /* Aumentar max-height para que el texto más grande no quede cortado */
      .faq-item.open .faq-a { max-height: 400px; padding: 0 24px 22px; }


      /* ─── FOOTER EN ESCRITORIO ─── */
      .footer { padding: 52px 48px; }
      .footer-name { font-size: 1.5rem !important; }
      .footer-tagline { margin-bottom: 24px; }
      .footer-info { line-height: 2.4; }
      .footer-legal { gap: 28px; }
      .footer-legal a { color: rgba(255,255,255,0.65) !important; }
      .footer-copy { color: rgba(255,255,255,0.38) !important; }

      /* Botón flotante "ARMAR MI MERCADO" */
      .float-cta { font-weight: 600; padding: 16px 40px; }

      /* Burbuja flotante de WhatsApp */
      .wa-float {
        width: 60px; height: 60px;
        bottom: 100px; right: 24px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15), 0 4px 16px rgba(37,211,102,0.35);
      }
      .wa-float svg { width: 32px; height: 32px; }

      /* ─── MI PEDIDO (CARRITO + FORMULARIO) EN ESCRITORIO ─── */

      /* Fila de producto */
      .cart-item { gap: 16px; padding: 14px 0; }
      .cart-item-photo { width: 64px; height: 64px; }
      .cart-item-emoji { width: 64px; height: 64px; font-size: 36px; }
      .cart-item-name  { font-weight: 600; }
      .cart-item-sub   { }
      .cart-item-price { font-weight: 700; }
      .cart-qty-col { width: 112px; }
      .cart-item-price { min-width: 84px; }
      .qty-label { }

      /* Total estimado */
      .cart-total-label { }
      .cart-total-value { }
      .cart-total-note  { margin-top: 6px; }

      /* Formulario de entrega */
      .form-title { }
      .form-group label { font-weight: 600; }
      .form-group input,
      .form-group textarea { padding: 13px 16px; }
      .form-group input::placeholder,
      .form-group textarea::placeholder { font-size: 1rem !important; }
      .form-group .field-hint { }

      /* Botón confirmar pedido */
      .whatsapp-btn { font-weight: 600; padding: 18px; }
      .wa-hint { }
    }

/* ─── PRODUCTO — página de detalle ─── */
.pd-wrap{max-width:1080px;margin:0 auto;padding:18px 20px 48px}
.pd-crumb{font-size: var(--t-micro);color:var(--gray-lt);font-weight:700;margin:8px 0 16px}
.pd-crumb a{text-decoration:none;color:var(--gray)}
.pd-crumb a:hover{color:var(--primary)}
.pd-grid{display:grid;grid-template-columns:1fr;gap:24px}
@media(min-width:760px){.pd-grid{grid-template-columns:1fr 1fr;gap:40px;align-items:start}}
.pd-photo{background:var(--bg);border:1.5px solid var(--border);border-radius:16px;display:flex;align-items:center;justify-content:center;padding:20px;font-size:80px}
.pd-photo img{width:100%;max-width:440px;height:auto}
.pd-tag{font-size: var(--t-micro);font-weight:800;color:var(--gray-lt);text-transform:uppercase;letter-spacing:.9px}
.pd-name{font-family:'Anton',sans-serif;font-size: var(--t-display);color:var(--dark);letter-spacing:.5px;line-height:1.05;margin:6px 0 8px}
.pd-unit{font-size: var(--t-menor);color:var(--gray-lt);font-weight:600}
.pd-price{font-size: var(--t-titulo);font-weight:800;color:var(--dark);margin:10px 0 4px}
.pd-est{display:inline-block;max-width:100%;box-sizing:border-box;overflow-wrap:anywhere;line-height:1.3;font-size: var(--t-micro);color:var(--primary);font-weight:700;background:var(--bg);padding:3px 10px;border-radius:8px;margin-bottom:14px}
.pd-add{width:100%;max-width:360px;background:var(--dark);color:#fff;border:none;border-radius:12px;padding:15px;font-size: var(--t-sub);font-weight:800;font-family:'Nunito Sans',sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;transition:background .18s,transform .1s}
.pd-add:hover{background:var(--primary)} .pd-add:active{transform:scale(.99)}
.pd-stepper{display:inline-flex;align-items:center;gap:16px;border:1.5px solid var(--border);border-radius:12px;padding:8px 16px}
.pd-qbtn{width:40px;height:44px;border-radius:8px;border:none;background:var(--bg);color:var(--dark);font-size:22px;font-weight:800;cursor:pointer;line-height:1}
.pd-qbtn:hover{background:var(--light)}
.pd-qval{font-size:18px;font-weight:800;min-width:64px;text-align:center}
.pd-instock{font-size: var(--t-menor);font-weight:800;color:var(--primary);margin-top:8px}
.pd-min{font-size: var(--t-micro);color:var(--gray-lt);font-weight:700;margin-top:12px}
.pd-back{display:inline-block;color:var(--gray);font-size: var(--t-menor);font-weight:700;text-decoration:underline;text-underline-offset:3px;padding:10px 0}
.pd-sec{margin-top:18px}
.pd-sec h2{font-size: var(--t-sub);color:var(--dark);margin-bottom:6px;font-family:'Nunito Sans',sans-serif;font-weight:800}
.pd-sec p{font-size: var(--t-cuerpo);color:var(--gray);line-height:1.7}
.pd-ben{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;padding:0}
.pd-ben li{background:var(--bg);border:1px solid var(--border);border-radius:999px;padding:6px 12px;font-size: var(--t-menor);font-weight:700;color:var(--primary)}
.pd-note{font-size: var(--t-micro);color:var(--gray-lt);margin-top:22px;line-height:1.6}

/* ─── Páginas de contenido (FAQ, legales, nosotros) ─── */
.info-wrap{max-width:820px;margin:0 auto;padding:20px 20px 56px}
.info-h1{font-family:'Anton',sans-serif;font-size: var(--t-display);color:var(--dark);line-height:1.12;letter-spacing:.5px;margin:8px 0 10px}
.info-lead{font-size: var(--t-destac);color:var(--gray);line-height:1.7;margin-bottom:18px}
.info-prose h2{font-size: var(--t-sub);font-weight:800;color:var(--primary);margin:22px 0 6px;font-family:'Nunito Sans',sans-serif}
.info-prose h3{font-size: var(--t-sub);font-weight:800;color:var(--dark);margin:16px 0 4px}
.info-prose p,.info-prose li{font-size: var(--t-cuerpo);color:var(--gray);line-height:1.7}
.info-prose ul{padding-left:18px;margin:6px 0}
.info-prose strong{color:var(--dark)}

/* ─── Páginas de categoría ─── */
.cat-wrap{max-width:1100px;margin:0 auto;padding:20px 20px 56px}
.cat-intro{font-size: var(--t-destac);color:var(--gray);line-height:1.7;max-width:780px}
.cat-intro p{margin-bottom:10px}
.cat-cta{display:inline-block;background:var(--dark);color:#fff;text-decoration:none;font-weight:800;padding:13px 22px;border-radius:12px;margin:14px 0 26px;font-size: var(--t-cuerpo)}
.cat-cta:hover{background:var(--primary)}
.cat-card{text-decoration:none;color:inherit}

/* ── Variantes de presentación en página de producto ───────────────── */
.pd-price-old{font-size:.55em;color:var(--gray-lt);text-decoration:line-through;margin-left:.4rem;font-weight:600}
.pd-vars{margin:1rem 0 .25rem}
.pd-vars-title{font-size: var(--t-menor);font-weight:800;color:var(--dark);margin-bottom:.6rem}
.pd-var{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:.75rem .9rem;border:1.5px solid var(--border);border-radius:12px;margin-bottom:.55rem;background:var(--white)}
.pd-var.on{border-color:var(--primary);background:var(--bg)}
.pd-var-info{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.pd-var-unit{font-size: var(--t-menor);font-weight:700;color:var(--dark)}
.pd-var-price{font-size: var(--t-destac);font-weight:800;color:var(--primary)}
.pd-var-act{flex:0 0 auto}
.pd-var-act .pd-add{padding:.7rem 1.1rem;font-size: var(--t-menor);width:auto;min-height:44px}
.pd-var-act .pd-stepper{margin:0}

/* ── Enlaces internos a productos relacionados ─────────────────────── */
.pd-rel{margin:2.5rem 0 1rem;padding-top:1.75rem;border-top:1.5px solid var(--border)}
.pd-rel h2{font-size: var(--t-sub);color:var(--dark);margin:0 0 1rem}
.pd-rel-grid{display:flex;flex-wrap:wrap;gap:.5rem}
.pd-rel-item{display:inline-flex;align-items:center;min-height:44px;padding:.6rem 1rem;border:1.5px solid var(--border);border-radius:999px;
  background:var(--white);color:var(--dark);font-size: var(--t-menor);font-weight:700;text-decoration:none;transition:.15s}
.pd-rel-item:hover{border-color:var(--primary);color:var(--primary);background:var(--bg)}
@media (max-width:600px){.pd-var{padding:.7rem .8rem}.pd-var-act .pd-add{padding:.7rem .95rem;min-height:44px}}

/* ── Blog ──────────────────────────────────────────────────────────── */
.bl-wrap{max-width:1100px;margin:0 auto;padding:1.5rem 1.25rem 3rem}
.bl-head{margin:1rem 0 2rem}
.bl-head h1{font-family:'Anton',sans-serif;font-size: var(--t-display);line-height:var(--lh-title);color:var(--dark);margin:0 0 .6rem;letter-spacing:.5px}
.bl-head p{font-size: var(--t-destac);line-height:var(--lh-body);color:var(--gray);max-width:62ch;margin:0}

/* minmax(320px,...) forzaba la columna a 320px aunque la pantalla midiera
   320px con padding: el indice del blog se desbordaba 14px a la derecha.
   min(320px,100%) deja que la tarjeta encoja cuando no hay sitio. */
.bl-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));gap:1.5rem}
.bl-card{display:flex;flex-direction:column;background:var(--white);border:1.5px solid var(--border);border-radius:var(--radius);
  overflow:hidden;text-decoration:none;color:inherit;box-shadow:var(--shadow);transition:.18s}
.bl-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--light)}
.bl-card-img{aspect-ratio:16/9;overflow:hidden;background:var(--bg)}
.bl-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.bl-card-body{padding:1.1rem 1.2rem 1.3rem}
.bl-card-t{font-size: var(--t-sub);line-height:1.3;color:var(--dark);margin:.5rem 0 .5rem;font-weight:800}
.bl-card-r{font-size: var(--t-cuerpo);line-height:var(--lh-body);color:var(--gray);margin:0 0 .8rem}

.bl-tags{display:flex;flex-wrap:wrap;gap:.4rem}
.bl-tag{font-size: var(--t-micro);font-weight:800;text-transform:uppercase;letter-spacing:.4px;
  color:var(--primary);background:var(--bg);border:1px solid var(--border);border-radius:999px;padding:.2rem .6rem}
.bl-meta{font-size: var(--t-micro);color:var(--gray-lt);font-weight:600}

.bl-post{max-width:720px;margin:0 auto}
.bl-title{font-family:'Anton',sans-serif;font-size: var(--t-display);line-height:var(--lh-title);color:var(--dark);margin:.8rem 0 .6rem;letter-spacing:.4px}
.bl-post .bl-meta{margin-bottom:1.4rem}
.bl-hero{width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;border-radius:var(--radius);display:block;margin-bottom:1.6rem}
.bl-lead{font-size: var(--t-destac);line-height:1.6;color:var(--dark);font-weight:600;margin:0 0 1.8rem;
  padding-left:1rem;border-left:4px solid var(--light)}
.bl-post h2{font-size: var(--t-sub);line-height:var(--lh-title);color:var(--dark);margin:2rem 0 .7rem}
.bl-post p{font-size: var(--t-cuerpo);line-height:1.7;color:#33453b;margin:0 0 1.1rem}
.bl-post p a{color:var(--primary);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.bl-post p a:hover{color:var(--dark)}
.bl-ul{margin:0 0 1.2rem;padding-left:1.2rem}
.bl-ul li{font-size: var(--t-cuerpo);line-height:1.7;color:#33453b;margin-bottom:.45rem}
.bl-quote{margin:1.5rem 0;padding:1rem 1.2rem;background:var(--bg);border-left:4px solid var(--primary);
  border-radius:0 12px 12px 0;font-size: var(--t-destac);line-height:1.6;color:var(--dark);font-weight:600}
.bl-inline-cta{margin:2rem 0 0}
.bl-inline-cta a{display:inline-block;background:var(--primary);color:var(--white);padding:.8rem 1.4rem;
  border-radius:999px;text-decoration:none;font-weight:800;transition:.15s}
.bl-inline-cta a:hover{background:var(--dark)}

.bl-more{max-width:720px;margin:3rem auto 0;padding-top:1.75rem;border-top:1.5px solid var(--border)}
.bl-more h2{font-size: var(--t-sub);color:var(--dark);margin:0 0 1rem}
.bl-more-grid{display:grid;gap:.7rem}
.bl-more-item{display:flex;flex-direction:column;gap:.2rem;padding:.85rem 1rem;border:1.5px solid var(--border);
  border-radius:12px;background:var(--white);text-decoration:none;transition:.15s}
.bl-more-item:hover{border-color:var(--primary);background:var(--bg)}
.bl-more-t{font-weight:800;color:var(--dark);font-size: var(--t-menor);line-height:1.35}
.bl-more-d{font-size: var(--t-micro);color:var(--gray-lt);font-weight:600}

.bl-cta-box{margin:3rem auto 0;max-width:720px;text-align:center;background:var(--bg);
  border:1.5px solid var(--border);border-radius:var(--radius);padding:2rem 1.5rem}
.bl-cta-box h2{font-size: var(--t-sub);color:var(--dark);margin:0 0 .5rem}
.bl-cta-box p{color:var(--gray);margin:0 0 1.2rem;line-height:var(--lh-body)}
.bl-cta{display:inline-block;background:var(--primary);color:var(--white);padding:.85rem 1.6rem;
  border-radius:999px;text-decoration:none;font-weight:800;transition:.15s}
.bl-cta:hover{background:var(--dark)}
@media (max-width:600px){.bl-wrap{padding:1rem .9rem 2.5rem}.bl-lead{font-size: var(--t-menor)}.bl-post p,.bl-ul li{font-size:1rem}}

/* ══════════════════════════════════════════════════════════════════
   HOME EN MÓVIL — versión compacta (26 jul 2026)
   Antes había que bajar 3,14 pantallas (2.654px) para ver el primer
   producto en un móvil de 390px. Con este bloque son 1,37 (1.156px).
   El reparto que se recortó: hero 683 → 177, "¿Cómo pedir?" 1.076 → 159,
   círculos de categoría 185 → 120.
   Solo aplica a ≤680px: en escritorio no cambia nada.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {

  /* ── Hero como banner horizontal: imagen chica al lado del título ── */
  .hero-container {
    grid-template-columns: 104px 1fr;
    gap: 14px;
    padding: 16px 20px 20px;
    align-items: center;
  }
  .hero-image { justify-content: center; }
  .hero-image img { max-width: 104px; }
  .hero h1 { font-size: var(--t-display); line-height: 1.08; letter-spacing: -0.6px; margin-bottom: 4px; }
  .hero-divider { display: none; }
  /* El h2 con la frase clave se queda: es el que trabaja para SEO. */
  /* El titular y la bajada del home bajan un rango de la escala: en celular
     el titular ocupaba un cuarto de la pantalla antes del primer producto.
     No se toca --t-display, que es el H1 de las otras 8 plantillas: solo se
     le asigna a este par el rango que les corresponde en pantalla chica. */
  .hero h1 { font-size: var(--t-sub); }
  .hero-kw { font-size: var(--t-cuerpo); font-weight: 600; line-height: 1.3; margin: 0 0 10px; color: #145A3A; }
  /* "Sin filas, sin cargar…" sale en móvil: el mensaje ya está en la franja
     superior y en el propio título. */
  .hero-h2 { display: none; }
  .hero-cta { padding: 11px 16px; font-size: var(--t-sub); width: auto; align-self: start; }

  /* ── "¿Cómo pedir con Fresqui?" como tira de 4 pasos numerados ── */
  .how-it-works { padding: 20px 14px 22px; }
  .how-it-works .section-sup { display: none; }
  .how-it-works .section-title { font-size: var(--t-titulo); margin-bottom: 12px; }
  .how-it-works .section-subtitle { display: none; }
  /* Cuatro columnas en 375px: sin min-width:0 la celda se niega a encoger
     por debajo del ancho de su texto y la pagina entera se desborda. */
  .steps { grid-template-columns: repeat(4, 1fr); gap: 6px; grid-auto-rows: auto; }
  .step, .step-body { min-width: 0; }
  .step {
    flex-direction: column; align-items: center; text-align: center;
    padding: 10px 4px; gap: 6px; border-radius: 12px;
  }
  .step:hover { transform: none; }
  .step-num { width: 28px; height: 28px; min-width: 28px; font-size: 15px; box-shadow: none; }
  .step-body { align-items: center; gap: 0; }
  .step-title { font-size: var(--t-menor); line-height: 1.2; }
  .step-desc { display: none; }

  /* ── Bloque de categorías: de 280px a ~150px ──
     El grueso no eran los círculos sino el aire alrededor: 84px de padding del
     contenedor y 44px entre el subtítulo y los círculos. Los círculos quedan en
     18vw ≈ 70px, muy por encima del mínimo táctil de 44px. */
  .tabs-wrapper { padding: 14px 12px 10px; }
  .cat-heading { font-size: var(--t-titulo); margin-bottom: 2px; letter-spacing: 0.2px; }
  /* "(selecciona para filtrar)" costaba 44px con su margen para decir algo que
     los propios círculos ya comunican. Fuera en móvil; en escritorio se queda. */
  .cat-heading-hint { display: none; }
  /* El anillo del tab activo vive FUERA de la caja del círculo (box-shadow), y
     .tabs tiene overflow-x: auto — que también recorta en vertical. Con 4px de
     padding arriba, el anillo de 6px quedaba cortado y su parte blanca se veía
     como una franja. Padding suficiente + anillo proporcional al círculo. */
  .tabs { padding: 10px 8px 8px 12px; gap: 9px; }
  .tab { min-width: 21vw; gap: 7px; }
  /* 19vw ≈ 74px: los iconos son trazos finos de 400px y a menor tamaño el
     escalado los rompe visualmente. */
  .tab-circle { width: 19vw; height: 19vw; }
  .tab.active .tab-circle { box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--dark); }
  .tab-label { font-size: var(--t-menor); }

  /* ── Encabezado del catálogo más corto ── */
  .products-section { padding-top: 12px; }

  /* ── VARIANTE: pasos con descripción (la "opción A" que evaluamos) ──
     Para activarla basta agregar la clase al body en index.html:
       <body class="pasos-detallados">
     Sube "¿Cómo pedir?" de 159 a ~455px y el primer producto pasa de
     1,37 a 1,72 pantallas. No hay que tocar nada más. */
  body.pasos-detallados .how-it-works { padding: 28px 18px 32px; }
  body.pasos-detallados .how-it-works .section-sup { display: block; font-size: var(--t-micro); margin-bottom: 4px; letter-spacing: 2px; }
  body.pasos-detallados .how-it-works .section-title { font-size: var(--t-titulo); margin-bottom: 2px; }
  body.pasos-detallados .how-it-works .section-subtitle { display: block; font-size: var(--t-destac); margin-bottom: 16px; }
  body.pasos-detallados .steps { grid-template-columns: 1fr; gap: 8px; }
  body.pasos-detallados .step { flex-direction: row; align-items: center; text-align: left; padding: 11px 13px; gap: 12px; border-radius: 14px; }
  body.pasos-detallados .step-num { width: 34px; height: 34px; min-width: 34px; font-size: 17px; }
  body.pasos-detallados .step-body { align-items: flex-start; gap: 2px; }
  body.pasos-detallados .step-title { font-size: var(--t-sub); }
  body.pasos-detallados .step-desc { display: block; font-size: var(--t-micro); line-height: 1.35; }
}

/* ══════════════════════════════════════════════════════════════════
   HOME EN ESCRITORIO — versión compacta (26 jul 2026)
   Mismo criterio que en móvil: el problema no era el contenido sino el
   aire. En 1440×900 había que bajar 2,4 pantallas (2.165px) para ver el
   primer producto. Reparto original: hero 640, "¿Cómo pedir?" 617,
   categorías 399 — y de esos 399, los círculos de 170px eran 234.
   Va al final del archivo a propósito: así gana en la cascada sobre los
   bloques @media (min-width: 1024px) definidos más arriba.
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 681px) {

  /* ── Hero: menos aire vertical, imagen menos protagonista ── */
  .hero-container { padding: 30px 60px; gap: 36px; }
  .hero-image img { max-width: 300px; }
  .hero h1 { margin-bottom: 10px; }
  .hero-divider { margin-bottom: 16px; }
  .hero-kw { margin: 0 0 12px; }
  .hero-h2 { margin-bottom: 22px; }

  /* ── "¿Cómo pedir con Fresqui?" ── */
  .how-it-works { padding: 30px 48px 34px; }
  .how-it-works .section-sup { margin-bottom: 6px; }
  .how-it-works .section-title { margin-bottom: 4px; }
  .how-it-works .section-subtitle { margin-bottom: 18px; }
  /* Dos columnas ya desde 681px: antes, entre 681 y 719px, los cuatro pasos
     caían en una sola columna y la sección se disparaba a 712px. */
  .steps { grid-template-columns: 1fr 1fr; gap: 12px; }
  .step { padding: 16px 18px; gap: 14px; align-items: center; }
  .step-num { width: 42px; height: 42px; min-width: 42px; font-size: 20px; }

  /* ── Bloque de categorías ── */
  .tabs-wrapper { padding: 12px 0 8px; }
  .cat-heading { margin-bottom: 0.3rem; }
  .cat-heading-hint { margin: 0 0 12px; }
  /* Mismo motivo que en móvil: el anillo del tab activo necesita aire arriba. */
  .tabs { gap: 26px; padding: 10px 8px 10px; }
}

@media (min-width: 1024px) {
  /* Estos valores existen en el bloque 1024 de más arriba; se repiten acá
     para sobrescribirlos sin tener que editar aquel bloque. */
  .hero-container { padding: 30px 60px; gap: 36px; }
  .hero-image img { max-width: 300px; }
  .hero h1 { margin-bottom: 10px; }
  .hero-kw { margin: 0 0 12px; }
  .hero-h2 { margin-bottom: 22px; }
  .cat-heading { margin-bottom: 0.3rem; }
  .tabs { gap: 26px; }
  /* Círculos de 170 → 118px: siguen siendo el elemento dominante de la fila
     pero devuelven ~50px de scroll. */
  .tab-circle { width: 104px; height: 104px; }
  .tab-label { }
}

/* ─── Acceso a "Mis pedidos" en el header (solo si hay historial) ─── */
.mis-pedidos-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--white); color: var(--dark);
  border: 1.5px solid var(--border); border-radius: 999px;
  padding: 8px 14px; min-height: 40px;
  font-family: 'Nunito Sans', sans-serif; font-size: var(--t-menor); font-weight: 800;
  cursor: pointer; white-space: nowrap;
  transition: border-color .15s, background .15s;
}
.mis-pedidos-btn:hover { border-color: var(--primary); background: var(--bg); }
.mis-pedidos-btn[hidden] { display: none; }
@media (max-width: 680px) {
  /* En móvil el header ya está apretado: solo el ícono. */
  .mis-pedidos-btn { padding: 8px 10px; font-size: var(--t-menor); }
  .mis-pedidos-btn .mp-btn-txt { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   AJUSTES DE MÓVIL — 26 jul 2026 (segunda ronda)
   Solo ≤680px. En escritorio no cambia nada.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {

  /* ── 1. "Armar mi mercado" a todo el ancho, debajo del hero ──
     El botón vivía dentro de la columna de texto (232px de 390), así que
     se veía pegado a la derecha. Con display:contents los hijos del hero
     pasan a ser celdas de la misma grilla y el botón puede ocupar las dos
     columnas en una fila propia. Cero cambios en el HTML. */
  .hero-container { grid-template-rows: auto auto auto; }
  .hero-content { display: contents; }
  .hero-image { grid-column: 1; grid-row: 1 / 3; }
  .hero h1 { grid-column: 2; grid-row: 1; align-self: end; }
  .hero-kw { grid-column: 2; grid-row: 2; align-self: start; }
  .hero-cta {
    grid-column: 1 / -1; grid-row: 3;
    width: 100%; justify-content: center; text-align: center;
    align-self: stretch; margin-top: 4px;
  }

  /* ── 2. Barra inferior: la nota va abajo y centrada ──
     Antes el bloque completo (productos, total y nota) quedaba alineado a
     la izquierda contra el botón. Ahora: conteo y total en una línea, el
     botón a la derecha, y la nota a todo el ancho centrada debajo. */
  .float-cart { flex-wrap: wrap; row-gap: 6px; align-items: center; }
  .float-cart-info { display: contents; }
  .float-cart-items { order: 1; flex: 0 0 auto; }
  .float-cart-total { order: 2; flex: 0 0 auto; margin-right: auto; line-height: 1; }
  .float-cart-cta   { order: 3; flex: 0 0 auto; }
  .float-cart-note  { order: 4; flex: 1 0 100%; text-align: center; margin: 0; }
  /* En pantallas angostas el conteo, el total y el botón no caben en una
     línea y el botón se iba solo a otra fila, subiendo la barra a 117px.
     El conteo sale: ya está en el globo del header y dentro del carrito. */
  @media (max-width: 400px) {
    .float-cart-items { display: none; }
  }

  /* ── 3. El hueco en blanco antes de "¿No encontraste lo que buscas?" ──
     La sección de productos reservaba 160px fijos para que la barra del
     carrito no tapara las últimas tarjetas. Pero la barra solo mide 93px y
     solo existe cuando hay algo en el carrito: los 160px se cobraban
     siempre. Ahora el espacio lo pone el body y solo cuando hace falta. */
  .products-section { padding-bottom: 24px; }

}

/* ─── Chip "Repetir tu último mercado" (bajo el hero) ───
   Reemplaza en móvil al botón del header: el historial dejó de competir con
   el carrito y ganó contexto — muestra el monto del último pedido. */
.repetir-wrap { background: var(--white); padding: 0 20px 14px; text-align: center; }
.repetir-wrap[hidden] { display: none; }
.repetir-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg); border: 1.5px solid var(--border); border-radius: 999px;
  padding: 11px 18px; min-height: 44px; cursor: pointer;
  font-family: 'Nunito Sans', sans-serif; font-size: var(--t-menor); font-weight: 800;
  color: var(--dark); max-width: 100%;
  transition: border-color .15s, background .15s;
}
.repetir-chip:hover { border-color: var(--primary); background: var(--white); }
.repetir-chip .rc-ico { font-size: 16px; }
.repetir-chip .rc-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.repetir-chip .rc-monto { font-weight: 800; color: var(--primary); white-space: nowrap; }
.repetir-chip .rc-monto:not(:empty)::before { content: '· '; color: var(--gray-lt); }

@media (max-width: 680px) {
  /* En móvil manda la barra inferior: el botón del carrito sale del header.
     La barra aparece siempre que haya algo en el carrito, así que no se
     pierde ningún acceso — y el header deja de tener dos botones que dicen
     casi lo mismo. */
  .cart-btn { display: none; }
  .mis-pedidos-btn { display: none; }
  .repetir-chip { width: 100%; justify-content: center; }
}
@media (min-width: 681px) {
  /* En escritorio el header tiene espacio: se queda su botón y el chip sobra. */
  .repetir-wrap { display: none; }
}

/* ─── El botón de WhatsApp con el carrito abierto (todos los tamaños) ───
   Quedaba detrás del modal por choque de z-index (190 contra 300): invisible
   pero presente, y asomándose por los bordes translúcidos. Se oculta de forma
   explícita. Dentro del carrito el canal ya es "Confirmar por WhatsApp": dos
   botones de WhatsApp compitiendo en la misma pantalla confunden.
   No lleva media query a propósito — es un defecto, no una decisión de diseño. */
body.carrito-abierto .wa-float { display: none; }

/* ══════════════════════════════════════════════════════════════════
   ESPACIO RESERVADO PARA LA BARRA DEL CARRITO — todos los tamaños
   La sección de productos reservaba 160px en móvil, 180px en tablet y
   220px en escritorio para que la barra fija no tapara las últimas
   tarjetas. Pero la barra mide entre 79 y 93px y solo existe cuando hay
   algo en el carrito: ese espacio se cobraba siempre, incluso con el
   carrito vacío, y dejaba 252px en blanco antes de "¿No encontraste lo
   que buscas?". Ahora el espacio lo pone el body, con la altura real de
   la barra (updateCartUI publica --cart-bar-h) y solo cuando aplica.
   ══════════════════════════════════════════════════════════════════ */
body.con-carrito { padding-bottom: var(--cart-bar-h, 0px); }

@media (min-width: 681px) {
  .products-section { padding-bottom: 40px; }
}
@media (min-width: 1024px) {
  .products-section { padding-bottom: 48px; }
}

/* ══════════════════════════════════════════════════════════════════
   AJUSTES DE MÓVIL — tercera ronda (26 jul 2026)
   Franja de una línea · barra cobre y compacta · repetir como acción
   principal cuando el cliente ya compró. Solo ≤680px.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {

  /* ── Franja superior en una sola línea ──
     El texto anterior no cabía en una línea ni bajando la fuente a 12px en
     pantallas de 360px, así que se acortó en vez de achicarlo. De 64 a 30px,
     y es una franja fija: ese ahorro se cobra en todas las pantallas. */
  .trust-strip { padding: 6px 14px; }
  .trust-text { font-size: var(--t-menor); line-height: 1.35; white-space: nowrap;
                overflow: hidden; text-overflow: ellipsis; }

  /* ── Barra inferior: verde de la marca, en una línea y más baja ──
     Era cobre para no fundirse con las secciones verde oscuro que quedan
     detrás. Ahora usa el verde de la marca —un solo color de acción en todo
     el sitio— y la separación la hace un filo claro arriba más la sombra,
     que es lo que de verdad la despega del fondo.
     Altura: 66px → 56px. Los 44px del botón bajan a 40: sigue por encima
     del pulgar promedio y devuelve 4px de pantalla en cada scroll. */
  .float-cart {
    background: var(--dark);
    padding: 7px 14px;
    border-top: 1.5px solid rgba(255,255,255,0.22);
    box-shadow: 0 -8px 28px rgba(0,0,0,0.32);
  }
  .float-cart-note { display: none; }
  .float-cart-total { color: var(--white); font-size: var(--t-sub); }
  .float-cart-items { color: var(--light); }
  .float-cart-cta {
    background: var(--light); color: var(--dark);
    padding: 9px 16px; min-height: 40px;
    font-size: var(--t-micro); letter-spacing: 0.4px;
  }
  .float-cart-cta:active { background: #8ec48a; }

  /* ── Los dos botones del hero (solo si ya pidió antes) ──
     Misma forma y mismo tamaño: mismo alto, mismo radio, mismo ancho y el
     mismo cuerpo de texto. Lo único que los diferencia es el color, que es
     lo que debe marcar la jerarquía y no la geometría.
       · Armar mi mercado   → verde oscuro de la marca
       · Repetir tu mercado → el verde claro de «Ver mi pedido» */
  body.con-historial .hero-cta,
  body.con-historial .repetir-chip {
    box-sizing: border-box;
    width: 100%; max-width: 100%;
    min-height: 48px; padding: 12px 18px;
    border: none; border-radius: 12px;
    font-size: var(--t-cuerpo); font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    box-shadow: none;
  }
  body.con-historial .hero-cta { background: var(--dark); color: var(--white); }
  body.con-historial .hero-cta:active { background: var(--primary); }
  body.con-historial .repetir-chip { background: var(--light); color: var(--dark); }
  body.con-historial .repetir-chip:active { background: #8ec48a; }
  body.con-historial .repetir-chip .rc-monto { color: var(--primary); }
  body.con-historial .repetir-chip .rc-monto::before { color: rgba(26,58,42,0.45); }
  /* A 320px «Repetir tu último mercado · $119.644» no cabe y se cortaba con
     puntos suspensivos. Se recortan relleno y separación antes que el texto:
     un botón que dice «Repetir tu último merc…» no invita a nada. */
  @media (max-width: 370px) {
    body.con-historial .hero-cta,
    body.con-historial .repetir-chip { padding: 12px 10px; gap: 5px; font-size: var(--t-menor); }
    body.con-historial .repetir-chip .rc-ico { display: none; }
  }
}

/* ══════════════════════════════════════════════════════════════════
   AJUSTES DE MÓVIL — carrito a dos filas (10 ago 2026)
   La fila del carrito era un flex de cinco columnas en línea: foto 52,
   info, controles 92, precio 58 y basurero 28, más 32 de separaciones.
   En 375px al nombre le quedaban 53px — "Zarzamora" se partía a mitad
   de palabra y la píldora de peso aproximado se inflaba a 53x49, o sea
   se veía como un círculo. No era la píldora: era que no cabía.
   Ahora la foto ocupa una columna alta, arriba va el texto con todo el
   ancho (253px medidos) y abajo los controles, el precio y el borrar.
   Solo ≤680px: el escritorio queda intacto por construcción.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
  .cart-item {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto auto;
    grid-template-areas:
      "foto info  info   info"
      "foto ctrl  precio borrar";
    column-gap: 10px;
    row-gap: 6px;
    align-items: center;
  }
  .cart-item-photo,
  .cart-item-emoji  { grid-area: foto; align-self: start; }
  .cart-item-info   { grid-area: info; min-width: 0; }
  /* min-width:0 es obligatorio: sin él la columna 1fr no cede ante la
     etiqueta de unidad (que lleva nowrap) y se monta sobre el precio. */
  /* Sin min-width:0 la columna 1fr no cede ante la etiqueta de unidad (que
     lleva nowrap) y se monta sobre el precio. Y sin justify-self:stretch la
     columna se dimensiona al contenido y se sale de su propia pista: con
     etiquetas largas como "Paquete 350g" volvía a solaparse. */
  .cart-qty-col     { grid-area: ctrl; width: auto; flex-direction: row;
                      align-items: center; gap: 8px;
                      justify-self: stretch; justify-content: flex-start;
                      min-width: 0; }
  .cart-qty-col .qty-label { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .cart-item-price  { grid-area: precio; min-width: 0; }
  .cart-item-remove { grid-area: borrar; }

  /* El nombre ya cabe: que no se parta a mitad de palabra. */
  .cart-item-name { overflow-wrap: normal; word-break: normal; hyphens: none; }
  /* La píldora de peso vuelve a ser una píldora. */
  .cart-item-qty  { overflow-wrap: normal; white-space: nowrap; max-width: none; }

  /* Empaques no lleva controles de cantidad: una sola fila, sin hueco. */
  .cart-item-fijo {
    grid-template-areas: "foto info precio borrar";
  }
  .cart-item-fijo .cart-item-photo,
  .cart-item-fijo .cart-item-emoji { align-self: center; }
  .cart-item-fijo .cart-qty-col { display: none; }
}

/* En pantallas muy angostas (≤360px, iPhone SE) la píldora "Cargo fijo por
   pedido" mide 156px y no cabe al lado del precio: esa fila vuelve al layout
   de dos filas como el resto. La columna de controles sigue oculta, así que
   el precio y el basurero quedan solos en la segunda línea. */
@media (max-width: 360px) {
  .cart-item-fijo {
    grid-template-areas:
      "foto info  info   info"
      "foto ctrl  precio borrar";
  }
}

/* ══════════════════════════════════════════════════════════════════
   MENÚ DEL PIE — carril horizontal (10 ago 2026)
   Reemplaza los seis enlaces que envolvían en dos líneas irregulares.
   Mismo lenguaje que el nav del header (texto plano, píldora al tocar)
   en versión oscura. La señal de que se desliza son tres cosas juntas:
   un ítem cortado a la mitad, un degradado en el borde, y flechas que
   además mueven el carril al tocarlas. Todo se apaga en el extremo
   correspondiente, y ambas si no hay nada que desplazar (escritorio).
   ══════════════════════════════════════════════════════════════════ */
.foot-nav-wrap { position: relative; margin-top: 16px; padding: 10px 0 2px;
  border-top: 1px solid rgba(255,255,255,0.14); }
.foot-nav { display: flex; align-items: center; gap: 0; margin: 0;
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
  padding: 2px 38px;
  /* Sin scroll-padding el snap alinea el primer ítem con el borde del
     contenedor e ignora el relleno: el carril arrancaba en scrollLeft 38
     y la flecha izquierda aparecía estando ya al principio. */
  scroll-padding-left: 38px; scroll-padding-right: 38px; }
.foot-nav::-webkit-scrollbar { display: none; }
.foot-nav a { flex-shrink: 0; scroll-snap-align: start;
  font-size: var(--t-menor); font-weight: 700; color: rgba(255,255,255,0.6);
  text-decoration: none; padding: 6px 14px; border-radius: 20px;
  white-space: nowrap; transition: background .15s, color .15s; }
.foot-nav a:hover, .foot-nav a:focus-visible { color: #fff; background: rgba(255,255,255,0.10); }

.foot-nav-wrap::before, .foot-nav-wrap::after {
  content: ''; position: absolute; top: 10px; bottom: 2px; width: 42px;
  pointer-events: none; transition: opacity .2s; z-index: 1; }
.foot-nav-wrap::before { left: 0;  background: linear-gradient(to left,  rgba(26,58,42,0), rgba(26,58,42,0.92) 80%); }
.foot-nav-wrap::after  { right: 0; background: linear-gradient(to right, rgba(26,58,42,0), rgba(26,58,42,0.92) 80%); }
.foot-nav-wrap.sin-izq::before, .foot-nav-wrap.sin-der::after,
.foot-nav-wrap.sin-scroll::before, .foot-nav-wrap.sin-scroll::after { opacity: 0; }

.foot-nav-arrow { position: absolute; top: 50%; transform: translateY(-42%);
  width: 30px; height: 30px; border: none; border-radius: 50%; cursor: pointer;
  background: var(--accent); color: var(--dark); padding: 0;
  font-family: inherit; font-size: 18px; font-weight: 900; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.35); z-index: 2; transition: opacity .2s; }
.foot-nav-arrow.izq { left: 2px; }
.foot-nav-arrow.der { right: 2px; animation: footChev 1.9s ease-in-out 4; }
.foot-nav-wrap.sin-izq .foot-nav-arrow.izq,
.foot-nav-wrap.sin-der .foot-nav-arrow.der,
.foot-nav-wrap.sin-scroll .foot-nav-arrow { opacity: 0; pointer-events: none; }
@keyframes footChev { 0%,100% { transform: translateY(-42%) translateX(0); }
                      50%     { transform: translateY(-42%) translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .foot-nav-arrow.der { animation: none; } }

/* El flotante de WhatsApp cae justo encima de la flecha derecha. */
.wa-float { transition: opacity .2s, transform .2s; }
.wa-float.oculto-en-pie { opacity: 0; pointer-events: none; }

/* ══════════════════════════════════════════════════════════════════
   AJUSTES DE MÓVIL — ronda del 10 ago 2026
   Objetivo: recuperar altura de pantalla. El header ocupaba 156px de
   812 antes de mostrar un solo producto.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {

  /* 0 · Dos escalones menos para toda la escala en celular.
     No se tocan los siete pasos uno por uno: se baja la base de 16 a 14px y
     los cinco pasos en rem caen ~12% de golpe (cuerpo 15→13,1 · precio
     17→14,9 · unidad 11→9,6). Por debajo de esto la unidad del producto
     bajaría de 9px, que es el piso cómodo de lectura.

     Los dos titulares usan clamp y su término en vw domina a 375px, así que
     con solo bajar la base apenas se movían: 26,3 → 25,2. Se les baja el
     mínimo aparte, porque en un celular lo más grande de la pantalla son
     ellos. Resultado: H1 26,3 → 21,1 y título de sección 19,5 → 16,1. */
  html { font-size: 87.5%; }
  :root {
    --t-titulo:  clamp(1.15rem, 1.2vw + 0.7rem, 1.78rem);
    --t-display: clamp(1.45rem, 1.9vw + 1rem, 2.78rem);
  }

  /* 1 · El buscador sube a la fila del logo, a la derecha, y el logo
     conserva mascota + wordmark. Lo que cede es el tamaño: el wordmark
     baja a 20px y la mascota a 34px, que es lo que deja sitio suficiente
     para el buscador sin partir la fila. Header: 156px -> 94px. */
  .header-top { flex-wrap: nowrap; row-gap: 0; height: auto; gap: 8px; }
  .logo { gap: 7px; flex-shrink: 0; }
  .logo-name { display: block; font-size: 20px; letter-spacing: 0.5px; }
  .logo-mascot { height: 34px; }
  .search-wrap { order: 0; flex: 1 1 auto; flex-basis: auto; max-width: none; min-width: 0; }
  .search-input { padding: 8px 34px 8px 11px; min-height: 38px; font-size: var(--t-cuerpo); }
  .cart-btn { margin-left: 0; margin-right: 0; padding: 9px 10px; font-size: var(--t-menor); gap: 5px; }

  /* 3 · Tarjetas más bajas: dos filas visibles en el grid completo.
     Al pasar el nombre y el precio a la escala comun la tarjeta subio 24px;
     se devuelven recortando foto y rellenos, que no son texto y por tanto
     no rompen la jerarquia. */
  .product-img   { height: 94px; }
  .product-info  { padding: 8px 9px 10px; }
  .product-cat-tag { font-size: var(--t-micro); letter-spacing: .4px; }
  .product-name  { font-size: var(--t-cuerpo); line-height: 1.22; }
  .product-unit  { font-size: var(--t-micro); margin-bottom: 4px; }
  .product-price { font-size: var(--t-destac); margin-bottom: 6px; }
  .product-qty   { font-size: var(--t-micro); margin-bottom: 6px; }
  .add-btn       { padding: 7px 0; font-size: var(--t-menor); }

  /* 5 · Etiquetas de cobertura: caben en dos líneas. */
  .zone-tags { gap: 6px; }
  .zone-tag  { padding: 5px 10px; font-size: var(--t-micro); }
  .zone-tag .dot { width: 6px; height: 6px; }

  /* 7 · Preguntas frecuentes: botones menos altos. */
  .faq-q { padding: 12px 16px; min-height: 44px; font-size: var(--t-destac); }
  .faq-a { font-size: var(--t-cuerpo); }
}

/* 4 y 5 · Pantallas de 320px (iPhone SE 1). A 375px el nudge ya entra en 3
   líneas y las etiquetas de zona en 2 filas; a 320 se desbordan a 4 y 3.
   Un escalón más de tipografía las devuelve al objetivo sin tocar 375+. */
@media (max-width: 360px) {
  /* A 320px el wordmark y la mascota bajan un escalon mas para que el
     buscador no quede reducido a un cuadro sin texto, y los dos bloques
     que tienen un objetivo de altura bajan un paso de la escala. */
  .logo-name { font-size: 18px; }
  .logo-mascot { height: 30px; }
  .wa-nudge-text { font-size: var(--t-menor); }
  .wa-nudge-text strong { font-size: var(--t-cuerpo); }
  .wa-nudge-inner { padding: 14px 14px; gap: 10px; }
  .wa-nudge-icon  { font-size: 24px; }
  .wa-nudge-text  { line-height: 1.42; }
  .zone-tags { gap: 5px; }
  .zone-tag  { padding: 4px 8px; }
}

/* La nota de domicilio adopta la forma del bloque "¿No encontraste algo?":
   banda verde clara con recuadro blanco de borde verde. Reutiliza .wa-nudge a
   proposito, para heredar los ajustes de movil ya hechos (3 lineas a 375px, un
   escalon menos a 320px). El modificador solo la encaja dentro de la columna de
   cobertura, que es blanca, en vez de ocupar el ancho de la pagina. */
.wa-nudge-cobertura { padding: 16px; border-radius: 16px; margin-top: 4px; }
.wa-nudge-cobertura .wa-nudge-inner { max-width: none; }
.wa-nudge-cobertura .wa-nudge-text a { display: inline-block; margin-top: 5px; }
/* El texto aqui ocupa 6-7 lineas, no 3: con align-items:center el icono
   quedaba flotando a media altura con un hueco arriba. Se ancla arriba. */
.wa-nudge-cobertura .wa-nudge-inner { align-items: flex-start; }
.wa-nudge-cobertura .wa-nudge-icon { line-height: 1; margin-top: 1px; }
@media (max-width: 680px) {
  .wa-nudge-cobertura { padding: 12px; }
}

/* 8 · Pie: teléfono e Instagram comparten fila. */
.footer-social { display: flex; align-items: center; justify-content: center;
  gap: 8px 20px; flex-wrap: wrap; margin: 12px 0 4px; }
.footer-tel { display: inline-flex; align-items: center; gap: 6px;
  color: rgba(255,255,255,0.75); text-decoration: none;
  font-size: var(--t-menor); font-weight: 700; transition: color .18s; }
.footer-tel:hover { color: var(--light); }

/* 2 · Flechas del nav del header — mismo lenguaje que el carril del pie.
   El contenedor y los botones los crea fresqui-cart.js, así que no hubo
   que tocar el HTML de las 96 páginas. */
.snav-wrap { position: relative; }
.snav-wrap .section-nav { padding-left: 38px; padding-right: 38px;
  scroll-padding-left: 38px; scroll-padding-right: 38px; }
/* El degradado tiene que llegar a blanco OPACO antes del borde izquierdo de
   la flecha (que empieza a 28px del borde), si no el texto se lee nítido justo
   debajo del botón. Con 84px y parada en 45%, el blanco es total desde los
   ~46px: el texto se desvanece, queda un respiro blanco, y luego la flecha. */
.snav-wrap::before, .snav-wrap::after { content: ''; position: absolute;
  top: 0; bottom: 0; width: 84px; pointer-events: none;
  transition: opacity .2s; z-index: 1; }
.snav-wrap::before { left: 0;  background: linear-gradient(to left,  rgba(255,255,255,0), #fff 45%); }
.snav-wrap::after  { right: 0; background: linear-gradient(to right, rgba(255,255,255,0), #fff 45%); }
.snav-wrap.sin-izq::before, .snav-wrap.sin-der::after,
.snav-wrap.sin-scroll::before, .snav-wrap.sin-scroll::after { opacity: 0; }
.snav-arrow { position: absolute; top: 52%; transform: translateY(-50%);
  width: 26px; height: 26px; border: none; border-radius: 50%; cursor: pointer;
  background: var(--accent); color: var(--dark); padding: 0;
  font-family: inherit; font-size: 16px; font-weight: 900; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18); z-index: 2; transition: opacity .2s; }
.snav-arrow.izq { left: 2px; }
.snav-arrow.der { right: 2px; animation: footChev 1.9s ease-in-out 4; }
.snav-wrap.sin-izq .snav-arrow.izq,
.snav-wrap.sin-der .snav-arrow.der,
.snav-wrap.sin-scroll .snav-arrow { opacity: 0; pointer-events: none; }

/* ══════════════════════════════════════════════════════════════════
   JERARQUÍA TRANSVERSAL — un solo rostro por rango
   Anton para titulares, igual que el wordmark del logo. Nunito Sans
   para todo lo demás, incluidos precios y cifras: Anton es una fuente
   de titular y a tamaño pequeño se lee peor, sobre todo en números.
   ══════════════════════════════════════════════════════════════════ */
.hero h1, .info-h1, .pd-name, .bl-title, .bl-head h1,
.section-title, .cat-name, .cat-heading {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  letter-spacing: 0.5px;
  line-height: 1.1;
}

/* ══════════════════════════════════════════════════════════════════
   BUSCADOR CON SUGERENCIAS
   El desplegable flota: la página de atrás no cambia de alto, que era
   lo que producía el sube y baja mientras se escribía.
   ══════════════════════════════════════════════════════════════════ */
.search-wrap { position: relative; }

.fqb-drop {
  display: none;
  position: absolute; left: 0; right: 0; top: calc(100% + 6px);
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  z-index: 300;
}
.fqb-drop.abierto { display: block; }

.fqb-lista { max-height: 58vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.fqb-fila {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  text-decoration: none; color: var(--dark);
  border-bottom: 1px solid var(--border);
}
.fqb-fila:last-child { border-bottom: none; }
.fqb-fila:hover, .fqb-fila:focus-visible { background: var(--bg); }

.fqb-foto {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 10px; overflow: hidden; background: var(--bg);
  display: flex; align-items: center; justify-content: center;
}
.fqb-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fqb-emoji { font-size: 22px; line-height: 1; }

/* min-width: 0 para que el nombre largo se recorte en vez de empujar
   el precio fuera de la fila. */
.fqb-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.fqb-nom {
  font-size: var(--t-cuerpo); font-weight: 800; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fqb-uni { font-size: var(--t-micro); color: var(--gray); line-height: 1.2; }
.fqb-precio {
  font-size: var(--t-menor); font-weight: 800; color: var(--primary);
  flex-shrink: 0; white-space: nowrap;
}

.fqb-todos {
  display: block; width: 100%;
  background: var(--bg); border: none; border-top: 1.5px solid var(--border);
  padding: 12px 14px;
  font-family: inherit; font-size: var(--t-menor); font-weight: 800;
  color: var(--primary); text-align: center; cursor: pointer;
}
.fqb-todos:hover { background: #e8f2ec; }

.fqb-vacio {
  margin: 0; padding: 16px 14px;
  font-size: var(--t-menor); color: var(--gray); text-align: center;
}

/* ── Capa de pantalla completa (móvil) ────────────────────────────
   El campo del header pasa a readonly y actúa como disparador, así que
   se le quita el cursor de texto para que no prometa lo que no hace. */
@media (max-width: 680px) {
  .search-input[readonly] { cursor: pointer; }
}

.fqb-capa {
  display: none;
  position: fixed; inset: 0;
  background: var(--white);
  z-index: 9999;
  flex-direction: column;
}
.fqb-capa.abierta { display: flex; }

.fqb-capa-top {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border-bottom: 1.5px solid var(--border);
  flex-shrink: 0;
}
.fqb-capa-lupa { color: var(--gray-lt); display: flex; flex-shrink: 0; }
.fqb-capa-input {
  flex: 1 1 auto; min-width: 0;
  border: none; outline: none; background: none;
  font-family: inherit; font-size: var(--t-cuerpo); color: var(--dark);
  padding: 8px 0;
}
.fqb-capa-input::placeholder { color: var(--gray-lt); }
.fqb-capa-cerrar {
  flex-shrink: 0; background: none; border: none; padding: 8px 2px;
  font-family: inherit; font-size: var(--t-menor); font-weight: 800;
  color: var(--primary); cursor: pointer;
}

.fqb-capa-cuerpo { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* Dentro de la capa las sugerencias ya no son un desplegable flotante:
   ocupan el cuerpo entero, sin borde ni sombra. */
.fqb-capa-cuerpo.abierto { display: block; }
.fqb-capa-cuerpo .fqb-lista { max-height: none; }
.fqb-capa-cuerpo .fqb-fila { padding: 12px 14px; }
.fqb-capa-cuerpo .fqb-foto { width: 48px; height: 48px; }
.fqb-capa-cuerpo .fqb-todos { border-bottom: 1.5px solid var(--border); }

/* ── Mensaje de ayuda de la capa de búsqueda ─────────────────────── */
.fqb-ayuda { padding: 22px 18px 18px; text-align: center; }
.fqb-ayuda-t {
  margin: 0 0 14px;
  font-size: var(--t-menor); color: var(--gray); line-height: 1.45;
}
.fqb-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.fqb-chip {
  background: var(--bg); border: 1.5px solid var(--border); border-radius: 40px;
  padding: 8px 16px; min-height: 36px;
  font-family: inherit; font-size: var(--t-menor); font-weight: 700;
  color: var(--dark); cursor: pointer;
}
.fqb-chip:active { background: #e8f2ec; border-color: var(--primary); }

/* ══════════════════════════════════════════════════════════════════
   ESCRITORIO — dos correcciones medidas, no un rediseño
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

  /* 1 · Largo de línea.
     Medido en un monitor de 1600px: .section-desc renderizaba a 176
     caracteres por línea y las respuestas de la FAQ a 97. Por encima de
     ~75 el ojo pierde el renglón al volver, y el texto se lee peor
     aunque el tamaño de letra sea correcto. El tope va en `ch`, que es
     relativo a la propia fuente del elemento: si mañana cambia el paso
     de la escala, el límite sigue siendo el mismo número de caracteres. */
  .section-desc, .cat-intro, .info-lead, .bl-lead { max-width: 68ch; }
  .faq-a, .info-prose p, .info-prose li,
  .bl-post p, .bl-ul li, .pd-sec p { max-width: 72ch; }

  /* 2 · La cabecera y el pie se iban al ancho completo de la pantalla
     mientras el contenido queda topado en 1200px. En un monitor ancho el
     logo terminaba pegado al borde izquierdo y el carrito al derecho, con
     la página flotando en el centro. Se alinean con el contenido.
     Ojo con el `width: 100%`: <header> es flex, así que sin él sus hijos
     se encogen al ancho de su contenido en vez de llenar los 1200. */
  header > *, .footer > *, .trust-strip > * {
    width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto;
  }
}