/* Tipografía: Alte Haas Grotesk (carpeta tipografia/, subconjunto latino en WOFF).
   Solo existen 400 y 700: 500 usa la normal y 600/800 usan la negrita. */
@font-face { font-family: "Alte Haas Grotesk"; font-weight: 400; font-style: normal; font-display: swap; src: url("../assets/fonts/alte-haas-grotesk-400.woff") format("woff"); }
@font-face { font-family: "Alte Haas Grotesk"; font-weight: 700; font-style: normal; font-display: swap; src: url("../assets/fonts/alte-haas-grotesk-700.woff") format("woff"); }

/* ==========================================================================
   Design tokens — Nivra
   Colores leídos del archivo del logo (logo/3.png):
     azul cielo  #5FAFEA  ·  azul marino #101E70
   <!-- VERIFICAR: el documento marca los colores de marca como aproximados;
        confirmar con el archivo original del diseñador. -->
   La landing solo tiene tema claro.
   ========================================================================== */
:root {
  color-scheme: light;

  /* Marca */
  --sky: #5FAFEA;
  --sky-soft: #DCEEFB;
  --navy: #101E70;
  --ink: #0E0E10;          /* casi negro: texto sobre pasteles */
  --white: #FFFFFF;

  /* Colores planos de tarjetas (se reconocen "por materia", como en la app) */
  --c-sky: #8CC8F2;
  --c-mint: #9BE0BC;
  --c-yellow: #FFD960;
  --c-coral: #FFA597;
  --c-lilac: #C6B8F7;
  --on-pastel: #0E0E10;    /* texto sobre pasteles: siempre oscuro (contraste ≥ 9:1) */

  /* Superficies y texto */
  --bg: #FFFFFF;
  --bg-alt: #F1F6FB;
  --surface: #FFFFFF;
  --text: #0E0E10;
  --muted: #3D4466;
  --link: #101E70;

  /* Acento para estados, bordes y sombras */
  --hl: #FFD960;
  --accent: var(--sky);
  --accent-ink: #0E0E10;   /* texto sobre el acento */
  --line: #0E0E10;
  --shadow-c: #0E0E10;
  --focus: #101E70;
  --error: #B3261E;

  /* Forma */
  --bw: 2px;
  --r-s: 12px;
  --r-m: 20px;
  --r-l: 32px;
  --sh: 4px 4px 0 var(--shadow-c);
  --sh-lg: 6px 6px 0 var(--shadow-c);
  --sh-press: 1px 1px 0 var(--shadow-c);

  /* Tipografía fluida */
  --font: "Alte Haas Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-lead: clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem);
  --fs-h1: clamp(2.5rem, 1.35rem + 5.2vw, 5rem);
  --fs-h2: clamp(1.875rem, 1.2rem + 2.8vw, 3.25rem);
  --fs-h3: clamp(1.125rem, 1.02rem + 0.5vw, 1.4rem);
  --fs-small: 0.875rem;

  /* Espaciado y anchura (iguales en todas las secciones) */
  --maxw: 1180px;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);
  --sec-y: clamp(4rem, 2.5rem + 6vw, 7.5rem);
  --nav-h: 68px;

  --t-fast: 160ms;
  --t-mid: 320ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}


/* Secciones sobre fondo marino: borde y sombra blancos */
.on-navy {
  --line: #FFFFFF;
  --shadow-c: #FFFFFF;
  --text: #FFFFFF;
  --muted: #D5DBF5;
  --link: #CFE6FA;
  --focus: #FFD960;
  color: #FFFFFF;
}