/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    line-height: 1.6;
    background-color: #e1eff1;
}

a {
    text-decoration: none;
    color: #072247;
}

/* HEADER */
.header {
    background-color: #e1eff1;
    padding: 1rem 2rem;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    transition: background-color 0.3s ease; /* Transición para el fondo */
}

.container-header {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 4rem;
}

.logo img{
    width: 10rem;
    height: 10rem;
    margin-right: 10rem;
}

.nav ul {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav a {
    font-size: 0.9rem;
    transition: color 0.6s ease;
    font-weight: 600;
}

.highlight{
    background-color: #072247;
    color: #e1eff1;
    border-radius: 20px;
    padding: 0.5rem 1rem;
    transition: background-color 0.6s ease, transform 0.6s ease;
}

.menu-toggle{
    display: none;
}


.section1 {
    height: 100vh; /* Altura completa del viewport */
    display: flex; /* Activa Flexbox */
    flex-direction: row-reverse;
    justify-content: center; /* Alinea horizontalmente al inicio (izquierda) */
    align-items: center; /* Alinea verticalmente al centro */
    gap: 6rem;
}

.logomain{
    height: 22rem;
}

.container1 {
    display: flex;
    flex-direction: column; /* Coloca el h1 y el botón en columna */
    align-items: flex-start; /* Alinea elementos internos a la izquierda */
    gap: 1rem; /* Espaciado entre h1 y el botón */
    margin-top: 5rem;
}

.section1 h1 {
    color: #072247;
    font-size: 2.2rem;
    text-align: left;
    line-height: 1.5; /* Mejora el espaciado entre líneas */
}

.btn-contact {
    display: inline-block;
    background-color: #072247; /* Color principal */
    color: #e1eff1;
    padding: 0.8rem 1.5rem;
    border-radius: 2rem;
    font-size: 1.2rem;
    text-decoration: none;
    font-weight: bold;
    margin-top: 2rem;
    transition: background-color 0.6s ease, transform 0.6s ease;
}

.btn-contact:hover {
    background-color: #087aaf; /* Cambio de color al pasar el mouse */
    transform: scale(1.05); /* Efecto de aumento */
}

.btn-contact:active {
    transform: scale(0.95); /* Efecto al presionar */
}
.whatsapp-button {
    position: fixed;
    bottom: 20px;  /* Distancia desde la parte inferior */
    right: 20px;   /* Distancia desde la parte derecha */
    width: 4.5rem;   /* Ancho del botón (ajústalo a tu preferencia) */
    height: 4.5rem;  /* Alto del botón (ajústalo a tu preferencia) */
    background-color: #072247;  /* Color de fondo de WhatsApp */
    border-radius: 50%;  /* Hace el botón redondo */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s;
}

.whatsapp-button img {
    width: 5rem;  /* Tamaño del logo (ajústalo a tu preferencia) */
    height: 5rem; /* Tamaño del logo (ajústalo a tu preferencia) */
}

.whatsapp-button:hover {
    background-color: #243c5c;  /* Color de fondo cuando pasa el ratón */
}




.section2{
    background-color: #072247;
    height: 25vh;
    text-align: center;
    padding: 2rem;
    }


.section2 h2{
    color: #e1eff1;
}

.section3 {
    height: 130vh; /* Altura completa del viewport */
    text-align: center; /* Alinea el texto al centro */
    padding: 2rem;
}

.section3 h3 {
    color: #072247;
    font-size: 3rem;
    margin: 3rem;
}


.image-container {
    display: flex; /* Flexbox para alinear las imágenes y los textos en fila */
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1rem; /* Espaciado entre los contenedores de imágenes */
    width: 100%; /* Ocupa el ancho completo */
    height: 35rem;
    padding: 2rem; /* Espaciado interno */
    justify-items: center; /* Centra horizontalmente cada caja */
    align-items: center; /* Centra verticalmente cada caja */
}

.image-box {
    background-color:  #e1eff1;
    border: 1px solid #072247; /* Borde de las cajas */
    border-radius: 0.8rem; /* Bordes redondeados */
    padding: 1rem; /* Espaciado interno */
    text-align: center; /* Centra el texto */
    max-width: 100%; /* Controla el ancho de las cajas */
    height: 100%;

    box-shadow:  6px 6px 12px #072247; /* Sombra para las cajas */
}

.image-box ul {
    list-style-type: none; /* Cambia el estilo del marcador (disc, circle, square, etc.) */
    margin: 0;
    padding: 0;
    text-align: center; /* Alinea el texto a la izquierda */
}

.image-box ul li {
    margin: 0.5rem 0; /* Espaciado vertical entre los elementos de la lista */
    color: #072247; 
    font-size: 1rem; /* Ajusta el tamaño de fuente */
    font-weight: 500;
}

.image-box img {
    width: 7rem; /* Imagen ocupa todo el ancho del contenedor */
    height: 7rem; /* Mantiene la proporción de la imagen */
    margin-bottom: 2rem;
}

.image-box h4 {
    font-size: 1.7rem;
    color:  #072247;
    margin-bottom: 2rem;
}



.section4 {
    background-color: #e1eff1;
    color: #072247;
    min-height: 80vh; /* Altura completa del viewport */
    display: flex; /* Activa Flexbox */
    justify-content: center; /* Alinea horizontalmente al inicio (izquierda) */
    align-items: center; /* Alinea verticalmente al centro */
    gap: 6rem;
    padding: 1rem;
}

.container4 {
    display: flex;
    flex-direction: column; /* Coloca el h1 y el botón en columna */
    align-items: flex-start; /* Alinea elementos internos a la izquierda */
    gap: 2rem; /* Espaciado entre h1 y el botón */
    padding: 6rem;
}

.img4{
    width: 30rem;
    height: 30rem;
}

.section4 h5{
    font-size: 4rem;
}

.section4 p{
    font-size: 1.2rem;
}

.btn-contact2 {
    display: inline-block;
    background-color: #072247; /* Color principal */
    color: #e1eff1;
    padding: 0.8rem 1.5rem;
    border-radius: 2rem;
    font-size: 1.2rem;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-contact2:hover {
    background-color: #0b82b9; /* Cambio de color al pasar el mouse */
    transform: scale(1.05); /* Efecto de aumento */
}

.btn-contact2:active {
    transform: scale(0.95); /* Efecto al presionar */
}

.section5{
    height: 140vh;
    display: flex;
    flex-direction: column;
}

.prev-profs{
    height: 20rem;
    background-color: #072247;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

.prev-profs ul {
    display: grid;
    grid-template-columns: 1fr 1px 1fr; /* Dos columnas con una línea de 1px al centro */
    gap: 20px; /* Espaciado entre los elementos */
    align-items: start; /* Alinea el contenido superiormente */
    position: relative; /* Necesario para el pseudo-elemento */
}

.prev-profs ul li {
    list-style: none; /* Elimina los puntos de lista */
    padding: 10px;
    color: #e1eff1;
}

.prev-profs ul li:nth-child(1),
.prev-profs ul li:nth-child(3) {
    grid-column: 1; /* Los elementos 1 y 3 se colocan en la columna izquierda */
}

.prev-profs ul li:nth-child(2),
.prev-profs ul li:nth-child(4) {
    grid-column: 3; /* Los elementos 2 y 4 se colocan en la columna derecha */
}

/* Línea divisoria */
.prev-profs ul::before {
    content: ''; /* Genera la línea */
    position: absolute; /* Posiciona el elemento de forma absoluta */
    left: 50%; /* Centra la línea horizontalmente */
    width: 1px; /* Ancho de la línea */
    height: 100%; /* Ocupa toda la altura del contenedor */
    background-color: #ccc; /* Color de la línea */
}


.section5 .profesionales {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: 20px; /* Espacio entre elementos */
}

.section5 .profesional {
    text-align: center; /* Centrar texto debajo de la imagen */
    max-width: 20rem; /* Ajusta el ancho máximo si es necesario */
}



.section5 .profesional img {
    width: 100%; /* Asegura que la imagen se ajuste al contenedor */
    border-radius: 50%; /* Si quieres que las imágenes sean circulares */
}

.section5 .profesional p {
    margin-top: -5rem;
    color: #072247;
    font-weight: 600;
    text-decoration: none;
}

.section5 h2{
    text-align: center;
    color: #072247;
    font-size: 2.5rem;
    margin: 2rem;
}

.section5 p{
    text-align: center;
    font-size: 1.2rem;
    margin-top: 2rem;
    color: #072247;
}





/* FOOTER */

.footer {
    background-color: #333;
    color: #fff;
    padding: 1rem 2rem;
    text-align: center;
}






/*DISEÑO PARA MOVILES*/
@media (max-width: 768px) {

    *{
        box-sizing: border-box;
    }
        
    html, body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        width: 100%;
        overflow-x: hidden;
    }
    
    /*COMIENZA EL HEADER*/
    .header {
        background-color: #e1eff1;
        padding: 1rem 2rem;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1000;
    }
    
    .logo {
        margin-right: 4rem;
    }
    
    .container-header{
        height: 5rem;
    }
    
    /* MENU OCULTO */
    .nav {
        display: none;
        flex-direction: column;
        position: fixed; 
        top: 5rem; 
        left: 0;
        right: 0;
        background: #e1eff1;
        width: 100%;
        z-index: 1000;
        padding: 1rem 0;
        border: none;
        border-radius: 0; 
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    
    .nav a {
        color: #072247;
        font-size: 1.1rem;
        padding: 0.3rem 0;
        display: block;
    }
    
    .nav .highlight {
        color: #e1eff1;
        margin: 0.5rem auto;
        width: 90%;
        padding: 0.5rem 0;
    }
    
    .nav.open {
        display: flex;
    }
    
    .menu-toggle {
        display: inline-block;
        background: none;
        border: none;
        cursor: pointer;
        z-index: 1001;
    }
    
    .hamburger {
        width: 25px;
        height: 3px;
        background-color: #072247;
        position: relative;
        display: inline-block;
        margin-top: 3rem;
        margin-right: 5rem;
    }
    
    .hamburger::before,
    .hamburger::after {
        content: '';
        width: 25px;
        height: 3px;
        background-color: #072247;
        position: absolute;
        left: 0;
        transition: transform 0.3s ease;
    }
    
    .hamburger::before {
        top: -8px;
    }
    
    .hamburger::after {
        top: 8px;
    }
    
    .menu-toggle.open .hamburger {
        background-color: transparent;
    }
    
    .menu-toggle.open .hamburger::before {
        transform: rotate(45deg) translate(5px, 5px);
    }
    
    .menu-toggle.open .hamburger::after {
        transform: rotate(-45deg) translate(5px, -5px);
    }
    
    .container-header img {
        height: auto;
        width: 80%;
        margin: 0 auto;
        display: block;
    }
    
    .menu-toggle {
        display: inline-block;
        position: absolute;
        bottom: 3rem;
        right: -2rem;
    }
    
    
    .nav ul {
        width: 100%;
        padding: 0;
        margin: 0;
        flex-direction: column;
        text-align: center;
    }
        
    .nav li {
        width: 100%;
        padding: 0.1rem 0;
    }
    
        /*FIN NAVBAR*/
        /*COMIENZO SECCIONES*/
    

    .section1 {
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

    }

    .container1{
        justify-content: center;
        text-align: center;
        align-items: center;
    }

    .section1 img {
        display: none;
    }

    .section1 h1 {
        font-size: 2.6rem;
        text-align: center;
        color: #072247;
    }

    .section1 .btn-contact{
        width: 80%;
        text-align: center;
    }

    .section2{
        height: 20vh;
        margin-bottom: 25rem;
        box-sizing: content-box;
        display: flex;
        align-items: center;
        justify-content: center;
    }



    .container h2 {
        display: flex;
        font-size: 1rem;
        color: #e1eff1;
    }



    .section3 {
        height: 120vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .image-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1.5rem;

    }

    .image-box {
        max-width: 100%;
    }

    .section4 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        margin: 30rem 0;
    }



    .section4 .img4 {
        width: 100%;
        margin-top: 5rem;
    }


    .section4 h5 {
        font-size: 3rem;
        text-align: center;
        margin: 0 2rem;
    }

    .section4 p {
        font-size: 1.5rem;
        text-align: center;
    }

    .btn-contact2 {
        width: 100%;
        text-align: center;
    }

    .section5 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-bottom: 20rem; /* Espacio antes del footer */
    }
    
    .prev-profs{
        height: 100%;
        background-color: #072247;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 2rem;
    }
    
    .prev-profs ul {
        display: flex;
        flex-direction: column;
        gap: 20px; /* Espaciado entre los elementos */
        align-items: center; /* Alinea el contenido superiormente */

    }
    
    .prev-profs ul li {
        list-style: none; /* Elimina los puntos de lista */
        padding: 10px;
        color: #e1eff1;
    }
    

    
    .prev-profs ul li:nth-child(2),
    .prev-profs ul li:nth-child(4) {
        display: none; /* Los elementos 2 y 4 se colocan en la columna derecha */
    }
    
    /* Línea divisoria */
    .prev-profs ul::before {
        display: none;
    }

    .section5 .profesionales{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 15rem;
    }

    .footer {
        padding: 2rem 1rem;
        text-align: center;
        background-color: #072247;
        color: white;
    }

    .footer a{
        color: #087aaf;
    }

    .whatsapp-button {
        position: fixed;
        bottom: 2%;  /* Distancia desde la parte inferior */
        right: 5%;   /* Distancia desde la parte derecha */
        width: 4.5rem;   /* Ancho del botón (ajústalo a tu preferencia) */
        height: 4.5rem;  /* Alto del botón (ajústalo a tu preferencia) */
        background-color: #072247;  /* Color de fondo de WhatsApp */
        border-radius: 50%;  /* Hace el botón redondo */
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
        transition: background-color 0.3s;
    }
    
    .whatsapp-button img {
        width: 5rem;  /* Tamaño del logo (ajústalo a tu preferencia) */
        height: 5rem; /* Tamaño del logo (ajústalo a tu preferencia) */
    }
    
    .whatsapp-button:hover {
        background-color: #243c5c;  /* Color de fondo cuando pasa el ratón */
    }



}