@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;
}
@font-face {
    font-family: 'MullerNextExpandedTrial-ExtraBold';
    src: url('../fonts/MullerNextExpandedTrial-ExtraBold.eot');
    src: url('../fonts/MullerNextExpandedTrial-ExtraBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/MullerNextExpandedTrial-ExtraBold.woff') format('woff'),
        url('../fonts/MullerNextExpandedTrial-ExtraBold.ttf') format('truetype'),
        url('../fonts/MullerNextExpandedTrial-ExtraBold.svg#MullerNextExpandedTrial-ExtraBold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'MullerNextExpandedTrial-Regular';
    src: url('../fonts/MullerNextExpandedTrial-Regular.eot');
    src: url('../fonts/MullerNextExpandedTrial-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/MullerNextExpandedTrial-Regular.woff') format('woff'),
        url('../fonts/MullerNextExpandedTrial-Regular.ttf') format('truetype'),
        url('../fonts/MullerNextExpandedTrial-Regular.svg#MullerNextExpandedTrial-Regular') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}


:root{
    --color-primary: #696d71 ;
    --color-secondary: #303133 ;
    --color-white: #ffffff ;
    --color-black: #000000;
    --color-blue: #4f93dd;
    --container-space: calc((100vw - 1320px) / 2);
}
body{
    font-family: "Source Sans 3", sans-serif;
    /* font-family: "Montserrat", sans-serif; */
}
ul{
    margin: 0;
    list-style: none;
}
a{
    text-decoration: none;
}
img{
    max-width: 100%;
}
.luxy-el {
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
}
h1{
    font-family: "Source Sans 3", sans-serif;
    color: #333333;
    font-weight: 600;
    font-size: 50px;
}
h1, h2, h3, p {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h3{
    color: var(--color-white);
    font-size: 30px;   
}
.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-white);
}
.nav-link{
    font-family: "Source Sans 3", sans-serif;
    color: var(--color-black);
    font-weight: 400;
    position: relative;
    text-transform: uppercase;
    font-size: 16px;
    border-radius: 25px;

}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show, 
.navbar-nav .nav-link:hover{
    color: var(--color-white);
    background: var(--color-blue);
    border-radius: 25px;
    transition: all 500ms ease;
}
.nav-item{
    margin: 0 15px;
    padding: 10px 0;
}
.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: #000;
  --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%280, 0, 0, 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: #000;
}
.navbar-toggler:focus {
  box-shadow: none;
}
.social{
    background: var(--color-black);
    border-radius: 50%;
    height: 28px;
    width: 28px;
    display: flex;
}
.social svg{
    color: var(--color-white);
    fill: var(--color-white);
    margin: auto;
    height: 19px;
}
.redes a:hover .social{
    background: var(--color-blue);
}
.redes li{
    margin: 0 10px;
}

#tabs-menu .navbar-nav .nav-link.active, #tabs-menu .navbar-nav .nav-link.show, #tabs-menu .navbar-nav .nav-link:hover{
    background: transparent !important;
}
 
#tabs-menu .nav-pills .nav-link.active div{
    background-color: #4f93dd !important;
}

 


/* 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: transparent;
}
.nav-pills .nav-link.active > div, .nav-pills .show > .nav-link > div {
    color: var(--bs-nav-pills-link-active-color);
    background-color: #4f93dd;

}
#tabs-menu  .navbar-nav .nav-link.active, #tabs-menu  .navbar-nav .nav-link.show, #tabs-menu .navbar-nav .nav-link:hover {
  color: var(--color-white);
  background: transparent;
  border-radius: 25px;
  transition: all 500ms ease;
}
.navbar-nav .nav-link.active > div, .navbar-nav .nav-link.show > div, .navbar-nav .nav-link:hover > div {
    background-color: #4f93dd;
}
 
#tabs-menu .nav-link.active, 
#tabs-menu .nav-link.show, 
#tabs-menu .nav-link:hover{
    background: transparent !important;
}
.boton-submenu{
    padding: 10px;
    border-radius: 36px;
}

button.nav-link{
    color: var(--color-secondary);
    font-weight: 600;
    border-radius: 0 !important;
    padding-top: 10px;
    padding-bottom: 10px;
}
.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;
}




/* btn */
.btn{
    text-align: center;
    color: #fff;
    border: 0;
    background-color: var(--color-blue);
    padding: 10px 35px;
    border-radius: 25px;
}
.btn:hover {
    color: var(--color-white);
    background-color: var(--color-primary);
    border-color: 0;
}
/* HOME */
/* Segmentos */
#segmentos{
    background: #ececec;
    padding: 50px 0;
}
.segment_tit{
    color: var(--color-white);
}
.segment{
    background-position: center;
    background-size: cover;
    /* height: 450px; */
    height: 370px;
    border-radius: 40px;
}
.segment_tit{
    text-align: center;
    padding: 40px;
    height: 50%;
}
.segment_btn{
    height: 50%;
    display: flex;
}
.segment_btn .btn{ 
    margin: auto auto 40px auto;
}

/* cotiza home */
.back-bt{
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 450px;
    padding: 40px;
}
.box-bt{
    text-align: center;
}
.box-bt h4{
    color: var(--color-white);
    font-weight: 600;
    font-size: 32px;
}
.box-bt h5{
    color: var(--color-white);
    font-weight: 200;
    font-size: 24px;
    margin-bottom: 15px;
}

.back-bt{
    position:relative;
    overflow:hidden;
    min-height:500px;
}

.parallax-bg{
    position:absolute;
    inset:0;

    background-size:cover;
    background-position:center;

    transform:scale(1.2);
    z-index:1;
}
.bg-image{
      position:absolute;
 

    background-size:cover;
    background-position:center;  
}


.box-bt{
    position:relative;
    z-index:2;
}






/* Accesotrios */
.back-az{
    background: #6dafc7;
}
.img-acc{
    width: 75%;
}

/* Tecnologia home */
#tecnologia{
    background: #ececec;
    padding: 50px 0;
}
.tec-item{
    background: var(--color-white);
    border-radius: 20px;
    padding: 40px;
}
.tec-title h2, .tec-subtitle h3{
    color: #333333;
    font-family: "Source Sans 3", sans-serif;
    font-weight: 600;
    text-align: left;
}
.tec-title h2{
    font-size: 18px;
    margin-bottom: 15px;
}
.tec-subtitle h3{
    font-size: 26px;
    margin-bottom: 15px;
}
.tec-text p{
    font-weight: 200;
}
.swiper-btn{
    position: relative;
    height: 70px;
    width: 140px;
    margin-left: auto;
    margin-right: 50px;
    margin-top: 50px;
}
.tec-next, .tec-prev, 
.seg-next, .seg-prev {
    height: 40px;
    width: 40px;
    background: #dbdbdb;
}
.tec-next svg path, .tec-prev svg path,
.seg-next svg path, .seg-prev svg path{
    fill: #333333;
}
.tec-next svg, .tec-prev svg, 
.seg-next svg, .seg-prev svg{
    height: 18px;
}
.extend-right {
    width: calc(100% + var(--container-space));
    margin-right: calc(var(--container-space) * -1);
}
.tec-img{
    border-radius: 30px;
    overflow: hidden;
}
.tec-info{
    min-height: 180px;
}




/* segmentos */
.segmentos{
    background: #ececec;
    padding: 50px 0 25px 0;
    text-align: center;
}
.segment-text h2, .segment-text p{
    color: #333333;
    text-align: center;
    font-weight: 600;
}
.segment-text p{
    font-weight: 300;
}
.segmentos .swiper-btn{
    margin-top: 0 !important;
    margin-right: 0 !important;
}
.segment-img{
    border-radius: 40px;
    overflow: hidden;
}
.segment-text h2{
    font-size: 30px;
}
.segment-text{
    margin: 30px 0;
    min-height: 92px;
}

.btn-secondary{
    color: #4f93dd;
    background: var(--color-white);
}

.btn-min{
    padding: 10px 5px;
    min-width: 100px;
}
.segment-btns .btn{
    margin: 0 10px;
}
















/* 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-1 h3 {
  color: var(--color-white);
  font-size: 36px;
  font-weight: 700;
  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;
}

/* ---------------- banner nuevo ---------------------- */
.heroSwiper{
    width:100%;
    height:700px;
}
.slide{
    position:relative;
    width:100%;
    height: 700px;
    overflow:hidden;
    display:flex;
    align-items:center;
}
.bg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    transform:scale(1.15);
}
/* .overlay{
    position:absolute;
    inset:0;
    background:
    linear-gradient(
        90deg,
        rgba(0,0,0,.8) 0%,
        rgba(0,0,0,.45) 40%,
        rgba(0,0,0,.2) 100%
    );
    z-index:1;
} */
.content{
    max-width: 1140px;
    padding: 50px 0;
    height: 100%;
}
.subtitle{
    display:inline-block;
    padding:10px 18px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.15);
    backdrop-filter: blur(10px);
    border-radius:50px;
    font-size:14px;
    letter-spacing:2px;
    margin-bottom:25px;
    opacity:0;
}
.banner_title{
    font-family: 'MullerNextExpandedTrial-ExtraBold';
    font-size:clamp(42px,8vw,95px);
    line-height:1;
    margin-bottom:0px;
    font-weight:900;
    opacity:0;
    text-align: center;
    color: rgba(255, 255, 255);
    position: relative;
    -webkit-mask-image: linear-gradient(
        to bottom,
        rgba(0,0,0,.8) 0%,
        rgba(0,0,0,0.1) 100%
    );
    mask-image: linear-gradient(
        to bottom,
        rgba(0,0,0,.8) 0%,
        rgba(0,0,0,.1) 100%
    );
}
 

.banner_text{
    font-size:20px;
    line-height:1.6;
    color:rgba(255,255,255,.82);
    margin-bottom:12px;
    opacity:0;
}
.banner_buttons{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
    opacity:0;
    padding: 10px 0;
}

.banner_buttons .btn{
    padding: 8px 27px;
}
.banner_price{
    margin: 30px 0;
}
.banner_price h3{
    font-family: 'MullerNextExpandedTrial-Regular';
    font-size:26px;
    text-transform: uppercase;
    line-height:1;
    color:rgba(255,255,255);
    margin-bottom:12px;
    opacity:0;
}
.banner_price h2{
    font-family: 'MullerNextExpandedTrial-ExtraBold';
    text-align: left;
    font-size:32px;
    text-transform: uppercase;
    line-height:1;
    color:rgba(255,255,255);
    margin-bottom:12px;
    opacity:0;
}
.banner-card h2{
    color: var(--color-white);
    text-align: center;
    display:block;
    margin-top:0;
    font-size:30px;
    font-weight:bold;
    line-height: 1.2;
    font-family: 'MullerNextExpandedTrial-ExtraBold';
}

.banner_layers{
    height: 70%;
}
.banners_cards{
    height: 30%;
}
.banner-card{
    /* position:absolute;
    right:8%;
    top:50%; */
    /* transform:translateY(-50%); */
    /* transform: translateY(-50%) translateX(20%); */
    margin-top: auto;
    width: 340px;
    padding: 25px;
    border-radius:25px;
    background-color: rgba(146, 165, 181, .5);
    border-style: solid;
    border-color: rgba(255, 255, 255, .5);
    /* backdrop-filter: blur(15px); */
    z-index:10;
    opacity:0;
    border-width: 2px;
    opacity: 0.51;
    /* left: 1220px;
    top: 761px;
    width: 458px;
    height: 152px;
    z-index: 185; */
}
.banners_cards .row{
    margin-top: auto;
}
.banner-card p{
    color: var(--color-white);
    text-align: center;
    margin-bottom:0;
    font-size:16px;
}
.banner-card span{
    color: var(--color-white);
    text-align: center;
    display:block;
    margin-top:0;
    font-size:30px;
    font-weight:bold;
    line-height: 1.2;
    font-family: 'MullerNextExpandedTrial-Regular';
}
.shape{
    position:absolute;
    border-radius:50%;
    filter:blur(30px);
    opacity:.45;
    z-index:2;
}
.swiper-pagination-bullet{
    background:white !important;
    width:12px;
    height:12px;
}
.swiper-button-next,
.swiper-button-prev{
    color:white;
}


@media(max-width:900px){
    .floating-card{ display:none; }
    p{ font-size:18px; }
}


























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);  
}



/* ------------------- */
.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/contacto_banner.jpg);
    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, select.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);
}
.ag, .form-cotiza .ag option, .ag:focus, #cotizaForm .form-control{
    color: #fff !important;
}

#cotiza .form-cotiza .ag option{
    color: #000 !important;
    background: #fff !important;
}

/* 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;
    position: absolute;
    height: 700px;
    width: 100%;
    top: 0;
}
.b-tit{
    padding: 40px 0;
    max-width: 700px;
    margin: auto;
    position: relative;
    z-index: 99;
}
.b-tit h2{ font-size: 26px; font-weight: 400; }
.b-tit h3{ font-size: 16px; font-weight: 400; }
.b-info{
    padding: 20px;
}
.b-info h4{
    color: var(--color-white);
    font-size: 18px;
}

.b-info h4 strong{
    font-family: 'MullerNextExpandedTrial-Regular';
    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 !important;
    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;
    min-height: 700px;
 
}
.group > div {
    position: relative;
    min-height: 700px;
}
 
.btn-wrapper.fixed .btn-collapse{
    position: fixed;
    top: 25px;
    z-index: 99;
    left: 0;
    right: 0;
}
.btn-wrapper.fixed .btn-collapse p{
    opacity: 0;
}
.b-tit h2{
    font-weight: 500;
}
.b-tit p{
    font-weight: 400;
    color: #fff;
}
.btncm{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

.bg-video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
 
}
/* .banner-card-modelo{
    margin-top: auto;
    padding: 25px;
    border-radius:25px;
    background-color: rgba(146, 165, 181, .75);
    border-style: solid;
    border-color: rgba(255, 255, 255, .5);
    z-index:10;
    border-width: 2px;
} */


.sombra{
    width: 100%;
    position: absolute;
    height: 50%;
    z-index: 9;
    background-position: center;
    background-size: cover;
}
.inferior{
    bottom: 0;
}
.indic{
    z-index: 99;
}
@media (min-width: 768px) {
    .col-md-20{
    width: 20%;
    }
}




/* mapa */

 

    /* ========================================= */
    /* SIDEBAR */
    /* ========================================= */

    .container-mapa{
      display:flex;
      width:100vw;
      height:100vh;
            position:relative;
    }
        .map-sidebar-toggle{
            display:none;
        }
        .sidebar{
            width:360px;
            min-width:360px;
      background:#fff;
      border-right:1px solid #ddd;
      overflow-y:auto;
      z-index:2;
    }

        .sidebar-header{
            padding:30px 24px 14px;
            text-align:left;
      border-bottom:1px solid #eee;
    }

    .sidebar-header h1{
            font-size:26px;
            font-weight:300;
            letter-spacing:1px;
            margin-bottom:12px;
    }

    .sidebar-header p{
            font-size:14px;
            line-height:1.45;
      color:#666;
            max-width:280px;
    }

    .search{
      padding:20px 30px;
      border-bottom:1px solid #eee;
    }

    .search input{
      width:100%;
      border:none;
      border-bottom:1px solid #bbb;
      padding:12px 0;
      font-size:15px;
      outline:none;
    }

    .results{
      padding:15px 30px;
      font-size:14px;
      color:#666;
      border-bottom:1px solid #eee;
    }

        .branch-list{
            padding:0;
    }

    .branch-item{
            padding:14px 16px;
      border-bottom:1px solid #eee;
      cursor:pointer;
            transition:.3s;
            display:flex;
            align-items:center;
            gap:12px;
            opacity: .5;
    }

    .branch-item:hover{
            background:#f8f8f8;
    }

    .branch-item.active{
      /* background:#f2f2f2; */
        opacity: 1;
        border-left:4px solid var(--color-blue);
    }

    .branch-thumb-wrap{
        width:80px;
        height: 60px;
        flex:0 0 80px;
        border-radius:2px;
        overflow:hidden;
        background:#d9d9d9;
    }

    .branch-thumb{
        width:100%;
        height:100%;
        object-fit:cover;
        display:block;
    }

    .branch-copy{
        flex:1;
        min-width:0;
    }

    .branch-name{
        font-size:24px;
        letter-spacing:.5px;
        margin:0;
        line-height:1;
        color:#2a2a2a;
        font-weight:400;
    }

    .branch-plus{
        width:18px;
        height:18px;
        border-radius:50%;
        background: var(--color-blue);
        color:#fff;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        font-size:20px;
        font-weight:700;
        flex:0 0 18px;
    }

    /* ========================================= */
    /* MAPA */
    /* ========================================= */

    #map{
      flex:1;
      height:100vh;
    }

    /* ========================================= */
    /* CUSTOM MARKERS */
    /* ========================================= */

        .marker{
      width:24px;
      height:24px;
      border-radius:50%;
            background:#2aa6df;
            border:4px solid #fff;
      cursor:pointer;
      transition:.3s;
            box-shadow:0 3px 10px rgba(0,0,0,.2);
    }

    .marker.active{
            background:#e9606f;
      transform:scale(1.3);
            box-shadow:0 0 0 10px rgba(42,166,223,.2);
    }

    /* ========================================= */
    /* POPUP */
    /* ========================================= */

        .branch-popup .mapboxgl-popup-content{
            border-radius:16px;
            padding:0;
            box-shadow:0 10px 30px rgba(0,0,0,.2);
            overflow:hidden;
            width:320px;
            border:1px solid #e7e7e7;
        }

        .branch-popup .mapboxgl-popup-tip{
            border-top-color:#fff;
        }

        .popup-card{
            padding:12px;
            background:#fff;
        }

        .popup-image{
            width:100%;
            height:190px;
            object-fit:cover;
            border-radius:10px;
            display:block;
            margin-bottom:10px;
    }

    .popup-title{
            font-family: 'MullerNextExpandedTrial-Regular';
            font-size: 24px;
            line-height:1;
            font-weight:400;
            margin: 12px 0;
            color:#2b2b2b;
    }

    .popup-text{
            color:#000;
            font-size:15px;
            margin:0 0 8px;
            line-height:1.4;
        }

        .popup-phone{
            margin:0 0 12px;
            color:#202020;
            font-size:16px;
            font-weight:600;
        }

        .popup-actions{
            display:flex;
            gap:8px;
        }

        .popup-btn{
            text-decoration:none;
            background:var(--color-blue);
            color:#fff;
            border-radius:999px;
            font-size:14px;
            font-weight:600;
            line-height:1;
            padding:9px 14px;
            border: 0;
        }

        .popup-btn:hover,  .popup-btn:active,  .popup-btn:focus-visible{
            color:#fff;
            opacity:.9;
            border: 0 !important;
        }

        .popup-btn-secondary{
            background:#4f97d2;
    }

/* ========================================= */
/* RESPONSIVE */
/* ========================================= */

@media(max-width:900px){
    .container-mapa{
        display:block;
        height:calc(100vh - 80px);
    }

    .map-sidebar-toggle{
        position:absolute;
        top:16px;
        left:16px;
        z-index:4;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        min-width:132px;
        padding:10px 18px;
        border:0;
        border-radius:999px;
        background:rgba(255,255,255,.94);
        color:#2a2a2a;
        font-size:14px;
        font-weight:600;
        box-shadow:0 8px 24px rgba(0,0,0,.18);
    }

    .sidebar{
        position:absolute;
        top:64px;
        left:0;
        bottom:16px;
        width:min(320px, calc(100vw - 72px));
        min-width:min(320px, calc(100vw - 72px));
        max-width:calc(100vw - 72px);
        height:auto;
        border-radius:0 18px 18px 0;
        box-shadow:0 16px 40px rgba(0,0,0,.18);
        transform:translateX(calc(-100% + 56px));
        transition:transform .3s ease;
        z-index:3;
    }

    .container-mapa.sidebar-open .sidebar{
        transform:translateX(0);
    }

    #map{
        height:100%;
    }

        .branch-name{
            font-size:28px;
        }

        .branch-popup .mapboxgl-popup-content{
            width:290px;
        }

        .popup-title{
            font-size:36px;
        }

        .sidebar-header{
            padding-right:20px;
        }

}




















/* footer */

footer{
    background: var(--color-white);
    border-top: 1px solid #878a8d ;
}
.copy span{
    font-family: "Source Sans 3", sans-serif;
    font-size: 14px;
    color: #333333;
}











.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;
}



.burbuja{
    margin-top: auto;
    width: 100%;
    padding: 25px;
    border-radius:25px 25px 0 0;
    z-index:10;
    border-width: 2px;
    border-bottom: 0;
    border-style: solid;
    border-color: rgba(255, 255, 255, .5);
    /* background: linear-gradient(
    180deg,
    #7091A4 0%,
    #5E7E90 50%,
    #4F6A79 100%
    ); */

    background: linear-gradient(
        180deg,
        rgba(104, 125, 142, 1) 0%,
        /* rgba(112, 145, 164, 1) 0%,  */
        rgba(94, 126, 144, 0.8) 50%, 
        rgba(79, 106, 121, 0) 100%
    );

    /* background: #92A5B5;
    background: linear-gradient(180deg,rgba(146, 165, 181, 1) 0%, rgba(146, 165, 181, 0.5) 55%, rgba(255, 255, 255, 0) 100%);; */
    /* background-image: url(../img/burbuja-degradado.png); */
 
}
.burbuja p{
    color: var(--color-white);
    text-align: center;
    margin-bottom:0;
    /* font-size:16px; */

}

.lista-burbuja{
    color: var(--color-white);
    margin: 0;
    padding-left: 1.25rem;
    text-align: left;
    column-gap: 2rem;
    list-style: disc;
}

.lista-burbuja li{
    break-inside: avoid;
    margin-bottom: 0.5rem;
}

.lista-burbuja-1{
    columns: 1;
}

.lista-burbuja-2{
    columns: 2;
}





.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;
    }
    .segment {
        height: 330px
    }
}


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



    .banner_title { font-size: clamp(42px,8vw,80px); }
    .banner-card { width: 100%; }
    .banner-card span { font-size: 26px; }


}

@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; }

    /* ------------- */
    .segment_tit {
        padding: 40px 26px;
    }
    .segment {
        height: 340px;
    }
    h3 {
        font-size: 26px;
    }
    .img-acc {
        width: 85%;
    }

}

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

    .banner_title { font-size: clamp(42px,8vw,67px); }
    .banner-card span { font-size: 20px; }

    .group, .group > div { min-height: 500px; }
    .banner-modelo { height: 500px; }

    .b-info { padding: 0; }
    .b-info h4 strong {
    font-size: 18px;}
    .b-info h4 {
    font-size: 13px;
    }
}
/* @media (min-width: 768px){

    .btncm{
        position: relative;
        margin-top: 200px;
 
    }
 
} */

@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; }

    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;
    }



    .banner_title { font-size: clamp(42px,8vw,48px); }
    .banner_layers { height: 50%; }
    .banners_cards { height: 50%; }
    .banner-card { width: 100%; margin-bottom: 10px; }


    .segment { margin-bottom: 15px; }
    .back-bt { margin-bottom: 20px; }
    .img-acc {  width: 100%; }


    .segment-btns .btn { margin: 0 5px; }
    .segment-text h2 { font-size: 26px; }
    
    
    h1 { font-size: 32px; }
    .segmentos{ padding-bottom: 20px; }



    .banner-card {
        padding: 15px 10px;
        min-height: 110px;
    }


}

@media (max-width: 998px) and (min-width: 640px){
    .segment-text {  min-height: 100px; }
}





@media (max-width: 568px){
    .heroSwiper, .heroSwiper .slide {
      height: 350px;
    }   
    .banner_title {
        font-size: clamp(20px,10vw,26px);
    }
    .banner-card span {
        font-size: 12px;
    }
    .content {
        padding: 25px 0;
    }
    .banner-card {
        padding: 9px 2px;
                min-height: 59px;
    }
    .banners_cards .col-4{
        padding-left: 2px;
        padding-right: 2px;
    }
    .banner-card p {
        font-size: 13px;
    }
    .banner_price h3 {
          font-size: 15px;
    }
    .banner_price h2{
        font-size: 20px;
    }
    #banner .swiper-button-next, #banner .swiper-button-prev{
        opacity: 0;
    }
    .banner_buttons .btn {
    padding: 5px 12px;
    font-size: 14px;}
    .banner_text {
    font-size: 14px;}

    .content {
        max-width: 100%;
        width: 100%;
    }
    .banners_cards .row{
        margin-left: 0;
        margin-right: 0;
    }
 

    .group, .group > div { min-height: 350px; }
    .banner-modelo { height: 350px; }

    .b-tit { padding: 20px 0; }
    /* .b-tit h2 { font-size: 16px; }
    .b-tit p { font-size: 12px; } */
    .b-tit h2 { font-size: 18px; }
    .b-tit p { font-size: 14px; }


    .b-info h4 strong {  font-size: 14px; } 
    .b-info h4 {  font-size: 12px;}
    .b-info {
    padding: 0px;
    }

    .burbuja {
        padding: 4px;
        background: #fff;
    }

    .banner-modelo .burbuja{
        background: linear-gradient( 180deg, #7091A4 0%, #5E7E90 50%, #4F6A79 100% );
        background: linear-gradient( 180deg, rgba(104, 125, 142, 1) 0%, rgba(94, 126, 144, 0.8) 50%, rgba(79, 106, 121, 0) 100% );
    }

    .banner-modelo  .lista-burbuja {
        color: #fff;
    }

    .b-info{
        /* padding: 0 !important; */
        padding-top: 10px !important;
    }


    .banner-modelo, .group .bg-video{
        position: relative;
    }
    .group .sombra{
        display: none;
    }

    .group h2, .group p{
        color: #333;
    }
    .lista-burbuja{
        color: #333;
    }

    .back-bt {
    min-height: 350px;
    }

    .popup-btn {
      font-size: 11px;
    }

}