@import url(../fonts/avenir/stylesheet.css);

/* Comunes */

html {
    box-sizing: border-box;
    font-size: 62.5%;
  }
  *, *:before, *:after {
    box-sizing: inherit;
  }

body{
  font-size: 1.6rem;
  font-family: 'Avenir Light', sans-serif;
  background-color: var(--negromg);
  color:var(--blancomg);
}

h1{text-align: center; font-size: 3rem; font-family: 'Avenir Heavy';}
h5{font-size: 1.8rem; text-align: center; font-family: 'Avenir Heavy';}
h1 span{font-family: 'Avenir Light', sans-serif;}
h5 span{font-family: 'Avenir Light', sans-serif;}

.img-100{width: 100%; height: auto;}
b, strong {
    font-family: 'Avenir Heavy', sans-serif;
}

.btn-light {
    background: #fff;
    border: 2px solid #1b1b1b;
    border-radius: 50px;
    font-family: Avenir-Heavy,Sans-Serif;
    font-size: 1.2em;
    padding: 8px 20px;
    color: var(--negromg);
}

.btn-dark {
    background: #1b1b1b;
    border: 2px solid #fff;
    border-radius: 50px;
    font-family: Avenir-Heavy,Sans-Serif;
    font-size: 1.2em;
    padding: 8px 20px;
    color: var(--blancomg);
}


/* Colores  */

:root{

    --negromg:#1B1B1B;
    --grisclaromg:#F7F7F7;
    --rojov2:#dd4040;
    --blancomg:#ffffff;
    --grismg:#909090;
}


/* Cobtenido */

.contenido-general{padding: 12rem 0 8rem 0;}

.pasos {
    display: flex;
    justify-content: space-between;
    margin: 0 auto 1.5em;
    position: relative;
    width: 100%;
}

.pasos:before {
    background: #909090;
    content: "";
    display: block;
    height: 2px;
    position: absolute;
    top: calc(50% - 1px);
    width: calc(100% - 20px);
    z-index: 0;
}


.pasos .step{
    align-items: center;
    background-color: #1b1b1b;
    border: 2px solid #909090;
    border-radius: 50%;
    color: #fff;
    display: flex;
    font-size: 16px;
    justify-content: center;
    line-height: 20px;
    min-height: 40px;
    min-width: 40px;
    z-index: 2;
}

.pasos .step-active {
    background-color: #fff;
    border-color: #fff;
    color: #1b1b1b;
}


.pasos .step-number {
    font-family: Avenir-Heavy,Sans-Serif;
    font-weight: 800;
    line-height: 1;
    vertical-align: middle;
}

.pasos .step .desc {
    bottom: -28px;
    color: #fff;
    font-size: .7em;
    min-width: 107px;
    position: absolute;
    text-align: center;
}

.step-cotizador{margin: 6rem 0;}

.slide-modelos {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 25px 0;
    scroll-behavior: smooth;
}

.slide-modelos .modelo {
    border: 1px solid #1b1b1b;
    border-radius: 10px;
    margin-left: 60px;
    margin-right: 0;
    margin-top: 0;
    min-height: 341px;
    min-width: 270px;
    padding: 0;
    perspective: 1000px;
}

.slide-modelos .modelo .inner .front {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 10px;
    height: 100%;
    position: absolute;
    text-align: left;
    width: 100%;
    z-index: 10;
}

.slide-modelos .modelo .card-header {
    background-color: transparent;
    border-bottom: none;
    text-align: left;
}

.slide-modelos .modelo small {
    color: #909090;
    font-size: 10px;
}

.modelo-item{
    padding: 1rem 1.5rem;
    border-radius: 1rem;
}

.modelo-item span{color: var(--grismg); text-transform: uppercase; font-size: 1.2rem;}
.modelo-item h5{color: var(--negromg); text-transform: uppercase; font-size: 2rem; text-align: left;}
.imagen-modelo-coti{padding: 0 1.5rem;}
.lista_versiones {
    margin: 0;
    padding: 0;
}
.lista_versiones li {
    border: 1px solid #909090;
    border-radius: 3px;
    color: #1b1b1b;
    cursor: pointer;
    font-size: .9em;
    list-style: none;
    margin-bottom: 5px;
    text-align: center;
    transition: background-color .5s ease;
}

.titulo-versiones{margin-bottom: 3rem;}

#container-steps select {
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: linear-gradient(45deg,transparent 50%,#1b1b1b 60%),linear-gradient(135deg,#1b1b1b 40%,transparent 50%)!important;
    background-position: calc(100% - 20px) 14px,calc(100% - 10px) 14px,100% 0;
    background-repeat: no-repeat;
    background-size: 10px 10px,10px 10px;
    padding: 1rem;
    border-radius: 3rem;
    font-size: 1.4rem;
}

#container-steps .next {
    border: 1px solid #909090;
    border-radius: 50px;
    color: #fff;
    font-size: .9em;
    padding: 8px 23px;
    transition: all .3s ease;
}

#container-steps .next:hover{background-color: var(--blancomg); color: var(--negromg);}
.version-elegida{justify-content: center;}
#container-steps .formulario .form-check-input:checked {
    background-color: #dd4040;
    border-color: #dd4040;
}

.formulario input[type=text]{
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: linear-gradient(45deg,transparent 50%,#1b1b1b 60%),linear-gradient(135deg,#1b1b1b 40%,transparent 50%)!important;
    background-position: calc(100% - 20px) 14px,calc(100% - 10px) 14px,100% 0;
    background-repeat: no-repeat;
    background-size: 10px 10px,10px 10px;
    padding: 1rem;
    border-radius: 3rem;
    font-size: 1.4rem;
}

.formulario input[type=tel]{
    padding: 1rem;
    border-radius: 3rem;
    font-size: 1.4rem;
}

.formulario input[type=email]{
    padding: 1rem;
    border-radius: 3rem;
    font-size: 1.4rem;
}

.formulario select{
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: linear-gradient(45deg,transparent 50%,#1b1b1b 60%),linear-gradient(135deg,#1b1b1b 40%,transparent 50%)!important;
    background-position: calc(100% - 20px) 14px,calc(100% - 10px) 14px,100% 0;
    background-repeat: no-repeat;
    background-size: 10px 10px,10px 10px;
    padding: 1rem;
    border-radius: 3rem;
    font-size: 1.4rem;
}

.rojo {color: #dd4040;}
.enviar {
    border: 1px solid #dd4040;
    border-radius: 50px;
    padding: 8px 20px;
    text-decoration: initial;
    transition: all .5s;
    font-size: 1.6rem;
}

.enviar, .enviar:hover {
    background-color: #dd4040;
    color: #fff;
}

#recaptcha {
    height: 1px!important;
}
#recaptcha, .grecaptcha-badge {
    visibility: hidden!important;
}

/* Menu */

header .menu {
    background: linear-gradient(rgba(0,0,0,.07),transparent 80%);
    padding: 1.5rem 0;
    transition: .5s ease;
}

.navbar>.container, .navbar>.container-fluid, .navbar>.container-lg, .navbar>.container-md, .navbar>.container-sm, .navbar>.container-xl, .navbar>.container-xxl {
    display: flex;
    flex-wrap: inherit;
    align-items: center;
    justify-content: space-between;
}

.navbar-brand .logo{width: 5rem; fill: var(--blancomg);}
/* header .menu .nav-link:hover {
    border-bottom: 3px solid #fff;
    color: #fff!important;
    opacity: 1;
} */
.nav-item{position: relative;}
.nav-link.tag:after{
    transition: all .3s ease;
}
/* .nav-link.tag:hover::after{
    content: "";
    display: block;
    width: 83%;
    height: .3rem;
    background-color: var(--blancomg);
    margin-top: .7rem;
    position: absolute;
} */

/* .nav-link.tag:after{
    content: "";
    display: block;
    width: 100%;
    height: .3rem;
    background-color: var(--blancomg);
    margin-top: .7rem;
} */
.menu .logo{margin-right: 1.5rem;}

.open_modelos{
    font-size: 1.2rem;
    color: var(--blancomg);
}
.menu-desktop .nav-link{
    font-size: 1.2rem;
    color: var(--blancomg);
    padding: 0 1rem!important;
}

.rrss a{text-decoration: none; margin-right: 1.5rem;}
.rrss i{color: var(--blancomg); font-size: 2rem;}

/* Menu Modelo */

#menu_modelos {
    background: linear-gradient(#fff 10%,#f7f7f7 80%);
    color: #1b1b1b;
    /* display: none; */
    height: 100vh;
    left: 0;
    overflow-y: scroll;
    padding-top: 70px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}
.box-close.country {
    margin-top: 0;
    position: absolute;
    right: 0;
    top: 0;
}
.box-close {
    margin-top: 40px;
    position: relative;
    text-align: right;
    width: 100%;
    z-index: 1;
}
.modelo {
    padding-top: 25px;
    position: relative;
    text-align: left;
}
.modelo a {
    color: #1b1b1b;
    text-decoration: none;
}
a {
    cursor: pointer;
}
.modelo img.img-modelo {
    height: auto;
    transition: transform .2s;
    width: 90%;
}
.modelo .new {
    background-color: #dd4040;
    color: #fff;
    font-family: Avenir-Heavy,Sans-Serif;
    font-size: 1rem;
    left: 25%;
    padding: 2px 6px;
    position: absolute;
    text-transform: capitalize;
    top: 0;
}

.title-model{font-family: 'Avenir Heavy', sans-serif; font-size: 1.6rem;}
.modelo .desde {
    font-size: .8em;
    margin-bottom: 7px;
    margin-top: -5px;
}
.modelo .btn-cotizar {
    background: #1b1b1b;
    border: 1px solid #1b1b1b;
    border-radius: 50px;
    color: #fff;
    font-size: .8em;
    padding: 0 15px;
}

.menu-activado .nav-link{color: var(--negromg);}
.logo-invertido{fill: var(--negromg)!important;}
.icono-activado{color: var(--negromg)!important;}
.navbar-toggler .material-icons {
    font-size: 31px;
}
.navbar-toggler .close {
    display: none;
}

#mobile-menu {
    background-clip: initial;
    background: linear-gradient(#fff 10%,#f7f7f7 80%);
    color: #1b1b1b;
    overflow-y: scroll;
    padding-bottom: 68px;
    padding-top: 70px;
    width: 100%;
    z-index: 990;
}

#menu_modelos .categorias strong, #mobile-menu {
    text-transform: uppercase;
}
.menu_mobile_country {
    margin: 20px 15px;
    position: relative;
}
.menu_mobile_country .nav-link {
    border-bottom: 1px solid #979797;
    color: #1b1b1b;
    font-family: Avenir-Heavy,Sans-Serif;
    padding: 10px 7px;
    text-align: left;
}
.float-end {
    float: right!important;
}
.menu_mobile_country .lista-modelos {
    display: none;
    position: relative;
    z-index: 6;
}

.category-model {
    font-size: .8em;
    margin-top: 5px;
}

.menu_mobile_country .nav-link {
    border-bottom: 1px solid #979797;
    color: #1b1b1b;
    font-family: Avenir-Heavy,Sans-Serif;
    padding: 10px 7px;
    text-align: left;
}

/* Gracias */

#cotizador .gracias .logo svg {
    fill: #fff;
    height: 100px;
    width: 100px;
}

.titulo-gracias{font-size: 3rem; margin-bottom: 3rem;}
.mensaje-gracias{font-size:2.4rem; margin-top: 3rem;}

/* Footer */

.pre_footer {
    background-color: #1b1b1b;
    color: #fff;
    padding: 30px 0;
}

.pre_footer h6 {
    display: inline-block;
    font-family: 'Avenir Heavy', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 1.6rem;
}
.pre_footer .bajada, .pre_footer .wrap-boton {
    display: inline-block;
}

.pre_footer .bajada {
    font-size: .8em!important;
    margin: 0 10px;
    max-width: 50%;
}

.pre_footer .box {
    margin: 10px 0;
    overflow: hidden;
}

.pre_footer .box .mi-what-pf {
    display: inline-block;
    margin-right: 0.5rem;
}

.pre_footer .footer-icon {
    border: 1px solid #1b1b1b;
    font-size: 40px;
    padding: 0 12px;
}

footer {
    background-color: #f7f7f7;
    color: #1b1b1b;
    font-size: .9em;
}

.navbar-brand {
    padding-top: 0.3125rem;
    padding-bottom: 0.3125rem;
    margin-right: 1rem;
    font-size: 1.25rem;
    text-decoration: none;
    white-space: nowrap;
}

.fw-bold {
    font-family: 'Avenir Heavy', sans-serif;
}

footer a {
    color: #1b1b1b;
    text-decoration: none;
}

.links li{margin-bottom: 1.5rem;}
.links {list-style: none; padding: 0;}

.logo-footer .logo{
    height: 3.5rem;
}

@media (min-width: 320px){ 
   
}

@media (min-width: 768px){ 
    .pt-md-5 {
        padding-top: 3rem!important;
    }
    .justify-content-md-start {
        justify-content: flex-start!important;
    }
}

@media (min-width: 920px){

    .modelo-item{width: 27rem;}
    .pre_footer .footer-icon {
        float: left;
    }
}