/* Shared layout for the ebook sales pages. Each page sets the theme tokens in :root. */
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{background:var(--bg);color:var(--tx);font:400 17px/1.7 var(--sans);overflow-x:clip;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:1140px;margin-inline:auto;padding-inline:clamp(18px,5vw,64px)}
h1,h2,h3{font-weight:800;line-height:1.08;letter-spacing:-.02em;text-wrap:balance}
h2{font-size:clamp(1.9rem,4.6vw,3.2rem)}
.grad{background:linear-gradient(95deg,var(--a),var(--b));-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{font:700 .72rem/1 var(--sans);letter-spacing:.26em;text-transform:uppercase;color:var(--a);display:inline-flex;gap:12px;align-items:center}
.eyebrow:before{content:"";width:30px;height:2px;background:linear-gradient(90deg,var(--a),var(--b))}
.sec{padding-block:clamp(66px,9vw,120px);position:relative}
.alt{background:var(--bg2)}
.center{text-align:center}
.progress{position:fixed;inset:0 0 auto;height:3px;z-index:90;background:rgba(255,255,255,.07)}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--a),var(--b));transform-origin:left;transform:scaleX(0)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.7em;padding:1.2em 2.1em;border-radius:16px;font:800 .92rem/1.2 var(--sans);letter-spacing:.05em;text-transform:uppercase;text-decoration:none;color:var(--btx,#fff);background:linear-gradient(100deg,var(--a),var(--b));box-shadow:0 20px 50px -18px var(--glow),inset 0 1px 0 rgba(255,255,255,.3);position:relative;overflow:hidden;isolation:isolate;transition:transform .3s,box-shadow .3s;text-align:center}
.btn:hover{transform:translateY(-3px);box-shadow:0 28px 60px -16px var(--glow)}
.btn:after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:shine 3.4s ease-in-out infinite;z-index:-1}
@keyframes shine{0%,55%{left:-60%}90%,100%{left:140%}}
.btn.xl{padding:1.4em 2.6em;font-size:1rem}
.rv{opacity:0;transform:translateY(34px);filter:blur(5px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1),filter .9s;transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none;filter:none}
.rv.l{transform:translateX(-44px)}.rv.r{transform:translateX(44px)}.rv.z{transform:scale(.92)}
.rv.in.l,.rv.in.r,.rv.in.z{transform:none}

/* hero */
.hero{padding:clamp(40px,7vw,90px) 0 clamp(50px,7vw,90px);overflow:hidden;position:relative;background:var(--herobg)}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,64px);align-items:center;position:relative;z-index:2}
.logo{width:min(320px,70%);margin-bottom:26px;animation:fade 1s both}
.hero h1{font-size:clamp(2.2rem,5.4vw,4.2rem);margin-bottom:20px}
.hero h1 .l{display:block;overflow:hidden;padding-bottom:.1em}
.hero h1 .l>b{display:inline-block;animation:up 1s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.15s + var(--i)*.13s)}
@keyframes up{from{transform:translateY(112%)}}
@keyframes fade{from{opacity:0;transform:translateY(14px)}}
.hero p.sub{color:var(--mut);font-size:1.1rem;max-width:50ch;animation:fade 1s .7s both}
.cta-row{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:32px;animation:fade 1s .9s both}
.trust{display:flex;gap:18px;flex-wrap:wrap;margin-top:26px;color:var(--mut);font-size:.82rem;animation:fade 1s 1.1s both}
.trust span:before{content:"✓ ";color:var(--a);font-weight:800}
.visual{position:relative;justify-self:center;width:min(100%,520px);transform:translateY(var(--py,0))}
.visual img{width:100%;filter:drop-shadow(0 40px 60px rgba(0,0,0,.55));animation:float 7s ease-in-out infinite}
.visual:before{content:"";position:absolute;inset:8%;border-radius:50%;background:radial-gradient(closest-side,var(--glow),transparent 70%);filter:blur(30px);animation:pulse 5s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-14px)}}
@keyframes pulse{50%{transform:scale(1.12);opacity:.7}}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}.visual{width:min(78%,360px);margin-top:10px}}

/* video */
.vid{position:relative;max-width:900px;margin:40px auto 0;aspect-ratio:16/9;border-radius:22px;overflow:hidden;cursor:pointer;border:1px solid var(--line);box-shadow:0 40px 90px -30px var(--glow),0 0 0 6px rgba(255,255,255,.03);background:#000}
.vid img{width:100%;height:100%;object-fit:cover}
.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid .play{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:linear-gradient(135deg,var(--a),var(--b));display:grid;place-items:center;box-shadow:0 0 0 0 var(--glow);animation:ring 2s infinite}
.vid .play:before{content:"";border-left:24px solid #fff;border-block:15px solid transparent;margin-left:6px}
@keyframes ring{70%{box-shadow:0 0 0 28px transparent}100%{box-shadow:0 0 0 0 transparent}}
.vid.playing img,.vid.playing .play{display:none}

/* learn grid */
.learn{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:50px}
.card{padding:26px 24px;border-radius:22px;background:var(--card);border:1px solid var(--line);position:relative;overflow:hidden;transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .5s,box-shadow .5s}
.card:hover{transform:translateY(-8px);border-color:var(--a);box-shadow:0 30px 60px -30px var(--glow)}
.card i{font:800 .8rem var(--sans);letter-spacing:.2em;color:var(--a);font-style:normal}
.card h3{font-size:1.2rem;margin-top:10px;letter-spacing:-.01em;font-weight:700}
.card p{color:var(--mut);font-size:.92rem;margin-top:8px}
.card:before{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:linear-gradient(90deg,var(--a),var(--b));transition:width .7s}
.card:hover:before{width:100%}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:44px}
.chips span{padding:12px 20px;border-radius:99px;border:1px solid var(--line);background:var(--card);font-size:.95rem;transition:transform .4s,background .4s,border-color .4s}
.chips span:hover{transform:translateY(-4px) scale(1.04);border-color:var(--a)}

/* testimonials */
.depo{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:46px}
.depo figure{width:min(100%,260px);border-radius:20px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 60px -30px #000;transition:transform .5s;background:#fff}
.depo figure:nth-child(2){transform:translateY(-16px)}
.depo figure:hover{transform:translateY(-12px) rotate(-1.2deg)}
.depo img{width:100%}

/* offer */
.offer-card{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,56px);align-items:center;padding:clamp(26px,5vw,60px);border-radius:32px;background:var(--card2);border:1px solid var(--a);box-shadow:0 50px 100px -40px var(--glow);position:relative;overflow:hidden}
.offer-card .mock{perspective:900px}
.offer-card .mock img{transform:rotateX(var(--rx,0)) rotateY(var(--ry,0));transition:transform .2s;filter:drop-shadow(0 30px 40px rgba(0,0,0,.5));animation:float 8s ease-in-out infinite}
.old{color:var(--mut);margin-top:18px}
.price{font:800 clamp(3.4rem,8vw,5.2rem)/1 var(--sans);display:flex;align-items:baseline;gap:8px;letter-spacing:-.04em}
.price small{font-size:1.3rem;color:var(--a)}
.perks{list-style:none;padding:0;margin:20px 0 28px;display:grid;gap:10px;font-size:.96rem}
.perks li{display:grid;grid-template-columns:22px 1fr;gap:10px}
.perks li:before{content:"✓";color:var(--a);font-weight:800}
.tiny{margin-top:14px;font-size:.78rem;color:var(--mut)}
@media(max-width:860px){.offer-card{grid-template-columns:1fr}.offer-card .mock{max-width:380px;margin-inline:auto}}

/* faq */
.faq{max-width:820px;margin:44px auto 0}
details{border-bottom:1px solid var(--line)}
details:first-child{border-top:1px solid var(--line)}
summary{list-style:none;cursor:pointer;padding:22px 46px 22px 0;font-weight:700;font-size:1.05rem;position:relative}
summary::-webkit-details-marker{display:none}
summary:before,summary:after{content:"";position:absolute;right:6px;top:50%;width:16px;height:2px;border-radius:2px;background:var(--a);transition:transform .4s}
summary:before{transform:rotate(90deg)}
details[open] summary:before{transform:rotate(0)}
details p{padding:0 0 22px;color:var(--mut);animation:fade .5s}

.help{margin:60px auto 0;max-width:820px;padding:22px 26px;border-radius:18px;border:1px solid var(--line);background:var(--card);font-size:.9rem;color:var(--mut)}
.help a{color:var(--a);font-weight:700}
footer{padding:34px 0 110px;font-size:.75rem;color:var(--mut);text-align:center;border-top:1px solid var(--line)}
footer p{max-width:78ch;margin:0 auto 10px}
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:80;padding:12px clamp(18px,5vw,64px) calc(12px + env(safe-area-inset-bottom));background:var(--bg);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);border-top:1px solid var(--line);display:flex;gap:16px;justify-content:center;align-items:center;transform:translateY(110%);transition:transform .5s}
.sticky-cta.on{transform:none}
.sticky-cta span{font-weight:800}
.sticky-cta .btn{padding:.9em 1.6em;font-size:.8rem}
@media(max-width:560px){.sticky-cta span{display:none}.sticky-cta .btn{width:100%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.rv{opacity:1;transform:none;filter:none}}


/* brand mark: flower growing from dry cracked earth (original artwork) */
.brand-flower{position:relative;width:min(220px,60vw);aspect-ratio:330/376;margin:0 auto 18px;background:url(img/flor-marca.webp) 0 100%/520% auto no-repeat;-webkit-mask:radial-gradient(closest-side,#000 58%,transparent 100%);mask:radial-gradient(closest-side,#000 58%,transparent 100%)}
.brand-flower:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 45% 56%,rgba(247,220,162,.55),transparent 36%);mix-blend-mode:screen;animation:glow 3.4s ease-in-out infinite}
@keyframes glow{50%{opacity:.35;transform:scale(1.12)}}
.rv.brand-flower{transform:none;filter:none;clip-path:inset(100% 0 0 0);transition:clip-path 2.4s cubic-bezier(.2,.8,.2,1),opacity 1s}
.rv.in.brand-flower{clip-path:inset(0 0 0 0)}