/* ===========================================================
   DatoFino — landing · base + hero cinemático
   serif Spectral centrado + radar de fondo · verde-noche.
   =========================================================== */

/* Fuentes de marca self-hosteadas (AUD-20 H1). Antes venían de una hoja
   remota de Google Fonts, pero la CSP estricta (style-src/font-src 'self',
   AUD-01) bloqueaba ese origen → la marca caía a fallbacks. Ahora son woff2
   (subset latin) en /assets/fonts/: cumplen la CSP sin tocarla, sin cadena
   de requests ni 3er origen. font-display:swap = texto visible al toque.
   Spectral es estática (un archivo por peso); Figtree y JetBrains Mono son
   VARIABLES → un solo woff2 cubre todo el eje wght (font-weight:rango). */
@font-face{font-family:'Spectral';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/spectral-400.woff2') format('woff2');}
@font-face{font-family:'Spectral';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/spectral-500.woff2') format('woff2');}
@font-face{font-family:'Spectral';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/spectral-600.woff2') format('woff2');}
@font-face{font-family:'Spectral';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/spectral-400i.woff2') format('woff2');}
@font-face{font-family:'Spectral';font-style:italic;font-weight:500;font-display:swap;src:url('/assets/fonts/spectral-500i.woff2') format('woff2');}
@font-face{font-family:'Figtree';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/figtree.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;src:url('/assets/fonts/jetbrains-mono.woff2') format('woff2');}

:root{
  --bg:#060d09;
  --bg-2:#0a140e;
  --ink:#ECF4ED;
  --muted:rgba(236,244,237,.56);
  --muted-2:rgba(236,244,237,.52); /* AUD-21: .34 daba ~2,9:1; .52 ≈ 5:1 (AA) */
  --line:rgba(236,244,237,.12);
  --line-2:rgba(236,244,237,.07);

  --accent:#F64A00;
  --accent-deep:#D33D00;
  --green:#46D07F;

  --maxw:1180px;
  --pad:clamp(20px,4vw,46px);
  --ease:cubic-bezier(.22,.7,.2,1);

  --f-disp:'Spectral', Georgia, serif;
  --f-body:'Figtree', system-ui, sans-serif;
  --f-mono:'JetBrains Mono', ui-monospace, monospace;
}

*{ box-sizing:border-box; }
/* overflow-x:hidden TAMBIÉN en html (no solo body): en móvil un desborde
   horizontal expande el layout viewport y el botón flotante (position:fixed;
   right:18px) queda anclado al borde derecho del viewport expandido y se sale
   de pantalla. Sin position:sticky en la landing, hidden es seguro. */
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:hidden; }
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; text-rendering:optimizeLegibility;
  min-height:100svh; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--accent); color:#fff; }
b,strong{ font-weight:700; }

/* Foco visible por teclado (AUD-21, WCAG 2.4.7): anillo de marca; en los
   controles de fondo naranjo el anillo va en tinta clara para que contraste. */
:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
.go:focus-visible,.df-btn:focus-visible,.demo-tab[aria-selected="true"]:focus-visible{ outline-color:var(--ink); }

/* Saltar al contenido (AUD-21, WCAG 2.4.1): visible solo al enfocar con teclado. */
.skip-link{ position:fixed; left:12px; top:-60px; z-index:100; background:var(--accent-deep); color:#fff; padding:10px 16px; border-radius:8px; font-family:var(--f-body); font-weight:600; transition:top .15s var(--ease); }
.skip-link:focus{ top:12px; }

/* ===========================================================
   STAGE + FONDO RADAR
   =========================================================== */
.stage{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  overflow:hidden; isolation:isolate;
}
#radar{
  position:absolute; inset:0; width:100%; height:100%; z-index:0;
  display:block; transition:opacity .6s var(--ease);
}
.veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 100%, transparent 0%, rgba(6,13,9,.30) 48%, rgba(6,13,9,.84) 100%),
    linear-gradient(180deg, var(--bg) 0%, rgba(6,13,9,.55) 22%, transparent 46%, transparent 64%, rgba(6,13,9,.6) 100%);
}
.grain{
  position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===========================================================
   NAV SUPERIOR
   =========================================================== */
.topbar{
  position:relative; z-index:5;
  display:flex; align-items:center; gap:22px;
  padding:22px var(--pad);
}
.nav-left{ display:flex; align-items:center; gap:26px; }
.badge{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--f-mono); font-size:.7rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); white-space:nowrap;
  padding:7px 13px; border-radius:999px;
  background:rgba(246,74,0,.1); border:1px solid rgba(246,74,0,.34);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.badge .star{ width:11px; height:11px; }
.brand{ display:inline-flex; align-items:center; gap:9px; }
.brand img{ width:28px; height:28px; }
.brand .name{ font-family:var(--f-disp); font-weight:500; font-size:1.28rem; letter-spacing:-.01em; }
.brand .name b{ font-weight:600; }
.nav-links{ display:flex; align-items:center; gap:24px; }
.nav-links a{ font-size:.92rem; color:var(--muted); transition:color .16s; }
.nav-links a:hover{ color:var(--ink); }
.nav-right{ margin-left:auto; display:flex; align-items:center; gap:18px; }
.nav-right .link{ font-size:.92rem; color:var(--muted); transition:color .16s; }
.nav-right .link:hover{ color:var(--ink); }
.btn-login{
  font-family:var(--f-body); font-weight:600; font-size:.9rem;
  padding:9px 20px; border-radius:999px; border:1px solid var(--line);
  background:rgba(236,244,237,.06); color:var(--ink);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:background .16s, border-color .16s, transform .16s;
}
.btn-login:hover{ background:rgba(236,244,237,.14); border-color:var(--line); transform:translateY(-1px); }
@media(max-width:820px){ .nav-links{ display:none; } }
@media(max-width:520px){ .nav-right .link{ display:none; } .topbar{ gap:12px; } }

/* ===========================================================
   HERO CENTRAL
   =========================================================== */
.hero{
  position:relative; z-index:5; flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:clamp(28px,6vh,80px) var(--pad) clamp(56px,12vh,120px);
  gap:clamp(20px,3vh,30px);
}
.eyebrow{
  font-family:var(--f-mono); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted-2); display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow .live{ width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 10px 1px var(--green); animation:pulse 2.4s var(--ease) infinite; }
@keyframes pulse{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }

.hero h1{
  font-family:var(--f-disp); font-weight:500; letter-spacing:-.01em; line-height:1.04;
  font-size:clamp(2.8rem,8vw,6.2rem); margin:0; max-width:14ch; text-wrap:balance;
  text-shadow:0 2px 40px rgba(6,13,9,.6);
}
/* Sin énfasis de fuente/color a media frase en los títulos: el cambio serif→
   itálica-naranja era una firma visual de handoff de IA (feedback de Miguel).
   El <em> se conserva por semántica, pero hereda color y fuente → un solo
   color, una sola fuente. El naranjo se reserva a botones y cifras de dato. */
.hero h1 em{ font-style:normal; font-weight:inherit; color:inherit; }

.hero-sub{
  font-size:clamp(1rem,1.5vw,1.16rem); color:var(--muted); max-width:50ch; margin:0; line-height:1.55;
}

/* barra de captura del rubro */
.capture{
  width:min(540px,92vw);
  display:flex; align-items:center; gap:8px;
  padding:8px 8px 8px 22px; border-radius:999px;
  background:rgba(10,18,13,.55); border:1px solid var(--line);
  backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 20px 50px -20px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .2s, box-shadow .2s;
}
.capture:focus-within{ border-color:rgba(246,74,0,.55); box-shadow:0 20px 50px -18px rgba(246,74,0,.3), inset 0 1px 0 rgba(255,255,255,.06); }
.capture input{
  flex:1; min-width:0; border:none; background:transparent; outline:none;
  font-family:var(--f-body); font-size:1rem; color:var(--ink);
}
.capture input::placeholder{ color:var(--muted-2); }
.capture .go{
  flex:none; width:46px; height:46px; border-radius:50%; border:none; cursor:pointer;
  background:var(--accent); color:#fff; display:grid; place-items:center;
  box-shadow:0 8px 20px -6px rgba(246,74,0,.6);
  transition:transform .16s var(--ease), background .16s;
}
.capture .go:hover{ transform:translateX(2px) scale(1.03); background:var(--accent-deep); }
.capture .go svg{ width:18px; height:18px; }

.hero-note{
  font-family:var(--f-body); font-size:.92rem; color:var(--muted-2);
  margin:0; max-width:42ch;
}
/* AUD-21: el link de privacidad heredaba el color del texto sin subrayado →
   indistinguible. Lo marcamos con color de marca + subrayado. */
.hero-note a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.hero-note a:hover{ text-decoration-thickness:2px; }

/* leyenda inferior tenue (semáforo) */
.legend{
  position:relative; z-index:5;
  display:flex; align-items:center; justify-content:center; gap:clamp(16px,3vw,34px);
  padding:0 var(--pad) 26px; flex-wrap:wrap;
}
.legend .li{ display:inline-flex; align-items:center; gap:8px; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.05em; color:var(--muted-2); text-transform:uppercase; }
.legend .d{ width:8px; height:8px; border-radius:50%; }
.legend .d.v{ background:var(--green); box-shadow:0 0 8px 1px var(--green); }
.legend .d.a{ background:#F4C34D; }
.legend .d.r{ background:#FF7A5E; }

@media(prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .eyebrow .live{ animation:none; }
}

/* Modo liviano (curioso.js): equipos sin aceleración GPU o que piden ahorro.
   El scroll lagueaba por los efectos de composición que el navegador recalcula
   en cada repaint; aquí los apagamos. El fondo translúcido base se mantiene
   legible sin el blur, así que no se ve roto, solo más plano. */
.perf-lite .grain{ display:none; }
.perf-lite .badge,
.perf-lite .btn-login,
.perf-lite .capture{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
.perf-lite .capture{ background:rgba(10,18,13,.82); }
.perf-lite .final-bird{ animation:none; }