@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');

body {
	font-family: 'Montserrat', sans-serif;
    background: linear-gradient(to right, #f7e3e7, #ffcbd5); /* Degradado en vertical */
	font-size: 18px;
	line-height: 1.6;
    padding: 0;
    margin: 0;
}

/* HEADER */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0.8vh 3vh;
    background: transparent; /* Inicialmente transparente */
    transition: background-color 0.8s ease, color 0.8s ease;
    text-align: right;
    font-size: 3vh;
    font-weight: 600;
    z-index: 1000;
}

.header.scrolled {
    background-color: #f8c2cd; /* Fondo cuando se hace scroll */
    color: #f17f96; /* Cambia el color del texto si es necesario */
}

.logo {
    margin-right: 85vh; /* Asegura que el logo esté más a la izquierda */
}

.logo img {
    height: 10vh; /* Ajusta la altura del logo según sea necesario */
    width: 30vh; /* Mantiene la proporción de la imagen */
	margin-bottom: 1vh;
}

.header ul {
    display: flex;
    align-items: center;
    justify-content: right;
    text-align: center;
    margin-right: 20vh;
	margin-top: -10vh;
}

.header ul li {
    display: inline-block;
    margin-left: 6vh;
}

.header ul li a {
    color: #f43b60;
    text-decoration: none;
    margin-right: 2rem;
}

.header .eng {
    color: #51ade5;
    text-decoration: none;
    display: none;
    margin-left: 13rem;

}

.nav-menu img{
    height: 2.1rem;
    position: absolute;
    right: 20%;
}

.header .spa {
    color: #51ade5;
    text-decoration: none;
    margin-left: 13rem;

}

.header.header.scrolled .spa {
    color: #51ade5;
    text-decoration: none;
}

.header.header.scrolled .spa:hover{
    color: #f43b60;
}

.header.scrolled ul li a {
    color: #f95c7c; /* Color de los enlaces cuando el header está en modo "scrolled" */
}

.header ul li a:hover {
    color: #f43b60;
}

/* PRIMERA SECCION */
.section-top {
    min-height: 150vh; /* Aumenta la altura para cubrir todo el viewport */
    background: url(/HTML/IMAGENES/fonovalf.png) no-repeat center center;
	background-position: relative;
    position: relative;
	background-size: cover;
	background-color: #fff;
	height: 80vh;
}

/* Botón móvil oculto por defecto */
.mobile-only-button {
    display: none;
}

.section-top h1 {
    font-size: 0vh;
    line-height: 1.3;
    color: #f43b60;
	padding-top: 40vh;
	padding-right: 20vh;
    padding-left: 5vh;
	text-align: left;
}

.section-top p {
    font-size: 0vh;
	text-align: left;
	padding-right: 20vh;
    padding-left: 5vh;
	color: #706565;
}

.contact-button {
    display: inline-block;
    margin-top: 62vh;
    margin-left: 13vh;
    padding: 1vh 2vh;
    background-color: #f43b60; /* Color típico de WhatsApp */
    color: white;
    font-size: 4vh;
    text-align: center;
    text-decoration: none;
    border-radius: 5vh;
    transition: background-color 0.3s ease;
}

.contact-button:hover {
    background-color: #f50535; /* Color más oscuro al pasar el cursor */
}


.section-top .content {
    position: absolute;
    top: 10vh;
    right: 2vh;
    width: 55%;
}

/**SECCION BOXES**/
.section2 {
	display: flex;
	flex-wrap: wrap;               /* Permite que las cajas se ajusten en varias filas si hay poco espacio */
	justify-content: center;        /* Centra horizontalmente */
	align-items: center;            /* Centra verticalmente */
	min-height: 100vh;              /* Altura mínima para centrar verticalmente en la ventana */
	gap: 2vh;                       /* Espacio entre las cajas */
	padding: 2vh;                   /* Espacio alrededor del contenedor */
	}

.section2 img{
    width: 60vh; 
    height: auto; 
    border-radius: 4vh; 
    margin-bottom: 2vh;
}

.box {
    transition: transform 0.6s ease, box-shadow 0.6s ease;
    border: 0.2vh solid #f43b60;
    padding: 2vh;
    border-radius: 5vh;
	background-color: transparent;
	width: 60vh;
	height: 75vh;
	margin: 4vh;
}

.box:hover {
    transform: scale(1.05); 
    box-shadow: 0px 8px 16px #132d83(0, 0, 0, 0.2); 
    border-color:  #f30333;
}

.section2 .box {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    background-color: transparent;
    padding: 2vh 2vw;
    border-radius: 3vh;
    box-shadow:  #f43b60;
    text-align: center;
	margin-top: 20vh;
	margin-bottom: 10vh;
}


.section2 .box h2,
.section2 .box h3 {
    color: #f43b60;
    font-size: 4vh;
    margin-bottom: 1vh;
}

.section2 .box p {
    color: #706565;
    font-size: 3vh;
}

/** SECCION GRID **/
.section-grid {
    display: flex;                   /* Cambiar a flex para alinear las cajas en línea */
    justify-content: center;         /* Centrar horizontalmente las cajas */
    align-items: flex-start;         /* Alinear las cajas en la parte superior */
    gap: 4vh;                          /* Sin espacio entre las cajas */
    margin-top: 0;                  /* Sin margen superior */
    margin-bottom: 10vh;               /* Sin margen inferior */
}

.section-grid .box {
    margin: 0;                      /* Eliminar márgenes de las cajas */
    padding: 2vh;                  /* Espacio interno de la caja */
    border-radius: 5vh;            /* Redondear las esquinas */
    border: 0.2vh solid #f43b60;   /* Borde de la caja */
    transition: transform 0.6s ease, box-shadow 0.6s ease; /* Efectos al hover */
}

.section-grid img {
    width: 60vh;                   /* Ajustar el ancho de las imágenes */
    height: auto;                  /* Mantener la relación de aspecto */
    border-radius: 4vh;           /* Redondear las esquinas */
}

/* Estilos para encabezados y párrafos */
.section-grid h4, 
.section-grid h5, 
.section-grid h6 {
    font-size: 4vh;                /* Tamaño de fuente igual que en las boxes */
    font-weight: 200;              /* Mantener el mismo peso de fuente */
    color: #f43b60;                /* Color de texto */
    margin: 2vh 0 1vh 0;          /* Margen superior e inferior */
    text-align: center;
}

.section-grid p {
    font-size: 3vh;                /* Tamaño de fuente igual que en las boxes */
    color: #706565;                /* Color de texto */
    margin: 1vh 0;                /* Margen superior e inferior */
    text-align: center;
}


/**SECCION CONTACTO**/

.section-contact {
    margin-bottom: -3vh;
}

.banner {
    position: relative;
    text-align: center;
}

.banner-img {
    width: 100%;
    height: 100%;
}

.boton {
    position: absolute;
    top: 74%;
    left: 75%;
    padding: 1vh 4vh;
    background-color: #f43b60; /* Color típico de WhatsApp */
    color: white;
    font-size: 5vh;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border-radius: 5vh;
    transition: background-color 0.3s ease;
}

.boton:hover {
    background-color: #f50535; /* Color más oscuro al pasar el cursor */
}

.mobile-only-contact{
    display: none;
}

.section3{
    min-height: 70rem; /* Aumenta la altura para cubrir todo el viewport */
    background: url(/HTML/IMAGENES/1.png) no-repeat center center;
	background-position: relative;
    position: relative;
	background-size: cover;
}

.form{

    box-shadow: 0 0 200px rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    text-align: center;
    align-items: end;

}

    .input-group {
        display: flex;
        flex-direction: column;
        text-align: left;
        width: 25rem; /* Ancho fijo de 30rem */
        padding: 4rem; /* Espaciado interno de 4rem */
        border-radius: 10px; /* Bordes redondeados */
        backdrop-filter: blur(10px); /* Efecto de desenfoque en el fondo */
        background: rgba(255, 255, 255, 0.1); /* Fondo blanco con opacidad para el efecto de vidrio */
        border: 2px solid rgba(255, 255, 255, 0.2); /* Borde semi-transparente blanco */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra sutil */
        color: white; /* Texto blanco */
        position: absolute;
        top: 20%;
        left:55%;
    }


h6 {
    color: #f43b60;
    font-size: 2rem;
    margin-top: 0;
    padding: 0;
    margin-bottom: 1rem;
}

label{
    color: #f43b60;
    font-size: 15px;
    font-weight: 600;
}

input, textarea{
    padding: 0.5rem;
    border-radius: 25px;
    margin-bottom: 1px;
    background-color: #edfff0;
    border: 2px solid #f0faf1;
    color: #f43b60;
    outline: none;
}

input::placeholder, textarea::placeholder{
    color:#f43b60;
}


.check{
    display: flex;
    flex-direction: row;
    align-items: first baseline;
    margin-top: 1rem;
}

.checkbox-label {
    margin-top: 1.2rem;
}

.checkbox-text{
    text-align: justify;
    font-size: 0.6rem;
    color: #f43b60;
    margin-left: 0.7rem;
}


.btn {
    font-size: 16px;
    color: #f0faf1;
    border: 0;
    border-radius: 25px;
    background-color: #f43b60;
    box-shadow: 0 0 0.1rem #dc1d43;
    cursor: pointer;
    margin-top: 2rem;
    
}

.btn:hover {
    background-color: #de4f4b;
}



/**FOOTER**/
.section-bottom{
    background: #f8c2cd;
    height: 2rem;
    padding: 2rem;
}

.footer {
		text-align: center;
		font-size: 2vh;
	}

	
.footer img{
    display: none;
}

.footer ul {
    display: flex;
    align-items: center;
}

.footer ul li {
    display: inline-block;
    margin: 0 15px;
}

.footer ul li a {
    text-decoration: none;
    color: #f43b60;
    padding: 0 10vh;
}

.footer ul li a:hover {
    color: #f41945;  
}

/**BOTON WHATSAPP**/
.btn-whatsapp-fixed {
    position: fixed;
    bottom: 5vh;
    right: 5vh;
    background-color: #25D366;
    color: white;
    border-radius: 50%;
    padding: 2vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

.btn-whatsapp-fixed:hover {
    transform: scale(1.1);
    background-color: #1ebe57;
}

.btn-whatsapp-fixed img {
    width: 7vh;
    height: 7vh;
}

.btn-esp-fixed{
  display: none;
}

/**AVISO COOKIES**/
.aviso-cookies {
    display: none;
    background: #ffcbd5;
    padding: 20px;
    width: calc(100% - 40px);  /* Asegúrate de que el ancho se ajuste bien */
    max-width: 300px;
    line-height: 150%;
    border-radius: 10px;
    position: fixed;
    bottom: 35px;
    left: 20px;
    z-index: 100;
    box-shadow: 0px 2px 20px 10px rgba(222, 222, 222, .25);
    text-align: center;
}

.aviso-cookies.activo {
	display: block;
}

.aviso-cookies .galleta {
    max-width: 80px;                  /* Ajusta el tamaño de la imagen para que no sea tan grande */
    position: absolute;
    top: -60px;                       /* Ajusta la posición para que no esté tan alto */
    left: calc(50% - 40px);           /* Centrar la imagen con respecto al aviso */
}


.aviso-cookies .titulo,
.aviso-cookies .parrafo {
    margin-bottom: 5px;             /* Ajusta los márgenes para que el contenido no esté tan separado */
}

.aviso-cookies .parrafo {
    margin-bottom: 5px;             /* Ajusta los márgenes para que el contenido no esté tan separado */
    font-size: 0.8rem;
}

.aviso-cookies .boton {
    width: 100%;                    /* Asegúrate de que el botón ocupe el ancho completo del contenedor */
    max-width: 250px;              /* Puedes establecer un máximo para que no se extienda demasiado */
    background: #f43b60;
    border: none;
    color: #ffcbd5;
    font-family: 'Roboto', sans-serif;
    text-align: center;
    padding: 10px;                 /* Ajusta el padding para que no sea demasiado alto */
    font-weight: 700;
    cursor: pointer;
    transition: .3s ease all;
    border-radius: 5px;
    margin: 30px 0;                /* Margen superior e inferior para separar del contenido */
    font-size: 14px;
    position: absolute;
    left: 15%;
}

.aviso-cookies .boton:hover {
    background: #ed133f;
}

.aviso-cookies .enlace {
	color: #ed133f;
	text-decoration: none;
	font-size: 14px;
}

.aviso-cookies .enlace:hover {
	text-decoration: underline;
}

.fondo-aviso-cookies {
	display: none;
	background: rgba(0,0,0,.20);
	position: fixed;
	z-index: 99;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
}

.fondo-aviso-cookies.activo {
	display: block;
}
/*********MOBILES*******/
@media (max-width: 700px) {
    /* General adjustments for smaller screens */
    body {
        font-size: 16px;
    }

    .header {
        padding: 2vh;
        font-size: 2.5vh;
        height: 5rem;
    }

    .header ul {
        flex-direction: column;
        margin-right: 0;
        margin-top: 1vh;
		display: none;
    }

    .header ul li {
        margin: 1vh 0;
		display: none;
    }

    .logo {
        display: block; /* Asegúrate que el logo esté visible */
    }

    .logo img {
        height: 9vh; /* Ajusta la altura del logo según sea necesario */
        width: auto; /* Mantiene la proporción de la imagen */
        margin-left: 7vh; /* Resetea el margen */
        margin-bottom: 2vh; /* Ajusta según sea necesario */
    }

    .section-top {
        width: 100%;
        height: 100%;
        background: url(/HTML/IMAGENES/ConnectHealth\ \(720\ x\ 1920\ px\)\ \(1\)\ eng.png) no-repeat center center;
        background-size: contain;
        margin-top: -10vh;
    }

    .section-top h1 {
display: none;
    }

    .section-top p {
display: none;
    }
    
    .contact-button {
        display: inline-block;
        padding: 0.1vh 2vh;
        font-weight: 500;
        background-color: #f43b60;; /* Color típico de WhatsApp */
        color: whitesmoke;
        font-size: 4vh;
        text-align: center;
        text-decoration: none;
        border-radius: 5vh;
        transition: background-color 0.6s ease;
        position: absolute;
        top: 64.2vh;
        left: -2vh;
    }


    .contact-button:hover {
        background-color: #f50535; /* Color más oscuro al pasar el cursor */
    }

    .mobile-only-button {
        display: inline-block;
        padding: 0.1vh 2.5vh;
        font-weight: 500;
        background-color: #f8c2cd; /* Color típico de WhatsApp */
        color: #eb3055;
        font-size: 3.5vh;
        text-align: center;
        text-decoration: none;
        border-radius: 5vh;
        transition: background-color 0.6s ease;
        position: absolute;
        top: 100vh;
        left: 14vh;
    }



    .section2 {
        padding: 2vh;
        gap: 2vh;
        flex-direction: column;
    }

    .section2 img{
        width: 100%;
    }

    .section2 .box {
        width: 80vw;
        height: auto;
        margin: 2vh auto;
    }



    .section2 .box p {
        font-size: 2.5vh;
        color: #706565;
    }

    .section-contact .boton{
        display: none;

    }

    .section-contact{
        height: 75rem;
    }

    .section-grid {
        display: flex;                    /* Habilitar Flexbox */
        flex-direction: column;           /* Dirección vertical (columnas) por defecto */
        align-items: center;              /* Centrar horizontalmente los elementos */
        padding: 2vh;                    /* Espacio alrededor de la sección */
        gap: 4vh;                        /* Espacio entre las cajas */
        margin-bottom: 90vh;
    }
    
    .section-grid .box {
        width: 80vw;
        height: auto;
        margin: 2vh auto;
    }

    .section-grid img {
        width: 100%;
    }


    .input-group {
        display: flex;
        flex-direction: column;
        text-align: left;
        width: 20rem; /* Ancho fijo de 30rem */
        padding: 1rem; /* Espaciado interno de 4rem */
        border-radius: 10px; /* Bordes redondeados */
        backdrop-filter: blur(10px); /* Efecto de desenfoque en el fondo */
        background: rgba(255, 255, 255, 0.1); /* Fondo blanco con opacidad para el efecto de vidrio */
        border: 2px solid rgba(255, 255, 255, 0.2); /* Borde semi-transparente blanco */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra sutil */
        color: white; /* Texto blanco */
        position: absolute;
        top: 10%;
        left: 5%;
    }

    h6{
        margin-top: 0;
        margin-bottom: 1rem;
    }


    .section-bottom{
        background: #f8c2cd;
        height: 15vh;
        padding-top: 5vh;
    }

    .footer ul {
        display: flex;
        align-items: center;
    }
    
    .footer ul li {
        display: inline-block;
        margin: 0 15px;
    }
    
    .footer ul li a {
        text-decoration: none;
        color: #f43b60;
        padding: 0 0vh;
    }

    .section-bottom img{
        display: none;
    }

    .banner-img{
        display: none;
    }

    .mobile-only-contact{
        width: 100%;
        height: 100%;
        display: block;
        margin-top: -70vh;
    }

    .btn-whatsapp-fixed {
        position: fixed;
        bottom: 2vh;
        right: 2vh;
        background-color: #25D366;
        color: white;
        border-radius: 50%;
        padding: 1vh;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
        transition: transform 0.3s ease;
    }

    .btn-whatsapp-fixed img {
        width: 3.5vh;
        height: 4vh;
    }

    .btn-esp-fixed {
        position: fixed;
        bottom: 10vh;
        right: 2vh;
        color: white;
        background-color: transparent; /* Fondo transparente */
        border: none; /* Sin bordes */
        box-shadow: none; /* Elimina cualquier sombra */
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        transition: transform 0.3s ease;
        
    }

    .btn-esp-fixed:hover {
        transform: scale(1.1);
    
    }
    
    .btn-esp-fixed img {
        width: 3rem;
        height: 3rem;
    }


    .aviso-cookies {
        width: calc(100% - 20px);
    }

}