@import url("fonts.css");
:root{
  --ink:#0B0D12; --raise:#12161E; --line:#1F2531; --text:#E9ECF2; --soft:#A7B0C2; --muted:#7D8699;
  --voice:#2EE6A6; --voice-ink:#06231A; --ally:#4C8DFF; --enemy:#FF7A45;
  --display:"Sora","Segoe UI",system-ui,sans-serif; --body:"Manrope","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{background:var(--ink);color:var(--text);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-text-size-adjust:100%}
body{margin:0}
html[data-lang="es"] .en,html[data-lang="en"] .es{display:none!important}
a{color:var(--voice);text-underline-offset:3px}
a:hover{color:#7CF2C9}
:focus-visible{outline:2px solid var(--voice);outline-offset:3px;border-radius:4px}
.wrap{width:min(1120px,100% - 48px);margin-inline:auto}
/* cabecera */
.top{display:flex;align-items:center;gap:20px;padding:22px 0}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.02em}
.brand svg{flex-shrink:0}
.top nav{margin-left:auto;display:flex;align-items:center;gap:22px;font-size:15px}
.top nav a{color:var(--soft);text-decoration:none}
.top nav a:hover,.top nav a[aria-current]{color:var(--text)}
.langs{display:flex;border:1px solid var(--line);border-radius:999px;padding:3px}
.langs button{border:0;background:none;color:var(--muted);font:600 13px var(--body);padding:5px 11px;border-radius:999px;cursor:pointer}
.langs button[aria-pressed="true"]{background:var(--raise);color:var(--text)}
/* botones */
.btn{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 24px;border-radius:14px;font:700 16px var(--body);text-decoration:none}
.btn-voice{background:var(--voice);color:var(--voice-ink)}
.btn-voice:hover{color:var(--voice-ink);filter:brightness(1.08)}
.btn-quiet{color:var(--text);border:1px solid var(--line)}
.btn-quiet:hover{color:var(--text);background:var(--raise)}
/* portada */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:center;padding:56px 0 88px}
.hero h1{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(40px,6vw,68px);line-height:1.02;letter-spacing:-.035em}
.hero p.lead{margin:22px 0 32px;max-width:30em;font-size:19px;color:var(--soft)}
.cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.cta small{width:100%;color:var(--muted);font-size:14px}
.radar{position:relative;aspect-ratio:1;width:100%;max-width:470px;justify-self:center}
.radar svg{width:100%;height:100%;display:block}
.ring{fill:none;stroke:var(--voice)}
.bubble{position:absolute;width:15%;aspect-ratio:1;margin:-7.5% 0 0 -7.5%;border-radius:50%;display:flex;align-items:center;justify-content:center;font:700 clamp(12px,1.6vw,16px) var(--display)}
.bubble.me{left:50%;top:50%;background:#16302A;border:3px solid var(--voice);color:#fff}
.bubble.ally{left:83%;top:24%;background:#1C2740;border:3px solid var(--ally);color:#DCE6FF;animation:approach 2.6s cubic-bezier(.3,.7,.2,1) .4s both}
.bars{position:absolute;left:83%;top:24%;margin:-2% 0 0 8.5%;display:flex;align-items:flex-end;gap:4px;height:22px;animation:approach 2.6s cubic-bezier(.3,.7,.2,1) .4s both}
.bars i{display:block;width:6px;border-radius:2px;background:#2A3242}
.bars i:nth-child(1){height:8px}.bars i:nth-child(2){height:14px}.bars i:nth-child(3){height:20px}
.bars i{animation:bar .3s ease-out both}
.bars i:nth-child(1){animation-delay:1.3s}.bars i:nth-child(2){animation-delay:1.9s}.bars i:nth-child(3){animation-delay:2.6s}
@keyframes approach{from{left:83%;top:24%}to{left:63%;top:40%}}
@keyframes bar{to{background:var(--voice)}}
.enemy-note{position:absolute;left:4%;bottom:6%;display:flex;gap:10px;align-items:center;font-size:13px;color:var(--muted);max-width:60%}
.enemy-note .dot{width:12px;height:12px;border-radius:50%;border:2px dashed var(--enemy);flex-shrink:0}
@media (prefers-reduced-motion:reduce){
  .bubble.ally,.bars{animation:none;left:63%;top:40%}
  .bars i{animation:none;background:var(--voice)}
}
/* secciones */
section.block{padding:72px 0;border-top:1px solid var(--line)}
section.block h2{margin:0 0 12px;font-family:var(--display);font-weight:700;font-size:clamp(28px,3.4vw,38px);letter-spacing:-.025em;line-height:1.1}
section.block .intro{margin:0 0 36px;max-width:36em;color:var(--soft)}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;counter-reset:s}
.steps li{counter-increment:s;padding-top:18px;border-top:2px solid var(--line)}
.steps li::before{content:counter(s);display:block;font:700 15px var(--display);color:var(--voice);margin-bottom:10px}
.steps h3,.facts h3{margin:0 0 6px;font:700 19px/1.3 var(--display)}
.steps p,.facts p{margin:0;color:var(--soft);font-size:16px}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 48px}
.facts div{padding-left:18px;border-left:3px solid var(--line)}
.facts div.voice{border-color:var(--voice)}.facts div.ally{border-color:var(--ally)}.facts div.enemy{border-color:var(--enemy)}
.req{display:flex;flex-wrap:wrap;gap:10px 28px;margin:0;padding:0;list-style:none;color:var(--soft)}
.req li::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--voice);margin-right:10px;vertical-align:middle}
/* pie */
footer{padding:44px 0 56px;border-top:1px solid var(--line);color:var(--muted);font-size:14px}
footer .links{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:18px}
footer .links a{color:var(--soft)}
footer p{margin:6px 0;max-width:62em}
/* textos legales */
.doc{width:min(720px,100% - 48px);margin-inline:auto;padding:40px 0 80px}
.doc h1{font:700 clamp(32px,4.4vw,46px)/1.08 var(--display);letter-spacing:-.03em;margin:0 0 8px}
.doc .date{color:var(--muted);margin:0 0 36px;font-size:15px}
.doc h2{font:700 21px/1.3 var(--display);margin:40px 0 10px}
.doc p,.doc li{color:#D3D8E2}
.doc ul{padding-left:22px}
.doc li{margin:6px 0}
.doc table{width:100%;border-collapse:collapse;font-size:15px;margin:14px 0}
.doc th,.doc td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--line)}
.doc th{color:var(--soft);font-weight:600}
.doc .fill{background:#3A2A12;color:#FFD08A;padding:1px 6px;border-radius:5px}
@media (max-width:860px){
  .hero{grid-template-columns:1fr;padding-top:24px}
  .radar{max-width:380px}
  .steps,.facts{grid-template-columns:1fr}
  .top nav a.hide-m{display:none}
}
@media (max-width:520px){
  .top{flex-wrap:wrap;row-gap:12px}
  .top nav{margin-left:0;width:100%;justify-content:space-between;gap:12px}
  .doc table{font-size:14px}
  .doc th,.doc td{padding:8px 6px}
}