/* Above the Rest · estilos del sitio */
:root{--ink:#202020;--card:#1A202C;--bone:#F7FAFC;--mut:#CBD5E0;--gold:#D3B379;--navy:#0D1D3C}
*{box-sizing:border-box}
body{margin:0;background:var(--ink);color:var(--bone);font-family:'Raleway',sans-serif;overflow-x:clip}
h1,h2,h3,p{margin:0}
a{color:inherit;text-decoration:none}
.d{font-family:'Oswald',sans-serif;font-weight:700;text-transform:uppercase;line-height:1}
.w{max-width:1200px;margin:0 auto;padding:0 24px}
.btn{display:inline-block;padding:16px 28px;font-weight:700;font-size:16px;background:var(--gold);color:var(--ink);transition:transform .2s}
.btn:hover{transform:translateY(-3px) scale(1.03)}
.btn.o{background:transparent;color:var(--bone);border:2px solid var(--bone)}
.pulse{animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(211,179,121,.55)}70%,100%{box-shadow:0 0 0 18px rgba(211,179,121,0)}}
.up{opacity:0;transform:translateY(28px);animation:up .8s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes up{to{opacity:1;transform:none}}
.ph{background:repeating-linear-gradient(135deg,#1A202C 0 14px,#222B3A 14px 28px);display:flex;align-items:center;justify-content:center;color:var(--mut);font-size:13px;text-align:center;padding:12px}
.fl{animation:fl 6s ease-in-out infinite}
@keyframes fl{50%{transform:translateY(-14px)}}
.st{border-top:3px solid var(--card);padding-top:24px;position:relative}
.st::before{content:"";position:absolute;top:-3px;left:0;right:0;height:3px;background:var(--gold);transform-origin:left;transform:scaleX(0);animation:draw 1.4s ease forwards}
@keyframes draw{to{transform:scaleX(1)}}
.pl{background:var(--card);padding:32px;border:2px solid transparent;transition:transform .3s,border-color .3s}
.pl:hover{transform:translateY(-8px);border-color:var(--gold)}
.pl.hot{border-color:var(--gold);animation:fl 5s ease-in-out infinite}
.gb{padding:3px;background:linear-gradient(110deg,#D3B379,#F6E7BC,#D3B379,#F6E7BC,#D3B379);background-size:300% 100%;animation:gb 6s linear infinite}
@keyframes gb{to{background-position:-300% 0}}
.stp{display:flex;gap:20px;align-items:flex-start;padding:20px 0;border-top:1px solid #3a4152;transition:transform .3s}
.stp:hover{transform:translateX(10px)}
.vc{display:block;transition:transform .3s}
.vc:hover{transform:translateY(-8px)}
.vc .pb{transition:transform .3s}
.vc:hover .pb{transform:scale(1.12)}
.ex{display:flex;gap:12px;height:540px}
.ep{position:relative;flex:1;min-width:0;overflow:hidden;transition:flex .5s ease}
.ex:hover .ep:hover,.ep:focus-within{flex:3.4}
.ep .cb{position:absolute;left:0;right:0;bottom:0;padding:20px;background:rgba(32,32,32,.92)}
.ep .info{max-height:0;opacity:0;overflow:hidden;transition:max-height .45s ease,opacity .3s ease .1s}
.ep:hover .info,.ep:focus-within .info{max-height:220px;opacity:1}
.si{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--gold);color:var(--gold);transition:background .2s,color .2s}
.si:hover{background:var(--gold);color:var(--ink)}
@media (max-width:700px){.ex{flex-direction:column;height:auto}
.ep{flex:none;height:360px}
.ep .info{max-height:220px;opacity:1}}
.sp{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.sp>div{display:flex;gap:24px;width:max-content;animation:sp 30s linear infinite}
.sp:hover>div{animation-play-state:paused}
@keyframes sp{to{transform:translateX(-50%)}}
.lg{height:120px;flex:none;display:flex;align-items:center;justify-content:center;padding:0 48px}
.lg img{display:block;width:auto;max-width:none;filter:brightness(0) invert(1);opacity:.6;transition:opacity .3s}
.lg:hover img{opacity:1}
.bk{perspective:1000px}
.bk .cv{border-left:12px solid #0D1D3C;box-shadow:0 28px 40px rgba(0,0,0,.45);transform:rotateY(-16deg);transform-origin:left center;transition:transform .5s ease}
.bk:hover .cv{transform:rotateY(0) translateY(-6px)}
@media (max-width:700px){.cta-ph{position:relative!important;right:auto!important;width:100%!important;margin-top:32px}}
.fl2{color:var(--bone);transition:color .2s}
.fl2:hover{color:var(--gold)}
.fi{width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--bone);transition:color .2s,transform .2s}
.fi:hover{color:var(--gold);transform:translateY(-3px)}
@keyframes rv{from{opacity:0;transform:translateY(56px)}to{opacity:1;transform:none}}
@keyframes rvl{from{opacity:0;transform:translateX(-64px)}to{opacity:1;transform:none}}
@keyframes rvr{from{opacity:0;transform:translateX(64px)}to{opacity:1;transform:none}}
@supports (animation-timeline:view()){.rv,.rv-l,.rv-r,main>section:not(:first-child)>h2,main>section:not(:first-child)>p,main>section>.w>*,.st,.stp,.ep,.bk,.sp{animation:rv linear backwards;animation-timeline:view();animation-range:entry 0% entry 45%}
.rv-l{animation-name:rvl}
.rv-r,main>section>.w>.cta-ph{animation-name:rvr}
.rv:nth-child(2),.st:nth-child(2),.stp:nth-child(2),.ep:nth-child(2),.bk:nth-child(2){animation-range:entry 8% entry 53%}
.rv:nth-child(3),.st:nth-child(3),.stp:nth-child(3),.ep:nth-child(3),.bk:nth-child(3){animation-range:entry 16% entry 61%}
.rv:nth-child(4),.st:nth-child(4),.ep:nth-child(4){animation-range:entry 24% entry 69%}
.rv:nth-child(5){animation-range:entry 32% entry 77%}
.rv:nth-child(6){animation-range:entry 40% entry 85%}
.st::before{animation:draw linear both;animation-timeline:view();animation-range:entry 20% entry 100%}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}
.up{opacity:1;transform:none}
.st::before{transform:none}}
h1,h2,h3,p,li{color:inherit}
body{font-size:16px;line-height:1.5}
.slset{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.slset[hidden]{display:none}
.rvfb{opacity:0;transform:translateY(56px);transition:opacity .8s ease,transform .8s ease}
.rvfb-l{transform:translateX(-64px)}
.rvfb-r{transform:translateX(64px)}
.rvfb.in{opacity:1;transform:none}
html, body {
  margin: 0 !important;
  padding: 0 !important;
  background-color: #202020 !important; /* Mismo color de fondo para evitar parpadeos blancos */
  width: 100%;
  overflow-x: clip;
}
/* ===== Versión móvil (solo ≤768px; el escritorio no cambia) ===== */
input[type=range]{touch-action:pan-y}
@media (max-width:768px){
body{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.w{padding-left:20px;padding-right:20px}
/* Cabecera compacta, logo + «Above the rest» + botón en una fila */
header .w{padding-top:10px!important;padding-bottom:10px!important;gap:12px!important;flex-wrap:nowrap!important}
header a.d{font-size:18px!important;gap:8px!important;white-space:nowrap}
header a.d img{height:36px!important}
header .btn{padding:10px 12px;font-size:13px;white-space:nowrap}
/* Ritmo vertical */
main>section.w{padding-bottom:56px!important}
main>section.w[style*="padding-top"]{padding-top:44px!important}
/* Hero */
main>section.w:first-child{padding-top:28px!important;padding-bottom:40px!important;gap:32px!important}
h1.d{font-size:inherit!important}
h1.d span{font-size:clamp(38px,11.5vw,64px)!important;width:auto!important;height:auto!important;line-height:1.05}
main>section.w:first-child h1+p{max-width:none!important;margin:20px 0 28px!important}
main>section.w:first-child img{max-height:none!important;max-width:440px}
main>section.w:first-child .up[style*="position:absolute"]{left:0!important;bottom:20px!important;padding:10px 14px!important}
main>section.w:first-child .up[style*="position:absolute"] .d{font-size:30px!important}
/* Grids de auto-fit a una sola columna (evita el desborde por minmax de 220-320px) */
[style*="auto-fit"]{grid-template-columns:minmax(0,1fr)!important;gap:32px!important}
/* Títulos */
h2.d{font-size:clamp(34px,10.5vw,52px)!important;line-height:1.05}
h2:not(.d){font-size:clamp(32px,9.5vw,46px)!important}
h3.d{font-size:26px!important}
main p{max-width:none!important}
/* Botones: ancho completo y objetivo táctil de 48px */
main .btn{display:block;width:100%;min-height:48px;text-align:center;padding:16px 20px!important;font-size:16px!important}
main .btn:hover{transform:none}
/* Mi historia */
.st{padding-top:20px}
/* Comparador: pares apilados y flechas debajo */
div:has(>button[data-act]){flex-wrap:wrap!important;justify-content:center;gap:20px!important}
div:has(>button[data-act])>div{flex:1 1 100%!important;order:-1}
.slset{grid-template-columns:minmax(0,1fr)!important;gap:28px!important;max-width:380px;margin:0 auto}
.slset p.d{font-size:18px!important;margin-top:12px!important}
button[data-act]{width:52px!important;height:52px!important}
/* La app */
div[style*="margin-top:-64px"]{margin-top:-40px!important;gap:16px!important}
/* Pasos de la llamada */
.stp{gap:14px;padding:16px 0}
.stp>.d{font-size:44px!important;min-width:32px!important}
.stp h3.d{font-size:22px!important;line-height:1.15}
/* Testimonios en vídeo */
h3.d[style*="var(--gold)"]{font-size:24px!important}
/* NOS RESPALDAN */
main>section:has(>.sp){padding:28px 0!important;margin-bottom:56px!important}
.lg{padding:0 28px}
/* Ebooks */
.bk{width:100%;max-width:360px;margin-left:auto;margin-right:auto}
/* CTA final */
main>section:last-child>.w{min-height:0!important;padding-top:48px!important;padding-bottom:0!important}
main>section:last-child h2{font-size:clamp(34px,10.5vw,52px)!important}
main>section:last-child h2 span{font-size:inherit!important;max-width:none!important}
main>section:last-child p{margin:20px 0 28px!important}
main>section:last-child .btn{align-self:stretch!important}
/* Footer */
footer .w{gap:32px!important;padding-top:48px!important;padding-bottom:40px!important}
footer .w>div{flex:1 1 140px!important}
footer .w>div:first-child,footer .w>div:last-child{flex-basis:100%!important}
footer h3.d{font-size:20px!important;margin-bottom:12px!important}
.fl2{display:inline-block;padding:6px 0}
}
@media (max-width:360px){
.w{padding-left:16px;padding-right:16px}
header a.d{font-size:16px!important;gap:6px!important}
header a.d img{height:32px!important}
header .btn{padding:10px;font-size:12px}
}