* {
    margin: 0;
    padding: 0;
    font-family: montserrat;
    box-sizing: border-box;
}

body {

    background-color: #1F2124;
    background-size: cover;
    background-position: center;
    color: #fff;

    display: flex;

    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

.wrapper {
    padding: 10px 10%;
    max-width: 800px;
    /* Establece un ancho máximo para el contenido */
    text-align: center;
    /* Centra el texto dentro del contenedor */
    display: flex;
    /* Usamos flexbox */
    justify-content: center;
    /* Centramos horizontalmente */
    align-items: center;
    /* Centramos verticalmente */
    height: 100vh;
    /* Establecemos la altura al 100% de la ventana */
}


.card-area {
    padding: 0% 10%;
}

.box-area {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    /* grid-gap: 0%; */
    margin-top: 0px;
    display: flex;
    justify-content: space-between;
    margin-top: 11%;
    margin-right: 0%;
}

.box img {
    width: 100%;
    /* La imagen ocupará el ancho completo del contenedor .box */
    height: 100%;
    /* La altura ocupará todo el espacio disponible manteniendo la proporción de aspecto */
    border-radius: 10px;
    display: block;
    transition: transform 0.5s;
    object-fit: cover;
    /* La imagen se ajustará para cubrir el contenedor sin distorsionar su proporción */
}

.box {
    flex: 0 0 calc(30% - 20px);
    /* Aumenta el ancho de las cajas */
    position: relative;
    overflow: hidden;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5);
    width: 550px;
    /* Ajusta el ancho de las cajas según sea necesario */
    height: 750px;
    /* Ajusta la altura de las cajas según sea necesario */
    margin-bottom: 20px;
    /* Agrega espacio entre las cajas */
}

.overlay {
    height: 0px;
    width: 100%;
    background: linear-gradient(transparent, #1c1c1c 58%);
    border-radius: 10px;
    position: absolute;
    left: 0;
    bottom: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 40px;
    text-align: center;
    font-size: 14px;
    transition: height 0.5s;
}

.overlay h3 {
    font-weight: 500;
    margin-bottom: 5px;
    margin-top: 80%;
    font-family: bebas neue;
    font-size: 30px;
    letter-spacing: 2px;
    font-family: montserrat;

}

.overlay button {
    margin-top: 10px;
    color: #00708C;
    font-size: 40px;
    /* Tamaño del signo "+" */
    background: #FFFFFF;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    /* Cambia el cursor al pasar por encima del botón */
}

.boxLhover img {
    transform: scale(1.2);
}

.box:hover .overlay {
    height: 100%;
}


/* Estilos para el modal */
.modal {
    display: none;
    position: fixed;
    z-index: 5000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.7);
}

/* Contenido del modal */
.modal-content {
    background-image: url('../images/fondo1.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 10px;
    /* Redondea las esquinas del modal */
    width: 1017px;
    /* Establece el ancho deseado del modal */
    height: 725;
    /* Establece la altura deseada del modal */
    flex-shrink: 0;
    /* Evita que el modal se encoja para adaptarse a su contenido */
    position: fixed;
    /* Establece la posición fija */
    top: 50%;
    /* Coloca el borde superior del modal en el 50% de la altura de la ventana */
    left: 50%;
    /* Coloca el borde izquierdo del modal en el 50% del ancho de la ventana */
    transform: translate(-50%, -50%);
    /* Translada el modal hacia arriba y hacia la izquierda en la mitad de su propio ancho y alto */
}

.modal-imagen .modal-content div {
    margin-bottom: 30px;
    /* Añade un poco de espacio debajo de la imagen */
}

.modal-imagen .modal-content .texto {
    text-align: center;
    /* Centra horizontalmente el texto */
    padding: 20px;
    /* Ajusta el espacio alrededor del texto */
    flex: 1;
    /* Permite que el texto ocupe todo el espacio disponible verticalmente */
    display: flex;
    /* Utiliza flexbox para centrar verticalmente el texto */
    justify-content: center;
    /* Centra verticalmente el texto */
    align-items: center;
    /* Centra verticalmente el texto */

    width: 740px;
    height: 169px;

    margin-left: 150px;
}

.modal-imagen .modal-content .titulo {
    background-image: url('../images/sobrenafin/1.webp');
    background-size: 100% 420px;
    background-position: center;
    width: 100%;
    height: 420px;
    border-radius: 10px 10px 0 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

.modal-imagen .modal-content .titulo .t2 {
    color: #fff;
    text-align: center;
    font-family: Montserrat;
    font-size: 96px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: capitalize;
    display: flex;
    justify-content: center;
    /* Centra horizontalmente el contenido */
    align-items: center;
    /* Centra verticalmente el contenido */

}

.modal-imagen .modal-content .texto p {
    color: #000;
    /* Color de texto negro */
    font-size: 24px;
    /* Tamaño del texto */
    text-align: justify;
    /* Alinea el texto a la izquierda */
}

.modal-content .texto p b {
    color: #00708C;
    /* Cambia el color del texto dentro de las etiquetas <b> a rojo */
}

.botones {
    display: flex;
    justify-content: flex-end;
    /* Alinea los elementos al extremo derecho */
    align-items: flex-end;
    /* Alinea los elementos en la parte inferior */
    position: absolute;
    /* Posición absoluta para estar en la esquina */
    bottom: -10px;
    /* Alinea la parte inferior del contenedor con el borde inferior del padre con un margen de 20px */
    right: 20px;
    /* Alinea la parte derecha del contenedor con el borde derecho del padre con un margen de 20px */
}

.botones button {
    width: 40px;
    /* Establece el ancho del botón */
    height: 40px;
    /* Establece la altura del botón */
    background-color: transparent;
    /* Establece el fondo transparente */
    border: none;
    /* Quita el borde */
    border-radius: 50%;
    /* Hace que el botón tenga forma circular */
    cursor: pointer;
    /* Cambia el cursor al pasar sobre el botón */
    outline: none;
    /* Quita el contorno al hacer clic */
    padding: 0;
    /* Quita el relleno */
    background-repeat: no-repeat;
    /* Evita que la imagen de fondo se repita */
    background-position: center;
    /* Centra la imagen de fondo dentro del botón */
    margin-left: 30px;
}

.botones button.left {
    background-image: url('../iconos/ui/vector-verde.svg');
    /* Establece la imagen como fondo del botón */
    background-size: 40px 40px;
}

.botones button.right {
    background-image: url('../iconos/ui/vector-verde.svg');
    background-size: 40px 40px;
    transform: rotate(180deg);
}


.close {

    float: right;
    font-size: 28px;
    font-weight: bold;
    /* border-radius: 50%; */

    padding: 5px 10px;

    /* background-image: url('iconos/ui/close-circle.svg'); */
    width: 30px;
    height: 30px;
    margin-right: 10px;
    margin-top: 10px;

    float: right !important;
    /* Otras propiedades */

}

.close.close1 {
    background-image: url('../iconos/ui/tache.svg');
    background-size: cover;
    position: absolute;
    right: 11px;

}

.close.close2 {
    background-image: url('../iconos/ui/close-circle-verde.svg');
    z-index: 100;
    background-size: cover;
  
    margin-right: -39px;
    margin-top: -21px;
}

.close.close3 {
    background-image: url('../iconos/ui/close-circle-verde.svg');
    
    margin-right: 21px;
    margin-top: 10px;
    background-size: cover;

    float: right;
    padding: 5px 10px;



}

.close.close-av {
    background-image: url('../iconos/ui/close-circle-verde.svg');
    z-index: 100;
    background-size: cover;
    width: 36px;
    height: 35px;
    margin-right: -39px;
    margin-top: -21px;
}

.close.close-ef {
    background-image: url('../iconos/ui/close-circle-verde.svg');
    z-index: 100;
    background-size: cover;
    width: 36px;
    height: 35px;
    margin-right: -39px;
    margin-top: -21px;
}


.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}



/* modal sobre nafin 2 */

.modal-imagen-2 .modal-content {
    background-color: #fefefe;
    border-radius: 10px;
    /* Redondea las esquinas del modal */
    width: 1017px;
    /* Establece el ancho deseado del modal */
    height: 725px;
    /* Establece la altura deseada del modal */
    flex-shrink: 0;
    /* Evita que el modal se encoja para adaptarse a su contenido */
    position: fixed;
    /* Establece la posición fija */
    top: 50%;
    /* Coloca el borde superior del modal en el 50% de la altura de la ventana */
    left: 50%;
    /* Coloca el borde izquierdo del modal en el 50% del ancho de la ventana */
    transform: translate(-50%, -50%);
    /* Translada el modal hacia arriba y hacia la izquierda en la mitad de su propio ancho y alto */
}

.modal-imagen-2 .modal-content {
    display: flex;
    /* Utiliza flexbox para posicionar los elementos en fila */
}

.modal-imagen-2 .modal-content .titulo {
    /* Establece la imagen de fondo */
    background-image: url('../images/sobrenafin/popupfechas.webp');
    /* Ajusta el tamaño de la imagen para que se ajuste dentro del contenedor */
    background-size: cover;
    /* Elimina el ancho establecido para el contenedor para que se ajuste al tamaño de la imagen */
    width: 100%;
    /* Establece la altura del contenedor para que coincida con la altura de la imagen */
    height: 100%;
    /* Redondea las esquinas superiores del contenedor */
    border-radius: 2% 0 0 2%;
    /* Mueve el contenedor hacia la derecha */
    margin-left: -35px;
}

.modal-imagen-2 .modal-content .texto {
    flex: 1;
    /* Que ocupe el 50% del espacio disponible horizontalmente */
    padding: 20px;
    /* Ajusta el espacio alrededor del texto */
    margin-top: 40px;
}

.modal-imagen-2 .modal-content .texto .fecha {
    color: #007393;
    text-align: justify;
    text-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);
    font-family: Montserrat;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;

    width: 230px;
    height: 54px;
    flex-shrink: 0;
}

.modal-imagen-2 .modal-content .texto .descripcion {
    color: #000;
    text-align: justify;
    font-family: Montserrat;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;

    width: 626px;
    height: 113px;
    flex-shrink: 0;
}

.modal-imagen-2 .botones {
    display: flex;
    justify-content: flex-end;
    /* Alinea los elementos al extremo derecho */
    align-items: flex-end;
    /* Alinea los elementos en la parte inferior */
    position: absolute;
    /* Posición absoluta para estar en la esquina */
    bottom: 10px;
    /* Alinea la parte inferior del contenedor con el borde inferior del padre con un margen de 20px */
    right: 20px;
    /* Alinea la parte derecha del contenedor con el borde derecho del padre con un margen de 20px */
}

.modal-imagen-2 .botones button {
    width: 40px;
    /* Establece el ancho del botón */
    height: 40px;
    /* Establece la altura del botón */
    background-color: transparent;
    /* Establece el fondo transparente */
    border: none;
    /* Quita el borde */
    border-radius: 50%;
    /* Hace que el botón tenga forma circular */
    cursor: pointer;
    /* Cambia el cursor al pasar sobre el botón */
    outline: none;
    /* Quita el contorno al hacer clic */
    padding: 0;
    /* Quita el relleno */
    background-repeat: no-repeat;
    /* Evita que la imagen de fondo se repita */
    background-position: center;
    /* Centra la imagen de fondo dentro del botón */
    margin-left: 30px;
}

.modal-imagen-2 .botones button.left {
    background-image: url('../iconos/ui/vector-verde.svg');
    /* Establece la imagen como fondo del botón */
    background-size: 40px 40px;
}

.modal-imagen-2 .botones button.right {
    background-image: url('../iconos/ui/vector-verde.svg');
    background-size: 40px 40px;
    transform: rotate(180deg);
}

.modal-imagen-2 .modal-content .close2 {
    float: right !important;
    /* Otras propiedades */
}

.modal-imagen-2 .modal-content .bclose {
    position: absolute;
    z-index: 1000;
    right: 50px;
    top: 30px;
}

/* modal 3 sobre nafin */
.modal-imagen-3 .modal-content .texto {
    text-align: center;
    /* Centra horizontalmente el texto */
    padding: 0px;
    /* Ajusta el espacio alrededor del texto */
    flex: 1;
    /* Permite que el texto ocupe todo el espacio disponible verticalmente */
    display: flex;
    /* Utiliza flexbox para centrar verticalmente el texto */
    justify-content: center;
    /* Centra verticalmente el texto */
    align-items: center;
    /* Centra verticalmente el texto */

    width: 782px;
    height: 181px;

    margin-left: 119px;
}

.modal-imagen-3 .modal-content .titulo {
    background-image: url('../images/sobrenafin/popupultimo.webp');
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 420px;
    border-radius: 2% 2% 0 0;

}

.modal-imagen-3 .modal-content .texto p {
    color: #000;

    text-align: justify;
    font-family: Montserrat;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.modal-content .texto p b {
    color: #00708C;
    /* Cambia el color del texto dentro de las etiquetas <b> a rojo */
}

.modal-imagen-3 .botones {
    display: flex;
    justify-content: flex-end;
    /* Alinea los elementos al extremo derecho */
    align-items: flex-end;
    /* Alinea los elementos en la parte inferior */
    position: absolute;
    /* Posición absoluta para estar en la esquina */
    bottom: -20px;
    /* Alinea la parte inferior del contenedor con el borde inferior del padre con un margen de 20px */
    right: 20px;
    /* Alinea la parte derecha del contenedor con el borde derecho del padre con un margen de 20px */
}

.modal-imagen-3 .botones {
    display: flex;
    justify-content: flex-end;
    /* Alinea los elementos al extremo derecho */
    align-items: flex-end;
    /* Alinea los elementos en la parte inferior */
    position: absolute;
    /* Posición absoluta para estar en la esquina */
    bottom: 10px;
    /* Alinea la parte inferior del contenedor con el borde inferior del padre con un margen de 20px */
    right: 20px;
    /* Alinea la parte derecha del contenedor con el borde derecho del padre con un margen de 20px */
}

.modal-imagen-3 .botones button {
    width: 40px;
    /* Establece el ancho del botón */
    height: 40px;
    /* Establece la altura del botón */
    background-color: transparent;
    /* Establece el fondo transparente */
    border: none;
    /* Quita el borde */
    border-radius: 50%;
    /* Hace que el botón tenga forma circular */
    cursor: pointer;
    /* Cambia el cursor al pasar sobre el botón */
    outline: none;
    /* Quita el contorno al hacer clic */
    padding: 0;
    /* Quita el relleno */
    background-repeat: no-repeat;
    /* Evita que la imagen de fondo se repita */
    background-position: center;
    /* Centra la imagen de fondo dentro del botón */
    margin-left: 30px;
    margin-top: -50px;
}

.modal-imagen-3 .botones button.left {
    background-image: url('../iconos/ui/vector-verde.svg');
    /* Establece la imagen como fondo del botón */
    background-size: 40px 40px;
}

.modal-imagen-3 .botones button.right {
    background-image: url('../iconos/ui/vector-verde.svg');
    background-size: 40px 40px;
}

/* Estilos para el modal seguimos avanzando */

/* Contenido del modal */

#myModal2.modal {
    /* Define la altura deseada del modal */
    /* Otros estilos para el modal */

    display: none;
    /* Oculta el modal por defecto */
    position: fixed;
    /* Posición fija */
    z-index: 5000;
    /* Asegúrate de que el modal esté encima de otros elementos */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    /* Agrega desplazamiento si el contenido es demasiado grande para caber en el viewport */
    background-color: rgba(0, 0, 0, 0.7);
    /* Fondo oscuro semi-transparente */

    
}

#myModal2 .modal-content {
    background-color: #fff;
    background-image: url(../images/sobrenafin/modal2.webp);
    background-size: 103% 108%;
    background-repeat: no-repeat;
    background-position: center;
    padding: 9px;
    display: flex;
    align-items: center;
    position: relative;
    width: 1250px;
    height: 590px;
}


#myModal2 .modal-content .left-column .titulo {
    color: #007393;
    /* text-align: justify; */
    text-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);
    font-family: Montserrat;
    font-size: 35px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    width: 369px;
    height: 67px;
    flex-shrink: 0;
    margin-bottom: 6%;
    margin-top: 15%;
}

#myModal2 .modal-content .left-column .parrafo {
    color: #000;
    text-align: justify;
    font-family: Montserrat;
    font-size: 20px;
    font-style: normal;
    font-weight: 380;
    line-height: normal;
    letter-spacing: -1.15px;
    width: 350px;
    height: 475px
}



#myModal2 .modal-content .right-column {
    width: 160px;
    height: 68px;
    margin-right: -109%;
    margin-left: -24%;
    margin-block-end: -31%;
}

#myModal2 .modal-content .left-column {
    margin-left: 7%;
}

#myModal2 .modal-content .right-column .mav {
    border: none;
    border-radius: 50px;
    background: #00708C;
    color: #FFF;
    text-align: center;
    font-family: Montserrat;
    font-size: 34px;
    font-style: normal;
    font-weight: 700;
    margin-left: auto;
    height: 68px;
    width: 161px;
    line-height: 68px;
    /* Centra verticalmente el texto */
    cursor: pointer;
}



#myModal2 .modal-content .right-column .mav img {
    margin-top: 3%;
    position: relative;
    transform: translateY(20%);
}

#myModal2 .modal-content .left-column,
#myModal2 .modal-content .right-column {
    flex: 0;
    /* Hace que ambas columnas ocupen el espacio disponible */
}

#myModal2 .modal-content .bcloseav {
    position: absolute;
    z-index: 1000;
    right: 50px;
    top: 30px;
}

/* Estilos para el modal gracias esfuerzo */

.modal-esfuerzo .modal-content {
    background-image: url('../images/fondo1.jpg');
    background-size: 100% 688px;
    background-repeat: no-repeat;

    border-radius: 10px;
    width: 1309px;
    height: 688px;
    flex-shrink: 0;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
}

.modal-esfuerzo .modal-content .imagen {
    background-image: url('../images/sobrenafin/gracias.webp');
    background-size: cover;
    width: 100%;
    height: 100%;
    border-radius: 2% 0 0 2%;
    margin-left: -35px;
}

.modal-esfuerzo .modal-content .texto {
    flex: 1;
    padding: 20px;
    margin-top: 186px;
    margin-left: 5%;
    margin-right: 5%;
}

.modal-esfuerzo .modal-content .texto .titulo {
    color: #007393;
    /* text-align: justify; */
    text-shadow: 0px 4px 20px rgba(0, 0, 0, 0.25);
    font-family: Montserrat;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    width: 640px;
    height: 108px;
    flex-shrink: 0;
    margin-top: -10%;
    margin-bottom: 0%;
}

.modal-esfuerzo .modal-content .texto .descripcion {
    color: #000;
    text-align: justify;
    font-family: Montserrat;
    font-size: 30px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    width: 633px;
    height: 361px;
    flex-shrink: 0;
    margin-top: 16px;
}

.modal-esfuerzo .modal-content .texto .descripcion b {
    color: #00708C;
}

.modal-esfuerzo .modal-content .bclose-ef {
    position: absolute;
    z-index: 1000;
    right: 50px;
    top: 30px;
}