/* ============================================================
   vana shop — estilos del storefront
   Tokens tomados del vana Design System (colors_and_type.css).
   Sofia Pro es la tipografía de marca y se sirve como webfont
   (subset latino → woff2, ~19 KB por peso), para que mobile se vea
   igual que desktop.
   ============================================================ */
/* ---------- Sofia Pro (subset latino, woff2) ----------
   Se sirven 3 pesos: 400 texto, 700 labels/botones, 900 display/precios.
   font-display:swap → el texto se ve de inmediato con el fallback y cambia
   al llegar la fuente, sin bloquear el render en mobile. */
@font-face{font-family:"Sofia Pro"; src:url("../fonts/SofiaPro-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap}
@font-face{font-family:"Sofia Pro"; src:url("../fonts/SofiaPro-Bold.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap}
@font-face{font-family:"Sofia Pro"; src:url("../fonts/SofiaPro-Black.woff2") format("woff2");
  font-weight:900; font-style:normal; font-display:swap}

:root{
  /* neutral */
  --n0:#FFFFFF; --n10:#F6F8FB; --n30:#E2E6E9; --n50:#C6CCD3;
  --n60:#9BA6B1; --n70:#708090; --n80:#56636E; --n100:#364049;
  --line:#EFF3F5;

  /* brand/turquesa = producto vana pay */
  --teal-25:#DAF3F9; --teal:#2AA0C6; --teal-120:#1F7E9E; --teal-140:#155B73;
  --teal-soft:rgba(42,160,198,.10);

  /* brand/blue = vana global */
  --blue-25:#E7ECFE; --blue:#597AF6; --blue-120:#4863D8; --blue-bg:#EEF1FE;

  /* contextuales */
  --amber-20:#FCE7C2; --amber:#FFB335;
  --green-25:#D7F0E0; --green:#6FCF97; --green-140:#2E8B57;
  --err:#E1292B;
  --wa:#25D366; --wa-600:#1FB959;

  /* radios */
  --r-sm:8px; --r-md:10px; --r-lg:16px; --r-xl:24px; --r-pill:999px;

  /* elevación */
  --sh-card:0px 1px 2px rgba(54,64,73,.10), 0px 1px 4px rgba(42,160,198,.10);
  --sh-raised:0px 2px 8px rgba(54,64,73,.08), 0px 8px 24px rgba(42,160,198,.12);
  --sh-teal:0 6px 12px rgba(42,160,198,.32);

  --font-sans:"Sofia Pro",-apple-system,"Avenir Next","Helvetica Neue",Arial,sans-serif;
  --maxw:1180px;
  --hdr-h:72px;
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--n10); color:var(--n100); font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; line-height:1.45}
a{color:var(--teal); text-decoration:none}
a:hover{color:var(--teal-120)}
img{display:block; max-width:100%}
button,input,select{font-family:inherit}
h1,h2,h3{color:var(--n100); letter-spacing:-.02em; margin:0}
.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:20px}
.ico{width:1em; height:1em; fill:currentColor; flex:none; display:block}

/* ---------- Header ---------- */
.hdr{position:sticky; top:0; z-index:40; background:rgba(255,255,255,.92);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex; align-items:center; gap:16px; padding-top:14px; padding-bottom:14px}
.brand{display:flex; align-items:baseline; gap:6px; flex:none}
.brand img{height:20px}
.brand span{font-size:19px; font-weight:400; color:var(--n70); letter-spacing:-.01em}
.hdr-cta{margin-left:auto; flex:none; display:inline-flex; align-items:center; gap:8px;
  height:44px; padding:0 18px; border:0; border-radius:var(--r-pill); background:var(--teal);
  color:#fff; font-size:15px; font-weight:700; cursor:pointer; box-shadow:var(--sh-teal);
  transition:background .15s}
.hdr-cta:hover{background:var(--teal-120); color:#fff}
.hdr-cta .ico{font-size:19px}

/* ---------- Hero ---------- */
.hero{background:var(--n0); border-bottom:1px solid var(--line)}
.hero .wrap{padding-top:clamp(28px,4vw,60px); padding-bottom:clamp(28px,4vw,60px);
  display:flex; flex-wrap:wrap; gap:44px; align-items:center}
.hero-copy{flex:1 1 400px; min-width:300px}
.badge{display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:var(--r-pill);
  background:var(--green-25); color:var(--green-140); font-size:13px; font-weight:700; margin-bottom:20px}
.badge .ico{font-size:16px}
.hero h1{font-size:clamp(30px,4.4vw,52px); line-height:1.02; letter-spacing:-.03em; font-weight:900;
  margin-bottom:16px; text-wrap:pretty}
.hero h1 em{font-style:normal; color:var(--teal)}
.hero-sub{margin:0 0 22px; font-size:clamp(16px,1.9vw,18px); line-height:1.45; color:var(--n70);
  max-width:46ch; text-wrap:pretty}
/* "3 o 5 paguitos" es el dato que diferencia esto de cualquier catálogo:
   se resalta para que se lea de un vistazo sin leer la frase completa */
.hero-sub em{font-style:normal; font-weight:700; color:var(--n80)}

/* buscar / pedir */
.askrow{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:12px}
.askfield{flex:1 1 300px; min-width:220px; display:flex; align-items:center; gap:10px;
  background:var(--n10); border:1px solid var(--n30); border-radius:12px; padding:12px 16px;
  transition:border-color .15s, box-shadow .15s}
.askfield:focus-within{border-color:var(--teal); box-shadow:0 0 0 4px var(--teal-soft)}
.askfield .ico{font-size:20px; color:var(--n60)}
.askfield input{flex:1; min-width:0; border:0; background:transparent; outline:none;
  font-size:16px; color:var(--n100)}
.askfield input::placeholder{color:var(--n60); font-weight:400; opacity:1}
.askbtn{flex:none; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  height:48px; padding:0 22px; border:0; border-radius:12px; background:var(--teal); color:#fff;
  font-size:16px; font-weight:700; cursor:pointer; box-shadow:var(--sh-teal); transition:background .15s}
.askbtn:hover{background:var(--teal-120); color:#fff}
.askbtn .ico{font-size:19px}
.pops{display:flex; gap:8px; margin-bottom:20px; align-items:center; flex-wrap:wrap}
.pops-l{font-size:13px; color:var(--n60); padding:6px 0}
.pop{flex:none; border:1px solid var(--n30); background:var(--n0); border-radius:var(--r-pill);
  padding:7px 14px; font-size:13px; font-weight:700; color:var(--n80); cursor:pointer;
  white-space:nowrap; transition:border-color .15s, color .15s}
.pop:hover{border-color:var(--teal); color:var(--teal)}
.hero-jump{display:inline-flex; align-items:center; gap:7px; font-size:15px; font-weight:700; color:var(--teal)}
.hero-jump .ico{font-size:18px}

/* "¿Cómo funciona?" — link discreto que abre el popup. La explicación existe,
   pero deja de ocupar espacio en la primera pantalla. */
.howlink{display:none; border:0; background:transparent; padding:0; cursor:pointer;
  font-family:inherit; font-size:13.5px; font-weight:400; color:var(--n70);
  text-decoration:underline; text-decoration-color:var(--n50); text-underline-offset:3px}
.howlink:hover{color:var(--teal-120); text-decoration-color:var(--teal)}

/* ---------- Popup "cómo funciona" ---------- */
.modal{position:fixed; inset:0; z-index:70; background:rgba(54,64,73,.46);
  display:flex; align-items:center; justify-content:center; padding:20px;
  animation:fadeIn .16s ease}
.modal[hidden]{display:none}
.modal-card{width:100%; max-width:420px; background:var(--n0); border-radius:var(--r-xl);
  padding:24px; display:flex; flex-direction:column; gap:22px;
  box-shadow:0 20px 50px rgba(54,64,73,.28); animation:sheetUp .2s ease}
.modal-head{display:flex; align-items:center; justify-content:space-between; gap:12px}
.modal-head h3{font-size:21px; font-weight:700}
.howsteps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:18px}
.howsteps li{display:flex; align-items:flex-start; gap:13px}
.howsteps b{width:26px; height:26px; flex:none; border-radius:var(--r-pill);
  background:var(--teal-25); color:var(--teal-120); display:inline-flex;
  align-items:center; justify-content:center; font-size:13px; font-weight:700}
.howsteps div{display:flex; flex-direction:column; gap:3px}
.howsteps strong{font-size:15px; font-weight:700; color:var(--n100)}
.howsteps span{font-size:13.5px; line-height:1.45; color:var(--n70)}

/* mockup de chat */
.chat{flex:1 1 340px; min-width:290px; display:flex; justify-content:center}
.chat-inner{width:100%; max-width:380px; background:var(--n10); border:1px solid var(--n30);
  border-radius:var(--r-xl); padding:18px; display:flex; flex-direction:column; gap:12px}
.chat-head{display:flex; align-items:center; gap:10px; padding-bottom:12px; border-bottom:1px solid var(--n30)}
.chat-av{width:34px; height:34px; border-radius:var(--r-pill); background:var(--teal); color:#fff;
  display:inline-flex; align-items:center; justify-content:center; flex:none}
.chat-av img{height:11px}
.chat-name{font-size:14px; font-weight:700}
.chat-on{font-size:12px; color:var(--green); font-weight:700}
.b-out{align-self:flex-end; max-width:82%; background:var(--teal); color:#fff;
  border-radius:16px 16px 4px 16px; padding:11px 14px; font-size:14px; line-height:1.4}
.b-in{align-self:flex-start; max-width:88%; background:var(--n0); border-radius:16px 16px 16px 4px;
  padding:11px 14px; font-size:14px; line-height:1.4; box-shadow:0px 1px 2px rgba(54,64,73,.1)}
.b-plan{align-self:flex-start; max-width:88%; background:var(--n0); border-radius:var(--r-lg);
  padding:14px; box-shadow:0px 1px 2px rgba(54,64,73,.1); width:100%}
.b-plan-t{font-size:12px; font-weight:700; color:var(--n70); margin-bottom:8px}
.b-plan-r{display:flex; justify-content:space-between; align-items:baseline; font-size:14px; color:var(--n70)}
.b-plan-r b{font-weight:900; font-size:20px; color:var(--n100)}
.b-bar{height:6px; border-radius:var(--r-pill); background:var(--blue-25); overflow:hidden; margin-top:10px}
.b-bar i{display:block; height:100%; background:var(--blue)}
.b-plan-n{font-size:12px; color:var(--n60); margin-top:8px}

/* ---------- Botones de descubrimiento (mobile) ---------- */
.discover{display:none; gap:9px; padding-top:18px}
.disc{flex:1; display:flex; align-items:center; gap:8px; padding:12px 13px; border:1px solid var(--n30);
  background:var(--n0); border-radius:14px; cursor:pointer; box-shadow:var(--sh-card);
  font-size:13.5px; font-weight:700; color:var(--n100); transition:border-color .15s, background .15s}
.disc.on{border-color:var(--teal); background:var(--teal-25)}
.disc-e{font-size:16px; line-height:1}
.disc-t{flex:1; text-align:left}
.disc-n{font-size:11.5px; font-weight:700; color:var(--n70); background:var(--n10);
  border-radius:var(--r-pill); padding:2px 7px}
.disc.on .disc-n{background:rgba(255,255,255,.7); color:var(--teal-140)}
.disc-c{font-size:17px; color:var(--n60); transition:transform .18s}
.disc.on .disc-c{transform:rotate(180deg); color:var(--teal-120)}

/* ---------- Secciones ---------- */
.section{padding-top:clamp(26px,3.4vw,44px); padding-bottom:8px}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin-bottom:18px}
.section-head h2{font-size:clamp(21px,2.6vw,28px); font-weight:700}
.section-head .sub{font-size:15px; color:var(--n70); margin-top:4px; display:block}
.see-all{font-size:15px; font-weight:700}

/* categorías */
.cats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px}
.cat{display:flex; flex-direction:column; gap:12px; align-items:flex-start; padding:18px;
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--n0); cursor:pointer;
  text-align:left; box-shadow:var(--sh-card); transition:border-color .15s, transform .1s}
.cat:hover{border-color:var(--teal); transform:translateY(-1px)}
.cat-ico{border-radius:12px; padding:10px; display:inline-flex}
.cat-ico .ico{font-size:28px}
.cat-n{font-size:16px; font-weight:700; color:var(--n100)}
.cat-c{font-size:13px; color:var(--n60)}

/* tiendas */
.merchants{display:flex; gap:12px; overflow-x:auto; padding-bottom:6px;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch}
.merch{flex:none; width:150px; scroll-snap-align:start; display:flex; flex-direction:column;
  align-items:center; gap:10px; padding:18px 14px; border:1px solid var(--line);
  border-radius:var(--r-lg); background:var(--n0); cursor:pointer; box-shadow:var(--sh-card);
  transition:border-color .15s}
.merch:hover{border-color:var(--teal)}
.merch-logo{width:52px; height:52px; border-radius:14px; background:var(--n10);
  display:flex; align-items:center; justify-content:center; padding:8px; flex:none}
.merch-logo img{max-height:100%; width:auto; object-fit:contain}
.merch-mono{font-size:19px; font-weight:900; letter-spacing:-.02em; color:var(--teal-120)}
.merch-n{font-size:15px; font-weight:700; color:var(--n100); text-align:center}
.merch-c{font-size:12px; color:var(--n60)}

/* ---------- Catálogo ---------- */
.filters{position:sticky; top:var(--hdr-h); z-index:20; background:rgba(246,248,251,.94);
  backdrop-filter:blur(8px); padding:10px 0 14px; margin-bottom:6px;
  display:flex; flex-direction:column; gap:10px}
.filterbar{display:none; align-items:center; gap:10px}
.fbtn{display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 14px;
  border:1px solid var(--n30); background:var(--n0); border-radius:var(--r-pill);
  font-size:13.5px; font-weight:700; color:var(--n100); cursor:pointer; flex:none;
  box-shadow:var(--sh-card); transition:border-color .15s, background .15s}
.fbtn .ico{font-size:16px; color:var(--n70)}
.fbtn.on{background:var(--teal); border-color:var(--teal); color:#fff}
.fbtn.on .ico{color:#fff}
.fbtn-n{min-width:18px; height:18px; border-radius:var(--r-pill); background:var(--teal);
  color:#fff; font-size:11px; font-weight:700; display:inline-flex; align-items:center;
  justify-content:center; padding:0 5px}
.fbtn.on .fbtn-n{background:rgba(255,255,255,.9); color:var(--teal-140)}
.fbtn-n[hidden]{display:none}
.fcount{font-size:13px; color:var(--n70); flex:1; text-align:right}
.chiprow{display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; align-items:center;
  -webkit-overflow-scrolling:touch}
.chiprow-l{flex:none; font-size:13px; color:var(--n60); font-weight:700; padding-right:2px}
.chip{flex:none; display:inline-flex; align-items:center; gap:7px; padding:9px 16px;
  border-radius:var(--r-pill); border:1px solid var(--n30); background:var(--n0); color:var(--n80);
  font-size:14px; font-weight:700; cursor:pointer; white-space:nowrap;
  transition:border-color .15s, background .15s, color .15s}
.chip:hover{border-color:var(--teal); color:var(--teal)}
.chip.on{background:var(--teal); border-color:var(--teal); color:#fff}
.chip img{height:15px; width:auto; border-radius:3px}
.chip-e{font-size:14px; line-height:1}
.chip.on img{filter:brightness(0) invert(1)}
.count{font-size:15px; color:var(--n70)}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px; padding:6px 0 20px}

/* card de producto — variante "tarjeta blanca" */
.card{display:flex; flex-direction:column; background:var(--n0); border-radius:var(--r-lg);
  border:1px solid var(--line); overflow:hidden; cursor:pointer; box-shadow:var(--sh-card);
  transition:border-color .15s, transform .1s, box-shadow .15s}
.card:hover{border-color:var(--n50); transform:translateY(-2px); box-shadow:var(--sh-raised)}
.card-img{position:relative; width:100%; aspect-ratio:4/3; flex:none; overflow:hidden;
  background:var(--n0); border-bottom:1px solid var(--line)}
.card-img img{position:absolute; inset:10px; margin:auto; max-width:calc(100% - 20px);
  max-height:calc(100% - 20px); width:auto; height:auto; object-fit:contain}
.card-badge{position:absolute; top:10px; left:10px; padding:4px 10px; border-radius:var(--r-pill);
  background:var(--amber); color:var(--n100); font-size:11px; font-weight:700}
.card-body{padding:14px 14px 16px; display:flex; flex-direction:column; gap:6px; flex:1}
.card-store{font-size:11px; font-weight:700; color:var(--n70); text-transform:uppercase;
  letter-spacing:.05em; display:flex; align-items:center; gap:6px}
.card-store img{height:13px; width:auto}
.card-name{font-size:15px; font-weight:700; line-height:1.3; color:var(--n100); min-height:0}
.card-name span{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden; line-clamp:3}
.cuota{display:flex; align-items:baseline; gap:6px; margin-top:auto; padding-top:4px}
.cuota b{font-size:21px; font-weight:900; letter-spacing:-.02em}
.cuota span{font-size:12px; color:var(--n70); font-weight:700}
.card-tot{font-size:12px; color:var(--n60)}
.card-tot s{margin-right:5px}

/* card destacada 2x2 — columna: título arriba, imagen al centro, precio abajo.
   Se evita position:absolute para que la foto no quede recortada ni deje huecos. */
.feat{grid-column:span 2; grid-row:span 2; border-radius:20px; background:var(--teal);
  padding:24px; display:flex; flex-direction:column; gap:14px; cursor:pointer; color:#fff;
  box-shadow:0 8px 24px rgba(42,160,198,.22); overflow:hidden;
  transition:transform .1s, box-shadow .15s}
.feat:hover{transform:translateY(-2px); box-shadow:0 12px 30px rgba(42,160,198,.3); color:#fff}
.feat-top{flex:none}
.feat-pill{display:inline-flex; padding:6px 12px; border-radius:var(--r-pill); background:var(--amber);
  color:var(--n100); font-size:12px; font-weight:700; margin-bottom:14px}
.feat-store{font-size:12px; font-weight:700; color:rgba(255,255,255,.75); text-transform:uppercase;
  letter-spacing:.05em; margin-bottom:6px}
.feat-name{font-size:clamp(19px,2.1vw,25px); font-weight:900; line-height:1.12; letter-spacing:-.02em;
  max-width:20ch; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.feat-img{flex:1; min-height:120px; display:flex; align-items:center; justify-content:center;
  background:var(--n0); border-radius:var(--r-lg); padding:14px; position:relative; overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.14)}
.feat-img img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain}
.feat-bot{flex:none; display:flex; flex-direction:column; gap:6px}
.feat-cuota{display:flex; align-items:baseline; gap:8px}
.feat-cuota b{font-size:clamp(26px,3.2vw,36px); font-weight:900; letter-spacing:-.02em}
.feat-cuota span{font-size:15px; color:rgba(255,255,255,.8); font-weight:700}
.feat-tot{font-size:14px; color:rgba(255,255,255,.78)}

/* paginación */
.pager{display:flex; align-items:center; justify-content:center; gap:7px; flex-wrap:wrap; padding:6px 0 34px}
.pager[hidden]{display:none}
.pg{min-width:42px; height:42px; padding:0 12px; border:1px solid var(--n30); background:var(--n0);
  color:var(--n80); border-radius:var(--r-md); font-size:15px; font-weight:700; cursor:pointer;
  transition:border-color .15s, color .15s, background .15s}
.pg:hover:not(:disabled):not(.on){border-color:var(--teal); color:var(--teal)}
.pg.on{background:var(--teal); border-color:var(--teal); color:#fff; cursor:default}
.pg:disabled{opacity:.38; cursor:not-allowed}
.pg-nav{display:inline-flex; align-items:center; justify-content:center; padding:0 10px}
.pg-nav .ico{font-size:18px}
.pg-gap{color:var(--n60); padding:0 2px; font-weight:700; align-self:center}

/* vacío */
.empty{grid-column:1/-1; text-align:center; padding:56px 20px}
.empty-ico{width:84px; height:84px; margin:0 auto 16px; border-radius:var(--r-pill);
  background:var(--teal-25); color:var(--teal-120); display:flex; align-items:center; justify-content:center}
.empty-ico .ico{font-size:40px}
.empty h3{font-size:20px; font-weight:700; margin-bottom:6px}
.empty p{margin:0 0 20px; font-size:15px; color:var(--n70)}

/* ---------- Botón WhatsApp ---------- */
.wabtn{display:inline-flex; align-items:center; justify-content:center; gap:9px; height:48px;
  padding:0 22px; border:0; border-radius:var(--r-pill); background:var(--wa); color:#fff;
  font-size:16px; font-weight:700; cursor:pointer; transition:background .15s}
.wabtn:hover{background:var(--wa-600); color:#fff}
.wabtn .ico{font-size:20px}

/* ---------- PDP ---------- */
.pdp-wrap{max-width:1000px; margin:0 auto; padding:24px 20px 60px}
.back{display:inline-flex; align-items:center; gap:7px; border:0; background:transparent;
  color:var(--n70); font-size:14px; font-weight:700; cursor:pointer; padding:8px 0; margin-bottom:14px}
.back .ico{font-size:18px}
.pdp{display:flex; flex-wrap:wrap; gap:32px}
.pdp-gal{flex:1 1 360px; min-width:280px}
.pdp-main{position:relative; aspect-ratio:1/1; border-radius:var(--r-xl); background:var(--n0);
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center; padding:22px}
.pdp-main img{max-width:100%; max-height:100%; width:auto; object-fit:contain}
.pdp-badge{position:absolute; top:16px; left:16px; padding:6px 13px; border-radius:var(--r-pill);
  background:var(--amber); color:var(--n100); font-size:12px; font-weight:700}
.thumbs{display:flex; gap:8px; margin-top:10px; overflow-x:auto}
.thumbs img{width:60px; height:60px; border-radius:10px; object-fit:contain; padding:5px;
  background:var(--n0); border:2px solid var(--line); cursor:pointer; flex:none}
.thumbs img.on{border-color:var(--teal)}
.pdp-info{flex:1 1 340px; min-width:280px; display:flex; flex-direction:column; gap:13px}
.pdp-eyebrow{font-size:12px; font-weight:700; color:var(--n70); text-transform:uppercase;
  letter-spacing:.05em; display:flex; align-items:center; gap:8px}
.pdp-eyebrow img{height:15px; width:auto}
.pdp-info h1{font-size:clamp(23px,3vw,30px); font-weight:700; line-height:1.2}
.pdp-disc{color:var(--err); font-weight:700; font-size:14px}
.pdp-cuota b{font-size:clamp(32px,4.4vw,40px); font-weight:900; letter-spacing:-.02em}
.pdp-cuota span{font-size:16px; color:var(--n70); font-weight:700}
.pdp-tot{font-size:14px; color:var(--n60); margin-top:2px}
.pdp-tot s{margin-right:6px}
.paybox{display:flex; align-items:flex-start; gap:10px; padding:14px; border-radius:14px;
  background:var(--blue-bg)}
.paybox .ico{font-size:20px; color:var(--blue); margin-top:1px}
.paybox p{margin:0; font-size:14px; line-height:1.45; color:var(--n100)}
.buy{height:54px; border:0; border-radius:var(--r-pill); background:var(--teal); color:#fff;
  font-size:17px; font-weight:700; cursor:pointer; box-shadow:var(--sh-teal); display:flex;
  align-items:center; justify-content:center; gap:9px; transition:background .15s}
.buy:hover{background:var(--teal-120); color:#fff}
.buy .ico{font-size:20px}
.link-btn{display:block; text-align:center; font-size:15px; font-weight:700; color:var(--teal);
  background:transparent; border:0; cursor:pointer; padding:6px}
.fineprint{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--n60)}
.fineprint .ico{font-size:16px}
.related{margin-top:48px}
.related h2{font-size:20px; font-weight:700; margin-bottom:16px}
.related .grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px}

/* ---------- Sheet de WhatsApp ---------- */
.scrim{position:fixed; inset:0; z-index:60; background:rgba(54,64,73,.42); display:none;
  align-items:flex-end; justify-content:center}
.scrim.open{display:flex; animation:fadeIn .18s ease}
.sheet{width:100%; max-width:520px; max-height:92vh; overflow:auto; background:var(--n0);
  border-radius:var(--r-xl) var(--r-xl) 0 0; padding:22px; animation:sheetUp .22s ease}
.sheet-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px}
.sheet-head h3{font-size:21px; font-weight:700}
.sheet-x{width:36px; height:36px; border:0; border-radius:var(--r-pill); background:var(--n10);
  color:var(--n80); cursor:pointer; display:flex; align-items:center; justify-content:center}
.sheet-x .ico{font-size:19px}
.sheet-lead{margin:0 0 18px; font-size:15px; color:var(--n70)}
.sheet-prev{background:var(--n10); border:1px solid var(--n30); border-radius:18px; padding:16px;
  display:flex; flex-direction:column; gap:12px; margin-bottom:18px}
.sheet-msg{align-self:flex-end; max-width:90%; background:var(--teal); color:#fff;
  border-radius:16px 16px 4px 16px; padding:12px 14px; font-size:14px; line-height:1.5; white-space:pre-line}
.sheet-reply{align-self:flex-start; display:flex; align-items:center; gap:8px; background:var(--n0);
  border-radius:16px 16px 16px 4px; padding:11px 14px; font-size:14px; color:var(--n70);
  box-shadow:0px 1px 2px rgba(54,64,73,.1)}
.sheet-reply .ico{font-size:17px; color:var(--green)}
.sheet-send{height:54px; border-radius:var(--r-pill); background:var(--wa); color:#fff; font-size:17px;
  font-weight:700; display:flex; align-items:center; justify-content:center; gap:10px}
.sheet-send:hover{background:var(--wa-600); color:#fff}
.sheet-send .ico{font-size:21px}
.sheet-fine{display:flex; align-items:center; justify-content:center; gap:8px; font-size:13px;
  color:var(--n60); margin-top:14px}
.sheet-fine .ico{font-size:16px}
@keyframes sheetUp{from{transform:translateY(24px); opacity:.6} to{transform:translateY(0); opacity:1}}
@keyframes fadeIn{from{opacity:0} to{opacity:1}}

/* ---------- Footer ---------- */
.footer{background:var(--n100); color:#fff; padding:clamp(34px,5vw,60px) 0 30px; margin-top:20px}
.footer .cols{display:flex; flex-wrap:wrap; gap:36px}
.f-brand{flex:1 1 300px; min-width:260px}
.f-logo{display:flex; align-items:baseline; gap:6px; margin-bottom:14px}
.f-logo img{height:20px}
.f-logo span{font-size:19px; color:rgba(255,255,255,.6)}
.f-about{margin:0 0 18px; font-size:15px; line-height:1.5; color:rgba(255,255,255,.72); max-width:40ch}
.footer .col{flex:0 1 160px}
.footer h4{font-size:14px; font-weight:700; margin:0 0 14px; color:#fff}
.footer ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.footer ul a{font-size:14px; color:rgba(255,255,255,.72)}
.footer ul a:hover{color:#fff}
.legal{max-width:var(--maxw); margin:30px auto 0; padding:20px 20px 0;
  border-top:1px solid rgba(255,255,255,.14); font-size:13px; line-height:1.5; color:rgba(255,255,255,.5);
  display:flex; align-items:center; gap:10px}
.legal img{height:15px; opacity:.5}

/* ---------- Mobile ---------- */
@media (max-width:860px){
  .feat{grid-column:span 2; grid-row:auto; padding:22px; min-height:340px}
  .feat-img{min-height:150px}
}
@media (max-width:640px){
  /* ============================================================
     MOBILE — 95% del tráfico. Se rehizo este bloque completo porque había
     reglas duplicadas peleándose (tres .hero h1, dos .hero .wrap, .askbtn
     definido dos veces), que es parte de por qué el espaciado se sentía
     apretado e impredecible.

     Escala vertical, aplicada con intención:
       8 · 12 · 16 · 24 · 32 · 40 · 48
     ============================================================ */
  :root{--hdr-h:64px}
  .wrap{padding-inline:18px}

  /* ---- Header ---- */
  .hdr .wrap{gap:10px; padding-top:12px; padding-bottom:12px}
  .brand img{height:17px}
  .brand span{font-size:16px}
  .hdr-cta{height:40px; padding:0 14px; font-size:0; gap:0}
  .hdr-cta .ico{font-size:21px}

  /* ---- Hero: titular + buscador + populares + link a "cómo funciona" ----
     El feedback fue que un usuario nuevo tenía demasiado que hacer. Se quitan
     badge, subpárrafo, link "explorar" y el mockup de chat (todos siguen en
     desktop). Los populares se quedan: son acción, no prosa, y son el único
     elemento visual del hero ahora que el mockup no está. Los pasos se fueron
     a un popup detrás de "¿Cómo funciona?". */
  .chat, .hero-jump, .badge{display:none}
  .hero .wrap{gap:0; padding-top:32px; padding-bottom:40px}
  .hero h1{font-size:clamp(28px,7.8vw,34px); line-height:1.08; margin-bottom:14px}
  /* El subtítulo vuelve en mobile: es el único lugar donde el hero dice que se
     puede pagar en paguitos, que es la razón para elegir vana shop */
  .hero-sub{display:block; font-size:15px; line-height:1.4; margin-bottom:28px}

  /* Fila scrolleable, sangrada al borde: sin label y sin wrap, para que lea
     como un carrusel de acciones y no como una lista de texto */
  .pops{display:flex; flex-wrap:nowrap; overflow-x:auto; gap:8px;
    margin:24px -18px 0; padding-inline:18px; -webkit-overflow-scrolling:touch;
    scrollbar-width:none}
  .pops::-webkit-scrollbar{display:none}
  .pops-l{display:none}
  .howlink{display:inline-block; margin-top:28px}

  /* El botón de WhatsApp vive dentro del buscador: un control, no dos bloques */
  .askrow{position:relative; margin-bottom:0}
  .askfield{padding-top:16px; padding-bottom:16px; padding-right:58px; border-radius:14px}
  .askbtn{position:absolute; right:6px; top:50%; transform:translateY(-50%);
    width:44px; height:44px; padding:0; border-radius:11px; box-shadow:none; flex:none}
  .askbtn span{display:none}
  .askbtn .ico{font-size:21px}

  /* ---- Secciones ---- */
  .section{padding-top:40px; padding-bottom:0}
  .section-head{margin-bottom:20px}

  /* Categorías y tiendas dejan de ser secciones con scroll propio: en mobile
     viven dentro de Filtros, que ya las tenía como chips. Se elimina la
     duplicación en vez de esconderla. */
  #secCats, #secStores{display:none}

  /* ---- Catálogo: encabezado colapsado en un botón de Filtros ---- */
  #catalogo{padding-top:32px}
  #catalogo > .section-head{display:none}
  .filterbar{display:flex}
  .filters{padding-top:12px; padding-bottom:12px; gap:12px; margin-bottom:0}
  .filters #chiprows{display:none; flex-direction:column; gap:10px}
  .filters.open #chiprows{display:flex}
  .chip-e{margin-right:5px}

  /* Las filas que scrollean sangran al borde: cortadas contra el padding del
     wrap parecen contenido truncado en vez de algo que se desliza. */
  .chiprow, .merchants{margin-inline:-18px; padding-inline:18px}
  .chiprow::-webkit-scrollbar, .merchants::-webkit-scrollbar{display:none}

  /* ---- Grid de producto ---- */
  .grid{grid-template-columns:repeat(2,1fr); gap:14px; padding:4px 0 24px}
  .card-body{padding:14px 13px 16px; gap:6px}
  .card-name{font-size:14px}
  .cuota b{font-size:19px}
  .feat{grid-column:span 2; padding:20px; min-height:330px}
  .feat-img{min-height:140px}
  .feat-img img{max-width:72%}

  /* ---- Popup ---- */
  .modal{padding:16px}
  .modal-card{padding:22px; gap:20px}

  /* ---- Resto ---- */
  .pager{gap:6px; padding:8px 0 32px}
  .pg{min-width:38px; height:40px; padding:0 9px; font-size:14px}
  .related .grid{grid-template-columns:repeat(2,1fr)}
  .pdp{gap:24px}
  .pdp-wrap{padding:20px 18px 52px}
  .footer{margin-top:40px}
  .footer .cols{gap:28px}
  .footer .col{flex:1 1 45%}
}

/* Tile de cierre en categorías: pedir por chat lo que no está en el catálogo */
.cat-ask{border-style:dashed; border-color:var(--n30)}
.cat-ask:hover{border-color:var(--green-140); border-style:solid}
.cat-ask .cat-n{color:var(--n100)}
.cat-ask .cat-c{color:var(--green-140); font-weight:700}