/* Estilos que Tailwind no expresa como utility classes: overrides con
   !important sobre .prose (contenido markdown), keyframes, y la
   revelación por scroll (.fade-up) que public/js/app.js activa vía
   IntersectionObserver (initVisualHooks).
   docs-v2/08_MIGRATION/10_PORTAL_ARCHITECTURE_FREEZE.md §11 (2026-07-16):
   paleta clara/azul marino institucional de NELTIA — distinta a propósito de
   emepm/css/custom.css (oscura, sin cambio). Los tokens de Tailwind
   (tailwind.config.js) ya cambiaron de valor; este archivo tenía colores
   LITERALES hardcodeados (no tokens), así que necesita su propio cambio. */

body {
    background-color: #ffffff;
    color: #16233f;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

/* ARH-002 H-11/RNF-002: el outline de foco por defecto del navegador tiene
   contraste insuficiente sobre los fondos de este portal. Se fija el mismo
   azul marino ya usado como color `primary` (botones, enlaces) — ya vetado
   por contraste contra los fondos claros de este tema, en vez del valor por
   defecto del navegador. Alcance: solo este portal (public.localhost), el
   único auditado en ARH-002 H-11; no se toca el token compartido de
   Tailwind para no afectar a los otros 5 portales, que usan su propia
   paleta `brand.*` sin la clave `primary`. */
:focus-visible {
    outline: 3px solid #1a2744;
    outline-offset: 2px;
}

.fade-up {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.mesh-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.4;
    pointer-events: none;
}

/* Marquee (logos de patrocinadores, etc.) */
@keyframes scroll-x {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - 1rem)); }
}
.animate-scroll-x { animation: scroll-x 20s linear infinite; }
.hover-pause:hover { animation-play-state: paused; }

/* Tipografía editorial de posts (contenido markdown renderizado) */
.prose h1, .prose h2, .prose h3, .prose h4 {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 600 !important;
    color: #16233f !important;
    margin-top: 2em !important;
    margin-bottom: 1em !important;
    line-height: 1.5 !important;
}
.prose p {
    font-family: 'Inter', sans-serif !important;
    font-size: 1.125rem !important; /* 18px */
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #3d4759 !important;
    margin-bottom: 1.5em !important;
}
.prose ul, .prose ol {
    font-family: 'Inter', sans-serif !important;
    font-size: 1.125rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #3d4759 !important;
}
.prose code, .prose pre {
    font-family: 'IBM Plex Mono', monospace !important;
}
.prose strong { font-weight: 600 !important; color: #16233f !important; }
.section-title { font-family: 'Space Grotesk', sans-serif !important; font-weight: 700; }

/* Nav y botones */
nav a, .btn, button, .font-label-caps { font-family: 'Inter', sans-serif !important; font-weight: 600; }

/* Footer institucional: fondo azul marino oscuro con texto claro — el único
   bloque de la página que invierte el contraste respecto al resto del tema
   claro (mismo patrón que la imagen de referencia). Se declara aquí, con
   selectores propios, en vez de reutilizar los tokens compartidos de
   Tailwind (on-surface/surface-container-lowest) — esos tokens los usa
   también el resto de la página en modo claro, y darles un segundo
   significado solo dentro del footer rompería su contraste en cualquier otro
   uso. */
#dynamic-footer {
    background-color: #10192e;
    color: #e6e9f0;
}
#dynamic-footer .footer-heading {
    color: #8b96ac;
}
#dynamic-footer a {
    color: #c7cede;
}
#dynamic-footer a:hover {
    color: #ffffff;
}