:root {
  --border-light: #02336638;
  --border-light-ultra: #0233661c;
  --border-light-mid: #00336696;
  --border-light-focus: #02336673;
  --color-base: #003366;
  --blue: #003366;
  --color-grey:#f8f8f8;
  --color-grey-light:#f8f8f85c;
  --color-mid-grey:#c6c6c6;
  --color-inter-grey:#ededed;
  --color-dark-grey:#8c8a8a;
}

* {
user-select: none;
}
/*var(--color-base);*/
body {
font-family: 'Roboto', sans-serif;
overflow-x: hidden;
}

body::-webkit-scrollbar {
/* display: none; */
width: 1vh;             
}

body::-webkit-scrollbar-track {
background: #00000000;
border-radius: calc(0.8vh + 0.8vw);     
}

body::-webkit-scrollbar-thumb {
background-color: #B0BEC5;    
border-radius: 8px;       
border: 2px solid #ffffff;  
}
.img_zoom{
  width: 100%;
  height: auto;
  filter: brightness(60%);
  transition: transform 1.2s ease, filter 1.2s ease;
}
.img_zoom:hover{
  filter: brightness(70%);
  transition: transform 1.2s ease, filter 1.2s ease;
}

.button_menu {
display: inline-flex;
flex-direction: column;
width: 29px;
height: 17px;
border: 0;
background: transparent;
gap: 0.25rem;
}

.button_menu > div {
background: var(--color-base);
height: 2px;
width: 100%;
border-radius: 5px;
transition: all .5s;
transform-origin: left;
}

.button_menu:hover {
border: 0;
}
.button_menu:active {
border: 0;
}
.button_menu:focus {
border: 0;
}

.activado {
border: 0;
}

.activado {
border: 0;
}

.activado div:first-child {
transform: rotate(45deg);
}

.activado div:nth-child(2) {
opacity: 0;
}

.activado div:last-child {
transform: rotate(-45deg);
}

a{
color: var(--color-base);
text-decoration: none;
}

.ocultar{
display: none !important;
}
.form-alert{
border: 1px solid #f13a3ab5 !important;
}
.form-correct{
border: 1px solid #AED3F8 !important;
}
.alert-span{
font-size: 0.6rem;
color: #ee5f4b;
}

.navbar > .container {
padding: 0 calc(0.8vh + 0.8vw);
max-width: 100%;
}

.container {
padding-right: 53px;
padding-left: 53px;
}

.container-fluid{
padding: 0px;
}
.container-fluid .row{
margin: 0px;

}
.container-body{
margin-top: calc(1vh + 4vw);
margin-bottom:  calc(1vh + 1vw);
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{
text-transform: uppercase;
font-family: Roboto;
color: #013366;
}
.h2, h2 {
  font-size: 1.6rem;
}
.h3, h3 {
font-size: 1.3rem !important;
}
.text-light-grey{
font-size: 0.7rem;
color: var(--color-mid-grey);
}
.bg-grey{
background-color: var(--color-grey);
}
.btn-middle{
background-color: var(--color-base);
padding: 8px 46px;
font-size: 1rem !important;
margin-bottom: 4px;
/* max-width: 200px; */
color:#FFF;
}
.btn-large{
  background-color: var(--color-base);
  padding: 4px 46px;
  font-size: 0.6rem !important;
  margin-bottom: 4px;
  color:#FFF;
}
.tiny-text{
font-size: 0.6rem;
margin-top: 10px;
margin-bottom: 10px;
}
.subtitle_txt{
font-size: 0.8rem;
margin-top: 10px;
margin-bottom: 10px;
}
.container-normal{
margin: calc(0.8vh + 0.8vw) !important;
width: calc(100% - 34px);
}
/**** GENERALES****/
.form-control {
font-size: 0.9rem !important;
display: block;
width: 100%;
height: auto !important;
padding: 10px 16px;
/* font-size: 1.0rem; */
line-height: 0;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 12px;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.form-control::placeholder {
color: #101010; /* Cambia este color al que desees */
}

/* Navegadores antiguos de Mozilla Firefox */
.form-control:-moz-placeholder {
color: #101010;
}

/* Navegadores antiguos de Internet Explorer */
.form-control:-ms-input-placeholder {
color: #101010;
}

/* Navegadores antiguos de WebKit (Safari, Chrome) */
.form-control::-webkit-input-placeholder {
color: #101010;
}
textarea{
min-height: 6rem;
line-height: normal !important;
padding: 8px;
}
.form-check .form-check-input {
  margin-left: 0px;
}
.form-check label{
  margin-left: calc(0.8vh + 0.8vw);
}

.card-accion{
  min-height: 5rem;
  background-color: #CCC;
  text-align: center;
  display: flex;
  align-items: center; /* Alinea verticalmente */
  justify-content: center;
  font-size: 0.9rem;
}
.card-accion,.card-accion:hover{
  text-decoration: none;
  color:var(--color-base);
  border: 2px solid rgba(0, 0, 0, .125);
}

#closeChatButton{
margin: calc(0.8vh + 0.8vw);
right: 0px;
padding: 4px 8px 4px 8px;
font-size: 0.7rem;
position: absolute;
top: 0px;
width: 33%;
}
/* Estilos para el contenedor del iframe del chat */
.chat-container {
  position: fixed;
  display: none;
  bottom: calc(0.8vh + 0.8vw);
  right: 16px;
  z-index: 9999;
  width: 300px;
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  background-color: #f8f8f8;
}


/* Estilos para el iframe del chat */
.chat-container iframe {
  width: 100%;
  height: 400px;
}

/* Estilos para el botón flotante */
#openChatButton {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999; /* Asegura que el botón esté por encima de otros elementos */
  display: grid;
  font-size: 1.6rem;
}

#openChatButton svg {
margin-top: 5px;
margin-bottom: 1px;
width: 100%;
}

div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm {
  background-color: #013366 !important;
}
button:focus,button:hover,.btn-link:focus,.btn-link:hover{
outline: none; 
border: 1px solid var(--color-mid-grey);
}

.btn-primary:focus,.btn-primary:hover{
outline: none; 
border: 1px solid var(--color-mid-grey);
background-color: var(--color-base);
}
.btn-link{
color: var(--color-base);
}

.navbar a{
color: var(--border-light-focus);
font-size: 1rem;
font-family:Roboto;
font-weight: 300;
}

.navbar_span {
font-size: 1.3rem;
display: inline-flex;
font-weight: 100;
}

.nav_bread{
color: #013366;
font-size: 0.8rem;
padding: 0px;
}
.col-fluid{
margin-right: 0px;
margin-left: 0px;
}
#principal_bar{

background-color: #ffffffe0;
z-index: 200;
}

#principal_bar {
position: -webkit-sticky; /* Para navegadores webkit */
position: sticky;
height: 77px;
top: 0; /* Establece la posición en la parte superior */
z-index: 1000; /* Asegura que esté por encima de otros elementos */
background-color: #ffffffe0; /* Fondo del elemento */
border-bottom: solid 1px #0133664d;
}

.logo_img{
  margin-left: auto;
  margin-right: auto;
  vertical-align: middle;
  border-style: none;
  height: 61px;
  width: auto;
  padding-bottom: 10px;
}
.elemento-desplazable {
/* transition: all 2s ease-out 0s; */
opacity: 0;
display: none;
position: absolute;
top: 50%;
transform: translateX(50%);
}

#principal_bar {
  position: sticky;
  position: -webkit-sticky; /* Prefijo específico para WebKit */
  top: 0;
  z-index: 1000;
  background-color: #ffffffe0;
  
}
.principal_bar a{
font-family:Roboto;
font-weight: lighter;
font-size: 0.9em;
color:var(--color-base);
}
footer{
background-color: #013366;
color: #FFF;
font-size: 0.7rem;
}
footer li a{
color: #FFF;
font-size: 0.7rem;
font-weight: 100;
}
footer p a{
color: #FFF;
font-size: 0.9rem;
font-weight: 100;
padding: 6px;
}
footer p a:hover,footer li a:hover,footer p a:focus,footer li a:focus{
color: #f8f8f8;
}
footer h3{
color: #FFF;
font-size: 0.6rem;
font-weight: 100;
}
.poweredby{
border-top: 1px solid #FFF;
}

.btn-round {
  font-size: 0.9rem;
  border: 2px solid;
  padding: 2px 6px;
}
.btn-agenda{
  padding: 4px 8px 3px 7px !important;
}
.btn-cotiza{
  padding: 4px 10px 3px 8px !important;
}
.modal-container {
position: fixed;
top: 62px;
left: 0;
text-align: center;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.9);
z-index: 999;
display: none;
justify-content: center;
align-items: center;
color: var(--color-base);
}

.modal {
color: var(--color-base);
padding: calc(0.8vh + 0.8vw);
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Sombra alrededor del modal */
}
.modal-body{
width: 100%;
padding: calc(0.8vh + 0.8vw);
top: 43px;
}
.nav-menu-modal{
text-align: left;
margin-left: 46px;
text-transform: uppercase;
font-size: 0.8rem;
font-weight: 100;
color: var(--color-base);
}
.nav-menu-modal li a{
color: var(--color-base);
font-weight: 400;
padding: .4rem 1rem;
}
/**** TOPBAR****/
.top-var-element  {
  position: relative;
}

.top-var-element::after {
  /* content: ''; */
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  height: 40%; /* Ajusta la altura según sea necesario */
  width: 1px;
  background-color: #ccc;
}
.menu-icon-nav{
font-weight: 100;
}
.menu-icon-nav i{
margin-right: calc(0.8vh + 0.8vw);
font-weight: 100;
}

.principal_bar a{
font-family:Roboto;
font-weight: lighter;
font-size: 0.9em;
color:var(--color-base);
}
.topnav {
background-color: var(--color-base);
overflow: hidden;
width: 100%;
height: auto;
text-align: right;
}
.topnav a{
color:#FFF !important;
font-family: Roboto;
font-size: 0.8em;
}
.topnav nav{
padding: 0px;
}
/**** TOPBAR****/
/**** GALERIA INDEX *****/

.c-item {
height: calc(100vh - 108px);
}

.c-img {
height: 100%;
object-fit: cover;
/* filter: brightness(0.6); */
}

/* .carousel-item img {
max-height: 40rem;
width: auto;
} */
.carousel-indicators {
bottom: 16px;
left: 32px;
right: auto;
margin-left: 25px;
}
.carousel-indicators li {
background-color: #ccc;
border: solid 1px #FFF;
width: 12px;
height: 12px;
margin-right: 5px;
margin-left: 5px;
border-radius: 50%;
}
.carousel-indicators .active {
background-color: #FFF;
}
.btn-floating {
position: absolute;
bottom: calc(0.8vh + 0.8vw);
right: calc(0.8vh + 0.8vw);
z-index: 1000; /* Asegurar que esté sobre el contenido del slide */
}
.gallery-btn-bottom{
position: absolute;
bottom: 12px;
right: 28px;
}
.btn{
font-size: 1rem;
}
.btn-primary{
background-color: var(--color-base);
}
.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-primary.dropdown-toggle:focus{
  background-color: #013366d1;
  border-color: #013366d1;
  box-shadow: 0 0 0 0.1rem rgb(255 255 255 / 20%);
}
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle{
background-color: #013366d1;
border-color: #013366d1;
}
.btn-light{
background-color: #F1F1F1;
color: var(--color-base);
border: solid 1px var(--color-base);
transition: 0.7s;
}
.btn-agenda{
padding: 2px 9px !important;
}
.btn-cotiza{
padding: 3px 6px !important;
}
.btn-light-mid{
background-color: #f1f1f1cf;
  color: #003366db;
  border: solid 1px var(--border-light-mid);
  padding: 2px 25px;
  font-size: calc(0.5vw + 0.5vh);
  padding-top: 6px;
}

.testdrive-btn{
position: relative;
bottom: -11px;
margin-right: calc(0.8vh + 0.8vw);
font-weight: lighter;
width: 1calc(0.8vh + 0.8vw);
border-radius: 5px;
transition: 0.7s;
}

.testdrive-btn:hover {
background-color: var(--color-base);
color: var(--color-grey);
border: solid 1px #FFF;
}

.testdrive_pricipal {
background-color: #ffffffc2;
margin-right: 102px;
bottom: 12px;
font-size: 1rem;
width: 152px;
border: 0;
}

.chatbot-btn{
border-radius: 50%;
padding: 8px;
font-size: 0.7rem;
width: 83px;
height: 83px;
border: solid 1px #FFF;
line-height: 1.2;
text-align: center;
}

@keyframes glowing {
0% {
    background-position: 0 0;
}
50% {
    background-position: 400% 0;
}
100% {
    background-position: 0 0;
}
}

.chatbot-btn::before{
content: "";
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
background: linear-gradient(45deg, #118EEA, var(--color-base), #118EEA, #118EEA, var(--color-base), var(--color-base), var(--color-base), #118EEA);
background-size: 800%;
border-radius: 50%;
filter: blur(8px);
animation: glowing 20s linear infinite;
}

.chatbot-btn:hover,.chatbot-btn:focus{
background-color: #013366;
border-color: #013366;
color: #FFF;
}
.chatbot-btn span{
font-size: 0.5rem;
display: inline-block;
}
.chatbot-btn span br{
height: 0.5em;
}
.sticky {
position: sticky;
top: 0;
width: 100%;
}

.sticky + .content {
padding-top: calc(2vh + 2vw);
}
.help_lat {
position: absolute;
background-color: #ffffffeb;
top: 43%;
right: -150px;
padding: 9px;
margin: 0px;
width: 326px;
height: calc(1.5vh + 1.5vw);
text-align: center;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
/*transform: translateX(100%) rotate(-90deg);*/
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
font-size: 0.9em;
color: #013366;
z-index: 200;
border-radius: 4px 4px 0px 0px;
}
.help_lat:hover{
cursor: pointer;
}
.help_lat.highlight {
background-color: #fff; /* Nuevo color de fondo */
}
.control-smart{
  display: none;
}
.control-smart:hover{
  cursor: pointer;
}
.frame_lat {
position: absolute;
display: none;
top: calc(43% - 143px);
right: -26px;
transform: translateX(-50%);
width: 120px;
height: 326px;  
background-color: #ffffffc2;
padding: calc(0.8vh + 0.8vw);
text-align: center;
color: #013366;
border-radius: 4px 0px 0px 4px;
z-index: 120;
}

.frame_cookies {
  position: absolute;
  display: none;
  top: calc(43% - 143px);
  right: -26px;
  transform: translateX(-50%);
  width: 120px;
  height: 326px;
  background-color: #ffffffc2;
  padding: calc(0.8vh + 0.8vw);
  text-align: center;
  color: #013366;
  border-radius: 4px 0px 0px 4px;
  z-index: 120;
}

.btn-round{
font-size: 1.4rem;
border-radius: 50%;
border: 2px solid;
padding: 2px 6px;
}
.btn-round:hover{
border: 2px solid;
}
.frame_lat p{
margin-top:6px;
font-size: 0.6rem;
font-weight: 100;
}
.frame_lat div{
margin-top: calc(0.8vh + 0.8vw);
margin-bottom: calc(0.8vh + 0.8vw);
}

.help_lat:hover{
cursor: pointer;
}

/**** MENU TOP SECUNDARIO *****/
.img-topshow {
position: relative;
max-height: 500px;
overflow: hidden;
padding: 0px;
}

.img-topshow::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3); /* Color negro con opacidad del 50% */
z-index: 1; /* Coloca el fondo oscuro encima de la imagen */
}

.img-topshow img {
width: auto;
height: 100%;
object-fit: cover;
z-index: 2; /* Asegura que la imagen esté por encima del fondo oscuro */
}

.overlay {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: calc(2.3vh + 2.3vw);
width: calc(100% - 79px);
text-align: left;
z-index: 2;
}


.overlay h1 {
  color: white; /* Color del texto */
  font-size: 1.2rem; /* Tamaño del texto */
  margin: 0; /* Elimina el margen predeterminado del título */
}


p { 
font-size: 1.0rem;
color: #444343;
}
/**** MENU TOP SECUNDARIO *****/
/**** GALERIA MARCA *****/
.carousel-marca{
background-color: #f1f1f180;
padding: 17px 4px;
border-radius: 5px;
margin-bottom: 10px;
}
.carousel-marca img{
max-height: 6rem;
max-width: 6rem;
}
.carousel-marca .col-sm-auto{
transition: 0.7s;
padding: 8px 6px;
border: 1.5px solid var(--border-light-ultra);
border-radius: 5px;
margin: 6px;
margin-bottom: 10px;
cursor: pointer;
}
.carousel-marca .col-sm-auto:focus,.carousel-marca .col-sm-auto:hover{
border: 1px solid var(--border-light-focus);
cursor: pointer;
}

.marca-activa {
/*border: 1px solid var(--border-light-focus) !important;*/
background-color: #02336630;
}

/**** GALERIA MARCA *****/
/**** GALERIA MODELO *****/
.carousel-modelo{
background-color: #FFF;
padding: 17px 4px;
border-radius: 5px;
margin-bottom: 10px;
}
.carousel-modelo .modelo-item{
transition: 0.7s;
color: var(--color-base);
font-weight: 100;
text-align: center;
font-size: 0.8rem;
padding-top: 12px;
padding-bottom: 8px;
border-radius: 5px;
border: 1px solid var(--border-light-ultra);
margin-right: 8px;
}
.carousel-modelo .modelo-item.active{
border: 1px solid var(--border-light);
}
.modelo-item:focus,.modelo-item:visited,.modelo-item:hover,.modelo-item.focus_class{ 
/* border: solid 1px var(--border-light-focus); */
}
.carousel-modelo .modelo-item.active a span{
color:#013366;
}
.carousel-modelo img{
max-height: 6rem;
max-width: 6rem;
}

.img-comparador{
max-height: 10rem !important;
max-width: 10rem !important;
}

.modelo-item a{
  text-decoration: none;
}
.modelo-item a:hover,.carousel-modelo.modelo-item a:focus{
font-size: 0.9em;
color: #939393;
display: block;
text-decoration: none;
}
.modelo-item a span{
  font-size: 1rem;
  color: #939393;
  display: block;
  margin-top: 8px;
  margin-bottom: 3px;
}
.modelo-item a span:first-child{
  
}

.modelo-item a span:last-child{
  margin-top: 0px;
  margin-bottom: 0px;
  font-size: 0.8rem;
}
/* Estilo para el botón de control previo */
.carousel-btn {
  position: absolute;
  top: 44%;
  transform: translateY(-50%);
  background-color: #FFF;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  border: solid 1px #CCC;
  color: #000;
  /* margin: calc(1vh + 1vw); */
  font-size: 0.8rem;
  padding: 8px 14px 12px 11px !important;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6);    
  padding: 10px;
  cursor: pointer;
  text-decoration: none;
}

.carousel-btn .fa {
  font-size: 0.8rem;
}
.control-prev {
  left: 0;
}
.control-next {
  right: 0;
}

.carousel-btn:focus,.carousel-btn:hover{
color:var(--color-base);
background-color: #f8f8f8;
}

.custom-col-20{
display: flex;
flex-direction: column;
width: 20%;
max-width: 20%;
flex: 0 0 20%;
}
/**** GALERIA MODELO *****/
/**** GALERIA ESTILOS *****/
.nav-estilos{
display: none !important;
padding: 10px 12px;
background-color: #9e9e9e17;
border-radius: 4px 4px 0px 0px;
margin-bottom: 4px;
}
.estilo_contenedor{
padding: calc(0.8vh + 0.8vw);
border-radius: 5px;
}
.estilo_contenedor:before {
content:'';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
/* background-color: rgba(0,0,0,0.8); */
border-radius: 0px 0px 4px 4px;
}
.estilo_contenedor h4,.estilo_contenedor p{
color:#FFF;
margin-top: 10px;
}
.estilo_contenedor p{
font-size: 1rem;
font-weight: 200;
}
.estilo_contenedor hr{
border-top: 0.01rem solid #FFF;
}
.card-estilos{
height: 15rem;
overflow: hidden;
border-radius: 5px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6);
position: relative;
text-align: center;
background-color: #CCC;
background-size: cover; /* Para asegurarte de que la imagen se ajuste al tamaño del contenedor */
background-position: center;
img {
  transition: transform 2s, filter 1.5s ease-in-out;
  transform-origin: center center;
  filter: brightness(50%);
}
}
.card-estilos:hover{
img {
  filter: brightness(100%);
  transform: scale(1.3);
}
cursor: pointer;
}

.card-estilos:before {
content:'';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.1);
border-radius: 0px 0px 4px 4px;
}
.card-estilos div{
  word-break: break-all;
  position: absolute;
  bottom: 24px;
  text-align: center;
  width: 100%;
  color:#FFF;
  font-weight:600;
  font-size: 0.8rem;
}
.card-estilos.active,.card-estilos:hover, .card-estilos:focus{
img {
  filter: brightness(1);
}
max-height: 15rem;
font-weight:bolder;
font-size: 1.2rem;
}

.card-estilos.active:before {
content:'';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: rgb(255 255 255 / 10%);

}

.select-estilos {
  position: relative;
  display: inline-block;
  margin-bottom: calc(0.5vh + 0.5vw);
  width: 100%;
}
.select-estilos select {
  display: inline-block;
  margin: 0px;
  width: 100%;
  background: transparent;
  font-size: 1.5rem;
  cursor: pointer;
  outline: 0;
  border: 1px solid #ffffff40;
  padding: 3px 8px;
  border-radius: 5px;
  background: transparent;
  color: #ffffff;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.select-estilos select::-ms-expand {
  display: none;
}
.select-estilos select:hover,
.select-estilos select:focus {
  color: #FFF;
  background: #ffffff08;
}
.select-estilos select:disabled {
  opacity: 0.5;
  pointer-events: none;
}

.select-estilos option {
background-color: #313131;
color: #FFF;
width: 100%;
}


.select-estilos::before,
.select-estilos::after {
--size: 0.6rem;
content: "";
position: absolute;
right: 1rem;
pointer-events: none;
}

.select-estilos::after {
border-left: var(--size) solid transparent;
border-right: var(--size) solid transparent;
border-top: var(--size) solid #ffffff70;
top: 45%;
}
/**** GALERIA ESTILOS *****/


/**** GALERIA INDEX *****/
/**** GALERIA VEHICULO *****/
.contenedor_index_vehiculo {
  position: relative;
  width: 100%;
  height: 560px;
  text-align: center;
}
.index_marca,
.index_modelo,
.index_vehiculo {
  transition: all 2s ease-out 0s;
  text-align: center;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

.index_marca {
  position: absolute;
  top: calc(0.8vh + 0.8vw);
  z-index: 1;
  font-size: 1.8em;
  color: #33333380;
  font-weight: lighter;
}
.index_modelo {
  z-index: 2;
  font-size: 6em;
  color: #33333380;
  position: absolute;
  top: 34px;
}
.index_vehiculo {
  z-index: 3;
  top: 110px;
  position: relative;
}
.footer-vehiculo{
position: absolute;
left: 0;
right: 0;
bottom: 0px;
width: 100%;
margin: 0 0 calc(0.8vh + 0.8vw);
padding: 0 16px;
display: flex;
justify-content: center !important;
align-items: center;
gap: clamp(72px, 14vw, 190px);
box-sizing: border-box;
}
.footer-vehiculo .btn_base{
  flex: 0 0 auto;
  margin-left: 38px !important;
  margin-right: 38px !important;
}
/**** GALERIA VEHICULO *****/
/*++ GALERIA GENERAL++*/
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 100%;
}

#bigcarousel .carousel-indicators {
position: static;
margin-top:20px;
}

#bigcarousel .carousel-indicators > li {
width:100px;
}

#bigcarousel .carousel-indicators li img {
display: block;
filter: brightness(0.5);
}

#bigcarousel .carousel-indicators li.active img {
opacity: 1;
}

#bigcarousel .carousel-indicators li:hover img {
opacity: 0.75;
}
#bigcarousel .carousel-indicators {
position: sticky;
margin-top: -23px;
background-color: #f8f8f8;
width: 50%; /* Ancho del 40% */
height: 6rem;
z-index: 200;
padding: 14px;
border-radius: 5px;
border: 1px solid #efefef;
left: 25%; /* Centrado horizontal */
}
#bigcarousel .carousel-indicators li img {
display: block;
opacity: 0.5;
height: 3.5rem;
border: 1px solid #efefef;
border-radius: 5px;
}

.col-sm-3 {
margin-bottom: 16px;
}

.cookie-banner {
z-index: 9998;
}

.navbar-nav {
color: #013366;
}

.selecction {
color: #002f5f;
margin-top: -6px;
margin-bottom: 9px;
}

.card-img {
width: 100%;
height: 100%;
object-fit: cover;
}

.banner_final {
margin-top: calc(4vh + 4vw);
/* margin-bottom: 60px; */
}

/* .mb-3, .my-3 {
margin-bottom: 3rem!important;
} */

.btn_servicios {
font-size: 1.5rem !important;
overflow: auto;
  word-wrap: break-word;
  text-transform: uppercase;
  width: 80%;
  border: none;
  background: transparent;
}

.btn_servicios:hover {
border: none;
background: transparent !important;
}

.btn_servicios:active {
border: none;
background: transparent !important;
}
.btn_servicios:focus {
border: none;
background: transparent !important;
}

.card-servicios{
height: 15rem;
overflow: hidden;
border-radius: 5px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6);
position: relative;
text-align: center;
background-color: #CCC;
background-size: cover; /* Para asegurarte de que la imagen se ajuste al tamaño del contenedor */
background-position: center;
img {
  transition: transform 2s, filter 1.5s ease-in-out;
  transform-origin: center center;
  filter: brightness(50%);
}
}
.card-servicios:hover{
img {
  filter: brightness(70%);
  transform: scale(1.3);
}
cursor: pointer;
}

.card-servicios div{
word-break: break-all;
position: absolute;
bottom: 44%;
text-align: center;
width: 100%;
color:#FFF;
font-weight:600;
font-size: 0.8rem;
}
.card-servicios.active,.card-servicios:hover, .card-servicios:focus{
img {
filter: brightness(70%);
}
min-height: 15rem;
font-weight:bolder;
font-size: 1.2rem;
}

.card-tipo {
display: block !important;
max-width: 17% !important;
max-height: 7.2rem !important;
padding: 0px !important;
overflow: hidden;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6);
text-align: center;
background-color: #CCC;
img {
  transition: transform 2s, filter 1.5s ease-in-out;
  transform-origin: center center;
  filter: brightness(20%);
}
}
.card-tipo:hover{
img {
  filter: brightness(100%);
  transform: scale(1.3);
}
cursor: pointer;
}

.card-tipo div {
position: absolute;
bottom: 1rem;
left: 0px;
width: 100%;
text-align: center;
/* width: 51%; */
color: #FFF;
font-weight: 300;
font-size: 0.8rem;
}

.card-busqueda {
display: block !important;
max-height: 3.2rem !important;
padding: 0px !important;
overflow: hidden;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6);
text-align: center;
background-color: #CCC;
img {
  transition: transform 2s, filter 1.5s ease-in-out;
  transform-origin: center center;
  filter: brightness(50%);
}
}
.card-busqueda:hover{
img {
  filter: brightness(100%);
  transform: scale(1.3);
}
cursor: pointer;
}

.card-busqueda div {
position: absolute;
bottom: 1rem;
left: 0px;
width: 100%;
text-align: center;
/* width: 51%; */
color: #FFF;
font-weight: 300;
font-size: 0.8rem;
}

.card-personas {
max-width: 21% !important;
background-size: contain !important;
background-repeat: no-repeat !important;
}

.card-personas:hover {
background-color: rgba(0, 0, 0, 0.1);
}

.card-capacidad {
max-width: 21% !important;
background-size: contain !important;
background-repeat: no-repeat !important;
} 

.card-capacidad:hover {
background-color: rgba(0, 0, 0, 0.1);
} 

.blog:hover {
p, h4 {
  color: #383782;
  cursor: default;
}
}

/*************************************************************************************/

header.masthead {
position: relative;
margin-bottom: 3rem;
padding-top: calc(8rem + 57px);
padding-bottom: 8rem;
background: no-repeat center center;
background-color: #6c757d;
background-size: cover;
background-attachment: scroll;
}
header.masthead:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #212529;
opacity: 0.5;
}
header.masthead .page-heading,
header.masthead .post-heading,
header.masthead .site-heading {
color: #fff;
}
header.masthead .page-heading,
header.masthead .site-heading {
text-align: center;
}
header.masthead .page-heading h1, header.masthead .page-heading .h1,
header.masthead .site-heading h1,
header.masthead .site-heading .h1 {
font-size: 3rem;
}
header.masthead .page-heading .subheading,
header.masthead .site-heading .subheading {
font-size: 1.5rem;
font-weight: 300;
line-height: 1.1;
display: block;
margin-top: 0.625rem;
}
header.masthead .post-heading h1, header.masthead .post-heading .h1 {
font-size: 2.25rem;
}
header.masthead .post-heading .meta,
header.masthead .post-heading .subheading {
line-height: 1.1;
display: block;
}
header.masthead .post-heading .subheading {
font-size: 1.5rem;
font-weight: 600;
margin: 0.75rem 0 2rem;
}
header.masthead .post-heading .meta {
font-size: 1.25rem;
font-weight: 300;
font-style: italic;
}
header.masthead .post-heading .meta a {
color: #fff;
}
@media (min-width: 992px) {
header.masthead {
  padding-top: 12.5rem;
  padding-bottom: 12.5rem;
}
header.masthead .page-heading h1, header.masthead .page-heading .h1,
header.masthead .site-heading h1,
header.masthead .site-heading .h1 {
  font-size: 5rem;
}
header.masthead .post-heading h1, header.masthead .post-heading .h1 {
  font-size: 3.5rem;
}
header.masthead .post-heading .subheading {
  font-size: 1.875rem;
}
}

.blog-p {
p {
  margin-bottom: 1rem;
}
}

.section-heading {
font-size: 2.25rem;
font-weight: 700;
margin-top: 3.75rem;
}

caption {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
color: #6c757d;
text-align: left;
}

.caption {
font-size: 0.875rem;
font-style: italic;
display: block;
margin: 0;
padding: 0.625rem;
text-align: center;
}

.title-top {
margin-bottom: 1rem;
font-size: 1.8rem !important;
text-transform: uppercase;
}

/*Styling Selectbox*/
.dropdown {
width: 100%;
display: inline-block;
background-color: var(--color-inter-grey);
border-radius: 2px;
box-shadow: 0 0 2px rgb(204, 204, 204);
transition: all .5s ease;
position: relative;
font-size: 14px;
color: #474747;
/* height: 100%; */
text-align: left
}
.dropdown .select {
  cursor: pointer;
  display: block;
  padding: 10px
}
.dropdown .select > i {
  font-size: 14px;
  color: #888;
  cursor: pointer;
  transition: all .3s ease-in-out;
  float: right;
  line-height: calc(0.8vh + 0.8vw)
}
.dropdown:hover {
  box-shadow: 0 0 4px rgb(204, 204, 204)
}
.dropdown:active {
  background-color: #f8f8f8
}
.dropdown.active:hover,
.dropdown.active {
  box-shadow: 0 0 4px rgb(204, 204, 204);
  border-radius: 2px 2px 0 0;
  background-color: #f8f8f8
}
.dropdown.active .select > i {
  transform: rotate(-90deg)
}
.dropdown .dropdown-menu {
font-size: 14px;
  position: absolute;
  background-color: #fff;
  width: 100%;
  left: 0;
  margin-top: 1px;
  box-shadow: 0 1px 2px rgb(204, 204, 204);
  border-radius: 0 1px 2px 2px;
  overflow: hidden;
  display: none;
  max-height: fit-content;
  overflow-y: auto;
  z-index: 9
}
.dropdown .dropdown-menu li {
  padding: 10px;
  transition: all .2s ease-in-out;
  cursor: pointer
} 
.dropdown .dropdown-menu {
  padding: 0;
  list-style: none
}
.dropdown .dropdown-menu li:hover {
  background-color: #f2f2f2
}
.dropdown .dropdown-menu li:active {
  background-color: #e2e2e2
}
.select:focus-visible {
outline: 0;
}

.dropdown:focus-visible {
outline: 0;
}

/*************************************************************************************/
/* Input Range */

.range-slider {
--primary-color: #0366d6;
--value-offset-y: var(--ticks-gap);
--value-active-color: white;
--value-background: transparent;
--value-background-hover: var(--primary-color);
--value-font: 700 12px/1 Arial;
--fill-color: var(--primary-color);
--progress-background: #eee;
--progress-radius: calc(0.8vh + 0.8vw);
--track-height: calc(var(--thumb-size) / 2);
--min-max-font: 12px Arial;
--min-max-opacity: 0.5;
--min-max-x-offset: 10%;
--thumb-size: calc(0.8vh + 0.8vw);
--thumb-color: white;
--thumb-shadow: 0 0 3px rgba(0, 0, 0, 0.4), 0 0 1px rgba(0, 0, 0, 0.5) inset,
  0 0 0 99px var(--thumb-color) inset;
--thumb-shadow-active: 0 0 0 calc(var(--thumb-size) / 4) inset
    var(--thumb-color),
  0 0 0 99px var(--primary-color) inset, 0 0 3px rgba(0, 0, 0, 0.4);
--thumb-shadow-hover: var(--thumb-shadow);
--ticks-thickness: 1px;
--ticks-height: 5px;
--ticks-gap: var(
  --ticks-height,
  0
);
--ticks-color: silver;
--step: 1;
--ticks-count: Calc(var(--max) - var(--min)) / var(--step);
--maxTicksAllowed: 30;
--too-many-ticks: Min(1, Max(var(--ticks-count) - var(--maxTicksAllowed), 0));
--x-step: Max(
  var(--step),
  var(--too-many-ticks) * (var(--max) - var(--min))
);
--tickInterval: 100/ ((var(--max) - var(--min)) / var(--step)) * var(--tickEvery, 1);
--tickIntervalPerc: calc(
  (100% - var(--thumb-size)) / ((var(--max) - var(--min)) / var(--x-step)) *
    var(--tickEvery, 1)
);
--value-a: Clamp(
  var(--min),
  var(--value, 0),
  var(--max)
);
--value-b: var(--value, 0);
--text-value-a: var(--text-value, "");
--completed-a: calc(
  (var(--value-a) - var(--min)) / (var(--max) - var(--min)) * 100
);
--completed-b: calc(
  (var(--value-b) - var(--min)) / (var(--max) - var(--min)) * 100
);
--ca: Min(var(--completed-a), var(--completed-b));
--cb: Max(var(--completed-a), var(--completed-b));
--thumbs-too-close: Clamp(
  -1,
  1000 * (Min(1, Max(var(--cb) - var(--ca) - 5, -1)) + 0.001),
  1
);
--thumb-close-to-min: Min(1, Max(var(--ca) - 2, 0));
--thumb-close-to-max: Min(1, Max(98 - var(--cb), 0));
display: inline-block;
height: max(var(--track-height), var(--thumb-size));
background: linear-gradient(to right, var(--ticks-color) var(--ticks-thickness), transparent 1px) repeat-x;
background-size: var(--tickIntervalPerc) var(--ticks-height);
background-position-x: calc( var(--thumb-size) / 2 - var(--ticks-thickness) / 2 );
background-position-y: var(--flip-y, bottom);
padding-bottom: var(--flip-y, var(--ticks-gap));
padding-top: calc(var(--flip-y) * var(--ticks-gap));
position: relative;
z-index: 1;
}
.range-slider[data-ticks-position=top] {
--flip-y: 1;
}
.range-slider::before, .range-slider::after {
--offset: calc(var(--thumb-size) / 2);
content: counter(x);
display: var(--show-min-max, block);
font: var(--min-max-font);
position: absolute;
bottom: var(--flip-y, -2.5ch);
top: calc(-2.5ch * var(--flip-y));
opacity: clamp(0, var(--at-edge), var(--min-max-opacity));
transform: translateX(calc(var(--min-max-x-offset) * var(--before, -1) * -1)) scale(var(--at-edge));
pointer-events: none;
}
.range-slider::before {
--before: 1;
--at-edge: var(--thumb-close-to-min);
counter-reset: x var(--min);
left: var(--offset);
}
.range-slider::after {
--at-edge: var(--thumb-close-to-max);
counter-reset: x var(--max);
right: var(--offset);
}
.range-slider__values {
position: relative;
top: 50%;
line-height: 0;
text-align: justify;
width: 100%;
pointer-events: none;
margin: 0 auto;
z-index: 5;
}
.range-slider__values::after {
content: "";
width: 100%;
display: inline-block;
height: 0;
background: red;
}
.range-slider__progress {
--start-end: calc(var(--thumb-size) / 2);
--clip-end: calc(100% - (var(--cb)) * 1%);
--clip-start: calc(var(--ca) * 1%);
--clip: inset(-20px var(--clip-end) -20px var(--clip-start));
position: absolute;
left: var(--start-end);
right: var(--start-end);
top: calc( var(--ticks-gap) * var(--flip-y, 0) + var(--thumb-size) / 2 - var(--track-height) / 2 );
height: calc(var(--track-height));
background: var(--progress-background, #eee);
pointer-events: none;
z-index: -1;
border-radius: var(--progress-radius);
}
.range-slider__progress::before {
content: "";
position: absolute;
left: 0;
right: 0;
-webkit-clip-path: var(--clip);
        clip-path: var(--clip);
top: 0;
bottom: 0;
background: var(--fill-color, black);
box-shadow: var(--progress-flll-shadow);
z-index: 1;
border-radius: inherit;
}
.range-slider__progress::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-shadow: var(--progress-shadow);
pointer-events: none;
border-radius: inherit;
}
.range-slider > input {
-webkit-appearance: none;
width: 100%;
height: var(--thumb-size);
margin: 0;
position: absolute;
left: 0;
top: calc( 50% - Max(var(--track-height), var(--thumb-size)) / 2 + calc(var(--ticks-gap) / 2 * var(--flip-y, -1)) );
cursor: -webkit-grab;
cursor: grab;
outline: none;
background: none;
}
.range-slider > input:not(:only-of-type) {
pointer-events: none;
}
.range-slider > input::-webkit-slider-thumb {
-webkit-appearance: none;
        appearance: none;
height: var(--thumb-size);
width: var(--thumb-size);
transform: var(--thumb-transform);
border-radius: var(--thumb-radius, 50%);
background: var(--thumb-color);
box-shadow: var(--thumb-shadow);
border: none;
pointer-events: auto;
-webkit-transition: 0.1s;
transition: 0.1s;
}
.range-slider > input::-moz-range-thumb {
-moz-appearance: none;
     appearance: none;
height: var(--thumb-size);
width: var(--thumb-size);
transform: var(--thumb-transform);
border-radius: var(--thumb-radius, 50%);
background: var(--thumb-color);
box-shadow: var(--thumb-shadow);
border: none;
pointer-events: auto;
-moz-transition: 0.1s;
transition: 0.1s;
}
.range-slider > input::-ms-thumb {
appearance: none;
height: var(--thumb-size);
width: var(--thumb-size);
transform: var(--thumb-transform);
border-radius: var(--thumb-radius, 50%);
background: var(--thumb-color);
box-shadow: var(--thumb-shadow);
border: none;
pointer-events: auto;
-ms-transition: 0.1s;
transition: 0.1s;
}
.range-slider > input:hover {
--thumb-shadow: var(--thumb-shadow-hover);
}
.range-slider > input:hover + output {
--value-background: var(--value-background-hover);
--y-offset: -5px;
color: var(--value-active-color);
box-shadow: 0 0 0 3px var(--value-background);
}
.range-slider > input:active {
--thumb-shadow: var(--thumb-shadow-active);
cursor: -webkit-grabbing;
cursor: grabbing;
z-index: 2;
}
.range-slider > input:active + output {
transition: 0s;
}
.range-slider > input:nth-of-type(1) {
--is-left-most: Clamp(0, (var(--value-a) - var(--value-b)) * 99999, 1);
}
.range-slider > input:nth-of-type(1) + output {
--value: var(--value-a);
--x-offset: calc(var(--completed-a) * -1%);
}
.range-slider > input:nth-of-type(1) + output:not(:only-of-type) {
--flip: calc(var(--thumbs-too-close) * -1);
}
.range-slider > input:nth-of-type(1) + output::after {
content: var(--prefix, "") var(--text-value-a) var(--suffix, "");
}
.range-slider > input:nth-of-type(2) {
--is-left-most: Clamp(0, (var(--value-b) - var(--value-a)) * 99999, 1);
}
.range-slider > input:nth-of-type(2) + output {
--value: var(--value-b);
}
.range-slider > input:only-of-type ~ .range-slider__progress {
--clip-start: 0;
}
.range-slider > input + output {
--flip: -1;
--x-offset: calc(var(--completed-b) * -1%);
--pos: calc(
  ((var(--value) - var(--min)) / (var(--max) - var(--min))) * 100%
);
pointer-events: none;
position: absolute;
z-index: 5;
background: var(--value-background);
border-radius: 10px;
padding: 2px 4px;
left: var(--pos);
transform: translate(var(--x-offset), calc( 150% * var(--flip) - (var(--y-offset, 0px) + var(--value-offset-y)) * var(--flip) ));
transition: all 0.12s ease-out, left 0s;
}
.range-slider > input + output::after {
content: var(--prefix, "") var(--text-value-b) var(--suffix, "");
font: var(--value-font);
}

.range {
height: 6rem;
display: flex;
place-content: space-evenly;
place-items: center;
gap: 10%;
padding: 0;
margin-bottom: -1rem;
}

.titulo_tabla {
color: white;
background-color: #003366;
}

.btn_comparar {
color: white;
width: fit-content;
height: fit-content;
border-radius: calc(0.5vh + 0.5vw);
background-color: #013366;
border: 1px solid var(--color-mid-grey);
font-size: calc(0.7vw + 0.7vh);
font-weight: 100;
margin-top: 1vh;
text-align: center;
padding: 1vh 2vw;
}
.timeline-steps {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.timeline-steps .timeline-step {
  align-items: center;
  display: flex;
  flex-direction: column;
  position: relative;
  margin: 1rem;
}

@media (min-width:768px) {
  .timeline-steps .timeline-step:not(:last-child):after {
      content: "";
      display: block;
      border-top: .25rem dotted #013366;
      width: 3.46rem;
      position: absolute;
      left: 7.5rem;
      top: .3125rem;
  }
  .timeline-steps .timeline-step:not(:first-child):before {
      content: "";
      display: block;
      border-top: .25rem dotted #013366;
      width: 3.8125rem;
      position: absolute;
      right: 7.5rem;
      top: .3125rem;
  }
}

.timeline-steps .timeline-content {
  width: 10rem;
  text-align: center;
}

.timeline-steps .timeline-content .inner-circle {
  border-radius: 1.5rem;
  height: 2rem;
  width: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #013366;
  transition: transform 0.3s, box-shadow 0.3s;
  cursor: pointer; /* Change mouse icon to pointer */
}

.timeline-steps .timeline-content .inner-circle:hover {
  transform: scale(1.1); /* Expand on hover */
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* Add a shadow for better visual effect */
}

.timeline-steps .timeline-content .inner-circle:before {
  content: "";
  background-color: #013366;
  display: inline-block;
  height: 3rem;
  width: 3rem;
  min-width: 3rem;
  border-radius: 6.25rem;
  opacity: .5;
}

.p_postventa {
position: absolute;
color: white;
bottom: 1.5rem !important;
font-weight: 400;
}

@media screen and (max-width: 500px) {
.range {
  padding-top: 2em;
  gap: 8%;
}
}

.range > .range-slider,
label[dir=rtl] .range-slider {
width: 100%;
}

/*************************************************************************************/

/**********************************************************************************/
/* Estilos para pantallas grandes (mayores a 992px) */

@media (max-width: 317px){
.selecction {
  margin-top: -29px;
  margin-bottom: -4px;
}

.navbar a {
  font-size: 0.6rem;
  z-index: 20;
}

.h1, h2 {
  font-size: 1rem;
}

.container {
  padding-right: 11px;
  padding-left: 11px;
}
.navbar-light .navbar-nav .nav-link {
  margin-right: 9px;
}

.topnav {
  height: auto;
}

.topnav a {
  font-size: 0.4em;
}

.navbar > .container {
  padding: 0;
}

.logo_img {
  height: 38px;
  padding-top: 1px;
}

.control-smart{
  display: block;
  margin-bottom: 2px;
  color: var(--color-base);
  font-size: 1rem;
  margin-top: 2px;
}

.button_menu {
  width: 27px;
  height: 14px;
}

.navbar {
  padding: 0.5rem 0.4rem;
}

.navbar-brand {
  margin-right: 0rem;
}

#principal_bar {
  height: 54px;
}

.c-item {
  height: calc(100vh - 84px);
}
}
@media (min-width: 317px) and (max-width: 385px){
.selecction {
  margin-top: -24px;
  margin-bottom: 9px;
}

.navbar a {
  font-size: 0.7rem;
}

.h1, h2 {
  font-size: 1.2rem;
}

.container {
  padding-right: 11px;
  padding-left: 11px;
}
.topnav {
  height: auto;
}

.topnav a {
  font-size: 0.5em;
}

.navbar > .container {
  padding: 0;
}

.logo_img {
  height: 42px;
  margin-top: -2px;
}

.control-smart{
  display: block;
  margin-bottom: 2px;
  color: var(--color-base);
  font-size: 1rem;
  margin-top: 2px;
}

.button_menu {
  width: 27px;
  height: 14px;
}

.navbar-brand {
  margin-right: 0rem;
}

#principal_bar {
  height: 54px;
}

.c-item {
  height: calc(47vh - 84px);
}

}
@media (min-width: 385px) and (max-width: 435px){

.custom-col-20 {
  display: flex;
  flex-direction: column;
}
.selecction {
  margin-top: -24px;
  margin-bottom: 9px;
}

.navbar a {
  font-size: 0.8rem;
}

.h2, h2 {
  font-size: 1.3rem;
}

.container {
  padding-right: calc(1vh + 1vw);
  padding-left: calc(1vh + 1vw);
}

.navbar > .container {
  padding: 0;
}

.logo_img {
  height: 50px;
  margin-top: -2px;
}

.control-smart{
  display: block;
  margin-bottom: 2px;
  color: var(--color-base);
  font-size: 1rem;
  margin-top: 2px;
}

.button_menu {
  width: 27px;
  height: 14px;
}

.navbar-brand {
  margin-right: 0rem;
}

#principal_bar {
  height: 63px;
}

.c-item {
  height: calc(47vh - 94px);
}

}

@media (min-width: 435px) and (max-width: 474px){

.custom-col-20 {
  display: flex;
  flex-direction: column;
}
.selecction {
  margin-top: -24px;
  margin-bottom: 9px;
}

.navbar a {
  font-size: 0.9rem;
}

.h2, h2 {
  font-size: 1.4rem;
}

.container {
  padding-right: calc(1vh + 1vw);
  padding-left: calc(1vh + 1vw);
}

.logo_img {
  height: 50px;
  margin-top: -2px;
}

.control-smart{
  display: block;
  margin-bottom: 2px;
  color: var(--color-base);
  font-size: 1rem;
  margin-top: 2px;
}

.button_menu {
  width: 27px;
  height: 14px;
}

.navbar-brand {
  margin-right: 0rem;
}

#principal_bar {
  height: 63px;
}

.c-item {
  height: calc(47vh - 94px);
}

}

@media (min-width: 474px) and (max-width: 575px){

.custom-col-20 {
  display: flex;
  flex-direction: column;
}

.selecction {
  margin-top: -24px;
  margin-bottom: 9px;
}

.navbar a {
  font-size: 0.9rem;
}

.h2, h2 {
  font-size: 1.4rem;
}

.container {
  padding-right: calc(1vh + 1vw);
  padding-left: calc(1vh + 1vw);
}

.logo_img {
  height: 50px;
  margin-top: -2px;
}
.navbar_span {
  font-size: 1.0rem;
}

.control-smart{
  display: block;
  margin-bottom: 2px;
  color: var(--color-base);
  font-size: 1.3rem;
  margin-top: 2px;
}

.button_menu {
  width: 27px;
  height: 14px;
}

#principal_bar {
  height: 63px;
}

.c-item {
  height: calc(47vh - 94px);
}

}

@media (min-width: 576px) and (max-width: 621px){
.estilo_contenedor p {
  font-size: 0.7rem;
}

.select-estilos select {
  font-size: 1rem;
}

hr {
  margin-top: 0rem;
  margin-bottom: 0rem;
}
p {
  margin-bottom: 0rem;
}

.selecction {
  margin-top: -24px;
  margin-bottom: 9px;
}

.navbar a {
  font-size: 0.9rem;
}

.h2, h2 {
  font-size: 1.4rem;
}

.container {
  padding-right: calc(1vh + 1vw);
  padding-left: calc(1vh + 1vw);
}

.logo_img {
  height: 59px;
  margin-top: -4px;
}

#principal_bar {
  height: 70px;
}

.c-item {
  height: calc(47vh - 101px);
}

.control-smart{
  display: block;
  margin-bottom: 2px;
  color: var(--color-base);
  font-size: 1.4rem;
  margin-top: 2px;
}
}

@media (min-width: 621px) and (max-width: 767px){
.col-sm-3 {
  margin-bottom: 0px;
}
hr {
  margin-top: 0rem;
  margin-bottom: 0rem;
}
p {
  margin-bottom: 0rem;
}
.custom-col-20{
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
  /* margin-top: calc(1vh + 1vw); */
}
.card-estilos.active, .card-estilos:hover, .card-estilos:focus {
  height: 17rem;
}

.img-fluid {
  top: -23px;
  max-width: 82%;
  height: auto;
}

.selecction {
  margin-top: -24px;
  margin-bottom: 9px;
}

.navbar a {
  font-size: 0.9rem;
}

.h2, h2 {
  font-size: 1.4rem;
}

.container {
  padding-right: calc(1vh + 1vw);
  padding-left: calc(1vh + 1vw);
}
.logo_img {
  height: 59px;
  margin-top: 1px;
}
.control-smart{
  display: block;
  margin-bottom: 2px;
  color: var(--color-base);
  font-size: 1.4rem;
  margin-top: 2px;
}
}

/* Estilos para dispositivos móviles (menores a 768px) */
@media (max-width: 767px) {

.card-estilos.active, .card-estilos:hover, .card-estilos:focus {
  height: 17rem;
}
.container{
  max-width: 100% !important;
}
.navbar-brand span{
  display: none;
}
.help_lat{
  display: none;
}

.navbar-light .navbar-nav .nav-link{
    margin-right: 14px;
}
.carousel-indicators {
  bottom: 0px;
  left: 0px;
  margin-left: calc(0.8vh + 0.8vw);
}
.carousel-indicators li {
  width: 8px;
  height: 8px;
}
.top-var-element{
    margin-right: 19px;
}

#navbarNav .navbar-nav{
  flex-direction: row;
}

/* .logo_img {
  height: 59px;
  margin-top: -4px;
} */
.chatbot-btn{
  padding: 2px;
  font-size: 0.5rem;
  width: 50px;
  height: 50px;
  position: fixed;
  bottom: calc(0.8vh + 0.8vw); /* Ajusta según sea necesario */
  right: calc(0.8vh + 0.8vw); /* Ajusta según sea necesario */
  z-index: 999;
}

.chatbot-btn span {
  display: none;
}

.slider_contenedor .col-sm-auto{
  width: 14%;
  margin-bottom: 10px;
}
.modelos_contenedor .col-sm-auto{
  width: 20%;
  margin-bottom: 10px;
}
.carousel-marca img{
  max-height: 100%;
  max-width: 100%;
}
.custom-col-20 {
  display: none;
}
.custom-col-20.has-active-child {
  display: flex;
}
.btn-light {
  font-size: 0.6rem;
  transition: 0.7s;
}
.custom-col-20{
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
  /* margin-top: calc(1vh + 1vw); */
}
.contenedor_index_vehiculo {
  height: 410px;
}
.footer-vehiculo .col-botones{
  width: auto;
  max-width: none;
  flex: 0 0 auto;
}
.container-body {
  margin-top: calc(2vh + 2vw);
  margin-bottom: calc(2vh + 2vw);
}
.frame_lat {
  top: 0px;
  right: -55px;
  transform: translateX(-50%);
  width: 76px;
  height: auto;
  background-color: #FFF;
  padding: 4px;
  color: #013366;
  margin-right: 14px;
}
.frame_lat .btn-round{
  padding: 4px;
  width: 27px;
  height: 25px;
}
.frame_lat div {
  margin-top: 4px;
}
.frame_lat p {
  margin-top: 5px;
  font-size: 0.4rem;
  font-weight: 100;
}

.nav-estilos{
  display: none;
}
.estilo_contenedor,.estilo_contenedor:before{
  border-radius: 5px;
}
h2{
  margin-top: calc(0.8vh + 0.8vw);
  margin-bottom: calc(0.8vh + 0.8vw);
}
.nav-menu-modal {
  text-align: left;
  margin-left: calc(1vh + 1vw);
}
.bar_icon{
  width: 24px;
  height: calc(0.8vh + 0.8vw);
  margin-top: 0px;
  margin-left: 18px;
}
.testdrive-btn{
  display: none;
}
.index_modelo{
  font-size: 1.8em;
  top: 50px;
}
.index_marca {
  top: 18px;
  z-index: 1;
  font-size: 1.4em;
}
.modelo-item a span{
  font-size: 1rem;
}
.btn-agenda{
  padding: 4px 8px 3px 7px !important;
}
.btn-cotiza{
    padding: 4px 13px 13px 7px !important;
}

#bigcarousel .carousel-indicators {
  margin-top: -37px;
  width: 94%;
  height: 4rem;
}
#bigcarousel .carousel-indicators li{
  background-color: transparent;
}
#bigcarousel .carousel-indicators li img {
  height: 2.4rem;
  max-width: 4.6rem;
  border: 1px solid #efefef;
  border-radius: 5px;
}
.btn-middle{
  max-width: 100% !important;
  width: 100%;
}

}

/* Estilos para tabletas y dispositivos medianos (entre 768px y 991px) */
@media (min-width: 768px) and (max-width: 991px) {
hr {
  margin-top: 0rem;
  margin-bottom: 0rem;
}

p {
  margin-bottom: 0rem;
}

.navbar a {
  font-size: 0.9rem;
}

.h2, h2 {
  font-size: 1.4rem;
}

.container {
  max-width: 100% !important;
  padding-right: calc(1vh + 1vw);
  padding-left: calc(1vh + 1vw);
}

.carousel-marca img{
  max-height: 3rem;
  max-width: 3rem;
}
.slider_contenedor .col-sm-auto{
  width: 20%;
  margin-bottom: 10px;
}
.modelos_contenedor .col-sm-auto{
  width: 20%;
  min-width: 70px;
  font-size: 0.6rem;
  margin-bottom: 10px;
}
.custom-col-20{
  display: none;
}
.custom-col-20.has-active-child {
  display: flex;
}
.btn-light {
  /* font-size: 0.8rem; */
  transition: 0.7s;
}
.custom-col-20{
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
  /* margin-top: calc(1vh + 1vw); */
}
.card-estilos.active, .card-estilos:hover, .card-estilos:focus {
  height: 17rem;
}
.contenedor_index_vehiculo {
  height: 540px;
}
#navbarNav .navbar-nav{
  flex-direction: row;
}
}

@media (min-width: 992px) {
.card-estilos.active, .card-estilos:hover, .card-estilos:focus {
  height: 17rem;
}

.nav-menu-modal {
font-size: 0.9rem;
}

p {
  margin-bottom: 0rem;
}

.container {
  max-width: 100%;
}
.col-fluid{
  padding-left: 8px;
}
.select-estilos{
  display: none;
}
}

@media (max-width: 1470px) {
.card-image {
  margin-top: 2rem;
  max-height: 76% !important;
}
}