/* TODO Fondos de colores =============================================================================================================================================================================================*/
.fondo_verde_oscuro{
    background-color: rgb(49, 68, 37);
}
.fondo_verde_claro{
    background-color: rgb(118,144,100);
}
.fondo_verde_pastel{
    background-color: rgb(223, 228, 214);
}
.fondo_cafe{
    background-color: rgb(178,157,118);
}
.fondo_blanco{
    background-color: rgb(250,248,243);
}

.fondo_cafe_testimonios{
    background-color: rgba(178,157,118,0.75);
    border-radius: 30px;
}
.fondo_verde_oscuro_equipo{
    background-color: rgba(80,85,73,0.7);
    border-radius: 30px;
}
body{
    background-color: rgb(250,248,243);
}

/* TODO Fondos de imagenes ============================================================================================================================================================================================*/
.fondo_testimonios{
    background-image: url('FONDOS/FONDO_TESTIMONIOS.png');
    width: 100%;
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover;
}
.fondo_equipo{
    background-image: url('FONDOS/FONDO_NUESTROEQUIPO.png');
    width: 100%;
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover;
}
.fondo_autora{
    background-image: url('FONDOS/FONDO_AUTORA.png');
    width: 100%;
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover;
}
.fondo_intro{
    background-image: url('FONDOS/FONDO\ PROLOGOS-LIBRO.png');
    width: 100%;
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover;
}
.fondo_correo{
    background-image: url('FONDOS/FONDO\ PROLOGOS-LIBRO2.png');
    width: 100%;
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover;
}


/* TODO  Para la NavBar ===============================================================================================================================================================================================*/
.navbar {
    position: absolute;
    z-index: 1000;
    padding: 15px;
}
.navbar nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}
li .nav_item{
    width: auto;
}
.logonav{
    width: 150px;
}
.logonav_item{
    width: 75px;
}
.logonav_item_2{
    width: 75px;
}
.logonav_3{
    width: 150px;
}
.prueba{
    background-color: rgb(222, 223, 213);
}

/* TODO Para el video del inicio ======================================================================================================================================================================================*/
.video-section {
    position: relative;
}
.video-section video {
    width: 100%;
    height: auto;
}
.video-button {
    position: absolute;
    bottom: 15%; /* Ajusta la distancia desde abajo según tus preferencias */
    left: 50%;
    transform: translateX(-50%);
    padding: 0.5% 5%;
    background-color: #0000; /* Color de fondo del botón */
    color: #000000; /* Color de texto del botón */
    border: 1px solid rgb(49, 68, 37);
    cursor: pointer;
    font-size: 120%;
    font-family: 'Montserrat-Regular', sans-serif;
}
.video-button:hover{
    background-color: rgb(49, 68, 37);
    border: 1px solid rgb(223, 228, 214);
    transition: 0.4s;
    color: rgb(223, 228, 214);
}

/* TODO Para el inicio ================================================================================================================================================================================================*/
.card_inicio{
    width: 20%;
    /* height: 160px; */
    margin: 10px;
    overflow: hidden;
    background-color: rgb(83,116,63);
    border-radius: 0px;
}
.imagen_testimonios{
    width: 300px;
    height: 300px;
    border-radius: 50%;
    padding: 1.5%;
}
.alto_carousel{
    height: 550px;
}
.barra_testimonios{
    opacity: 2;
    border: 3px solid rgb(250,248,243);
}
.btn_contacto{
    border: 1px solid rgb(250,248,243);
    background-color: none;
    font-size: 120%;
    font-family: 'Montserrat-Bold', sans-serif;
    text-align: center;
    color: rgb(250,248,243);
}
.btn_contacto:hover{
    border: 1px solid rgb(250,248,243);
    color: rgb(223, 228, 214);
}

/* TODO Para Acerca de ================================================================================================================================================================================================*/
.img-section_1 {
    position: relative;
}
.barra_acerca{
    opacity: 2;
    border: 1px solid rgb(49, 68, 37);
}
.imagen_equipo{
    width: 300px;
    height: 300px;
    border-radius: 60px;
    border: 10px solid rgb(49, 68, 37);
}

/* TODO Para Nuestros proyectos =======================================================================================================================================================================================*/
.img-section_2{
    position: relative;
}
.ancho_proyecto_1{
    width: 19%;
}
.ancho_proyecto_2{
    width: 79%;
}
.icono_proyecto{
    width: 75%;
}
.icono_proyecto_2{
    width: 50%;
}
.btn_proyectos{
    color: rgb(53,54,52);
    text-align: center;
    font-family: '',sans-serif;
    border: 1px solid rgb(49, 68, 37);
    border-radius: 0;
    text-decoration: none;
}
.btn_proyectos:hover{
    color: rgb(49, 68, 37);
    border: 1px solid rgb(49, 68, 37);
}

/* TODO Para Desarrollo sostenible ====================================================================================================================================================================================*/
.ancho_desarrollo_1{
    width: 50%;
}
.ancho_desarrollo_2{
    width: 50%;
}
.ancho_desarrollo_1_2{
    width: 50%;
}
.ancho_desarrollo_2_2{
    width: 50%;
}
.img_infantes{
    width: 90%;
}
.img_mujeres{
    width: 75%;
}
.separacion_imagen{
    width: 39%;
}
.separacion_video{
    width: 59%;
}

/* TODO Para Contacto =================================================================================================================================================================================================*/
.btn-contacto{
    color: rgb(250,248,243);
    text-align: center;
    font-family: 'Montserrat',sans-serif;
    border: 1px solid rgb(118,144,100);
    background-color:  rgb(118,144,100);
    border-radius: 0;
    text-decoration: none;
}
.btn-contacto:hover{
    color: rgb(250,248,243);
    border: 1px solid rgb(118,144,100);
    background-color: rgb(49, 68, 37);
    transition: 0.5s;
}

/* TODO Para EEA ======================================================================================================================================================================================================*/
.medio_espacio{
    width: 49%;
}
.btn_eea{
    background-color: rgb(118,144,100);
    color: rgb(223, 228, 214);
    font-family: 'Montserrat',sans-serif;
    text-align: center;
    border: 1px solid rgb(49, 68, 37);
    border-radius: 0;
    text-decoration: none;
}
.btn_eea:hover{
    background-color: rgb(49, 68, 37);
    color: rgb(223, 228, 214);
    border: 1px solid rgb(118,144,100);
    transition: 0.5;
}

/* TODO Para el contador ==============================================================================================================================================================================================*/
.contador_pagina{
    text-align: center;
    width: auto;
    z-index:2100;
    background-color: rgb(250,248,243);
    color: rgb(140,125,129);
    padding: 2px 10px;
    margin-bottom: 2%;
    border: 5px solid rgb(140,125,129);
    font-size: 200%;
    font-family: 'Montserrat-ExtraBold', sans-serif;
    letter-spacing: 30px;
}
.contador_pagina_2{
    text-align: center;
    width: auto;
    z-index:2100;
    background-color: rgb(250,248,243);
    color: rgb(47,136,203);
    padding: 2px 10px;
    margin-bottom: 2%;
    border: 5px solid rgb(47,136,203);
    font-size: 200%;
    font-family: 'Montserrat-ExtraBold', sans-serif;
    letter-spacing: 30px;
}

/* TODO Para Sobre la Autora ==========================================================================================================================================================================================*/
.ancho_sinopsis{
    width: 48%;
}
.ancho_libro{
    width: 50%;
}
.ancho_libro_2  {
    width: 75%;
}
.ancho_portada{
    width: 49%;
}
.ancho_descripcion{
    width: 51%;
}
.btn-comprar{
    background-color: none;
    color: rgb(53,54,52);
    font-family: 'Montserrat-Regular', sans-serif;
    font-size: 120%;
    text-align: center;
    border: 1px solid rgb(178,157,118);
    border-radius: 0;
}
.btn-comprar:hover{
    border: 1px solid rgb(178,157,118);
}


/* TODO Para Publicaciones ============================================================================================================================================================================================*/
.ancho_doctora{
    width: 40%;
}
.ancho_texto_doctora{
    width: 59%;
}
.img-circulo{
    border-radius: 50%;
}
.ancho_img_doctora{
    width:80%;
}
.logo_redes_2{
    height: 60px;
}
.logo_redes_3{
    height: 80px;
}
.libro_instrumentos{
    margin-top: -20px; /* Ajusta la cantidad según sea necesario */
    left: 0;
    width: 100%;
}
.compra_libro_ancho{
    width: 35%;
}
.compra_libro_ancho2{
    width: 29%;
}
.fondo-dividido {
    position: relative;
    background-color: rgb(250,248,243); /* Color superior (verde) */
    z-index: 1; /* Asegura que el contenido esté por encima del pseudo-elemento */
}
.fondo-dividido::after {
    content: "";
    /* display: block; */
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 90%;
    background-color: rgb(27,36,21); /* Color inferior (azul) */
    z-index: -1; /* Asegura que el pseudo-elemento esté detrás del contenido */
}
.comillas{
    margin-top: 60px;
}
.btn-adquirir{
    background-color: none;
    color: rgb(250,248,243);
    border: 3px solid rgb(250,248,243);
    border-radius: 0;
    text-decoration: none;
    font-family: 'Montserrat-Bold', sans-serif;
    font-size: 120%;
}
.btn-adquirir:hover{
    color: rgb(250,248,243);
    border: 3px solid rgb(250,248,243);
}

/* TODO Para introduccion, prologo e indice ===========================================================================================================================================================================*/
.fondo-dividido2 {
    position: relative;
    background-color: transparent; /* Color superior (verde) */
    z-index: 1; /* Asegura que el contenido esté por encima del pseudo-elemento */
}
.fondo-dividido2::after {
    content: "";
    /* display: block; */
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 90%;
    background-color: rgb(27,36,21); /* Color inferior (azul) */
    z-index: -1; /* Asegura que el pseudo-elemento esté detrás del contenido */
}


.prev-icon-2,
.next-icon-2 {
    position: relative;
    opacity: 2;
    bottom: 10px;
}

/* TODO Para la pagina despues del correo =============================================================================================================================================================================*/
.btn-regresar{
    font-size: 150%;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    color: rgb(250,248,243);
    background-color: rgb(118,144,100);
    text-decoration: none;
    text-align: center;
    border-radius: 0;
    padding: 2% 5%;
}
.btn-regresar:hover{
    color: rgb(250,248,243);
    background-color: rgb(118,144,100);
}
.ancho_logo{
    width: 25%;
}


/* TODO Para el footer ================================================================================================================================================================================================*/
footer{
    background-color: rgb(223, 228, 214);
}
.logofooter{
    width: 30%;
}
.logo_redes{
    height: 80px;
}


/* ! Aqui empieza los diseños responsivos =============================================================================================================================================================================*/
@media screen and (max-width: 768px){

    /* todo Para la barra de navegacion ===============================================================================================================================================================================*/
    .navbar {
        position: relative;
        /* z-index: 1000; */
        padding: 15px;
    }
    .logonav{
        width: 25%;
    }
    .navbar_fondo{
        background-color: rgb(223, 228, 214);
    }

    /* TODO Para el video ============================================================================================================================================================================================*/
    .video-button {
        position: absolute;
        bottom: 10%; /* Ajusta la distancia desde abajo según tus preferencias */
        left: 50%;
        transform: translateX(-50%);
        padding: 0.5% 5%;
        font-size: 80%;
    }

    /* TODO Para el inicio ============================================================================================================================================================================================*/
    .card_inicio{
        width: 70%;
    }
    .imagen_testimonios{
        width: 200px;
        height: 200px;
        border-radius: 50%;
    }
    .btn_contacto{
        font-size: 80%;
        padding: 0.5 2.5%;
    }
    
    /* TODO Para Acerca de ============================================================================================================================================================================================*/
    .imagen_equipo{
        width: 150px;
        height: 150px;
    }

    /* TODO Para Nuestros proyectos ===================================================================================================================================================================================*/
    .ancho_proyecto_1{
        width: 100%;
    }
    .ancho_proyecto_2{
        width: 100%;
    }
    .icono_proyecto{
        width: 25%;
    }
    .icono_proyecto_2{
        width: 20%;
    }

    /* TODO Para Desarrollo sostenible ====================================================================================================================================================================================*/
    .ancho_desarrollo_1{
        width: 100%;
    }
    .ancho_desarrollo_2{
        width: 100%;
    }
    .ancho_desarrollo_1_2{
        width: 100%;
    }
    .ancho_desarrollo_2_2{
        width: 100%;
    }
    .img_infantes{
        width: 60%;
    }
    .separacion_imagen{
        width: 100%;
    }
    .separacion_video{
        width: 100%;
    }

    /* TODO Para Contacto =============================================================================================================================================================================================*/
    .btn-contacto{
        font-size: 100%;
    }

    /* TODO Para EEA ==================================================================================================================================================================================================*/
    .medio_espacio{
        width: 100%;
    }

    /* TODO Para Sobre la Autora ==========================================================================================================================================================================================*/
    .ancho_sinopsis{
        width: 100%;
    }
    .ancho_libro{
        width: 100%;
    }
    .ancho_libro_2  {
        width: 100%;
    }
    .ancho_portada{
        width: 49%;
    }
    .ancho_descripcion{
        width: 51%;
    }

    /* TODO Para Publicaciones ========================================================================================================================================================================================*/
    .ancho_doctora{
        width: 100%;
    }
    .ancho_texto_doctora{
        width: 100%;
    }
    .ancho_img_doctora{
        width:80%;
    }
    .logo_redes_2{
        height: 60px;
    }
    .libro_instrumentos{
        margin-top: -20px; /* Ajusta la cantidad según sea necesario */
        left: 0;
        width: 75%;
    }
    .compra_libro_ancho{
        width: 100%;
    }
    .compra_libro_ancho2{
        width: 100%;
    }
    .fondo-dividido {
        position: relative;
        background-color: rgb(250,248,243); /* Color superior (verde) */
        z-index: 1; /* Asegura que el contenido esté por encima del pseudo-elemento */
    }
    .fondo-dividido::after {
        content: "";
        /* display: block; */
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 94%;
        background-color: rgb(49, 68, 37); /* Color inferior (azul) */
        z-index: -1; /* Asegura que el pseudo-elemento esté detrás del contenido */
    }
    .comillas{
        margin-top: 30px;
    }
    .btn-adquirir{
        font-size: 100%;
    }

    /* TODO Para la pagina despues del correo =============================================================================================================================================================================*/
    .btn-regresar{
        font-size: 100%;
    }
    .ancho_logo{
        width: 75%;
    }

    /* TODO Para el footer ============================================================================================================================================================================================*/
    .logofooter{
        width: 100%;
    }
    .logo_redes{
        height: 50px;
    }

}