/* Paleta comercial: índigo eléctrico + amarillo + rojo */
:root{
  --navy:#140a66; --royal:#2413b5; --blue:#3a2bff; --gold:#ffd60a; --gold2:#ffe76a; --goldd:#e0102f;
  --cream:#fffbe6; --ink:#14203d; --wa:#25d366;
  --serif:'Titan One','Impact',sans-serif; --sans:'Barlow',system-ui,sans-serif; --brand:'Bowlby One',sans-serif; --red:#e0102f;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{font-family:var(--sans);font-weight:500;color:var(--ink);background:#fff;line-height:1.65;overflow-x:hidden;font-size:18px}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{width:min(1120px,100% - 40px);margin:auto;position:relative;z-index:2}
.center{text-align:center}

/* Títulos: solo la letra (Titan One), sin contorno ni resaltado */
h1,h2,h3{font-family:var(--serif);line-height:1.1;font-weight:400;text-transform:uppercase;letter-spacing:.02em;color:var(--navy)}
h1{font-size:clamp(2.2rem,5.6vw,4.2rem);color:#fff;text-shadow:0 2px 6px rgba(10,5,64,.55),0 4px 26px rgba(10,5,64,.7)}
.hero .eyebrow,.hero .lead{text-shadow:0 2px 12px rgba(10,5,64,.8)}
h2{font-size:clamp(2rem,4.4vw,3.3rem);margin-bottom:22px}
h2 em{font-style:normal;color:var(--red)}
h2.light{color:#fff}
h2.light em,h1 .grad{font-style:normal;color:var(--gold)}
h3{font-size:1.55rem}
.tt .w{display:inline-block;opacity:0;transform:translateY(.6em) scale(.5) rotate(-8deg)}
.tt.go .w{animation:wpop .75s cubic-bezier(.34,1.7,.64,1) forwards;animation-delay:calc(var(--i)*.1s)}
@keyframes wpop{60%{opacity:1}100%{opacity:1;transform:none}}
.tt em,.tt .grad{display:inline-block;animation:bob 2.4s ease-in-out .9s infinite}
@keyframes bob{50%{transform:translateY(-.08em) rotate(-1.5deg) scale(1.03)}}
.eyebrow{font-size:.9rem;letter-spacing:.22em;font-weight:800;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:14px}
.eyebrow.dark{color:var(--red)}
#premios .eyebrow{color:var(--navy)}
.lead{font-size:1.2rem;color:#eef2ff;max-width:620px}
.sub{color:#cfd9f3}
.brand{font-family:var(--brand);font-weight:400;font-size:1.05rem;letter-spacing:.02em;text-decoration:none;color:#fff}
.brand em{font-style:normal;color:var(--gold)}

.btn{text-transform:uppercase;letter-spacing:.03em;display:inline-flex;align-items:center;gap:10px;background:var(--gold);color:var(--navy);
  padding:15px 30px;border-radius:999px;text-decoration:none;border:0;cursor:pointer;font:800 1.02rem var(--sans);
  box-shadow:0 6px 0 #b89a00,0 14px 28px -10px rgba(255,214,10,.75);transition:.3s}
.btn:hover{transform:translateY(-3px);background:var(--gold2)}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 #b89a00}
.btn--sm{padding:10px 22px;font-size:.9rem}
.btn--ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.75);box-shadow:none}
.btn--ghost:hover{background:rgba(255,255,255,.15)}
.btn--wa{background:var(--wa);color:#fff;font-size:1.1rem;padding:18px 36px;box-shadow:0 14px 36px -8px rgba(0,0,0,.5)}
.btn--wa:hover{background:#2be074}
.btn--wa svg{width:26px;height:26px}
.cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}

/* SEPARADOR (un solo modelo: onda con filo dorado) */
.divider{position:absolute;left:0;right:0;bottom:-1px;height:clamp(34px,4.5vw,70px);z-index:5;line-height:0;pointer-events:none}
.divider.top{top:-1px;bottom:auto;transform:rotate(180deg)}
.divider svg{width:100%;height:100%;display:block;overflow:visible}
.divider .fillp{fill:var(--c)}
.divider .line{fill:none;stroke:var(--gold);stroke-width:3;vector-effect:non-scaling-stroke}

/* precarga con imagen */
#preloader{position:fixed;inset:0;z-index:999;background:var(--navy);display:grid;place-items:center;transition:opacity .6s,visibility .6s;overflow:hidden}
#preloader::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,10,102,.7),rgba(20,10,102,.88))}
#preloader.done{opacity:0;visibility:hidden}
.pre-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:zoom 3s ease-out forwards}
@keyframes zoom{from{transform:scale(1.15)}to{transform:scale(1)}}
.pre-inner{text-align:center;position:relative;z-index:2}
.brand--pre{font-size:clamp(1.6rem,6vw,2.6rem);display:block;margin:0 0 24px}
.pre-bar{width:220px;height:3px;background:rgba(255,255,255,.25);margin:auto;border-radius:3px;overflow:hidden}
.pre-bar i{display:block;height:100%;width:0;background:var(--gold);animation:load 2.6s ease-out forwards}
@keyframes load{to{width:100%}}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:16px 28px;transition:.35s}
.nav.solid{background:rgba(20,10,102,.93);backdrop-filter:blur(10px);padding:10px 28px;box-shadow:0 6px 24px rgba(0,0,0,.3)}
.nav nav{display:flex;align-items:center;gap:26px}
.nav nav a{color:#fff;text-decoration:none;font-size:.95rem}
.nav nav a:hover{color:var(--gold)}
.nav nav a.btn{color:var(--navy)}
.nav-toggle{display:none;background:none;border:0;width:34px;height:26px;position:relative;cursor:pointer}
.nav-toggle span{position:absolute;left:4px;right:4px;height:2px;background:#fff;transition:.3s}
.nav-toggle span:first-child{top:8px}.nav-toggle span:last-child{top:16px}
.nav-toggle[aria-expanded=true] span:first-child{top:12px;transform:rotate(45deg)}
.nav-toggle[aria-expanded=true] span:last-child{top:12px;transform:rotate(-45deg)}

/* fondos */
.bgsec{position:relative;overflow:hidden;isolation:isolate}
.bg,.tapiz{position:absolute;left:0;right:0;top:-20%;bottom:-20%;background-size:cover;background-position:center;z-index:-2;will-change:transform}
.tapiz{background-image:url('../img/tapiz.svg');background-size:320px 320px;background-repeat:repeat;opacity:.13;top:-10%;bottom:-10%}
.veil{position:absolute;inset:0;z-index:-1}
.veil--hero{background:linear-gradient(180deg,rgba(20,10,102,.45),rgba(20,10,102,.28) 45%,rgba(20,10,102,.72))}
.veil--cream{background:linear-gradient(180deg,var(--cream) 0,rgba(255,251,230,.86) 14%,rgba(255,251,230,.84) 100%)}
.veil--white{background:linear-gradient(180deg,#140a66 0,rgba(255,255,255,.9) 9%,rgba(255,255,255,.93) 88%,#fff 100%)}
.veil--navy{background:linear-gradient(180deg,rgba(20,10,102,.96),rgba(20,10,102,.86))}
.veil--cta{background:linear-gradient(180deg,#fff 0,rgba(224,16,47,.9) 14%,rgba(58,17,120,.92) 100%)}

.hero{background:var(--navy) url('https://images.unsplash.com/photo-1511988617509-a57c8a288659?auto=format&fit=crop&w=1600&q=65') center/cover no-repeat;min-height:100vh;display:flex;align-items:center;padding:120px 0 120px}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero-inner p.lead{margin-top:22px}

.sec{position:relative;padding:110px 0 130px}
.sec--cream{background:var(--cream)}
.sec--white{background:#fff}
.sec--violet{background:linear-gradient(180deg,var(--navy),var(--royal))}
.sec--navy{background:var(--navy)}
.sec--sun{background:var(--gold)}

/* nosotros */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}
.grid2 p{margin-bottom:16px;color:#231a66}
.ticks{list-style:none;margin-top:10px}
.ticks li{padding-left:34px;position:relative;margin:9px 0;font-weight:500;color:var(--navy)}
.ticks li::before{content:"✓";position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;background:var(--navy);color:var(--gold);font-size:.8rem;display:grid;place-items:center}
.statband{position:relative;z-index:2;margin-top:56px;background:var(--red);border-top:2px solid var(--gold);border-bottom:2px solid var(--gold);padding:9px 0}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.stat{color:#fff;display:flex;align-items:baseline;justify-content:center;gap:10px}
.stat b{font:400 1.6rem var(--serif);color:var(--gold);line-height:1.2}
.stat span{font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em}

/* ruleta */
.roulette{display:grid;grid-template-columns:auto 1fr;gap:70px;align-items:center;margin-top:50px;justify-content:center}
.wheel-box{position:relative;width:min(440px,86vw);aspect-ratio:1}
#wheel{width:100%;height:100%;transition:transform 4s cubic-bezier(.12,.7,.1,1);filter:drop-shadow(0 22px 40px rgba(0,0,0,.55))}
#wheel g.seg{cursor:pointer}
#wheel g.seg:hover path{filter:brightness(1.15)}
#wheel g.seg.on path{filter:brightness(1.25)}
#wheel text{font:400 14px var(--serif);letter-spacing:.04em;text-transform:uppercase;pointer-events:none}
.pointer{position:absolute;top:-14px;left:50%;width:0;height:0;margin-left:-16px;border:16px solid transparent;border-top:34px solid #fff;z-index:3;filter:drop-shadow(0 4px 4px rgba(0,0,0,.4))}
.hub{position:absolute;top:50%;left:50%;width:92px;height:92px;margin:-46px 0 0 -46px;border-radius:50%;border:4px solid var(--gold);background:var(--navy);
  color:var(--gold);font:400 .9rem var(--brand);cursor:pointer;z-index:3;transition:.3s}
.hub:hover{transform:scale(1.08);background:var(--royal)}
.panel{background:rgba(255,255,255,.08);border:1px solid rgba(255,214,10,.45);backdrop-filter:blur(8px);border-radius:26px;padding:40px;color:#fff;max-width:480px;animation:pop .5s}
.panel h3{font-size:2.1rem;margin:10px 0;color:var(--gold)}
.panel p{margin-bottom:24px;color:#e6ecfb}
.panel-ico{font-size:2.6rem}
@keyframes pop{from{opacity:0;transform:translateY(14px)}}
#ruleta{padding-bottom:140px}

/* imagen del cliente */
.reveal-img{position:relative;height:280vh;background:var(--navy)}
.reveal-img .sticky{position:sticky;top:0;height:100vh;overflow:hidden}
.photo{position:absolute;inset:56px 0 0 0;background-size:cover;background-position:center 0%;will-change:background-position}
.photo-veil{position:absolute;inset:56px 0 0 0;opacity:0;background:linear-gradient(90deg,rgba(20,10,102,.94) 0%,rgba(20,10,102,.6) 38%,transparent 65%),linear-gradient(0deg,rgba(20,10,102,.75),transparent 35%)}
.statements{position:absolute;left:0;right:0;bottom:16vh;margin:auto}
.statements ul{list-style:none;margin:10px 0 28px}
.statements li{display:flex;align-items:baseline;gap:18px;border-top:1px solid rgba(255,255,255,.35);padding:14px 0;max-width:560px;opacity:0;transform:translateX(-40px);transition:.7s cubic-bezier(.2,.7,.2,1)}
.statements li.on{opacity:1;transform:none}
.statements b{font:400 1.1rem var(--serif);color:var(--gold)}
.statements span{font:400 clamp(1.5rem,3.4vw,2.6rem) var(--serif);color:#fff;line-height:1.15}
.statements-btn{opacity:0;transition:.7s .2s}
.statements-btn.on{opacity:1}
.statements .eyebrow{opacity:0;transition:.7s}
.statements .eyebrow.on{opacity:1}

/* premios */
.prizes{display:flex;gap:14px;height:460px;margin-top:54px}
.prize{flex:1;position:relative;border-radius:26px;overflow:hidden;text-decoration:none;transition:flex .6s cubic-bezier(.2,.7,.2,1);border:1px solid rgba(255,214,10,.35)}
.prize:hover{flex:2.4;border-color:var(--gold)}
.prize img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s}
.prize:hover img{transform:scale(1.08)}
.prize::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--h),transparent 65%);opacity:.95}
.prize span{position:absolute;left:22px;bottom:20px;z-index:2;color:#fff;font:400 2rem var(--serif);text-transform:uppercase;display:flex;flex-direction:column}
.prize small{font:800 .85rem var(--sans);letter-spacing:.2em;color:var(--gold)}
#premios{padding-bottom:140px}
#premios .prize{border:3px solid var(--navy)}
#premios .prize:hover{border-color:var(--red)}

/* cómo jugar: camino */
.road{position:relative;margin-top:60px;display:grid;grid-template-rows:repeat(4,290px)}
.road-svg{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.road-base,.road-fill{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round}
.road-base{stroke:#e8dfae;stroke-width:6;stroke-dasharray:2 14}
.road-fill{stroke:url(#rg);stroke-width:8;stroke-dasharray:1;stroke-dashoffset:1}
.rstep{position:relative;z-index:1;display:grid;grid-template-columns:1fr 70px 1fr;align-items:center;gap:0 34px}
.rtext{text-align:right}
.rtext h3{font-size:1.6rem;margin-bottom:12px;color:var(--navy)}
.rtext p{color:#2d2575;max-width:340px;margin-left:auto}
.rnum{display:grid;place-items:center;width:70px;height:70px;border-radius:50%;background:var(--navy);color:var(--gold);font:400 1.8rem var(--serif);border:3px solid var(--gold);box-shadow:0 0 0 8px var(--cream)}
.rstep img{width:min(260px,100%);aspect-ratio:4/3;object-fit:cover;border-radius:60% 40% 55% 45% / 45% 55% 45% 55%;box-shadow:0 22px 40px -18px rgba(20,10,102,.6);transition:.5s}
.rstep:hover img{border-radius:24px;transform:rotate(-3deg) scale(1.04)}
.rstep.flip .rtext{order:3;text-align:left}
.rstep.flip .rtext p{margin-left:0}
.rstep.flip img{order:1;justify-self:end}
.rstep.flip .rnum{order:2}
#como{padding-bottom:150px}

/* confianza */
.trust{padding:150px 0 150px;color:#fff}
.trust-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:start}
.trust-head{position:sticky;top:110px}
.pledges{list-style:none}
.pledges li{display:flex;gap:22px;padding:26px 0;border-bottom:1px solid rgba(255,255,255,.22)}
.pledges li:first-child{border-top:1px solid rgba(255,255,255,.22)}
.pi{flex:none;width:58px;height:58px;border-radius:18px;display:grid;place-items:center;font-size:1.6rem;background:var(--gold);box-shadow:4px 4px 0 var(--red);transform:rotate(-6deg)}
.pledges h3{color:var(--gold);margin-bottom:6px}
.pledges p{color:#e3e9f6;font-size:.97rem}
.note{margin-top:56px;text-align:center;font-size:.82rem;color:#b9c5da}
.note a{color:var(--gold)}

/* faq */
.faq-grid{max-width:780px}
.faq{margin-top:26px;background:rgba(255,255,255,.72);border-radius:22px;padding:8px 26px;backdrop-filter:blur(3px)}
details{border-bottom:1px solid #e8dfae;padding:20px 4px}
details:last-child{border:0}
summary{cursor:pointer;font:700 1.15rem var(--sans);list-style:none;display:flex;justify-content:space-between;gap:16px;color:var(--navy)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.7rem;color:var(--goldd);transition:.3s;line-height:1}
details[open] summary::after{transform:rotate(45deg)}
details p{margin-top:12px;color:#231a66}
#faq{padding:150px 0 130px}

/* cta final */
.cta-final{padding:160px 0 150px;color:#fff}
.cta-final .lead{margin:0 auto 34px}

/* footer */
.footer{background:#0a0540;color:#b7c3d8;padding:50px 0 24px;border-top:2px solid var(--gold)}
.foot{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:30px}
.foot nav{display:flex;gap:10px 22px;flex-wrap:wrap;align-content:flex-start}
.foot nav a{text-decoration:none}.foot nav a:hover{color:var(--gold)}
.foot p{margin-top:8px;font-size:.95rem}
.social p{margin:0 0 12px;color:#fff;font:400 1rem var(--serif)}
.social-links{display:flex;gap:12px;flex-wrap:wrap}
.social-links a{width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(255,214,10,.6);display:grid;place-items:center;color:var(--gold);transition:.3s}
.social-links a svg{width:20px;height:20px}
.social-links a:hover{background:var(--gold);color:var(--navy);transform:translateY(-3px)}
.copy{text-align:center;font-size:.8rem;margin-top:36px;padding:0 20px;opacity:.7}

.wa-float{position:fixed;right:22px;bottom:22px;z-index:60;width:62px;height:62px;border-radius:50%;background:var(--wa);display:grid;place-items:center;
  box-shadow:0 8px 24px rgba(0,0,0,.35);transition:.3s;animation:pulse 2.4s infinite}
.wa-float svg{width:34px;height:34px}
.wa-float:hover{transform:scale(1.1)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.6),0 8px 24px rgba(0,0,0,.35)}70%{box-shadow:0 0 0 20px rgba(37,211,102,0),0 8px 24px rgba(0,0,0,.35)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0),0 8px 24px rgba(0,0,0,.35)}}

.reveal{opacity:0;transform:translateY(40px);transition:opacity .9s,transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.12s}.d2{transition-delay:.24s}.d3{transition-delay:.36s}

@media (max-width:900px){
  .grid2,.roulette,.trust-grid,.foot{grid-template-columns:1fr;gap:34px}
  .roulette{justify-items:center}
  .stats{grid-template-columns:1fr 1fr;gap:14px}
  .trust-head{position:static}
  .prizes{flex-direction:column;height:auto}
  .prize{flex:none;height:150px}.prize:hover{flex:none}
  .nav-toggle{display:block;z-index:2}
  .nav nav{position:fixed;top:0;right:0;height:100vh;width:min(300px,80vw);flex-direction:column;justify-content:center;background:var(--navy);transform:translateX(100%);transition:.4s;gap:28px}
  .nav nav.open{transform:none}
  .photo-veil{background:linear-gradient(0deg,rgba(20,10,102,.95) 5%,rgba(20,10,102,.4) 55%,transparent)}
  .statements{bottom:10vh}
  .road{grid-template-rows:repeat(4,auto);gap:40px}
  .road-svg{display:none}
  .rstep,.rstep.flip{grid-template-columns:62px 1fr;gap:10px 18px}
  .rstep .rnum{grid-column:1;grid-row:1;width:58px;height:58px;order:0;box-shadow:0 0 0 6px var(--cream)}
  .rstep .rtext,.rstep.flip .rtext{grid-column:2;grid-row:1;text-align:left;order:0}
  .rstep .rtext p,.rstep.flip .rtext p{margin-left:0}
  .rstep img,.rstep.flip img{grid-column:2;grid-row:2;order:0;justify-self:start;width:min(300px,100%)}
}
@media (max-width:560px){
  body{font-size:16px}
  .sec{padding:90px 0 110px}.trust,.cta-final{padding:120px 0}
  .panel{padding:28px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.tt .w{opacity:1;transform:none}.reveal,.statements li,.statements-btn,.statements .eyebrow{opacity:1;transform:none}}

#nosotros .divider{height:clamp(22px,3vw,44px)}
.veil--navy{}
@media (max-width:900px){.stat{flex-direction:column;align-items:center;gap:0}}
.veil--teal{background:linear-gradient(180deg,rgba(20,10,102,.9),rgba(20,10,102,.8) 50%,#140a66 100%)}
.stat b{white-space:nowrap}

/* móvil: velo más fuerte en el hero para que el texto se lea sobre el video */
@media (max-width:700px){
  .veil--hero{background:linear-gradient(180deg,rgba(20,10,102,.6),rgba(20,10,102,.5) 50%,rgba(20,10,102,.8))}
  .hero{min-height:100svh}
}