/* Propuesta 3 — Pop: colores vivos, bordes gruesos, sombras duras y rebote. */
:root{
  --black:#111; --white:#fffdf7; --cream:#fff6e0;
  --yellow:#ffd43b; --pink:#ff5fa2; --blue:#6b8cff; --mint:#3ee8b0; --orange:#ff8a3d;
  --b:3px solid var(--black); --shadow:6px 6px 0 var(--black); --radius:18px; --maxw:1180px;
  --spring:cubic-bezier(.34,1.56,.64,1);
}
*{box-sizing:border-box}
html,body{overflow-x:clip}
html{scroll-behavior:smooth;background:var(--cream)}
body{margin:0;background:var(--cream);color:var(--black);font-family:'Bricolage Grotesque',system-ui,sans-serif;font-size:16.5px;line-height:1.5;-webkit-font-smoothing:antialiased}
/* Fondo de puntitos */
body{background-image:radial-gradient(rgba(17,17,17,.12) 1.2px,transparent 1.2px);background-size:22px 22px}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{margin:0;font-weight:800;line-height:1.02;letter-spacing:-.025em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.narrow{max-width:860px}
@media(max-width:640px){.wrap{padding:0 16px}}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
::selection{background:var(--yellow)}
.small{font-size:13.5px}

.c-yellow{background:var(--yellow)!important}.c-pink{background:var(--pink)!important}.c-blue{background:var(--blue)!important}.c-mint{background:var(--mint)!important}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border:var(--b);border-radius:12px;font-weight:700;font-size:15px;box-shadow:4px 4px 0 var(--black);cursor:pointer;white-space:nowrap;transition:transform .15s,box-shadow .15s;font-family:inherit;color:var(--black)}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--black)}
.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--black)}
.btn-lg{padding:15px 26px;font-size:17px}
.btn-block{width:100%}
.btn-pink{background:var(--pink)}
.btn-white{background:var(--white)}

header.site{position:sticky;top:0;z-index:50;background:var(--cream);border-bottom:var(--b)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px;gap:14px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:21px}
.brand img{transition:transform .5s var(--spring)}
.brand:hover img{transform:rotate(-20deg) scale(1.1)}
nav.links{display:flex;gap:6px}
nav.links a{padding:8px 12px;border-radius:10px;font-weight:700;font-size:14.5px;transition:background .2s}
nav.links a:hover{background:var(--yellow)}
.nav-actions{display:flex;gap:10px}
.menu-only-mobile{display:none}
.menu-toggle{display:none;padding:8px 13px;font-size:18px}
@media(max-width:960px){
  nav.links{display:none}
  .nav-actions .btn-white{display:none}
  .nav-actions{margin-left:auto}
  .menu-toggle{display:inline-flex}
  nav.links.is-open{display:flex;flex-direction:column;gap:6px;position:absolute;top:calc(100% + 10px);left:16px;right:16px;padding:12px;background:var(--white);border:var(--b);border-radius:var(--radius);box-shadow:var(--shadow);animation:menuPop .35s var(--spring)}
  nav.links.is-open a{font-size:18px;padding:12px}
  nav.links.is-open .menu-only-mobile{display:block;background:var(--pink)}
}
@media(max-width:420px){.nav-actions .btn-pink{padding:8px 12px;font-size:14px}.brand span{font-size:18px}}
@keyframes menuPop{from{opacity:0;transform:scale(.9) translateY(-10px)}}

section{padding:100px 0}
.band-yellow{background:var(--yellow);border-block:var(--b)}
.band-blue{background:var(--blue);border-block:var(--b)}
.band-pink{background:var(--pink);border-block:var(--b)}

/* Hero */
.hero{padding:70px 0 90px}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.tag{display:inline-block;margin:0 0 22px;padding:6px 14px;background:var(--white);border:var(--b);border-radius:999px;font-family:'Space Mono',monospace;font-size:13px;font-weight:700;box-shadow:3px 3px 0 var(--black);transform:rotate(-2deg)}
.hero h1{font-size:clamp(46px,7vw,92px)}
mark{background:none;color:inherit;position:relative;white-space:nowrap;z-index:0}
mark::before{content:"";position:absolute;left:-6px;right:-6px;bottom:.06em;height:.42em;background:var(--yellow);z-index:-1;border-radius:6px;transform:scaleX(0) rotate(-1.5deg);transform-origin:left;animation:marker .8s .7s var(--spring) forwards}
@keyframes marker{to{transform:scaleX(1) rotate(-1.5deg)}}
.lede{margin:22px 0 0;max-width:46ch;font-size:19px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.pills{list-style:none;padding:0;margin:28px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.pills li{padding:6px 12px;border:2px solid var(--black);border-radius:999px;background:var(--white);font-size:13.5px;font-weight:700}
.pop-in{animation:popIn .7s var(--spring) both}
.pop-in:nth-child(2){animation-delay:.08s}.pop-in:nth-child(3){animation-delay:.16s}.pop-in:nth-child(4){animation-delay:.24s}.pop-in:nth-child(5){animation-delay:.32s}
@keyframes popIn{from{opacity:0;transform:scale(.85) translateY(20px)}}

.hero-art{position:relative;display:grid;place-items:center;min-height:500px}
.hero-art::before{content:"";position:absolute;width:82%;aspect-ratio:1;border-radius:50%;background:var(--mint);border:var(--b);box-shadow:var(--shadow)}
.hero-phone{position:relative;width:min(88%,380px);animation:wobble 5s ease-in-out infinite}
@keyframes wobble{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(3deg) translateY(-14px)}}
.badge-spin{position:absolute;top:2%;right:2%;width:130px;animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.sticker{position:absolute;padding:8px 14px;border:var(--b);border-radius:12px;font-family:'Space Mono',monospace;font-weight:700;font-size:15px;box-shadow:4px 4px 0 var(--black);animation:float 4s ease-in-out infinite}
.s1{left:0;top:30%;background:var(--yellow);transform:rotate(-8deg)}
.s2{right:4%;bottom:10%;background:var(--pink);transform:rotate(6deg);animation-delay:-2s}
@keyframes float{50%{translate:0 -10px}}
@media(max-width:940px){.hero-grid{grid-template-columns:1fr}.hero-art{min-height:420px}}
@media(max-width:520px){.hero-art{min-height:360px}.badge-spin{width:96px}.sticker{font-size:12.5px;padding:6px 10px}}

/* Cinta de texto en movimiento */
.ticker{overflow:hidden;background:var(--black);color:var(--yellow);border-block:var(--b);transform:rotate(-1.5deg);margin:0 -20px;padding:14px 0}
.ticker-track{display:flex;width:max-content;animation:marquee 26s linear infinite}
.ticker span{flex:none;font-size:24px;font-weight:800;white-space:nowrap;padding-right:0}
@keyframes marquee{to{transform:translateX(-50%)}}

.stats{padding:80px 0 40px}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.stat{padding:22px;border:var(--b);border-radius:var(--radius);box-shadow:var(--shadow)}
.stat b{display:block;font-size:52px;line-height:1;font-weight:800}
.stat span{display:block;margin-top:8px;font-weight:600;font-size:14.5px}
.stat:nth-child(odd){transform:rotate(-1.5deg)}.stat:nth-child(even){transform:rotate(1.5deg)}
@media(max-width:820px){.stats-grid{grid-template-columns:1fr 1fr}.stat b{font-size:40px}}

.sec-head{max-width:720px;margin-bottom:46px}
.sec-head h2,.after-grid h2,.price-grid h2,.cta h2{font-size:clamp(34px,4.6vw,58px)}
.sec-head p{margin:14px 0 0;font-size:18px}
u{text-decoration:none;background:linear-gradient(transparent 62%,var(--pink) 62%)}

.card{background:var(--white);border:var(--b);border-radius:var(--radius);box-shadow:var(--shadow)}
.uc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.uc-grid .card{padding:14px 14px 24px;transition:transform .35s var(--spring),box-shadow .2s}
.uc-grid .card:hover{box-shadow:10px 10px 0 var(--black)}
.uc-grid img{width:100%;border:var(--b);border-radius:12px;background:var(--white)}
.uc-grid h3{margin:18px 6px 8px;font-size:25px}
.uc-grid p{margin:0 6px;font-weight:500}
.center-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 20px;margin-top:46px;font-weight:700}
@media(max-width:860px){.uc-grid{grid-template-columns:1fr;max-width:460px;margin:0 auto}}

.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.feat-grid .card{padding:28px}
.emoji{display:inline-grid;place-items:center;width:62px;height:62px;margin-bottom:18px;border:var(--b);border-radius:16px;background:var(--cream);font-size:30px;transition:transform .4s var(--spring)}
.feat-grid .card:hover .emoji{transform:rotate(-12deg) scale(1.15)}
.feat-grid h3{font-size:23px}
.feat-grid p{margin:10px 0 0;font-weight:500}
@media(max-width:860px){.feat-grid{grid-template-columns:1fr}}

.pay-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:900px}
.pay-grid .card{padding:28px}
.pay-grid .card:hover .emoji{transform:rotate(-12deg) scale(1.15)}
.pay-grid h3{font-size:26px}
.pay-grid p{margin:10px 0 0;font-weight:500}
@media(max-width:700px){.pay-grid{grid-template-columns:1fr}}
.stats .sec-head{margin-bottom:32px}

.versus{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center}
.vs-col{padding:28px;border:var(--b);border-radius:var(--radius);box-shadow:var(--shadow)}
.vs-col.us{background:var(--mint);transform:rotate(-1deg)}
.vs-col.them{background:#e9e4d8;transform:rotate(1deg)}
.vs-col h3{font-size:26px;margin-bottom:16px}
.vs-col ul{list-style:none;padding:0;margin:0;display:grid;gap:12px;font-weight:700}
.vs-col.them li{color:#5b5b5b}
.vs{display:grid;place-items:center;width:70px;height:70px;border:var(--b);border-radius:50%;background:var(--yellow);font-weight:800;font-size:22px;box-shadow:4px 4px 0 var(--black);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.12) rotate(8deg)}}
@media(max-width:760px){.versus{grid-template-columns:1fr}.vs{margin:0 auto}}

.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.steps .card{padding:24px}
.num{display:inline-grid;place-items:center;width:52px;height:52px;margin-bottom:16px;border:var(--b);border-radius:50%;background:var(--yellow);font-size:24px;font-weight:800}
.steps li:nth-child(2) .num{background:var(--pink)}.steps li:nth-child(3) .num{background:var(--mint)}.steps li:nth-child(4) .num{background:var(--orange)}
.steps h3{font-size:22px}
.steps p{margin:8px 0 0;font-weight:500}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}

.after-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.after-grid .lede{font-size:17.5px}
.big-list{list-style:none;padding:0;margin:26px 0 32px;display:grid;gap:16px}
.big-list li{display:flex;gap:14px;align-items:flex-start;font-weight:500}
.big-list li>span{flex:none;display:grid;place-items:center;width:36px;height:36px;border:var(--b);border-radius:10px;font-weight:800}
.dash{width:100%;transform:rotate(2deg)}
@media(max-width:900px){.after-grid{grid-template-columns:1fr}}

.trust{padding:30px 0 100px}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.trust .card{padding:22px}
.trust b{display:block;font-size:18px}
.trust p{margin:8px 0 0;font-weight:500;font-size:15px}
@media(max-width:980px){.trust-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.trust-grid{grid-template-columns:1fr}}

.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.check-list{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:12px;font-size:19px;font-weight:700}
.check-list li::before{content:"✓";display:inline-grid;place-items:center;width:28px;height:28px;margin-right:12px;border:2px solid var(--black);border-radius:8px;background:var(--white)}
.price{position:relative;padding:32px;transform:rotate(-1deg)}
.price-sticker{position:absolute;top:-26px;right:-18px;display:grid;place-items:center;width:84px;height:84px;border:var(--b);border-radius:50%;background:var(--yellow);font-weight:800;font-size:14px;line-height:1.05;text-align:center;transform:rotate(14deg);animation:pulse 2.4s ease-in-out infinite}
.price-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:2px dashed var(--black);font-weight:600;font-size:17px}
.price-total{display:flex;justify-content:space-between;align-items:center;padding:18px 0 4px;font-weight:800;font-size:20px}
.price-total b{font-size:46px}
.price .small{margin:0 0 20px}
@media(max-width:900px){.price-grid{grid-template-columns:1fr}.price-sticker{right:-6px}}

.faq{display:grid;gap:14px}
.faq details{padding:0 22px;transition:background .2s}
.faq details[open]{background:var(--yellow)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;font-size:19px;font-weight:800}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:34px;height:34px;border:var(--b);border-radius:50%;background:var(--white);font-size:22px;transition:transform .4s var(--spring)}
.faq details[open] summary::after{transform:rotate(135deg)}
.faq details p{margin:0;padding:0 0 22px;font-weight:500;animation:popIn .45s var(--spring)}

.cta{padding:60px 40px;text-align:center}
.cta h2{max-width:16ch;margin:0 auto}
.cta p{margin:16px 0 28px;font-size:18px;font-weight:600}
@media(max-width:640px){.cta{padding:40px 20px}}

footer{padding:60px 0 30px;background:var(--black);color:var(--white)}
footer .brand{color:var(--white)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:36px}
.foot-grid p{max-width:36ch;opacity:.75;font-size:14.5px}
.foot-grid h4{margin:0 0 14px;color:var(--yellow);font-size:14px}
.foot-grid div>a:not(.brand){display:block;margin-bottom:10px;font-size:15px;opacity:.85}
.foot-grid div>a:not(.brand):hover{opacity:1;color:var(--pink)}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:40px;padding-top:20px;border-top:2px solid #333;font-size:13px;opacity:.7}
@media(max-width:700px){.foot-grid{grid-template-columns:1fr}}

/* Rebote al entrar en pantalla */
.bounce{opacity:0;scale:.9;translate:0 30px;transition:opacity .5s ease,scale .7s var(--spring),translate .7s var(--spring);transition-delay:var(--d,0ms)}
.bounce.is-visible{opacity:1;scale:1;translate:0 0}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .bounce{opacity:1;scale:1;translate:0 0}
  mark::before{transform:rotate(-1.5deg)}
}

.stat strong{font-weight:800}
.fine{margin:22px 0 0;max-width:46ch;font-size:14.5px;font-weight:600}
.guarantee{padding:36px;text-align:center}
.guarantee h2{font-size:clamp(30px,4vw,44px);margin-bottom:12px}
.guarantee p{max-width:56ch;margin:10px auto 0;font-weight:600}
.guarantee .small{font-weight:500}
.cta-foot{margin:18px 0 0!important}
@media(max-width:640px){.guarantee{padding:26px 18px}}

/* Logos de WhatsApp y Meta dentro del texto de la portada */
.brand-chip{display:inline-flex;align-items:center;gap:6px;padding:1px 10px 1px 5px;border:2px solid var(--black);border-radius:999px;background:var(--white);font-weight:800;white-space:nowrap;vertical-align:1px;box-shadow:2px 2px 0 var(--black)}
.brand-chip svg{width:22px;height:22px;flex:none}
.brand-chip svg[viewBox="0 0 36 24"]{width:30px}

/* Ilustraciones en lugar de emojis */
.ic{display:inline-block;width:1.25em;height:1.25em;vertical-align:-.3em;flex:none}
.ic-h{width:.95em;height:.95em;vertical-align:-.1em;margin-left:.1em;transition:transform .4s var(--spring)}
h2:hover .ic-h,h3:hover .ic-h{transform:rotate(-12deg) scale(1.12)}
.ic-xl{width:58px;height:58px;display:block;transition:transform .4s var(--spring)}
.stat:hover .ic-xl{transform:rotate(-10deg) scale(1.1)}
.ic-box{width:40px;height:40px}
.pills li,.vs-col li{display:flex;align-items:center;gap:8px}
.pills li .ic{width:22px;height:22px;vertical-align:0}
.vs-col li .ic{width:26px;height:26px}
.tag .ic{width:18px;height:18px;vertical-align:-4px;margin-right:4px}
@media(max-width:820px){.ic-xl{width:46px;height:46px}}

/* Hero: segunda parte del título con resaltado amarillo (como el antiguo "Only yours") */
.hero h1 .h1-sub{display:block;margin-top:.28em;font-size:.5em;line-height:1.28}
.hero h1 .hl{background:linear-gradient(transparent 58%,var(--yellow) 58%);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .12em;border-radius:6px}
.hero h1 .brand-chip{font-size:.62em;vertical-align:.12em;letter-spacing:0}
.hero h1 .brand-chip svg{width:1.3em;height:1.3em}
.hero h1 .brand-chip svg[viewBox="0 0 36 24"]{width:1.75em}
@media(max-width:520px){.hero h1 .h1-sub{font-size:.58em}}

/* Prueba 2026-09-29: todo el título del mismo tamaño y más compacto */
.hero h1{font-size:clamp(42px,5.4vw,76px);line-height:1.02;letter-spacing:-.035em;max-width:13.5em}
.hero h1 .h1-sub{display:block;margin:0;font-size:1em;line-height:inherit}
.hero h1 .hl{padding:0 .06em}
.hero h1 .brand-chip{font-size:.5em;vertical-align:.3em;padding:1px 9px 1px 5px}
@media(max-width:520px){.hero h1{font-size:clamp(34px,10.5vw,46px)}.hero h1 .h1-sub{font-size:1em}.hero h1 .brand-chip{font-size:.55em}}
.hero .hero-subtitle{margin-top:18px;font-size:clamp(21px,2vw,28px);font-weight:700}
/* El logo de Meta y el punto final nunca se separan de línea */
.hero h1 .keep{white-space:nowrap}

/* Todo el hero (título, subtítulo y botones) visible sin bajar en computadora */
@media(min-width:941px){
  .hero{padding:clamp(20px,4vh,48px) 0 clamp(30px,5vh,60px)}
  .hero-grid{grid-template-columns:1.45fr .75fr;gap:28px}
  .hero h1{font-size:clamp(40px,min(5.6vw,10vh),80px);max-width:none}
  .hero .tag{margin-bottom:clamp(10px,2vh,22px)}
  .hero .hero-subtitle{margin-top:clamp(8px,1.6vh,18px);font-size:clamp(19px,min(1.9vw,3.2vh),28px)}
  .hero-ctas{margin-top:clamp(14px,2.6vh,30px)}
  .pills{margin-top:clamp(12px,2.2vh,28px)}
  .hero-art{min-height:0;height:min(62vh,500px)}
  .hero-phone{width:auto;height:88%;max-width:100%}
  .hero-art::before{width:auto;height:92%}
  .badge-spin{width:clamp(80px,11vh,130px)}
}