/* =========================================================
   OKIMARKET — DESIGN TOKENS
   Paleta fiel al logo, aplicada con un lenguaje visual
   premium/limpio en vez del estilo "sticker" original.
   ========================================================= */
:root{
  --navy:          #081848;
  --navy-2:        #10225E;
  --navy-soft:     #1A2C6E;
  --indigo:        #1818B0;
  --indigo-dark:   #101078;
  --indigo-tint:   #EBEAF9;
  --green:         #78E028;
  --green-dark:    #56A814;
  --green-ink:     #1F3D00;
  --green-tint:    #EAF9DC;
  --orange:        #E05008;
  --orange-dark:   #B84006;
  --orange-tint:   #FDECE0;
  --pink:          #D800A8;
  --white:         #FFFFFF;
  --paper:         #F7F7FB;
  --surface:       #FFFFFF;
  --line:          #E7E8F2;
  --ink:           #10132E;
  --ink-soft:      #565B82;
  --gray:          #8286A6;

  --font-display: 'Sora', system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, sans-serif;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  --shadow-sm: 0 1px 2px rgba(16,19,46,.05), 0 2px 8px rgba(16,19,46,.05);
  --shadow-md: 0 4px 14px rgba(16,19,46,.08), 0 1px 3px rgba(16,19,46,.06);
  --shadow-lg: 0 18px 44px rgba(16,19,46,.14);
  --shadow-navy: 0 10px 30px rgba(11,16,56,.35);
  --ease: cubic-bezier(.22,1,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;background:var(--paper);min-height:100%;}
body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  overflow-x:hidden;
  min-height:100vh;
  min-height:100dvh;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
input,textarea,select{font-family:inherit;}
:focus-visible{outline:2.5px solid var(--indigo);outline-offset:2px;border-radius:4px;}

/* Evita el zoom accidental por doble toque en botones, íconos, menús,
   tarjetas y demás elementos interactivos (típico en iOS/Android al
   tocar dos veces rápido). No usa "none" en ningún caso, así que el
   zoom accesible con gesto de dos dedos (pellizco) sigue funcionando
   con normalidad en todo el sitio. */
a, button, .icon-btn, .add-btn, .qty-btn, .remove-btn, .close-btn,
.chip, .nav-link, .cat-card, .prod-card, .prod-fav, .see-all,
.hamburger, .cart-badge, .help-close, .overlay, .help-modal-overlay,
input, select, textarea{
  touch-action: manipulation;
}

.wrap{max-width:1240px;margin:0 auto;padding:0 24px;}

h1,h2,h3,h4{font-family:var(--font-display);line-height:1.12;letter-spacing:-.2px;font-weight:700;}

/* eyebrow / label */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-display);font-weight:600;font-size:12px;
  letter-spacing:1.4px;text-transform:uppercase;
  color:var(--indigo);
}
.eyebrow::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--orange);flex:none;
}

/* =========================================================
   CARD — surface component, sombra suave en vez de "sticker"
   ========================================================= */
.sticker{
  position:relative;
  border-radius:var(--r-lg);
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  border:1px solid var(--line);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.sticker:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
  border-color:#DADCEF;
}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-display);font-weight:600;font-size:15.5px;
  padding:14px 26px;border-radius:999px;
  border:1.5px solid transparent;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.btn-primary{
  background:var(--navy);color:var(--white);
  box-shadow:var(--shadow-sm);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);background:var(--navy-2);}
.btn-primary:active{transform:translateY(0);}

.btn-secondary{
  background:var(--orange);color:var(--white);
  box-shadow:var(--shadow-sm);
}
.btn-secondary:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);background:var(--orange-dark);}
.btn-secondary:active{transform:translateY(0);}

.btn-ghost{
  background:transparent;color:var(--white);border-color:rgba(255,255,255,.35);
}
.btn-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.55);}

.btn-sm{padding:9px 16px;font-size:13.5px;}
.btn-block{width:100%;}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none !important;}

/* =========================================================
   HEADER
   ========================================================= */
header{
  position:sticky;top:0;z-index:60;
  background:var(--navy);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;gap:20px;
}
.logo{display:flex;align-items:center;flex:none;}
.logo-img{height:48px;width:auto;display:block;}

.footer-logo-img{height:40px;width:auto;display:block;margin-bottom:4px;}

nav.main-nav{display:flex;align-items:center;gap:2px;}
.nav-link{
  font-family:var(--font-display);font-weight:500;font-size:14.5px;
  color:rgba(255,255,255,.68);padding:10px 16px;border-radius:999px;
  transition:all .2s var(--ease);
}
.nav-link:hover{color:var(--white);background:rgba(255,255,255,.06);}
.nav-link.active{color:var(--navy);background:var(--green);font-weight:600;}
.nav-link[data-nav="seguimiento"]{display:inline-flex;align-items:center;gap:6px;}

/* Íconos de "Ver ofertas" y "Mi pedido": un poco más grandes y
   visibles que el emoji anterior, en escritorio y en móvil. */
.icon-box{width:19px;height:19px;flex:none;}

.header-actions{display:flex;align-items:center;gap:10px;flex:none;}
.icon-btn{
  position:relative;
  width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--white);background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  transition:all .2s var(--ease);
}
.icon-btn:hover{background:rgba(255,255,255,.14);}
.icon-btn svg{width:19px;height:19px;}
.cart-badge{
  position:absolute;top:-4px;right:-4px;
  background:var(--orange);color:var(--white);
  font-family:var(--font-display);font-weight:700;font-size:10.5px;
  min-width:19px;height:19px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--navy);padding:0 4px;
  transform:scale(1);transition:transform .25s var(--ease);
}
.cart-badge.bump{animation:bump .35s var(--ease);}
@keyframes bump{0%{transform:scale(1);}40%{transform:scale(1.35);}100%{transform:scale(1);}}

.hamburger{display:none;}

.search-inline{
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
  border-radius:999px;padding:9px 16px;flex:1;max-width:340px;
}
.search-inline input{
  background:transparent;border:none;color:var(--white);width:100%;font-size:14px;
}
/* Excepción puntual: el contorno global de :focus-visible (usado para
   accesibilidad en el resto del sitio) se ve mal aquí porque envuelve
   toda la barra de búsqueda; se desactiva solo para este campo. */
.search-inline input:focus-visible{outline:none;}
.search-inline input::placeholder{color:rgba(255,255,255,.45);}
.search-inline svg{width:16px;height:16px;color:rgba(255,255,255,.5);flex:none;}

/* =========================================================
   HERO — panel navy limpio, sin blobs animados
   ========================================================= */
.hero{
  position:relative;
  background:var(--navy);
  overflow:hidden;
  padding:80px 0 100px;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(900px 500px at 88% 10%, rgba(42,30,224,.35), transparent 60%),
    radial-gradient(600px 400px at 8% 100%, rgba(111,203,31,.10), transparent 60%);
  pointer-events:none;
}
.hero::after{
  content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:linear-gradient(to bottom, black, transparent 75%);
}
.hero-blob{display:none;}

.hero-inner{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;
}
/* Cuando no hay ningún producto marcado como "Más vendido" desde el
   Panel Admin, el bloque blanco se oculta por completo (ver
   renderHeroCard() en script.js) y esta regla colapsa la columna que
   ocupaba, para que no quede espacio en blanco reservado. Solo se
   activa en ese caso puntual; el resto del layout del hero no cambia. */
.hero-inner.hero-inner--no-bestseller{grid-template-columns:1fr;}
.hero-copy .eyebrow{color:var(--green);}
.hero-copy .eyebrow::before{background:var(--orange);}
.hero-title{
  font-size:clamp(36px,5vw,56px);color:var(--white);font-weight:700;
  margin:18px 0 20px;letter-spacing:-1px;
}
.hero-title .accent{color:var(--green);}
.hero-title .accent2{color:var(--orange);}
.hero-sub{
  font-size:16.5px;color:rgba(255,255,255,.66);max-width:480px;line-height:1.65;margin-bottom:32px;
}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:38px;}
.hero-stats{display:flex;gap:30px;flex-wrap:wrap;}
.hero-stat b{
  font-family:var(--font-display);font-size:23px;color:var(--white);display:block;font-weight:700;
}
.hero-stat span{font-size:12px;color:rgba(255,255,255,.5);letter-spacing:.3px;}

.hero-visual{position:relative;display:flex;justify-content:center;}
.hero-card{
  width:100%;max-width:380px;background:var(--white);
  border-radius:var(--r-xl);border:1px solid var(--line);
  box-shadow:var(--shadow-lg);
  padding:26px;
}
.hero-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;}
.hero-tag{
  background:var(--green-tint);color:var(--green-ink);font-family:var(--font-display);
  font-weight:700;font-size:11.5px;padding:6px 12px;border-radius:999px;
}
.hero-card-emoji{
  text-align:center;background:var(--paper);border-radius:var(--r-md);
  padding:24px 0;margin-bottom:16px;
  display:flex;align-items:center;justify-content:center;
}
.hero-card-emoji svg{width:52px;height:52px;display:block;}
/* Cuando el producto del hero tiene foto real (gestionada desde el
   panel admin, igual que el resto de productos), la caja pasa de
   ícono centrado a una foto que llena el espacio, reutilizando la
   misma clase .prod-image (object-fit:contain, ver más abajo) que ya
   usan las demás tarjetas de producto del sitio. */
.hero-card-emoji.has-image{padding:0;overflow:hidden;}
.hero-card-emoji.has-image .prod-image{width:100%;height:160px;display:block;border-radius:var(--r-md);}
/* Estado de carga del bloque "Más vendido": mientras se obtienen los
   datos reales (imagen, nombre, precio) desde el panel admin, este
   recuadro muestra un relleno neutro con el mismo alto final que la
   foto (160px) para que, al llegar los datos, la imagen real ocupe
   el espacio sin ningún salto de tamaño. Nunca se ve un ícono ni
   texto de relleno "de mentira": solo una superficie lisa con un
   brillo sutil que dura hasta que hay contenido real que mostrar. */
.hero-card-emoji.hero-skeleton{padding:0;height:160px;}
.hero-skeleton{position:relative;overflow:hidden;background:var(--paper);color:transparent;}
.hero-skeleton::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  transform:translateX(-100%);
  animation:heroSkeletonShimmer 1.6s ease-in-out infinite;
}
.hero-skeleton-text{border-radius:6px;display:block;}
.hero-skeleton-text--title{height:16px;width:70%;margin:0 0 8px;}
.hero-skeleton-text--desc{height:12px;width:55%;margin:0 0 14px;}
.hero-skeleton-text--price{height:20px;width:70px;border-radius:6px;}
@keyframes heroSkeletonShimmer{
  100%{transform:translateX(100%);}
}
/* Cuando llegan los datos reales, el contenido se incorpora con un
   desvanecido breve dentro del mismo recuadro (sin ocultar ni
   reaparecer el bloque completo). */
.hero-fade-in{
  animation:heroContentFadeIn .35s ease both;
}
@keyframes heroContentFadeIn{
  from{opacity:0;}
  to{opacity:1;}
}
.hero-card h4{font-size:18px;margin-bottom:4px;font-weight:700;}
.hero-card p{color:var(--gray);font-size:13.5px;margin-bottom:14px;}
.hero-card-row{display:flex;justify-content:space-between;align-items:center;}
.hero-price{font-family:var(--font-display);font-weight:700;font-size:22px;color:var(--navy);}
.hero-price small{font-size:13px;color:var(--gray);text-decoration:line-through;font-weight:500;margin-right:6px;}

/* =========================================================
   SECTION SHELLS
   ========================================================= */
.section{padding:72px 0;}
.section-dim{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.section-head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
  margin-bottom:36px;flex-wrap:wrap;
}
.section-title{font-size:clamp(24px,3.2vw,34px);color:var(--ink);font-weight:700;}
.section-desc{color:var(--ink-soft);font-size:15px;max-width:460px;margin-top:8px;}
.see-all{
  font-family:var(--font-display);font-weight:600;color:var(--indigo);font-size:14.5px;
  display:flex;align-items:center;gap:6px;
}
.see-all svg{width:15px;height:15px;}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease), transform .6s var(--ease);}
.reveal.in{opacity:1;transform:translateY(0);}

/* =========================================================
   CATEGORY CHIPS (home)
   ========================================================= */
.cat-grid{
  display:grid;grid-template-columns:repeat(7,1fr);gap:14px;
}
.cat-card{
  padding:24px 12px;text-align:center;cursor:pointer;
}
.cat-emoji{
  width:50px;height:50px;border-radius:14px;margin:0 auto 12px;
  display:flex;align-items:center;justify-content:center;font-size:24px;
}
.cat-emoji svg{width:26px;height:26px;display:block;}
.cat-card h4{font-family:var(--font-display);font-weight:600;font-size:13.5px;color:var(--ink);}
.cat-card span{display:block;font-size:11.5px;color:var(--gray);margin-top:3px;}

/* =========================================================
   PRODUCT CARDS
   ========================================================= */
.prod-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
}
.prod-card{
  display:flex;flex-direction:column;overflow:hidden;
}
.prod-media{
  position:relative;aspect-ratio:1/.82;display:flex;align-items:center;justify-content:center;
  font-size:54px;border-bottom:1px solid var(--line);
  overflow:hidden;
}
/* Sistema reutilizable de adaptación automática de imágenes subidas
   desde el panel admin: el contenedor (.prod-media) define siempre el
   mismo tamaño/proporción visual vía aspect-ratio; la imagen real,
   sea cual sea su orientación (vertical, horizontal o cuadrada), se
   ajusta con object-fit:contain (se ve COMPLETA, sin recortar ninguna
   parte, y sin deformarse/estirarse) y object-position:center (queda
   centrada). El espacio que sobra alrededor de la foto (cuando su
   proporción no coincide exactamente con la del contenedor) se rellena
   con el mismo color de fondo por categoría que ya usa este contenedor,
   así que no se ve como un hueco vacío. Cualquier imagen futura subida
   desde el admin que use esta misma clase .prod-image heredará este
   comportamiento automáticamente. */
.prod-image{
  width:100%;height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
}
/* Etiquetas "Oferta"/"Agotado": mismo color/estilo, pero un poco más
   compactas y con una sombra suave para que se lean como una insignia
   flotando sobre la foto en vez de un bloque pegado que tapa parte
   del producto. Se mantiene la esquina superior izquierda, el color
   naranja y la forma de píldora. */
.prod-badge{
  position:absolute;top:8px;left:8px;
  font-family:var(--font-display);font-weight:700;font-size:9.5px;letter-spacing:.2px;
  padding:4px 9px;border-radius:999px;color:var(--white);
  background:var(--orange);
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.prod-fav{
  position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;
  color:var(--ink-soft);box-shadow:var(--shadow-sm);transition:all .2s var(--ease);
}
.prod-fav:hover{color:var(--pink);transform:scale(1.08);}
.prod-fav.active{color:var(--pink);}
.prod-fav.active svg{fill:var(--pink);}
.prod-fav svg{width:16px;height:16px;transition:fill .2s var(--ease);}
.prod-body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:7px;flex:1;}
.prod-cat{font-size:10.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--indigo);}
.prod-name{font-family:var(--font-body);font-weight:700;font-size:15px;color:var(--ink);line-height:1.3;min-height:40px;}
.prod-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:6px;}
.prod-price{font-family:var(--font-display);font-weight:700;font-size:18.5px;color:var(--navy);}
.prod-price small{font-size:12px;color:var(--gray);text-decoration:line-through;font-weight:500;display:block;margin-top:-4px;}
.add-btn{
  width:40px;height:40px;border-radius:50%;background:var(--navy);color:var(--white);
  display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-sm);transition:all .2s var(--ease);flex:none;
}
.add-btn:hover{background:var(--indigo);transform:translateY(-2px);box-shadow:var(--shadow-md);}
.add-btn:active{transform:translateY(0);}
.add-btn svg{width:18px;height:18px;}

/* offers strip */
.offer-strip{
  background:var(--navy);border-radius:var(--r-xl);
  padding:44px 40px;display:flex;align-items:center;justify-content:space-between;
  position:relative;overflow:hidden;gap:24px;flex-wrap:wrap;
  box-shadow:var(--shadow-navy);
}
.offer-strip::before{
  content:"";position:absolute;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle, rgba(42,30,224,.5), transparent 70%);top:-120px;right:-60px;
}
.offer-copy{position:relative;z-index:2;}
.offer-copy .eyebrow{color:var(--green);}
.offer-copy .eyebrow::before{background:var(--white);}
.offer-copy h3{font-size:clamp(22px,3vw,30px);color:var(--white);margin:10px 0 8px;font-weight:700;}
.offer-copy p{color:rgba(255,255,255,.68);font-size:14.5px;max-width:380px;}
.offer-percent{
  font-family:var(--font-display);font-weight:700;font-size:clamp(48px,7vw,80px);
  color:var(--orange);line-height:1;position:relative;z-index:2;
}

/* benefits */
.benefit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.benefit-card{padding:26px 22px;text-align:left;}
.benefit-icon{
  width:46px;height:46px;border-radius:13px;background:var(--navy);color:var(--green);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}
.benefit-icon svg{width:22px;height:22px;}
.benefit-card h4{font-size:16px;margin-bottom:6px;font-weight:700;}
.benefit-card p{font-size:13.5px;color:var(--ink-soft);line-height:1.55;}

/* =========================================================
   FOOTER
   ========================================================= */
footer{background:var(--navy);color:rgba(255,255,255,.55);padding:56px 0 26px;margin-top:40px;}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:32px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.08);}
.footer-brand p{font-size:13.5px;margin:14px 0 18px;max-width:280px;line-height:1.6;}
.footer-col h5{font-family:var(--font-display);color:var(--white);font-size:14px;margin-bottom:14px;font-weight:600;}
.footer-col li{margin-bottom:9px;font-size:13.5px;}
.footer-col a{cursor:pointer;}
.footer-col a:hover{color:var(--green);}
.footer-bottom{display:flex;justify-content:space-between;padding-top:22px;font-size:12.5px;flex-wrap:wrap;gap:10px;}
.social-row{display:flex;gap:10px;margin-top:6px;}
.social-row .icon-btn{width:36px;height:36px;}
.social-row svg{width:15px;height:15px;}

/* =========================================================
   PAGES (SPA views)
   ========================================================= */
.page{display:none;}
.page.active{display:block;}

/* Catalog */
.catalog-hero{background:var(--navy);padding:44px 0 40px;}
.catalog-hero h1{color:var(--white);font-size:clamp(26px,4vw,38px);font-weight:700;}
.catalog-hero p{color:rgba(255,255,255,.6);margin-top:8px;font-size:15px;}
.catalog-toolbar{
  display:flex;gap:16px;margin:-26px 0 30px;position:relative;z-index:5;
  flex-wrap:wrap;align-items:center;
}
.catalog-search{
  flex:1;min-width:240px;display:flex;align-items:center;gap:10px;
  background:var(--white);border:1px solid var(--line);border-radius:999px;
  padding:14px 20px;box-shadow:var(--shadow-md);
}
.catalog-search input{border:none;background:transparent;width:100%;font-size:15px;color:var(--ink);}
/* Misma excepción que en la barra de búsqueda del header: el contorno
   global de :focus-visible envuelve toda la píldora de búsqueda. */
.catalog-search input:focus-visible{outline:none;}
.catalog-search svg{width:18px;height:18px;color:var(--gray);flex:none;}
.filter-chips{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:32px;}
.chip{
  font-family:var(--font-display);font-weight:600;font-size:13px;
  padding:9px 17px;border-radius:999px;border:1.5px solid var(--line);
  background:var(--white);color:var(--ink-soft);transition:all .2s var(--ease);
  display:inline-flex;align-items:center;gap:7px;
}
.chip-icon{display:inline-flex;flex:none;}
.chip-icon svg{width:16px;height:16px;display:block;}
/* Etiqueta de jerarquía entre modalidad y tarifa de envío: oculta por
   defecto (desktop/iPad no cambian), se muestra solo en móvil dentro
   del media query correspondiente. */
.shipping-group-label{
  display:none;
  font-family:var(--font-display);font-weight:700;font-size:11px;
  text-transform:uppercase;letter-spacing:.5px;color:var(--gray);
  margin:0 0 8px 2px;
}
.chip:hover{border-color:var(--indigo);color:var(--indigo);}
/* Estado seleccionado minimalista (mismo lenguaje de "selección" que
   ya usa el panel admin: color índigo de marca), pero adaptado a fondo
   claro con un tinte suave en vez de un relleno sólido, para un
   resultado más discreto y elegante. */
.chip.active{background:var(--indigo-tint);color:var(--indigo-dark);border-color:var(--indigo);}
.catalog-count{font-size:13.5px;color:var(--gray);margin-bottom:18px;}
.empty-state{
  text-align:center;padding:70px 20px;color:var(--gray);
}
.empty-state .emoji{font-size:48px;margin-bottom:14px;}
.empty-state h4{font-family:var(--font-display);color:var(--ink);margin-bottom:6px;font-size:18px;}

/* Cart drawer */
.overlay{
  position:fixed;inset:0;background:rgba(11,16,56,.5);backdrop-filter:blur(2px);
  z-index:80;opacity:0;pointer-events:none;transition:opacity .3s var(--ease);
}
.overlay.show{opacity:1;pointer-events:auto;}
.cart-drawer{
  position:fixed;top:0;right:0;height:100%;width:410px;max-width:92vw;
  background:var(--paper);z-index:90;
  transform:translateX(100%);transition:transform .35s var(--ease);
  display:flex;flex-direction:column;
  box-shadow:-20px 0 50px rgba(11,16,56,.15);
}
.cart-drawer.show{transform:translateX(0);}
.cart-head{
  background:var(--navy);color:var(--white);padding:22px 24px;
  display:flex;justify-content:space-between;align-items:center;
}
.cart-head h3{font-size:18.5px;display:flex;align-items:center;gap:10px;font-weight:700;}
.cart-head-icon{display:inline-flex;}
.cart-head-icon svg{width:20px;height:20px;display:block;}
.cart-head .close-btn{
  width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;color:var(--white);
}
.cart-head .close-btn svg{width:17px;height:17px;}
.cart-items{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px;}
.cart-item{
  display:flex;gap:12px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-md);padding:12px;box-shadow:var(--shadow-sm);
}
.cart-item-emoji{
  width:60px;height:60px;border-radius:12px;flex:none;font-size:28px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
/* Cuando el producto tiene imagen real (subida desde el panel admin),
   .prod-image ya trae width/height:100%+object-fit:contain; aquí solo
   se asegura que respete el mismo border-radius del contenedor. */
.cart-item-emoji img.prod-image{border-radius:inherit;}
.cart-item-info{flex:1;display:flex;flex-direction:column;justify-content:space-between;min-width:0;}
.cart-item-info h5{font-size:14px;font-weight:700;line-height:1.3;}
.cart-item-price{font-family:var(--font-display);color:var(--navy);font-weight:700;font-size:14.5px;}
.qty-row{display:flex;align-items:center;gap:10px;}
.qty-btn{
  width:25px;height:25px;border-radius:50%;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;
  background:var(--paper);color:var(--navy);
}
.qty-btn:hover{background:var(--indigo-tint);border-color:var(--indigo);color:var(--indigo);}
.qty-val{font-family:var(--font-display);font-weight:700;min-width:18px;text-align:center;font-size:13.5px;}
.remove-btn{
  color:var(--gray);display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;
}
.remove-btn:hover{color:var(--orange);}
.remove-btn svg{width:16px;height:16px;}
.cart-empty{padding:60px 24px;text-align:center;color:var(--gray);}
.cart-empty-icon{display:inline-flex;margin-bottom:14px;}
.cart-empty-icon svg{width:46px;height:46px;display:block;}
.cart-foot{
  padding:20px 24px 26px;border-top:1px solid var(--line);background:var(--white);
}
.cart-summary-row{display:flex;justify-content:space-between;font-size:14px;color:var(--ink-soft);margin-bottom:8px;}
.cart-total-row{
  display:flex;justify-content:space-between;align-items:center;margin:12px 0 18px;
  font-family:var(--font-display);font-size:18px;color:var(--ink);font-weight:600;
}
.cart-total-row b{color:var(--navy);font-size:22px;}

/* Checkout / Pedido */
.checkout-page{background:var(--paper);}
.checkout-wrap{
  display:grid;grid-template-columns:1.15fr .85fr;gap:32px;padding:50px 0 90px;align-items:start;
}
.checkout-form-card, .order-summary-card{padding:30px;}
.checkout-form-card h3, .order-summary-card h3{font-size:19px;margin-bottom:22px;font-weight:700;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}
.field{margin-bottom:14px;display:flex;flex-direction:column;gap:6px;}
.field label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--indigo);}
.field input, .field textarea, .field select{
  border:1.5px solid var(--line);border-radius:var(--r-sm);padding:13px 14px;font-size:14.5px;
  background:var(--paper);color:var(--ink);transition:border-color .2s;
}
.field input:focus, .field textarea:focus, .field select:focus{border-color:var(--indigo);}
/* Estos campos ya tienen su propio estilo de foco (borde índigo); el
   contorno grueso de :focus-visible se sumaba encima y rodeaba todo
   el campo, por eso se desactiva puntualmente aquí. */
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible{outline:none;}
.field textarea{resize:vertical;min-height:80px;}
.field input:disabled{color:var(--ink-soft);cursor:not-allowed;}
.field-hint{font-size:12px;color:var(--gray);margin-top:2px;}
/* Mensaje "Llena este campo": oculto por defecto, mismo tamaño y
   familia tipográfica que el resto de hints de campo (--field-hint)
   para verse minimalista e integrado, en naranja de marca para
   distinguirse como aviso. Sin reglas por tamaño de pantalla, así
   que se ve exactamente igual en teléfono y en computadora. */
.field-error{
  display:none;
  font-size:12px;font-weight:600;color:var(--orange-dark);margin-top:2px;
}
.field-error.show{display:block;}
/* Selector de modalidad (Entrega/Retiro): reutiliza el componente .chip
   ya existente (filtros de Catálogo), solo se define el contenedor. */
.mode-select{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px;}
.mode-chip{cursor:pointer;}
.method-chip{cursor:pointer;}
.zone-note{
  display:flex;gap:10px;align-items:flex-start;background:var(--indigo-tint);border:1px solid #D6D3F8;
  border-radius:var(--r-sm);padding:12px 14px;font-size:12.5px;color:var(--indigo-dark);margin-bottom:20px;line-height:1.5;
}
.zone-note svg{width:19px;height:19px;flex:none;margin-top:1px;color:var(--indigo);}
.order-line{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;font-size:13.5px;padding:9px 0;border-bottom:1px dashed var(--line);color:var(--ink-soft);}
.order-line b{color:var(--ink);margin-left:auto;}
.order-line-name{flex:1 1 130px;min-width:0;}
/* Controles +/- del resumen del pedido: mismo componente .qty-btn ya
   usado en el carrito lateral, solo reutilizado aquí. */
.order-line-qty{display:flex;align-items:center;gap:6px;flex:none;}
/* Miniatura real del producto en el resumen del pedido, en el mismo
   lugar donde antes solo iba el emoji de categoría como texto inline. */
.order-line-thumb{
  display:inline-block;width:20px;height:20px;border-radius:6px;
  object-fit:cover;object-position:center;vertical-align:middle;
  margin-right:2px;
}
.order-line-thumb-emoji{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;background:var(--paper);
}
.summary-mode-icon{display:inline-flex;vertical-align:middle;margin-right:6px;}
.summary-mode-icon svg{width:15px;height:15px;display:block;}
.wa-note{
  display:flex;gap:10px;align-items:flex-start;background:var(--green-tint);border:1px solid #D3EEB9;
  border-radius:var(--r-sm);padding:12px 14px;font-size:12.5px;color:var(--green-ink);margin-top:16px;line-height:1.5;
}
.wa-note svg{width:20px;height:20px;flex:none;margin-top:1px;color:var(--green-dark);}

.confirm-screen{text-align:center;padding:90px 24px 110px;}
.confirm-emoji{
  width:100px;height:100px;border-radius:50%;background:var(--green-tint);margin:0 auto 26px;
  display:flex;align-items:center;justify-content:center;font-size:46px;
  border:1px solid #D3EEB9;
}
/* Ilustración personalizada del "pedido listo" (bolsa + check),
   reemplaza únicamente el emoji que iba dentro de este círculo; el
   círculo, su fondo y su borde no cambian. */
.confirm-emoji svg{width:58px;height:58px;}
.confirm-screen h2{font-size:27px;margin-bottom:10px;font-weight:700;}
.confirm-screen p{color:var(--ink-soft);max-width:420px;margin:0 auto 28px;}
/* Botón "Mi pedido" propio de la pantalla final del checkout: oculto
   por defecto (computadora ya lo tiene siempre visible en el menú
   del header); se muestra solo en los mismos breakpoints de teléfono
   que el resto del sitio (ver @media más abajo). */
.confirm-track-btn-wrap{display:none;}

/* toast */
.toast{
  position:fixed;bottom:26px;left:50%;
  transform:translateX(-50%) translateY(200%);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  background:var(--navy);color:var(--white);padding:14px 24px;border-radius:999px;
  font-family:var(--font-display);font-weight:600;font-size:13.5px;z-index:150;
  display:flex;align-items:center;gap:10px;
  transition:transform .35s var(--ease), opacity .35s var(--ease), visibility .35s var(--ease);
  box-shadow:var(--shadow-lg);
}
.toast.show{
  transform:translateX(-50%) translateY(0);
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.toast svg{width:17px;height:17px;color:var(--green);}

/* "Agregado al carrito" y el aviso de stock: fondo azul (navy, el
   mismo tono de --toast base/marca) con texto blanco. Aplica en
   cualquier tamaño de pantalla — el resto de notificaciones
   (validaciones, errores) no se toca. */
.toast.toast--cart, .toast.toast--stock{
  background:var(--navy);
  color:var(--white);
}
/* El aviso de stock es solo texto, sin el ícono de visto (✓) que sí
   lleva "Agregado al carrito" — no aplica a --cart. */
.toast.toast--stock svg{
  display:none;
}


/* =========================================================
   WHATSAPP FLOATING BUTTON
   ========================================================= */
.wa-float{
  position:fixed;right:22px;bottom:22px;z-index:140;
  width:66px;height:66px;border-radius:50%;
  background:#25D366;color:var(--white);
  display:flex;align-items:center;justify-content:center;
  transition:transform .25s var(--ease), opacity .25s var(--ease);
}
.wa-float::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:#25D366;opacity:.5;
  animation:waPulse 2.6s ease-out infinite;
}
.wa-float svg{width:32px;height:32px;position:relative;z-index:1;}
.wa-float:hover{transform:scale(1.06);}
@keyframes waPulse{
  0%{transform:scale(1);opacity:.45;}
  100%{transform:scale(1.7);opacity:0;}
}

/* Mensaje corto encima del botón flotante de WhatsApp: invita a
   escribir como UNA opción más de contacto/pedido (el pedido
   directo desde la web sigue siendo el flujo principal, este globo
   solo asoma la alternativa). Se posiciona relativo al mismo botón
   (mismo right/bottom que .wa-float, más su alto y un pequeño
   margen), así que se mueve con él en cada breakpoint.

   Oculto por defecto: aparece y desaparece de forma controlada por
   JS (ver script.js) añadiendo/quitando la clase .is-visible, para
   que no permanezca abierto todo el tiempo tapando contenido. */
.wa-tooltip{
  position:fixed;right:22px;bottom:100px;z-index:139;
  background:var(--white);color:var(--ink);
  font-family:var(--font-display);font-weight:600;font-size:13.5px;line-height:1.35;
  padding:10px 14px;border-radius:var(--r-md);
  box-shadow:var(--shadow-md);border:1px solid var(--line);
  max-width:190px;text-align:right;
  opacity:0;transform:translateY(10px) scale(.96);
  transition:opacity .45s var(--ease), transform .45s var(--ease);
  pointer-events:none;
}
.wa-tooltip.is-visible{
  opacity:1;transform:translateY(0) scale(1);
  animation:waTooltipFloat 3.2s ease-in-out .6s infinite;
}
.wa-tooltip::after{
  content:"";position:absolute;right:24px;bottom:-6px;
  width:12px;height:12px;background:var(--white);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  transform:rotate(45deg);
}
@keyframes waTooltipFloat{
  0%,100%{transform:translateY(0) scale(1);}
  50%{transform:translateY(-4px) scale(1);}
}

/* Oculta el botón de WhatsApp y su mensaje mientras el carrito está
   abierto (en cualquier tamaño de pantalla), o mientras el checkout
   o "Consultar pedido" están abiertos en móvil. La clase
   .wa-suppressed la añade/quita script.js según esas condiciones. */
body.wa-suppressed .wa-float,
body.wa-suppressed .wa-tooltip{
  opacity:0;
  transform:translateY(14px) scale(.94);
  pointer-events:none;
}

/* Oculta el pill flotante "Mi pedido" únicamente dentro de
   "Consultar pedido" (ya que el usuario está justo en esa
   sección), y únicamente en teléfono: la clase la añade/quita
   script.js solo en viewport móvil, así que en computadora y en el
   resto de secciones móviles el pill queda intacto. */
body.track-pill-suppressed .nav-link[data-nav="seguimiento"]{
  opacity:0;
  transform:translateY(14px) scale(.94);
  pointer-events:none;
}

/* =========================================================
   HELP MODAL (FAQ / Zonas de entrega / Métodos de pago)
   ========================================================= */
.help-modal-overlay{
  position:fixed;inset:0;background:rgba(11,16,56,.55);backdrop-filter:blur(2px);
  z-index:200;opacity:0;pointer-events:none;transition:opacity .25s var(--ease);
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.help-modal-overlay.show{opacity:1;pointer-events:auto;}
.help-modal{
  background:var(--white);border-radius:var(--r-lg);max-width:520px;width:100%;
  max-height:84vh;overflow-y:auto;box-shadow:var(--shadow-lg);
  transform:translateY(16px) scale(.98);opacity:0;transition:all .3s var(--ease);
}
.help-modal-overlay.show .help-modal{transform:translateY(0) scale(1);opacity:1;}
.help-modal-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:22px 24px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--white);
}
.help-modal-head h3{font-size:18.5px;font-weight:700;}
.help-modal-body{padding:22px 24px 28px;}
.help-close{
  width:32px;height:32px;border-radius:50%;background:var(--paper);
  display:flex;align-items:center;justify-content:center;color:var(--ink-soft);flex:none;
}
.help-close:hover{background:var(--line);color:var(--ink);}
.help-close svg{width:16px;height:16px;}

.faq-item{border-bottom:1px solid var(--line);}
.faq-item:last-child{border-bottom:none;}
.faq-q{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:16px 0;text-align:left;font-family:var(--font-display);font-weight:600;font-size:14.5px;color:var(--ink);
}
.faq-q svg{width:16px;height:16px;flex:none;color:var(--indigo);transition:transform .25s var(--ease);}
.faq-item.open .faq-q svg{transform:rotate(180deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s var(--ease);}
.faq-item.open .faq-a{max-height:200px;}
.faq-a p{padding:0 0 16px;font-size:13.5px;color:var(--ink-soft);line-height:1.6;}

.zone-block{display:flex;gap:14px;align-items:flex-start;padding:14px;background:var(--green-tint);border-radius:var(--r-md);margin-bottom:14px;}
.zone-block svg{width:22px;height:22px;flex:none;color:var(--green-dark);margin-top:2px;}
.zone-block p{font-size:13.5px;color:var(--green-ink);line-height:1.55;}
.zone-list{display:flex;flex-direction:column;gap:8px;margin-bottom:6px;}
.zone-list li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink);font-weight:600;}
.zone-list li svg{width:16px;height:16px;color:var(--indigo);flex:none;}

.pay-list{display:flex;flex-direction:column;gap:10px;}
.pay-item{display:flex;align-items:center;gap:12px;padding:13px 14px;border:1px solid var(--line);border-radius:var(--r-md);}
.pay-item svg{width:20px;height:20px;color:var(--indigo);flex:none;}
.pay-item span{font-size:14px;font-weight:600;color:var(--ink);}
.pay-item small{display:block;font-size:12px;color:var(--gray);font-weight:400;margin-top:1px;}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;}
}

/* =========================================================
   RESPONSIVE
   Breakpoints: escritorio (>1024) · tablet landscape (860-1024)
   · tablet portrait / iPad (641-860) · móvil (≤640) · móvil chico (≤380)
   ========================================================= */

/* --- Tablet landscape: mantiene 2 columnas, layout propio de tablet --- */
@media (max-width:1024px){
  .prod-grid{grid-template-columns:repeat(3,1fr);}
  .cat-grid{grid-template-columns:repeat(4,1fr);}
  .benefit-grid{grid-template-columns:repeat(2,1fr);}
  .hero-inner{gap:32px;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:26px;}
  .search-inline{max-width:220px;}
}

/* --- Tablet portrait / iPad vertical: layout propio, no es "móvil grande" --- */
@media (max-width:860px){
  html{overflow-x:hidden;}
  body{overflow-x:hidden;}
  .wrap{padding:0 22px;}
  .hero-inner{grid-template-columns:1fr;}
  .hero-visual{order:-1;max-width:380px;margin:0 auto;}
  .checkout-wrap{grid-template-columns:1fr;max-width:640px;margin:0 auto;}
  .search-inline{display:none;}
  .prod-grid{grid-template-columns:repeat(3,1fr);gap:18px;}
  .cat-grid{grid-template-columns:repeat(4,1fr);gap:14px;}
  .benefit-grid{grid-template-columns:repeat(2,1fr);}
  .section{padding:60px 0;}

  /* Tarjeta de producto más equilibrada: el área de imagen dejaba
     demasiada altura "en blanco" antes del texto en pantallas angostas.
     Se reduce su proporción (menos alta) y se ajusta el emoji/ícono y el
     espaciado del cuerpo, sin cambiar la jerarquía imagen→nombre→precio. */
  .prod-media{aspect-ratio:1/.58;font-size:42px;}
  .prod-body{padding:12px 14px 14px;gap:5px;}
  .prod-name{min-height:auto;font-size:13.5px;}
  .prod-cat{font-size:10px;}
  .prod-price{font-size:16.5px;}
}

/* --- Móvil (teléfonos, desde 320px) --- */
@media (max-width:640px){
  html{overflow-x:hidden;}
  body{overflow-x:hidden;}
  .confirm-track-btn-wrap{display:block;}
  .wrap, main .wrap, .hero-inner, main.wrap{padding-left:16px;padding-right:16px;}
  .prod-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .cat-grid{grid-template-columns:repeat(3,1fr);gap:8px;}
  .cat-card{padding:14px 6px;}
  .cat-card h4{font-size:11.5px;}
  .cat-card span{display:none;}
  .benefit-grid{grid-template-columns:1fr;}
  .section{padding:44px 0;}
  .section-title{font-size:22px;}
  .section-head{gap:14px;}
  .hero-title{font-size:clamp(30px,8vw,40px);}
  .hero-sub{font-size:15.5px;}
  .hero-stats{gap:20px;}
  .hero-cta{gap:10px;}
  .btn{padding:13px 22px;font-size:14.5px;}

  /* La tarjeta blanca del hero (heredaba order:-1 del bloque de tablet)
     ya no debe ir primero en teléfono: el título y el texto van antes.
     Ancho: ajustado a partir de una captura de referencia del usuario
     (recuadro centrado, con aire visible a los lados, no pegado a los
     bordes de la pantalla) — se vuelve a un ancho fijo más compacto
     y centrado, en vez del "sangrado" de ancho completo usado antes. */
  .hero-visual{order:0;width:284px;max-width:284px;margin:20px auto 0;}
  .hero-card{padding:18px;box-shadow:var(--shadow-md);}
  .hero-card-emoji{padding:14px 0;margin-bottom:12px;}
  .hero-card-emoji svg{width:40px;height:40px;}
  .hero-card-emoji.has-image .prod-image{height:120px;}

  nav.main-nav{
    position:fixed;top:0;left:-300px;height:100vh;width:80%;max-width:300px;
    background:var(--navy);flex-direction:column;align-items:flex-start;
    padding:90px 24px 26px;gap:2px;
    transition:left .35s var(--ease);z-index:70;
  }
  nav.main-nav.open{left:0;}
  .nav-link{width:100%;padding:14px 16px;font-size:16px;}

  /* Botón "Mi pedido" siempre visible en móvil: al vivir dentro de
     nav.main-nav (oculto fuera de pantalla), se saca visualmente del
     menú con position:fixed propio para que quede accesible sin abrir
     el menú hamburguesa y no desaparezca al hacer scroll. */
  .nav-link[data-nav="seguimiento"]{
    position:fixed;left:14px;bottom:14px;z-index:75;
    width:auto;display:flex;align-items:center;gap:6px;
    background:var(--indigo);color:var(--white);
    padding:12px 18px;border-radius:999px;font-size:13.5px;font-weight:700;
    transition:opacity .25s var(--ease), transform .25s var(--ease);
  }
  .nav-link[data-nav="seguimiento"]:hover{background:var(--indigo-dark);color:var(--white);}

  .hamburger{
    display:flex;width:48px;height:48px;border-radius:50%;align-items:center;justify-content:center;
    color:var(--white);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);flex:none;
    position:relative;z-index:75;
  }
  .hamburger svg{width:21px;height:21px;}
  #navOverlay{z-index:65;}
  .logo-img{height:40px;}

  .offer-strip{padding:28px 20px;flex-direction:column;align-items:flex-start;}
  .offer-percent{font-size:44px;}
  .cart-drawer{width:100%;max-width:100%;}
  .checkout-form-card, .order-summary-card{padding:18px;}
  .form-row{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;gap:30px;}
  .footer-bottom{flex-direction:column;align-items:flex-start;}
  .header-inner{padding:12px 16px;gap:10px;}
  .hero{padding:36px 0 56px;}
  .prod-name{min-height:auto;font-size:14px;}
  .prod-price{font-size:17px;}
  .catalog-toolbar{margin-top:0;}

  /* objetivos táctiles más grandes en móvil */
  #cartBtn{width:48px;height:48px;}
  #cartBtn svg{width:21px;height:21px;}
  .icon-box{width:21px;height:21px;}
  .add-btn{width:44px;height:44px;}
  .prod-fav{width:36px;height:36px;}
  .qty-btn{width:32px;height:32px;}
  .chip{padding:10px 16px;font-size:13px;}

  /* Checkout (SOLO móvil): distribución más cómoda para elegir modalidad
     de entrega y tarifa de envío. No toca los chips de categoría del
     Catálogo (siguen usando .chip sin más reglas), ni tablet/desktop
     (este bloque solo aplica hasta 640px). */
  #modeSelect, #shippingMethodSelect{
    flex-direction:column;
    gap:12px;
  }
  #modeSelect{margin-bottom:6px;}
  #shippingMethodSelect{margin-top:4px;margin-bottom:22px;}
  #modeSelect .chip, #shippingMethodSelect .chip{
    width:100%;
    padding:15px 18px;
    font-size:14.5px;
    gap:12px;
    justify-content:flex-start;
  }
  #modeSelect .chip-icon svg, #shippingMethodSelect .chip-icon svg{
    width:19px;height:19px;
  }
  .shipping-group-label{display:block;}

  .wa-float{width:58px;height:58px;right:14px;bottom:14px;}
  .wa-float svg{width:28px;height:28px;}
  .wa-tooltip{right:14px;bottom:80px;font-size:13px;max-width:160px;padding:9px 12px;}
  .wa-tooltip::after{right:18px;}
  .help-modal-overlay{padding:14px;}
  .help-modal-body{padding:18px;}
  .help-modal-head{padding:18px 18px;}

  /* Mensaje de "Producto agregado al carrito": en el resto de
     notificaciones (errores, validaciones) no se toca nada; esta
     regla de posición alcanza a la variante .toast--cart y también a
     la .toast--stock (aviso de "sin stock suficiente") — comparten
     la misma ubicación segura y ahora también el mismo color: el
     navy/blanco por defecto (igual que en computadora), sin ninguna
     regla de color aparte para --cart. Se calcula la altura real de
     los dos elementos fijos de abajo para dejar la notificación
     siempre por encima de ambos: WhatsApp (bottom:14px + 58px de
     alto = borde superior a 72px del fondo) y "Mi pedido" (bottom:
     14px + ~40px de alto = borde superior a ~54px), así que WhatsApp
     es el que manda. Se deja además ~20px de aire limpio por encima
     de ese borde para que no quede pegada a los botones ni al borde
     inferior de la pantalla. */
  .toast.toast--cart, .toast.toast--stock{
    top:auto;bottom:92px;
    transform:translateX(-50%) translateY(14px);
    max-width:calc(100% - 48px);
    white-space:normal;text-align:center;
    font-size:13px;padding:12px 18px;
  }
  .toast.toast--cart.show, .toast.toast--stock.show{
    transform:translateX(-50%) translateY(0);
  }
}

/* Mismo mensaje de carrito, para el rango entre "teléfono" (≤640px)
   y "tablet" (~860px): cubre teléfonos grandes/phablets donde no
   existe el botón fijo "Mi pedido" (el menú va inline en el header
   a este ancho), pero WhatsApp sigue fijo con su tamaño de escritorio
   (bottom:22px + 66px de alto = borde superior a 88px del fondo).
   Sin este bloque, esos anchos caían en la posición por defecto
   (bottom:26px), demasiado cerca de WhatsApp. */
@media (min-width:641px) and (max-width:767px){
  .toast.toast--cart, .toast.toast--stock{
    top:auto;bottom:108px;
    transform:translateX(-50%) translateY(14px);
    max-width:calc(100% - 48px);
    white-space:normal;text-align:center;
  }
  .toast.toast--cart.show, .toast.toast--stock.show{
    transform:translateX(-50%) translateY(0);
  }
}

/* --- Teléfonos en horizontal --------------------------------------
   El ancho lógico de un teléfono en horizontal puede superar 640px
   (hasta ~930px en algunos equipos grandes), pero la altura sigue
   siendo baja, así que este bloque detecta "teléfono horizontal" por
   altura+orientación en vez de solo por ancho, para que el menú y la
   tarjeta del hero no queden apretados/cortados en esa orientación.
   No afecta tablets en horizontal (altura mayor a 500px). --- */
@media (orientation:landscape) and (max-height:500px){
  .wa-tooltip{display:none;}
  .search-inline{display:none;}
  .confirm-track-btn-wrap{display:block;}
  nav.main-nav{
    position:fixed;top:0;left:-300px;height:100vh;width:64%;max-width:280px;
    background:var(--navy);flex-direction:column;align-items:flex-start;
    padding:70px 22px 20px;gap:2px;overflow-y:auto;
    transition:left .35s var(--ease);z-index:70;
  }
  nav.main-nav.open{left:0;}
  .nav-link{width:100%;padding:12px 14px;font-size:15px;}
  .nav-link[data-nav="seguimiento"]{
    position:fixed;left:12px;bottom:12px;z-index:75;
    width:auto;display:flex;align-items:center;gap:6px;
    background:var(--indigo);color:var(--white);
    padding:10px 16px;border-radius:999px;font-size:12.5px;font-weight:700;
    transition:opacity .25s var(--ease), transform .25s var(--ease);
  }
  /* En horizontal, WhatsApp puede llegar a medir 66px con bottom:22px
     (tamaño de escritorio, cuando el ancho del teléfono acostado
     supera 640px) — borde superior a 88px del fondo, el caso más
     alto posible en este rango. En los teléfonos angostos donde sí
     aplica el WhatsApp reducido de 58px (bottom:14px, borde superior
     a 72px) queda incluso más aire libre, nunca menos. Se usa
     bottom:108px para dejar siempre ~20px de separación limpia por
     encima del botón más alto posible. "Mi pedido" mide menos que
     WhatsApp en ambos casos, así que también queda cubierto. */
  .toast.toast--cart, .toast.toast--stock{
    top:auto;bottom:108px;
    transform:translateX(-50%) translateY(14px);
    max-width:calc(100% - 48px);
    white-space:normal;text-align:center;
    font-size:12.5px;padding:10px 16px;
  }
  .toast.toast--cart.show, .toast.toast--stock.show{
    transform:translateX(-50%) translateY(0);
  }
  .hamburger{
    display:flex;width:44px;height:44px;border-radius:50%;align-items:center;justify-content:center;
    color:var(--white);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);flex:none;
    position:relative;z-index:75;
  }
  .hamburger svg{width:19px;height:19px;}
  #navOverlay{z-index:65;}
  .hero{padding:28px 0 40px;}
  /* En este rango (teléfono en horizontal, ~852×393 por ejemplo) el
     ancho SÍ alcanza para 2 columnas como en computadora — el problema
     real no era el ancho sino que el breakpoint de tablet vertical
     (≤860px, más abajo en este archivo) también hace match aquí por
     ancho y le pone order:-1 a .hero-visual (pensado para su propio
     layout apilado, donde eso pone la tarjeta ARRIBA del texto). En
     un grid de 2 columnas ese mismo order:-1 la manda a la columna
     IZQUIERDA en vez de dejarla a la derecha, que es lo que causaba
     "imagen a la izquierda, texto a la derecha". Aquí se restablece
     el layout de 2 columnas de escritorio (texto izquierda, tarjeta
     derecha) y el orden normal del DOM, sin fijar un max-width propio:
     así la tarjeta toma el ancho natural de su columna del grid, igual
     de proporcional que en escritorio. */
  .hero-inner{grid-template-columns:1.1fr .9fr;align-items:center;}
  .hero-visual{order:0;max-width:none;margin:0;}
  .section{padding:40px 0;}
}

/* --- Móvil chico (iPhone SE y similares, desde 320px) --- */
@media (max-width:380px){
  .cat-grid{grid-template-columns:repeat(2,1fr);}
  .wrap, main .wrap, .hero-inner, main.wrap{padding-left:14px;padding-right:14px;}
  .hero-stat b{font-size:19px;}
  .hero-stat span{font-size:10.5px;}
  .hero-title{font-size:28px;}
  .prod-grid{gap:10px;}
}

/* =========================================================
   SEGUIMIENTO DE PEDIDO (público, por teléfono)
   Reutiliza tokens y componentes existentes (.sticker,
   .checkout-form-card, .field, .btn) — nada nuevo estructural.
   ========================================================= */
/* Enlace discreto para volver al inicio sin pasar por el menú
   hamburguesa. Vive únicamente dentro de "Consultar pedido"; usa
   el mismo mecanismo data-nav="inicio" que ya usan el logo y los
   demás enlaces del menú, así que no requiere JS adicional. */
.track-back-link{
  display:flex;align-items:center;gap:6px;width:fit-content;
  font-family:var(--font-display);font-weight:700;font-size:13.5px;
  color:var(--ink-soft);text-decoration:none;
  padding:8px 6px;margin:-8px -6px 14px;border-radius:var(--r-sm);
  transition:color .2s var(--ease), background .2s var(--ease);
}
.track-back-link svg{width:16px;height:16px;flex-shrink:0;}
.track-back-link:hover{color:var(--indigo);background:rgba(24,24,176,.06);}
.track-error{
  background:var(--orange-tint);color:var(--orange-dark);
  border-radius:var(--r-sm);padding:12px 14px;font-size:14px;margin-bottom:18px;
}
.track-order-card{padding:24px;margin-bottom:18px;}
.track-order-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--line);
}
.track-order-head h3{font-size:16px;}
.track-order-row{
  display:flex;justify-content:space-between;gap:12px;
  padding:6px 0;font-size:14.5px;color:var(--ink);
}
.track-order-row span:first-child{color:var(--ink-soft);}
.track-order-row b{font-family:var(--font-display);}

.track-status-badge{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-display);font-weight:700;font-size:12.5px;
  padding:5px 12px;border-radius:999px;background:var(--indigo-tint);color:var(--indigo);
}
.track-status-badge.is-entregado{background:var(--green-tint);color:var(--green-ink);}
.track-status-badge.is-cancelado{background:var(--orange-tint);color:var(--orange-dark);}

/* stepper de progreso */
.track-stepper{display:flex;align-items:flex-start;margin-top:18px;}
.track-step{flex:1;text-align:center;position:relative;}
.track-step:not(:last-child)::after{
  content:"";position:absolute;top:13px;left:50%;width:100%;height:3px;
  background:var(--line);z-index:0;
}
.track-step.is-done:not(:last-child)::after{background:var(--green);}
.track-step-dot{
  width:26px;height:26px;border-radius:50%;background:var(--white);
  border:3px solid var(--line);display:flex;align-items:center;justify-content:center;
  margin:0 auto 8px;position:relative;z-index:1;font-size:12px;
  transition:all .2s var(--ease);
}
.track-step.is-done .track-step-dot{background:var(--green);border-color:var(--green);color:var(--white);}
.track-step.is-current .track-step-dot{background:var(--indigo);border-color:var(--indigo);color:var(--white);box-shadow:0 0 0 4px var(--indigo-tint);}
.track-step-label{font-size:10.5px;font-weight:700;color:var(--ink-soft);letter-spacing:.2px;}
.track-step.is-done .track-step-label,
.track-step.is-current .track-step-label{color:var(--ink);}

@media (max-width:640px){
  .track-order-card{padding:18px;}
  .track-step-label{font-size:9.5px;}
  .track-step-dot{width:22px;height:22px;font-size:10.5px;}
}

/* Íconos SVG de "Consultar pedido" (reemplazan los emojis de Fecha,
   Teléfono, Total pagado y de los estados del stepper/badge). Reglas
   nuevas y exclusivas para estos 8 elementos; no tocan ningún estilo
   existente de la sección. */
.track-icon{display:inline-flex;vertical-align:middle;width:15px;height:15px;margin-right:5px;color:var(--ink-soft);}
.track-icon svg{width:100%;height:100%;display:block;}
.track-step-dot svg{width:13px;height:13px;}
.track-status-badge svg{width:13px;height:13px;flex-shrink:0;}
@media (max-width:640px){
  .track-icon{width:13px;height:13px;}
  .track-step-dot svg{width:11px;height:11px;}
}

/* =========================================================
   FAVORITOS — ajuste fino de la posición vertical de la foto
   dentro de su recuadro (se sentía pegada muy arriba). Solo afecta
   la página de Favoritos (#favoritesGrid); el resto de tarjetas de
   producto del sitio (catálogo, destacados, ofertas, carrito) no se
   tocan. No cambia tamaño, colores, botones ni estructura: solo
   corre un poco hacia abajo el punto de referencia que usa
   object-fit:contain para centrar la imagen dentro del recuadro.
   ========================================================= */
#favoritesGrid .prod-image{ object-position:center 60%; }