/* ============================================================
   MERCANTO — tu compra inteligente
   Sistema de diseño basado en el Manual de Imagen Corporativa
   Paleta oficial: #FFD300 · #004C93 · #DC072E
   Secundarios:    #17AAC8 · #F15E25 · #E14F9C · #9E90C5
   ============================================================ */

@font-face{
  font-family:'Arista Pro';
  src:url('../fonts/arista-pro-bold.woff2?v=2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Chocotea';
  src:url('../fonts/chocotea.woff2') format('woff2');
  font-weight:400;font-style:italic;font-display:swap;
}

:root{
  --amarillo:#FFD300;
  --azul:#004C93;
  --azul-osc:#003a71;
  --azul-noche:#022b52;
  --rojo:#DC072E;
  --cian:#17AAC8;
  --naranja:#F15E25;
  --rosa:#E14F9C;
  --lila:#9E90C5;
  --crema:#FFF9EE;
  --crema-2:#FFF3D9;
  --blanco:#ffffff;
  --tinta:#122a44;
  --tinta-suave:#44597a;
  --borde:#e8e2d2;
  --verde-wa:#25D366;
  --sombra:0 10px 30px rgba(0,45,90,.12);
  --sombra-2:0 16px 44px rgba(0,45,90,.16);
  --radio:18px;
  --font-title:'Arista Pro','Trebuchet MS',system-ui,sans-serif;
  --font-brand:'Chocotea',cursive;
  --font-body:'Nunito','Segoe UI',system-ui,sans-serif;
  --ancho:1180px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  color:var(--tinta);
  background:var(--crema);
  font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--azul);text-decoration:none}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
.wrap{max-width:var(--ancho);margin:0 auto;padding:0 22px}
.center{text-align:center}

h1,h2,h3,h4{font-family:var(--font-title);line-height:1.13;color:var(--azul);font-weight:700}
h1{font-size:clamp(2rem,4.6vw,3.4rem)}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem)}
h3{font-size:1.25rem}
.script{font-family:var(--font-brand);font-style:italic;font-weight:400}
.amarillo{color:var(--amarillo)}
.rojo{color:var(--rojo)}
.cian{color:var(--cian)}
.blanco{color:#fff}

/* ---------- Bandera de Colombia (CSS, el emoji 🇨🇴 no se ve en Windows) ---------- */
.co-flag{
  display:inline-block;width:1.25em;height:.9em;border-radius:3px;vertical-align:-.12em;
  background:linear-gradient(180deg,#FCD116 0 50%,#003893 50% 75%,#CE1126 75% 100%);
  box-shadow:0 0 0 1px rgba(0,0,0,.15);
}

/* ---------- Cenefa fiestera (borde decorativo tipo chiva) ---------- */
.cenefa{height:14px;background:url('../img/cenefa.svg') repeat-x center/auto 14px}
.cenefa--grande{height:20px;background-size:auto 20px}

/* ---------- Iconografía Mercanto ---------- */
.ico{width:24px;height:24px;fill:currentColor;flex:none;vertical-align:middle}
.ico--nav{width:17px;height:17px;margin-right:2px}
.ico--carrito{width:22px;height:22px}
.ico--btn{width:20px;height:20px}
.ico--chip{width:15px;height:15px;margin-right:4px}
.ico--geo{width:22px;height:22px;color:var(--rojo);margin-right:6px}
.ico--sello{width:19px;height:19px;margin-right:5px;vertical-align:-4px}
.ico--drawer{width:24px;height:24px;color:var(--amarillo)}
.ico--rem{width:19px;height:19px;color:var(--azul);vertical-align:-4px;margin-right:3px}
.ico--seg{width:15px;height:15px;margin-right:5px;color:var(--amarillo)}
.mini-ico{
  width:38px;height:38px;border-radius:50%;display:inline-grid;place-items:center;flex:none;
  box-shadow:0 3px 8px rgba(0,0,0,.25);
}
.mini-ico .ico{width:20px;height:20px}

/* ---------- Header ---------- */
.header{
  position:sticky;top:0;z-index:60;
  background:var(--azul);
  box-shadow:0 3px 14px rgba(0,30,70,.28);
}
.header__in{
  max-width:var(--ancho);margin:0 auto;padding:10px 22px;
  display:flex;align-items:center;gap:18px;
}
.header__logo img{height:54px;width:auto}
.nav{display:flex;gap:4px;margin-left:auto;align-items:center}
.nav a{
  color:#fff;font-weight:800;font-size:.95rem;padding:9px 13px;border-radius:12px;
  transition:background .18s,color .18s;white-space:nowrap;
}
.nav a:hover{background:rgba(255,211,0,.18)}
.nav a.activo{background:var(--amarillo);color:var(--azul)}
.nav a.nav--tendero{
  background:var(--amarillo);color:var(--azul);margin-left:6px;
  box-shadow:0 3px 0 rgba(0,0,0,.18);
}
.nav a.nav--tendero:hover{background:#ffdf3d}
.btn-carrito{
  position:relative;display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.12);color:#fff;font-weight:800;
  padding:9px 14px;border-radius:12px;font-size:.95rem;
  transition:background .18s;
}
.btn-carrito:hover{background:rgba(255,255,255,.22)}
.btn-carrito__num{
  background:var(--rojo);color:#fff;border-radius:99px;font-size:.72rem;
  min-width:20px;height:20px;display:grid;place-items:center;padding:0 5px;
  border:2px solid var(--azul);position:absolute;top:-6px;right:-6px;
}
.hamburguesa{display:none;flex-direction:column;gap:5px;padding:8px;margin-left:auto}
.hamburguesa span{width:26px;height:3px;background:#fff;border-radius:3px;display:block}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-title);font-weight:700;font-size:1.02rem;
  padding:14px 28px;border-radius:99px;transition:transform .15s,box-shadow .15s,background .15s;
  text-align:center;line-height:1.2;
}
.btn:active{transform:scale(.97)}
.btn--amarillo{background:var(--amarillo);color:var(--azul);box-shadow:0 5px 0 #d9b300}
.btn--amarillo:hover{background:#ffdf3d;transform:translateY(-2px)}
.btn--rojo{background:var(--rojo);color:#fff;box-shadow:0 5px 0 #a3051f}
.btn--rojo:hover{background:#f01337;transform:translateY(-2px)}
.btn--blanco{background:#fff;color:var(--azul);box-shadow:0 5px 0 rgba(0,0,0,.15)}
.btn--blanco:hover{transform:translateY(-2px)}
.btn--borde{border:3px solid #fff;color:#fff}
.btn--borde:hover{background:rgba(255,255,255,.14)}
.btn--wa{background:var(--verde-wa);color:#fff;box-shadow:0 5px 0 #17a74d}
.btn--wa:hover{background:#31e274;transform:translateY(-2px)}
.btn--chico{padding:10px 18px;font-size:.9rem}

/* ---------- Hero ---------- */
.hero{
  position:relative;background:var(--azul);color:#fff;overflow:hidden;
}
.hero__bg{position:absolute;inset:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 24%}
.hero__bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(94deg,rgba(0,44,88,.93) 0%,rgba(0,58,113,.82) 42%,rgba(0,76,147,.28) 100%);
}
.hero__in{
  position:relative;max-width:var(--ancho);margin:0 auto;
  padding:74px 22px 86px;display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:center;
  min-height:560px;
}
.hero__badge{
  display:inline-flex;align-items:center;gap:8px;background:rgba(255,211,0,.16);
  border:2px solid var(--amarillo);color:var(--amarillo);
  font-weight:800;font-size:.85rem;border-radius:99px;padding:7px 16px;margin-bottom:20px;
}
.hero h1{color:#fff;margin-bottom:8px}
.hero h1 .script{color:var(--amarillo);font-size:1.12em}
.hero__sub{font-size:1.18rem;max-width:34rem;margin:14px 0 28px;color:#eaf3ff;font-weight:600}
.hero__ctas{display:flex;gap:14px;flex-wrap:wrap}
.hero__mini{display:flex;gap:22px;margin-top:34px;flex-wrap:wrap}
.hero__mini div{display:flex;align-items:center;gap:9px;font-weight:800;font-size:.92rem}
.hero__mini svg{flex:none}

/* tarjeta flotante del hero */
.hero__card{
  position:relative;background:#fff;color:var(--tinta);border-radius:22px;
  box-shadow:var(--sombra-2);padding:22px;max-width:390px;justify-self:end;
  rotate:1.5deg;
}
.hero__card img{border-radius:14px;height:200px;width:100%;object-fit:cover}
.hero__card img.hero__card-img{height:330px;object-fit:cover;object-position:center 12%}
.hero__card h3{margin:14px 0 4px;color:var(--azul)}
.hero__card p{font-size:.92rem;color:var(--tinta-suave)}
.hero__card .chip-dist{
  position:absolute;top:34px;left:-14px;background:var(--amarillo);color:var(--azul);
  font-weight:900;font-size:.85rem;border-radius:99px;padding:8px 14px;box-shadow:var(--sombra);
  rotate:-3deg;
}

/* ---------- Marquee ---------- */
.marquee{background:var(--amarillo);overflow:hidden;padding:11px 0;border-block:3px solid var(--azul)}
.marquee__track{display:flex;gap:44px;white-space:nowrap;animation:marquee 26s linear infinite;width:max-content}
.marquee span{font-family:var(--font-title);font-weight:700;color:var(--azul);font-size:1rem;display:flex;gap:44px}
@keyframes marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee__track{animation:none}}

/* ---------- Secciones ---------- */
.seccion{padding:74px 0}
.seccion--blanca{background:#fff}
.seccion--azul{background:var(--azul);color:#fff}
.seccion--azul h2{color:#fff}
.seccion--crema2{background:var(--crema-2)}
.kicker{
  display:inline-block;font-weight:900;letter-spacing:.14em;font-size:.8rem;
  color:var(--rojo);text-transform:uppercase;margin-bottom:10px;
}
.seccion--azul .kicker{color:var(--amarillo)}
.intro{max-width:46rem;color:var(--tinta-suave);font-size:1.08rem;margin-top:12px}
.seccion--azul .intro{color:#d7e7fb}
.intro--centro{margin-inline:auto}

/* ---------- Grid categorías ---------- */
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;margin-top:38px}
.cat{
  background:#fff;border-radius:var(--radio);padding:20px 14px;text-align:center;
  border:2px solid var(--borde);transition:transform .18s,box-shadow .18s,border-color .18s;
  display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--tinta);
}
.cat:hover{transform:translateY(-5px);box-shadow:var(--sombra);border-color:var(--amarillo)}
.cat__ico{
  width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-size:1.9rem;
}
.cat b{font-size:.95rem;color:var(--azul)}
.cat small{color:var(--tinta-suave);font-size:.78rem}

/* ---------- Tarjetas de producto ---------- */
.prods{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:20px;margin-top:38px}
.prod{
  background:#fff;border-radius:var(--radio);overflow:hidden;border:2px solid var(--borde);
  display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s;position:relative;
}
.prod:hover{transform:translateY(-5px);box-shadow:var(--sombra-2)}
.prod__img{position:relative;aspect-ratio:1/.82;background:var(--crema-2);overflow:hidden}
.prod__img img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.prod:hover .prod__img img{transform:scale(1.05)}
.prod__marca{
  position:absolute;left:10px;top:10px;background:var(--azul);color:var(--amarillo);
  font-family:var(--font-brand);font-style:italic;font-size:.95rem;padding:3px 12px 5px;border-radius:99px;
  box-shadow:0 3px 8px rgba(0,0,0,.25);
}
.prod__badge{
  position:absolute;right:10px;top:10px;background:var(--rojo);color:#fff;font-weight:900;
  font-size:.72rem;padding:5px 10px;border-radius:99px;letter-spacing:.04em;
}
.prod__body{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1}
.prod__body h3{font-size:1.05rem;color:var(--tinta)}
.prod__body h3 a{color:inherit}
.prod__pres{display:flex;gap:6px;flex-wrap:wrap}
.pres{
  border:2px solid var(--borde);border-radius:99px;font-size:.76rem;font-weight:800;
  padding:4px 10px;color:var(--tinta-suave);background:#fff;transition:all .15s;
}
.pres.sel{background:var(--azul);border-color:var(--azul);color:#fff}
.prod__precio{font-family:var(--font-title);font-weight:700;font-size:1.3rem;color:var(--azul);margin-top:auto}
.prod__precio small{font-size:.78rem;color:var(--tinta-suave);font-family:var(--font-body);font-weight:700}
.prod__add{
  background:var(--amarillo);color:var(--azul);font-weight:900;border-radius:12px;
  padding:11px;font-size:.95rem;display:flex;align-items:center;justify-content:center;gap:8px;
  transition:background .15s;box-shadow:0 3px 0 #d9b300;font-family:var(--font-title);
}
.prod__add:hover{background:#ffdf3d}
.prod__add:active{transform:scale(.97)}

/* ---------- Cómo funciona (pasos) ---------- */
.pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px}
/* Variantes de columnas. Van aquí (no como style inline) para que las reglas
   responsive de más abajo puedan anularlas en tablet y celular. */
.pasos--3{grid-template-columns:repeat(3,1fr)}
.pasos--5{grid-template-columns:repeat(5,1fr)}
.paso{
  background:#fff;border-radius:var(--radio);padding:26px 20px;border:2px solid var(--borde);
  position:relative;
}
.paso__num{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-title);font-weight:700;font-size:1.25rem;color:#fff;margin-bottom:14px;
}
.paso h3{margin-bottom:8px}
.paso p{font-size:.94rem;color:var(--tinta-suave)}

/* ---------- Sección foto + texto ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;margin-top:20px}
.duo--rev .duo__foto{order:2}
.duo__foto{position:relative}
.duo__foto img{border-radius:26px;box-shadow:var(--sombra-2);width:100%;height:440px;object-fit:cover}
.duo__foto .sello{
  position:absolute;bottom:-18px;right:22px;background:var(--amarillo);color:var(--azul);
  border-radius:16px;padding:12px 18px;font-weight:900;box-shadow:var(--sombra);
  font-size:.92rem;rotate:-2deg;max-width:230px;text-align:center;
}
ul.ticks{margin-top:18px;display:grid;gap:12px}
ul.ticks li{display:flex;gap:12px;align-items:flex-start;font-weight:600}
.tick{
  flex:none;width:26px;height:26px;border-radius:50%;background:var(--amarillo);
  display:grid;place-items:center;color:var(--azul);font-weight:900;font-size:.85rem;margin-top:2px;
}
.seccion--azul .duo p{color:#d7e7fb}

/* ---------- Homenaje al tendero (fondo hiperrealista) ---------- */
.homenaje{position:relative;overflow:hidden;background:var(--crema-2)}
.homenaje__bg{position:absolute;left:0;top:0;bottom:0;width:48%}
.homenaje__bg img{
  width:100%;height:100%;object-fit:cover;object-position:center 18%;
}
.homenaje__bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(94deg,rgba(255,243,217,0) 0%,rgba(255,243,217,.04) 52%,rgba(255,243,217,.72) 80%,#FFF3D9 96%);
}
.homenaje__in{position:relative;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);min-height:640px;align-items:center;padding-block:74px}
.homenaje__txt{grid-column:2}
@media (max-width:980px){
  .homenaje__in{grid-template-columns:1fr;min-height:0}
  .homenaje__txt{grid-column:1}
  .homenaje__bg{width:100%}
  .homenaje__bg img{object-position:center 12%}
  .homenaje__bg::after{background:linear-gradient(180deg,rgba(255,243,217,.42) 0%,rgba(255,243,217,.9) 38%,#FFF3D9 55%)}
}

/* ---------- Pasillos del mercado ---------- */
.pasillo{margin-top:46px}
.pasillo__head{
  display:flex;align-items:center;gap:16px;background:var(--pas-color,#004C93);
  border-radius:18px;padding:16px 24px;color:#fff;box-shadow:var(--sombra);
  position:relative;overflow:hidden;
}
.pasillo__head::after{
  content:'';position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;
  background:rgba(255,255,255,.14);
}
.pasillo__emoji{
  width:54px;height:54px;border-radius:14px;background:rgba(255,255,255,.2);
  display:grid;place-items:center;font-size:1.8rem;flex:none;
}
.pasillo__head h2{color:#fff;font-size:1.35rem;margin:0}
.pasillo__head small{display:block;color:#ffffffcc;font-weight:700;font-size:.8rem}
.pasillo__num{
  margin-left:auto;background:var(--amarillo);color:var(--azul);font-family:var(--font-title);
  font-weight:700;border-radius:12px;padding:8px 14px;font-size:.85rem;flex:none;rotate:2deg;
  box-shadow:0 3px 0 rgba(0,0,0,.2);
}

/* ---------- Medios de pago y seguridad (footer) ---------- */
.paychips{display:flex;flex-wrap:wrap;gap:7px}
.paychip{
  background:#fff;border-radius:8px;padding:5px 8px;display:inline-flex;align-items:center;min-height:32px;
}
.paychip img{height:20px;width:auto;display:block}
.paychip--txt{font-size:.72rem;font-weight:800;color:var(--azul)}
.segchips{display:grid;gap:7px;margin-top:14px}
.segchips span{display:flex;align-items:center;font-size:.78rem;color:#cfe0f4;font-weight:700}

/* ---------- Banner de cookies ---------- */
.cookies-banner{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:96;max-width:540px;margin:0 auto;
  background:var(--azul-noche);color:#e6f0fb;border:2px solid var(--amarillo);border-radius:16px;
  padding:16px 18px;box-shadow:var(--sombra-2);display:none;gap:12px;flex-wrap:wrap;align-items:center;
  font-size:.85rem;
}
.cookies-banner.on{display:flex}
.cookies-banner a{color:var(--amarillo);text-decoration:underline}
.cookies-banner button{
  background:var(--amarillo);color:var(--azul);font-weight:900;border-radius:99px;padding:9px 18px;
  font-size:.85rem;margin-left:auto;
}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px}
.stat{
  background:rgba(255,255,255,.08);border:2px solid rgba(255,211,0,.4);
  border-radius:var(--radio);padding:26px 20px;text-align:center;
}
.stat b{font-family:var(--font-title);font-size:2.6rem;color:var(--amarillo);display:block;line-height:1}
.stat span{font-size:.9rem;color:#d7e7fb;display:block;margin-top:10px;font-weight:600}
.stat small{display:block;color:#9db9d8;font-size:.72rem;margin-top:8px}

/* ---------- Testimonios ---------- */
.testis{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.testi{
  background:#fff;border-radius:var(--radio);padding:26px;border:2px solid var(--borde);
  display:flex;flex-direction:column;gap:14px;box-shadow:var(--sombra);
}
.testi__stars{color:var(--amarillo);font-size:1.05rem;letter-spacing:2px}
.testi p{font-size:.97rem;color:var(--tinta);font-style:italic}
.testi__quien{display:flex;align-items:center;gap:12px;margin-top:auto}
.testi__quien img{width:52px;height:52px;border-radius:50%;object-fit:cover;border:3px solid var(--amarillo)}
.testi__quien b{display:block;color:var(--azul);font-size:.95rem}
.testi__quien small{color:var(--tinta-suave);font-size:.8rem}

/* ---------- Geo / cobertura ---------- */
.geo-box{
  background:#fff;border-radius:24px;padding:34px;box-shadow:var(--sombra-2);
  border:3px solid var(--amarillo);max-width:640px;margin:40px auto 0;
}
.geo-box h3{font-size:1.35rem;margin-bottom:6px}
.geo-box .fila{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}
.geo-box input,.geo-box select{
  flex:1;min-width:180px;padding:13px 16px;border:2px solid var(--borde);border-radius:12px;
  font-family:inherit;font-size:1rem;background:var(--crema);
}
.geo-res{margin-top:20px;display:none;gap:14px;align-items:center;background:var(--crema-2);
  border-radius:16px;padding:18px;border:2px dashed var(--naranja)}
.geo-res.on{display:flex}
.geo-res__ico{font-size:2rem}
.geo-res b{color:var(--azul)}
.geo-res small{color:var(--tinta-suave);display:block}

/* ---------- Franquicia / tenderos banda ---------- */
.banda-tendero{
  background:linear-gradient(100deg,var(--rojo),#a3051f);border-radius:26px;color:#fff;
  padding:0;overflow:hidden;display:grid;grid-template-columns:1fr .9fr;align-items:stretch;
  box-shadow:var(--sombra-2);
}
.banda-tendero__txt{padding:46px}
.banda-tendero h2{color:#fff}
.banda-tendero p{color:#ffe3e9;margin:14px 0 24px;font-size:1.05rem}
.banda-tendero img{width:100%;height:100%;object-fit:cover;min-height:320px}
/* El panel de la foto: degradado suave que termina en el mismo tono en el que
   se desvanece la imagen, para que no se vea un corte ni un borde duro. */
.banda-tendero__img{
  background:radial-gradient(120% 90% at 50% 15%, #ffffff 0%, #fff4f6 55%, #ffe4e9 100%);
  display:grid;place-items:end center;padding:22px 18px 0;position:relative;overflow:hidden;
}
.banda-tendero__img img{
  width:auto;max-width:100%;max-height:440px;object-fit:contain;min-height:0;height:auto;
  filter:drop-shadow(0 14px 26px rgba(120,0,20,.18));
}

/* ---------- Omnicanal ---------- */
.canales{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:44px}
.canal{
  background:#fff;border:2px solid var(--borde);border-radius:var(--radio);
  padding:24px 14px;text-align:center;transition:transform .18s,border-color .18s;
}
.canal:hover{transform:translateY(-4px);border-color:var(--cian)}
.canal__ico{width:58px;height:58px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;font-size:1.7rem}
.canal b{color:var(--azul);font-size:.95rem;display:block}
.canal small{color:var(--tinta-suave);font-size:.78rem}

/* ---------- FAQ ---------- */
.faqs{max-width:820px;margin:40px auto 0;display:grid;gap:14px}
details.faq{
  background:#fff;border:2px solid var(--borde);border-radius:16px;padding:20px 24px;
}
details.faq[open]{border-color:var(--amarillo);box-shadow:var(--sombra)}
details.faq summary{
  font-family:var(--font-title);font-weight:700;color:var(--azul);cursor:pointer;font-size:1.05rem;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;
}
details.faq summary::after{content:'+';font-size:1.5rem;color:var(--rojo);flex:none}
details.faq[open] summary::after{content:'–'}
details.faq p{margin-top:12px;color:var(--tinta-suave);font-size:.98rem}

/* ---------- Footer ---------- */
.footer{background:var(--azul-noche);color:#cfe0f4;margin-top:0}
.footer__grid{
  max-width:var(--ancho);margin:0 auto;padding:56px 22px 30px;
  display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:38px;
}
.footer__logo img{height:64px;width:auto;margin-bottom:16px}
.footer p{font-size:.9rem}
.footer h4{color:var(--amarillo);font-size:1rem;margin-bottom:16px;letter-spacing:.04em}
.footer ul{display:grid;gap:9px}
.footer a{color:#cfe0f4;font-size:.92rem}
.footer a:hover{color:var(--amarillo)}
.footer__social{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.footer__social a{
  width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.1);
  display:grid;place-items:center;transition:background .18s;
}
.footer__social a:hover{background:var(--rojo)}
.footer__social svg{width:18px;height:18px;fill:#fff}
.footer__bajo{
  border-top:1px solid rgba(255,255,255,.14);padding:18px 22px;text-align:center;
  font-size:.8rem;color:#8fa9c9;
}
.footer__bajo a{color:#8fa9c9;text-decoration:underline}

/* ---------- WhatsApp FAB ---------- */
.wa-fab{
  position:fixed;right:22px;bottom:22px;z-index:70;width:62px;height:62px;border-radius:50%;
  background:var(--verde-wa);display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.3);
  transition:transform .18s;
}
.wa-fab:hover{transform:scale(1.1)}
.wa-fab svg{width:32px;height:32px;fill:#fff}

/* ---------- Carrito drawer ---------- */
.velo{
  position:fixed;inset:0;background:rgba(2,25,50,.55);z-index:80;opacity:0;pointer-events:none;
  transition:opacity .25s;backdrop-filter:blur(2px);
}
.velo.on{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(430px,100vw);background:var(--crema);z-index:90;
  transform:translateX(105%);transition:transform .3s cubic-bezier(.2,.8,.25,1);
  display:flex;flex-direction:column;box-shadow:-12px 0 40px rgba(0,0,0,.25);
}
.drawer.on{transform:none}
.drawer__top{
  background:var(--azul);color:#fff;padding:18px 22px;display:flex;align-items:center;gap:12px;
}
.drawer__top h3{color:#fff;font-size:1.15rem}
.drawer__top .script{color:var(--amarillo)}
.drawer__cerrar{margin-left:auto;color:#fff;font-size:1.6rem;line-height:1;padding:4px 8px}
.drawer__items{flex:1;overflow-y:auto;padding:18px 22px;display:grid;gap:14px;align-content:start}
.dr-item{
  background:#fff;border-radius:14px;padding:12px;display:grid;grid-template-columns:56px 1fr auto;
  gap:12px;align-items:center;border:2px solid var(--borde);
}
.dr-item img{width:56px;height:56px;object-fit:cover;border-radius:10px}
.dr-item b{font-size:.9rem;color:var(--tinta);display:block;line-height:1.25}
.dr-item small{color:var(--tinta-suave);font-size:.78rem}
.dr-item__precio{font-weight:900;color:var(--azul);font-size:.92rem;white-space:nowrap}
.dr-item__qty{display:flex;align-items:center;gap:8px;margin-top:6px}
.dr-item__qty button{
  width:26px;height:26px;border-radius:8px;background:var(--crema-2);font-weight:900;color:var(--azul);
  border:1px solid var(--borde);
}
.dr-item__quitar{color:var(--rojo);font-size:.75rem;font-weight:800;text-decoration:underline}
.drawer__vacio{text-align:center;color:var(--tinta-suave);padding:44px 20px}
.drawer__vacio span{font-size:3rem;display:block;margin-bottom:12px}
.drawer__pie{background:#fff;border-top:3px solid var(--amarillo);padding:18px 22px;display:grid;gap:12px}
.drawer__total{display:flex;justify-content:space-between;font-family:var(--font-title);font-weight:700;font-size:1.2rem;color:var(--azul)}
.drawer__nota{font-size:.78rem;color:var(--tinta-suave);text-align:center}
.remercado{
  display:flex;gap:10px;align-items:flex-start;background:var(--crema-2);border-radius:12px;
  padding:12px;border:2px dashed var(--cian);font-size:.85rem;
}
.remercado input{margin-top:3px;accent-color:var(--azul);width:17px;height:17px}
.remercado b{color:var(--azul)}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:96px;transform:translate(-50%,20px);z-index:95;
  background:var(--azul);color:#fff;font-weight:800;padding:13px 22px;border-radius:99px;
  box-shadow:var(--sombra-2);opacity:0;pointer-events:none;transition:all .3s;font-size:.92rem;
  border:2px solid var(--amarillo);text-align:center;max-width:90vw;
}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- Formularios ---------- */
.form{display:grid;gap:14px;margin-top:24px}
.form label{font-weight:800;font-size:.88rem;color:var(--azul)}
.form input,.form select,.form textarea{
  width:100%;padding:13px 16px;border:2px solid var(--borde);border-radius:12px;
  font-family:inherit;font-size:1rem;background:#fff;
}
.form input:focus,.form select:focus,.form textarea:focus{outline:3px solid rgba(23,170,200,.35);border-color:var(--cian)}
.form .fila2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.checks{display:flex;gap:10px;flex-wrap:wrap}
.check-pill{position:relative}
.check-pill input{position:absolute;opacity:0;inset:0;cursor:pointer}
.check-pill span{
  display:inline-block;border:2px solid var(--borde);border-radius:99px;padding:8px 16px;
  font-weight:800;font-size:.85rem;color:var(--tinta-suave);background:#fff;transition:all .15s;
}
.check-pill input:checked + span{background:var(--azul);color:#fff;border-color:var(--azul)}

/* ---------- Página producto ---------- */
.ficha{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:start;margin-top:30px}
.ficha__foto{position:relative;background:#fff;border-radius:26px;overflow:hidden;border:2px solid var(--borde)}
.ficha__foto img{width:100%;height:460px;object-fit:cover}
.ficha__marca{
  position:absolute;left:16px;top:16px;background:var(--azul);color:var(--amarillo);
  font-family:var(--font-brand);font-style:italic;font-size:1.15rem;padding:5px 16px 7px;border-radius:99px;
}
.ficha h1{font-size:2rem}
.ficha__precio{font-family:var(--font-title);font-weight:700;font-size:2.2rem;color:var(--azul);margin:16px 0 4px}
.ficha__precio small{font-size:1rem;color:var(--tinta-suave)}
.ficha__desc{color:var(--tinta-suave);margin-top:14px}
.ficha .prod__pres{margin-top:18px}
.ficha .pres{font-size:.9rem;padding:8px 16px}
.ficha__acciones{display:grid;gap:12px;margin-top:26px;max-width:380px}
.migas{font-size:.85rem;color:var(--tinta-suave);margin-top:26px}
.migas a{font-weight:800}

/* ---------- Filtros catálogo ---------- */
.filtros{
  display:flex;gap:10px;flex-wrap:wrap;margin-top:30px;position:sticky;top:76px;z-index:40;
  background:var(--crema);padding:12px 0;
}
.filtros input[type=search]{
  flex:1;min-width:220px;padding:12px 18px;border:2px solid var(--borde);border-radius:99px;
  font-family:inherit;font-size:.98rem;background:#fff;
}
.fchip{
  border:2px solid var(--borde);background:#fff;border-radius:99px;padding:10px 18px;
  font-weight:800;font-size:.88rem;color:var(--tinta-suave);transition:all .15s;
}
.fchip.sel{background:var(--rojo);border-color:var(--rojo);color:#fff}

/* ---------- Página legal ---------- */
.legal{max-width:820px;margin:0 auto}
.legal h2{margin-top:36px;font-size:1.3rem}
.legal p,.legal li{color:var(--tinta-suave);font-size:.95rem;margin-top:10px}
.legal ul{list-style:disc;padding-left:22px}

/* ---------- Animaciones reveal ---------- */
.rev{opacity:0;transform:translateY(26px);transition:opacity .6s,transform .6s}
.js .rev.vis{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rev{opacity:1;transform:none;transition:none}}

/* ---------- Responsive ---------- */
@media (max-width:1020px){
  .hero__in{grid-template-columns:1fr;padding:54px 22px 64px;min-height:0}
  .hero__card{justify-self:start;margin-top:10px}
  .pasos,
  .pasos--3{grid-template-columns:1fr 1fr}
  .pasos--5{grid-template-columns:repeat(3,1fr)}
  .stats{grid-template-columns:1fr 1fr}
  .canales{grid-template-columns:repeat(3,1fr)}
  .testis{grid-template-columns:1fr 1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;background:var(--azul);
    flex-direction:column;align-items:stretch;padding:14px 22px 22px;gap:8px;
    box-shadow:0 18px 30px rgba(0,20,50,.35);
  }
  .nav.abierta{display:flex}
  .nav a{padding:13px 16px;font-size:1.05rem}
  .hamburguesa{display:flex}
  .btn-carrito span.txt{display:none}
  .duo,.duo--rev{grid-template-columns:1fr}
  .duo--rev .duo__foto{order:0}
  .duo__foto img{height:300px}
  .banda-tendero{grid-template-columns:1fr}
  .banda-tendero__txt{padding:30px 24px}
  .ficha{grid-template-columns:1fr;gap:28px}
  .ficha__foto img{height:320px}
  .testis{grid-template-columns:1fr}
  .pasos,
  .pasos--3{grid-template-columns:1fr}
  /* Los 5 valores son tarjetas cortas: en celular caben de a dos y evitan
     una columna larguísima de scroll. */
  .pasos--5{grid-template-columns:1fr 1fr;gap:12px}
  .pasos--5 .paso{padding:18px 14px}
  .pasos--5 .paso h3{font-size:1.05rem}
  .pasos--5 .paso p{font-size:.86rem}
  .stats{grid-template-columns:1fr 1fr}
  .canales{grid-template-columns:1fr 1fr}
  .footer__grid{grid-template-columns:1fr}
  .form .fila2{grid-template-columns:1fr}
  .filtros{top:66px}
  .header__logo img{height:44px}
  .hero h1{font-size:1.7rem}
  .hero__sub{font-size:1.05rem}
}

/* ---------- Sección medios de pago (home) ---------- */
.pagos-grande{
  display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:38px;
}
.pago-card{
  background:#fff;border:2px solid var(--borde);border-radius:16px;
  padding:16px 26px;display:flex;align-items:center;justify-content:center;
  min-width:150px;height:84px;transition:transform .18s,box-shadow .18s;
}
.pago-card:hover{transform:translateY(-4px);box-shadow:var(--sombra)}
.pago-card img{max-height:46px;max-width:150px;width:auto;height:auto}
.pagos-seguridad{
  display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:center;margin-top:30px;
}
.pagos-seguridad span{
  display:inline-flex;align-items:center;font-weight:800;font-size:.86rem;color:var(--tinta-suave);
}
.ico--seg2{width:17px;height:17px;margin-right:6px;color:var(--azul)}

/* ---------- Aviso +18 ---------- */
.aviso18{
  margin-top:22px;background:#fff4f5;border:2px dashed var(--rojo);border-radius:14px;
  padding:14px 16px;font-size:.82rem;color:#8c1a2b;font-weight:600;max-width:480px;
}
@media (max-width:760px){
  .pago-card{min-width:120px;height:66px;padding:10px 16px}
  .pago-card img{max-height:34px;max-width:110px}
}

/* ---------- Resumen de costos del carrito ---------- */
.drawer__resumen{display:grid;gap:6px;padding-bottom:4px;border-bottom:1px dashed var(--borde)}
.dr-fila{display:flex;justify-content:space-between;align-items:baseline;font-size:.92rem;color:var(--tinta-suave)}
.dr-fila b{color:var(--tinta);font-weight:800}
.dr-fila small{display:block;font-size:.72rem;color:var(--tinta-suave);font-weight:600}
.dr-fila b.gratis{color:#1a9c54;font-weight:900;letter-spacing:.02em}

/* ---------- Barra de herramientas del mercado (orden y filtros) ---------- */
.herramientas{
  display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;
  background:#fff;border:2px solid var(--borde);border-radius:16px;
  padding:14px 18px;margin-top:14px;
}
.herr{display:flex;align-items:center;gap:9px;font-size:.86rem;font-weight:800;color:var(--tinta-suave)}
.herr select{
  border:2px solid var(--borde);border-radius:10px;padding:8px 12px;font-family:inherit;
  font-size:.88rem;font-weight:700;color:var(--azul);background:var(--crema);cursor:pointer;
}
.herr input[type=range]{accent-color:var(--rojo);width:130px;cursor:pointer}
.herr b{color:var(--azul);font-size:.86rem;min-width:78px}
.herr-check{margin:0}
.herr-check span{padding:7px 14px;font-size:.82rem}
.herr-cont{margin-left:auto;font-size:.85rem;font-weight:800;color:var(--rojo)}
#limpiar-filtros{padding:8px 14px;font-size:.82rem}
@media (max-width:760px){
  .herramientas{gap:10px 12px;padding:12px 14px}
  .herr{font-size:.8rem}
  .herr input[type=range]{width:100px}
  .herr-cont{margin-left:0;width:100%}
}