@font-face {
	font-family: 'Montserrat-Black';
	src:  url('../fonts/Montserrat-Black.eot') format('embedded-opentype'),
          url('../fonts/Montserrat-Black.ttf') format('truetype'),
          url('../fonts/Montserrat-Black.woff') format('woff'),
          url('../fonts/Montserrat-Black.svg') format('svg');
	font-weight: normal; font-style: normal;
}





:root{
    --color-primary: #696d71 ;
    --color-secondary: #303133 ;
    --color-white: #ffffff ;
}
body{
    font-family: "Montserrat", sans-serif;

}
a{
    text-decoration: none;
}
img{
    max-width: 100%;
}

.luxy-el {
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
}

h1, h2, h3, p {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.text-stroke{
    font-family: 'Montserrat-Black';
    -webkit-text-stroke: 1px #303133;
    color: #fff;
    opacity: 0.2;
    writing-mode: vertical-rl;
    position: absolute;
}


/* header */
header{
    background: var(--color-primary);
}
.nav-link{
    color: var(--color-white);
    font-weight: 600;
    position: relative;
}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show{
    color: var(--color-white);
}
.nav-item{
    margin: 0 15px;
    padding: 10px 0;
}
.logo{
    width: 280px;
}
.nav-link:focus, .nav-link:hover {
  color: var(--color-secondary);
}
.navbar-nav a.nav-link.active::after{
    content: "";
    position: absolute;
    bottom: 0px; 
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #fff; 
}
.navbar-toggler{
    border: 0 !important;
}
.navbar {
  --bs-navbar-padding-x: 0;
  --bs-navbar-padding-y: 0.5rem;
  --bs-navbar-color: #FFF;
  --bs-navbar-toggler-padding-y: 0.25rem;
  --bs-navbar-toggler-padding-x: 0.75rem;
  --bs-navbar-toggler-font-size: 1.25rem;
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  --bs-navbar-toggler-border-color: #FFF;
}
.navbar-toggler:focus {
  box-shadow: none;
}





/* submenu */
.dropdown-menu {
    left: 0 !important;
    right: 0 !important;
    width: 100%;
}
.navbar .dropdown {
    position: static;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: var(--bs-nav-pills-link-active-color);
    background-color: var(--color-primary);
}
button.nav-link{
    color: var(--color-secondary);
    font-weight: 600;
    border-radius: 0 !important;
    padding-top: 20px;
    padding-bottom: 20px;
}
.dropdown-menu{
    padding: 0;
    margin: 0 !important;
}
.col-menu-tabs{
    background: #e7e7e7;
    padding: 40px 0;
}
.col-info-tabs{
    padding: 40px ;
}
header .modelo{
 
  padding: 15px;
}
header .modelo-info h4 ,header .modelo-info p {
 
  font-size: 16px;
}









/* banner */
.banner{
    background-position: center;
    background-size: cover;
    height: 700px;
    width: 100%;
}
.banner .container{
    /* display: flex; */
    height: 100%;
}
.swiper-button-next, .swiper-button-prev {
  color: var(--color-white);
  border: 2px solid #fff;
  border-radius: 50%;
}
.swiper-pagination-bullet-active{
    background: var(--color-white);
}
.swiper-navigation-icon{
    width: 12px !important;
}
.swiper-horizontal {
  &.swiper-rtl .swiper-button-prev, &.swiper-rtl ~ .swiper-button-prev, & ~ .swiper-button-next, & .swiper-button-next {
    left: auto;
    right: var(--swiper-navigation-sides-offset,20px);
  }
}
.swiper-horizontal {
  &.swiper-rtl .swiper-button-next, &.swiper-rtl ~ .swiper-button-next, & ~ .swiper-button-prev, & .swiper-button-prev {
    left: var(--swiper-navigation-sides-offset,20px);
    right: auto;
  }
}
.layer-2{
    width: 600px;
    text-align: center;
    /* margin: auto auto 65px auto; */
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 65px;
}
.layer-2 h3 {
  color: var(--color-white);
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 15px;
}
.layer-2 .btn{
    font-family: "Source Sans 3", sans-serif;
    background: transparent;
    padding: 6px 35px;
    font-weight: 200;
    font-size: 18px;
}

.layer-1{
    width: 300px;
    /* margin: 65px auto auto auto; */
    text-align: center;
    margin: auto;
    left: 0;
    right: 0;
    top: 35px;
    position: absolute;
}

h1.black{
    font-weight: 900;
    color: var(--color-white);
    font-size: 70px;
 
}
h1.light{
    color: rgba(255, 255, 255, 0.5);
    font-weight: 200;
    font-size: 45px;
    text-transform: uppercase;
}

.titulo{
    text-align: center;
}

.titulo h1.black{
    position: relative;
    right: 100px;
    line-height: 1;
}
.titulo h1.light{
    position: relative;
    line-height: 1;
    opacity: .5;
    letter-spacing: 6.25px;
}
.h1ve{
    left: 80px;
}
.electricos{
    background: var(--color-secondary);
    overflow-x: hidden;
    padding: 20px 0;
}

.bg-modelo{
    width: 100%;
    height: 370px;
    background-position: center center;
    background-size: cover;
    will-change: transform;
}
.byd-auto-wrapper{
    display: flex;
    height: 100%;
}

.baw-left{
    padding-left: 100px;
}
.baw-right{
    padding-right: 100px;
}

.byd-auto-info{
    padding: 40px;
    width: 100%;
}
h2{
    text-align: center;
    color: var(--color-white);
    font-weight: 400;
    font-size: 20px;
}
.byd-auto-modelo, .byd-auto-modelo-2{
    display: flex;
    position: relative;
}
.byd-auto-modelo img{
    width: 35px;
    margin: auto;
}
.byd-auto-modelo-2 img{
    width: 70px;
    margin: auto;
}
.byd-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    border: 2px solid #4f9edd;
    width: 120px;
    height: 120px;
    margin: 40px auto;

    font-family: "Source Sans 3", sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 300;
    color: #fff;
    text-decoration: none;

    overflow: hidden; /* importante para el efecto */
}

/* Texto encima */
.byd-link span {
    position: relative;
    z-index: 2;
}

/* Círculo interno */
.byd-link::before {
    content: "";
    position: absolute;
    width: 60px;
    height: 60px;
    background: #4f9edd;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    z-index: 1;
    transition: transform 0.4s ease;
}

/* Hover */
.byd-link:hover::before {
    transform: translate(-50%, -50%) scale(1);
}
.row-modelo{
    margin: 40px 0;
}

.dolphin{
    background-image: url(../img/dolphin.png);
}   
.sealion{
    background-image: url(../img/sealion.png); 
}
.atto{
    background-image: url(../img/atto.png); 
}
.m9{
       background-image: url(../img/m9.png);  
}
.song{
    background-image: url(../img/song.png);  
}
.yuan{
    background-image: url(../img/yuan.png);  
}

.btn{
    text-transform: uppercase;
    letter-spacing: 3px;
    text-align: center;
    color: #fff;
    border: solid .5px rgba(255, 255, 255, 0.5);
    background-color: #4d4f52;
    padding: 10px 35px;
}
.btn:hover {
    color: var(--color-white);
    background-color: var(--color-primary);
    border-color: rgba(255, 255, 255, 0.5);
}

/* ------------------- */
.hibrido{
    padding: 50px 0;
    background: var(--color-secondary);
}


.txt-stroke{
    font-family: 'Montserrat-Black';
    -webkit-text-stroke: 1px #fff;
    color: #303133;
    opacity: 0.2;
    writing-mode: vertical-rl;
    margin: 0;
}

.baw-left .txt-stroke{
    transform: rotate(180deg);
}
 












/* -------- */
.botones{
    padding: 80px 0;
}
.boton{
    border-radius: 15px;
    box-shadow: 0px 8px 19.7px 1.3px rgba(22, 27, 51, 0.28);
    border: solid 1px #fff;
    background-color: #4f9edd;
    padding: 20px;
    min-height: 280px;
    margin: 0 20px;
}
.boton .titulo{
    font-weight: 500;
    text-transform: uppercase;
    text-align: left;
    color: var(--color-white);
    margin-bottom: 15px;
    font-size: 20px;
}
.boton .desc{
    font-family: "Source Sans 3", sans-serif;
    text-align: left;
    font-weight: 300;
    color: #fff;
    margin-bottom: 15px;
    font-size: 24px;
    line-height: 1.3;
}
.boton .icon{
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.3);
    padding: 15px;
    margin-bottom: 15px;
    display: flex;
    height: 100px;
    width: 90px;

}
.boton .icon img{
    margin: auto;
    max-width: 100%;
}




/* ----------------------- */
.banner-agencias{
    background-image: url(../img/agencias.png);
    background-position: center;
    background-size: cover;
    height: 400px;
    width: 100%;
}
.agencias h1{
    margin-top: -40px;
    color: var(--color-secondary);
}
.list-agencias{
    padding: 50px 0;
}
.agencia{
      border: solid 1px #696d71;
      padding: 12px 20px;
      margin-bottom: 20px;
}
.list-agencias h4{
    font-weight: 500;
    margin: 15px 30px;
    color: rgba(48, 49, 51, 0.5);
}
.a-email .icon-email{
    width: 20px;
    margin: auto 10px auto 0;
}
.a-email p{
    margin: auto 0;
}
.a-email {
    margin-bottom: 20px;
}

.a-direccion .icon-dir{
    width: 23px;
    margin: 0 10px auto 0;
}
.a-direccion p{
    margin: 0 0 auto 0;
}
.a-direccion {
    margin-bottom: 20px;
    min-height: 72px;
}
.list-agencias a, .list-agencias p{
    color: var(--color-secondary);
}

.a-redes{
    margin-right: auto;
    margin-left: 30px;
}

.a-redes ul li a{
    background: #4f9edd;
    display: inline-block;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    display: flex;
}
.a-redes ul li a svg{
    height: 20px;
    margin: auto;
    fill: #fff;
}
.a-redes ul {
    display: flex;
}
.a-redes ul li{
    margin-right: 8px;
}

.a-maps{
    width: 100px;
}


/* Contacto */
.contacto{
    padding: 50px 0;
}

.banner-contacto{
    background-image: url(../img/banner-contacto.png);
    background-position: center;
    background-size: cover;
    height: 300px;
    width: 100%;
    display: flex;
}

.banner-contacto h1{
    font-weight: 900;
    color: var(--color-white);
    font-size: 70px;
    text-align: center;
}

.row-tit{
    margin: auto auto 0 auto;
}
h5{
      font-weight: 500;
}

.contacto p {
    font-family: "Source Sans 3", sans-serif;
    font-weight: 300;
}

.form{
    margin: 20px auto;
    max-width: 800px;
}
label{
    font-weight: 500;
    color: #000;

}
input.form-control{
    border: 0;
    border-bottom: 1px solid rgba(106, 106, 106, .6);
    border-radius: 0;
}
textarea.form-control{
    border: 1px solid rgba(106, 106, 106, .6);
}

.form-control:focus {
  color: var(--bs-body-color);
  border-color: rgba(106, 106, 106, 1);
  outline: 0;
  background-color: #fff;
  box-shadow: none ;
}
.lab-fc, .form-check-label{
    font-weight: 300;
    font-family: "Source Sans 3", sans-serif;
}
.form-btn{
    font-weight: 300;
    font-family: "Source Sans 3", sans-serif;
    background: rgba(105, 109, 113, .5);
}


/* modelos */
.banner-modelos{
    background-image: url(../img/banner-modelos.png);
    background-position: center;
    background-size: cover;
    height: 300px;
    width: 100%;
    display: flex;
}
.banner-modelos h1{
    font-weight: 900;
    color: var(--color-white);
    font-size: 70px;
    text-align: center;
}
.modelos{
    padding: 50px 0;
}
.modelos h2{
    font-weight: 500;
    color: #000;
    font-size: 22px;
}

.modelo{
    background-color: #fff;
    padding: 40px;
}
.modelo-img{
    margin-bottom: 20px;
}
.modelo-info h4{
    color: var(--color-secondary);
    font-weight: 400;
    font-size: 18px;
}
.modelo-info p{
      color: var(--color-secondary);
    font-weight: 400;
    font-size: 18px;  
}
.btn-modelo{
    font-family: "Source Sans 3", sans-serif;
    font-weight: 300;
    letter-spacing: 3px;
    color: #fff;
    background: rgba(105, 109, 113, .5);
    padding: 6px 22px;
}

.modelo:hover{
    background-color: #e7e7e7;
}
.modelo .modelo-info p,.modelo .modelo-btn{
    opacity: 0;
}
.modelo:hover .modelo-info p,.modelo:hover .modelo-btn{
    opacity: 1;
    transition: all 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.modelo-img{
    text-align: center;
}






/* cotizador */
.cotiza{
    padding: 80px 0;
    background-position: center ;
    background-size: cover;
}

.form-header{
    background-color: #4f9edd ;
    border-radius: 15px 15px 0 0;
    padding: 18px;
}

.cotiza-titulo .icon{
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.3);
    margin-bottom: 15px;
    display: flex;
    padding: 10px;
    height: 70px;
    width: 60px;
}

.cotiza-titulo .titulo{
    font-weight: 500;
    text-transform: uppercase;
    text-align: left;
    color: var(--color-white);
    margin-bottom: 15px;
    font-size: 20px;
    margin-left: 15px;
    margin-right: 15px;
    line-height: 1.3;
}
 
.cotiza-titulo .icon img{
    margin: auto;
    max-width: 100%;
}
.form-body{
    background-color: var(--color-secondary);
    padding: 15px;
}
.form-body form{
    margin: 0;
}
.form-body form .form-control{
    background: transparent;
    border: 1px solid #fff;
    border-radius: 5px;
}
.form-body form .form-control::placeholder{
    color: #fff;
}
.form-body form .form-btn{
    width: 100%;
    font-weight: 200;
    padding: 5px 35px;
    background-color: var(--color-primary);
}
.form-body form .form-check-label {
  font-weight: 200;
  font-family: "Source Sans 3", sans-serif;
  text-align: justify;
  font-size: 14px;
  color: #fff;
}
select{
    background: transparent;
  color: #fff;
}
 

select {
  appearance: auto;
}

/* Detalle modelo */


.banner-modelo{
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 700px;
}
.b-tit{
    padding: 40px 0;
    max-width: 700px;
    margin: auto;
}
.b-tit h2{ font-size: 26px; font-weight: 400; }
.b-tit h3{ font-size: 24px; font-weight: 400; }
.b-info{
    padding: 20px;
}
.b-info h4{
    color: var(--color-white);
}
.b-info h4{
    font-size: 18px;
}
.b-info h4 strong{
    font-size: 26px;
}

.btn-wrapper{

    margin: auto auto 20px auto;
}


.icon-coll{
    width: 40px;
    height: 40px;
    background: var(--color-white);
    padding: 5px;
    border-radius: 50%;
    margin: auto;
}
.btn-collapse p{
    text-transform: uppercase;
    color: #FFF;
    font-weight: 200;
    margin: 8px;
}
.btn-collapse svg {
    transition: transform 0.3s ease;
}

/* Estado cerrado (inicio) → rotado */
.btn-collapse.collapsed svg {
    transform: rotate(45deg);
}

/* Estado abierto → X normal */
.btn-collapse:not(.collapsed) svg {
    transform: rotate(0deg);
}

.row-detalle{
    padding: 40px 0;
}
.detalle-txt{
    margin: auto;
    padding: 10px 0;
}
.detalle-txt h3, .detalle-txt p{
    color: #696d71; 
}
.detalle-txt h3{
    font-weight: 700;
    font-size: 24px;
}
 
.group {
    position: relative;
}
 
.btn-wrapper.fixed .btn-collapse{
    position: fixed;
    top: 25px;
}
.btn-wrapper.fixed .btn-collapse p{
    opacity: 0;
}
.b-tit h2{
    font-weight: 700;
}
.b-tit p{
    font-weight: 400;
    color: #fff;
}










/* footer */

footer{
    background: var(--color-primary);
}
h3{
    color: var(--color-white);
    font-size: 16px;   
    font-weight: 500;
}
ul li {
    color: var(--color-white);
    font-size: 14px;   
    font-weight: 400;
}
ul{
    list-style: none;
    padding: 0;
}
.copy span{
    color: var(--color-white);
}











.parallax-wrap {
  overflow: hidden;
}

.parallax-item {
  overflow: hidden;
  position: relative;
  height: 360px; 
}

.bg-modelo {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  will-change: transform;
  transform-origin: center center;
}





 



.luxy-1{ left: 150px; right: 0 !important; }
.luxy-2{ left: -50px;   }


.luxy-3{ position: relative; top: 150px; }
.luxy-4{ position: relative; top: 150px; }
.luxy-5{ position: relative; top: 180px; }
.luxy-6{ position: relative; top: 240px; }
.luxy-7{ position: relative; top: 400px; }


@media (max-width: 1400px) {
    .agencia {
        padding: 12px 12px;
    }
}


@media (max-width: 1200px) {
    .boton { margin: 0; }
    .boton .titulo { font-size: 18px; }
    .boton .desc {  font-size: 22px; }


}

@media (max-width: 992px) and (min-width: 768px) {
    .boton { padding: 14px; }
    .boton .desc { font-size: 21px; min-height: 82px;}
    .boton .icon { padding: 12px; width: 80px; }
    .boton .titulo { min-height: 54px; }



}

@media (max-width: 992px) {
    .baw-right { padding-right: 40px; }
    .baw-left { padding-left: 40px; }

}


@media (max-width: 768px) {
    .boton{margin-bottom: 25px;}
    .botones { padding: 40px 0; } 

    .byd-auto-info { padding: 15px; }
    .baw-right { padding-right: 0px; }
    .baw-left { padding-left: 0px; }


    .byd-auto-modelo img { width: 22px; }

    .bg-modelo { height: 200px; }

    .btn {  padding: 8px 18px; letter-spacing: 2px; font-size: 12px; }
    h1.light {  font-size: 30px; } 
    h1.black { right: 30px !important; font-size: 52px; }
    .logo { width: 190px; }
    .h1ve {
    left: 50px;
    }

    .layer-1, .layer-2{ max-width: 100%; } 
    .layer-2 h3 { font-size: 16px; }
    .banner { height: 550px; }

    .text-stroke{ display: none; }


    .banner-agencias {
        height: 200px;
    }

 
    .luxy-el {
        transform: none !important;
    }

    .byd-auto-modelo > div, .byd-auto-modelo-2 > div{
        margin: auto !important;
    }

    .luxy-1 {
        left: 0 !important;
    }
    .parallax-item {
 
        height: 190px !important;
    }

    .luxy-3,.luxy-4,.luxy-5,.luxy-6,.luxy-7
    {
        top: initial;
    }


}