/* ==========================================================================
   North Vision — tokens y componentes de marca
   Fuente: Minikit de identidad web (NorthVision_MiniKit_Web.pdf)
   Todo el sitio usa estos tokens. No escribas colores sueltos en otros archivos.
   ========================================================================== */

/* Fuentes alojadas en el sitio (licencia SIL OFL, ver assets/fonts) */
@font-face { font-family: "Michroma"; src: url("../assets/fonts/michroma-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../assets/fonts/manrope-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../assets/fonts/manrope-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../assets/fonts/manrope-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* Color */
  --nv-negro: #000000;          /* Fondo de todo el sitio */
  --nv-azul: #0341BC;           /* Botones, barras y acentos */
  --nv-azul-texto: #4A7DFF;     /* Texto y links azules */
  --nv-blanco: #FFFFFF;         /* Titulares y texto clave */
  --nv-texto-2: #9AA3B5;        /* Párrafos y descripciones */
  --nv-superficie: #0A101C;     /* Tarjetas, secciones alternas */
  --nv-superficie-2: #0E1830;   /* Chips, tarjeta destacada */
  --nv-linea: #1C2A48;          /* Bordes de 1 px */
  --nv-gris: #545454;           /* Divisores, íconos inactivos */
  --nv-azul-hover: #0A4FD9;     /* Hover del botón */
  /* Halo azul permitido por el minikit taste-skill-ignore */
  --nv-brillo: radial-gradient(closest-side, rgba(3, 65, 188, 0.55), rgba(3, 65, 188, 0) 100%); /* Halo azul */

  /* Tipografía */
  --nv-font-display: "Michroma", "Arial Black", system-ui, sans-serif; /* Sustituto web de Yapari */
  --nv-font-texto: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; /* Sustituto web de Codec Pro */

  /* Michroma es muy ancha: estos tamaños mantienen los titulares en 2–3 líneas */
  --nv-h1: clamp(36px, 3.3vw, 48px);
  --nv-h2: clamp(28px, 1.2vw + 19px, 36px);
  --nv-h3: clamp(20px, 0.5vw + 17px, 24px);
  --nv-lead: clamp(17px, 0.35vw + 15.6px, 20px);
  --nv-cuerpo: 16px;
  --nv-chico: 14px;
  --nv-kicker: 13px;

  /* Espacio y forma */
  --nv-contenedor: 1200px;
  --nv-margen: clamp(16px, 3vw, 32px);
  --nv-seccion: clamp(64px, 9vw, 128px);
  --nv-radio-tarjeta: 24px;
  --nv-radio-imagen: 12px;
  --nv-radio-campo: 8px;
  --nv-radio-pildora: 999px;

  /* Movimiento */
  --nv-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --nv-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --nv-dur-rapida: 160ms;
  --nv-dur-media: 280ms;
  --nv-dur-lenta: 560ms;
}

/* --- Base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--nv-negro);
  color: var(--nv-texto-2);
  font-family: var(--nv-font-texto);
  font-size: var(--nv-cuerpo);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: var(--nv-azul-texto); text-underline-offset: 0.2em; }
p { margin: 0 0 1em; }
::selection { background: var(--nv-azul); color: var(--nv-blanco); }

:focus-visible {
  outline: 2px solid var(--nv-azul-texto);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Titulares (siempre en MAYÚSCULAS, Michroma) --------------------------- */
.nv-h1, .nv-h2, .nv-h3 {
  font-family: var(--nv-font-display);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--nv-blanco);
  margin: 0;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.nv-h1 { font-size: var(--nv-h1); line-height: 1.12; }
.nv-h2 { font-size: var(--nv-h2); line-height: 1.16; }
.nv-h3 { font-size: var(--nv-h3); line-height: 1.25; }
@media (max-width: 759px) { .nv-h1 { font-size: min(36px, 7.6vw); } .nv-h2 { font-size: min(28px, 6.4vw); } }
.nv-h1 em, .nv-h2 em, .nv-h3 em { font-style: normal; color: var(--nv-azul-texto); }

.nv-lead { font-size: var(--nv-lead); line-height: 1.55; color: var(--nv-texto-2); max-width: 46ch; }
.nv-chico { font-size: var(--nv-chico); line-height: 1.5; }

/* Kicker: antetítulo azul con raya */
.nv-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
  font-size: var(--nv-kicker);
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--nv-azul-texto);
}
.nv-kicker::before {
  content: "";
  width: 28px;
  height: 2px;
  background: currentColor;
  flex: none;
}

/* --- Botones (píldora) ------------------------------------------------------ */
.nv-btn {
  --btn-bg: var(--nv-azul);
  --btn-fg: var(--nv-blanco);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 26px;
  border: 0;
  border-radius: var(--nv-radio-pildora);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--nv-font-texto);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--nv-dur-rapida) var(--nv-ease-out),
              transform var(--nv-dur-rapida) var(--nv-ease-out),
              color var(--nv-dur-rapida) var(--nv-ease-out);
}
.nv-btn:hover { --btn-bg: var(--nv-azul-hover); }
.nv-btn:active { transform: scale(0.97); }
.nv-btn svg { width: 20px; height: 20px; flex: none; }

.nv-btn--secundario {
  --btn-bg: var(--nv-superficie-2);
  --btn-fg: var(--nv-blanco);
}
.nv-btn--secundario:hover { --btn-bg: var(--nv-linea); }

.nv-btn--claro { --btn-bg: var(--nv-blanco); --btn-fg: var(--nv-azul); }
.nv-btn--claro:hover { --btn-bg: #dfe7ff; }

/* --- Chips (píldora) -------------------------------------------------------- */
.nv-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 14px;
  border-radius: var(--nv-radio-pildora);
  background: var(--nv-superficie-2);
  color: var(--nv-blanco);
  font-size: var(--nv-chico);
  font-weight: 600;
  line-height: 1.3;
}
.nv-chip::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid var(--nv-azul-texto);
  flex: none;
}

/* --- Tarjetas ---------------------------------------------------------------- */
.nv-tarjeta {
  background: var(--nv-superficie);
  border-radius: var(--nv-radio-tarjeta);
  padding: clamp(24px, 3vw, 40px);
}
.nv-tarjeta--destacada { background: var(--nv-superficie-2); }

/* --- Campos de formulario ---------------------------------------------------- */
.nv-campo { display: grid; gap: 8px; }
.nv-campo label { color: var(--nv-blanco); font-size: var(--nv-chico); font-weight: 600; }
.nv-campo input, .nv-campo select, .nv-campo textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid var(--nv-linea);
  border-radius: var(--nv-radio-campo);
  background: var(--nv-negro);
  color: var(--nv-blanco);
  font: inherit;
  font-size: 16px;
}
.nv-campo textarea { min-height: 104px; resize: vertical; }
.nv-campo input::placeholder, .nv-campo textarea::placeholder { color: #8a93a6; }

/* Logo: siempre sobre negro o foto oscurecida, nunca recoloreado */
.nv-logo { display: block; height: auto; }