/* Paleta de colores */
:root {
    --color-azul-oscuro: #071018;
    --color-rojo: #E60000;
    --color-blanco: #FFFFFF;
    --color-gris-claro: #F2F2F2;
    --color-negro: #000000;
    --color-hover: #0056B3;
    --color-borde: #D9D9D9;
}


/* Caja informativa */
.info-box {
    border: 1px solid var(--color-borde);
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0;
    background-color: var(--color-gris-claro);
    display: flex;
    align-items: center;
    min-height: 300px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.info-box img {
    max-width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 8px;
    margin-right: 20px;
}

.info-box h2 {
    font-size: 24px;
    font-weight: bold;
    color: var(--color-azul-oscuro);
}

.info-box p {
    font-size: 16px;
    color: var(--color-negro);
}

/* Botón oscuro con hover */
.btn-outline-dark {
    margin-top: 10px;
    border-radius: 5px;
    background-color: var(--color-azul-oscuro);
    color: var(--color-blanco);
    border: 1px solid var(--color-azul-oscuro);
    transition: background-color 0.3s ease-in-out;
}

.btn-outline-dark:hover {
    background-color: var(--color-hover);
}

/* Contenedor de características */
.features-container {
    display: flex;
    justify-content: space-evenly;
    gap: 20px;
    flex-wrap: nowrap;
    margin-top: 0px; /* Ajusta el margen superior para evitar que el contenido quede cubierto */
 
}

.feature {
    border: 1px solid var(--color-borde);
    border-radius: 10px;
    padding: 20px;
    width: 30%;
    background-color: var(--color-gris-claro);
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.feature:hover {
    transform: translateY(-5px);
    border-color: var(--color-azul-oscuro);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.feature img {
    width: 50%;
    height: auto;
    border-radius: 8px;
}

.feature h3 {
    margin-top: 15px;
    font-size: 18px;
    font-weight: bold;
    color: var(--color-azul-oscuro);
}

.feature p {
    font-size: 14px;
    color: var(--color-negro);
    margin-bottom: 15px;
}

.feature-link {
    text-decoration: none;
    color: inherit;
}

/* Encabezado */
.header {
    background-color: var(--color-azul-oscuro); /* Fondo azul oscuro */
    padding: 0%;
    margin-top: 70px; /* Altura suficiente para posicionarlo debajo de la navbar */
    margin-bottom: 20px;
    border-radius: 8px;
    position: relative; /* Mantener el posicionamiento relativo */
    color: var(--color-azul-oscuro); /* Contraste de texto */
    clip-path: polygon(50% 100%, 0% 65%, 0% 0%, 100% 0%, 100% 65%);
    height: 610px; /* Ajustar la altura del encabezado */
}


.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}



.header-text {
    flex: 1;
    padding: 10px;
    text-align: left;
    

    
}

.header-text h1 {
    font-size: 2em;
    color: var(--color-azul-oscuro);  /* Cambié el color del título a azul oscuro */
    margin-bottom: 10px;
}

.header-text p {
    font-size: 1.2em;
    color: var(--color-negro);  /* Mantengo el color negro para el texto */
    margin-bottom: 20px;
}


/* Botón geoespacial */
.btn-geospatial {
    background-color: var(--color-rojo);
    color: var(--color-blanco);
    border: none;
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s ease-in-out;
}

.btn-geospatial:hover {
    background-color: var(--color-hover);
}

/* Recuadro adicional */
.recuadro2 {
    background-color: var(--color-gris-claro);
    padding: 20px;
    border-radius: 8px;
}

.recuadro2 h2 {
    font-size: 1.8em;
    color: var(--color-azul-oscuro);
    margin-bottom: 10px;
}

.recuadro2 p {
    font-size: 1em;
    color: var(--color-negro);
}

/* Imagen redondeada */
.rounded-circle {
    border-radius: 50%;
    object-fit: cover;
}


/* Contenedor principal */
.main-container {
    flex: 1;
    padding: 0px;
    text-align: center;
    background-color: var(--color-blanco); /* Fondo blanco */
}

/* Estilo de las figuras */
.figure {
    position: absolute;
    width: 500px; /* Aumentar ancho */
    height: 550px; /* Aumentar altura */
    clip-path: polygon(100% 35%, 65% 0%, 0% 0%, 0% 100%, 65% 100%);


/* Ajuste para suavizar las puntas */
    top: 0; /* Pegarlas a la parte superior */
    z-index: 20; /* Mayor prioridad en la pila */
}

/* Primera figura con fondo azul sólido */
.figure-blue {
    background-color: var(--color-azul-oscuro); /* Fondo azul oscuro sólido */
    left: 0px; /* Posicionamiento horizontal */
}

/* Segunda figura con fondo azul oscuro transparente */
.figure-transparent {
    background-color: rgba(8, 27, 43, 0.5); /* Fondo azul oscuro con transparencia */
    left: 50px; /* Desplazada ligeramente hacia la derecha */
}

/* Contenedor principal del carrusel */
.main-imagen {
    position: relative;
    width: 100%; /* Ocupa todo el ancho disponible */
    height: 100vh; /* Ocupa toda la altura de la pantalla */
    overflow: hidden; /* Oculta contenido que se salga del contenedor */
    margin: auto;
    z-index: 18;
}

/* Imágenes del carrusel */
.carousel-images {
    position: relative;
    width: 100%;
    height: 100%; /* Igualar al contenedor principal */
}

.carousel-images img {
    position: absolute;
    width: 100%; /* Escala el ancho completo */
    height: 100%; /* Escala la altura completa */
    object-fit: cover; /* Ajusta las imágenes al tamaño del contenedor */
    opacity: 0; /* Oculta imágenes inicialmente */
    transition: opacity 1s ease-in-out; /* Transición suave */
    z-index: 0;
}

.carousel-images img.active {
    opacity: 1; /* Muestra la imagen activa */
    z-index: 1; /* Asegura que esté encima de las demás */
}


/* Contenedor del logo */
.logo {
    position: absolute; /* Posición absoluta para ajustar su ubicación */
    top: 4%; /* Más al centro verticalmente */
    left: 2%; /* Ligeramente hacia la derecha */
    margin: 10px; /* Espaciado opcional */
    z-index: 21; /* Asegurar que esté por encima de otros elementos */
}

/* Estilo de la imagen del logo */
.logo img {
    width: 420px; /* Tamaño ajustado para el logo */
    height: auto; /* Mantén las proporciones originales */
    display: block; /* Elimina cualquier espacio adicional alrededor de la imagen */
}