/**
 * main.css — Variables globales (colores, tipografía) y estilos base del sitio público.
 *
 * Sistema de diseño (skill frontend-design): la marca ya aprobada
 * (Kaizen Azul/Verde, tomada del logo oficial) se mantiene — no se
 * reemplaza — pero se usa con más intención. Se agrega "Tinta" (texto,
 * más técnico que un gris genérico) y "Blueprint" (fondo oscuro exclusivo
 * del Hero, ver components.css).
 * En producción, app/includes/header.php inyecta un <style> inline en el
 * <head> desde la tabla `configuracion`, sobrescribiendo color/tipografía.
 *
 * Tipografía: "Merriweather" (serif con gravedad de publicación
 * científica) para títulos, "Inter" para texto, y "IBM Plex Mono" (fija,
 * no elegible desde el panel) como tercer rol utilitario para
 * etiquetas/fechas/códigos — el detalle que sostiene la identidad
 * "técnica" del sitio en el detalle, no solo en el hero.
 */

:root {
  /* Colores de marca (editables desde admin/configuracion.php) — tomados
     del logo oficial (public/assets/uploads/logo/kaizen_logo.png). */
  --color-primario: #193596;
  --color-primario-oscuro: #12266a;
  --color-secundario: #46a85b;
  --color-secundario-oscuro: #327741;

  /* Neutros */
  --color-texto: #0f1b2d;
  --color-texto-suave: #4b5563;
  --color-fondo: #ffffff;
  --color-fondo-alterno: #f5f7fa;
  /* Tinte azulado muy claro (no gris neutro) para la sección de
     Servicios: separa las tarjetas blancas del fondo sin oscurecerlo. */
  --color-fondo-servicios: #eef1fa;
  --color-borde: #e2e8f0;

  /* Fondo oscuro exclusivo del Hero ("plano técnico") — no es
     configurable desde el panel, es parte del sistema visual. */
  --color-blueprint: #071229;

  /* Tipografía (título/texto editables desde admin/configuracion.php;
     la monoespaciada es fija, ver header.php). */
  --fuente-titulo: "Merriweather", Georgia, "Times New Roman", serif;
  --fuente-texto: "Inter", "Segoe UI", sans-serif;
  --fuente-mono: "IBM Plex Mono", "Courier New", monospace;

  /* Espaciado / layout */
  --radio-borde: 8px;
  --radio-borde-tarjeta: 12px;
  --sombra-suave: 0 2px 8px rgba(15, 23, 42, 0.08);
  --sombra-tarjeta: 0 10px 15px -3px rgba(15, 23, 42, 0.1), 0 4px 6px -4px rgba(15, 23, 42, 0.1);
  --sombra-tarjeta-hover: 0 20px 25px -5px rgba(15, 23, 42, 0.15), 0 8px 10px -6px rgba(15, 23, 42, 0.1);
  --contenedor-max: 1200px;
  --espacio-seccion: 5rem;
}

/* Reglas base mobile-first */

* {
  box-sizing: border-box;
}

/* Textura de fondo compartida ("papel milimétrico" apenas visible): el
   mismo motivo de grid técnico del Hero/CTA/cabecera-pagina, pero a muy
   baja opacidad sobre fondos claros, para que ninguna página quede en
   blanco liso. Se aplica en body (cubre las páginas que no usan
   secciones con fondo propio, p. ej. Noticias/Contacto) y se repite en
   cada sección con background-color propio (ver components.css), porque
   un background-color opaco tapa por completo el de un ancestro. */
body {
  margin: 0;
  color: var(--color-texto);
  background-color: var(--color-fondo);
  background-image:
    repeating-linear-gradient(0deg, rgba(25, 53, 150, 0.035) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(25, 53, 150, 0.035) 0 1px, transparent 1px 44px);
  font-family: var(--fuente-texto);
}

h1,
h2,
h3,
h4 {
  font-family: var(--fuente-titulo);
  font-weight: 700;
  line-height: 1.2;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Precarga (pantalla de introducción) — visible solo mientras la página
   carga (público, no admin, ver header.php). Reutiliza el mismo fondo
   "plano técnico" oscuro del hero/pie de página para que la transición
   a la página real no dé un salto de estilo. Se oculta y se retira del
   DOM desde public/js/precarga.js. */
.precarga {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(55% 60% at 50% 40%, rgba(70, 168, 91, 0.2), transparent 65%),
    repeating-linear-gradient(0deg, rgba(94, 234, 212, 0.05) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(94, 234, 212, 0.05) 0 1px, transparent 1px 44px),
    linear-gradient(160deg, var(--color-blueprint), var(--color-primario-oscuro));
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.precarga-marca {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(340px, 78vw);
  height: min(340px, 78vw);
}

.precarga-anillo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 6px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--color-secundario);
  animation: precarga-girar 1.1s linear infinite;
}

.precarga-logo-caja {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 74%;
  aspect-ratio: 10 / 7;
  padding: 1.5rem;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 15px 40px rgba(7, 18, 41, 0.45);
  animation: precarga-pulso 1.6s ease-in-out infinite;
}

.precarga-logo-caja img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.precarga-logo-texto {
  font-family: var(--fuente-mono);
  font-size: 1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
}

.precarga-imagen {
  max-width: min(420px, 82vw);
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radio-borde-tarjeta);
  box-shadow: 0 25px 60px rgba(7, 18, 41, 0.55);
  animation: precarga-pulso 1.8s ease-in-out infinite;
}

.precarga-oculta {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@keyframes precarga-girar {
  to {
    transform: rotate(360deg);
  }
}

@keyframes precarga-pulso {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  .precarga-anillo,
  .precarga-logo-caja,
  .precarga-imagen {
    animation: none;
  }
}

/* Etiqueta técnica pequeña (monoespaciada) usada como "eyebrow" antes de
   cada H2 y en metadatos (fechas, autor, códigos) — el detalle que
   sostiene la identidad técnica en toda la página, no solo en el hero. */
.eyebrow {
  display: block;
  font-family: var(--fuente-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-secundario-oscuro);
  margin-bottom: 0.6rem;
}

/* Foco de teclado visible en todo el sitio (accesibilidad) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-secundario);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Breakpoints sugeridos: móvil <576px (base), tablet 576–992px, escritorio >992px */
@media (min-width: 576px) {
  /* estilos tablet */
}

@media (min-width: 992px) {
  /* estilos escritorio */
}
