/* Estilos generales */
* {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    
}

a {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}



/* fonts: 
font-family: 'Caveat', cursive;
font-family: 'Comfortaa', sans-serif;
font-family: 'Dancing Script', cursive;
font-family: 'Inconsolata', monospace;
font-family: 'Josefin Sans', sans-serif;
font-family: 'Nunito', sans-serif;
font-family: 'Pacifico', cursive;
font-family: 'Roboto Condensed', sans-serif;
font-family: 'Roboto Mono', monospace;
font-family: 'Satisfy', cursive;

/* Estilos del header */


.main-header{

	background: #000;
	width: 100vw;
    height: 348px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	
    position: fixed ;
    margin-top: -348px;
    background: #fdcdf3d7;
    z-index: 1;
   


}


.cabecera{
    overflow: hidden;
	background: #000;
	min-width: 100vw;
    max-width: 100vw;
    height: 139px;
	color: #fff;
	display: flex;
	justify-content: space-around;
	align-items: center;
    overflow: hidden;
    padding: 0px;
    margin: 0px;
    
}

.cabecera p{

	min-width: 70% ;
	line-height: 2.5vh;
    
	vertical-align: middle;
    

	align-content: center;
    font-family: sans-serif;
    
    font-size: 1.6vh;
    color: #fff;
    margin: 0px 10px;
    font-weight: bold;
	

}


.social-icos-cabecera{
	max-width: 15%;
	display: flex;
    align-items: center;
    justify-content: center;
    margin: 4px auto;
     
}


.social-icos-cabecera img{
     
	 max-width: 70%;
	 object-fit: contain;
     overflow: hidden;

    
}


.nav-bar{
	background: #fdcdf3;
	display: flex;
	min-width: 100vw;
    max-width: 100vw;
	justify-content: space-between;
    overflow: hidden;
   
}

.logo-nav-bar{
	margin: 15px 20px;
	filter: invert(100%);
	
	filter: brightness(0);
}



.nav-bar img{
	max-width: 30%;

}

.hamburger-button{

    border: none;
	max-width: 20%;
	background: transparent; 

}

.logo {
    
    justify-content: center;
    
    justify-content: center;
    height: 100%;
    width: 300px;
    margin: 0px auto;
    
    

}

.logo img {

    max-width: 100%; 
    max-height: 100%; 
    margin-right: 10px; 
}





















/* .main-header{
    
    display: flex;
    flex-wrap: wrap;
    height: 180px;
    width: 100vw;
    padding: 0px 0px 0px 0px;
    margin-top: -300px;
    position: fixed;
    background: #fdcdf3d7;
    z-index: 1;
    
    

}


.site-header {
    display: flex;
    flex-wrap: wrap;
    color: #a7a7a7;
    height: 105px;
    width: 100%;
    padding: 0px 0px 1px 0px;
    text-align: center;
    justify-content: space-between;
    
}

.site-header h1 {
    margin: 0;
    width: 20%;
}

.logo {
    
    justify-content: center;
    
    justify-content: center;
    height: 100%;
    width: 300px;
    margin: 0px auto;
    
    

}

.logo img {

    max-width: 100%; 
    max-height: 100%; 
    margin-right: 10px; 
}

.header-content {

  background-color: #000;
  display: flex; 
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 50px;
}

.header-titulos{

    display: flex;
    align-items: center;
    justify-content: center;

}

.header-paragraph {
  

  font-size: 12px;
  color: #fff;
}

.highlighted-paragraph {
    align-content: center;
    font-family: sans-serif;
    text-align: center;
  font-size: 14px;
  color: #ddd;
  margin: 0px 4px;
  font-weight: bold;
}

.social-icons {

  margin: 10px 10px;
  text-align: center;
  align-items: center;
  justify-content: space-around;
  display: flex;
  width: 180px;

}

.social-icon {
  
  width: 33%;
  display: inline-block;
  margin: 0 5px;
  background-color: #000;

}

.social-icon-img{

    max-width: 100%;
}

.social-icon img {
    background-color: #fff;
    
    filter: invert(100%);
    width: 25px;
    height: auto;
}  */

/* Estilos de la barra de navegación */
nav {
    background-color: transparent;
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 80%;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: space-around ;
    align-items: center;
    width: 80%;
    margin: 0;
    padding: 0;
}

nav li {
    width: 20%;
    margin: 0 10px;
    position: relative;
}

nav a {

    font-family: 'Open Sans', sans-serif;
    color: #000;
    text-decoration: none;
    font-size: 16px;
    font-weight: 100;
    padding-bottom: 5px;
    border-bottom: 2px solid transparent;
    transition: border-bottom-color 0.3s ease;
}

nav a:hover {

    color: #fff;
    border-bottom-color: #ffffff;
}

/* Estilos de la barra de navegacion en desktop */


/* estilos nav en mobile */

.mobile-nav{
   
    display: none;
    position: fixed;
    z-index: 2;
    background: rgb(228, 158, 224);
    height: 1200px;
    flex-wrap: wrap;
    
}

.mobile-nav ul{
    display: flex;
    flex-wrap: wrap; 
    justify-content: flex-start;
    list-style: none;
    border-top: #d6aecc;
    min-width: 100%;
    height: 50%;
}


.mobile-nav a{
    color: #fff;
    font-size: 100px;
}






/* Estilos de la portada */


.portada-container{
    
     width: 100vw;
     margin-top: 348px;
     
     
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 1000;
     /* background-image: url(imagenes/imagen\ 1\ corte.jpg) ; */
     background-size: cover; /* Ajusta la propiedad para que la imagen se vea completa */
     background-position: center; /* Asegura que la imagen esté centrada */
     background-repeat: no-repeat;
     backdrop-filter: blur(5px);
     
     
}

.portada{
    text-align: center;
    
    
}


.texto-portada {
 justify-content: center;
 color: #fdcdf3d7;
 
 
}



.portada h2 {
    color: #000;
    font-family: 'Great Vibes', cursive;
    max-height: 10%;
    font-size: 116px;
    margin-bottom: 10px;
    margin-left: 10px;
}




.first-description {
    color: #000;
    font-family: 'Genos', sans-serif;
    font-weight: 2000;
    max-height: 10%;
    font-size: 36px;
    font-weight: 200;
    letter-spacing: 2px;
}


/* Estilos de las cards */


.cards-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 0px;
    margin: 80px auto;
    width: 60%;
}

.card {

    
    border: 1px solid #000;
    padding: 0px;
    margin-bottom: 70px;
    text-align: center;
    height: 450px;
    width: 100%;
    max-width: 350px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: flex-start;
    background-repeat: no-repeat;
    background-size: cover;
    
    background-attachment: scroll;
}

.card h3{
    
    
    display: flex;
    justify-content: center;
    width: 100%;
    align-items: center;
    text-align: center;
    padding: 0px 10px;
    margin: 40px 0px;
    
    height: 20%;
}

.card p{
    
    
    height: 10%;      
    max-height: 10%;
    min-width: 80%;
    line-height: 2;

}

.titulos-card{
     
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    
    align-self: flex-end;
    height: 40%;


}


.card1{
    background-image: url("imagenes/imagen-cortando.jpg") ;
}

.card2{
    background-image: url("imagenes/manicure.jpg") ;
}

.card3{
    background-image: url("imagenes/peinado.jpg") ;
}

.card4{
    background-image: url("imagenes/tinte.jpg");
}

.card5{
    background-image: url("imagenes/depilacion.jpg");
}

.card6{
    background-image: url("imagenes/Spa.jpg");
}




.card h3 {
    
    text-transform: uppercase;
    font-family: 'Open Sans', sans-serif;
    letter-spacing: 2px;
    text-align: center;
    padding-bottom: 20px;
    margin: 0px auto;
    width: 80%;
    font-size: 26px;
    font-weight: 400;
    border-bottom: 1px solid #d6aecc;
    color: #a19da0;
}

.card p {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    margin-bottom: 10px;
    color: #fff;
}

.card button {
    background-color: #d197c5d7;
    color: #fff;
    border: none;
    padding: 10px 20px;
    margin: 20px 0px;
    cursor: pointer;
    font-size: 16px;
    text-align: center;
    max-width: 100%;
    height: 42px;
    width: 200px;
}

.card button:hover {
    background-color: #ecaef09e;
}

.card-footer{
    border-bottom: 1px solid rgba(128, 128, 128, 0.8);
    height: 350px;
    width: 80%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;

}

.card-footer h3{

    font-family: 'Questrial', sans-serif;
    font-size: 36px;
    letter-spacing: 1px;
   
    min-width: 100%;
    height: 10%;
    margin: 0px auto;
    margin-top: auto;
    text-align: center;
}

.card-footer p{

    font-family: 'Open Sans', sans-serif;
    margin: 0px auto;
    padding: 15px 0px

}







.nuestras-marcas{
	width: 100vw;

}

.marcas-container{
	margin: 10vh auto;
	width: 90vw;
	display: flex;
	flex-wrap: wrap;
}

.marcas{
	width: 30%;
	height: 50px;
	margin: 5px auto;
	object-fit: contain;
}






          

@media only screen and (max-width: 1000px){

           body{
            width: 100vw
           }

           .mobile-nav-button{
            display: flex;
           }

           .mobile-button:hover{
            transform: rotate(90deg);
           }

           .mobile-button:hover:hover{
            transform: rotate(0deg);
           }

           .mobile-nav{
            color: #000;
            justify-content: space-around; 
            align-items: center;
           max-height: 70vh ;
           position: fixed;
            
           }

          

           .mobile-nav ul li{
            color: #000;
             display: flex;
             justify-content: flex-start;
             align-items: center;
             margin-bottom: 5px;
             width: 100%;
             max-height: 16%;
           }
           .mobile-nav ul li a{
            color: #000;
            display: flex;
            align-items: center;
            width: 100%;
          }
           .mobile-nav ul li a img{
            align-items: center;
            width: 10%;
            

            
          }

          .logo-navmobile{
            opacity: 0.5;
            max-height: 16%;
          }

          .mobile-ico-container{
            display: flex;
            width: 100%;
          }

          .mobile-ico-container a{
            background-color: rgb(228, 158, 224);
            display: flex;
            width: 33%;
          }
          .mobile-ico-container img{
             object-fit: contain ;
            
            max-width: 10%;
          }

          


          
            
           

          

            .desktop-nav{
                 
                display: none;
      


            
            }

            .main-header{

                
                min-width: 100vw;
            }

            .header-content{
                height: 40%;
            }

            .header-titulos p{
                font-size: 28px;
            }

            .highlighted-paragraph{
                display: none;
            }

            .social-icon-2{
                display: none;
            }

            .social-icon{
                
            
                width: 100%;
                height: 60px;
                
            }

            .social-icon-img{
                min-width: 30% ;
                margin: 0 auto;
            }

  






            .site-header{
                
                height: 60%;
            }

            .portada-container{
                
                align-items: flex-start;
            }

            .texto-portada{
                display: flex;
                flex-wrap: wrap;
                justify-content: flex-start; /* Alinea los elementos horizontalmente al centro */
                align-items: center;
                border: 1px solid #fdcdf3 ;
                justify-content: center;
                background: #fdcdf3;
                color: #fff;
                margin: 0px;
                padding: 10px;
                height: 20vh;
            }

            .slider-frame {
                width: 100vw;
                height: 60vw;
                margin: 0px auto 0;
                overflow: hidden;
            }
            
            .slider-frame ul {
                display: flex;
                padding: 0;
                width: 400%;
                
                animation: slide 12s infinite alternate ease-in-out;
            }
            
            .slider-frame li {
                width: 100%;
                list-style: none;
            }
            
            .slider-frame img {
                width: 100%;
                max-height: 60vw;
                object-fit: cover;
            
            }

            .portada h2 {
                
                font-family: 'Dawning of a New Day', cursive;
                line-height: 1;
                display: inline-block;

                text-align: left;
                max-height: 30%;
                font-size: 80px;
                font-weight: bold;
                margin: 0px;
                
                
                

            }

            .second-parraph {
                color: #000;
                text-align: center;
                margin: 0px;
                /* font-family: 'Questrial', sans-serif; */
                font-family: 'Dawning of a New Day', cursive;
                font-size: 40px;
                margin-left: 15px;
                
                
                 
                
            }



            .first-description {
    
                max-height: 30%;
                line-height: 0.8;
                letter-spacing: 4px;
                width: 100%;
                font-size: 48px;
                font-weight: bold;
                margin-top: 20px;
                margin-bottom: 20px;
                margin-left: 20px;
                text-align: left;
                
            }

            .logo{

                min-width: 30vw;
            } 

           

            .precards-container{
                width: 100%;
                height: 600px;
            }

            .titulosprecards-container{

                width: 70%;
                margin: 20% auto;
            }

            .titulosprecards-container h2{
                font-family: 'Dawning of a New Day', cursive;
                font-size: 90px;
                margin-bottom: 20px;
                display: flex;
                width: 100%;
            }

            .titulosprecards-container p{
                font-family: 'Genos', sans-serif;
                font-size: 38px;
                letter-spacing: 2px;
                font-weight: bold;
                height: 100%;
                width: 100%;
                text-align: center;
            }

            .titulosprecards-container h2 p{
                font-family: 'Dawning of a New Day', cursive;
                font-weight: 200;
                font-size: 65px;
                text-align: left;
                align-self: center;
                margin-left: 20px;
            }




            .valoracion-container{
                display: flex;
                flex-wrap: wrap;
                background: #ffa7c5;
                width: 100vw;
                
                margin: 0px auto;
                padding: 0px;
                overflow: hidden;
            }
            
            .valoracion-container img{
                width: 100%;
                height: 40vh;
                margin: 0px auto;
                padding: 0px;
                object-fit: cover;
            
            }
            
            .valoracion-textos{
                width: 90%;
                margin: 60px auto 0px;
                
            }
            
            .valoracion-textos h2{
                font-size: 120px;
            
            }
            
            .valoracion-textos p{
                font-family: sans-serif;
                font-size: 30px;
                margin: 10px auto;
            }
            
            .valoracion-button{
                width: 300px;
                font-size: 40px;
                background: #000;
                color: #fff;
                padding: 35px;
                text-align: center;
                justify-content: center;
                border-radius: 10px;
                margin: 20px auto 35px;
            
            }


           

            .cards-section{
                width: 100%;}


            .card{

                width: 85vw;
                height: 60vh;
                max-width: 85vw;
            }

            .card h3{
                height: 20%;
                font-size: 58px;
                letter-spacing: 5px;
            }

            .titulos-card{
                justify-content: space-around;
                align-items: flex-end;
                align-self: flex-end;
                width: 100%;
                height: 45%;
                display: flex;
            
            }

            .titulos-card p{
                font-family: 'Genos', sans-serif;
                font-size: 44px;
                font-weight: 700;
                width: 90%;
                margin: 0 auto;
                text-align: center;
                
                
                
            }

            .titulos-card button{
                width: 400px;
                height: 100px;
                font-size: 44px;
                margin: 20px auto;
                margin-bottom: 80px;
                
            }





            .containerUbicacion{
                width: 100vw;
                height: 100%;
                background: #fff;
            }
            
            .containerUbicacion .titulosContainer{
                background: #000;
                color: #fff;
                height: 150px;
            }
            .containerUbicacion .titulosContainer h2{
               text-align: center; 
               line-height: 60px;
            }
            
            
            .containerUbicacion .titulosContainer h2,p{
                margin: 0 auto;
                padding: 8px;
            }
            
            
            
            
            
            
            footer{
                display: flex;
                flex-wrap: wrap;
               background: #000;
            }
            
            footer p{
                margin: 10px auto;
                color: #fff;
                text-align: center;
                font-weight: 700;
                font-size: 18px;
            }
            
            
            .socialesContainer{
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
            }
            
            .socialesItem{
                text-align: center;
                width: 33%;
                align-items: center;
                justify-content: center;
            }
            
            .socialesItem img{
                margin: 4px auto;
                width: 30%;
            }
            
            .socialesWtsButton{
                letter-spacing: 1px;
                font-weight: 700;
                border-radius: 18px;
                padding: 20px;
                margin: 12px auto;
                background: green;
                border: 1px solid #fff;
                color: #fff;
            }
            
            .socialesCorreo{
                text-align: center;
                color: #fff;
                width: 100%;
            }
            
            
            


}

@keyframes slide {
	0% {margin-left: 0;}
	20% {margin-left: 0;}
	
	25% {margin-left: -100%;}
	45% {margin-left: -100%;}
	
	50% {margin-left: -200%;}
	70% {margin-left: -200%;}
	
	75% {margin-left: -300%;}
	100% {margin-left: -300%;}
}