:root{--navy:#16303F;--ink:#14232E;--paper:#F1ECE2;--paper2:#E7E0D2;--glass:#BFD9D2;--edge:#3E7F72;--acc:#D4471A;--cream:#F6F1E7;
--sans:system-ui,-apple-system,"Segoe UI","Noto Sans",Ubuntu,Cantarell,sans-serif;--mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.55;min-height:100dvh}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background-image:linear-gradient(rgba(22,48,63,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(22,48,63,.04) 1px,transparent 1px);background-size:40px 40px}
main,header,footer,.demo-bar{position:relative;z-index:1}
a{color:var(--navy)}
:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--acc);color:#fff;padding:.6rem 1rem;z-index:99}.skip:focus{left:1rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.demo-bar{background:var(--acc);color:var(--cream);font-size:.82rem;padding:.4rem 1.2rem;text-align:center}
h1,h2,h3{margin:0;line-height:1.05;letter-spacing:-.02em}

.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem clamp(1rem,4vw,3rem);background:rgba(241,236,226,.88);backdrop-filter:blur(10px);border-bottom:1px solid rgba(22,48,63,.15)}
.brand{display:flex;gap:.7rem;align-items:center;text-decoration:none;color:var(--navy)}
.mark svg{width:38px;height:38px;display:block}
.brand-t b{display:block;letter-spacing:.2em;font-size:.95rem}
.brand-t small{font-family:var(--mono);font-size:.7rem;opacity:.7}
#menu{display:flex;gap:.2rem;align-items:center}
#menu a{text-decoration:none;color:var(--navy);font-weight:600;font-size:.92rem;padding:.5rem .7rem;position:relative}
#menu a:not(.gest):not(.cta-s)::after{content:"";position:absolute;left:.7rem;right:.7rem;bottom:.3rem;height:2px;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
#menu a:hover::after,#menu a.on::after{transform:scaleX(1)}
#menu .cta-s{background:var(--acc);color:var(--cream)}
#menu .gest{border:1.5px solid var(--navy);margin-left:.4rem;font-family:var(--mono);font-size:.8rem}
.burger{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer;position:relative}
.burger span{position:absolute;left:10px;right:10px;height:2px;background:var(--navy);transition:transform .3s var(--ease),opacity .2s}
.burger span:nth-child(1){top:14px}.burger span:nth-child(2){top:21px}.burger span:nth-child(3){top:28px}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.9rem 1.4rem;font-weight:700;text-decoration:none;border:2px solid var(--navy);cursor:pointer;font:inherit;font-weight:700;transition:transform .2s var(--ease)}
.btn:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--navy)}
.btn.acc{background:var(--acc);color:var(--cream);border-color:var(--acc)}
.btn.acc:hover{box-shadow:4px 4px 0 var(--navy)}
.btn.line{background:transparent;color:var(--navy)}

.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:2rem;align-items:center;padding:clamp(2rem,6vw,5rem) clamp(1rem,4vw,3rem) 3rem;max-width:1320px;margin:0 auto;min-height:calc(100dvh - 110px)}
.kick{font-family:var(--mono);font-size:.82rem;color:var(--edge);margin:0 0 1.2rem;letter-spacing:.04em}
.hero h1{font-size:clamp(3rem,8.5vw,7.2rem);font-weight:900;color:var(--navy);letter-spacing:-.045em;line-height:.92}
.hero h1 span{color:var(--acc)}
.lead{font-size:1.15rem;max-width:34rem;margin:1.6rem 0 2rem;color:#2E4352}
.ctas{display:flex;gap:.8rem;flex-wrap:wrap}
.pane-svg{width:100%;height:auto;display:block;overflow:visible}
.p{transform-box:fill-box;animation:slide 1.2s var(--ease) both}
.p.back{animation-delay:.1s}.p.mid{animation-delay:.25s}.p.front{animation-delay:.4s}
@keyframes slide{from{opacity:0;transform:translate(40px,-30px)}to{opacity:1;transform:none}}
.shine{animation:shine 5s 1.6s ease-in-out infinite}
@keyframes shine{0%{transform:skewX(-18deg) translateX(0)}40%,100%{transform:skewX(-18deg) translateX(620px)}}
.cut{stroke-dashoffset:300;animation:cut 2.4s 1.2s linear infinite}
@keyframes cut{to{stroke-dashoffset:0}}
.dims{animation:fade 1s 1.2s both}@keyframes fade{from{opacity:0}}

.ticker{overflow:hidden;background:var(--navy);color:var(--glass);padding:.9rem 0;font-family:var(--mono);font-size:.9rem;text-transform:uppercase;letter-spacing:.12em}
.tk{display:flex;gap:1.6rem;width:max-content;animation:tick 40s linear infinite;align-items:center}
.tk i{width:8px;height:8px;background:var(--acc);display:inline-block}
@keyframes tick{to{transform:translateX(-50%)}}

.sec{padding:clamp(3.5rem,8vw,7rem) clamp(1rem,4vw,3rem);max-width:1320px;margin:0 auto}
.sec-h{margin-bottom:2.5rem;max-width:44rem}
.sec-h .num{font-family:var(--mono);color:var(--acc);font-weight:700;display:block;margin-bottom:.6rem}
.sec-h h2{font-size:clamp(2.2rem,5vw,3.8rem);color:var(--navy);font-weight:850}
.sec-h p{color:#3d5260;font-size:1.05rem;margin:.8rem 0 0}
.big-p{font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.35;color:var(--navy);font-weight:600;margin-top:0}

.bot-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:3rem}
.team{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;border-top:2px solid var(--navy);border-left:2px solid var(--navy)}
.team li{padding:1.2rem;border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);background:rgba(246,241,231,.6);transition:background .3s}
.team li:hover{background:var(--glass)}
.team svg{width:44px;height:44px;color:var(--navy);display:block;margin-bottom:.6rem}
.team b{display:block;color:var(--navy)}.team span{font-size:.85rem;font-family:var(--mono);color:#4d6070}

.lav{border-top:1px solid rgba(22,48,63,.2)}
.lav-list{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:2px solid var(--navy)}
.lv{display:grid;grid-template-columns:130px 1fr;gap:1.4rem;padding:1.8rem 1rem 1.8rem 0;border-bottom:1px solid rgba(22,48,63,.25);align-items:start}
.lv:nth-child(odd){padding-right:2rem;border-right:1px solid rgba(22,48,63,.25)}
.lv:nth-child(even){padding-left:2rem}
.lv h3{font-size:1.35rem;color:var(--navy);margin-bottom:.4rem}.lv p{margin:0;color:#34495a}
.lv-ic svg{width:120px;height:90px;transition:transform .5s var(--ease)}
.lv:hover .lv-ic svg{transform:rotate(-4deg) scale(1.05)}
.g{fill:var(--glass);stroke:var(--edge);stroke-width:3}
.c{fill:none;stroke:var(--acc);stroke-width:2.5;stroke-dasharray:5 4}

.split-sec{display:grid;grid-template-columns:1fr 1.1fr;gap:3rem;align-items:center}
.split-art svg{width:100%;height:auto}
.pulse{animation:pulse 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes pulse{50%{opacity:.3;transform:scale(.92)}}
.checks{list-style:none;padding:0;margin:0 0 2rem}
.checks li{padding:.75rem 0 .75rem 2rem;border-bottom:1px dashed rgba(22,48,63,.3);position:relative}
.checks li::before{content:"";position:absolute;left:0;top:1.05rem;width:14px;height:14px;border:2px solid var(--edge);background:var(--glass)}

.trade{max-width:none;background:var(--navy);color:var(--cream)}
.trade>*{max-width:1320px;margin-left:auto;margin-right:auto}
.sec-h.light h2{color:var(--cream)}.sec-h.light p{color:var(--glass)}
.trade-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(191,217,210,.25);border:1px solid rgba(191,217,210,.25)}
.tcard{background:var(--navy);padding:1.6rem;transition:background .3s}
.tcard:hover{background:#1d3d4f}
.tn{font-family:var(--mono);color:var(--acc);font-size:2rem;font-weight:800}
.tcard h3{font-size:1.2rem;margin:.6rem 0}.tcard p{color:#c9d8d4;margin:0;font-size:.95rem}
.flow{margin:3rem auto}.flow svg{width:100%;height:auto}
.flow-line{animation:cut 3s linear infinite;stroke-dashoffset:120}
.flow-dot{animation:travel 6s var(--ease) infinite}
@keyframes travel{0%{transform:translateX(0)}90%,100%{transform:translateX(920px)}}
.trade>.btn{display:flex;width:max-content}

.tabs{display:flex;gap:0;border-bottom:2px solid var(--navy);flex-wrap:wrap}
.tabs button{background:none;border:0;padding:.9rem 1.2rem;font:inherit;font-weight:700;color:#4d6070;cursor:pointer;border-bottom:4px solid transparent;margin-bottom:-2px}
.tabs button[aria-selected=true]{color:var(--navy);border-color:var(--acc)}
.ex{display:grid;grid-template-columns:1fr 1.2fr;gap:3rem;padding:2.5rem 0;align-items:center;animation:exin .5s var(--ease)}
@keyframes exin{from{opacity:0;transform:translateY(12px)}}
.ex svg{width:100%;background:var(--cream);border:2px solid var(--navy)}
.ex-k{font-family:var(--mono);color:var(--acc);font-size:.8rem;margin:0 0 .6rem}
.ex h3{font-size:1.8rem;color:var(--navy);margin-bottom:.8rem}
.ex dl{display:grid;grid-template-columns:auto 1fr;gap:.3rem 1.2rem;font-family:var(--mono);font-size:.88rem;border-top:1px solid rgba(22,48,63,.3);padding-top:1rem}
.ex dt{color:#5b6c78}.ex dd{margin:0;color:var(--navy)}

.metodo{border-top:1px solid rgba(22,48,63,.2)}
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.steps li{border-top:4px solid var(--navy);padding-top:1rem}
.steps b{font-family:var(--mono);color:var(--acc);font-size:1.6rem}
.steps h3{color:var(--navy);margin:.4rem 0}.steps p{margin:0;color:#34495a}
.steps li:nth-child(2){margin-top:2rem}.steps li:nth-child(3){margin-top:4rem}.steps li:nth-child(4){margin-top:6rem}

.req{background:var(--paper2);max-width:none}
.req-grid{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:1fr 1.3fr;gap:3rem}
.note{border-left:5px solid var(--acc);background:var(--cream);padding:1rem 1.2rem;font-size:.95rem}
form{background:var(--cream);border:2px solid var(--navy);padding:clamp(1.2rem,3vw,2rem);display:grid;gap:1rem;box-shadow:10px 10px 0 var(--glass)}
form label{display:flex;flex-direction:column;gap:.3rem;font-weight:600;font-size:.88rem;color:var(--navy)}
input,select,textarea{font:inherit;border:1.5px solid #9aa8ae;background:#FBF8F1;padding:.7rem;border-radius:0;color:var(--ink);width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--navy)}
textarea{min-height:120px;resize:vertical}
.invalid{border-color:var(--acc)!important;background:#FBE9E1}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.fr.three{grid-template-columns:1fr 1fr 1fr}
fieldset.tipo{border:0;padding:0;margin:0;display:flex;gap:.5rem;flex-wrap:wrap}
fieldset.tipo legend{font-weight:600;font-size:.88rem;color:var(--navy);margin-bottom:.4rem}
fieldset.tipo label{flex-direction:row;align-items:center;border:1.5px solid var(--navy);padding:.5rem .8rem;cursor:pointer;font-weight:600}
fieldset.tipo input{width:auto;accent-color:var(--acc)}
fieldset.tipo label:has(input:checked){background:var(--navy);color:var(--cream)}
label.ck{flex-direction:row;align-items:flex-start;font-weight:500}label.ck input{width:20px;height:20px;flex:none;accent-color:var(--acc)}
.errs:empty{display:none}.errs{border-left:5px solid var(--acc);background:#FBE9E1;padding:.8rem 1rem;font-size:.9rem}
.errs ul{margin:.3rem 0 0;padding-left:1.2rem}
.btn.big{justify-content:center;font-size:1.05rem}
.result{border:2px dashed var(--edge);padding:1rem;background:#E6F0EC}
.result pre{white-space:pre-wrap;font-family:var(--mono);font-size:.8rem;max-height:220px;overflow:auto;background:var(--cream);padding:.8rem;margin:.8rem 0}
.result .row{display:flex;gap:.6rem;flex-wrap:wrap}
.result .btn{padding:.6rem 1rem}

.foot{background:var(--ink);color:#c9d3d6;padding:3rem clamp(1rem,4vw,3rem)}
.foot-in{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:1.2fr 1fr;gap:2rem}
.fw{letter-spacing:.2em;color:var(--cream)}
.foot nav{display:flex;flex-wrap:wrap;gap:1rem;align-content:flex-start}
.foot a{color:var(--glass)}
.disc{grid-column:1/-1;font-size:.82rem;border-top:1px solid #34495a;padding-top:1rem;margin:0;font-family:var(--mono)}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}

@media (max-width:980px){
  .burger{display:block}
  #menu{position:fixed;top:0;right:0;bottom:0;width:min(320px,85vw);flex-direction:column;align-items:stretch;background:var(--navy);padding:5rem 1.5rem 2rem;transform:translateX(100%);transition:transform .4s var(--ease);z-index:-1}
  #menu.open{transform:none}
  #menu a{color:var(--cream);font-size:1.15rem;padding:.9rem 0;border-bottom:1px solid #2c4a5c}
  #menu a::after{display:none}
  #menu .gest{border:1.5px solid var(--glass);margin:1rem 0 0;padding:.8rem;text-align:center}
  #menu .cta-s{padding:.9rem;text-align:center;margin-top:1rem}
  .burger[aria-expanded=true] span{background:var(--cream)}
  .trade-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}.steps li{margin-top:0!important}
}
@media (max-width:767px){
  .hero,.bot-grid,.split-sec,.ex,.req-grid,.foot-in{grid-template-columns:1fr}
  .hero{min-height:0}.hero-art{order:-1;max-width:340px}
  .lav-list,.trade-grid,.steps{grid-template-columns:1fr}
  .lv,.lv:nth-child(odd),.lv:nth-child(even){grid-template-columns:90px 1fr;padding:1.4rem 0;border-right:0}
  .lv-ic svg{width:90px;height:68px}
  .fr,.fr.three{grid-template-columns:1fr}
  .team{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}html{scroll-behavior:auto}}
