.poppins-light {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: normal;
}
.poppins-regular {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
}
.poppins-bold {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: normal;
}
.poppins-black {
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-style: normal;
}
html {
    scroll-behavior: smooth;
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}
a {
    text-decoration: none;
    cursor: pointer;
}
:root {
    --title: 3.5rem;
    --subtitle: 2.5rem;
    --parrafos: 1rem;
    --footer: .7rem;
    --dur: 0.3s;
    --color1: #000000;
    --color2: #F5F5F5;
    --color3: #E8DFDC;
    --color4: #F0DCAD;
    --color5: #E2E2E0;
    --color6: rgba(29, 36, 44, .8);
    --color7: #FF1241;
    --color8: #00DB49;
    --color9: #6B727A;
    --color10: #8F8100;
    --color11: #DDE8EE;
    --color12: #1877F2;
    --gradient1: linear-gradient(135deg, rgb(255, 255, 255) 10%, rgb(255, 255, 255) 30%, rgb(245, 245, 245) 70%);
}
body{
    overflow-x: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--color1);
    padding-top: 7em;
}
picture{
    width: 6em;
    height: auto;
    position: absolute;
    top: 1em;
    left: 0;
    right: 0;
    z-index: 100;
    margin: auto;
}
picture img{
    width: 6em;
    height: auto;
}
.linea{
    width: 100dvw;
    height: calc((100dvh - 7em) / 3);
    display: flex;
    flex-direction: column;
    gap: 2em;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}
#bg1::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100dvw;
    height: calc((100dvh - 7em) / 3);
    background-image: url('/assets/img/construccion.webp');
    background-size: cover;
    background-position: 0 90%;
    background-repeat: no-repeat;
    filter: blur(0px) opacity(.3);
    z-index: -1;
}
#bg2::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100dvw;
    height: calc((100dvh - 7em) / 3);
    background-image: url('/assets/img/urbanizacion.webp');
    background-size: cover;
    background-position: 0 0;
    background-repeat: no-repeat;
    filter: blur(0px) opacity(.3);
    z-index: -1;
}
#bg3::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100dvw;
    height: calc((100dvh - 7em) / 3);
    background-image: url('/assets/img/acabados.webp');
    background-size: cover;
    background-position: 0 50%;
    background-repeat: no-repeat;
    filter: blur(0px) opacity(.3);
    z-index: -1;
}
h2{
    width: 90dvw;
    height: auto;
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    letter-spacing: .2em;
    text-align: center;
    color: var(--color2);
}
.linea a{
    color: var(--color2);
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-size: 1rem;
}
.button{
    width: 7em;
    height: 2em;
    border: 1px solid var(--color2);
    border-radius: .3em;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(3px);
}
@media only screen and (min-width:481px) and (max-width:768px){
    body{
        flex-direction: row;
        padding-top: 0em;
    }
    .linea{
        width: calc(100dvw / 3);
        height: 100dvh;
        gap: 1em;
        justify-content: end;
        padding-bottom: 1em;
    }
    #bg1::before{
        width: calc(100dvw / 3);
        height: 100dvh;
        background-position: 50% 0;
    }
    #bg2::before{
        width: calc(100dvw / 3);
        height: 100dvh;
        background-position: 50% 0;
    }
    #bg3::before{
        width: calc(100dvw / 3);
        height: 100dvh;
        background-position: 0 0;
    }
    h2 {
        font-size: 1rem;
        letter-spacing: .3em;
    }
}
@media only screen and (min-width:769px) and (max-width:1279px) and (orientation: portrait){
    #bg2::before{
        background-position: 0 50%;
    }
}
@media only screen and (min-width:769px) and (max-width:1279px) and (orientation: landscape){
    body{
        flex-direction: row;
        padding-top: 0em;
    }
    .linea{
        width: calc(100dvw / 3);
        height: 100dvh;
        gap: 1em;
        justify-content: end;
        padding-bottom: 4em;
    }
    #bg1::before{
        width: calc(100dvw / 3);
        height: 100dvh;
        background-position: 50% 0;
    }
    #bg2::before{
        width: calc(100dvw / 3);
        height: 100dvh;
        background-position: 50% 0;
    }
    #bg3::before{
        width: calc(100dvw / 3);
        height: 100dvh;
        background-position: 50% 0;
    }
    h2 {
        font-size: 1rem;
        letter-spacing: .3em;
    }
}
@media only screen and (min-width:1280px){
    body{
        flex-direction: row;
        padding-top: 0em;
    }
    picture{
        width: 8em;
        top: 2em;
    }
    picture img {
        width: 8em;
    }
    .linea{
        width: calc(100dvw / 3);
        height: 100dvh;
        gap: 1em;
        justify-content: end;
        padding-bottom: 4em;
    }
    #bg1::before{
        width: calc(100dvw / 3);
        height: 100dvh;
        background-position: 50% 0;
        filter: blur(10px) opacity(.1);
        transition: all 0.3s ease-in-out;
    }
    #bg2::before{
        width: calc(100dvw / 3);
        height: 100dvh;
        background-position: 50% 0;
        filter: blur(10px) opacity(.1);
        transition: all 0.3s ease-in-out;
    }
    #bg3::before{
        width: calc(100dvw / 3);
        height: 100dvh;
        background-position: 50% 0;
        filter: blur(10px) opacity(.1);
        transition: all 0.3s ease-in-out;
    }
    #bg1:hover::before,
    #bg2:hover::before,
    #bg3:hover::before{
        filter: blur(0px) opacity(.5);
    }
    h2 {
        font-size: 1rem;
        letter-spacing: .3em;
    }
    .linea a {
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
    }
    .linea:hover a {
        animation: button .5s ease-in-out forwards;
        animation-delay: .3s;
    }
    @keyframes button {
        0% {
            opacity: 0;
            transform: translateY(-1em);
        }
        50% {
            opacity: 1;
        }
        100% {
            opacity: 1;
            transform: translateY(.5em);
        }
    }
}