@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap');

/* ============================================================
   nitia · tokens de marca — FUENTE COMPARTIDA POR TODAS LAS PAGINAS
   ------------------------------------------------------------
   Bloque v2 (Marino/Jade) copiado VERBATIM de css/app.css, que es
   la fuente de verdad del panel. Si cambian alli, se copian aqui;
   NO se crean variantes propias de la web.
   ============================================================ */
:root{
  /* Estructura · construye la pantalla, no significa nada */
  --nitia-marino: #1B3A52;
  --nitia-papel: #F7F8F8;
  --nitia-blanco: #FFFFFF;
  --nitia-niebla: #E3E8EA;
  --nitia-acero: #5E717D;

  /* Significado · base, tinte de fondo y sombra de texto */
  --nitia-jade: #5FC2A6;
  --nitia-jade-tinte: #D3EDE4;
  --nitia-jade-texto: #1D5F4B;

  --nitia-ambar: #E0A33E;
  --nitia-ambar-tinte: #FBF0DA;
  --nitia-ambar-texto: #87610F;

  --nitia-coral: #D1615D;
  --nitia-coral-tinte: #F8E2E1;
  --nitia-coral-texto: #96322E;

  /* Tipografía */
  --nitia-display: "Space Grotesk", system-ui, sans-serif;
  --nitia-ui: "Inter", system-ui, -apple-system, sans-serif;

  /* Radios */
  --nitia-r-s: 6px;
  --nitia-r-m: 10px;
  --nitia-r-l: 16px;

  /* Espaciado · escala de 4 */
  --nitia-e-1: 4px;   --nitia-e-2: 8px;   --nitia-e-3: 12px;
  --nitia-e-4: 16px;  --nitia-e-6: 24px;  --nitia-e-8: 32px;
  --nitia-e-12: 48px;

  /* Elevación · discreta, nunca dramática */
  --nitia-sombra-1: 0 1px 2px rgba(27,58,82,.06);
  --nitia-sombra-2: 0 4px 16px rgba(27,58,82,.08);

  /* ===== tokens v1 · re-apuntados a v2 (se mantienen para no romper usos) ===== */
  --ink:var(--nitia-marino);--ink-2:var(--nitia-marino);--teal:var(--nitia-jade);--teal-dark:var(--nitia-jade-texto);--teal-soft:var(--nitia-jade-tinte);
  --bg:var(--nitia-papel);--card:var(--nitia-blanco);--line:var(--nitia-niebla);--line-2:var(--nitia-niebla);--muted:var(--nitia-acero);--text:var(--nitia-marino);
  --pos:var(--nitia-jade-texto);--warn:var(--nitia-ambar-texto);--neg:var(--nitia-coral-texto);--brass:var(--nitia-acero);
  --mint:var(--nitia-jade);--mint-dark:var(--nitia-jade-texto);--mint-soft:var(--nitia-jade-tinte);--mint-line:var(--nitia-jade-tinte);--on-mint:var(--nitia-marino);
  --shadow:0 1px 2px rgba(20,33,31,.04),0 4px 16px rgba(20,33,31,.05);
  --sans:var(--nitia-ui);
  --disp:var(--nitia-display);

  /* ===== solo de la web · maquetación, no son marca ===== */
  --teal-line:var(--nitia-jade-tinte);   /* mapeado (antes #b9ddd3) */
  --shadow-lift:var(--nitia-sombra-2);   /* mapeado (antes 0 8px 30px rgba(20,33,31,.10)) */
  --maxw:1080px;                         /* ancho de columna, propio de la web */
  /* --bl (desenfoque de los emojis del hero) se define por elemento en .fly.f1…f8 */

  /* ===== derivados · para las secciones oscuras y los orbes =====
     NO son colores nuevos: todos se calculan desde los --nitia-* de arriba.
     Si cambia el jade o el marino, estos cambian solos. */
  --sobre-oscuro:       var(--nitia-jade-tinte);                                            /* texto sobre marino (antes #EAF2F0) */
  --sobre-oscuro-suave: color-mix(in srgb, var(--nitia-jade-tinte) 70%, var(--nitia-marino));/* texto secundario  (antes #9FB3AD) */
  --marino-hover:       color-mix(in srgb, var(--nitia-marino) 82%, var(--nitia-acero));     /* hover sobre marino (antes #354350) */
  --orbe-jade-luz:      color-mix(in srgb, var(--nitia-jade) 75%, var(--nitia-blanco));      /* brillo del orbe jade (antes #85c9b6) */
  --orbe-marino-luz:    color-mix(in srgb, var(--nitia-marino) 50%, var(--nitia-acero));     /* brillo del orbe ai   (antes #4a5b68) */
  --orbe-marino-fondo:  color-mix(in srgb, var(--nitia-marino) 75%, black);                  /* borde del orbe ai    (antes #232d36) */
}

/* Base compartida */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--text);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:var(--disp);font-weight:600;line-height:1.12;letter-spacing:-0.015em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--teal-dark);outline-offset:2px}