/* ── tokens (escala Fibonacci: 3 5 8 13 21 34 55 89) ───────────────── */
:root{
  --bg:#0b0a08; --bg2:#12100c; --panel:#16130e; --line:#2a241a; --line2:#3a3123;
  --ink:#ece4d4; --dim:#9a8f7b; --mute:#6b6253;
  --gold:#e8b44a; --gold2:#f5cf7a; --gold-ink:#1a1307;
  --ok:#7fd49a; --bad:#ef7a6a;
  --s1:3px; --s2:5px; --s3:8px; --s4:13px; --s5:21px; --s6:34px; --s7:55px; --s8:89px;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
::selection{background:var(--gold);color:var(--gold-ink)}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--s5)}
@media(max-width:640px){.wrap{padding:0 16px}}
.mono{font-family:var(--mono)}
.k{font:600 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
h1,h2,h3{font-family:var(--mono);font-weight:700;letter-spacing:-.02em;line-height:1.08}
h2{font-size:clamp(28px,4.2vw,44px);margin:var(--s4) 0 var(--s5)}
h3{font-size:18px;letter-spacing:-.01em}
p.lead{color:var(--dim);font-size:18px;max-width:62ch}
section{padding:var(--s8) 0;border-top:1px solid var(--line)}
@media(max-width:640px){section{padding:var(--s7) 0}}

/* nav */
.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:var(--gold-ink);padding:var(--s3) var(--s4);z-index:50;font:600 13px var(--mono)}
.skip:focus{left:var(--s4);top:var(--s3)}
nav.top{position:sticky;top:0;z-index:30;background:rgba(11,10,8,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
nav.top .wrap{display:flex;align-items:center;justify-content:space-between;height:60px;gap:var(--s5)}
.brand{font:700 15px var(--mono);letter-spacing:.08em;text-decoration:none;display:flex;gap:var(--s3);align-items:center;white-space:nowrap}
.brand b{color:var(--gold)} .brand span{color:var(--mute);font-weight:500;font-size:11px;letter-spacing:.12em}
.menu{display:flex;align-items:center;gap:var(--s5);list-style:none;font:500 13px var(--mono)}
.menu a,.menu button{color:var(--dim);text-decoration:none;background:none;border:0;font:inherit;cursor:pointer;padding:var(--s3) 0;display:flex;align-items:center;gap:var(--s2)}
.menu a:hover,.menu button:hover,.menu [aria-current=page]{color:var(--gold)}
.menu [aria-current=page]{box-shadow:inset 0 -2px 0 var(--gold)}
.has-sub{position:relative}
.has-sub>button::after{content:"▾";font-size:10px}
.sub{position:absolute;top:calc(100% + var(--s3));left:calc(-1 * var(--s5));min-width:300px;background:var(--bg2);border:1px solid var(--line2);list-style:none;padding:var(--s3);display:none;box-shadow:0 21px 34px rgba(0,0,0,.45)}
.has-sub.open .sub{display:block}
.sub a{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:var(--s3) var(--s4);color:var(--ink)}
.sub a small{font:12px var(--sans);color:var(--mute)}
.sub a:hover{background:var(--panel);color:var(--gold)}
.sub li.all{border-top:1px solid var(--line);margin-top:var(--s2);padding-top:var(--s2)}
.sub li.all a{color:var(--gold)}
.nav-cta{display:flex;align-items:center;gap:var(--s4)}
#navToggle{display:none;background:none;border:1px solid var(--line2);color:var(--ink);font:600 12px var(--mono);padding:var(--s3) var(--s4);cursor:pointer}
@media(max-width:980px){
  #navToggle{display:inline-flex}
  .nav-cta .btn{display:none}
  .menu{display:none;position:absolute;top:60px;left:0;right:0;height:calc(100dvh - 60px);background:var(--bg);flex-direction:column;align-items:stretch;gap:0;padding:var(--s4) 16px var(--s7);overflow-y:auto;border-top:1px solid var(--line)}
  .menu.open{display:flex}
  .menu>li{border-bottom:1px solid var(--line)}
  .menu a,.menu button{padding:var(--s4) 0;font-size:15px;width:100%;justify-content:space-between}
  .menu [aria-current=page]{box-shadow:none}
  .sub{position:static;display:block;min-width:0;border:0;background:none;box-shadow:none;padding:0 0 var(--s3) var(--s4)}
  .has-sub>button::after{display:none}
  .sub a{padding:var(--s3) 0}
  .menu .mob-cta{display:block;border:0;padding-top:var(--s5)}
  .menu .mob-cta .btn{width:100%;justify-content:center}
  body.nav-open{overflow:hidden}
}
.menu .mob-cta{display:none}

/* bienvenida y generación IA */
.welcome{position:fixed;inset:0;z-index:60;background:rgba(11,10,8,.82);display:grid;place-items:center;padding:var(--s5)}
.welcome[hidden]{display:none}.welcome-card{position:relative;max-width:560px;border:1px solid var(--gold);background:var(--bg2);padding:var(--s7);box-shadow:0 21px 55px rgba(0,0,0,.5)}
.welcome-card h2{margin:var(--s4) 0}.welcome-card p{color:var(--dim);max-width:52ch}.welcome-close{position:absolute;top:var(--s3);right:var(--s4);border:0;background:none;color:var(--dim);font:24px var(--mono);cursor:pointer}.ai-form{display:flex;flex-direction:column;gap:var(--s4);border:1px solid var(--line2);padding:var(--s5);background:var(--bg2)}.ai-form>label{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}.ai-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4)}.ai-output{min-height:150px;border:1px dashed var(--line2);padding:var(--s4);white-space:pre-wrap;color:var(--dim);font:14px/1.7 var(--mono)}

/* botones */
.btn{display:inline-flex;align-items:center;gap:var(--s3);font:600 14px var(--mono);padding:var(--s4) var(--s5);border:1px solid var(--gold);text-decoration:none;cursor:pointer;background:transparent;color:var(--gold);transition:background .15s,color .15s}
.btn:hover{background:rgba(232,180,74,.12)}
.btn.solid{background:var(--gold);color:var(--gold-ink)} .btn.solid:hover{background:var(--gold2)}
.btn.sm{padding:var(--s3) var(--s4);font-size:12px}
.btn:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--gold2);outline-offset:2px}

/* hero */
.hero{padding:var(--s8) 0 var(--s7);position:relative}
.hero::before{content:"";position:absolute;inset:0;background:
  linear-gradient(var(--line) 1px,transparent 1px) 0 0/34px 34px,
  linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/34px 34px;
  opacity:.35;mask-image:radial-gradient(ellipse 70% 60% at 30% 30%,#000 20%,transparent 75%);pointer-events:none}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.618fr 1fr;gap:var(--s7);align-items:center}
@media(max-width:900px){.hero .wrap{grid-template-columns:1fr;gap:var(--s6)}}
.hero h1{font-size:clamp(34px,4.6vw,56px);margin:var(--s5) 0}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero p.lead code{font-family:var(--mono);font-size:.86em;color:var(--gold2);background:var(--panel);padding:1px 6px;border:1px solid var(--line);overflow-wrap:anywhere}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--s4);margin-top:var(--s6)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s5);font:12px var(--mono);color:var(--dim)}
.chips span{border:1px solid var(--line2);padding:var(--s2) var(--s3)}
.chips span::before{content:"✓ ";color:var(--ok)}
.diff{border:1px solid var(--line2);background:var(--bg2);font:12px/1.8 var(--mono);overflow:hidden}
.diff header{display:flex;justify-content:space-between;padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);color:var(--mute);font-size:12px}
.diff pre{padding:var(--s4);white-space:pre-wrap;overflow-wrap:anywhere}
.diff .m{color:var(--bad)} .diff .p{color:var(--ok)} .diff .r{color:var(--gold)}

/* problema */
.split{display:grid;grid-template-columns:1fr 1.618fr;gap:var(--s7)}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:var(--s5)}}
.leaks{list-style:none;display:grid;gap:var(--s3);font:14px var(--mono)}
.leaks li{display:flex;gap:var(--s4);padding:var(--s4);border:1px solid var(--line);background:var(--bg2)}
.leaks li span:first-child{color:var(--bad);min-width:84px}
.note{margin-top:var(--s5);color:var(--dim);max-width:72ch}

/* qué compra */
.buy{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line)}
@media(max-width:900px){.buy{grid-template-columns:1fr}}
.buy>div{padding:var(--s6) var(--s5);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.buy>div:nth-child(3n){border-right:0}
.buy>div:nth-last-child(-n+3){border-bottom:0}
@media(max-width:900px){.buy>div{border-right:0;border-bottom:1px solid var(--line)!important}.buy>div:last-child{border-bottom:0!important}}
.buy .n{font:700 13px var(--mono);color:var(--gold);margin-bottom:var(--s4)}
.buy p{color:var(--dim);margin-top:var(--s3);font-size:15px}

/* demo */
.demo{border:1px solid var(--line2);background:var(--bg2)}
.bar{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s5);align-items:end;padding:var(--s5);border-bottom:1px solid var(--line)}
.field{display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.field label{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
input,select,textarea{font:13px/1.6 var(--mono);color:var(--ink);background:var(--bg);border:1px solid var(--line2);padding:var(--s3) var(--s4);border-radius:0;width:100%}
textarea{resize:vertical}
.seed{flex:1 1 360px}
.seed .row{display:flex;gap:var(--s3)}
.fp{font:12px var(--mono);color:var(--dim)} .fp b{color:var(--gold)}
.panes{display:grid;grid-template-columns:1fr 1fr}
@media(max-width:900px){.panes{grid-template-columns:1fr}}
.pane{padding:var(--s5);display:flex;flex-direction:column;gap:var(--s4);min-width:0}
.pane+.pane{border-left:1px solid var(--line)}
@media(max-width:900px){.pane+.pane{border-left:0;border-top:1px solid var(--line)}}
.pane h3{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--dim)}
.out{flex:1;min-height:260px;background:var(--bg);border:1px solid var(--line2);padding:var(--s4);font:13px/1.7 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;overflow:auto}
.out .ref{color:var(--gold);background:rgba(232,180,74,.08)}
.out .name{color:var(--ok);background:rgba(127,212,154,.08)}
.stat{font:12px var(--mono);color:var(--mute)}
.tools{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
@media(max-width:900px){.tools{grid-template-columns:1fr}}
.tool{padding:var(--s5);display:flex;flex-direction:column;gap:var(--s4)}
.tool+.tool{border-left:1px solid var(--line)}
@media(max-width:900px){.tool+.tool{border-left:0;border-top:1px solid var(--line)}}
.tool p{color:var(--dim);font-size:14px}
.res{font:13px/1.7 var(--mono);padding:var(--s4);border:1px dashed var(--line2);min-height:48px;overflow-wrap:anywhere}
.res .ok{color:var(--ok)} .res .bad{color:var(--bad)} .res .r{color:var(--gold)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s3);padding:var(--s4) var(--s5);border-top:1px solid var(--line);font:12px var(--mono);color:var(--mute)}
.foot .ok{color:var(--ok)} .foot .bad{color:var(--bad)}

/* audiencias */
.who{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4)}
@media(max-width:760px){.who{grid-template-columns:1fr}}
.who article{border:1px solid var(--line);padding:var(--s5);background:var(--bg2);display:flex;flex-direction:column;gap:var(--s3)}
.who .pain{font:13px/1.6 var(--mono);color:var(--gold2)}
.who p{color:var(--dim)}
.who .gain{font:12px var(--mono);color:var(--ok);margin-top:auto;padding-top:var(--s3)}

/* comparación */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line)}
table{border-collapse:collapse;width:100%;min-width:640px;font:13px var(--mono)}
th,td{padding:var(--s4);border-bottom:1px solid var(--line);text-align:center}
th:first-child,td:first-child{text-align:left;color:var(--dim)}
thead th{font-weight:600;color:var(--mute);font-size:12px;letter-spacing:.06em}
thead th.hos{color:var(--gold-ink);background:var(--gold)}
td.hos{background:rgba(232,180,74,.07);color:var(--gold)}
.y{color:var(--ok)} .x{color:var(--bad)} .t{color:var(--mute)}
tbody tr:last-child td{border-bottom:0}

/* seguridad / procurement */
.checks{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:1px solid var(--line)}
@media(max-width:760px){.checks{grid-template-columns:1fr}}
.checks>div{padding:var(--s5);border-bottom:1px solid var(--line);display:grid;grid-template-columns:auto 1fr;gap:var(--s4);align-items:start}
.checks>div:nth-child(odd){border-right:1px solid var(--line)}
@media(max-width:760px){.checks>div:nth-child(odd){border-right:0}}
.checks>div:nth-last-child(-n+2){border-bottom:0}
@media(max-width:760px){.checks>div{border-bottom:1px solid var(--line)!important}.checks>div:last-child{border-bottom:0!important}}
.checks b{font:700 13px var(--mono);color:var(--gold)}
.checks h3{font-size:15px}
.checks p{color:var(--dim);font-size:14px;margin-top:var(--s2)}

/* adopción */
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);counter-reset:s}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}
.steps li{counter-increment:s;border-top:2px solid var(--gold);padding-top:var(--s4)}
.steps li::before{content:counter(s,decimal-leading-zero) " / " attr(data-t);display:block;font:700 12px var(--mono);color:var(--gold);letter-spacing:.08em;margin-bottom:var(--s3)}
.steps p{color:var(--dim);font-size:15px;margin-top:var(--s3)}
.term{border:1px solid var(--line2);background:var(--bg2);font:13px/1.8 var(--mono);padding:var(--s5);overflow-x:auto;white-space:pre;margin-top:var(--s6)}
.term .c{color:var(--mute)} .term .p{color:var(--gold)}

/* límites */
.limits{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
@media(max-width:900px){.limits{grid-template-columns:1fr}}
.limits div{border-left:2px solid var(--gold);padding:var(--s3) 0 var(--s3) var(--s5)}
.limits p{color:var(--dim);margin-top:var(--s3)}

/* licencias */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
@media(max-width:900px){.plans{grid-template-columns:1fr}}
.plan{border:1px solid var(--line);padding:var(--s6) var(--s5);display:flex;flex-direction:column;gap:var(--s4);background:var(--bg2);position:relative}
.plan.hl{border-color:var(--gold)}
.plan .tag{position:absolute;top:-1px;right:-1px;background:var(--gold);color:var(--gold-ink);font:700 11px var(--mono);letter-spacing:.1em;padding:var(--s2) var(--s3)}
.plan .for{color:var(--dim);font-size:14px;min-height:44px}
.plan .price{font:700 34px var(--mono);letter-spacing:-.03em;line-height:1.1}
.plan .price small{display:block;font-size:12px;color:var(--mute);font-weight:500;letter-spacing:.04em;margin-top:var(--s2)}
.plan ul{list-style:none;display:grid;gap:var(--s3);color:var(--dim);font-size:15px;flex:1;align-content:start}
.plan li::before{content:"› ";color:var(--gold);font-family:var(--mono)}
.pilot{margin-top:var(--s4);border:1px dashed var(--gold);padding:var(--s5);display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;justify-content:space-between}
.pilot p{color:var(--dim);max-width:70ch} .pilot b{color:var(--ink)}
.allin{margin-top:var(--s5);font:13px var(--mono);color:var(--mute)}

/* faq */
.faq{display:grid;gap:0;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:var(--s4) 0}
.faq summary{cursor:pointer;font:600 15px var(--mono);list-style:none;display:flex;justify-content:space-between;gap:var(--s4)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold)} .faq details[open] summary::after{content:"–"}
.faq p{color:var(--dim);margin-top:var(--s3);max-width:76ch}

/* formulario */
.lead-form{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);border:1px solid var(--line2);background:var(--bg2);padding:var(--s5)}
@media(max-width:760px){.lead-form{grid-template-columns:1fr}}
.lead-form .full{grid-column:1/-1}
.lead-form .actions{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center}
.formmsg{font:13px var(--mono);color:var(--dim)} .formmsg.ok{color:var(--ok)} .formmsg.bad{color:var(--bad)}
.hp{position:absolute;left:-9999px}

/* páginas internas */
.page-hero{padding:var(--s7) 0 var(--s6);border-bottom:1px solid var(--line);position:relative}
.page-hero h1{font-size:clamp(32px,4.6vw,52px);margin:var(--s4) 0 var(--s5);max-width:22ch}
.page-hero h1 em{font-style:normal;color:var(--gold)}
.crumbs{font:12px var(--mono);color:var(--mute);display:flex;gap:var(--s3);flex-wrap:wrap}
.crumbs a{color:var(--dim);text-decoration:none} .crumbs a:hover{color:var(--gold)}
.quote{font:15px/1.6 var(--mono);color:var(--gold2);border-left:2px solid var(--gold);padding-left:var(--s4);margin-top:var(--s5);max-width:60ch}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4)}
@media(max-width:760px){.cards{grid-template-columns:1fr}}
.cards a{display:flex;flex-direction:column;gap:var(--s3);text-decoration:none;border:1px solid var(--line);background:var(--bg2);padding:var(--s5);transition:border-color .15s}
.cards a:hover{border-color:var(--gold)}
.cards .go{font:600 13px var(--mono);color:var(--gold);margin-top:auto;padding-top:var(--s3)}
.cards p{color:var(--dim)}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s6)}
@media(max-width:860px){.cols2{grid-template-columns:1fr;gap:var(--s5)}}
.bul{list-style:none;display:grid;gap:var(--s3);color:var(--dim)}
.bul li::before{content:"› ";color:var(--gold);font-family:var(--mono)}
.bul.x li::before{content:"✗ ";color:var(--bad)}
.quick{border:1px solid var(--line2);background:var(--bg2);padding:var(--s5);display:grid;grid-template-columns:1fr 140px;gap:var(--s4);align-items:end}
@media(max-width:640px){.quick{grid-template-columns:1fr}}
.quick .res{grid-column:1/-1;font-size:15px;color:var(--gold)}
.strip{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
@media(max-width:860px){.strip{grid-template-columns:1fr}}
.strip a{border:1px solid var(--line);padding:var(--s5);text-decoration:none;display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);background:var(--bg2)}
.strip a:hover{border-color:var(--gold)}
.strip b{font:700 22px var(--mono)} .strip span{font:12px var(--mono);color:var(--mute)}
.code{border:1px solid var(--line2);background:var(--bg2);font:13px/1.8 var(--mono);padding:var(--s5);overflow-x:auto;white-space:pre}
.code .c{color:var(--mute)} .code .p{color:var(--gold)} .code .s{color:var(--ok)}
.mt{margin-top:var(--s3)} .mt2{margin-top:var(--s5)} .mt3{margin-top:var(--s6)}
.ok{color:var(--ok)} .bad{color:var(--bad)}
.center{text-align:center}
.notfound{padding:var(--s8) 0;min-height:60vh}

/* footer */
footer.site{border-top:1px solid var(--line);padding:var(--s7) 0 var(--s6);font:13px var(--mono);color:var(--mute)}
footer.site .grid{display:grid;grid-template-columns:1.618fr 1fr 1fr 1fr;gap:var(--s6)}
@media(max-width:860px){footer.site .grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){footer.site .grid{grid-template-columns:1fr}}
footer.site h4{font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:var(--s4)}
footer.site ul{list-style:none;display:grid;gap:var(--s3)}
footer.site a{color:var(--dim);text-decoration:none} footer.site a:hover{color:var(--gold)}
footer.site p{color:var(--mute);font-family:var(--sans);max-width:36ch;margin-top:var(--s3)}
footer.site .legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s4);border-top:1px solid var(--line);margin-top:var(--s6);padding-top:var(--s5);font-size:12px}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* variantes */
.steps.steps3{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.steps.steps3{grid-template-columns:1fr}}
.steps.steps1{grid-template-columns:1fr;margin-top:var(--s5)}
.cards.one{grid-template-columns:1fr}
.final{padding:var(--s8) 0}
.final h2{font-size:clamp(32px,5vw,56px);max-width:18ch}
.split>*,.cols2>*,.hero .wrap>*{min-width:0}
.leaks li span:last-child{overflow-wrap:anywhere}

.ai-panes{border:1px solid var(--line2);margin-top:var(--s3)}
.ai-out{min-height:200px;font-size:13px}
.contact-direct{margin-top:var(--s5);display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);font:13px var(--mono)}
.contact-direct a{color:var(--gold);text-decoration:none} .contact-direct a:hover{text-decoration:underline}
.strip.strip1{grid-template-columns:1fr}
.strip.strip1 a{flex-wrap:wrap}
.cols2>.cta-row,.split>.cta-row{align-self:center;align-items:flex-start;margin-top:0}