/* Header */
header {
    display: flex;
    height: 40px;
    justify-content: space-between;
    align-items: center;
    padding: 2rem;
}
.logo {
    display: flex;
    align-items: center;
    font-size: 10px;
    text-decoration: none;
}
.logo img {
    height: 4rem;
    margin-right: 1rem;
}
.logo h1 {
    display: none;
}
.nav-list {
    display: flex;
    list-style-type: none;
    gap: 1rem;
    flex-direction: column;
    align-items: end;
}
.nav-list li a {
    text-decoration: none;
    color: #333;
    font-size: 20px;
    font-family: europa, sans-serif;
    text-decoration:underline;
}
.nav-list li {
    margin-bottom: 20px; /* Add margin-bottom to increase separation between li elements */
}
.nav {
    opacity: 0;
    visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: end;
    position: absolute;
    gap: 1rem;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 3rem;
    background-color: #ffff;
    box-shadow: 0 0 0 100vmax rgba(0,0,0, .5);
    transition: all .5s;
}
.nav.visible {

    opacity: 1;
    visibility: visible;
}
.open-button, .close-button {
     border: none;
     font-size: 25px;
     background-color: transparent;
     cursor: pointer;
}
.close-button {
    margin-bottom: 1.5rem;
}
.hide {
    display: none;
}
/* Body */
body {
    margin: 0;
}
/* Inscripción destacado */
.inscripcion {
    background-image: url(img/20240310_085214.jpg);
    background-position: center;
    height: 50vh;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.inscripcion h4 {
    font-family: montserrat, sans-serif; 
    font-weight: 600;
    text-align: center;
    padding-bottom: 0.5rem;
    color: #fff;
    font-size: 20px;
    text-shadow: #000 2px 2px 5px;
}
.large_button {
    background-color: #E8DAC8;
    color: #000;
    border-radius: 10px;
    border-color: #000;
    border-style: solid;
    border-width: 1px;
    display: block;
    font-family: montserrat, sans-serif; 
    text-align: center;
    margin-left: 40px;
    margin-right: 40px;
    height: 40px;
    width: 250px;
    text-decoration: none;
    font-weight: 400;
    line-height: 2.5; 
    box-shadow: 2px 2px 5px rgba(0,0,0,.5);
    transition: all 0.3s ease-in-out;
    font-size: 15px;
}
.large_button:hover{
    transform: scale(1.1,1.1);
    color: #ffff;
    background-color: #000;
}
/*Instagram destacado*/
.instagram {
    display: flex;
    flex-direction: column; /* apila título y iframe uno debajo del otro */
    justify-content: center;
    align-items: center;
    font-family: montserrat, sans-serif;
    font-weight: 600;
    gap: 0.5rem;
    padding: 20px 0;
    text-align: center;
    font-size: 15px;
}
.instagram-container {
    width: 100%;
    max-width: 500px;
    border: none;
    overflow: hidden;
}

/* Asegura que el iframe sea responsive y ocupe el ancho del contenedor */
.instagram iframe,
.instagram-container iframe {
    width: 95%;
    height: 500px; /* ajustar según necesites */
    border: 0;
    overflow: hidden;
}

/* Opcional: aumentar la altura en pantallas grandes */
@media (min-width: 700px) {
    .instagram iframe,
    .instagram-container iframe {
        height: 500px;
    }
}
/* Lema */
.lema {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 50vh - 40px - 200px);
}
.lema h3 {
    font-family: cardo, serif; 
    font-style: italic;
    font-weight: 400;
    font-size: 21px;
    text-align: center;
}
/* Footer */
footer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 150px;
    background-color: #707070;
    text-decoration: none;
}
footer h3 {
    color: #fff;
    font-size: 15px;
    font-family: merriweather, serif;
    font-weight: 700;
}
.direccion {
    display: flex;
    flex-direction: column;
    padding-left: 10px;
    padding-right: 40px;
}
.direccion p {
    color: #fff;
    font-family: montserrat, sans-serif;
    font-weight: 400;
    font-size: 12px;
    margin-top: -5px;
}
.redes {
    padding-right: 30px;
}
footer a {
    text-decoration: none;
    font-size: 22px;
    color: #000;
    width: 2rem;
    height: 2rem;
    text-align: center;
    background-color: #ffff;
    border-color: black;
    border-radius: 50%;
    box-shadow: 2px 2px 5px rgba(0,0,0,.5);
    transition: all 0.3s ease-in-out;
}
footer a:hover {
    transform: scale(1.2,1.2);
    color: #ffff;
    background-color: black
}
.redes a {
    line-height: 1.4;
}
.consultas a {
    line-height: 1.4;
}
.consultas {
    padding-right: 10px;
}
/* Pagina Nosotros */
.historia {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem 1rem 1rem 1rem;
}

/* Titulo en general */
.title{
    font-family: montserrat, sans-serif; 
    font-weight: 600;
    text-align: center;
    font-size: 24px;
}
.historia-texto {
    font-family: montserrat, sans-serif; 
    font-weight: 400;
    text-align: justify;
    margin-top: 1rem;
    line-height: 1.6;
}
.principios {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem 1rem 2rem 1rem;
}
.principios-texto {
    font-family: montserrat, sans-serif; 
    font-weight: 400;
    text-align: justify;
    margin-top: 1rem;
    line-height: 1.6;
}
.principios-list{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    padding: 0 1rem;
    margin-top: 1rem;
    line-height: 1.6;
}

/* Reset native list and use a counter for custom centered numbers */
.principios-list ul{
    list-style: none;
    counter-reset: principio;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 720px;
}

/* Each item is centered, number sits above the text in a circle */
.principios-list li{
    counter-increment: principio;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
    background: transparent;
}

/* Number bubble */
.principios-list li::before{
    content: counter(principio);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #E8DAC8;
    color: #000;
    font-weight: 700;
    margin-bottom: 0.5rem;
    box-shadow: 2px 2px 6px rgba(0,0,0,.12);
}

/* Hover/focus effect */
.principios-list li:hover,
.principios-list li:focus-within{
    transform: translateY(-6px);
    box-shadow: 0 8px 20px rgba(0,0,0,.12);
    background: rgba(232,218,200,0.08);
}

/* Ensure paragraph/text inside items is centered and well spaced */
.principios-list li > * {
    margin: 0;
    line-height: 1.6;
    text-align: center;
}

/* Optional: on wider screens keep visual balance but allow horizontal layout */
@media (min-width: 1000px) {
    .principios-list ul { max-width: 1000px; }
    .principios-list li {
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 1rem;
        padding: 1rem;
    }
    .principios-list li::before{
        margin-bottom: 0;
        margin-right: 0.75rem;
    }
}
/* Propuesta */
    .propuestas {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 2rem 1rem 1rem 1rem;
    }
    .propuestas-list{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 2rem 1rem;
    }

    /* Reset native list (sin contador numérico) */
    .propuestas-list ul{
        list-style: none;
        margin: 0;
        padding: 0;
        width: 100%;
        max-width: 720px;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    /* Cada item centrado; ahora usa un <i> de Font Awesome dentro de cada li */
    .propuestas-list li{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0.75rem 1rem;
        border-radius: 8px;
        transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
        background: transparent;
        font-family: montserrat, sans-serif;
        font-weight: 400;
        box-sizing: border-box;
    }

    /* Si había pseudo-elementos anteriores, desactivar para evitar emojis */
    .propuestas-list li::before{
        content: none;
    }

    /* Estilo para el <i> de Font Awesome (coloca un <i class="fa ..."> como primer hijo del li) */
    .propuestas-list li i,
    .propuestas-list li .fa,
    .propuestas-list li .fas,
    .propuestas-list li .far,
    .propuestas-list li .fab {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        min-width: 36px; /* Asegura ancho mínimo */
        flex-shrink: 0;  /* Evita que se aplaste */
        border-radius: 50%;
        background: #E8DAC8;
        color: #000;
        font-weight: 700; /* para FA 6: use 900 para solid si corresponde */
        margin-bottom: 0.5rem;
        box-shadow: 2px 2px 6px rgba(0,0,0,.12);
        font-size: 18px;
        line-height: 1;
        padding: 0;
        box-sizing: border-box;
        /* Asegura que cualquier pseudo-elemento o SVG quede centrado */
        text-align: center;
    }

    /* Alinea correctamente iconos generados por pseudo-elementos de FontAwesome */
    .propuestas-list li i::before,
    .propuestas-list li .fa::before,
    .propuestas-list li .fas::before,
    .propuestas-list li .far::before,
    .propuestas-list li .fab::before {
        display: inline-block;
        width: 100%;
        text-align: center;
        line-height: 36px; /* centra verticalmente dentro del círculo */
    }

    /* Ajuste si el icono es SVG o tiene padding natural */
    .propuestas-list li i svg {
        display: block;
        margin: 0 auto;
        width: 18px;
        height: 18px;
    }

    /* Hover/focus effect */
    .propuestas-list li:hover,
    .propuestas-list li:focus-within{
        transform: translateY(-6px);
        box-shadow: 0 8px 20px rgba(0,0,0,.12);
        background: rgba(232,218,200,0.06);
    }

    /* Asegura que el contenido interno esté centrado y con buen espaciado */
    .propuestas-list li > * {
        margin: 0;
        line-height: 1.6;
        text-align: center;
    }

    /* En pantallas anchas muestra layout horizontal manteniendo el icono a la izquierda */
    @media (min-width: 1000px) {
        .propuestas-list ul { max-width: 1000px; }
        .propuestas-list li {
            flex-direction: row;
            align-items: center;
            text-align: left;
            gap: 1rem;
            padding: 1rem;
        }
        .propuestas-list li i,
        .propuestas-list li .fa,
        .propuestas-list li .fas,
        .propuestas-list li .far,
        .propuestas-list li .fab {
            margin-bottom: 0;
            margin-right: 0.75rem;
        }
        /* Asegura centrado vertical cuando el layout es horizontal */
        .propuestas-list li i,
        .propuestas-list li .fa,
        .propuestas-list li svg {
            align-self: center;
        }
    }
/* Pagina Objetivos */
.objetivos-list{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem 1rem;
}
.objetivos-list ul{
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.objetivos-list li{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
    background: transparent;
    font-family: montserrat, sans-serif;
    font-weight: 400;
    box-sizing: border-box;
}
.objetivos-list li::before{
    content: none;
}
.objetivos-list li i,
.objetivos-list li .fa,
.objetivos-list li .fas,
.objetivos-list li .far,
.objetivos-list li .fab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px; /* Asegura ancho mínimo */
    flex-shrink: 0;  /* Evita que se aplaste */
    border-radius: 50%;
    background: #E8DAC8;
    color: #000;
    font-weight: 700; /* para FA 6: use 900 para solid si corresponde */
    margin-bottom: 0.5rem;
    box-shadow: 2px 2px 6px rgba(0,0,0,.12);
    font-size: 18px;
    line-height: 1;
    padding: 0;
    box-sizing: border-box;
    /* Asegura que cualquier pseudo-elemento o SVG quede centrado */
    text-align: center;
}
.objetivos-list li i::before,
.objetivos-list li .fa::before,
.objetivos-list li .fas::before,
.objetivos-list li .far::before,
.objetivos-list li .fab::before {
    display: inline-block;
    width: 100%;
    text-align: center;
    line-height: 36px; /* centra verticalmente dentro del círculo */
}
.objetivos-list li i svg {
    display: block;
    margin: 0 auto;
    width: 18px;
    height: 18px;
}
.objetivos-list li:hover,
.objetivos-list li:focus-within{
    transform: translateY(-6px);
    box-shadow: 0 8px 20px rgba(0,0,0,.12);
    background: rgba(232,218,200,0.06);
}
.objetivos-list li > * {
    margin: 0;
    line-height: 1.6;
    text-align: center;
}
/* Subtitulo general */
.subtitle {
    font-family: europa, sans-serif;
    font-weight: 600;
    text-align: center;
    font-size: 25px;
    margin-top: 2rem;
}
@media (min-width: 1000px) {
    .objetivos-list ul { max-width: 1000px; }
    .objetivos-list li {
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 1rem;
        padding: 1rem;
    }
    .objetivos-list li i,
    .objetivos-list li .fa,
    .objetivos-list li .fas,
    .objetivos-list li .far,
    .objetivos-list li .fab {
        margin-bottom: 0;
        margin-right: 0.75rem;
    }
    .objetivos-list li i,
    .objetivos-list li .fa,
    .objetivos-list li svg {
        align-self: center;
    }
}
/* Pagina contacto */
/* Botón estilo WhatsApp (basado en .large_button) */
.whatsapp-button {
    display: block;
    margin: 1rem auto !important; /* centra horizontalmente y deja un poco de espacio vertical */
    max-width: calc(100% - 80px);
    box-sizing: border-box;
    align-self: center; /* en caso de que el padre sea flex */
    text-align: center;
}
@media (min-width:700px) {
    .whatsapp-button {
        margin: 1rem auto !important; /* asegurar centrado también en pantallas anchas */
    }
}
.whatsapp-button {
    display: block;
    width: 250px;
    height: 40px;
    margin-left: 40px;
    margin-right: 40px;
    background-color: #E8DAC8;
    color: #000;
    border: 1px solid #000;
    border-radius: 10px;
    text-align: center;
    font-family: montserrat, sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 2;
    text-decoration: none;
    box-shadow: 2px 2px 5px rgba(0,0,0,.5);
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

/* Hover: pasa a verde tipo WhatsApp y texto blanco */
.whatsapp-button:hover {
    background-color: #25D366; /* WhatsApp green */
    color: #fff;
    transform: scale(1.1);
}

/* Ajustes en pantallas más anchas (consistente con .large_button) */
@media (min-width:700px) {
    .whatsapp-button {
        width: 400px;
        height: 50px;
        font-size: 18px;
        line-height: 2.8;
    }
}
/* Botón estilo Mail (basado en .large_button) */
.mail-button {
    display: block;
    margin: 1rem auto !important; /* centra horizontalmente y deja un poco de espacio vertical */
    max-width: calc(100% - 80px);
    box-sizing: border-box;
    align-self: center; /* en caso de que el padre sea flex */
    text-align: center;
}
@media (min-width:700px) {
    .mail-button {
        margin: 1rem auto !important; /* asegurar centrado también en pantallas anchas */
    }
}
.mail-button {
    display: block;
    width: 400px;
    height: 40px;
    margin-left: 40px;
    margin-right: 40px;
    background-color: #E8DAC8;
    color: #000;
    border: 1px solid #000;
    border-radius: 10px;
    text-align: center;
    font-family: montserrat, sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 2.5;
    text-decoration: none;
    box-shadow: 2px 2px 5px rgba(0,0,0,.5);
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}
.ubicacion-texto {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
}
.ubicacion-texto p {
    font-family: montserrat, sans-serif; 
    font-weight: 400;
    text-align: center;
    font-size: 15px;
    margin-top: 0.5rem;
    margin-left: 30px;
    margin-right: 30px;
    line-height: 1.6;
}

/* Hover: pasa a verde tipo WhatsApp y texto blanco */
.mail-button:hover {
    background-color: #000; /* WhatsApp green */
    color: #fff;
    transform: scale(1.1);
}
.map-container {
    display: flex;
    justify-content: center;
    align-items: center;
    
    margin-top: 2rem;
    margin-bottom: 2rem;
}
/* Ajustes en pantallas más anchas (consistente con .large_button) */
@media (min-width:700px) {
    .mail-button {
        width: 400px;
        height: 50px;
        font-size: 18px;
        line-height: 2.8;
    }
}
/* Galeria de imágenes */
.galeria-fotos {
    width: 100%;
    height: 300px; /* Puedes cambiar este valor (ej. 300px o 500px) */
    background-color: transparent !important; /* Asegura que no tenga fondo */
}

/* 2. El slide debe ser transparente y ocupar todo el espacio */
.galeria-fotos .swiper-slide {
    background-color: transparent !important; /* ELIMINA EL COLOR BEIGE */
    height: 100% !important;
    width: 100% !important;
    /* Centrado por si la imagen falla */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 3. LA CLAVE: Forza a la imagen a llenarlo todo */
.galeria-fotos .swiper-slide img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Recorta la imagen para que no se deforme */
}

/* Opcional: Para que los puntitos se vean mejor sobre fotos claras */
.swiper-pagination-bullet {
    background-color: rgba(0,0,0,0.5) !important; /* Oscurece los puntos inactivos */
}
.swiper-pagination-bullet-active {
    background-color: black !important; /* Punto activo negro */
}
.gallery2 {
    /* Estilos específicos para la segunda galería */
    padding-bottom: 1rem;
}
@media (min-width:700px) {
    /* Header */
    .nav-list {
        flex-direction: row;
        margin-right: -3rem;
    }
    .nav {
        position: relative;
        gap: 0;
        background-color: transparent;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        flex-direction: row;
        transition: none;
    }
    .open-button, .close-button {
        display: none;
    }
    .nav-list li a {
        padding: 0;
        font-size: 18px;
    }
    .nav-list li {
        margin-bottom: 0;
    }
    /* Inscripción destacado */
    .inscripcion {
        background-position: center 40%;
    }
    .inscripcion h4 {
        font-size: 30px;
    }
    .large_button{
        font-size: 18px;
        height: 50px;
        width: 400px;
        line-height: 2.8;
    }
    /* Lema */
    .lema h3 {
        font-size: 26px;
    }
    /* Footer */
    .direccion br { display: none; }
    .direccion {
        padding-right: 60px;
    }
    .redes{
        padding-right: 60px;
    
    }
    /* Pagina Nosotros */
    .historia-texto {
        padding-left: 3rem;
        padding-right: 3rem;
    }
    .historia{
        padding-left: 3rem;
        padding-right: 3rem;
    }
    /* Propuesta */
    .propuestas-list{
        padding-left: 3rem;
        padding-right: 3rem;
    }
    /* Pagina Objetivos */
    .objetivos-list{
        padding-left: 3rem;
        padding-right: 3rem;
    }

    /* Galeria de imágenes */
    .galeria-fotos {
        /* Aumentamos la altura para que la foto 4:3 no se recorte tanto */
        height: 450px; 
    }
}
@media (min-width: 900px) {
   .galeria-fotos {
        /* En monitores grandes, necesitamos más altura para impactar */
        width: 85%;
        height: 550px; 
        
        /* OJO: Si en tu JS configuraste "slidesPerView: 3" para PC,
           entonces cambia este valor a 350px o 400px, o las fotos
           se verán demasiado verticales. */
    } 
}
@media (min-width: 1200px) {
    /* Header */
    .logo h1 {
        display: block;
        font-family: hind, sans-serif;
        font-size: 1.5rem;
        padding-left: 1rem;
        color: #333;
    }
    .direccion {
        padding-right: 80px;
    }
    .redes{
        padding-right: 150px;
    
    }
    .nav-list li a {
        padding: 0;
        font-size: 20px;
    }
    /* Pagina Nosotros */
    .historia-texto {
        padding-left: 10rem;
        padding-right: 10rem;
    }
    .historia{
        padding-left: 5rem;
        padding-right: 5rem;
    }
    /* Propuesta */
    .propuestas-list{
        padding-left: 15rem;
        padding-right: 15rem;
    }
    /* Pagina Objetivos */
    .objetivos-list{
        padding-left: 15rem;
        padding-right: 15rem;
    }

    /* Galeria de imágenes */
    .galeria-fotos {
        /* En monitores grandes, necesitamos más altura para impactar */
        width: 70%;
        height: 650px; 
        
        /* OJO: Si en tu JS configuraste "slidesPerView: 3" para PC,
           entonces cambia este valor a 350px o 400px, o las fotos
           se verán demasiado verticales. */
    }
}
@media (min-width: 1600px) {
    .galeria-fotos {
        /* En monitores grandes, necesitamos más altura para impactar */
        width: 58%;
        
        /* OJO: Si en tu JS configuraste "slidesPerView: 3" para PC,
           entonces cambia este valor a 350px o 400px, o las fotos
           se verán demasiado verticales. */
    }
}