/* Variables */
:root {
    --main-bg-color: #f0b5e6;
    --pie-bg-color: #e0a2ef;
  }
  

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
h1{
    font-size: 1.5rem;
}
p,
h2,
h3,
h4,
h5,
h6,
.boton {
    
    font-family: 'Mukta', sans-serif;
}
body{
    background-color: rgb(248, 230, 236);
    
}
/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/


.menu_close{
    transition: all 0.5s;
    display: none;
}
#navabierto{
    position: absolute;
    top:70px;
    width: 100%;
    height: 80vh;
    /* display: flex; */
    flex-direction: column;
    transition: display 1s ease;
  display: none;
  background-color: rgb(0, 0, 0, 0.7);
    border: 0.2px solid rgb(206, 206, 206);
    box-shadow: 2px 6px 5px 0px rgba(0,0,0,0.75);
    z-index: 10;
}
#navabierto ul{
    width: 100%;
    
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    
   padding-left: 0;
    text-decoration: none;
}
#navabierto ul li{
    border-bottom: 1px solid var(--main-bg-color);
    width: 100%;
    height: 100px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
    list-style-type: none;
    text-align: center;
    
}
#nav ul li:hover{
    background-color: var(--main-bg-color);
}

#menuabierto ul{
    
    
    text-decoration: none;
    display: flex;
}
#menuabierto ul li{
    display: flex;
    list-style-type: none;
    margin: 0 1.2rem;
    
   
}
#menuabierto ul:hover{
    transition: all 0.8s ease;
    background-color: rgb(255, 255, 255);
    border-radius: 30%;
}
#menuabierto ul li a:hover{
    transition: all 0.8s ease;
    
    color:#000;
}
#menuabierto ul li a{
    padding-top: 0.5rem;
    white-space: pre;
    width: 100%;
    height: 100%;
}
.contenedorsol{
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-around;
}

.header {

    width: 100%;
 
    display: flex;
    flex-direction: column;
    padding: 30px 18px;
   
    align-items: center;
   
    
}
.header a{
    text-decoration: none;
    color: rgb(238, 106, 214);
    text-transform: uppercase;
    font-weight: bold;
    font-family: sans-serif;
    font-size: 1rem;
}



/* MAIN */

.main {
    overflow: hidden;
   display: flex;
   flex-direction: column;    
    
}
.modificado{
    font-size: 1.6rem;
   padding: 5rem;

}
    
.ppresentacion{
    padding: 1.5rem;
    
}
.masinfo{
    width: 10rem;
    padding: 5px;
    border-radius: 2rem;
    color: white;
    border: 0.1px solid rgb(255, 255, 255);
    background-color: var(--pie-bg-color);
    transition: all 1s;
}
.masinfo:hover{
    transform: scale(1.2);
    color: rgb(248, 230, 236) ;
}
.masinfo a{
    text-decoration: none;
    color: inherit;
}
.flecha{
   
    margin: 1.5rem auto;
    width: 3rem;
}

.imagenmain{
    margin-top: 4rem;
    width: 196px;
    
    flex-shrink: 0; 
    
}
.contenedorpym{
    margin-top: 5rem;
    display: flex;
    align-items: center;
}
.imagenmain2{
   width: 100%;
   
    
    
}
.imagenmain2 img{
    
    width: 600px;
    height: 600px;
    object-fit: cover;
    object-position: top center;
}
.imagenmain img{
    max-width: 100%;
    border-radius: 341px; 
    
}
   
.servicios{
    width: 100%;
    display: flex;
    flex-direction: column;
    
}

/*-------------CARTAS------------*/

.servicios .contenedorcartas{
   margin: 2rem 0;
}
.servicios .contenedorcartas h2{
    text-align: center;
}
.servicios section{
    width: 100%;
    margin: 0 auto;
    border-bottom: 1px solid rgb(0, 0, 0, 0.3);
}
.servicios  h2{
    
    text-align: center;
    
}
section .servicios  .contenedorimg{
    margin: 1rem auto;
    width: 15rem;
    
   
   
}

.contenedorimgre{
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
    margin: 0 auto;
    width: 70%;
}
.rever{
   
    text-align: center;
    width: 100%;
}
.rever2{
    padding: 1.5rem;
    font-size: 1.2rem;
    line-height: 2rem;
    margin-top: 3rem;
}
section .servicios  .contenedorimg .imgcartas{
max-width: 100%;
width: 100%;
height: 300px;
border-radius: 2rem;
object-fit: cover;
background-position: center center;
}
.contenedorimg .imgcartas{
    max-width: 100%;
width: 100%;
height: 300px;
border-radius: 2rem;
object-fit: cover;
background-position: center center;
}
h3{
    text-align: center;
    color: #eda7ff;
    margin: 1.7rem 0;
    width: 100%;
    padding: 1rem;
    color: #eda7ff;
    background-color: rgb(0, 0, 0, 0.4);
}
.qtext{
    text-decoration: none;
    color: #eda7ff;
    
}
.rever{
    padding: 20px;
}
#quiensoy{
    width: 100%;
}
#carouselExampleControls{
    height: 400px !important;
}
.carousel-item{
    height: 400px;
}
.carousel-item img{
    max-width: 100%;
    width: 100%;
    height: 100%;    
    object-fit: contain;
}

.secartas{
    display: flex;
    flex-direction: column;
    overflow: hidden;    /* margin-top: 5rem; */
}
.secartas .contenedorimgaparte .imgcartasaparte{
   max-width: 100%;
   width: 100%;
   
   object-fit: contain;
   
   
    text-align: center;
    
}
.secartas .contenedorimgaparte{
    width: 30%;
    
    margin: 0 auto;
}
.seccioncartastexto{
    margin: 2rem;
    text-align: center;
}
 /*--------------------CURSOS-----------------------------*/
.proximamente{
    text-align: center;       
 }


 /*-------------------QUIEN SOY----------------------------*/
 .imgquiencontenedor{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    
}


/*----------------------BLOG-------------------------------*/
.blog{
    width: 100%;
    height: auto;
    overflow: hidden;
}
.contenedorlibro{
    height: auto;
}
.imglibros {
   
    display: flex;
    flex-wrap: wrap; /* Permite que las imágenes se dispongan en varias filas si no hay suficiente espacio */
    justify-content: center; /* Centra las imágenes horizontalmente */
    gap: 20px; /* Espacio entre las imágenes */
    width: 80%; /* El contenedor ocupará el 80% del ancho disponible */
    margin: 0 auto; /* Centra el contenedor en la página */
  }
  
  .imglibros img {
    width: 100%;
    max-width: 300px; /* Ajusta este valor según el tamaño que desees para las imágenes */
    height: auto;
  }
.contendorsinopsis{
    margin-top: 2rem;
}
  .sinopsis {
    width: 80%; /* El párrafo ocupará el 80% del ancho disponible */
    margin: 0 auto; /* Centra el párrafo horizontalmente */
    text-align: center; /* Centra el texto dentro del párrafo */
    line-height: 1.6; /* Opcional: Ajusta el espacio entre líneas para mejorar la legibilidad */
  }

.botonlibro{
    width: 12rem;
    height: 5rem;
    font-size: 1.5rem;
    border: none;
    border-radius: 5rem;
    background-color: #eda7ff;
    color: azure;
    transition: all 0.5s;
    z-index: 1;
}
.botonlibro:hover{
    transform: scale(1.1);
}
.compralo{
    margin-top: 2rem;
}
/*---------------------CONTACTO--------------------------*/
.contenedorflex_contacto {
    margin-top: 5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.contenedorflex_contacto fieldset{
    width:100%;
    padding: 30px;
    margin-top: 5rem;
    margin-bottom: 5rem;
}
.contenedorflex_contacto fieldset label{
    color: white;
    font-size: 1.3rem;
    font-weight: 700;
    text-shadow: 1px 1px 2px black;
}
.contenedorflex_contacto fieldset input{
    margin: 20px;
    width: 90%;
}
.contenedorflex_contacto fieldset textarea{
    width: 90%;
    height: 150px;
    margin: 20px;
    resize: none; 
}
.contenedorflex_contacto fieldset .boton{
    height: 2.3rem;
    font-size: 1rem;
    font-weight: 800;
    border-radius: 2rem;
    border: none;
    background-color: #e0a2ef;
    color: white;
}


/* -----------------------------pie de pàgina------------------------------------------ */
.footer {
    
    
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    background-color: var(--pie-bg-color);
}
.footer h5{
    font-size: 1.2rem;
    font-style: italic;
    text-transform: uppercase;
    font-weight: bolder;
}
.footer .redes{
    align-self: center;
    margin-bottom: 20px;
}
.footer .redes a{
    margin: 0 1.3rem;
    color: rgb(99, 93, 82);
    display: inline-block;
}
.footer .redes i{
    font-size: 1.3rem;
    color: #000;
    transition: all 0.2s ease-in;
}
.footer .redes i:hover{
    transition: all 0.3s ease-in;
    transform: scale(1.4);
    background-color: var(--main-bg-color);
}







/*------------------------MEDIA QUERIES-----------------------------------*/
@media (max-width:768px) {
    #menuabierto{
        display: none;
    }
    .contenedorpym{
        display: none;
    }
    .h3pc{
        display: none;
    }
    .secartas .contenedorimgaparte{
        width: 50%;
        
        margin: 0 auto;
    }
    .ppresentacion{
        display: block;
    }
    .botonlibro{
        width: 8rem;
        height: 4rem;
        font-size: 1.1rem;
    }
}
@media (min-width:769px) {
   .iconosmenu{
    display: none;
   }
   .header{
    flex-direction: row;
    justify-content: space-around;
   
   
   }
   .ppresentacion{
    display: none;
   }
   
   .imagenmain{
    display: none;
   }
   .logosol__nav{
    display: inline-block;
   }
   .contenedorsol{
    width: auto;
   }
   .servicios{
    display:flex ;
    flex-direction: row;
    flex-wrap: wrap;
    
    
    /* justify-content: baseline;
    align-items: flex-start; */
   
   }
   .contenedorcartas{
    flex:50%;
   }
 .h3movil{
    display: none;
 }
   
   .titulomovil{
    display: none;
   }
   .slide{
    
    width:400px;
    margin-bottom: 20rem;
   }
  
   .carousel-control-prev-icon, .carousel-control-next-icon{
    background-color: #000;
   
   }
   
   #quienSoy{
    display: flex;
   }
   .carousel-item{
    width: 400px;
   }
   .imgblog img{
    width: 100%;
   height: 350px;
   object-position: top;
}

 }