@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

/*
PALETA DE COLORES:

#441f03 (oscuro)
#F5F0E6 (beige claro)
#B07C59 (marron claro)
#7B4B28 (marron medio)
#C19A6B (ocre tostado)
#3E2C23 (marron oscuro)
#fabd8f (claro bg)
*/


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


body{
    font-family: 'montserrat';
    background-color: #f5f0e6;
    width: 100%;
    min-height: 100vh;
}



/*--- seccion header ---*/

.header{
    background-color: #441f03;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    font-size: 1.2rem;
    color: #f5f0e6;
    width: 100dvw;
    z-index: 20;
    animation: header-movement both;
    animation-timeline: scroll();
}

.header__nav{
    margin-right: 10px;
}

.header__nav-list{
    display: flex;
    flex-direction: row;
    gap: 10px;
    width: auto;
    height: auto;
    list-style: none;
}

.header__nav-item{
    padding: 6px 13px;
}

.header__nav-item a{
    text-decoration: none;
    color: inherit;
    text-transform: uppercase;
    font-weight: 700;
}

.header__nav-item:hover{
    background-color: #B07C59 ;
    color: #441f03;
    border-radius: 6px;
    padding: 6px 13px;
}


.header__logo{
    width: 64px;
    border-radius: 50%;
    margin-left: 10px;
}
/*-------------------------------------*/


/*---   SECCION MAIN ---*/  

.main{
    animation: aparecer 3s -.6s both;
}

.main_wrapper{
    width: 100dvw;
    height: auto;
    
}

.main__data-container{
    background-image:  linear-gradient(#000e, #000c), url(../img/fondo.webp);
    background-position: center;
    background-size: cover;
    width: 100dvw;
    min-height: 70dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    
}


.main__data{
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #f5f0e6;
    width: 100%;
    min-height: 60dvh;
}


.main__data-titulo{
    color: #B07C59;
    font-family: inherit;
    font-size: clamp(52px, 9dvw, 80px);
    text-transform: uppercase;
    margin-bottom: 30px;
    text-wrap: balance;
    overflow-wrap: break-word;
    word-break: break-word;
    text-align: center;
}

.main__data-subtitulo{
    margin-bottom: 20px;
    opacity: .6;
    font-size: clamp(14px, 2vw, 18px);
    text-wrap: balance;
    overflow-wrap: break-word;
    word-break: break-word;
}

.main__data-descripcion{
    margin: 10px;
    text-wrap: balance;
    overflow-wrap: break-word;
    word-break: break-word;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    opacity: .7;
    position: relative;
    bottom: -30px;
    font-size: clamp(14px, 2vw, 18px);
}

.titulo-list{
    position: relative;
    bottom: -68px;
}

.main__data-list{
    opacity: .7;
    list-style: circle;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    bottom: -70px;
}

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


/*--- seccion trabajos ---*/

.section__container{
    width: 100%;
    height: fit-content;
    background-color: inherit;
    display: flex;
    flex-direction: column;
    text-align: center;
    margin-top: 30px;
}

.section__data{
    width: 100%;
    height: 16dvh;
    color: #3E2C23;
    text-wrap: balance;
    overflow-wrap: break-word;
    word-break: break-word;
}

.seccion__titulo{
    padding: 10px;
}

.section__descripcion{
    margin-top: 10px;
    font-size: clamp(14px, 2vw, 18px);
    text-wrap: balance;
    overflow-wrap: break-word;
    word-break: break-word;
}


.seccion__link-container{
    width: 100dvw;
    height: 40dvh;
    margin-top: 5px;
    background-color: #441f03;
}

.section__trabajos-container{
    display: grid;
    grid-template-columns: 1fr;
    place-content: center;
    max-width: 1300px;
    margin: auto;
    width: 90%;
    max-width: 1300px;
    margin: auto;
    gap: 20px;
    padding: 12px;
    margin-top: 10px;
}


.section__trabajos{
    background-image: linear-gradient(#000c, #000c);
    background-position: center;
    background-size: contain ;
    display: grid;
    place-content: center;
    height: 10vh;
    color: #f5f0e6;
    box-shadow: 0 0 5px #B07C59;
    border-radius: 6px;
    animation: aparecer both;
    animation-timeline: view();
    overflow-wrap: break-word;
    word-break: break-word;
}


.img--muebles{
    background-image:  linear-gradient(#000c, #000c), url(../img/fondo-muebles/fondo2.jpg);
}

.img--cielorraso{
    background-image:  linear-gradient(#000c, #000c), url(../img/fondotecho.jpg);
    
}

.img--pisos{
    background-image:  linear-gradient(#000c, #000c), url(../img/fondopiso.jpg);
    background-size: cover;
}

.section__trabajos:hover{
    opacity: .8;
    border: 2px solid #f5f0e6;
}


.seccion__link-container a{
    text-decoration: none;
    text-transform: uppercase;
}
/*------------------------------------*/


/*--- seccion footer ---*/

.footer__container{
    width: 100dvw;
    height: 20dvh;
    background-color: #333;
    color: #f5f0e6;
    overflow-wrap: break-word;
    word-break: break-word;
    display: flex;
}


.footer__data-container{
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 50%;
    min-height: 100%;
}

.footer__titulo-container{
    display: flex;
    align-items: center;
    gap: 10px;
}


.footer__titulo{
    text-transform: uppercase;
}

.footer__logo{
    width: 64px;
    border-radius: 50%;
    margin-top: 5px;
    margin-left: 5px;
}

.footer__data{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    opacity: .8;
    margin-top: 5px;
    font-size: small;
    text-wrap: balance;
}

.footer__wpp{
    padding: 4px 5px;
    background-color: green;
    border-radius: 5px;
    font-size: medium;
    margin-bottom: 3px;
}

.footer__wpp a{
    text-decoration: none;
    color: #f5f0e6;
}

.footer__data-description{
    display: flex;
    align-items: center;
    gap: 1px;
    margin-left: 10px;
}


.footer__redes-container{
    width: 50%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.footer__list{
    list-style: circle;
    margin-left: 30px;
}

.footer__link-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-width: 100%;
    gap: 10px;
    margin-top: 15px;
}

.footer__face a{
    text-decoration: none;
    color: #f5f0e6;
    font-size: medium;
}

.footer__insta a{
    text-decoration: none;
    color: #f5f0e6;
    font-size: medium;
}
/*------------------------------------*/



/*--- animaciones ---*/

@keyframes header-movement{
    form{
        padding: 18px 0;
        background-color: #fff;
    }

    to{
        padding: 5px 0;
        color: #f5f0e6;
        z-index: 10;
        background-color: #441f0399;
    }
}


@keyframes aparecer {
    0%{
        opacity: 0;
    }

    50%{
        opacity: 1;
    }
}
/*--------------------------------------------*/



/*--- seccion queries ---*/

@media (max-width: 600px){
    .header{
        font-size: 15px;
        flex-direction: column;
        align-items: center;
    }

    .header__logo{
        width: 40px;
    }

    .header__nav-list{
        gap: 0;
    }

    .header__nav-item{
        padding: 4px 10px;
    }
}

@media (min-width: 800px){
    .footer__container{
        justify-content: space-between;
    }

    .footer__redes-container{
        justify-content: center;
        align-items: center;
        min-height: auto;
    }


    .footer__list{
        position: relative;
        left: -40px;
        bottom: -25px;
    }

    .footer__link-container{
        position: relative;
        bottom: -25px;
    }

}

@media (max-height: 750px) {
    .main__data {
        padding: 10px;
        height: auto;
        overflow: scroll;
    }

    .main__data-titulo {
        font-size: clamp(24px, 6vw, 40px);
        margin-top: 10px;
        margin-bottom: 20px;
    }

    .main__data-subtitulo,
    .main__data-descripcion {
        font-size: 14px;
        margin: 5px 0;
    }

    .main__data-list {
        gap: 5px;
        font-size: 13px;
    }

    .seccion__link-container{
        min-height: fit-content;
    }

    .section__data {
        height: auto;
        padding: 10px;
    }

    .section__trabajos {
        height: 10vh;
    }

    .footer__container {
        height: auto;
        font-size: small;
    }

    .footer__data{
        margin-bottom: 10px;
        font-size: 12px;
    }

    .footer__logo{
        width: 32px;
    }

    .footer__titulo{
        font-size: 13px;
        text-wrap: balance;
    }

}