/* portada: los colores salen del logo; el hero conserva la rueda y el flujo por canal */
html:root:root{--navy:#10203F;--mint:#A2DDD8;--coral:#D96051;--ink:#10203F;--coral-s:#D96051;--coral-dk:#B84A3C;--lime:#A2DDD8;--teal:#10203F;--aqua:#10203F;--violet:#10203F;--line:#D8DEE5;--line2:#C6CFD8;--bg2:#EFF3F4;--mute:#4C5A6E;--mute2:#6C7888;--display:'Bricolage Grotesque',system-ui,sans-serif;--body:'Figtree',system-ui,sans-serif;--mono:'Figtree',system-ui,sans-serif;--pad:clamp(1.25rem,4vw,3.5rem)}
.w{max-width:1440px;margin:0 auto;padding-inline:var(--pad)}
.act-b{display:inline-block;padding:.95rem 1.45rem;background:var(--navy);color:#fff;font:700 1.06rem var(--body);text-decoration:none;transition:transform .15s}
.act-b:hover{transform:translateY(-2px)}
.tx{font-weight:700;color:inherit;text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:2px}
.cu,.trae,.qn,.plan{scroll-margin-top:72px}
.cu h2,.trae h2,.plan h2,.fin h2{font:800 clamp(2.5rem,6.4vw,6rem)/.98 var(--display);letter-spacing:-.04em;text-wrap:balance}

/* hero: mensaje nuevo sobre fondo blanco (el menta no gustó), rueda y pantallas sin tocar */
.hero{background:#fff;border-bottom:0}
.orb{display:none}
.hero-wide{grid-template-columns:minmax(0,.58fr) minmax(0,1fr)}
.hero-top h1{max-width:none;font:800 clamp(2.6rem,4.2vw,4.3rem)/.98 var(--display);letter-spacing:-.045em}
/* el título dice qué es Shoppi; la frase de la bolsa queda debajo, más chica */
.hero-top h1 span{display:block;text-wrap:balance}
.hero-top .h1-bolsa{margin-top:.55em;font-size:.5em;line-height:1.05;letter-spacing:-.03em}
.hero h1 em{color:var(--coral-dk);background:none;animation:none}
.hero-top .lede{max-width:34ch;margin:1.3rem 0 1.5rem;color:var(--navy);font-size:clamp(1.08rem,1.35vw,1.24rem);line-height:1.4}
.hero-cta{gap:.9rem 1.4rem}
.hero-note{margin-top:.9rem;color:var(--navy);font-size:.95rem}
.hubnote{border-radius:0}
@media(max-width:1100px){
  .hero-wide{grid-template-columns:minmax(0,1fr)}
  .hero-top h1{font-size:clamp(2.35rem,9.4vw,4.6rem)}
  .hero-top .lede{max-width:44ch}
}

/* la cuenta */
.cu{background:var(--navy);color:#fff;padding-block:clamp(4rem,9vw,8rem)}
.cu h2,.cu p{color:#fff}
.cu-g{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,6vw,6rem);margin-top:clamp(2.2rem,5vw,4rem)}
@media(max-width:860px){.cu-g{grid-template-columns:minmax(0,1fr)}}
.cu-in{display:grid;gap:1.9rem;align-content:start}
.cu-in label{display:grid;gap:.6rem;font-weight:600}
.cu-in span{display:flex;justify-content:space-between;gap:1rem}
.cu-in b{font:800 1.36rem var(--display);font-variant-numeric:tabular-nums;white-space:nowrap}
.cu-in input{width:100%;height:28px;margin:0;accent-color:var(--mint)}
.ba{margin-bottom:1.5rem}
.ba p{display:flex;justify-content:space-between;gap:1rem;margin-bottom:.45rem;font-weight:600}
.br-b{display:flex;gap:2px;height:clamp(2.4rem,5vw,3.6rem)}
.br-b i{display:block;min-width:3px;transition:flex-grow .25s}
.br-k{background:var(--mint)}
.br-g{background:var(--coral)}
.lg{display:flex;flex-wrap:wrap;gap:.3rem 1.3rem;font-size:.95rem;font-weight:600}
.lg span{display:inline-flex;align-items:center;gap:.45rem}
.lg i{width:.8rem;height:.8rem}
.sv{margin-top:2rem;font:800 clamp(2.5rem,6.2vw,5.6rem)/.98 var(--display);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.sv small{display:block;margin-top:.55rem;font:600 clamp(1.06rem,1.6vw,1.3rem)/1.3 var(--body);letter-spacing:0;color:var(--mint)}
.cu .fine{margin-top:1.2rem;font-size:.88rem;line-height:1.45;color:#B7C3D0}

/* qué trae la bolsa */
.trae{padding-block:clamp(4rem,9vw,8rem)}
.trae h2{margin-bottom:clamp(2rem,4.4vw,3.6rem)}
.pz-wrap{min-height:610px;padding-right:52%}
.pz{padding:.5rem 0;border-color:var(--line)}
.pz-n{display:none}
.pz{grid-template-columns:minmax(0,1fr) 4.6rem;align-items:center}
.pz-lg{display:flex;justify-content:flex-end;align-items:center;height:2.2rem;color:var(--navy);opacity:.55;transition:opacity .2s}
.pz:hover .pz-lg,.pz.on .pz-lg{opacity:1}
.pz-lg img{display:block;max-width:100%;max-height:1.5rem;width:auto;height:auto}
.pz-lg svg{display:block;width:2rem;height:2rem}
.pz-st{display:flex;gap:.5rem;margin:.65rem 0 .2rem}
.pz-st img{display:block;height:34px;width:auto;background:#000}
.pv-foto img{width:100%;height:100%;object-fit:cover;object-position:18% 0}
.pv-moto img{object-fit:contain;object-position:50% 100%}
.pz-t{font:800 clamp(1.75rem,3.5vw,3.3rem)/1.08 var(--display);letter-spacing:-.04em;color:#A4AFBB;transition:color .2s}
.pz:hover .pz-t,.pz.on .pz-t{color:var(--navy);transform:none}
.pz-v{width:49%;border-radius:0;background:var(--navy)}
.pz-c{width:49%}
.pz-c em{max-width:30ch;font:700 clamp(1.1rem,1.6vw,1.34rem)/1.22 var(--body);letter-spacing:0}
.pz-c i{color:var(--mint)}
.pz-wrap.auto .pz.on{background:none}
.all{margin-top:1.8rem}
.pv-wa{display:flex;flex-direction:column;justify-content:center;gap:.7em;height:100%;padding:8% 9% 30%;font-size:clamp(11px,3.5cqmin,16px);line-height:1.3}
.pv-wa em{display:block;max-width:78%;padding:.6em .85em;background:#fff;color:var(--navy);font-style:normal;font-weight:600}
.pv-wa em.me{align-self:flex-end;background:var(--mint)}
@media(max-width:860px){
  .pz-wrap{min-height:0;padding-right:0}
  .pz{grid-template-columns:minmax(0,1fr);align-items:stretch}
  .pz,.pz-v{border-radius:0}
  .pz-lg{display:none}
  .pz-v,.pz-c{width:100%}
  .pz-t,.pz:hover .pz-t,.pz.on .pz-t{color:#fff;font-size:1.7rem}
}

/* para quién: fotos reales del producto en uso */
.qn{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.qn a{position:relative;display:block;overflow:hidden;color:#fff;text-decoration:none;background:var(--navy)}
.qn img{display:block;width:100%;height:clamp(320px,41vw,620px);object-fit:cover;transition:transform .5s}
.qn a:hover img{transform:scale(1.03)}
.qn span{display:block;padding:1.1rem var(--pad) 1.5rem;font-size:1.06rem}
.qn b{display:block;margin-bottom:.15rem;font:800 clamp(1.8rem,3.4vw,3.1rem)/1.05 var(--display);letter-spacing:-.035em}
.qn a+a{background:var(--coral);color:var(--navy)}
@media(max-width:700px){.qn{grid-template-columns:minmax(0,1fr)}}

/* se conecta: logos reales */
.co{padding-block:clamp(3rem,6vw,5rem)}
.co h3{margin:0 0 clamp(1.6rem,3vw,2.4rem);font:800 clamp(1.7rem,3vw,2.7rem)/1.02 var(--display);letter-spacing:-.035em}
.co-l{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2.2rem clamp(1.2rem,4vw,3.4rem);align-items:center}
.co-l a{display:flex;align-items:center;gap:.5rem;min-height:56px;color:var(--navy);text-decoration:none;transition:transform .15s}
.co-l a:hover{transform:translateY(-2px)}
.co-l img{display:block;width:auto;max-width:100%;height:34px;object-fit:contain}
.co-l .co-al{height:56px}
.co-l .co-rec{font:800 1.5rem var(--body);letter-spacing:-.02em}
.co-l .co-rec img{height:26px}
@media(max-width:760px){.co-l{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* precios */
.plan{padding-block:clamp(4rem,9vw,8rem)}
.plan-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.4rem,4vw,3.6rem);margin-top:clamp(2.2rem,5vw,4rem)}
.plan-g div{display:flex;flex-direction:column;align-items:flex-start;border-top:3px solid var(--navy);padding-top:1rem}
.plan-g b{display:block;margin:.1rem 0 .55rem;font:800 clamp(3rem,6.6vw,6rem)/1 var(--display);letter-spacing:-.045em}
.plan-g b small{font:600 1rem var(--body);letter-spacing:0}
.plan-g span{font-weight:700}
.plan-g p{flex:1;margin-bottom:1.1rem;color:var(--mute)}
.plan-g .tx{margin-top:.9rem}
.plan-nota{margin-top:2rem;color:var(--mute)}
.plan .tx{display:inline-block;margin-top:1.8rem}
@media(max-width:760px){.plan-g{grid-template-columns:minmax(0,1fr)}}

/* cierre */
.fin{position:relative;overflow:hidden;background:var(--coral);color:var(--navy);padding-block:clamp(4.5rem,10vw,9rem)}
.fin .w{position:relative}
.fin h2{position:relative;z-index:1;font-size:clamp(2.7rem,6vw,6.1rem);line-height:.96}
.fin .acts{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.5rem;margin-top:2rem}
.fin-bag{position:absolute;right:var(--pad);bottom:-58%;width:min(30vw,440px);height:auto}
@media(max-width:860px){.fin{padding-bottom:0}.fin-bag{position:static;display:block;width:min(70%,17rem);margin:2.6rem auto -3.4rem}}