/* TradingLab design layer. Sistema visual: landing-page-design (Part B).
   Tokens: Geist, spacing 0..96, radios Tailwind, fondo oscuro neutro, motion con curva base. */

:root{
  --ink:#0c0c0c; --panel:#1d1d1d; --panel-2:#242424; --surface-3:#2b2b2b; --surface-4:#383838;
  --line:#272727; --line-2:#313131;
  --text:#F5F5F5; --muted:#9B9B9B; --paper:#F5F5F5;
  --mint:#D6F25C; --red:#FF6B6B; --violet:#8B7BFF;
  --gold:#D6F25C; --gold-soft:#D6F25C;
  --ease:cubic-bezier(0.22,1,0.36,1);
}

html{background:#0c0c0c;}
body{background:#0c0c0c; color:var(--text); font-family:'Figtree',system-ui,sans-serif;}
h1,h2,h3,h4{text-wrap:balance; font-family:'Bricolage Grotesque',sans-serif; font-weight:800; letter-spacing:-0.03em;}
p,li,blockquote,figcaption{text-wrap:pretty;}
em,i:not(.ph),cite,address{font-style:normal;}
b,strong{font-weight:600;}
code,pre,kbd,samp{font-family:'Geist Mono',ui-monospace,monospace;}
.ph{vertical-align:-0.125em; line-height:1;}

/* ---------- accesibilidad ---------- */
.skip-link{position:absolute; left:16px; top:-96px; z-index:200; background:var(--mint); color:#000; font-weight:600; font-size:14px; padding:8px 12px; border-radius:8px; text-decoration:none; transition:transform .3s var(--ease);}
.skip-link:focus{transform:translateY(112px);}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--mint); outline-offset:2px;}
#main{outline:none;}

/* ---------- botones ---------- */
.btn{font-size:16px; line-height:24px; font-weight:600; padding:8px 12px; border-radius:8px; transition:transform .5s var(--ease), background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), opacity .3s var(--ease); box-shadow:none;}
.btn:hover,.btn:focus-visible{transform:translateY(-2px); box-shadow:none; background-color:#5BE0AF;}
.btn:active{transform:scale(0.98);}
.btn.ghost{background:transparent; color:var(--text); border:1px solid var(--surface-4);}
.btn.ghost:hover,.btn.ghost:focus-visible{background:var(--panel-2); border-color:var(--muted); color:var(--text); box-shadow:none;}
.btn[disabled],.btn.is-disabled{opacity:.4; pointer-events:none;}
header.nav .btn{font-size:14px; line-height:20px;}

/* ---------- marquee ---------- */
.marquee-wrap{background:var(--panel); border-bottom:1px solid var(--line);}
.marquee-track a{color:var(--muted);}
.marquee-track a b{color:var(--text);}

/* ---------- nav flotante ---------- */
header.nav{
  position:sticky; top:16px; z-index:100;
  width:fit-content; max-width:calc(100% - 32px);
  margin:16px auto 0;
  background:rgba(24,24,24,0.72);
  border:1px solid var(--line-2); border-radius:16px;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  isolation:isolate;
}
header.nav::before{content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:rgba(24,24,24,0.72); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);}
header.nav{background:transparent;}
.nav-inner{padding:8px 8px 8px 16px; gap:8px; max-width:none; margin:0;}
nav.links{margin-left:16px; gap:4px; font-size:14px; line-height:20px;}
nav.links a{padding:8px 12px; border-radius:8px; transition:color .3s var(--ease), background-color .3s var(--ease);}
nav.links a::after{display:none;}
nav.links a:hover,nav.links a:focus-visible{background:var(--panel-2); color:var(--text);}
nav.links a[aria-current="page"],nav.links a.active{color:var(--text); background:var(--surface-3);}
.nav-actions{gap:8px; margin-left:16px;}
.logo{font-family:'Bricolage Grotesque',sans-serif; font-weight:800; letter-spacing:-0.02em;}
.logo em{color:var(--gold);}

.nav-hamburger{position:relative; z-index:120; width:40px; height:40px; border-radius:8px; gap:0; align-items:center; margin-left:auto;}
.nav-hamburger span{position:absolute; left:10px; width:20px; height:2px; background:var(--text); transition:transform .5s var(--ease), opacity .3s var(--ease);}
.nav-hamburger span:nth-child(1){transform:translateY(-6px);}
.nav-hamburger span:nth-child(3){transform:translateY(6px);}
.nav-hamburger.open span:nth-child(1){transform:translateY(0) rotate(45deg);}
.nav-hamburger.open span:nth-child(2){opacity:0;}
.nav-hamburger.open span:nth-child(3){transform:translateY(0) rotate(-45deg);}

@media (max-width:1220px){
  header.nav{width:auto; max-width:none; margin:16px 16px 0; }
  .nav-inner{justify-content:space-between;}
  .nav-actions{margin-left:0;}
  .nav-actions .nav-consult-btn{display:none;}
  nav.links{
    position:fixed; inset:0; z-index:110; margin:0; padding:96px 24px 48px;
    flex-direction:column; justify-content:flex-start; gap:0;
    background:rgba(0,0,0,0.92); backdrop-filter:blur(32px); -webkit-backdrop-filter:blur(32px);
    border:none; max-height:none; overflow-y:auto;
    opacity:0; visibility:hidden; pointer-events:none;
    transform:translateY(-8px);
    transition:opacity .5s var(--ease), transform .5s var(--ease), visibility 0s linear .5s;
  }
  nav.links.mobile-open{max-height:none; padding:96px 24px 48px; opacity:1; visibility:visible; pointer-events:auto; transform:none; transition:opacity .5s var(--ease), transform .5s var(--ease), visibility 0s;}
  nav.links a{font-size:30px; line-height:36px; font-weight:600; padding:16px 0; border-bottom:1px solid var(--line); border-radius:0; background:none; opacity:0; transform:translateY(24px); transition:opacity .5s var(--ease), transform .5s var(--ease), color .3s var(--ease);}
  nav.links a:last-child{border-bottom:1px solid var(--line);}
  nav.links.mobile-open a{opacity:1; transform:none;}
  nav.links.mobile-open a:nth-child(1){transition-delay:0ms;}
  nav.links.mobile-open a:nth-child(2){transition-delay:60ms;}
  nav.links.mobile-open a:nth-child(3){transition-delay:120ms;}
  nav.links.mobile-open a:nth-child(4){transition-delay:180ms;}
  nav.links.mobile-open a:nth-child(5){transition-delay:240ms;}
  nav.links.mobile-open a:nth-child(6){transition-delay:300ms;}
  nav.links.mobile-open a:nth-child(n+7){transition-delay:360ms;}
  nav.links a:hover,nav.links a:focus-visible{background:none; color:var(--mint);}
}

/* ---------- hero ---------- */
.hero,.article-hero,.page-hero,.tool-hero,.pymes-hero{background:transparent;}
.hero h1,.article-hero h1,.page-hero h1,.tool-hero h1,.pymes-hero h1{
  max-width:680px;
  background-image:linear-gradient(90deg,#FFFFFF 0%,#9B9B9B 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.hero h1 .accent,.hero h1 em{-webkit-text-fill-color:var(--mint); color:var(--mint); background:none;}
.hero .lead,.article-hero .lead,.page-hero .lead,.tool-hero .lead,.pymes-hero .lead,.hero p.lead{max-width:680px;}
.eyebrow{font-family:'Geist Mono',monospace; letter-spacing:0.08em; font-weight:500; color:var(--gold);}

/* ---------- superficies ---------- */
.hero-card,.tr-card,.hl-item,.stat,.about-copy,.pb-card,.edu-card,.res-card,.step,.contact-form,.faq-item{border-color:var(--line);}
.hero-card,.tr-card,.edu-card,.res-card,.contact-form,.pb-card{background:var(--panel);}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(32px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.reveal.in{opacity:1; transform:none;}
.num-item{transform:translateY(32px); transition:opacity .7s var(--ease), transform .7s var(--ease);}
.num-item.in{transform:none;}
.numbers-band::before{display:none;}
.num-value{color:var(--mint); font-weight:600; letter-spacing:-0.03em; white-space:nowrap; font-size:clamp(48px,6vw,72px);}

/* ---------- tagline reveal (B11) ---------- */
.tagline{padding:96px 0; border-bottom:1px solid var(--line);}
.tagline-text{max-width:680px; margin:0 auto; text-align:left; font-size:36px; line-height:40px; font-weight:600; letter-spacing:-0.02em; text-wrap:balance;}
.tagline-text .w{opacity:.3; transition:opacity .5s var(--ease);}
.tagline-text .w.on{opacity:1;}
@media (min-width:768px){ .tagline-text{font-size:48px; line-height:1;} }
@media (min-width:1100px){ .tagline-text{font-size:60px; line-height:1; max-width:880px;} }

/* ---------- formularios ---------- */
input,select,textarea{font-family:'Figtree',sans-serif; border-radius:8px; background:var(--panel); border:1px solid var(--surface-4); color:var(--text);}
input:focus,select:focus,textarea:focus{border-color:var(--mint);}
.form-status,.np-status{font-size:14px; line-height:20px;}

/* ---------- footer ---------- */
footer{background:#0c0c0c; border-top:1px solid var(--line);}

@media (prefers-reduced-motion:reduce){
  .reveal,.num-item,nav.links a{opacity:1 !important; transform:none !important;}
  .tagline-text .w{opacity:1 !important;}
  nav.links{transform:none;}
  html{scroll-behavior:auto;}
}

/* mobile: el CTA pasa al menu desplegable */
.menu-cta{display:none;}
@media (max-width:640px){
  .nav-actions{display:none;}
  nav.links a.menu-cta{display:inline-flex; width:fit-content; margin-top:24px; font-size:16px; line-height:24px; padding:8px 12px; border:none; background:var(--mint); color:#000; border-radius:8px; font-weight:600;}
}
.footer-links{flex-wrap:wrap; row-gap:8px;}
@media (max-width:1220px){ nav.links a{color:var(--text);} nav.links a[aria-current="page"]{color:var(--mint); background:none;} }
@media (max-width:640px){ .btn{white-space:normal; max-width:100%; text-align:center; justify-content:center;} }

/* ---------- cruces herramientas <-> educación ---------- */
.xlinks{padding:48px 0 64px;}
.xlinks .xl-sub{margin:8px 0 20px; color:var(--muted); font-size:16px;}
.xl-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:8px;}
.xl-card{position:relative; display:flex; flex-direction:column; gap:8px; min-height:120px; padding:20px; border-radius:16px; background:var(--panel); border:1px solid var(--line); text-decoration:none; color:var(--text); transition:transform .5s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);}
.xl-card b{font-family:'Bricolage Grotesque',sans-serif; font-size:20px; line-height:24px; letter-spacing:-0.02em; font-weight:800;}
.xl-card .xl-tag{font-family:'Geist Mono',monospace; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);}
.xl-card i.ph{margin-top:auto; color:var(--mint); font-size:20px;}
.xl-card:hover,.xl-card:focus-visible{transform:translateY(-4px); border-color:var(--mint); background:var(--panel-2);}
.xl-nl{background:var(--mint); color:#111; border-color:var(--mint);} .xl-nl .xl-tag,.xl-nl i.ph{color:#111;} .xl-nl:hover{background:#E4F78A;}

.logo .lb{background:var(--mint); color:#111; padding:0 6px; border-radius:8px; margin-left:2px;}
.logo{display:inline-flex; align-items:center; gap:0; text-transform:none;}