body{
    position: relative;
    margin: 0;
    background-image: url('FondoFM.png'); 
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    overflow-x: hidden; /* Asegura que no haya desplazamiento horizontal */
}

h2 {
    transition: transform 0.3s ease, font-size 0.3s ease; /*Coloco animacion a todos los h2 al pasarle el cursor por encima */
}

h2:hover {
    transform: scale(1.1); 
    
}

.logoytitulo {
    padding: 10px;
    width: 90%; /* Ajusta el ancho del contenedor al 90% del ancho de la pantalla */
    max-width: 700px; /* Mantiene el ancho máximo para pantallas grandes */
    height: auto; /* Ajusta la altura automáticamente para contenido flexible */
    margin: auto;
    box-sizing: border-box; /* Asegura que el padding y el borde se incluyan en el tamaño total */
    text-align: center;
}

.logo {
    padding: 10px;
    margin: 0 auto;
    width: 80%; /* Ajusta el ancho de la imagen al 80% del contenedor */
    max-width: 500px; /* Mantiene el tamaño máximo de la imagen */
    filter: drop-shadow(0 0 20px #0007);
}

.titulo {
    font-family: 'Times New Roman', Times, serif;
    font-weight: bold;
    font-style: oblique;
    font-size: 4em; /* Ajusta el tamaño del texto a un tamaño más manejable */
    text-shadow: 0.5px 0.5px 3px rgb(39, 42, 40);
    margin: 10px 0; /* Espacio alrededor del título */
    line-height: 1.2; /* Ajusta el espaciado entre líneas */
}

/* Estilos específicos para dispositivos móviles */
@media (max-width: 768px) {
    .logoytitulo {
        width: 100%; /* Asegura que el contenedor use todo el ancho disponible */
        padding: 20px 10px; /* Ajusta el padding para mejor ajuste en pantallas pequeñas */
    }

    .logo {
        width: 90%; /* Ajusta el ancho de la imagen al 90% del contenedor en pantallas pequeñas */
    }

    .titulo {
        font-size: 2.5em; /* Ajusta el tamaño del texto para pantallas más pequeñas */
    }
}

.titulo, .logo {
    display: inline-block; 
    animation: heartbeat 7s infinite; 
}


@keyframes heartbeat {
    0%, 100% {
        transform: scale(1); 
    }
    50% {
        transform: scale(1.1); 
    }
}

.enlaces {
    width: 90%;
    display: flex;
    justify-content: center;
    padding: 10px;
    margin: 50px auto 0 auto; 
    background-color: #f5f5f5;
    border-radius: 20px;
}

/*Estilos de los enlaces------------------------- */
.enlaces a {
    text-decoration: none;    
    color: #409e3f;
    margin: 20px 20px; /* Ajusta el margen para espaciar los enlaces */
    font-family: 'Playwrite CU';
    font-size: large;
    transition: transform 0.3s ease; /* Transición suave al pasar el cursor */
}


.enlaces a:hover {
    transform: scale(1.2); /* Aumenta el tamaño al pasarle el cursor por encima */
}


/* Estilos del contenedor del carrusel */
.carousel-container {
    position: relative;
    width: 100%; /* Ajusta el ancho del contenedor del carrusel */
    max-width: 1200px; /* Ancho máximo del carrusel */
    overflow: hidden; /* Oculta el contenido que se desborda */
    margin: 0 auto; /* Centra el carrusel */
    border: 1px solid #ccc; /* Opcional: Añade un borde para mejor visibilidad */
}

/* Estilos del contenedor del carrusel */
.carousel-container {
    position: relative;
    width: 100%; /* Ajusta el ancho del contenedor del carrusel */
    max-width: 1500px; /* Ancho máximo del carrusel */
    height: 600px; /* Ajusta la altura del contenedor del carrusel */
    overflow: hidden; /* Oculta el contenido que se desborda */
    margin: 0 auto; /* Centra el carrusel */
    border: 1px solid #ccc; /* Opcional: Añade un borde para mejor visibilidad */
}

/* Estilos del carrusel */
.carousel {
    display: flex;
    transition: transform 1.5s ease-in-out;
    width: 100%; /* Ajusta el ancho del carrusel para mostrar tres imágenes a la vez */
    height: 100%; /* Asegura que el carrusel use toda la altura del contenedor */
}

/* Estilos de cada imagen */
.carousel img {
    flex: 1 0 auto; /* Permite que las imágenes se adapten al contenedor */
    width: 50%; /*Es 50% porque la idea es que sean 2 imagenes por pasada */
    height: 100%; 
    object-fit: cover; /* Asegura que las imágenes cubran el espacio del contenedor sin distorsionarse */
    cursor: pointer;
    transition: transform 0.3s ease; 
}

.carousel img:hover {
    transform: scale(1.1); 
}

/* Ajustes para dispositivos móviles si es necesario */
@media (max-width: 768px) {
    .carousel-container {
        width: 90%; /* Ajusta el ancho del contenedor en pantallas más pequeñas */
        height: 600px; /* Ajusta la altura del contenedor para pantallas más pequeñas */
    }

    .carousel img {
        flex: 0 0 50%; /* Muestra dos imágenes a la vez en pantallas más pequeñas */
        height: auto; /* Ajusta la altura para pantallas más pequeñas si es necesario */
    }
}




/* Estilo para el bloque 'nosotros' */
.nosotros {
    margin: 15px 15px 20px 15px ;
    display: flex; /* El flexbox hace que los elementos se alineen, el align los alinea verticalmente y el justify los centra horizontalmente*/
    align-items: flex-start;
    justify-content: center;
    margin-bottom: 20px; 
    width: 95%;
    box-sizing: border-box;
    flex-wrap: wrap; 
    overflow: hidden; 
}

/* Estilo para las imágenes dentro de 'nosotros' */
.nosotros img {
    border-radius: 5%;
    box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.3); 
    height: auto; 
    max-width: 40%; 
    margin: 20px 30px 0 15px;
    display: block; 
}

/* Estilo para los contenedores de texto en 'nosotros' */
.nosotros .texto1 {
    flex: 1 1 35%; 
    display: flex; 
    flex-direction: column; 
    align-items: flex-start;
    justify-content: center;
    padding: 10px; 
    padding-left: 10%;
    box-sizing: border-box; 
    margin-right: 10%;
    font-weight:500;
    text-shadow: 0.5px 0.5px 1px rgb(39, 42, 40);

}

.nosotros h2 {
    text-align: center; 
    width: 100%; 
    margin-bottom: 10px; 
    font-family: 'Playwrite CU';
    color: #409e3f;
    line-height: 1.5; 
    font-size: 40px;
}


.nosotros p {
    margin: 0; /* Esto elimina el margen por defecto */
    font-family: 'Times New Roman', Times, serif;
    font-size: 25px;
    text-align: justify;
}


.NuestraHistoria {
    display: flex; 
    align-items: flex-start; 
    flex-direction: row-reverse; 
    margin-top: 70px; 
    width: 95%;
    box-sizing: border-box; 
    flex-wrap: wrap; 
    overflow: hidden; 
    margin-bottom: 10px;
}


.NuestraHistoria img {
    border-radius: 5%; 
    box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.3);
    height: auto; 
    max-width: 45%; 
    margin: 50px 20px 5px 0;
    display: block; /* Esta linea hace que las imágenes se comporten como bloques, me va a servir para casi todas las veces que coloque imagenes */
}


.NuestraHistoria .texto2 {
    flex: 1 1 50%; 
    display: flex; 
    flex-direction: column; 
    align-items: flex-start;
    justify-content: center;
    padding: 10px;
    box-sizing: border-box; 
    font-weight:500;
    text-shadow: 0.5px 0.5px 1px rgb(39, 42, 40);
}



.NuestraHistoria h2 {
    text-align:center; 
    width: 70%; 
    margin: 0; 
    margin-bottom: 10px; 
    font-family: 'Playwrite CU';
    color: #409e3f;
    line-height: 1.5; 
    font-size: 40px;
}


.NuestraHistoria p {
    padding: 10px;
    margin: 0; 
    font-family: 'Times New Roman', Times, serif;
    font-size: 25px;
    text-align: justify;
    width: 70%; 
}

.SubtituloNH {
    text-align: center; 
    color: rgba(83, 75, 75, 0.816); 
    width: 100%; 
    margin-top: 10px; 
    margin-bottom: 10px;
    display: block; 
    box-sizing: border-box; 
    padding-right: 220px;
    font-size: 25px;
}


/* Estilos Organigrama*/
.OrganigramaFM {
    text-align: center; /*Por mas que no haya texto, el text align ayuda a centrar, en este caso, la foto */
    margin-bottom: 40px;
}

.TextoOrganigrama{
    margin: 50px 0;
    padding-bottom: 50px;
    color: #409e3f;
    text-shadow: 0.5px 0.5px 1px rgb(39, 42, 40);
}

.OrganigramaFM img {
    display: block; 
    margin: 0 auto; 
    max-width: fit-content;
    height: auto; 
}


/*PIE DE PAGINA--------------------------------- */

.EnlacesRedes {
    position: relative;
    padding: 150px 50px 150px 50px; 
    text-align: center; 
    color: #000000; 
    bottom: 0; 
    left: 0;
    width: 100%; 
    font-family: 'Playwrite CU';
    font-weight: bold;
    z-index: 1000; 
    margin: 0; 
    margin-top: 30px;
    box-sizing: border-box;
    overflow: hidden; 
}

.EnlacesRedes::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 128, 0, 0.5), rgba(255, 255, 255, 0)); 
    filter: blur(8px);
    z-index: -1; 
}


.EnlacesRedes-Contenido {
    position: relative; 
    animation: crecerAchicar 15s infinite; 
}

.EnlacesRedes p {
    margin: 0 0 10px; 
    font-size: 16px; 
    text-align: center;
    font-size: larger;
    font-weight:bolder
}

.EnlacesRedes .Instagram, .EnlacesRedes .Facebook {
    text-decoration: none; 
    margin: 0 10px; 
    display: inline-block; 
    font-size: large;
}

.EnlacesRedes .Facebook {
    color: #3e5da5;
}

.EnlacesRedes .Instagram {
    color: #9949be; 
}

.EnlacesRedes a {
    color: #328d2f; 
    text-decoration: none; 
    margin: 0 10px; 
    display: inline-block; 
    font-size: large;
    text-shadow: 0.5px 1px 0.5px rgb(39, 42, 40);
}

.EnlacesRedes a:hover {
    text-decoration: underline; 
    text-decoration-color: #43434b; 
}

@keyframes crecerAchicar {
    0% {
        transform: scale(1.2); 
    }
    50% {
        transform: scale(1.08); 
    }
    100% {
        transform: scale(1.2); 
    }
}



/* Estilos de la pagina DONACIONES---------------*/


.AnimacionScrollDonaciones {

    top: 0;
    left: 0;
    width: 100%;
    background-color: #f5f5f5; 
    transition: opacity 2s ease; /* Transición suave para la opacidad en cuanto al cambio */
    z-index: 1000; 
}

.FotoFondoD {
    position: relative;
    width: 100%;
    height: 350px;
    overflow: hidden; 
    background-image: url('draKarina.jpg'); 
    background-size: cover; 
    background-repeat: no-repeat;
    background-position: center; 
    background-attachment: fixed;
    border-radius: 3%;
    margin: auto;
}

.OpacoFotoKarinaD {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1; 
}

.CuerpoDonaciones {
    padding: 30px;
}

.CuerpoDonaciones p {
    margin-bottom: 20px;
    line-height: 1.6;
    width: 60%;
}

.TextoD1 {
    margin-top: 40px;
    padding-left: 100px;
    font-family: 'Playwrite CU';
    font-size: xx-large;
    color: #328d2f;
    font-weight: bolder;
    text-align:right;
    text-shadow: 1px 1px 0px rgb(39, 42, 40);
    text-align: center;
}

.TextoD2 {
    margin-top: 60px;
    margin-right: 10px;
    font-size: 30px;
    font-weight: bold;
    text-shadow: 0.5px 0.5px 0.5px rgb(39, 42, 40);
    text-align:start;
}

.TextoD3 {
    font-size: 25px;
    font-weight: 900;
    margin-top: 50px;
    margin-bottom: 0;
    margin-right: 30px;
    text-shadow: 0.3px 0.3px 0.3px rgb(39, 42, 40);
}

.ContenedorFotoJuguetes {
    filter: blur(1.1px);
    box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.3);
    width: 44%; /* El ancho se adapta al contenedor padre */
    height: 604px; /* Altura fija adaptada a la foto*/
    max-height: fit-content;
    border-radius: 10%; /* Bordes redondeados */
    margin-left: 10px;
    margin-right: 1px;
    margin-top: -150px;
    margin-bottom: 30px;
    border: 1px solid black;
    overflow: hidden; /* Asegura que el contenido recortado no sobresalga */
    display: flex;
    justify-content: center;
    align-items: center;
}

.ContenedorFotoJuguetes img {
    width: 100%; /* Se ajusta al ancho del contenedor */
    height: 100%; /* Se ajusta al alto del contenedor */
    object-fit: contain; /* La imagen entra completamente en el cuadro */
    border-radius: 10%; /* Respeta el borde redondeado */
}

.TextoD3, .TextoD5 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

/* Tarjeta de donaciones */
.Donaciones {
    display: flex;
    justify-content: center; 
    align-items: center; 
    flex-direction: column; 
    margin: 50px 0; 
}

.MercadoPago {
    margin: auto;
    margin-top: 30px;
    text-align: center; 
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px; 
    background-color: #f9f9f9d1; 
    max-width: 500px; 
    width: 100%; 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
}

.SubtituloMP {
    font-size: 27px;
    color: #2c6b2f; 
    margin-bottom: 20px;
}

.TextoMP {
    margin: auto;
    font-size: 20px;
    color: #333; 
    margin-bottom: 20px;
    font-weight: bold;

}

.LinkMP {
    margin-top: 10px;
    display: inline-block;
    padding: 10px 20px;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    background-color: #28a745;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
}

.LinkMP:hover {
    background-color: #218838;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); 
    transform: translateY(-4px); 
}



.TextoD4 {
    position: relative;
    margin-top: 50px;
    font-family: 'Playwrite CU';
    font-size: xx-large;
    color: #328d2f;
    font-weight: bolder;
    text-align: left;
    padding-left: 50px;
    text-shadow: 1px 1px 0px rgb(39, 42, 40);
}

.TextoD5 {
    font-size: 20px;
    font-weight: 900;
    margin-top: 50px;
    margin-bottom: 0;
    text-shadow: 0.3px 0.3px 0.3px rgb(39, 42, 40);
    display: flex; 
}

.ImagenesDonaciones {
    margin: 20px;
    width: 40%;
    height: 1000px;
    overflow: hidden; 
    display: flex; 
    flex-direction: column;
    
}

.ImagenesDonaciones .imagenD5-1,
.ImagenesDonaciones .imagenD5-2,
.ImagenesDonaciones .imagenD5-3 {
    flex: 1; 
    width: 100%; 
    height: 33.33%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    padding: 0px 15px 15px 15px;
}

.ImagenesDonaciones img {
    width: 100%; 
    height: 100%; 
    object-fit: cover;
}

.ImagenesDonaciones .imagenD5-3 {
    margin-top: 4px;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    height: 33.33%; 
    overflow: hidden; 
}

.ImagenesDonaciones .imagenD5-3 img {
    width: 100%; 
    height: auto; 
    object-fit: cover; 
    object-position: center top; 
    transform: translateY(15%); /* Ajusta la imagen hacia abajo, tuve problemas debido al tamaño de la imagen */
}



/* Estilos de la pagina CONTACTO ---------*/

.FotoFondoC {
    position: relative;
    width: 100%;
    height: 350px; 
    overflow: hidden;
    background-image: url('Charla_uni2.jpg'); 
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center; 
    background-attachment: fixed;
    border-radius: 3%;
    margin: auto;
}

.OpacoFotoKarinaC {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); 
    z-index: 1; 
}


/* Contenedor principal para el texto y el mapa */
.contenedorMapayTexto {
    display: flex;
    justify-content: space-between; 
    align-items: flex-start; 
    max-width: 1200px;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    margin: 0 auto; 
}

/* Estilo para el contenedor del texto */
.texto1C {
    flex: 0 1 50%; 
    margin-right: 20px; 
    font-weight:500;
    text-shadow: 0.5px 0.5px 1px rgb(39, 42, 40);
    font-size: larger;
}

.texto1C h2 {
    margin-top: 40px;
    padding-right: 170px;
    font-family: 'Playwrite CU';
    font-size: xx-large;
    color: #328d2f;
    font-weight: bolder;
    text-align:right;
    text-shadow: 1px 1px 0px rgb(39, 42, 40);
}


/*Si necesitas modificar las letras o numeros de los horarios, vas a tener que retocar esto...*/
.Subtexto1C {
    display: flex;
    align-items: center; 
    margin-left: 30px;
}

.Subtexto2C {
    margin-left: 150px; 
}

.Subtexto3C {
    display: flex;
    align-items: center; 
    margin-left: 30px;
}

.Subtexto4C {
    margin-left: 209px;
}


/* Contenedor del mapa */
.map-container {
    position: relative;
    padding-bottom: 56.25%; /* Proporción 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 8px;
    flex: 1; 
    max-width: 100%;
    border: 3px solid rgba(0, 0, 0, 0.225);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); 
}

/* Estilo para el iframe del mapa */
.map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*Formulario de contacto por mail -------*/

.contact-form-container {
    background: rgba(255, 255, 255, 0.9); 
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 500px;
    margin: 40px auto; 
    padding-left: 50px; 
    margin-bottom: 50px;
}


.contact-form h2 {
    margin-top: 0;
    color: #328d2f;
    font-family:'Playwrite CU';
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    color: #555;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}

.form-group textarea {
    resize: vertical; 
}

button {
    background-color: #328d2f; 
    color: #fff;
    border: none;
    padding: 10px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

button:hover {
    background-color: #267a1f; 
}

/*Estilos pagina EVENTOS Y NOTICIAS---------------- */

.FotoFondoE {
    position: relative;
    width: 100%;
    height: 350px; 
    overflow: hidden; 
    background-image: url('charla_undav.jpg'); 
    background-size: cover; 
    background-repeat: no-repeat;
    background-position: center; 
    background-attachment: fixed;
    border-radius: 3%;
    margin: auto;
}

.OpacoFotoKarinaE {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); 
    z-index: 1; /* El 1 es para que este encima de la imagen */
}


.ContenedorSubtitulo1EN {
    text-align: center;
    position: relative;
    overflow: hidden;
    padding: 10px;
    box-sizing: border-box;
    min-height: 100px;
    margin: 70px 0; 
}

.Subtitulo1EN {
    font-family: 'Playwrite CU';
    font-weight: bolder;
    text-shadow: 2px 2px 5px rgb(39, 42, 40);
    color: #328d2f;
    font-size: 70px;
    margin: 0;
    display: inline-block;
}



.CampañaActiva {
    display: flex;
    flex-direction: row;
    align-items: flex-start; 
    gap: 20px; 
    padding: 20px; 
}

.TextoCampañaActiva {
    max-width: 50%; 
}

.Texto1E {
    font-size: 50px; 
    margin:0;
    text-align: center;
    font-weight:bolder;
    text-shadow: 2px 2px 3px rgb(39, 42, 40);
    color: #328d2f;
    border: 2px solid #328d2f;
    padding: 0;
    border-radius: 50px;

}

.Texto2E {
    font-size:x-large; 
    margin: 10px 50px;
    text-align: center;
    line-height: 50px;
    font-weight:500;
    text-shadow: 0.5px 0.5px 1px rgb(39, 42, 40);
    border: 2px solid #328d2f; 
    padding: 20px;
    border-radius: 20px;
}



.CarruselCampañaActiva {
    position: relative;
    width: 100%;
    max-width: 600px; 
    overflow: hidden;
    margin-top: 130px;
    border-radius: 10px;
    height: 400px; 
    box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.2);
}

.ImagenesCampañaActiva {
    position: relative;
    width: 100%;
    height: 100%;
}

.ImagenCampañaActiva {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ajusta la imagen para cubrir el contenedor sin deformarse */
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    transition: opacity 1.5s ease-in-out; /* Efecto de desvanecimiento */
}

.ImagenCampañaActiva.active {
    opacity: 1; /* Solo la imagen activa será visible */
}

.ContenedorFotoCampaña{
    position: relative;
    width: 100%;
    max-width: 720px; 
    overflow: hidden;
    margin: 10% auto; /* Centra el contenedor en la página */
    border-radius: 10px;
    height: 800px;
    box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.2);
}

.ContenedorFotoCampañaYTexto {
    text-align: center; /* Centra el texto debajo de la imagen */
    max-width: 720px; /* Ancho máximo para el contenedor */
    max-height: 800px;
    margin: 10% auto; /* Centra el contenedor en la página */
}

/* Estilo para la imagen */
.ContenedorFotoCampañaYTexto img {
    width: 100%; /* Hace que la imagen ocupe todo el ancho del contenedor */
    height: auto; /* Mantiene la relación de aspecto de la imagen */
    display: block; /* Elimina el espacio debajo de la imagen */
    margin-bottom: 15px; /* Agrega espacio entre la imagen y el texto */
    border-radius: 10px;
    box-shadow: 3px 3px 15px rgba(0, 0, 0, 0.2);
}

/* Estilo para el párrafo */
.ContenedorFotoCampañaYTexto p {
    font-size: 1.2em; /* Tamaño del texto */
    line-height: 1.5; /* Espaciado entre líneas para mayor legibilidad */
    margin: 0; /* Elimina márgenes adicionales */
    font-family: 'Playwrite CU';
    font-weight: bold;
}

.ItemFC{
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ajusta la imagen para cubrir el contenedor sin deformarse */
    position: absolute;
    top: 0;
    left: 0;
}


.ContenedorSubtitulo2EN {
    text-align: center;
    position: relative;
    overflow: hidden;
    padding: 10px;
    box-sizing: border-box;
    min-height: 100px; 
    margin: 70px 0; 
}

.Subtitulo2EN {
    font-family: 'Playwrite CU';
    font-weight: bolder;
    text-shadow: 2px 2px 5px rgb(39, 42, 40);
    color: #328d2f;
    font-size: 70px;
    margin: 0;
    display: inline-block; /* Importante para que scale funcione correctamente */
}


/* Estilo para el contenedor de fotos */
.ContenedorFotosEN {
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    align-items: center; 
    width: 100%; 
    height: 200vh; /* Ocupa toda la altura de la ventana */
    overflow: hidden; /* Oculta cualquier contenido que se desborde */
    box-sizing: border-box; /* Incluye padding y borde en el ancho total */
    margin: 0;
    padding: 0; /* Asegura que no haya padding adicional */
}

/* Estilo para cada contenedor de imagen */
.ItemEN {
    flex: 1 1 calc(50% - 20px); /* Ajusta el ancho de cada contenedor para mostrar 3 por fila con un margen de 10px en cada lado */
    margin: 10px; /* Espacio entre las imágenes */
    border: 2px solid #ddd; /* Borde alrededor de cada imagen */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); 
    display: flex; 
    justify-content: center;
    align-items: center; 
    box-sizing: border-box; /* Incluye padding y borde en el tamaño total */
}

/* Estilo para las imágenes dentro del contenedor */
.ItemEN img {
    max-width: 100%; /* Asegura que la imagen no exceda el ancho del contenedor */
    max-height: 100%; /* Asegura que la imagen no exceda la altura del contenedor */
    display: block; /* Asegura que la imagen se comporte como un bloque */
    object-fit: cover; /* Mantiene la relación de aspecto de la imagen */
}


.ContenedorSubtitulo3EN {
    text-align: center;
    position: relative;
    overflow: hidden;
    padding: 10px;
    box-sizing: border-box;
    min-height: 100px; 
    margin: 70px 0; 
}

.Subtitulo3EN {
    font-family: 'Playwrite CU';
    font-weight: bolder;
    text-shadow: 2px 2px 5px rgb(39, 42, 40);
    color: #328d2f;
    font-size: 70px;
    margin: 0;
    display: inline-block; 
}


.ContenedorVideos {
    display: flex; /* Usar flexbox para la distribución de los videos */
    flex-wrap: wrap; /* Permitir que los videos se envuelvan en filas */
    gap: 20px; /* Espacio entre los videos */
    justify-content: center; /* Centrar los videos horizontalmente */
    margin: 20px 0; /* Margen superior e inferior */
}

.VideoE {
    flex: 1 1 calc(33.33% - 20px); 
    max-width: calc(33.33% - 20px); /* Ajusta el ancho */
    max-height: 300px; /* Ajusta la altura máxima */
    border-radius: 8px; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    overflow: hidden; 
    position: relative; 
    box-sizing: border-box; 
    padding: 0; 
}

.VideoE video {
    width: 100%; /* El video ocupará el 100% del ancho del contenedor */
    height: 100%; /* El video ocupará el 100% de la altura del contenedor */
    object-fit: contain; /* Ajusta el video para que se ajuste dentro del contenedor sin recortarse */
}

/*Estilo Pagina NUTRICION Y RECETAS SALUDABLES------*/


.FotoFondoN {
    position: relative;
    width: 100%;
    height: 350px; 
    overflow: hidden; 
    background-image: url('Congreso_arg_nutr.jpg'); 
    background-size: cover; 
    background-repeat: no-repeat;
    background-position: center; 
    background-attachment: fixed;
    border-radius: 3%;
    margin: auto;
}

.OpacoFotoKarinaN {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); 
    z-index: 1; /* El 1 es para que este encima de la imagen */
}


.ContenedorSubtitulo1N {
    text-align: center;
    position: relative;
    overflow: hidden;
    padding: 10px;
    box-sizing: border-box;
    min-height: 100px; 
    margin: 70px 0; 
}

.Subtitulo1N {
    font-family: 'Playwrite CU';
    font-weight: bolder;
    text-shadow: 2px 2px 5px rgb(26, 27, 26);
    color: #328d2f;
    font-size: 35px;
    margin: 0;
    display: inline-block; /* Importante para que scale funcione correctamente */
}

/*Enlazes a youtube Radio  */

.EnlacesYoutubeRadio {
    display: flex;
    flex-wrap: wrap;
    gap: 30px; /* Espacio entre los enlaces */
    justify-content: center; /* Centra los enlaces horizontalmente */
    padding: 20px; /* Espacio alrededor del contenedor */
    box-sizing: border-box; /* Incluye padding en el ancho total */
    border: 1px solid #902a2a;
    border-radius: 30px;
    margin: 0 200px; /*OJO, si tenes que agregar mas enlaces, vas a tener que modificar esto!!! */
}

.EnlacesYoutubeRadio a {
    display: block;
    background-color: #f1f1f1;
    color: #333;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, color 0.3s ease;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.EnlacesYoutubeRadio a:hover {
    background-color: #328d2f;
    color: #fff;
}

.Texto1N {
    text-align: center;
    margin-left: 5%;
    padding: 0px 5px; 
    font-size: large;
    font-weight: bold;
    height: fit-content;
    width: 20%; 
    border-radius: 8px;
    border-bottom: 1px solid #000; 
    box-sizing: border-box; /* Asegura que el padding no afecte el ancho total del elemento */
    background-clip: padding-box; /* Evita que el fondo se extienda más allá del padding */
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.Texto1N a{
    color: #cfd525; 
    text-decoration: underline; 
    font-weight: bold; 
}

.Texto1N a:hover {
    color: #fbff00; 
}

.Texto2N{
    margin-left: 42%;
    margin-top: 50px;
    font-size: xx-large;
    color: rgb(161, 28, 28);
    font-weight: bolder;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    text-shadow: 0.7px 0.7px 3px rgb(26, 27, 26);
}

.SeccionVideosNutricion { /*Se llama "Videos" porque antes habia videos, pero se desestima cambio de nombre ya que ahora son links a los videos*/
    padding: 30px;
    padding-bottom: 0px;
    background-color: transparent; /* Fondo transparente */
}

/* Contenedor del subtítulo */
.ContenedorSubtitulo2N {
    text-align: center;
    position: relative;
    overflow: hidden;
    padding: 10px;
    padding-bottom: 20px;
    box-sizing: border-box;
    min-height: 100px;
    margin: 30px 0;
}

.Subtitulo2N {
    font-family: 'Playwrite CU';
    font-weight: bolder;
    text-shadow: 2px 2px 5px rgb(26, 27, 26);
    color: #328d2f;
    font-size: 50px;
    margin: 70px 30px 0 30px;
    display: inline-block;
}

/* Estilos para el contenedor de enlaces */
.SeccionVideosNutricion ul {
    list-style-type: none; /* Elimina el estilo de lista */
    padding: 0;
    display: flex; /* Usa flexbox para distribución */
    flex-wrap: wrap; /* Permite que los elementos se ajusten a múltiples filas */
    justify-content: space-between; /* Espacio entre columnas */
}

.SeccionVideosNutricion li {
    flex: 0 1 calc(33.33% - 20px); /* Tres columnas con espacio entre ellas */
    margin: 25px 0; /* Espaciado entre los elementos de la lista */
    display: flex; /* Permite centrar contenido en el li */
    justify-content: center; /* Centra horizontalmente */
}

/* Estilo para los enlaces */
.SeccionVideosNutricion a {
    display: block; /* Permite aplicar padding y centrar */
    background-color: #e0f7e0; /* Color de fondo del contenedor */
    color: #328d2f; /* Color del enlace */
    text-decoration: none; /* Sin subrayado */
    font-weight: bold; /* Enlace en negrita */
    font-size: 18px; 
    padding: 15px; /* Espacio que esta al rededor del texto*/
    border-radius: 8px;
    box-shadow: 3px 5px 10px rgba(0, 0, 0, 0.1); 
    transition: background-color 0.3s ease, transform 0.3s ease; /* Transiciones suaves */
}

/* Efecto hover para enlaces */
.SeccionVideosNutricion a:hover {
    background-color: #c8e6c9; /* Color del fondo al pasar el cursor */
    color: #31ea20; /* Cambia el color al pasar el cursor */
    transform: scale(1.05); /* Aumenta el tamaño ligeramente */
}

/* Estilos específicos para el enlace del canal de YouTube */
.SeccionVideosNutricion .youtube-link {
    flex-basis: 100%; /* Ocupar el ancho completo */
    text-align: center; /* Centrar texto */
    margin-top: 30px; /* Separar del resto de los enlaces */
}

/* Limitar el ancho del enlace de YouTube */
.SeccionVideosNutricion .youtube-link a {
    width: 80%; /* Ancho del enlace */
    max-width: 600px; /* Máximo ancho del enlace */
    margin: 0 auto; /* Centra el enlace */
}

/* Opcional: mejorar la visualización en pantallas más pequeñas */
@media (max-width: 768px) {
    .VideoN {
        flex: 1 1 calc(50% - 20px); /* Ajusta el ancho del video para que haya dos por fila en pantallas pequeñas */
        max-width: calc(50% - 20px);
    }
}

@media (max-width: 480px) {
    .VideoN {
        flex: 1 1 100%;
        max-width: 100%; 
    }
}

.ContenedorSubtitulo3N {
    text-align: center;
    position: relative;
    overflow: hidden;
    padding: 10px;
    box-sizing: border-box;
    min-height: 100px; 
    margin: 30px 0; 
}

.Subtitulo3N {
    font-family: 'Playwrite CU';
    font-weight: bolder;
    text-shadow: 2px 2px 5px rgb(26, 27, 26);
    color: #328d2f;
    font-size: 50px;
    margin: 70px 30px 0 30px;
    display: inline-block; /* Importante para que scale funcione correctamente */
}


.Texto3N{
    font-weight: bold;
    text-align: center;
    font-size:xx-large;
    margin: 1% 20% 5% 20%;
    text-shadow: 0.7px 0.7px 2px rgb(26, 27, 26);
}

.Texto4N{
    text-align: center;
    font-size: 25px;
    margin-bottom: 50px;
    color: #376733;
    text-shadow: 0.7px 0.7px 2px rgb(26, 27, 26);
}

.ImagenesCursosActivos {
    display: flex;
    flex-wrap: wrap; /* Permite que las imágenes se envuelvan en una nueva línea si es necesario */
    gap: 10px; /* Espacio entre las imágenes */
    justify-content: center; /* Centra las imágenes horizontalmente en el contenedor */
    margin-top: 20px; 
}

.ImagenesCursosActivos img {
    max-width: 50%; /* Asegura que las imágenes no se desborden del contenedor */
    height: auto; /* Mantiene la proporción de las imágenes */
    border: 2px solid #ccc; 
    border-radius: 8px; 
}

/* Estilos Links en el texto------------*/

.LinkDonaciones {
    color: #328d2f; /* Color del enlace (ajusta según sea necesario) */
    text-decoration: underline; /* Subraya el enlace */
    font-weight: bold; /* Hace el enlace en negrita (opcional) */
}

.LinkDonaciones:hover {
    color: #31ea20; /* Cambia el color al pasar el cursor (opcional) */
}

.LinkFacebook {
    color: #1a33a2; /* Color del enlace (ajusta según sea necesario) */
    text-decoration: underline; /* Subraya el enlace */
    font-weight: bold; /* Hace el enlace en negrita (opcional) */
}

.LinkFacebook:hover {
    color: #1a87e6; /* Cambia el color al pasar el cursor (opcional) */
}


.LinkInstagram {
    color: #8916c3; /* Color del enlace (ajusta según sea necesario) */
    text-decoration: underline; /* Subraya el enlace */
    font-weight: bold; /* Hace el enlace en negrita (opcional) */
}

.LinkInstagram:hover {
    color: #ff00fb; /* Cambia el color al pasar el cursor (opcional) */
}


.Copyright {
    position: absolute;
    bottom: 0;
    left: 0;
    animation: none; /* Desactiva la animación */
    padding: 10px; 
    font-size:small; 
    margin-left: 60px;
    text-align: left;
}

.TextoCopyright{
    font-family: 'Times New Roman', Times, serif;
}

/* Estilos generales para móviles y tabletas */

@media (max-width: 768px) {
    
    body {
        font-size: small; /* Aumenta el tamaño del texto en móviles */
        width: 400%;
    }
    
    .FotoFondoD {
        background-attachment: scroll; /* Desactiva el efecto de fondo fijo en móviles */
        background-size: cover; /* Asegura que la imagen cubra todo el área */
        background-position: center center; /* Centra la imagen en el contenedor */
        height: 700px;
        
    }
    .FotoFondoC {
        background-attachment: scroll; /* Desactiva el efecto de fondo fijo en móviles */
        background-size: cover; /* Asegura que la imagen cubra todo el área */
        background-position: center center; /* Centra la imagen en el contenedor */
        height: 700px;
    }
    .FotoFondoE {
        background-attachment: scroll;
        background-size: cover;
        background-position: center center; 
        height: 700px;
    }
    .FotoFondoN {
        background-attachment: scroll; 
        background-size: cover; 
        background-position: center center; 
        height: 700px;
    }
    .ContenedorFotosEN {
        display: flex; /* Usa flexbox para alinear los elementos */
        flex-direction: column; /* Alinea los elementos verticalmente */
        align-items: center; /* Centra los elementos horizontalmente */
        width: 100%; /* Usa el ancho completo disponible */
        height: auto; /* Mantiene la proporción de la imagen */
        padding: 10px; /* Ajusta el padding */
        box-sizing: border-box; /* Incluye el padding en el ancho total */
        flex-wrap: wrap; /* Permite que los elementos se ajusten en múltiples líneas si es necesario */
    }
    
    .ItemEN {
        flex: 1 1 auto; /* Permite que los elementos se ajusten según el contenido */
        margin: 10px 0; /* Espacio vertical entre las imágenes */
        max-width: 100%; /* Asegura que el contenedor no se desborde */
        box-sizing: border-box; /* Incluye el padding y el borde en el ancho total */
    }
    
    .ItemEN img {
        width: 100%; /* Usa el ancho completo del contenedor */
        height: 100%; /* Mantiene la proporción de la imagen */
        object-fit: cover; /* Asegura que las imágenes cubran el espacio sin distorsionarse */
    }
    
    .EnlacesRedes {
        animation: none; /* Elimina la animación en pantallas pequeñas */
        padding: 30px; /* Ajusta el padding para pantallas móviles si es necesario */
        width: 100%;
        height: 500px;
    }
    .EnlacesRedes-Contenido {
    font-size: medium;
    padding-top: 150px;
    }

    .container {
        width: 100%;
        padding: 0.5rem; /* Aumenta el padding en móviles */
    }

    .header, .footer {
        padding: 0.5rem 0; /* Aumenta el padding en móviles */
    }

    .main {
        padding: 0.5rem; /* Aumenta el padding en móviles */
    }
    
    
    
    .ContenedorVideos {
        display: flex;
        flex-direction: column; /* Alinea los videos verticalmente */
        gap: 10px; /* Reduce el espacio entre videos */
        justify-content: center; /* Centra los videos horizontalmente */
        margin: 0; /* Ajusta el margen */
        margin-left: 20%;
        padding: 0; /* Elimina padding si es necesario */
        width: 500px;
        height: 450px;
        
    }

    .VideoN {
        flex: 1 1 auto; /* Permite que el video se ajuste automáticamente */
        width: 100%; /* Usa el ancho completo del contenedor */
        max-width: 100%; /* Asegura que el video no se desborde */
        max-height: 300px; /* Ajusta la altura máxima del video */
        margin: 0; /* Elimina margen */
        box-shadow: none; /* Elimina sombra para pantallas pequeñas */
        padding: 0; /* Elimina padding si es necesario */
        box-sizing: border-box; /* Incluye padding y borde en el ancho total */
        
    }

    .DescripcionVideo {
        font-size: 12px; /* Ajusta el tamaño del texto */
        padding: 5px; /* Ajusta el padding si es necesario */
    }
    
}   



/*font-family: 'Playwrite CU';*/