/* ============================================================
styles.css — Estilos base, variables y componentes globales
Sitio web de servicios TI con Software Libre
============================================================
CÓMO USAR ESTE ARCHIVO:
- Modifica las variables en :root para cambiar colores globales
- Sección "NAVBAR" controla el menú principal
- Sección "SLIDER" controla el carrusel de la portada
- Sección "FOOTER" controla el pie de página
============================================================ */
/* ── IMPORTAR TIPOGRAFÍA (ver typography.css) ─────────────── */
@import url('typography.css');
/* ── VARIABLES GLOBALES ───────────────────────────────────── */
:root {
/* Paleta Azul Acero — opción seleccionada */
--color-navy-darkest: #071428; /* Fondo más oscuro */
--color-navy-dark: #0c2040; /* Fondo secciones oscuras */
--color-navy: #0f3460; /* Azul acero principal (navbar) */
--color-navy-mid: #154a8a; /* Azul medio */
--color-navy-light: #1a6fa8; /* Azul acero claro */
--color-navy-accent: #1a6fa8; /* Acento azul (botones, links) */
--color-navy-bright: #2288d0; /* Azul brillante (hover) */
/* Neutros */
--color-white: #ffffff;
--color-off-white: #f0f4f8; /* Fondo secciones claras */
--color-gray-light: #dde4ed; /* Bordes y separadores */
--color-gray-mid: #8fa3bb; /* Texto secundario sobre fondo claro */
--color-black: #050a0f; /* Negro para contraste */
--color-text-dark: #1a2535; /* Texto principal sobre fondo claro */
/* Acento dorado para detalles de confianza */
--color-gold: #c9a84c;
--color-gold-light: #e8c97a;
/* Espaciado */
--spacing-xs: 0.5rem;
--spacing-sm: 1rem;
--spacing-md: 2rem;
--spacing-lg: 4rem;
--spacing-xl: 6rem;
/* Bordes */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 16px;
/* Sombras */
--shadow-sm: 0 2px 8px rgba(5, 13, 26, 0.15);
--shadow-md: 0 4px 20px rgba(5, 13, 26, 0.25);
--shadow-lg: 0 8px 40px rgba(5, 13, 26, 0.35);
/* Transiciones */
--transition: 0.25s ease;
/* Ancho máximo del contenido */
--max-width: 1200px;
--nav-height: 80px;
}
/* ── RESET Y BASE ─────────────────────────────────────────── */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
background-color: var(--color-white);
color: var(--color-text-dark);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
color: inherit;
text-decoration: none;
}
ul { list-style: none; }
/* ── CONTENEDOR ───────────────────────────────────────────── */
.container {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 var(--spacing-md);
}
/* ── NAVBAR ───────────────────────────────────────────────── */
/*
MODIFICAR NAVBAR:
- Cambiar logo: reemplaza 
dentro de .navbar-logo
- Cambiar color de fondo: modifica --color-navy-darkest en :root
- Agregar ítems: replica el bloque dentro de