body {
    margin: 0;
    padding: 0;
    font-family: 'Special Elite', cursive;
    
    font-family: 'Roboto', sans-serif; /* Aplicar la fuente Roboto */
            
}

/* Estilo de la cabecera */
header {
    padding: 30px 15px;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}


/* Título centrado y más grande */
/* Título de la página */
.cabecera {
    text-align: center;
    font-family: 'Special Elite', cursive;
    display: flex;
    align-items: center;
}
.header-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 28px; /* Aumentar el tamaño del texto del título */
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
}
 /* Animación de letra por letra */
.letter {
    opacity: 0;
    display: inline-block;
}

/* Estilo del logo */


.logo {
    width: 200px; /* Ajusta el tamaño del logo */
    height: auto;
    margin-right: 15px;
 }

/* Icono de hamburguesa */
.menu-icon {
    display: inline-block;
    cursor: pointer;
}

.menu-icon div {
    width: 30px;
    height: 4px;
    margin: 6px 0;
}


/* Estilo del menú */
nav {
    position: absolute;
    top: 60px;
    right: 20px;
    width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    display: none;
    z-index: 1;
}

nav a {
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Estilo para mostrar el menú cuando esté desplegado */
.show { display: block;}

/* Estilo de los divs del cuerpo */
.content-section {
    padding: 0px;
    margin: 2vw;
    overflow: hidden;
    box-shadow: 7px 7px 12px 0 rgba(20, 20, 20, 0.3);
}
.content-section p {
    margin-bottom: 20px;
    text-align: justify;
}

.content-section h2 {
    font-family: 'Special Elite', cursive;
    padding: 10px;
    margin: 0;       
}

/* Estilo para el botón "Leer más" */
.read-more {
    cursor: pointer;
    text-decoration: underline;
}


/* Ocultar inicialmente el contenido extra */
.more-content { display: none; }


/* Fondo blanco para el contenido */
.content-body {
    padding: 20px;
}

.content-body img {
    width: 330px;
    height: auto;
}


/* Estilo de enlaces */
a { text-decoration: none; }

/* Estructura del layout principal con publicidad */
.main-layout {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr; /* Tres columnas: 1fr publicidad, 3fr contenido, 1fr publicidad */
    gap: 20px;
    margin: 10px;

}

.content {
    padding: 20px;
    border-radius: 10px;
}

#whatsapp-icon {
    position: fixed;
    right: 20px; /* Ajusta la posición del icono según sea necesario */
    bottom:150px; /* Ajusta la posición del icono según sea necesario */
    z-index: 9999;
    font-size: 24px;
    cursor: pointer;
    height: 12vw;
    width: 12vw;
}


/* Estilos del pie de página */

footer {
        padding: 20px 0;
        text-align: center;
    }

.footer-content p {
        margin: 10px 0;
    }

.social-media-icons {
        margin-top: 10px;
    }

.social-media-icons a {
        margin: 0 10px;
        display: inline-block;
    }

.social-media-icons img:hover {
        transform: scale(1.2); /* Efecto de zoom en hover */
}

/*Estilos del formulario*/
.contact-form-section {
}

.contact-form-section h2 {
        text-align: center;
        margin-bottom: 20px;
        margin-bottom: 20px;
        cursor: pointer; /* Para que se vea interactivo */
    }

.form-body {
        max-width: 600px;
        margin: 0 auto;
    }

form {
        display: flex;
        flex-direction: column;
    }

label {margin: 10px 0 5px;}

input[type="text"], input[type="email"], input[type="tel"], select, textarea {
        padding: 10px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 5px;
        margin-bottom: 20px;
        width: 100%;
    }

input[type="submit"] {
        background-color: #28A745; /* Botón verde */
        color: #5f6a6a;
        padding: 12px;
        font-size: 16px;
        border: none;
        cursor: pointer;
        margin-bottom: 2vw;
        border-radius: 8px;
    }

textarea { resize: vertical;}
#form-container {
        overflow: hidden;
        transition: max-height 0.3s ease-out;
    }

/*************************************************
** ANUNCIOS **************************************
**************************************************/


 /* ******************
   Animacion *********
 *********************/
 
 .logo {
    -webkit-transition: 1s linear;
    transition: 1s linear;
 }
 .logo:hover{
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);  
 }
 .logo {
    transform: rotate(20deg);
 }

 .div_anuncio, .logo {
    animation-name: animAnuncio;
    animation-direction: alternate;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-delay: 2s;
 }
 @keyframes animAnuncio {
   from {
     margin-left: 20%;
   }
   to {
     margin-left: 0%;
   }
 }
 

/**********************************************************
 ****************** COLORES WEB ***************************
 **********************************************************/
body { background-color: white;/*#E8F8F5;*/}
header { background-color: #5499c7; color: white;}
footer { background-color: #5499c7; color: white;}
.menu-icon div { background-color: white;}
#dropdown-menu { background-color: #5499c7;}
nav { background-color: #f9f9f9; }
nav a { color: white; }
nav a:hover { background-color: #aeb6bf; }
.content-section p { background-color: transparent; color: #5f6a6a ;}
.content-section h2 { color: #aeb6bf;}
#presentacion{background-color: #a2d9ce;}
#h2-Presentacion{ color:#1565C0;}
#salud{background-color: #d2b4de;}
#h2Salud{ color: #1565C0;}
#salud-mental { background-color: #f0b27a;}
#h2SaludMental { color: #1565C0;}
#nutricion {background-color: #f7dc6f;}
#h2Nutricion { color:#1565C0;}
#deporte {background-color: #abebc6;}
#h2Deporte {color: #1565C0;}
#como-ayudarte { background-color:#a9cce3;}
#h2-como-ayudarte {color:#1565C0;}
#preguntas {background-color: #d2b4de;}
#h2-preguntas {color: #1565C0;}
.content-body { background-color: transparent;}
label {color: #5f6a6a;}
a { color: #4CAF50;}
.advertisement { background-color: transparent;}
.content { background-color: transparent;}
.read-more { color: blue;}
input[type="submit"]:hover {background-color: #218838;}
input[type="submit"] {background-color: #28A745;  color: whitesmoke;}
h3{color: #808b96;}
.div_anuncio { background-color: #d6eaf8; }
.ad-description{color: #2c3e50;}
.ad-title{color: #2c3e50;}
/*******************************************************************
 *******************************************************************
 ********************************************************************/
/* Responsive Design: para móviles y tablets */
@media (max-width: 768px) {
      /* Ajuste de cabecera para dispositivos móviles */
      .header-title {
          font-size: 22px; /* Reducir el tamaño del título */
          white-space: normal; /* Permitir que el texto se divida en varias líneas */
          padding: 10px;
      }

      .logo  {
          width: 135px; /* Reducir el tamaño del logo */
      }

      /* Cambiar el layout a una columna para móviles y tablets */
      .main-layout {
          display: block; /* Cambiar a bloque */
          margin: 10px;
      }

      .content {
          margin-bottom: 20px; /* Añadir un poco de margen inferior para separar las secciones */
      }

      /* Ajustar las imágenes dentro de los divs */
      .content-body img {
          width: 100%; /* Que la imagen ocupe el ancho completo en pantallas pequeñas */
          max-width: 250px;
      }

      /* Menú hamburguesa ajustado */
      nav {  width: 100%; /* Hacer que el menú ocupe todo el ancho */}
      
      
    }

@media (max-width: 480px) {
    /* Ajuste de cabecera para pantallas muy pequeñas (teléfonos) */
        .header-title {
            font-size: 18px; /* Reducir más el tamaño del título */
        }

        .logo {
            width: 85px; /* Reducir aún más el logo */
        }

        /* Menú hamburguesa a pantalla completa */
        nav {
            width: 100%;
            text-align: center;
        }

        nav a {
            padding: 10px;
            font-size: 16px;
        }

    }
}