/* ESTILOS DEL BODY */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #f0f8ff; /* Fondo suave */
    color: white; /* Texto blanco */
}

/* HEADER */
header {
    background-color: #1e8ac5;
    padding: 10px; /* Padding para el header */
}

nav {
    display: flex;
    justify-content: left; /* Alinear elementos a la izquierda */
}

.nav-button {
    color: white; /* Color del texto */
    text-decoration: none; /* Sin subrayado */
    padding: 10px 20px; /* Padding alrededor del botón */
    border: 2px solid white; /* Borde blanco */
    border-radius: 5px; /* Bordes redondeados */
    margin-right: 10px; /* Espacio entre botones */
    transition: background-color 0.3s; /* Transición suave */
}

.nav-button:hover {
    background-color: rgba(255, 255, 255, 0.2); /* Efecto hover */
}

/* LOGO CENTRADO ENTRE HEADER Y SECCIÓN 1 */
.logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 40px;
    background-color: white; /* Fondo opcional para resaltar el logo */
}

.logo {
    width: 250px; /* Tamaño ajustable del logo */
    height: auto;
}

/* SECCIÓN 1 */
.seccion-uno {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column; /* Alineación en columna */
    height: auto;
    padding: 40px 0;
    color: white;
    overflow: hidden; /* Evita posibles problemas de desbordamiento */
}

.fondo-imagen {
    background-image: url('Imagenes/fondo-seccion.jpeg'); /* Imagen de fondo */
    background-size: cover;
    background-position: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 20px;
}

.fondo-oscuro {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75); /* Fondo negro con opacidad */
    z-index: 1;
}

.descripcion-container,
.mision-vision-container {
    z-index: 2; /* Asegura que el contenido esté sobre el fondo oscuro */
}

.descripcion-container {
    width: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.descripcion {
    color: white;
    text-align: center;
    width: 80%;
}

/* Misión y Visión dentro de Sección 1 */
.mision-vision-container {
    display: flex;
    justify-content: center;
    width: 70%;
    gap: 20px;
    margin-top: 20px;
}

.mision, .vision {
    background-color: rgba(255, 255, 255, 0.4);
    padding: 15px;
    border-radius: 8px;
    width: 45%;
    text-align: center;
}

/* SECCIÓN PRODUCTOS Y SERVICIOS */
.productos-servicios {
    padding: 20px;
    background-color: #C2424B;
    margin: 10px;
    border-radius: 8px; /* Bordes redondeados */
}

.productos-container {
    display: flex; /* Usar Flexbox para organizar los productos en dos columnas */
    flex-wrap: wrap; /* Permitir que se ajusten en varias filas si es necesario */
    justify-content: center; /* Centrar productos */
}

.producto {
    background-color: #ffffff; /* Fondo blanco para productos */
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra suave */
    margin: 10px; /* Margen entre productos */
    max-width: 300px; /* Ancho máximo de las tarjetas */
    flex: 1; /* Permitir que las tarjetas crezcan uniformemente */
    text-align: center; /* Centrar texto dentro de las tarjetas */
}

.producto h3, p{
    color: black;
}

.producto-img {
    width: 100%; /* Ajustar la imagen al contenedor */
    height: auto; /* Mantener la proporción de la imagen */
}

/* FOOTER */
footer {
    background-color: #1e8ac5;
    color: white;
    text-align: center;
    padding: 10px 0;
    display: flex; /* Usar Flexbox para organizar los elementos */
    flex-direction: column; /* Colocar elementos en columna */
}

footer p{
    color: white;
    margin: 5px 0; /* Espacio vertical entre el texto del footer */
}

footer .nav-button {
    margin: 5px 700px; /* Espacio entre el botón y el texto de copyright */
    padding: 10px 15px; /* Padding para el botón */
    border: 2px solid white; /* Borde blanco */
    border-radius: 5px; /* Bordes redondeados */
    color: white; /* Color del texto del botón */
    text-decoration: none; /* Sin subrayado */
    display: inline-block; /* Permitir que el botón se ajuste al contenido */
}

footer a {
    color: white; /* Color de texto en el footer */
    text-decoration: none; /* Sin subrayado */
}

/* Estilos para Responsividad */
@media (max-width: 768px) {
    .descripcion {
        width: 70%;
    }
    .mision-vision {
        flex-direction: column; /* Cambiar a disposición vertical en móviles */
    }
    .mision, .vision {
        width: 80%; /* Ocupar el 80% del ancho en móviles */
        margin: 10px auto; /* Centrar recuadros en móviles */
    }
    .productos-container {
        flex-direction: column; /* Cambiar a disposición vertical en móviles */
        align-items: center; /* Centrar productos */
    }
    .producto {
        max-width: 100%; /* Ocupar el 100% del ancho en móviles */
        margin: 5px 0; /* Espacio vertical entre los productos */
    }
    footer .nav-button{
        margin: 5px 10px;
    }
}