/* ==========================================================================
   KAIROVA — variables de diseño
   Única fuente de colores y tipografías del sitio. Las demás hojas de estilo
   solo consumen estas variables (var(--...)); no se escriben colores ni
   fuentes sueltos en otros archivos.
   Paleta derivada de assets/img/logo.svg (#002F73 y #F26314) y de los banners.
   Contrastes WCAG calculados contra el fondo indicado en cada comentario.
   ========================================================================== */

:root {

  /* ---- Color primario: azul marino del logo ---- */
  --color-primario: #002F73;            /* 12,70:1 sobre blanco (AAA) */
  --color-primario-oscuro: #001E4A;     /* 16,35:1 · fondos del pie de página */
  --color-primario-medio: #0B4A9E;      /* 8,44:1 · enlaces y estado hover */
  --color-primario-claro: #4878A8;      /* 4,64:1 · detalles y gráficos */
  --color-primario-tinte: #D1DDEC;      /* tono de los banners · bordes suaves */
  --color-primario-fondo: #E8EEF7;      /* superficies y bloques destacados */

  /* ---- Color secundario: naranja del logo (acento, con uso acotado) ----
     Solo para: botón de acción principal y marca de la página actual en el menú.
     No se usa como adorno (barras, viñetas, subrayados, bordes de tarjetas). */
  --color-secundario: #F26314;          /* 3,20:1 sobre blanco: solo decorativo,
                                           líneas, iconos y elementos grandes;
                                           nunca texto pequeño sobre blanco */
  --color-secundario-hover: #FF7A33;    /* fondo de botón naranja al pasar el cursor */
  --color-secundario-texto: #B93C00;    /* 5,66:1 sobre blanco · texto naranja */
  --color-secundario-fondo: #FFF1E8;    /* 5,12:1 con --color-secundario-texto */

  /* ---- Neutros (con matiz azul, coherentes con el logo) ---- */
  --color-blanco: #FFFFFF;
  --color-tinta: #0F1B2E;               /* 17,26:1 · texto principal y títulos */
  --color-texto-suave: #3F4E66;         /* 8,42:1 · texto secundario */
  --color-texto-tenue: #5B6B82;         /* 5,43:1 · notas y metadatos */
  --color-borde: #C9D3E1;               /* 1,51:1 · divisores decorativos */
  --color-borde-fuerte: #8794A8;        /* 3,07:1 · bordes de campos (mín. 3:1) */
  --color-fondo: #FFFFFF;
  --color-fondo-suave: #F3F6FA;         /* secciones alternas */
  --color-fondo-transparente: rgb(255 255 255 / 0); /* extremo de degradados sobre banners */

  /* ---- Estado (texto/icono sobre blanco y sobre su tinte, todos ≥ 4,5:1) ---- */
  --color-exito: #1E7B3C;               /* 5,31:1 blanco · 4,72:1 sobre tinte */
  --color-exito-fondo: #E7F5EB;
  --color-aviso: #8A5300;               /* 6,33:1 blanco · 5,74:1 sobre tinte */
  --color-aviso-fondo: #FFF3D6;
  --color-error: #B42318;               /* 6,57:1 blanco · 5,75:1 sobre tinte */
  --color-error-fondo: #FDECEA;
  --color-info: #0B4A9E;                /* 8,44:1 blanco · 7,24:1 sobre tinte */
  --color-info-fondo: #E8EEF7;

  /* ---- Combinaciones de texto sobre fondos de color ---- */
  --color-sobre-primario: #FFFFFF;      /* 12,70:1 sobre --color-primario */
  --color-sobre-primario-suave: #D1DDEC;/* 9,23:1 sobre --color-primario */
  --color-sobre-secundario: #FFFFFF;    /* 3,20:1 sobre --color-secundario: válido
                                           solo como texto grande (≥ 24px, o ≥ 18,66px
                                           en negrita), ver --texto-boton-destacado */

  /* ---- Botón flotante de WhatsApp (verde oscuro de la marca) ---- */
  --color-whatsapp: #25D366;            /* verde de la marca · 1,98:1 con blanco: el texto
                                           del botón no alcanza 4,5:1 (se replica la referencia) */
  --sombra-whatsapp: 0 4px 15px rgb(0 0 0 / 0.2);
  --sombra-whatsapp-activa: 0 6px 20px rgb(0 0 0 / 0.25);

  /* ---- Foco visible ---- */
  --color-foco: #1F5FBF;                /* 6,09:1 sobre blanco */
  --color-foco-inverso: #FFFFFF;        /* foco sobre fondos oscuros */

  /* ---- Tipografía ----
     Títulos y botones: Plus Jakarta Sans · Texto: Open Sans (autoalojadas en assets/fonts/).
     La pila incluye fuentes del sistema como respaldo mientras carga. */
  --fuente-titulos: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --fuente-texto: "Open Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --peso-ligero: 300;     /* párrafos y listas */
  --peso-normal: 400;
  --peso-medio: 500;
  --peso-semibold: 600;
  --peso-negrita: 700;
  --peso-extranegrita: 800;

  /* Escala fluida mobile first (rem, 1rem = 16px) */
  --texto-xs: 0.8125rem;
  --texto-sm: 0.9375rem;
  --texto-base: 1rem;
  --texto-lg: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);
  --texto-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --titulo-3: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
  --titulo-banner: clamp(1.5rem, 1.25rem + 1.1vw, 1.875rem); /* h1 del banner principal */
  --texto-boton: 0.9rem;                /* 14,4px */
  --texto-boton-destacado: 1.0125rem;   /* 16,2px. Ojo: blanco sobre naranja (3,20:1) no alcanza 4,5:1 a este tamaño */
  --titulo-2: clamp(1.625rem, 1.3rem + 1.6vw, 2.25rem);
  --titulo-1: clamp(1.875rem, 1.35rem + 2.6vw, 3rem);

  --escala-titulos: 1.21;          /* aumento general de los títulos (h1–h4) */
  --interlineado-titulos: 1.2;
  --interlineado-texto: 1.65;

  /* Párrafos y listas: 16,2 px en móvil a 18 px desde 1024 px (escala fluida), interlineado fijo de 30 px */
  --texto-parrafo: clamp(1.0125rem, 0.961rem + 0.256vw, 1.125rem);
  --interlineado-parrafo: 1.875rem;
  /* Párrafo destacado bajo los títulos: 19,8 a 21,6 px */
  --texto-destacado: clamp(1.2375rem, 1.186rem + 0.256vw, 1.35rem);
  --interlineado-destacado: 1.5;
  --ancho-lectura: 68ch;

  /* ---- Espaciado, forma y layout (base para las hojas siguientes) ---- */
  --espacio-1: 0.25rem;
  --espacio-2: 0.5rem;
  --espacio-3: 0.75rem;
  --espacio-4: 1rem;
  --espacio-5: 1.5rem;
  --espacio-6: 2rem;
  --espacio-7: 3rem;
  --espacio-8: 4.5rem;
  --espacio-9: 6rem;

  --radio-sm: 4px;
  --radio-md: 8px;
  --radio-lg: 16px;

  --sombra-suave: 0 1px 3px rgb(0 47 115 / 0.08), 0 4px 12px rgb(0 47 115 / 0.06);
  --color-sombra-desplazamiento: rgb(0 47 115 / 0.16); /* borde que indica contenido oculto al desplazar tablas */
  --sombra-media: 0 6px 24px rgb(0 47 115 / 0.14);
  --color-velo: rgb(0 30 74 / 0.6);     /* fondo oscurecido tras las ventanas flotantes */

  --ancho-contenedor: 90rem;
  --relleno-lateral: clamp(1rem, 4vw, 2rem);
  --transicion: 180ms ease;
  --ease-salida: cubic-bezier(0.16, 1, 0.3, 1); /* llegada con desaceleración firme, sin rebote */

  /* Puntos de quiebre, mobile first (referencia: las variables no funcionan dentro de @media):
     40rem (640px) · 48rem (768px) · 64rem (1024px, aquí aparece el menú horizontal)
     Nota: <meta name="theme-color"> del <head> repite --color-fondo, porque no admite var(). */
}

/* ---- Contacto: toda la escala tipográfica al 90 % ----
   Solo dentro de <main>, para que header, footer y WhatsApp sigan idénticos al resto del sitio. */
.pagina-contacto {
  --texto-xs: 0.73125rem;
  --texto-sm: 0.84375rem;
  --texto-base: 0.9rem;
  --texto-lg: clamp(0.95625rem, 0.918rem + 0.18vw, 1.06875rem);
  --texto-xl: clamp(1.125rem, 1.035rem + 0.45vw, 1.35rem);
  --titulo-3: clamp(1.2375rem, 1.08rem + 0.81vw, 1.575rem);
  --titulo-banner: clamp(1.35rem, 1.125rem + 0.99vw, 1.6875rem);
  --texto-boton: 0.81rem;
  --texto-boton-destacado: 0.91125rem;
  --titulo-2: clamp(1.4625rem, 1.17rem + 1.44vw, 2.025rem);
  --titulo-1: clamp(1.6875rem, 1.215rem + 2.34vw, 2.7rem);
  --texto-parrafo: clamp(0.91125rem, 0.8649rem + 0.2304vw, 1.0125rem);
  --interlineado-parrafo: 1.6875rem;
  --texto-destacado: clamp(1.11375rem, 1.0674rem + 0.2304vw, 1.215rem);

  font-size: var(--texto-base); /* el body ya resolvió su tamaño con el valor global */
}