:root{
  color-scheme:light;
  --bg:#F4F4EF; --surface:#FFFFFF; --surface-2:#EAEBE3; --ink:#1D211B; --muted:#5B6357; --line:#D8DACF;
  --accent:#F25A1F; --accent-ink:#B8410F; --on-accent:#1D211B; --soft:#E3EBE2; --error:#B42318;
  --green:#2F4A34; --paper:#F4F4EF; --sky:#9CC0D6; --mud:#4A3A2C;
  --n1:#3E8E4F; --n2:#2F6FB3; --n3:#E0A800;
  --f-display:"Archivo","Arial Black",system-ui,sans-serif;
  --f-body:"Figtree","Segoe UI",system-ui,sans-serif;
  --f-mono:"Martian Mono","Consolas",ui-monospace,monospace;
  --r:14px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#121510; --surface:#1A1E18; --surface-2:#232820; --ink:#ECEEE6; --muted:#A2A99C; --line:#343A31;
    --accent:#FF6A33; --accent-ink:#FF8C5E; --on-accent:#14170F; --soft:#1F2A21; --error:#FF8A80;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#121510; --surface:#1A1E18; --surface-2:#232820; --ink:#ECEEE6; --muted:#A2A99C; --line:#343A31;
  --accent:#FF6A33; --accent-ink:#FF8C5E; --on-accent:#14170F; --soft:#1F2A21; --error:#FF8A80;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--f-body); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased}
.wrap{max-width:1120px; margin:0 auto; padding-inline:20px}
h1,h2,h3{font-family:var(--f-display); font-stretch:125%; font-weight:800; line-height:1; margin:0; letter-spacing:-.01em; text-wrap:balance}
p{margin:0}
a{color:var(--accent-ink)}
.eyebrow{font-family:var(--f-mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--accent); color:var(--on-accent); font-weight:700; font-size:16px; padding:14px 22px; border-radius:10px; text-decoration:none; border:0; cursor:pointer; font-family:var(--f-body); transition:transform .15s, box-shadow .15s}
.btn:hover{transform:translateY(-1px); box-shadow:0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent)}
.btn.ghost{background:transparent; color:var(--ink); border:1.5px solid var(--line)}

/* Header */
header{position:sticky; top:env(safe-area-inset-top,0px); z-index:10; background:color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
header .wrap{display:flex; align-items:center; justify-content:space-between; gap:12px; padding-block:12px}
.logo{display:flex; align-items:center; gap:9px; font-family:var(--f-display); font-stretch:125%; font-weight:900; font-size:16px; text-transform:uppercase; color:var(--ink); text-decoration:none; white-space:nowrap}
.logo img{width:44px; height:44px; display:block}
header nav{display:flex; align-items:center; gap:18px}
header nav a.link{color:var(--muted); text-decoration:none; font-size:14.5px}
header nav a.link:hover{color:var(--ink)}
header .btn{padding:9px 16px; font-size:14.5px}
@media (max-width:560px){header nav a.link{display:none}}

/* Hero */
.hero{padding-block:52px 60px}
.hero .wrap{display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:center}
@media (max-width:880px){.hero .wrap{grid-template-columns:1fr; gap:32px}}
.hero h1{font-size:clamp(54px,9vw,112px); line-height:.9; margin:16px 0 22px}
.hero h1 em{font-style:normal; color:var(--accent)}
.hero .lede{font-size:clamp(17px,1.6vw,20px); max-width:52ch; margin-bottom:26px}
.hero .ctas{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.founders{display:flex; align-items:center; gap:10px; margin-top:22px; font-size:14px; color:var(--muted)}
.founders b{color:var(--ink)}
.founders .count{font-family:var(--f-mono); font-size:12px; background:var(--soft); color:var(--ink); padding:4px 9px; border-radius:6px; white-space:nowrap}
.visual{position:relative; aspect-ratio:4/5; max-width:100%; border-radius:var(--r); overflow:hidden; background:var(--green)}
@media (max-width:880px){.visual{aspect-ratio:1/1}}
.visual canvas{position:absolute; inset:0; width:100%; height:100%}
.visual .coords{position:absolute; left:18px; right:18px; top:16px; display:flex; justify-content:space-between; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.06em; color:rgba(244,244,239,.85); gap:8px; flex-wrap:wrap}
.visual .coords span:last-child{color:var(--accent)}
/* Logo animado del hero */
.logo-anim{position:absolute; left:50%; top:8%; width:54%; aspect-ratio:1; transform:translateX(-50%); cursor:pointer; filter:drop-shadow(0 14px 28px rgba(0,0,0,.35))}
@media (max-width:880px){.logo-anim{width:42%; top:9%}}
.logo-anim .disc{position:absolute; inset:3.5%; border-radius:50%; background:#F25A1F}
.logo-anim .shaker{position:absolute; inset:0}
.logo-anim .L{position:absolute; inset:0; background:#1D211B; -webkit-mask-image:var(--m); mask-image:var(--m); -webkit-mask-size:100% 100%; mask-size:100% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat}
@property --a{syntax:'<angle>'; inherits:false; initial-value:0deg}
.logo-anim .sweep{position:absolute; inset:0; --a:360deg; -webkit-mask-image:conic-gradient(from 180deg,#000 var(--a),transparent 0); mask-image:conic-gradient(from 180deg,#000 var(--a),transparent 0)}
.logo-anim .jeep{transform-origin:50% 85%}
.logo-anim .dust{position:absolute; width:6%; aspect-ratio:1; border-radius:50%; background:#C9B48E; pointer-events:none; opacity:0}
.logo-anim.play .disc, .logo-anim.play .ring{animation:la-stamp .75s cubic-bezier(.2,.9,.3,1.3) both}
.logo-anim.play .sweep{animation:la-sweep .9s .45s cubic-bezier(.6,0,.3,1) both}
.logo-anim.play .text{animation:la-pop .55s .75s cubic-bezier(.3,1.6,.5,1) both}
.logo-anim.play .stars{animation:la-orbit .8s .9s cubic-bezier(.2,.9,.3,1.1) both}
.logo-anim.play .mtn{animation:la-rise .8s 1.15s cubic-bezier(.2,.8,.2,1) both}
.logo-anim.play .lt{transform-origin:50% 55%; animation:la-drop .65s cubic-bezier(.3,1.5,.5,1) both; animation-delay:calc(1.65s + var(--i)*.1s)}
.logo-anim.play .jeep{animation:la-drive 1s 2.5s cubic-bezier(.25,.8,.3,1) both, la-bob 1.8s 3.9s ease-in-out infinite}
.logo-anim.play .shaker{animation:la-shake .45s 3.35s both}
@keyframes la-stamp{0%{opacity:0; transform:scale(1.5) rotate(-30deg)}60%{opacity:1; transform:scale(.96) rotate(3deg)}100%{transform:none}}
@keyframes la-sweep{from{--a:0deg}to{--a:360deg}}
@keyframes la-pop{0%{opacity:0; transform:scale(.5)}100%{opacity:1; transform:none}}
@keyframes la-orbit{0%{opacity:0; transform:rotate(-120deg) scale(.7)}100%{opacity:1; transform:none}}
@keyframes la-rise{0%{transform:translateY(18%); clip-path:inset(0 0 100% 0)}100%{transform:none; clip-path:inset(0 0 0 0)}}
@keyframes la-drop{0%{opacity:0; transform:translateY(-35%) rotate(var(--r))}40%{opacity:1}100%{transform:none}}
@keyframes la-drive{0%{opacity:0; transform:translate(-55%,25%) rotate(-14deg) scale(.8)}55%{opacity:1; transform:translate(3%,-9%) rotate(4deg) scale(1.03)}80%{transform:translate(0,1.2%) rotate(-1deg)}100%{transform:none}}
@keyframes la-bob{0%,100%{transform:none}30%{transform:translateY(-.7%) rotate(-.6deg)}60%{transform:translateY(.25%) rotate(.4deg)}}
@keyframes la-shake{0%,100%{transform:none}20%{transform:translate(-1.2%,.8%)}40%{transform:translate(1%,-.6%)}60%{transform:translate(-.6%,.4%)}80%{transform:translate(.3%,-.2%)}}
@keyframes puff{0%{opacity:.85; transform:translate(0,0) scale(.4)}100%{opacity:0; transform:translate(var(--dx),var(--dy)) scale(1.6)}}
@media (prefers-reduced-motion: reduce){.logo-anim.play *{animation:none!important}}
.ride{position:absolute; left:7%; right:7%; bottom:7%; background:var(--paper); color:#1D211B; border-radius:16px; padding:16px; display:grid; gap:10px; box-shadow:0 16px 40px rgba(0,0,0,.28)}
.ride .top{display:flex; justify-content:space-between; align-items:center; gap:8px}
.lvl{font-weight:700; font-size:12px; padding:4px 10px; border-radius:999px; color:#fff; white-space:nowrap}
.ride h3{font-size:21px; line-height:1.05}
.ride .row{display:flex; justify-content:space-between; font-size:13px; gap:8px}
.ride .row span{color:#5B6357}
.ride .bar{height:6px; background:#DDDFD6; border-radius:3px; overflow:hidden}
.ride .bar i{display:block; height:100%; width:75%; background:#F25A1F}

/* Sections */
section{padding-block:60px; border-top:1px solid var(--line)}
.head{display:grid; gap:10px; margin-bottom:30px; max-width:680px}
.head h2{font-size:clamp(34px,5vw,52px)}
.benefits{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
@media (max-width:820px){.benefits{grid-template-columns:1fr}}
.benefit{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:24px; display:grid; gap:10px; align-content:start}
.benefit h3{font-size:24px}
.benefit p{color:var(--muted); font-size:15.5px}
.benefit .tag{display:flex; gap:6px; flex-wrap:wrap}
.pill{font-size:12px; font-weight:700; padding:3px 9px; border-radius:999px; color:#fff}
.mono{font-family:var(--f-mono); font-size:12px}
.steps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--surface)}
@media (max-width:820px){.steps{grid-template-columns:1fr}}
.step{padding:24px; display:grid; gap:8px; align-content:start; border-left:1px solid var(--line)}
.step:first-child{border-left:0}
@media (max-width:820px){.step{border-left:0; border-top:1px solid var(--line)}.step:first-child{border-top:0}}
.step .n{font-family:var(--f-mono); font-size:12px; color:var(--accent-ink)}
.step h3{font-size:26px}
.step p{color:var(--muted); font-size:15px}

/* Form */
.join{background:var(--green); color:#F4F4EF; border-top:0}
.join .wrap{display:grid; grid-template-columns:.8fr 1.2fr; gap:44px; align-items:start}
@media (max-width:880px){.join .wrap{grid-template-columns:1fr; gap:28px}}
.join .intro{display:grid; gap:14px; position:sticky; top:90px}
@media (max-width:880px){.join .intro{position:static}}
.join .intro h2{font-size:clamp(36px,5vw,56px); color:#F4F4EF}
.join .intro h2 em{font-style:normal; color:#FF6A33}
.join .intro p{color:rgba(244,244,239,.85); font-size:17px}
.join .intro .eyebrow{color:rgba(244,244,239,.65)}
.join .intro ul{margin:6px 0 0; padding:0; list-style:none; display:grid; gap:8px; font-size:15px; color:rgba(244,244,239,.9)}
.join .intro li{display:grid; grid-template-columns:22px 1fr; gap:6px}
.join .intro li::before{content:"✓"; color:#FF6A33; font-weight:700}
form, .done{background:var(--surface); color:var(--ink); border-radius:var(--r); padding:clamp(20px,3vw,32px); display:grid; gap:18px; box-shadow:0 20px 50px rgba(0,0,0,.2)}
.fg{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:560px){.fg{grid-template-columns:1fr}}
.fg.three{grid-template-columns:1.1fr 1.1fr .8fr}
@media (max-width:560px){.fg.three{grid-template-columns:1fr}}
.field{display:grid; gap:6px; min-width:0}
label, legend{font-weight:600; font-size:14.5px}
label small, legend small{font-weight:400; color:var(--muted)}
input[type=text], input[type=email], input[type=tel], select{width:100%; font:inherit; font-size:16px; padding:12px 13px; border:1.5px solid var(--line); border-radius:9px; background:var(--bg); color:var(--ink)}
input:focus, select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent)}
.field.bad input, .field.bad select{border-color:var(--error)}
.err{font-size:13px; color:var(--error); min-height:0}
.err:empty{display:none}
fieldset{border:0; padding:0; margin:0; display:grid; gap:8px; min-width:0}
.levels{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
@media (max-width:560px){.levels{grid-template-columns:1fr}}
.opt{position:relative}
.opt input{position:absolute; opacity:0; pointer-events:none}
.opt label{display:grid; gap:4px; padding:12px; border:1.5px solid var(--line); border-radius:10px; cursor:pointer; background:var(--bg); height:100%; font-weight:400}
.opt label b{font-size:14.5px; display:flex; align-items:center; gap:7px}
.opt label span{font-size:12.5px; color:var(--muted)}
.opt label i{width:10px; height:10px; border-radius:50%; flex:none}
.opt input:checked + label{border-color:var(--accent); background:color-mix(in srgb, var(--accent) 8%, var(--surface)); box-shadow:inset 0 0 0 1px var(--accent)}
.opt input:focus-visible + label{outline:2px solid var(--accent); outline-offset:2px}
.toggle-row{display:flex; gap:8px; flex-wrap:wrap}
.toggle-row .opt label{padding:9px 14px; border-radius:999px}
.check{display:grid; grid-template-columns:22px 1fr; gap:10px; align-items:start; font-size:14px; color:var(--muted)}
.check input{width:18px; height:18px; margin:2px 0 0; accent-color:var(--accent)}
.check label{font-weight:400}
form .btn{width:100%; font-size:17px; padding:16px}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.fine{font-size:12.5px; color:var(--muted); text-align:center}
.done{justify-items:center; text-align:center; padding-block:40px}
.done h3{font-size:34px}
.done p{color:var(--muted); max-width:44ch}
.done ol{text-align:left; margin:0; padding-left:20px; display:grid; gap:6px; font-size:15px; max-width:44ch}

/* FAQ */
.faq{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
@media (max-width:760px){.faq{grid-template-columns:1fr}}
details{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px 20px}
summary{cursor:pointer; font-weight:700; font-size:16.5px; list-style:none; display:flex; justify-content:space-between; gap:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; font-family:var(--f-mono); color:var(--accent-ink)}
details[open] summary::after{content:"–"}
details p{margin-top:10px; color:var(--muted); font-size:15px}
.allies{display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; background:var(--soft); border-radius:var(--r); padding:22px 24px; margin-top:28px}
.allies h3{font-size:24px}
.allies p{color:var(--muted); font-size:15px; margin-top:4px}
footer{padding-block:28px; border-top:1px solid var(--line); font-size:13.5px; color:var(--muted)}
footer .wrap{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:center}

/* Aviso de privacidad */
dialog.legal{width:min(760px, calc(100% - 24px)); max-height:calc(100% - 24px); padding:0; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); color:var(--ink); box-shadow:0 30px 80px rgba(0,0,0,.35)}
dialog.legal::backdrop{background:rgba(18,21,16,.6); backdrop-filter:blur(2px)}
.legal .bar{position:sticky; top:0; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 20px; background:var(--surface); border-bottom:1px solid var(--line); z-index:1}
.legal .bar b{font-family:var(--f-display); font-stretch:125%; font-weight:800; font-size:18px}
.legal .close{border:1px solid var(--line); background:var(--bg); color:var(--ink); border-radius:8px; padding:7px 12px; font:inherit; font-size:14px; font-weight:600; cursor:pointer}
.legal .doc{padding:20px 22px 28px; display:grid; gap:14px; font-size:15px; line-height:1.6}
.legal .doc h3{font-family:var(--f-body); font-stretch:100%; font-weight:700; font-size:16.5px; margin-top:6px; letter-spacing:0}
.legal .doc ul{margin:0; padding-left:20px; display:grid; gap:4px}
.legal .doc .upd{font-family:var(--f-mono); font-size:11.5px; color:var(--muted)}
.pendiente{background:#FFE8A3; color:#1D211B; padding:0 4px; border-radius:3px; font-weight:600}

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