/* Historia */
.historia-review {
    display: flex; /* Muestra los elementos como una fila */
    justify-content: space-between; /* Distribuye el espacio entre los elementos */
    align-items: flex-start; /* Alinea los elementos al principio verticalmente */
    margin: 40px 90px; /* Margen externo */
}
/* Contenido de la historia */
.historia-contenido {
    background-color: #fff; /* Color de fondo */
    border-radius: 15px; /* Borde redondeado */
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); /* Sombra */
    padding: 20px; /* Relleno interior */
    flex: 1; /* Ocupa el espacio disponible */
    margin-right: 20px; /* Espaciado entre el contenido y la imagen */
}
/* Título de la historia */
.historia-review h2 {
    font-size: 35px; /* Tamaño de fuente */
    text-align: center; /* Alineación del texto al centro */
    font-weight: bold; /* Grosor de la fuente */
    color: #002766; /* Color del texto */
    margin-top: 24px; /* Margen superior */
}
/* Imagen de la historia */
.historia-review img {
    max-width: 100%; /* Ancho máximo */
    height: 440px; /* Altura de la imagen */
    border-radius: 15px; /* Borde redondeado */
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); /* Sombra */
    margin-left: -20px; /* Espaciado entre el contenido y la imagen */
}
/* Párrafos del contenido de la historia */
.historia-contenido p {
    color: #555; /* Color del texto */
    text-align: justify; /* Alineación justificada */
    font-size: 20px; /* Tamaño de fuente */
    padding: 18px; /* Relleno interior */
}
/* Equipo directivo */
/* Estilos para la sección del Equipo Directivo */
.equipo-directivo {
    text-align: center; /* Alineación del texto al centro */
    font-family: Arial, sans-serif; /* Familia de fuentes */
    margin: 30px 90px; /* Margen externo */
}

/* Estilos para el título del Equipo Directivo */
.equipo-directivo h2 {
    font-size: 35px; /* Tamaño de la fuente */
    margin-bottom: 20px; /* Margen inferior */
    color: #002766; /* Color del texto */
    margin-top: 24px; /* Margen superior */
}

/* Contenedor del equipo directivo */
.equipo-contenedor {
    display: flex; /* Muestra los elementos como una fila */
    justify-content: center; /* Centra horizontalmente los elementos */
    gap: 20px; /* Espacio entre los elementos */
    flex-wrap: wrap; /* Permite que los elementos se envuelvan */
}

/* Bloque individual para cada miembro del equipo */
.equipo-bloque {
    flex: 1 1 calc(25% - 20px); /* Flexibilidad del tamaño del bloque */
    max-width: calc(25% - 20px); /* Ancho máximo del bloque */
    margin-bottom: 20px; /* Margen inferior */
    display: flex; /* Muestra los elementos como una columna */
    flex-direction: column; /* Dirección de la columna */
    align-items: center; /* Alinea los elementos al centro verticalmente */
}

/* Contenido del bloque del equipo */
.equipo-contenido {
    background: #fff; /* Color de fondo */
    border-radius: 15px; /* Borde redondeado */
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2); /* Sombra */
    overflow: hidden; /* Oculta el desbordamiento */
    width: 100%; /* Ancho completo */
    text-align: left; /* Alineación del texto a la izquierda */
    transition: all 0.3s; /* Transición suave */
}

/* Efecto de zoom al pasar el cursor sobre el contenido */
.equipo-contenido:hover {
    transform: scale(1.1); /* Escala el contenido */
}

/* Imagen del miembro del equipo */
.equipo-imagen {
    width: 100%; /* Ancho completo */
    height: auto; /* Altura automática */
    cursor: pointer; /* Cursor apuntador */
}

/* Contenido de texto dentro del bloque del equipo */
.contenido-texto {
    padding: 20px; /* Relleno interior */
}

/* Título del miembro del equipo */
.contenido-texto h3 {
    margin: 0 0 10px 0; /* Margen inferior */
    font-size: 1.2em; /* Tamaño de la fuente */
}

/* Descripción del miembro del equipo */
.contenido-texto p {
    margin: 0; /* Elimina el margen */
    font-size: 15px; /* Tamaño de la fuente */
    color: #555; /* Color del texto */
}

/* Modal */
/* Estilos para el modal */
.modal {
    display: none; /* El modal no se muestra por defecto */
    position: fixed; /* Posición fija para que el modal se quede en su lugar al desplazarse */
    z-index: 1; /* Asegura que el modal esté por encima de otros elementos */
    padding-top: 50px; /* Espaciado superior dentro del modal */
    left: 0; /* Alinea el modal al borde izquierdo */
    top: 0; /* Alinea el modal al borde superior */
    width: 100%; /* Ancho completo */
    height: 100%; /* Altura completa */
    overflow: auto; /* Permite desplazamiento si el contenido es demasiado grande */
    background-color: rgba(0, 0, 0, 0.9); /* Fondo negro semi-transparente */
}

/* Estilo del contenido del modal */
.modal-content {
    margin: auto; /* Centra el contenido del modal horizontalmente */
    display: block; /* Bloque de contenido */
    max-width: 80%; /* Ancho máximo del contenido */
    max-height: 80vh; /* Altura máxima del contenido */
}

/* Estilo para el detalle de la persona en el modal */
.modal-detalle {
    text-align: center; /* Alinea el texto al centro */
    margin-top: 10px; /* Margen superior */
}

/* Título del detalle en el modal */
.modal-detalle h3 {
    font-size: 1.3em; /* Tamaño de la fuente */
    color: #fff; /* Color del texto */
    margin-bottom: 3px; /* Margen inferior */
}

/* Descripción en el detalle del modal */
.modal-detalle p {
    font-size: 1.0em; /* Tamaño de la fuente */
    color: #fff; /* Color del texto */
    margin: 0; /* Sin margen */
    line-height: 1.5; /* Altura de la línea */
}

/* Estilos para el botón de cierre del modal */
.close {
    color: #fff; /* Color del texto */
    position: absolute; /* Posición absoluta */
    top: 10px; /* Posicionamiento superior */
    right: 25px; /* Posicionamiento derecho */
    font-size: 35px; /* Tamaño de la fuente */
    font-weight: bold; /* Fuente en negrita */
}

/* Estilos de hover y focus para el botón de cierre */
.close:hover,
.close:focus {
    color: #999; /* Color al pasar el ratón o al enfocar */
    text-decoration: none; /* Sin subrayado */
    cursor: pointer; /* Cursor apuntador */
}

/* Estilos para las flechas de navegación */
.prev, .next {
    cursor: pointer; /* Cursor apuntador */
    position: absolute; /* Posición absoluta */
    top: 50%; /* Alineación vertical al centro */
    width: auto; /* Ancho automático */
    padding: 16px; /* Relleno */
    margin-top: -22px; /* Ajuste del margen superior */
    color: #fff; /* Color del texto */
    font-weight: bold; /* Fuente en negrita */
    font-size: 20px; /* Tamaño de la fuente */
    transition: 0.6s ease; /* Transición suave */
    user-select: none; /* Deshabilita la selección de texto */
}

/* Posicionamiento de la flecha izquierda */
.prev {
    left: 10px; /* Margen izquierdo */
}

/* Posicionamiento de la flecha derecha */
.next {
    right: 10px; /* Margen derecho */
}

/* Estilo de hover para las flechas */
.prev:hover, .next:hover {
    background-color: rgba(0, 0, 0, 0.8); /* Fondo oscuro semi-transparente al pasar el ratón */
}


@media screen and (max-width: 850px) {
    .historia-review {
        flex-direction: column;
        align-items: center;
        margin: 20px 10px; /* Reducir márgenes */
        padding: 10px; /* Reducir padding */
    }
    .historia-contenido {
        margin-right: 0; /* Eliminar margen derecho */
        margin-bottom: 20px; /* Añadir margen inferior para separación */
        padding: 15px; /* Reducir padding */
        width: 100%; /* Asegurarse de que el ancho sea del 100% */
        box-sizing: border-box; /* Asegurar que el padding se incluya en el ancho */
    }
    .historia-review h2 {
        font-size: 28px; /* Reducir tamaño de fuente */
        margin-top: 20px; /* Ajustar margen superior */
    }
    .historia-contenido p {
        font-size: 16px; /* Reducir tamaño de fuente */
        padding: 10px; /* Reducir padding */
    }
    .historia-review img {
        max-width: 100%; /* Asegurar que la imagen ocupe todo el ancho disponible */
        height: auto; /* Ajustar la altura automáticamente */
        margin-left: 0; /* Eliminar margen izquierdo */
        margin-bottom: 20px; /* Añadir margen inferior para separación */
    }
    
    .equipo-imagen-container {
        max-width: 80%;
        margin: 0 auto; /* Centra el contenedor de imagen */
    }
    .equipo-imagen {
        width: 100%;
        height: auto;
    }
    .equipo-directivo {
        margin: 20px 10px;
    }
    .equipo-directivo h2 {
        font-size: 28px;
        margin-top: 20px;
    }
    .equipo-contenedor {
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center; /* Centra los bloques verticalmente */
    }
    .equipo-bloque {
        flex: 1 1 100%;
        max-width: 80%; /* Ajusta el ancho máximo del bloque */
    }
    .equipo-contenido {
        padding: 15px;
    }
    .contenido-texto h3 {
        font-size: 1em;
    }
    .contenido-texto p {
        font-size: 14px;
    }
}