/* ============================================================
   AERIA · vuelalegal.com , Hoja de estilos
   Concepto: consola de vuelo nocturna (dark-tech aeronautico).
   Paleta y tipografia del brand kit. Acento unico: Signal Cyan.
   Formas: botones pill, paneles radio 14px (regla fija).
   ------------------------------------------------------------
   ÍNDICE
   00 tokens · 01 reset · 02 utilidades · 03 botones
   04 nav · 05 hero (canvas 3D) · 06 stakes + gauge
   07 route (trayectoria) · 08 verdict + console 3D
   09 marco (ledger) · 10 faq · 11 close · 12 footer
   13 reveal · 14 responsive · 15 reduced-motion
   ============================================================ */

/* ===== 00 · TOKENS ===== */
:root{
  --ink:      #0A0F1A;
  --ink-2:    #0C1322;
  --panel:    #131B2B;
  --panel-2:  #18233A;
  --cyan:     #2DD4DE;
  --fog:      #E6EAF2;
  --slate:    #8893A7;
  --slate-d:  #7A879B;
  --cleared:  #34D399;
  --hold:     #FBBF24;
  --mid:      #FB8C3E;
  --blocked:  #F4544E;
  --line:     rgba(136,147,167,0.14);
  --line-cy:  rgba(45,212,222,0.26);
  --display: 'Bricolage Grotesque',system-ui,sans-serif;
  --mono:    'DM Mono','Fira Code',ui-monospace,monospace;
  --body:    'DM Sans',system-ui,sans-serif;
  --maxw: 1200px;
  --rad: 14px;
  --ease: cubic-bezier(0.22,1,0.36,1);
}

/* ===== 01 · RESET ===== */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:88px; }
body{
  font-family:var(--body); background:var(--ink); color:var(--fog);
  line-height:1.6; font-size:17px; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg,canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
::selection{ background:var(--cyan); color:var(--ink); }

/* foco de teclado visible (a11y) */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--cyan); outline-offset:3px; border-radius:6px;
}
/* salto al contenido (a11y) */
.skip-link{
  position:absolute; left:12px; top:-60px; z-index:200;
  background:var(--cyan); color:var(--ink); padding:10px 16px; border-radius:8px;
  font-family:var(--display); font-weight:600; font-size:14px; transition:top .2s var(--ease);
}
.skip-link:focus{ top:12px; }

/* ===== 02 · UTILIDADES ===== */
.mono{ font-family:var(--mono); font-weight:500; letter-spacing:0.02em; }
.accent{ color:var(--cyan); }
.kicker{
  font-size:12px; letter-spacing:0.26em; text-transform:uppercase; color:var(--slate);
}

/* ===== 03 · BOTONES (pill) ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--display); font-weight:600; white-space:nowrap;
  border-radius:999px; border:1px solid transparent; cursor:pointer;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.btn--primary{ background:var(--cyan); color:var(--ink); }
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 14px 36px -10px var(--cyan); }
.btn--primary:active{ transform:translateY(0) scale(.985); }
.btn--sm{ padding:9px 17px; font-size:14px; }
.btn--lg{ padding:16px 30px; font-size:16px; }

/* ===== 04 · NAV ===== */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .35s var(--ease), border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{
  background:rgba(10,15,26,0.8); backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%); border-bottom-color:var(--line);
}
.nav__inner{
  max-width:var(--maxw); margin:0 auto; height:68px; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.nav__logo{ display:inline-flex; align-items:center; }
.nav__links{ display:flex; gap:30px; }
.nav__link{ font-size:14.5px; color:var(--slate); position:relative; transition:color .25s var(--ease); }
.nav__link::after{
  content:''; position:absolute; left:0; bottom:-6px; height:1.5px; width:0;
  background:var(--cyan); transition:width .25s var(--ease);
}
.nav__link:hover{ color:var(--fog); } .nav__link:hover::after{ width:100%; }

/* ===== 05 · HERO (canvas 3D) ===== */
.hero{
  position:relative; min-height:100dvh; display:flex; align-items:flex-end;
  padding:0 24px 9vh; overflow:hidden; isolation:isolate;
}
.hero__canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:-2; }
.hero__scrim{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(80% 60% at 75% 18%, rgba(45,212,222,0.10), transparent 60%),
    linear-gradient(180deg, rgba(10,15,26,0.55) 0%, rgba(10,15,26,0.1) 35%, rgba(10,15,26,0.85) 100%);
}
.hud{
  position:absolute; top:108px; right:28px; z-index:1;
  display:flex; flex-direction:column; gap:6px; text-align:right; color:var(--slate);
}
.hud__row{ font-size:11.5px; letter-spacing:0.08em; }
.hud__k{ color:var(--slate-d); margin-right:6px; }
.hud__row--live{ display:inline-flex; align-items:center; gap:7px; justify-content:flex-end; color:var(--cyan); }
.hud__pulse{ width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 0 0 var(--cyan); animation:pulse 2s var(--ease) infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(45,212,222,.5);} 70%{ box-shadow:0 0 0 7px rgba(45,212,222,0);} 100%{ box-shadow:0 0 0 0 rgba(45,212,222,0);} }

.hero__copy{ position:relative; max-width:680px; }
.hero__copy .kicker{ display:block; margin-bottom:20px; }
.hero__title{
  font-family:var(--display); font-weight:600; letter-spacing:-0.02em; line-height:1.0;
  font-size:clamp(44px,8.5vw,104px);
}
.hero__lead{ margin:24px 0 32px; max-width:540px; font-size:clamp(16px,2vw,20px); color:var(--fog); opacity:.82; }

/* Dron flotante (hover + tilt 3D). El texto del hero va por encima. */
.hero__copy{ z-index:2; }
.drone-stage{
  position:absolute; right:3%; top:14%; z-index:0;
  width:min(48vw,580px); aspect-ratio:1/1; pointer-events:none;
  perspective:1200px; transform-style:preserve-3d;
  opacity:0; transition:opacity .9s var(--ease);
}
.drone-stage.is-ready{ opacity:1; }
.drone-glow{
  position:absolute; inset:6%; border-radius:50%;
  background:radial-gradient(circle at 50% 42%, rgba(45,212,222,0.20), transparent 62%);
  filter:blur(26px);
}
.drone-canvas{
  display:block; width:100%; height:100%;
  animation:droneBob 6.5s ease-in-out infinite;
  pointer-events:auto; touch-action:pan-y; cursor:grab;
}
@keyframes droneBob{ 0%,100%{ transform:translateY(-8px); } 50%{ transform:translateY(10px); } }
.drone-shadow{
  position:absolute; left:20%; right:20%; bottom:4%; height:26px; border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(0,0,0,0.5), transparent 70%);
  animation:shadowBob 6.5s ease-in-out infinite;
}
@keyframes shadowBob{ 0%,100%{ transform:scale(1); opacity:.5; } 50%{ transform:scale(.82); opacity:.3; } }

/* ===== 06 · STAKES + GAUGE ===== */
.stakes{ max-width:var(--maxw); margin:0 auto; padding:120px 24px; }
.stakes__grid{
  display:grid; grid-template-columns:1.1fr 1fr; grid-template-rows:auto auto;
  gap:32px 56px; align-items:end;
}
.stakes__lead{ grid-column:1; grid-row:1; align-self:start; max-width:460px; }
.stakes__title{ font-family:var(--display); font-weight:600; font-size:clamp(26px,3.4vw,38px); line-height:1.12; letter-spacing:-0.015em; }
.stakes__body{ margin-top:18px; color:var(--slate); font-size:17px; }
.stakes__src{ margin-top:18px; font-size:11.5px; color:var(--slate-d); max-width:380px; line-height:1.5; }
.stakes__figure{ grid-column:2; grid-row:1 / span 2; align-self:start; padding-top:6px; }
.stakes__pretext{ font-size:12px; letter-spacing:0.2em; color:var(--blocked); }
.stakes__amount{
  font-family:var(--display); font-weight:700; letter-spacing:-0.03em; line-height:0.9;
  font-size:clamp(60px,11vw,150px); color:var(--fog);
  text-shadow:0 0 60px rgba(244,84,78,0.18);
}
.stakes__caption{ margin-top:14px; max-width:300px; color:var(--slate); font-size:15.5px; }

.gauge{ grid-column:1; grid-row:2; display:flex; gap:22px; align-items:stretch; padding-top:10px; }
.gauge__track{
  position:relative; width:6px; border-radius:999px; background:var(--panel-2); overflow:hidden; flex:none;
}
.gauge__fill{
  position:absolute; left:0; right:0; bottom:0; height:0;
  background:linear-gradient(180deg, var(--blocked), var(--mid) 55%, var(--hold));
  transition:height 1.4s var(--ease);
}
.gauge__marks{ display:flex; flex-direction:column-reverse; justify-content:space-between; gap:18px; }
.mark{ position:relative; padding-left:2px; }
.mark__tier{ font-size:11px; letter-spacing:0.14em; }
.mark--hold .mark__tier{ color:var(--hold); }
.mark--mid .mark__tier{ color:var(--mid); }
.mark--top .mark__tier{ color:var(--blocked); }
.mark__amt{ display:block; font-family:var(--display); font-weight:600; font-size:18px; margin-top:3px; }
.mark__note{ display:block; font-size:13px; color:var(--slate); margin-top:2px; }

/* ===== 07 · ROUTE (trayectoria) ===== */
.route{ max-width:var(--maxw); margin:0 auto; padding:60px 24px 120px; }
.route__intro{ max-width:560px; margin-bottom:18px; }
.route__title{ font-family:var(--display); font-weight:600; font-size:clamp(26px,3.4vw,40px); line-height:1.1; letter-spacing:-0.015em; }
.route__body{ margin-top:14px; color:var(--slate); font-size:17px; }
.route__stage{ position:relative; }
.route__path{ width:100%; height:auto; overflow:visible; }
#routeLine{ stroke-dasharray:1; stroke-dashoffset:1; }
#routeDrone{ filter:drop-shadow(0 0 7px var(--cyan)); opacity:0; }

.route__steps{
  position:relative; margin-top:-40px; display:grid; grid-template-columns:repeat(3,1fr); gap:26px; align-items:end;
}
.phase{ max-width:330px; }
.phase--low{ align-self:end; } .phase--mid{ align-self:center; } .phase--high{ align-self:start; }
.phase__idx{ font-size:13px; color:var(--cyan); }
.phase__title{ font-family:var(--display); font-weight:600; font-size:23px; margin:8px 0 10px; }
.phase__body{ color:var(--slate); font-size:15px; }
.phase__tag{ margin-top:14px; font-size:11.5px; color:var(--cyan); opacity:.8; }

/* ===== 08 · VERDICT + CONSOLE 3D ===== */
.verdict{
  max-width:var(--maxw); margin:0 auto; padding:110px 24px;
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px; align-items:center;
}
.verdict__title{ font-family:var(--display); font-weight:600; font-size:clamp(26px,3.4vw,40px); line-height:1.12; letter-spacing:-0.015em; }
.verdict__body{ margin:18px 0 18px; color:var(--slate); font-size:17px; max-width:420px; }
.verdict__meta{ font-size:12px; color:var(--slate-d); }

.verdict__panel{ perspective:1400px; }
.console{
  position:relative; background:linear-gradient(165deg,var(--panel-2),var(--panel));
  border:1px solid var(--line); border-radius:var(--rad); padding:26px 26px 24px;
  box-shadow:0 50px 90px -40px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.05);
  transform-style:preserve-3d; transition:transform .2s var(--ease);
  will-change:transform;
}
.console::before{
  content:''; position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(150deg,var(--line-cy),transparent 50%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
}
.console__head{ display:flex; align-items:center; justify-content:space-between; }
.console__ref{ font-size:11.5px; color:var(--cyan); letter-spacing:0.08em; }
.console__live{ display:inline-flex; align-items:center; gap:7px; font-size:10.5px; letter-spacing:0.14em; color:var(--slate); }
.console__coord{ font-size:12px; color:var(--slate); margin:14px 0 18px; }
.console__checks{ display:flex; flex-direction:column; gap:12px; }
.ck{ display:flex; align-items:center; gap:13px; font-size:14.5px; opacity:.38; transition:opacity .4s var(--ease); }
.ck.is-done{ opacity:1; }
.ck__box{ width:20px; height:20px; flex:none; border-radius:6px; border:1.5px solid var(--slate-d); position:relative; transition:all .3s var(--ease); }
.ck.is-done .ck__box{ background:var(--cleared); border-color:var(--cleared); }
.ck__box::after{ content:''; position:absolute; left:6px; top:2.5px; width:5px; height:10px; border:solid var(--ink); border-width:0 2px 2px 0; transform:rotate(45deg) scale(0); transition:transform .25s var(--ease) .05s; }
.ck.is-done .ck__box::after{ transform:rotate(45deg) scale(1); }
.ck__label{ flex:1; }
.ck__tag{ font-size:11px; color:var(--slate-d); }
.console__verdict{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
.stamp{
  font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:0.04em;
  color:var(--cleared); border:1.6px solid var(--cleared); border-radius:8px; padding:7px 14px;
  opacity:0; transform:scale(1.5) rotate(-7deg); transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.stamp.is-stamped{ opacity:1; transform:scale(1) rotate(-3deg); }
.console__time{ font-size:11.5px; color:var(--slate-d); }

/* ===== 09 · MARCO (ledger denso) ===== */
.marco{
  max-width:var(--maxw); margin:0 auto; padding:110px 24px;
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:start;
}
.marco__title{ font-family:var(--display); font-weight:600; font-size:clamp(24px,3vw,34px); line-height:1.16; letter-spacing:-0.015em; }
.marco__body{ margin-top:18px; color:var(--slate); font-size:16.5px; max-width:380px; }
.ledger{ border-top:1px solid var(--line); }
.ledger__row{
  display:grid; grid-template-columns:140px 1fr; grid-template-rows:auto auto; gap:2px 22px;
  padding:20px 6px; border-bottom:1px solid var(--line); transition:background .25s var(--ease), padding-left .25s var(--ease);
}
.ledger__row:hover{ background:rgba(45,212,222,0.04); padding-left:14px; }
.ledger__code{ grid-row:1 / span 2; align-self:center; font-size:13px; color:var(--cyan); }
.ledger__name{ font-family:var(--display); font-weight:600; font-size:16px; }
.ledger__desc{ color:var(--slate); font-size:14px; }

/* ===== 10 · FAQ ===== */
.faq{ max-width:840px; margin:0 auto; padding:60px 24px 110px; }
.faq__title{ font-family:var(--display); font-weight:600; font-size:clamp(24px,3vw,34px); letter-spacing:-0.015em; margin-bottom:30px; }
.faq__list{ border-top:1px solid var(--line); }
.qa{ border-bottom:1px solid var(--line); }
.qa__q{
  display:flex; align-items:center; justify-content:space-between; gap:18px; cursor:pointer; list-style:none;
  font-family:var(--display); font-weight:600; font-size:17.5px; padding:22px 2px; transition:color .25s var(--ease);
}
.qa__q::-webkit-details-marker{ display:none; }
.qa__q:hover{ color:var(--cyan); }
.qa__ic{ position:relative; width:15px; height:15px; flex:none; }
.qa__ic::before,.qa__ic::after{ content:''; position:absolute; background:var(--cyan); transition:transform .3s var(--ease); }
.qa__ic::before{ top:6.5px; left:0; width:15px; height:2px; }
.qa__ic::after{ top:0; left:6.5px; width:2px; height:15px; }
.qa[open] .qa__ic::after{ transform:scaleY(0); }
.qa__a{ padding:0 2px 24px; }
.qa__a p{ color:var(--slate); font-size:15.5px; max-width:680px; }
.qa[open] .qa__a{ animation:qaOpen .35s var(--ease); }
@keyframes qaOpen{ from{ opacity:0; transform:translateY(-6px);} to{ opacity:1; transform:none;} }

/* ===== 11 · CLOSE ===== */
.close{ border-top:1px solid var(--line); }
.close__inner{ max-width:var(--maxw); margin:0 auto; padding:110px 24px; }
.close__line{ font-size:13px; letter-spacing:0.14em; color:var(--cyan); margin-bottom:16px; }
.close__title{ font-family:var(--display); font-weight:600; font-size:clamp(34px,6vw,68px); line-height:1.02; letter-spacing:-0.025em; max-width:760px; margin-bottom:32px; }

/* ===== 12 · FOOTER ===== */
.footer{ background:var(--ink-2); border-top:1px solid var(--line); padding:48px 24px 40px; }
.footer__top{ max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; padding-bottom:30px; border-bottom:1px solid var(--line); }
.footer__nav{ display:flex; gap:26px; flex-wrap:wrap; }
.footer__link{ font-size:14.5px; color:var(--slate); transition:color .25s var(--ease); }
.footer__link:hover{ color:var(--cyan); }
.footer__disc{ max-width:820px; margin:26px auto 0; font-size:12px; color:var(--slate-d); line-height:1.6; }
.footer__copy{ max-width:var(--maxw); margin:18px auto 0; font-size:12px; color:var(--slate-d); }
/* compat pagina legal */
.footer__bottom{ max-width:var(--maxw); margin:0 auto; }
.legal__back{ font-size:14px; color:var(--slate); }
.legal__back:hover{ color:var(--cyan); }

/* ===== 13 · REVEAL ===== */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
[data-delay="1"]{ transition-delay:.09s; }
[data-delay="2"]{ transition-delay:.18s; }

/* ===== 14 · RESPONSIVE ===== */
@media (max-width:980px){
  .stakes__grid{ grid-template-columns:1fr; gap:40px; }
  .stakes__lead,.stakes__figure,.gauge{ grid-column:1; }
  .stakes__figure{ grid-row:auto; } .gauge{ grid-row:auto; }
  .verdict,.marco{ grid-template-columns:1fr; gap:40px; }
  .drone-stage{ width:min(62vw,420px); top:9%; right:-2%; }
  .route__steps{ grid-template-columns:1fr; gap:34px; margin-top:24px; }
  .phase{ max-width:none; } .phase--low,.phase--mid,.phase--high{ align-self:auto; }
  .route__path{ display:none; }
}
@media (max-width:680px){
  body{ font-size:16px; }
  .nav__links{ display:none; }
  .hud{ display:none; }
  /* Hero en columna: el dron arriba (centrado, en flujo) y el copy debajo. Sin vacíos ni solapes. */
  .hero{ flex-direction:column; justify-content:center; align-items:stretch; padding-top:104px; padding-bottom:7vh; }
  .drone-stage{
    display:block; position:relative; z-index:0;
    top:auto; right:auto; left:auto; transform:none;
    width:min(82vw,340px); margin:0 auto -2vh; aspect-ratio:1/1;
  }
  .drone-canvas{ pointer-events:none; } /* en móvil el dron solo decora: scroll vertical impoluto */
  .hero__copy{ max-width:none; }
  .stakes,.verdict,.marco{ padding:80px 22px; }
  .route{ padding:30px 22px 80px; }
  .ledger__row{ grid-template-columns:1fr; gap:4px; }
  .ledger__code{ grid-row:auto; }
  .footer__top{ flex-direction:column; align-items:flex-start; gap:22px; }
}

/* ===== 15 · REDUCED MOTION ===== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
  .ck{ opacity:1; } .stamp{ opacity:1; transform:rotate(-3deg); }
  #routeLine{ stroke-dashoffset:0; } #routeDrone{ opacity:1; }
}