/* ========================================================================= N1. ESTILOS GLOBALES BASE - DEPEX ========================================================================= */ /* N2. Contexto: Definición de fuentes personalizadas, transiciones de página y personalizaciones menores que complementan a Tailwind CSS. Archivo de destino enlazado: Cargado en el de cada página HTML. */ /* Importación de tipografías desde Google Fonts */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap'); html { scroll-behavior: smooth; /* N3. Permite un desplazamiento suave al hacer clic en enlaces internos */ } body { font-family: 'Inter', 'Roboto', sans-serif; /* N3. Define la tipografía por defecto de la aplicación */ overflow-x: hidden; /* N3. Previene desbordamiento horizontal accidental en móviles */ } /* N2. Ajuste de accesibilidad para lectores de pantalla */ .sr-only { position: absolute; /* N3. Remueve el elemento del flujo visual */ width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); /* N3. Oculta el área visible del elemento */ white-space: nowrap; border-width: 0; } /* N2. Componentes comunes: Enlaces de menú (Navbar & Footer Links) Reglas para soportar el realce activo (clase .active añadida por JS). */ .nav-link { position: relative; transition: color 0.3s ease; } .nav-link:hover { color: #f88410 !important; /* N3. Hover cambia a color ámbar corporativo */ } .nav-link.active { color: #f88410 !important; /* N3. Estado activo en color ámbar corporativo */ } /* Indicador lineal inferior sólo en pantallas grandes (desktop) */ @media (min-width: 1024px) { .nav-link.active::after { content: ""; position: absolute; bottom: -4px; left: 0; width: 100%; height: 2px; background-color: #f88410 !important; /* N3. Barra inferior de 2px en activo */ } } .footer-link { transition: color 0.3s ease, font-weight 0.3s ease; } .footer-link:hover { color: #f88410 !important; /* N3. Hover en enlaces del footer */ } .footer-link.active { color: #f88410 !important; /* N3. Enlace del footer activo */ font-weight: 700; } /* ========================================================================= N1. ANIMACIÓN DE CARGA Y DESVELO DE PÁGINA (EVITA FLASHEO DE BLANCO) ========================================================================= */ body { opacity: 1; background-color: #ffffff !important; } /* ========================================================================= N1. COMPORTAMIENTO NAVBAR PREMIUM DE ESCRITORIO (SCROLL DINÁMICO) ========================================================================= */ .navbar-header { transition: all 0.3s ease-in-out !important; height: 80px; /* Altura original (h-20) */ } .navbar-header.navbar-scrolled { height: 64px !important; /* Se encoge a 64px */ background-color: rgba(27, 27, 27, 0.95) !important; /* Fondo oscuro translúcido */ backdrop-filter: blur(12px) !important; /* Efecto de desenfoque de cristal */ -webkit-backdrop-filter: blur(12px) !important; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3) !important; /* Sombra sutil al flotar */ }