:root{
    --white: #FFF;
    --black: #000;
    --light-gray: #E4E5E9;
    --dark-gray: #22252A;
    --red: #EF220C;
    --yellow: #FBB03B;
    --sand: #C7B299;
}
/* GENERAL */

*{
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    letter-spacing: .6px;
    scroll-behavior: smooth;
}

a,
a:hover{
    text-decoration: none;
}

.black-bg{
    background-color: var(--black);
}

.white-bg{
    background-color: var(--white);
}

.light-gray-bg{
    background-color: var(--light-gray);
}

.dark-gray-bg{
    background-color: var(--dark-gray);
}

.white-txt,
.white-txt:hover{
    color: var(--white);
}

.black-txt,
.black-txt:hover{
    color: var(--black);
}

.yellow-txt{
    color: var(--yellow);
}

.uppercase{
    text-transform: uppercase;
}

span{
    font-size: 1em;
}

.bold{
    font-weight: 700;
}

.btn-icon{
    width: 15px;
    height: 15px;
}

.section-title{
    position: relative;
    font-size: 3rem;
}

.section-title::after{
    content: '';
    position: absolute;
    height: 15px;
    width: 2px;
    background-color: var(--dark-gray);
    left: calc(50% - 1px);
    bottom: -25px;
}

.vh-100{
    height: 100vh;
}

.bg-cover{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bajada-section{
    max-width: 415px;
    margin: auto;
    letter-spacing: .8px;
}

.rounded-borders{
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    overflow: hidden;
}

.medium-container{
    width: 66.6666667%;
}

.magnifier{
    width: 35px;
    height: 35px;
}

.se-card .magnifier{
    top: 15px;
    right: 15px;   
}

.magnifier img{
    object-fit: contain;
    object-position: center;
}

.se-card .text-box{
    width: 35%;
    top: 7%;
}

.se-card .text-box .bg{
    mix-blend-mode: multiply;
    left: 0;
    top: 0;
    z-index: 0;
}

.se-card .text-box img{
    z-index: 1;
}

.iframe-wrapper{
    top: 0;
    left: 0;
}

.form-container h2{
    line-height: .9;
    font-size: 2.6rem;
}

.form-container form p{
    margin: .25rem 0;
}

.form-container form p input{
    width: calc(100% - 4px);
    color: black;
    background-color: var(--light-gray);
    border: none;
    font-weight: 700;
}

.form-container form p input::placeholder{
    color: black;
    font-weight: 700;
}

.form-container #enviar-cotiz{
    width: fit-content;
    margin: 0 auto;
    margin-top: 1rem;
    display: block;
    text-transform: uppercase;
    padding: .25rem 1.5rem;
    background-color: var(--sand);
}

body{
    position: relative;
    width: 100%;
    background-color: var(--white);
    font-weight: 500;
}

main{
    min-height: 100vh;
}

/* HEADER */

header{
    top: 0;
    z-index: 10;
}

header .top-row{
    padding-right: 55px;
}

header .top-row ul{
    list-style-type: none;
    letter-spacing: unset;
}

header .top-row ul .item{
    letter-spacing: unset;
    height: 30px;
}

header .top-row ul .item a{
    letter-spacing: unset;
    line-height: 1;
    margin-top: 1px;
}

header .top-row ul .item a img{
    margin-top: -1.5px;
}

nav{
    top: 0;
    right: 0;
}

nav .navbar-brand{
    width: 180px;
}

nav .navbar-toggler{
    height: 100%;
    z-index: 12;
    border-radius: 0;
    height: 46px;
    width: 55px;
    position: absolute;
    top: 0;
}

nav .navbar-toggler .toggler-bar{
    width: 30px;
    height: 3px;
    background-color: var(--white);
}

nav .navbar-toggler .toggler-bar::before,
nav .navbar-toggler .toggler-bar::after{
    content: '';
    width: 30px;
    height: 3px;
    background-color: var(--white);
    position: absolute;
    left: 0;
}

nav .navbar-toggler .toggler-bar::before{
    top: -8px;
}

nav .navbar-toggler .toggler-bar::after{
    bottom: -8px;
}

nav .navbar-collapse {
    position: absolute;
    height: calc(100vh - 30px);
    top: 30px;
    width: 300px;
    right: -300px;
    overflow: hidden;
    transition: all .2s linear;
    padding-top: calc(46px + 3rem);
}

nav .navbar-collapse.show{
    right: 0;
}

nav .navbar-collapse a{
    font-size: 1.3rem;
}


/* FOOTER */

footer{
    margin-top: 100px;
}

footer .legal{
    font-size: .75rem;
}

footer .logo-sg{
    width: 180px;
}

footer .logo{
    width: 180px;
}

/* HERO */

.hero{
    height: calc(100vh - 30px);
    margin-top: 30px;
    min-height: 600px;
}

.hero .site-logo{
    width: 200px;
    left: 0;
    top: 5%;
}

.site-logo p{
    font-size: 1.5rem;
    letter-spacing: 1.5px;
    background-color: #DB3B26;
    margin-bottom: 0;
    line-height: 1;
}

.hero .hero-content{
    width: 28%;
}

.hero .promo{
    margin-bottom: 8%;
}

#new .hero .promo .bg{
    background-color: var(--red);
    mix-blend-mode: multiply;
    z-index: 0;
}

.hero .btn-to-web{
    border: none;
    background-color: transparent;
}

.hero .btn-to-web .bg{
    background-color: var(--red);
    mix-blend-mode: multiply;
    z-index: 0;
}

.hero .btn-to-web img,
.hero .promo img{
    z-index: 1;
}

.hero .sello{
    width: 350px;
    right: 15px;
    top: 16.2%;
}

#new .hero .sello{
    top: 33%;
}

.hero .sello .form-container{
    width: 60%;
    left: calc(40% - 12px);
}

.btn-cotiz-mobile{
    z-index: 2;
    height: 4rem;
    bottom: 0;
    font-size: 2rem;
}

#modal-cotizador .modal-dialog{
    max-width: 250px;
    margin: auto;
    top: 50%;
    transform: translateY(-50%);
}

/* MODELO */

.modelo .container .spacer{
    background-color: var(--light-gray);
    width: calc(100% - 30px);
    height: 0;
    padding-top: 55.143%;
    z-index: 0;
    top: 30%;
}

.modelo .container .bajada-section{
    position: relative;
    z-index: 2;
}

/* PLANTAS */

.plantas-wrapper{
    background-color: var(--white);
    border: solid 1px var(--black);
    z-index: 2;
    position: relative;
    height: fit-content;
}

.plantas-wrapper .planta-container{
    padding-top: 50px;
/* }

.se-plantas .planta-container{ */
    height: fit-content;
    -webkit-min
}

.plantas-wrapper .planta-container .magnifier{
    top: 10px;
    left: 1.5rem;
}

.plantas-wrapper .planta-container .img-container{
    height: fit-content;
    min-height: min-content;
}

.plantas-wrapper .planta-container img{
    height: calc(100% - (2.1rem * 1.5) - 6rem );
    object-fit: contain;
    object-position: center;
}

.plantas-container .caption-wrapper .caption{
    font-size: 1.3rem;
    letter-spacing: 1.5px;
}

.plantas-wrapper .planta-container .caption-wrapper a{
    font-size: .8rem;
    letter-spacing: 2px;
}

/* MASTERPLAN */

.masterplan .bg{
    z-index: 0;
}

.masterplan .recorrido{
    margin: 0 -15px;
    z-index: 1;
}

.masterplan .recorrido .recorrido-container{
    height: 0;
    padding-top: 56.375%;
}

.masterplan .masterplan-wrapper{
    padding: 0 20px;
}

.masterplan .uc-card {
    padding-left: 30%;
    height: calc(100% - 1rem);
    height: -webkit-fill-available;
    /* position: relative; */
}

.masterplan .uc-card .magnifier{
    top: 20px;
    left: 5.5%;
}

.masterplan .uc-card .card-title{
    font-size: 3.5rem;
    top: 30%;
    left: 5.5%;
    font-weight: 600;
    letter-spacing: 1px;
}

.masterplan .uc-card.first .bajada{
    position: absolute;
    top: calc(3.5rem + 30%);
    text-transform: uppercase;
    font-weight: 700;
    left: 5.5%;
    font-size: 1.1rem;
}

.ubicacion .video-container{
    height: 0;
    padding-top: 56.375%;
}
@media screen and (min-width: 1400px){
    .d-xxl-block{
        display: block!important;
    }

    .d-xxl-none{
        display: none!important;
    }

    .hero .site-logo{
        left: 5%;
    }

    .hero .sello{
        top: 27.8%;
    }
}

@media screen and (max-width: 991px){
    .medium-container{
        width: 100%;
    }

    footer .datos{
        order: 3;
    }

    .hero{
        height: calc(100vh - 30px - 4rem);
    }

    .hero .site-logo{
        left: 15px;
        top: 2%;
    }

    .hero .hero-content{
        width: 50%;
        max-width: 450px;
    }

    .modelo .img-container{
        width: 65%;
        margin: auto;
    }

    .masterplan .card-wrapper{
        padding: .6rem;
    }
}

@media screen and (max-width: 767px){
    nav .top-row{
        padding-right: 0
    }   

    nav .top-row .item{
        width: calc(100% / 3);
        display: flex;
        justify-content: center;
        height: 42px!important;
    }

    nav .navbar-toggler{
        top: 42px;
    }

    nav .navbar-collapse {
        height: calc(100vh - 42px);
        top: 42px;
    }

    .hero{
        height: calc(100vh - 42px - 4rem);
        margin-top: 42px;
        min-height: 600px;    
    }

    .hero .hero-content{
        width: 80%;
        max-width: 350px;
    }

    .modelo .img-container{
        width: 90%;
        margin: auto;
    }
    
    .modelo .container .spacer{
        padding-top: 100%;
    }

    .masterplan .uc-card .card-title{
        z-index: 1;
    }

    .masterplan .uc-card.first .img-container{
        height: auto;
        position: relative;
        z-index: 0;
        display: block;
        margin-bottom: 4rem;
    }
}