/* SPEM · Juan Mazo Trader
   Concepto: estudio de trading de noche. Fondo espresso, tarjetas “papel crema” para lo importante (precios, planes),
   oro para la acción. Montserrat para títulos (igual que los documentos SPEM), Figtree para leer, Caveat Brush como firma. */
:root{
  --bg:#15100c;--bg2:#1c1510;--panel:#241b15;--panel2:#2d2219;--line:#3b2d23;
  --text:#f1e7d8;--mut:#b7a28b;--gold:#e2ab47;--gold-2:#f0c26c;--copper:#b9652c;
  --cream:#f7efe4;--cream-2:#efe3d2;--paper:#fffaf3;--paper-line:#e6d8c5;--paper-mut:#cdb9a3;--ink:#241a14;--ink-mut:#6f5a48;
  --bull:#93b67a;--copper-ink:#8f4a1c;--bear:#d4705a;
  --f-head:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-body:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-sign:"Caveat Brush","Segoe Print","Bradley Hand",cursive;
  --r:14px;--r-lg:22px;--ease:cubic-bezier(.2,.75,.2,1);
  --header:72px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header) + 12px + env(safe-area-inset-top,0px));-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 1.0625rem/1.65 var(--f-body);overflow-x:hidden;-webkit-font-smoothing:antialiased}
html.home{scroll-snap-type:y proximity}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold)}
h1,h2,h3,h4{font-family:var(--f-head);font-weight:800;line-height:1.08;margin:0;text-wrap:balance;letter-spacing:-.015em}
h1{font-size:clamp(2.5rem,6.4vw,4.6rem)}
h2{font-size:clamp(2rem,4.4vw,3.2rem)}
h3{font-size:clamp(1.25rem,2vw,1.5rem)}
p{margin:0}
ul,ol{margin:0;padding:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--gold);color:var(--ink);padding:10px 14px;border-radius:8px;font-weight:700}
.skip:focus{left:16px}

.wrap{width:100%;max-width:1180px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.narrow{max-width:760px}
.eyebrow{font:700 .78rem/1.2 var(--f-head);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.eyebrow.cu{color:var(--copper-ink)}
.sign{font-family:var(--f-sign);color:var(--gold);font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.1}
.lead{font-size:clamp(1.08rem,1.6vw,1.22rem);color:var(--mut);max-width:60ch}
.rule{width:64px;height:3px;background:var(--gold);border:0;margin:0}
.mut{color:var(--mut)}
.num{font-variant-numeric:tabular-nums}
.stack{display:grid;gap:18px}
.pending{display:inline-block;font:600 .72rem/1.35 var(--f-body);color:var(--gold);border:1px dashed color-mix(in srgb,var(--gold) 55%,transparent);border-radius:6px;padding:4px 8px}

/* ---------- botones ---------- */
.btn{--b:var(--gold);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;border:0;cursor:pointer;
  font:700 1rem/1 var(--f-head);letter-spacing:.01em;text-decoration:none;overflow:hidden;isolation:isolate;
  transition:transform .25s var(--ease),box-shadow .3s var(--ease),background .3s}
.btn svg{width:18px;height:18px;transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn:active{transform:scale(.97)}
.btn-gold{background:var(--gold);color:var(--ink);box-shadow:0 10px 30px -12px color-mix(in srgb,var(--gold) 70%,transparent)}
.btn-gold::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s var(--ease)}
.btn-gold:hover{background:var(--gold-2);transform:translateY(-2px);box-shadow:0 16px 36px -12px color-mix(in srgb,var(--gold) 80%,transparent)}
.btn-gold:hover::after{transform:translateX(120%)}
.btn-ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--gold);transform:translateY(-2px)}
.btn-dark{background:var(--ink);color:var(--cream)}
.btn-dark:hover{background:#3a2a20;transform:translateY(-2px)}
.btn-sm{min-height:44px;padding:0 18px;font-size:.88rem}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- encabezado ---------- */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:70;background:var(--bg)}
.site-header{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:60;height:var(--header);transition:background .35s,border-color .35s,backdrop-filter .35s;border-bottom:1px solid transparent}
.site-header.solid{background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--line)}
.site-header .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand img{height:34px;width:auto}
.head-actions{display:flex;align-items:center;gap:10px}
.menu-btn{display:inline-flex;align-items:center;gap:12px;min-height:46px;padding:0 8px 0 20px;border-radius:999px;border:1.5px solid var(--line);background:color-mix(in srgb,var(--panel) 80%,transparent);color:var(--text);font:700 .92rem var(--f-head);cursor:pointer;transition:border-color .3s}
.menu-btn:hover{border-color:var(--gold)}
.menu-btn .ic{width:32px;height:32px;border-radius:50%;background:var(--gold);display:grid;place-content:center;gap:4px}
.menu-btn .ic i{display:block;width:14px;height:2px;background:var(--ink);border-radius:2px;transition:transform .35s var(--ease)}
.menu-btn:hover .ic i:last-child{transform:translateX(3px)}
@media(max-width:640px){.head-cta{display:none}.brand img{height:28px}}

/* ---------- menú a pantalla completa ---------- */
.menu{position:fixed;inset:0;z-index:80;background:var(--bg);display:grid;overflow-y:auto;
  clip-path:circle(0 at calc(100% - 60px) 36px);visibility:hidden;transition:clip-path .75s var(--ease),visibility 0s .75s}
.menu.open{clip-path:circle(150% at calc(100% - 60px) 36px);visibility:visible;transition:clip-path .75s var(--ease)}
.menu::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 85% 10%,color-mix(in srgb,var(--gold) 12%,transparent),transparent 60%),radial-gradient(60% 50% at 0% 100%,color-mix(in srgb,var(--copper) 14%,transparent),transparent 60%);pointer-events:none}
.menu .wrap{position:relative;padding-top:calc(18px + env(safe-area-inset-top,0px));padding-bottom:calc(40px + env(safe-area-inset-bottom,0px));display:grid;gap:28px;align-content:start}
.menu-top{display:flex;justify-content:space-between;align-items:center;height:54px}
.menu-close{width:52px;height:52px;border-radius:50%;border:1.5px solid var(--line);background:var(--panel);color:var(--text);cursor:pointer;display:grid;place-items:center;transition:transform .4s var(--ease),border-color .3s}
.menu-close:hover{transform:rotate(90deg);border-color:var(--gold)}
.menu-close svg{width:20px;height:20px}
.menu-grid{display:grid;gap:32px}
@media(min-width:960px){.menu-grid{grid-template-columns:1.5fr 1fr;gap:56px}}
.menu-main{display:grid;gap:10px}
.menu-offer{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:18px 20px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line);text-decoration:none;color:var(--text);transition:border-color .3s,transform .35s var(--ease),background .3s}
.menu-offer:hover{border-color:var(--gold);transform:translateX(6px);background:var(--panel2)}
.menu-offer .ico{width:52px;height:52px;border-radius:12px;background:var(--bg);display:grid;place-items:center}
.menu-offer .ico svg{width:30px;height:30px}
.menu-offer b{display:block;font:800 clamp(1.15rem,2.2vw,1.45rem)/1.15 var(--f-head)}
.menu-offer span{color:var(--mut);font-size:.92rem}
.menu-offer .go{color:var(--gold)}
.menu-offer .go svg{width:22px;height:22px}
.menu-links{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px}
.menu-links a{display:block;padding:12px 0;border-bottom:1px solid var(--line);color:var(--text);text-decoration:none;font:700 1.05rem var(--f-head);transition:color .25s,padding .3s var(--ease)}
.menu-links a:hover{color:var(--gold);padding-left:6px}
.menu-side{display:grid;gap:18px;align-content:start}
.menu-card{background:var(--cream);color:var(--ink);border-radius:var(--r-lg);padding:24px;display:grid;gap:12px}
.menu-card .sign{color:var(--copper)}
.menu-card p{color:var(--ink-mut)}
.menu .stg{opacity:0;transform:translateY(18px)}
.menu.open .stg{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .6s var(--ease);transition-delay:calc(.18s + var(--i,0) * .05s)}
body.menu-open{overflow:hidden}

/* ---------- secciones ---------- */
.sec{padding-block:clamp(72px,11vw,128px);position:relative}
.sec.alt{background:var(--bg2)}
.sec.snap{scroll-snap-align:start}
.sec-head{display:grid;gap:16px;margin-bottom:clamp(36px,5vw,56px);max-width:760px}
.sec-head.center{margin-inline:auto;text-align:center;justify-items:center}
.paper{background:var(--cream);color:var(--ink)}
.paper .lead,.paper .mut{color:var(--ink-mut)}
.paper .eyebrow{color:var(--copper-ink)}
.paper .rule{background:var(--copper)}

/* ---------- portada ---------- */
.hero{position:relative;min-height:min(100svh,920px);display:flex;align-items:center;padding-top:calc(var(--header) + 40px);padding-bottom:64px;overflow:hidden}
/* foto a todo el ancho, fundida con el fondo */
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-bg img{position:absolute;top:0;right:0;width:min(78%,1200px);height:100%;object-fit:cover;object-position:50% 22%;transform:scale(1.04) translateY(var(--py,0px));filter:saturate(.92) contrast(1.04)}
.hero-bg::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,var(--bg) 18%,color-mix(in srgb,var(--bg) 82%,transparent) 36%,color-mix(in srgb,var(--bg) 25%,transparent) 62%,color-mix(in srgb,var(--bg) 45%,transparent) 100%),
  linear-gradient(0deg,var(--bg) 0%,transparent 32%),
  linear-gradient(180deg,color-mix(in srgb,var(--bg) 70%,transparent) 0%,transparent 22%),
  radial-gradient(60% 70% at 72% 40%,transparent 40%,color-mix(in srgb,var(--copper) 10%,transparent) 100%)}
.hero .wrap{position:relative;z-index:1;display:grid;gap:44px;align-items:center}
.hero-copy{max-width:640px}
@media(max-width:899px){
  .hero{align-items:flex-end}
  .hero-bg img{width:100%;height:min(108vw,620px);object-position:60% 30%;transform:translateY(var(--py,0px))}
  .hero-bg img{-webkit-mask-image:linear-gradient(180deg,#000 45%,rgba(0,0,0,.55) 72%,transparent 100%);mask-image:linear-gradient(180deg,#000 45%,rgba(0,0,0,.55) 72%,transparent 100%)}
  .hero-bg::after{background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 55%,transparent) 0%,transparent 18%)}
  .hero{padding-top:calc(var(--header) + min(62vw,360px))}
}
.hero-copy{display:grid;gap:22px;justify-items:start}
.hero h1 .gold{color:var(--gold)}
.hero-tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{font:700 .74rem/1 var(--f-head);letter-spacing:.12em;text-transform:uppercase;padding:9px 12px;border-radius:999px;background:var(--panel);border:1px solid var(--line);color:var(--text)}
.hero-photo{position:relative;justify-self:center;width:min(100%,440px)}
.hero-photo .arch{position:relative;border-radius:240px 240px 26px 26px;overflow:hidden;aspect-ratio:4/5;background:var(--panel);box-shadow:0 40px 80px -30px #000}
.hero-photo .arch img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;transform:scale(1.08) translateY(var(--py,0px));transition:transform .2s linear}
.hero-photo .ring{position:absolute;inset:-14px;border-radius:254px 254px 36px 36px;border:1.5px solid color-mix(in srgb,var(--gold) 60%,transparent);pointer-events:none}
.hero-photo .badge{position:absolute;left:-18px;bottom:34px;background:var(--cream);color:var(--ink);border-radius:16px;padding:14px 18px;box-shadow:0 20px 40px -18px #000;display:grid;gap:2px}
.hero-photo .badge b{font:800 1.8rem/1 var(--f-head)}
.hero-photo .badge span{font-size:.8rem;color:var(--ink-mut)}
.scroll-cue{min-height:44px;display:inline-flex;align-items:center;gap:10px;color:var(--mut);font-size:.88rem;text-decoration:none}
.scroll-cue i{width:22px;height:34px;border:1.5px solid var(--line);border-radius:12px;position:relative}
.scroll-cue i::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:var(--gold);animation:cue 1.8s infinite}
@keyframes cue{0%{opacity:0;transform:translateY(-3px)}40%{opacity:1}100%{opacity:0;transform:translateY(10px)}}

/* ---------- ofertas (3 tarjetas) ---------- */
.offers{display:grid;gap:20px}
@media(min-width:960px){.offers{grid-template-columns:repeat(3,1fr)}}
.offer{--mx:50%;--my:0%;position:relative;display:grid;grid-template-rows:auto auto 1fr auto;gap:18px;padding:30px;border-radius:var(--r-lg);background:var(--panel);border:1px solid var(--line);
  text-decoration:none;color:var(--text);overflow:hidden;min-height:480px;transition:transform .45s var(--ease),border-color .35s,box-shadow .45s var(--ease)}
.offer::before{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx) var(--my),color-mix(in srgb,var(--gold) 16%,transparent),transparent 60%);opacity:0;transition:opacity .4s;pointer-events:none}
.offer:hover{transform:translateY(-8px);border-color:color-mix(in srgb,var(--gold) 70%,transparent);box-shadow:0 30px 60px -30px #000}
.offer:hover::before{opacity:1}
.offer .art{height:150px;border-radius:var(--r);background:var(--bg);display:grid;place-items:center;overflow:hidden;position:relative}
.offer .art svg{width:100%;height:100%}
.offer.feat{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.offer.feat .art{background:var(--cream-2)}
.offer.feat p{color:var(--ink-mut)}
.offer.feat .eyebrow{color:var(--copper-ink)}
.offer p{color:var(--mut)}
.offer h3{font-size:clamp(1.45rem,2.3vw,1.85rem)}
.offer ul{list-style:none;display:grid;gap:8px;font-size:.96rem}
.offer li{display:flex;gap:10px;align-items:baseline}
.offer li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--gold);transform:translateY(-2px)}
.offer.feat li::before{background:var(--copper)}
.offer .cta{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:18px;border-top:1px solid var(--line)}
.offer.feat .cta{border-color:#e0d1bd}
.offer .cta b{font:800 1.05rem var(--f-head)}
.offer .arrow{width:52px;height:52px;border-radius:50%;background:var(--gold);color:var(--ink);display:grid;place-items:center;transition:transform .4s var(--ease)}
.offer.feat .arrow{background:var(--ink);color:var(--cream)}
.offer:hover .arrow{transform:rotate(-45deg) scale(1.06)}
.offer .arrow svg{width:22px;height:22px}
.ribbon{position:absolute;z-index:2;top:18px;right:18px;font:800 .66rem var(--f-head);letter-spacing:.14em;text-transform:uppercase;background:var(--ink);color:var(--gold);padding:7px 10px;border-radius:999px}

/* ---------- confianza ---------- */
.trust{display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:center;color:var(--mut);font:700 .92rem var(--f-head)}
.trust span{display:inline-flex;align-items:center;gap:10px}
.trust span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold)}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(min-width:800px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{padding:24px;border-radius:var(--r);background:var(--panel);border:1px solid var(--line)}
.stat b{display:block;font:800 clamp(2rem,4vw,2.8rem)/1 var(--f-head);color:var(--gold)}
.stat span{color:var(--mut);font-size:.92rem}

/* ---------- tarjetas genéricas ---------- */
.grid2,.grid3,.grid4{display:grid;gap:18px}
@media(min-width:760px){.grid2{grid-template-columns:1fr 1fr}.grid3{grid-template-columns:repeat(3,1fr)}.grid4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1280px){.grid4{grid-template-columns:repeat(4,1fr)}}
.grid2>*,.grid3>*,.grid4>*{min-width:0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;display:grid;gap:12px;align-content:start}
.card p{color:var(--mut)}
.paper .card{background:var(--paper);border-color:var(--paper-line)}
.paper .card p{color:var(--ink-mut)}
.tool{text-decoration:none;color:var(--text);transition:transform .4s var(--ease),border-color .3s}
.tool:hover{transform:translateY(-5px);border-color:var(--gold)}
.tool .ti{width:48px;height:48px;border-radius:12px;background:var(--bg);display:grid;place-items:center;color:var(--gold)}
.tool .ti svg{width:26px;height:26px}
.tool .more{color:var(--gold);font:700 .9rem var(--f-head)}

.steps{display:grid;gap:18px;counter-reset:st}
@media(min-width:800px){.steps.h{grid-template-columns:repeat(var(--n,3),1fr)}}
.step{counter-increment:st;display:grid;gap:8px;align-content:start}
.step::before{content:counter(st);font:400 2.6rem/1 var(--f-sign);color:var(--copper)}
.sec:not(.paper) .step::before{color:var(--gold)}
.steps.h .step{border-top:2px solid var(--line);padding-top:16px}
.paper .steps.h .step{border-color:var(--paper-line)}
.steps.h .step:first-child{border-color:var(--gold)}
.step b{font:800 1.12rem var(--f-head)}
.step p{color:var(--mut)}
.paper .step p{color:var(--ink-mut)}
.check{list-style:none;display:grid;gap:12px}
.check li{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start}
.check li::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--gold);margin-top:.45em}
.paper .check li::before{background:var(--copper)}
.check b{font-weight:700}

/* ---------- precios / planes ---------- */
.plans{display:grid;gap:20px;align-items:stretch}
@media(min-width:980px){.plans{grid-template-columns:1fr 1fr 1.15fr}}
.plan{position:relative;display:flex;flex-direction:column;gap:18px;padding:32px;border-radius:var(--r-lg);background:var(--paper);border:1px solid var(--paper-line);color:var(--ink)}
.plan>.btn:last-child{margin-top:auto}
.plan .ribbon{top:-14px;left:32px;right:auto}
.plan .eyebrow{color:var(--copper-ink)}
.plan .price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.plan .price b{font:800 3.2rem/1 var(--f-head)}
.plan .price span{color:var(--ink-mut);font-weight:600}
.plan .note{font-size:.88rem;color:var(--ink-mut)}
.plan.best{background:var(--ink);color:var(--cream);border-color:var(--ink);box-shadow:0 40px 80px -40px rgba(36,26,20,.9)}
.plan.best .eyebrow{color:var(--gold)}
.plan.best .price span,.plan.best .note{color:var(--paper-mut)}
.plan.best .check li::before{background:var(--gold)}
.plan .split{display:grid;gap:14px}
@media(min-width:520px){.plan .split{grid-template-columns:1fr 1fr}}
.plan .mini{border:1px solid var(--paper-line);border-radius:var(--r);padding:16px;display:grid;gap:8px}
.plan .mini b.p{font:800 2rem/1 var(--f-head)}
.save{font-family:var(--f-sign);font-size:1.55rem;color:var(--gold);line-height:1.1}
.strike{text-decoration:line-through;opacity:.7}
.tbl-wrap{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--paper-line);background:var(--paper)}
table.cmp{width:100%;border-collapse:collapse;min-width:560px;font-size:.98rem}
.cmp th{background:var(--ink);color:var(--cream);font:700 .74rem var(--f-head);letter-spacing:.14em;text-transform:uppercase;text-align:left;padding:16px 18px}
.cmp td{padding:15px 18px;border-top:1px solid #ecdfcd}
.cmp tr.total td{font-weight:800}
.cmp .yes{font-weight:700;color:#3f6b2b}
.cmp .hl{color:var(--copper-ink);font-weight:800}

/* ---------- formularios ---------- */
.form{display:grid;gap:14px}
.row2{display:grid;gap:14px}
@media(min-width:600px){.row2{grid-template-columns:1fr 1fr}}
label{display:grid;gap:6px;font:600 .88rem var(--f-body);color:var(--mut)}
.paper label{color:var(--ink-mut)}
input,select,textarea{width:100%;min-height:50px;background:var(--bg);border:1.5px solid color-mix(in srgb,var(--mut) 65%,var(--bg));color:var(--text);border-radius:12px;padding:12px 14px;font:500 1rem var(--f-body);transition:border-color .25s,box-shadow .25s}
textarea{min-height:110px;resize:vertical}
.paper input,.paper select,.paper textarea{background:#fff;border-color:var(--ink-mut);color:var(--ink)}
.paper input:focus,.paper select:focus,.paper textarea:focus{border-color:var(--copper-ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 20%,transparent)}
.form-box{padding:clamp(24px,4vw,40px);border-radius:var(--r-lg);background:var(--panel);border:1px solid var(--line)}
.paper .form-box{background:var(--paper);border-color:var(--paper-line)}
.ok{border-radius:12px;padding:14px 16px;background:color-mix(in srgb,var(--bull) 18%,transparent);border:1px solid var(--bull);font-size:.95rem}
.paper .ok{background:#eaf1e2;border-color:#7da065;color:#2d4720}
.fine{font-size:.82rem;color:var(--mut)}
.paper .fine{color:var(--ink-mut)}

/* ---------- interior: cabecera de página ---------- */
.page-hero{padding-top:calc(var(--header) + clamp(48px,8vw,96px));padding-bottom:clamp(56px,8vw,96px);position:relative;overflow:hidden}
.page-hero::before{content:"";position:absolute;width:640px;height:640px;border-radius:50%;right:-200px;top:-240px;background:var(--bg2)}
.page-hero .wrap{position:relative;display:grid;gap:40px;align-items:center}
@media(min-width:900px){.page-hero .wrap{grid-template-columns:1.2fr .8fr}}
.page-hero .copy{display:grid;gap:22px;justify-items:start}
.page-hero .art{border-radius:var(--r-lg);background:var(--panel);border:1px solid var(--line);aspect-ratio:5/4;max-width:100%;display:grid;place-items:center;overflow:hidden}
.page-hero .art svg{width:100%;height:100%}
.crumbs{font-size:.86rem;color:var(--mut)}
.crumbs a{color:var(--mut);text-decoration:none}
.crumbs a:hover{color:var(--gold)}
.callout{border-radius:var(--r-lg);padding:24px 28px;background:var(--cream-2);color:var(--ink);display:grid;gap:6px}
.callout b{font-family:var(--f-head)}
.warn{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;background:color-mix(in srgb,var(--copper) 22%,transparent);border:1px solid var(--copper);font:700 .9rem var(--f-head)}

/* copy trading */
.prof{display:grid;gap:14px}
.prof .top{display:flex;justify-content:space-between;gap:10px;align-items:start}
.risk{font:800 .64rem/1 var(--f-head);letter-spacing:.12em;text-transform:uppercase;padding:6px 9px;border-radius:999px;white-space:nowrap}
.r-low{background:color-mix(in srgb,var(--bull) 22%,transparent);color:var(--bull)}
.r-mid{background:color-mix(in srgb,var(--gold) 22%,transparent);color:var(--gold)}
.r-high{background:color-mix(in srgb,var(--bear) 22%,transparent);color:#ec9a86}
.ret{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;text-align:center}
.ret div{background:var(--bg);border-radius:10px;padding:10px 4px}
.ret small{display:block;font-size:.66rem;color:var(--mut);text-transform:uppercase;letter-spacing:.1em}
.ret b{font:700 1rem var(--f-body);font-variant-numeric:tabular-nums}
.up{color:var(--bull)}.dn{color:#ec9a86}.na{color:var(--mut)}
.kv{display:grid;font-size:.92rem}
.kv div{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--line)}
.kv span{color:var(--mut)}.kv b{font-weight:600;font-variant-numeric:tabular-nums}
.spark{width:100%;height:46px;display:block}
.locked{opacity:.7;cursor:not-allowed}
.prof .btn{white-space:normal;width:100%;text-align:center;line-height:1.2;padding-block:10px}

/* testimonios */
.testi .amt{font:800 2.6rem/1 var(--f-head);color:var(--bull)}
.testi .empty{border-style:dashed;background:transparent;place-content:center;text-align:center;min-height:200px}

/* calculadora */
.calc{display:grid;gap:22px}
@media(min-width:900px){.calc{grid-template-columns:1.1fr .9fr}}
.result{display:grid;gap:16px;align-content:center;padding:32px;border-radius:var(--r-lg);background:var(--cream);color:var(--ink)}
.result .lots{font:800 clamp(4rem,9vw,6rem)/.9 var(--f-head);font-variant-numeric:tabular-nums}
.result .kv div{border-color:var(--paper-line)}.result .kv span{color:var(--ink-mut)}

/* noticias */
.cal{width:100%;border-collapse:collapse;min-width:520px}
.cal th{font:700 .72rem var(--f-head);letter-spacing:.12em;text-transform:uppercase;color:var(--mut);text-align:left;padding:12px}
.cal td{padding:14px 12px;border-top:1px solid var(--line);vertical-align:top}
.cal .t{white-space:nowrap;font-variant-numeric:tabular-nums}
.bulls{color:var(--gold);letter-spacing:2px;white-space:nowrap}
.tblx{overflow-x:auto}

/* prop firms */
.code{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1.5px dashed var(--gold);border-radius:12px;padding:8px 8px 8px 16px}
.code b{font:800 1.1rem var(--f-head);letter-spacing:.1em;color:var(--gold)}

/* descargas */
.dl{display:flex;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.dl .ic{flex:none;width:44px;height:54px;border-radius:6px;border:1px solid var(--line);background:var(--panel);display:grid;place-items:center;font:800 .62rem var(--f-head);color:var(--gold)}
.dl div{flex:1;min-width:0}.dl b{display:block}.dl span{font-size:.88rem;color:var(--mut)}
.dl .lk{flex:none;font:700 .7rem var(--f-head);letter-spacing:.1em;color:var(--mut)}

/* ---------- pie ---------- */
.site-footer{background:var(--bg2);border-top:1px solid var(--line);padding-block:64px 150px}
.foot{display:grid;gap:36px}
@media(min-width:860px){.foot{grid-template-columns:1.2fr 1fr 1fr}}
.foot-h{font:800 .8rem var(--f-head);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.foot ul{list-style:none;display:grid;gap:8px}
.foot a{color:var(--text);text-decoration:none}
.foot a:hover{color:var(--gold)}
.legal{font-size:.82rem;color:var(--mut);max-width:95ch;margin-top:40px;padding-top:24px;border-top:1px solid var(--line);display:grid;gap:10px}

/* ---------- Toro ---------- */
.toro{position:fixed;right:max(14px,env(safe-area-inset-right,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:55;display:flex;align-items:flex-end;gap:8px;pointer-events:none}
.toro .bubble{pointer-events:auto;max-width:250px;background:var(--cream);color:var(--ink);border-radius:16px 16px 4px 16px;padding:12px 14px;font:600 .88rem/1.4 var(--f-body);box-shadow:0 14px 34px -12px #000;margin-bottom:62px;transition:opacity .3s,transform .3s var(--ease)}
.toro .bubble.swap{opacity:0;transform:translateY(8px) scale(.96)}
.toro .bubble a{color:var(--copper-ink);font-weight:700}
.toro button{pointer-events:auto;border:0;background:none;padding:0;cursor:pointer}
.toro svg{width:96px;height:96px;display:block;filter:drop-shadow(0 12px 16px rgba(0,0,0,.5));animation:bob 3.4s ease-in-out infinite;transform-origin:50% 100%}
.toro.hop svg{animation:hop .65s cubic-bezier(.3,1.6,.5,1)}
.toro.mini .bubble{display:none}
@media(max-width:1500px){.toro .bubble{max-width:210px}}
@keyframes bob{50%{transform:translateY(-5px) rotate(-2deg)}}
@keyframes hop{30%{transform:translateY(4px) scale(1.08,.9)}60%{transform:translateY(-22px) scale(.95,1.06) rotate(6deg)}100%{transform:none}}
@media(max-width:640px){.toro svg{width:68px;height:68px}.toro .bubble{max-width:190px;font-size:.8rem;margin-bottom:44px}}

/* ---------- aparición al bajar ---------- */
.js .rv.wait{opacity:0;transform:translateY(28px)}
.js .rv{transition:opacity .8s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--d,0) * 90ms)}

/* ---------- transición entre páginas ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .45s var(--ease) both}
::view-transition-new(root){animation:vt-in .6s var(--ease) both}
::view-transition-group(*){animation-duration:.6s;animation-timing-function:var(--ease)}
@keyframes vt-out{to{opacity:0;transform:scale(.97);filter:blur(4px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(28px)}}
.site-header{view-transition-name:header}
.toro{view-transition-name:toro}
/* telón para navegadores sin View Transitions */
.curtain{position:fixed;inset:0;z-index:90;pointer-events:none;background:var(--bg);display:grid;place-items:center;opacity:0;transition:opacity .35s var(--ease)}
.curtain img{width:180px;opacity:.9}
.curtain.on{opacity:1;pointer-events:auto}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .js .rv.wait{opacity:1;transform:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}

/* tarjeta destacada: textos del dibujo sobre crema */
.offer.feat .art text{fill:var(--ink)}
.offer.feat .art text+text,.offer.feat .art g text{fill:var(--ink-mut)}
/* tabla de planes en celular: dos columnas */
@media(max-width:640px){
  table.cmp{min-width:0}
  table.cmp thead th:nth-child(2),table.cmp td:nth-child(2){display:none}
  .cmp th,.cmp td{padding:13px 14px}
}
/* encabezado en páginas de servicio: botón secundario */
.svc .head-cta{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1.5px var(--gold)}
.svc .head-cta::after{display:none}

/* accesibilidad */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.paper :focus-visible,.plan :focus-visible,.offer.feat:focus-visible,.menu-card :focus-visible,.result :focus-visible{outline-color:var(--ink)}
.consent{display:flex;gap:12px;align-items:flex-start;font-weight:500}
.consent input{width:22px;min-height:22px;height:22px;margin-top:2px;flex:none;accent-color:var(--gold);padding:0}
details>summary{min-height:44px;display:flex;align-items:center;gap:8px;cursor:pointer;font:700 1rem var(--f-head)}
.menu-top .brand{display:inline-flex;align-items:center;min-height:44px}

/* videos de YouTube */
.vid{display:grid;gap:10px;align-content:start;text-decoration:none;color:var(--text)}
.vid .th{position:relative;display:block;aspect-ratio:16/9;max-width:100%;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--panel)}
.vid .th img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease),filter .4s}
.vid .play{position:absolute;left:50%;top:50%;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;background:color-mix(in srgb,var(--bg) 60%,transparent);backdrop-filter:blur(6px);border:1.5px solid color-mix(in srgb,var(--cream) 50%,transparent);transition:transform .4s var(--ease),background .3s}
.vid .play::after{content:"";position:absolute;left:25px;top:20px;border-left:16px solid var(--cream);border-top:11px solid transparent;border-bottom:11px solid transparent}
.vid .dur{position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,.75);color:#fff;font:600 .78rem var(--f-body);padding:3px 7px;border-radius:6px;font-variant-numeric:tabular-nums}
.vid b{font:800 1.08rem/1.3 var(--f-head)}
.vid:hover .th img{transform:scale(1.05);filter:brightness(1.08)}
.vid:hover .play{transform:scale(1.12);background:var(--gold)}
.vid:hover .play::after{border-left-color:var(--ink)}
.vid:hover b{color:var(--gold)}
.vids{row-gap:34px}