html{
    scroll-behavior: smooth;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}



body{
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background: linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255), #f2efff);
}


.nav{
    position: fixed;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px;
    transition: all 0.5s ease;
}


/*------------------------------------------------------------*/
.servicio-ind p{
        font-family: 'Arial', sans-serif;
        font-size: 16px;
        line-height: 1.5;
        text-align: center;
        color: #333; /* Color del texto */ 
    } 




/*-------------TEXT FAIL------------------------------*/

.Pcarre {
    text-align: center;
}


/*-------------TEXT FAIL------------------------------*/

.FBlac {
    color: rgba(255, 255, 255, 0);
}





/*-----------------------------------*/

.nav {
    background-color: rgba(248, 248, 248, 0.096);
}

/*----------------------------------*/

.nav:active{
    background: #ffffff;
    padding: 15px;
}

.nav:active .logo,
.nav.active a{
    color: #ffffff;
}

/*-----------------------------------*/

.nav.active a:hover{
    background: #0600408f;
    color: #ffffff;
}

.logo{
    font-size: 20px;
    color: rgba(24, 0, 81, 0.724), 0.634);
    font-weight: 30px;
    border-radius: 10px;
    padding: 1px 1px;
}

.menu{
    display: flex;
}

.menu li{
    list-style:none;
    margin: 1px;
}

.menu li a{
    color: hsl(0, 0%, 100%);
    background: hsla(259, 100%, 48%, 0.353);
    text-decoration: none;
    font-weight: bold;
    transition: all 0.5s ease;
    border-radius: 20px;
    padding: 5px 10px;
}

.menu li a:hover{
    padding: 5px 10px;
    background: hsl(264, 100%, 15%);
    color: #ffffff;
    border-radius: 5px;
}

.scrol{
    height: 100px;
}

.titulo{
    color: rgb(62, 1, 216);
    font-size: 35px;
    text-align: center;
    margin-bottom: 30px;
}

/*Heder*/


header {
    width: 100%;
    height: 600px;
    background: #bc4e9c;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, hsla(264, 100%, 10%, 0.62), hsla(264, 100%, 10%, 0.62)), url(Img/libreria/libros5.jpg);
    background: linear-gradient(to right, hsla(264, 100%, 10%, 0.62),hsla(264, 100%, 10%, 0.62)), url(Img/libreria/libros5.jpg); 
    background-size: cover;
    background-attachment: fixed;
    position: relative;
}


header .textos-header{
    display: flex;
    height: 430px;
    width: 100%;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

.textos-header h1{
    font-size: 50px;
    color: white;
}

.textos-header h2{
    font-size: 30px;
    font-weight: 300;
    color: white;
}

.wave {
    position: absolute;
    bottom: 0;
    width: 100%;
}


/*-------------------------------------About Up----------------------------*/

.contenedor-sobre-nosotros{
    display: flex ;
    justify-content: space-evenly;
}

.imagen-about-us{
    width: 44%;
}

.imagen-about-us{
    width: 44%;
}

.sobre-nosotros .contenidos-textos{
    width: 44%;
}

.contenidos-textos h3{
    margin-bottom: 15px;
}


.contenidos-textos h3 span{
    background: #4d0686;
    color: #fff;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    width: 30px;
    padding: 2px;
    box-shadow: 0 0 6px rgba(0, 0, 0, .5);
    margin-right: 5px;
}

.contenidos-textos p{
    padding: 0px 0px 30px 15px;
    font-weight: 300;
    text-align: justify;
}

/*---------------------------------------------Galeria Y portafolio------------------------------------------------------------------*/


.hover-galeria{
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}


.imagen-port {
    
    margin-bottom: 10px;
    overflow: hidden;
    /*position: relative;*/
    /*cursor: pointer;*/
   /* box-shadow: 0 0 6px 0 rgba(0, 0, 0, .5); */   
    /*top:-120px;*/
    left:-243px;
    width:457px;
    height:260px;
    }









/* -----------------------------------------------Nuestros servicios -----------------------------*/

.about-services{
    padding-bottom: 30px;
}

.servicio-cont{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.servicio-ind{
    width: 99%;
    text-align: center;
}
.servicio-ind img{
    height: 420px;
    width: 420px;
    object-fit: cover;
}

.servicio-ind h3{
    margin: 10px 0;
}

.servicio-ind p{
    font: 300%;
    text-align: center;
}



/*-----------------------CONTACTOS-----------------------------------*/

.wrapper .button{
    display: inline-block;
    height: 60px;
    width: 60px;
    float: left;
    margin: 0 5px;
    overflow: hidden;
    background: #ffffff;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0px 10px 10px rgba(29, 0, 252, 0.733);
    transition: all 0.3s ease-out;
}
.wrapper .button:hover{
    width: 200px;
}
.wrapper .button .icon{
    display: inline-block;
    height: 60px;
    width: 60px;
    text-align: center;
    border-radius: 50px;
    box-sizing: border-box;
    line-height: 60px;
    transition: all 0.3s ease-out;
}
.wrapper .button:nth-child(1):hover .icon{
    background: #b24242;
}
.wrapper .button:nth-child(2):hover .icon{
    background: #1DA1F2;
}
.wrapper .button:nth-child(3):hover .icon{
    background: #E1306C;
}
.wrapper .button:nth-child(4):hover .icon{
    background: #333;
}
.wrapper .button:nth-child(5):hover .icon{
    background: #ff0000;
}
.wrapper .button .icon i{
    font-size: 25px;
    line-height: 60px;
    transition: all 0.3s ease-out;
}
.wrapper .button:hover .icon i{
    color: #fff;
}
.wrapper .button span{
    font-size: 20px;
    font-weight: 500;
    line-height: 60px;
    margin-left: 10px;
    transition: all 0.3s ease-out;
}
.wrapper .button:nth-child(1) span{
    color: #4267B2;
}
.wrapper .button:nth-child(2) span{
    color: #ff0000;
}
.wrapper .button:nth-child(3) span{
    color: #E1306C;
}
.wrapper .button:nth-child(4) span{
    color: #333;
}
.wrapper .button:nth-child(5) span{
    color: #ff0000;
}
/*--------------------------------------------------------------------*/



footer{
    background: rgb(5, 0, 27);
    padding: 10px 0 10px 0;
    margin: auto;
    overflow: hidden;
}

.logoF{
    text-align: right;
    padding-right: 10px;
    margin: 30%px;
}

/*-----------------------APARTADO PARA CELULAR--------------------------------------------*/

@media screen and (max-width:900px) {
    header{
        background-position: center;
    }

    .contenedor-sobre-nosotros img{
        width: 80%;
    }

    .contenedor-sobre-nosotros{
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .sobre-nosotros .contenidos-textos{
        width: 90%;
    }

    .imagen-about-us{
        width: 90%;
    }

    /*----------------------------------------------------Portafolio---------------------------------*/

    .hover-galeria {
        width: 100%;
        text-align: center
    }

    .imagen-port {
        margin-bottom: 10px;
        overflow: hidden;
        /*position: relative;*/
        /*cursor: pointer;*/
       /* box-shadow: 0 0 6px 0 rgba(0, 0, 0, .5); */   
        /*top:-120px;*/
        left:-243px;
        width:457px;
        height:260px;
        }

/*------------------------------------CONTACTO-----------------------------------------------*/

    .servicio-cont{
        justify-content: center;
        flex-direction: column;
    }

    .servicio-ind{
        width: 100%;
        text-align: center;
    }

    .servicio-ind:nth-child(1), .servicio-ind:nth-child(2){
        margin-bottom: 60px;
    }

    .servicio-ind img{
        width: 90%;
    }
}


/*----------------------------------------------------------------------------------------------------*/

@media screen and (max-width:500px){
    nav{
        text-align: center;
        padding: 30px 0 0 0;
    }

    nav > a{
        margin-right: 5px;
    }

    .textos-header h1{
        font-size: 35px;
    }

    .textos-header h2{
        font-size: 20px;
    }

    /*ABOUT US*/

    .imagen-about-us{
        margin-bottom: 60px;
        width: 99px;
    }

    .sobre-nosotros .contenidos-textos{
        width: 95%;
    }





/*-------------------------------------------------------------------------------------------------------



    .contenidos-textos h3{
        text-align: center;
    }
    
    
    .contenidos-textos h3 span{
       text-align: center;
    }
    
    .contenidos-textos p{
        text-align: center;
    }
    


-----------------------------------------------------------------------------------------*/


















    /*---------------------------------------Portafolio------------------------------*/

    .hover-galeria {
        margin: 0;
        padding: 50pxS;
    }

    .imagen-port {
        margin-bottom: 10px;
        overflow: hidden;
        /*position: relative;*/
        /*cursor: pointer;*/
       /* box-shadow: 0 0 6px 0 rgba(0, 0, 0, .5); */   
        /*top:-120px;*/
        left:-243px;
        width:457px;
        height:260px;
        }


    /*------------------------------------Pie de pagina o footer------------------------------------------*/

    .contenedor-footer{
        flex-direction: column;
        border: none;
    }

    .content-foot{
        margin-bottom: 30px;
        text-align: center;
    }

    .content-foot h4{
        border: none;
    }

    .content-foot p{
        color: white;
        border-bottom: 1px solid #f2f2f2;
        padding-bottom: 20px;
    }

    .titulo-final{
        font-size: 20px;
    }
}


    .MasInf {
        color: rgb(62, 1, 216);
        font-size: 15px;
        text-align: center;
        margin-bottom: 15px;
        }



.btn-flotante {
	font-size: 16px; /* Cambiar el tamaño de la tipografia */
	text-transform: uppercase; /* Texto en mayusculas */
	font-weight: bold; /* Fuente en negrita o bold */
	color: #ffffff; /* Color del texto */
	border-radius: 5px; /* Borde del boton */
	letter-spacing: 2px; /* Espacio entre letras */
	background-color: #E91E63; /* Color de fondo */
	padding: 18px 30px; /* Relleno del boton */
	position: fixed;
	bottom: 40px;
	right: 40px;
	transition: all 300ms ease 0ms;
	box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
	z-index: 99;
}
.btn-flotante:hover {
	background-color: #2c2fa5; /* Color de fondo al pasar el cursor */
	box-shadow: 0px 15px 20px rgba(0, 0, 0, 0.3);
	transform: translateY(-7px);
}
@media only screen and (max-width: 600px) {
 	.btn-flotante {
		font-size: 14px;
		padding: 12px 20px;
		bottom: 20px;
		right: 20px;
	}
}