/* ============================================================
   Alien Prediction — estilos compartidos del sitio
   Paleta y tipografías según el Manual de Marca v1.0.
   (tema, navegación y footer usados por todas las páginas públicas)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Inter:wght@400;500;600&family=Roboto+Mono:wght@400;500&display=swap');

:root{
  --bg:#0A0A0F;        /* Negro Profundo — fondo primario */
  --bg2:#0D1B2A;       /* Azul Noche — fondo secundario / secciones alternas */
  --card:#0D1B2A;      /* Azul Noche — cards */
  --line:#1A2C40;      /* derivado sutil para bordes sobre fondo oscuro */
  --fg:#F0F4FF;        /* Blanco Frío — texto principal */
  --muted:#8A9BB0;     /* Gris Metálico — texto secundario */
  --accent:#1A8CFF;    /* Azul Eléctrico — principal, CTAs, títulos clave */
  --accent2:#00D4FF;   /* Cian Eléctrico — acento RESTRINGIDO (solo highlights puntuales) */
  --radius:14px; --max:1080px;
  /* Uso funcional (solo paneles internos de operación: admin/dashboard/panel) */
  --ok:#22c55e; --danger:#ef4444;
  --font-head:'Barlow Condensed', sans-serif;
  --font-body:'Inter', -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:'Roboto Mono', monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);background:var(--bg);color:var(--fg);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.container{max-width:var(--max);margin:0 auto;padding:0 20px}

h1,h2,h3,.brand,.section-title,.hero h1{font-family:var(--font-head);font-weight:800;letter-spacing:.2px}
.mono,.price .amount,.stat .n{font-family:var(--font-mono)}

/* Botones — un solo tono (azul eléctrico); el cian queda para acentos puntuales, no para CTAs */
.btn{display:inline-block;padding:13px 24px;border-radius:10px;background:var(--accent);color:#fff;font-weight:600;border:0;cursor:pointer;font-size:15px;transition:transform .12s ease,opacity .12s ease;text-align:center;font-family:var(--font-body)}
.btn:hover{opacity:.9;transform:translateY(-1px)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--fg)}
.btn.sm{padding:10px 18px;font-size:14px}
.btn.block{display:block;width:100%}

/* Navegación */
.site-nav{position:sticky;top:0;z-index:50;background:rgba(10,10,15,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-nav .inner{display:flex;align-items:center;justify-content:space-between;gap:18px;height:66px}
.site-nav .brand{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase}
.site-nav .brand img{width:38px;height:38px;border-radius:10px;box-shadow:0 0 18px rgba(26,140,255,.4)}
.site-nav .links{display:flex;align-items:center;gap:26px}
.site-nav .links a{color:var(--muted);font-size:15px;transition:color .12s;font-family:var(--font-body)}
.site-nav .links a:hover{color:var(--fg)}

/* Footer */
.site-footer{border-top:1px solid var(--line);padding:40px 0;color:var(--muted);text-align:center;margin-top:40px}
.site-footer .brand{display:flex;align-items:center;justify-content:center;gap:10px;font-weight:700;margin-bottom:8px;font-family:var(--font-head);text-transform:uppercase;letter-spacing:.4px}
.site-footer .brand img{width:30px;height:30px;border-radius:8px}
.site-footer .small{font-size:13px;opacity:.85;font-family:var(--font-body)}
.site-footer .disclaimer{font-style:italic;font-size:11px;opacity:.6;max-width:640px;margin:14px auto 0;line-height:1.5;font-family:var(--font-body)}

@media (max-width:760px){
  .site-nav .links{display:none}
}