/* ==========================================================================
   VARIABLES GLOBALES
   ========================================================================== */
/* Variables de color para mantener la consistencia en todo el sitio y facilitar cambios rápidos */
:root {
    --bg-color: #eef7f8; /* Color de fondo claro principal para la página */
    --btn-dark: #212c56; /* Azul oscuro utilizado principalmente en botones */
    --text-dark: #2a3151; /* Azul oscuro grisáceo para el texto principal */
    --link-color: #212c56; /* Color para los enlaces (actualmente igual al botón) */
}

/* ==========================================================================
   ESTILOS GENERALES Y DE ESTRUCTURA
   ========================================================================== */
.page {
    /* Define la imagen de fondo principal del sitio */
    background-image: url("./images/background.jpg?v=1.0"); 
    /* Mantiene la imagen centrada tanto vertical como horizontalmente en todo momento */
    background-position: center center;
    /* Evita que la imagen se repita en forma de mosaico si la pantalla es más grande que la imagen */
    background-repeat: no-repeat;
    /* Fija la imagen para que no se mueva al hacer scroll (crea un efecto parallax básico) */
    background-attachment: fixed;
    /* Escala la imagen para que cubra todo el contenedor sin perder sus proporciones */
    background-size: cover;
    /* Color de fondo sólido que se muestra mientras carga la imagen o si esta falla */
    background-color: #FFFFFF;
}

body {
    /* Aplica el color de fondo claro definido en las variables (visible si .page no lo cubre) */
    background-color: var(--bg-color);
    /* Define la familia de fuentes, priorizando Segoe UI y Roboto */
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    
    /* Uso de Flexbox para estructurar la página (Truco del Sticky Footer / Pie de página pegajoso) */
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Asegura que el body ocupe al menos el 100% del alto visible de la pantalla */
    
    /* Da un margen superior para que el navbar flotante (position: fixed) no tape el contenido inicial */
    padding-top: 100px; 
}

/* ==========================================================================
   HEADER / NAVBAR (Barra de Navegación)
   ========================================================================== */
.logo-large {
    /* Establece un ancho fijo para el logo principal */
    width: 300px;
}

.navbar-wrapper {
    /* Fija la barra de navegación en la parte superior de la pantalla */
    position: fixed;
    top: 0;
    width: 100%; /* Ocupa todo el ancho de la pantalla */
    z-index: 1030; /* Asegura que la barra siempre esté "por encima" de cualquier otro elemento (imágenes, textos) */
    padding-top: 15px; /* Separa ligeramente la barra del borde superior de la pantalla para dar efecto flotante */
}

.custom-navbar {
    background-color: #ffffff; /* Fondo blanco para la barra de navegación */
    border-radius: 50px; /* Bordes redondeados pronunciados para darle apariencia de "píldora" */
    padding: 10px 10px; /* Espaciado interno (arriba/abajo e izquierda/derecha) para que los elementos respiren */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* Sombra suave para darle profundidad y separarla del fondo */
    position: relative; /* Elemento clave: Necesario para que el centrado absoluto del menú interno (el de la PC) funcione */
}

/* TRUCO PARA CENTRADO PERFECTO EN PANTALLAS GRANDES */
@media (min-width: 992px) {
    .navbar-centered-absolute {
        /* Centra matemáticamente el menú sin importar el ancho del logo a la izquierda o los botones a la derecha */
        position: absolute;
        left: 50%; /* Lo mueve al centro exacto del contenedor padre (.custom-navbar) */
        transform: translateX(-50%); /* Lo desplaza hacia la izquierda exactamente la mitad de su propio tamaño para quedar perfecto */
    }
}

.navbar-brand img {
    /* Limita la altura del logo genérico en caso de usar la clase navbar-brand por defecto */
    max-height: 40px; 
}

.nav-link {
    /* Estilos de texto de los enlaces del menú (Inicio, Tour, etc.) */
    color: var(--text-dark);
    font-weight: 500; /* Grosor de fuente medio (un poco más resaltado que texto normal) */
    margin: 0 10px; /* Separación horizontal entre cada enlace del menú */
}

.nav-link.active {
    /* Estilo para el enlace de la página "activa" (en la que está el usuario actualmente) */
    border-bottom: 2px solid var(--text-dark); /* Línea inferior indicadora */
}

/* --- Botón de Llamado a la Acción (Ej. Ecosistema Digital) --- */
.btn-login {
    background-color: var(--btn-dark); /* Azul oscuro de las variables */
    color: white; /* Texto en blanco */
    border-radius: 50px; /* Forma de píldora igual que el navbar */
    padding: 8px 20px; /* Relleno interno del botón */
    font-weight: 500;
    
    /* Flexbox para alinear perfectamente el texto y el icono redondo de la flecha */
    display: flex; 
    align-items: center; /* Centra el contenido verticalmente */
    gap: 10px; /* Espacio de separación entre el texto y el pequeño icono circular */
}

.btn-login:hover {
    /* Efecto al pasar el cursor (mouse) por encima del botón */
    background-color: #212c56; /* Mantiene el color actual (puedes cambiarlo si deseas un efecto de brillo o sombreado al hacer hover) */
    color: white;
}

.btn-icon {
    /* Círculo blanco que contiene el icono de la flecha dentro del botón azul */
    background-color: white;
    color: var(--btn-dark); /* Icono interno pintado de azul oscuro */
    border-radius: 50%; /* Hace que el contenedor cuadrado sea un círculo perfecto */
    width: 24px; /* Ancho fijo */
    height: 24px; /* Alto fijo (igual al ancho para que sea un círculo simétrico) */
    
    /* Centrado del ícono interno */
    display: flex;
    align-items: center;
    justify-content: center; 
    font-size: 14px; /* Tamaño del ícono (la flecha) */
}

/* ==========================================================================
   MAIN CONTENT & SIDEBAR (Cuerpo de la página y Barra Lateral)
   ========================================================================== */
.main-content-wrapper {
    /* Propiedad vital del Sticky Footer: Hace que el contenedor principal crezca 
       y ocupe todo el espacio disponible en pantalla. Esto "empuja" obligatoriamente 
       el footer hacia abajo, incluso si la página tiene solo un renglón de texto. */
    flex: 1; 
}

.content-box {
    /* Cajas estilo "tarjeta" limpias para agrupar el contenido principal y la barra lateral */
    background-color: white;
    border-radius: 20px; /* Bordes redondeados elegantes */
    padding: 30px; /* Espacio interno abundante para que el texto o imágenes no queden pegados al borde */
    box-shadow: 0 4px 15px rgba(0,0,0,0.03); /* Sombra difusa y muy tenue para dar volumen */
    height: 100%; /* Si hay dos columnas, fuerza a ambas cajas a estirarse y tener la misma altura */
}

/* ==========================================================================
   FOOTER (Pie de página)
   ========================================================================== */
.custom-footer {
    /* Fondo con degradado: comienza en blanco brillante (60% del ancho) y termina en un celeste muy claro al final (100%) */
    background: linear-gradient(90deg, #ffffff 60%, #c4f2f4 100%);
    border-radius: 50px; /* Forma de píldora, combinando con el navbar */
    padding: 15px 10px; /* Espacio interno */
    margin-top: 20px; /* Separación con el contenido principal de arriba */
    margin-bottom: 20px; /* Separación con el borde inferior de la ventana del navegador */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Sombra suave para efecto flotante */
}

.footer-text {
    /* Estilos estandarizados para el texto de copyright (©) */
    color: #212c56; /* Texto pintado de azul oscuro para hacer contraste con el fondo claro */
    font-weight: 600; /* Texto en negrita suave (Semi-bold) */
    font-size: 0.9rem; /* Ligeramente más pequeño que el texto normal de la página */
    margin: 0; /* Elimina márgenes automáticos que el navegador le pone a las etiquetas de texto (<p>) */
}