/* Estilos complementarios a Tailwind (utilidades que no cubre el CDN por sí solas) */
/* Nota: la clase .hidden la provee Tailwind (display:none) — no la redefinimos
   acá para no romper el patrón responsive "hidden md:flex" del header. */

/**
 * Tipografía de marca: HK Grotesk (misma fuente que el isologo de Novalo).
 * Es una fuente con licencia propia de Novalo, así que NO la cargamos desde
 * un CDN público — hay que copiar los archivos reales acá:
 *   assets/fonts/HKGrotesk-Regular.woff2   (400)
 *   assets/fonts/HKGrotesk-Medium.woff2    (500)
 *   assets/fonts/HKGrotesk-SemiBold.woff2  (600)
 *   assets/fonts/HKGrotesk-Bold.woff2      (700)
 * Si te faltan algunos pesos, borrá el @font-face correspondiente: el resto
 * sigue funcionando y el navegador usa la tipografía de sistema como respaldo
 * hasta que agregues los archivos.
 */
@font-face {
  font-family: 'HK Grotesk';
  src: url('../assets/fonts/HKGrotesk-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'HK Grotesk';
  src: url('../assets/fonts/HKGrotesk-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'HK Grotesk';
  src: url('../assets/fonts/HKGrotesk-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'HK Grotesk';
  src: url('../assets/fonts/HKGrotesk-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

#precalificacion-progreso {
  transition: width 0.3s ease;
}

/* Estos tres estados son semánticos (positivo/alerta/negativo) y se mantienen
   en verde/ámbar/rojo a propósito, independientemente de la paleta de marca,
   por accesibilidad y porque son un patrón universalmente reconocible. */
.resultado-positivo {
  background-color: #ecfdf5;
  border-color: #10b981;
  color: #065f46;
}
.resultado-condicional {
  background-color: #fffbeb;
  border-color: #f59e0b;
  color: #92400e;
}
.resultado-negativo {
  background-color: #fef2f2;
  border-color: #ef4444;
  color: #991b1b;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'HK Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
}