@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:wght@300&family=Archivo:wght@200&family=Comfortaa:wght@300&family=Lato:wght@300;400;700&family=Lobster&family=Open+Sans:wght@300&family=Plus+Jakarta+Sans:wght@200;300&family=Roboto:wght@100;300&family=Source+Sans+Pro:wght@300&family=Work+Sans:ital,wght@0,300;1,300&display=swap');
*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
    font-family: "Albert Sans";
    /* font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; */
}
body{
    background-color: rgb(30, 30, 30);
    color:white;

}

.logo-wsp{
    position:fixed;
    bottom: 1rem;
    right: 1rem;
    width: 4rem;

}
.logo-wsp:hover{
    transform: scale(1.1);
    transition: all 0.3s ease-in-out ;
}
header a{
    margin-top: 5px;
    width: 35%;
}
.linkHome{
    width: 100%;
    height: 40px;
    border-radius: 3px;
}
header{
    display: flex;
    align-items: center;
    width: 100%;
    z-index: 2000;
    position:sticky;
    top:0;
}
#hamburguesa{
    display: none;
}
label{
    display: none;
}
.fa-solid.fa-bars{
    display: block;
}
.menu-desktop-container{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* background-color: white; */
    backdrop-filter: blur(200px);
    position: relative;
}
.menu-desktop{
    width: 100%;
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: space-evenly; 
}
.menu-desktop-link{
    font-size: 1.2rem;
    font-weight: 900;
    color:white;
}
.menu-desktop-item.container{
    position: relative;
    height: 50px;
    top:13px;

}
.submenu-desktop-general{
    position: absolute;
    top:39px;
    left:-400%;
    margin-left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    visibility: hidden;
    opacity: 0;   
} 

.submenu-desktop-general-item.container{
    background-color: rgba(238, 238, 238, 0.749);
    backdrop-filter: blur(8px);
    padding:10px;
    height: 300px;
    width:180px;

}
.submenu-desktop-general-link{
    font-weight: 900;
    font-size: 1.1rem;
    color: black;
    width: 100%;

}
.dormitorio{
    height: 250px;
    white-space: nowrap; 
    /* text-overflow:clip; */
    overflow: hidden; 
    

}


.submenu-desktop-item{
    padding:2px;
    width: 100%;
    white-space: nowrap; 
    text-overflow:ellipsis;
    overflow: hidden; 
}
.submenu-desktop-link{
    font-weight: 600;
    color:rgb(90, 90, 90);
}

/* HOVERS DE HEADER*/
.menu-desktop-item:hover .menu-desktop-link{
    color:rgb(146, 0, 209);
}
.menu-desktop-item.container:hover .submenu-desktop-general{
    visibility: visible;
    opacity: 1;
    transition: all 0.4s; 
}
.submenu-desktop-link:hover{
    color:black;
    transition: all 0.3s;
}

/* CONTACTO HEADER*/
.contacto-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap:10px;
    width: 100%;
    height: 40px;
    background-color: #C368F5;
    z-index: 1900;
    padding-left:5px;
    padding-right: 5px;
}
.contacto-header h3{
    color:white;
    width: 100%;
    text-align: center;
    font-size: 1.3rem;
}
.wsp{
    color:white;
 width: 100%;
 display: flex;
 font-size: 1.3rem;
 align-items: center;
 justify-content: center;
 gap:5px;
 font-weight: 600;
}
.fa-brands.fa-whatsapp{
    color:yellowgreen;
    font-size: 1.6rem;
    font-weight: 900;
}
.redes-header{
    display: flex;
    justify-content: center;
    gap:5px;
    width: 100%;
    text-align: center;
    font-size: 1.3rem;
}
.fa-brands.fa-instagram, .fa-brands.fa-facebook{
    color:white;
}
.contactanos{
    display: none;
}

/* BARRA DE BUSQUEDA*/
#busqueda-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 2rem 0 0 0 ;
}
#busqueda-container input{
    border: 1px solid gray;
    border-radius: 3px;
    font-size: 1.2rem;
    font-weight: 500;
}
.inputs-search{
    display: flex;
    margin: 0 auto;
    gap:5px;
}
.message-search{
    margin:0 auto;
}
.search-advanced-container{
    display: flex;
    justify-content: center;
    width: 100%;
}
.search-advanced-link{
    font-size: 1.5rem;
    font-weight: 900;
    margin-top:3rem;
    text-decoration: none;
    color: blueviolet;
    border-top: 0;
    border-bottom: 2px solid gray;
    
}
.btnSearch{
   border: 1px solid black;
   width: 70px;
   border-radius: 50px;
   margin-left: 5px;
   font-weight: 600;

}

/* PRODUCTOS FILTRADOS */
.productosFiltrados{
    display: flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items: center;
    gap:1rem;
    width: 100%;
}

.productosFiltrados-item{
    border: 1px solid rgb(112, 112, 112);
    border-radius: 4px;
    display: flex;
    gap: 0.2rem;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem;
    height: 23rem;
    width: 19rem;
    transition: all 0.3s ease-in-out;
   
}

.titulo-search{
    margin-top: 0.5rem;
    width: 60%;
    word-wrap: break-word;
    color:white;
    
}
.imagen-product-search{
   width: 17rem;
   height:15rem;
   object-fit: contain;
   transition: all 0.3s ease-in-out;
   background-color: rgb(193, 193, 193);
   border-radius: 4px;
}

.item{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.productosFiltrados-item:hover{
    background-color: rgb(203, 203, 203);
    color:black;
    cursor:pointer;
}
.productosFiltrados-item:hover .titulo-search{
    color:black;
}
.productosFiltrados-item:hover .categoria-search{
    color:black;
}
.categoria-search{
    color: gray;
}
.result{
    text-align: center;
    color: gray;
    margin-bottom: 0.5rem;
}
.link-producto{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.seleccionado{
    max-width: 900px;
    width: 90%;
    max-height: 750px ;
    height: 80%;
    /* padding-bottom: 10px; */
}
.seleccionado img{
   max-width: 900px;
   width: 100%;
   max-height: 600px;
   height:100%;
   object-fit: contain;
   transition: all 0.3s ease-in-out;
   background-color: rgb(193, 193, 193);
   border-radius: 4px;
}
.seleccion{
    display: flex;
    flex-wrap: wrap;
    gap:1rem;
}

/* CONSULTA MODAL*/
.modalConsulta__container{
    position: absolute;
    top:54px;
    right: 0;
    max-width: 600px;
    width: 100%;
    padding:10px;
    background-color: rgba(255, 255, 255, 0.779);
    /* backdrop-filter: blur(100px); */
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:6px;
    padding-top: 40px;
    color: blueviolet;
    font-size: 1.3rem;
    border-bottom-left-radius: 10px;
}
.modalConsulta__container textarea{
    width: 80%;
}
.modalConsulta__container img{
    object-fit: contain;
    width: 80%;
    height: 250px;
    border-radius: 10px;
}
.btnEnviarConsulta, .btnEnviarConsultaContacto{
    border-radius: 20px;
    border: none;
    font-weight: 500;
    padding:10px;
    background-color: yellow;
    cursor:pointer;
}
.modalConsulta__container i{
    color:black;
    position: absolute;
    left: 15px;
    top:10px;
    font-size: 1.5rem;
    cursor: pointer;
}
.modalConsulta__container h3,.modalConsulta__container p{
    text-align: center;
}

/* SLIDER PUBLICITARIO*/
.slider-publicitario-container{
    overflow: hidden;
   
}
.slider-publicitario img{
   width: 100%;
   height: 100%;
   object-fit: contain;
}
.slider-publicitario{
    display: flex;
    width: 300%;
    animation: cambiarImagen 10s infinite alternate ease-in-out;
    
}
.slider-publicitario li{
    width:100%; 
}

@keyframes cambiarImagen{
    0%{margin-left:0}
    30%{margin-left:0}

    33%{margin-left:-100%}
    60%{margin-left:-100%}

    63%{margin-left:-200%}
    100%{margin-left:-200%}
}

/* SERVICIOS CONTAINER */
.servicios-container{
    display: flex;
    height: 8rem;
    background-color:rgb(55, 55, 55);;
    align-items: center;
    justify-content: space-evenly;
    margin-top:1rem;
}
.servicios-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 1.6rem;
    width: 100%;
}
.fa-solid.fa-store,.fa-solid.fa-industry, .fa-solid.fa-circle-check, .fa-solid.fa-medal{
    font-size: 2.5rem;
    color:rgb(116, 0, 210);
}

/* PRODUCTOS DESTACADOS */
.productos-destacados-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 5rem;
    gap:10px;
}
.productos-destacados-container h3{
    font-size:2rem;
    font-weight: 900;
    text-align: center;
}
.productos-destacados{
    display: flex;
    gap:20px;
}
.productos-destacados img{
    width: 400px;
    height: 300px;
}
.productos-destacados-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:5px;
    border:1px solid rgb(112, 112, 112);
    border-radius: 4px;
    padding: 10px;
}
.productos-destacados-item h4{
    font-size: 1.4rem;
    text-align: center;
}
.productos-destacados-item a{
    font-weight: 900;
    color:rgb(116, 0, 210);
}

 /* WORKPROGRESS CONTAINER */
 .workprogress-container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 5rem;
    text-align: center;
}
.workprogress{
    display: flex;
    justify-content: center;
    align-items: center;
    gap:30px;
    margin-top: 25px;
}
.workprogress-container h3{
    font-size:2rem;
    font-weight: 900;
}
.workprogress-item{
    height: 100%;
    width: 15rem;
    height: 20rem;
    border:1px solid rgb(112, 112, 112);
    border-radius: 4px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 0px 6px 6px rgba(0,0,0,0.1);
}

.workprogress-item:hover{
    transform: scale(1.02);
    transition: all 0.3s;
}
.fa-solid.fa-1, .fa-solid.fa-2, .fa-solid.fa-3, .fa-solid.fa-4{
    color:black;
    font-size: 6rem; 
}


/* SLIDER WORKS CONTAINER*/
.slider-works-container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr ;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 20px;
    background-color: rgb(30, 30, 30); ;
    padding:20px;
    margin-top:5rem;
}
.slider-works-item img{
    width: 100%;
    height: 25rem;
    object-fit: cover;
    border-radius: 15px;
}

.slider-works-item.uno{
    grid-column: 1/3;
    grid-row: 1/3;
   
}
.slider-works-item.dos{
    grid-column: 3/5;
    grid-row: 1/3;
}
.slider-works-item.tres{
    grid-column: 5/7;
    grid-row: 1/3;
}
.slider-works-item.cuatro{
    grid-column: 1/4;
    grid-row: 3/6;
}
.slider-works-item.cinco{
    
    grid-column: 4/7;
    grid-row: 3/5;
} 
.slider-works-item.cinco img{
    object-fit:fill;
}
.slider-works-item.seis{
    grid-column: 1/7;
    grid-row: 5/7;
}

.verGaleria {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top:5rem;
    font-size: 2rem;
    font-weight: 900;
    margin-left:10px;
    margin-right: 10px;
    text-align: center;
}
footer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
    border-top: 1px solid rgb(210, 210, 210);
}
footer img{
    width: 150px;
    border-radius: 10px;
}

/** ESTILOS DE SHOWALLMUEBLES/*/
.showAllMuebles{
    display: flex;
    flex-direction:row;
    flex-wrap:wrap; 
    justify-content: center;
    gap:1rem; 
    margin-top: 2rem;
    padding-bottom: 2rem;
    background-color: rgb(92, 92, 92);
    padding-top: 2rem;   
}
.showAllMuebles .productosFiltrados-item{
    border: 1px solid rgb(154, 154, 154);
    padding-bottom: 5px;
    
}
.showAllMuebles .btnVerMas{
   color: #C368F5;
   font-size: 1.1rem;
   font-weight: 800;
}
.showAllMuebles .categoria-search{
    color: rgb(210, 210, 210);
}

.consultarProducto{
    background-color: yellow;
    width: 120px;
    height: 25px;
    border-radius: 20px;
    border:none;
    color:black;
    cursor: pointer;
    margin-top:10px;
}

.fa-solid.fa-bars{
    display: none;
}


.contacto__container{
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    gap:40px;
}
.redes__contacto{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:5px;
    font-size: 1.3rem;
}
.redes__contacto li{
    letter-spacing: 3px;
}

.redes__item.email{
    font-size: 1.1rem;
}

#contacto__consulta{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap:5px;
}
#contacto__consulta input{
    width: 100%;
    height: 30px;
    border-radius: 5px;
    border: none;
    padding-left: 5px;
}

.fa-solid.fa-location-dot {
    display: flex;
    gap: 5px;
    color:red;
    font-size: 1.3rem;
    text-align: center;
    padding: 0 10px;
}
.contacto__container i h3{
    display: flex;
    gap: 10px;
    color:white;
    font-size: 1.2rem;
}
.contacto__container iframe{
    border-radius: 5px;
    width: 80%;
    margin-bottom: 5rem;
}





@media (max-width:481px){ 
    .fa-solid.fa-bars{
        display: block;
    }
    header a{
        margin-top: 5px;
        width: 35%;
    }
    .linkHome{
        width: 80%;
        height: 40px;
        border-radius: 3px;
    }
    .fa-solid.fa-bars{
        display: flex;
    }
    .slider-publicitario img{
        height: 350px;
    }
    /* MODIFICO WORKPROGRESS CONTAINER */
   .workprogress-item .fa-solid.fa-1, .workprogress-item .fa-solid.fa-2, .workprogress-item .fa-solid.fa-3, .workprogress-item .fa-solid.fa-4{
    font-size: 4rem;
   }
   .workprogress-item{
    padding:1rem 9rem;
   }
   .productos-destacados{
    width:100%;
   }
   .productos-destacados img{
    width: 100%;
    height: 100%;
   }
   #contacto__consulta input{
    width: 100%;
    height: 30px;
    border-radius: 5px;
    border: none;
    padding-left: 5px;
}
   
}



@media (max-width:769px){

    /* MENU HAMBURGUESA */
    label{
        display: block;
    }
    .fa-solid.fa-bars{
        display: block;
    }
    .menu-desktop{
        display: flex;
        position: absolute;
        flex-direction: column;
        background-color: #C368F5;
        width: 40%;
        height: 100vh;
        left:-40%;
        top:3.42rem;

    }
    .menu-desktop-container{
        flex-direction: row-reverse;
    }
    .menu-desktop-item.container{
        width: 100%;
        text-align: center;
    }
    .menu-desktop-link{
        color:white;
    }
    .menu-desktop-item:hover .menu-desktop-link{
        color:rgb(227, 227, 227) 
    }
    .fa-solid.fa-bars{
       margin-left: 10px;
       font-size: 2rem; 
       cursor: pointer;
       position: relative;
       color:white;
    }
    #hamburguesa:checked ~ .menu-desktop{
        left:0;
        transition: all 0.3s ease-in-out;
    }
    #hamburguesa:not(:checked) ~ .menu-desktop{
        left:-40%;
        transition: all 0.3s ease-in-out;
    } 

    .submenu-desktop-general-item.container{
        
        width: 100%;
        height: 10vh;
        background-color: rgb(234, 234, 234);
        display:flex;
        justify-content: center;
        align-items: center;
        border-bottom: 1px solid rgb(219, 218, 218);
    }
    
    .submenu-desktop-general{
        flex-direction: column;
        top:-17.95rem;
        left: 100%;
        height: 100vh;
        margin:0 auto;
        
    }
    .submenu-desktop-item{
        display: none;
    }

    .seguinos{
        display: none;
    }
    .contactanos{
        display: block;
    }

    /* SERVICIOS CONTAINER*/
    .servicios-container{
        flex-direction: column;
        height: auto;
        gap:30px;
        padding:20px;
     }
     .servicios-item{
        flex-direction: row;
     }
     .servicios-item i{
        width: 40%;
        text-align: center;
     }
     .servicios-item h3{
        width: 100%;
        font-size: 1.3rem;
        text-align: start;
     }
    
    /* PRODUCTOS DESTACADOS*/
    .productos-destacados{
        flex-direction: column;
    }
    .productos-destacados-container{
        padding:15px;
    }
    .productos-destacados-item h4{
        font-size: 1.6rem;
    }
    .productos-destacados-item a{
        font-size: 1.4rem;
    }
   

    /* WORKPROGRESS */
    .workprogress{
        display: flex;
        flex-direction: column;
        gap:2.5rem;
    }
    .workprogress-item{
        height: auto;
        padding: 0.8rem 13rem;
        
    }
    
    /* SLIDER WORKS CONTAINE */
    .slider-works-container{
        display: flex;
        flex-direction: column;
    }
   
}

@media (max-width: 1024px){
    header a{
        margin-top: 5px;
        width: 100%;
    }
    .linkHome{
        width: 100%;
        height: 40px;
        border-radius: 3px;
    }
    .contacto-header h3{
        font-size: 1.1rem;
    }
    .servicios-item{
        text-align: center;
    }
    .productos-destacados{
        flex-wrap: wrap;
        justify-content: center;
    }
    
}
@media (max-width: 1200px){
    header a{
        margin-top: 5px;
        width: 30%;
    }
    .linkHome{
        width: 100%;
        height: 40px;
        border-radius: 3px;
    }
    .workprogress-item{
        width: 11rem;
    }
} .productos-destacados{
    flex-wrap: wrap;
    justify-content: center;
}



@media (min-width: 1440px){
    header a{
        margin-top: 5px;
        width: 15%;
    }
    .linkHome{
        width: 100%;
        height: 40px;
        border-radius: 3px;
    }
    .workprogress{
        gap:100px;
        display: flex;
    } 
    .productos-destacados{
        display: grid;
        grid-template-columns: 400px 400px;
    }
   
    

}

@media (max-width:425px){
    .workprogress-item{
       padding: 1rem 9rem;
    }
    
}