/* ==========================================================================
   1. FUENTES Y BASES GENERALES (Tus fuentes originales)
   ========================================================================== */
@font-face {
  font-family: Din;
  src: url('fonts/din-next-lt-pro-regular.woff2') format('woff2'),
       url('din-next-lt-pro-regular.woff') format('woff');
}
@font-face{
  font-family: DinCondensed;
  src: url('fonts/din-next-lt-pro-condensed.woff2') format('woff2');
  src: url('fonts/din-next-lt-pro-condensed.woff') format('woff');
}
@font-face{
  font-family: DinBold;
  src: url('fonts/din-next-lt-pro-bold.woff2') format('woff2');
  src: url('fonts/din-next-lt-pro-bold.woff') format('woff');
}
@font-face{
  font-family: Montserrat;
  src: url('fonts/Montserrat-Regular.ttf') format('ttf');
}

body {
  font-family: "Din", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}
b{ font-family: 'DinBold', sans-serif; }
p{ line-height: normal; }
.dropdown-item.active, .dropdown-item:active{ background-color: transparent; }
img{ max-width:100% }
.btn{ border-radius: 25px; }
li{ list-style: none; }
.navbar-toggler.collapsed { border: 0; }
.container-md { max-width: unset; }
.navbar-toggler:focus {text-decoration: none; outline: 0; box-shadow: none;}
.border-bottom{ border-bottom: 1px solid #000!important; }
.border-start { border-color: #000 !important; }

/* ==========================================================================
   2. ESTILOS ORIGINALES DEL INDEX (Sin alteraciones)
   ========================================================================== */
.col-md-6.izq{ padding-right: 4%; }
.col-md-6.der{ padding-left: 4%; }
.w-100.position-relative.d-flex.flex-column.justify-content-end.align-items-center.mb-2 {border-top: 8px solid;}
.border-end {border-right: 1px solid #000 !important;}
#first::after {
    content: ""; background-color: #000; position: absolute;
    top: 0; left: 0; width: 100%; height: 100%; opacity: 0.4; z-index: 1;
}
.txtunder {
  width: 90%; margin-right: auto; margin-left: auto; padding-top: 20px;
}
.txtunder h2 {
  border-bottom: 1px solid; width: fit-content; margin-left: auto; margin-right: auto; padding-bottom: 10px;
}
.dropdown-item.py-2{ border-bottom: 1px solid #fff; }
/* Tipografías calc() del Index */
.car-title { font-size: calc(1.3rem + 1.2vw); }
.car-subtitle { font-size: calc(1.1rem + 0.4vw); }
.car-description { font-size: calc(0.9rem + 0.2vw); font-weight: 400; color: #555; }
.car-btn { font-size: calc(0.7rem + 0.2vw); }

/* Formulario BAIC */
#baic-form-section {
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), 
              url('images/background-baic.jpg') center center / cover no-repeat;
  min-height: auto;
}
.form-box {
  background-color: rgba(0, 0, 0, 0.4); border-radius: 12px; backdrop-filter: blur(5px);
}
.form-section-title { font-size: calc(1.3rem + 1vw); line-height: 1.3; }
.form-logo { width: 40%; max-width: 180px; min-width: 110px; }
.submit-btn { font-size: calc(0.8rem + 0.2vw); border-radius: 8px; }
form { font-family: 'Montserrat', sans-serif; }
.form-control-plaintext {
  border: 1px solid #999; border-radius: 6px; background-color: rgba(255, 255, 255, 0.05);
}
.bkop { background-color: rgba(0, 0, 0, 0.7); padding: 12px 15px; border-radius: 6px; }
.form-check-input { background-color: #000; border-radius: 4px !important; border: 1px solid #555; }

/* Ficha del Index */
#ficha .col:not(:first-child) { font-family: montserrat, sans-serif; text-align:center; height: fit-content; border-right: 1px solid #000; }
#ficha .col p{ margin-bottom:0; text-align:center; }
.space-50{ margin-bottom:50px; height:5vh; }
#ficha .col.br-1{ border-right:1px solid #000; height:fit-content;}
.mb-0{ margin-bottom: 0 }

/* Galería */
.car-gallery-img { max-height: 220px; object-fit: contain; width: auto; margin: 0 auto; }
.gallery-title { font-size: calc(1.1rem + 0.4vw); letter-spacing: 0.5px; color: #111; }
.gallery-btn { font-size: calc(0.7rem + 0.2vw) !important; letter-spacing: 1px; }

/* Test Drive */
#test-drive-section {
  background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)), 
              url('images/background-testdrive.jpg') center center / cover no-repeat;
  position: relative; overflow: hidden;
}
.test-drive-box {
  background-color: rgba(0, 0, 0, 0.5); border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(8px);
}
.custom-svg-icon {
  width: calc(1.2rem + 1vw); max-width: 32px; min-width: 20px; height: auto; display: block;
}
.section-main-title { font-size: calc(1.4rem + 1.2vw); line-height: 1.2; }
.info-paragraph { font-size: calc(0.95rem + 0.2vw); line-height: 1.7; opacity: 0.95; }
.send-btn {
  background-color: #f1fdff; color: #000; border: none; font-size: calc(0.8rem + 0.2vw); border-radius: 8px; transition: background-color 0.2s;
}
#test-drive-section .form-control-plaintext {
  border: 1px solid #777; border-radius: 6px; background-color: rgba(255, 255, 255, 0.04);
}
#end h1{ font-family:Montserrat, sans-serif; }

/* Concesionario e Institucional */
.titulo-concesionario { font-family: 'DIN', sans-serif; font-weight: 400; letter-spacing: 1px; font-size: calc(1.3rem + 0.6vw); }
.img-logo-brand { height: 32px; object-fit: contain; transition: height 0.2s ease; }
.fit-content{ width: fit-content; margin-left: auto; margin-right: auto; }
.titulo-marca { font-family: 'DinCondensed', sans-serif; font-size: calc(1.8rem + 1.8vw); letter-spacing: 0.05vw; }
.subtitulo-eslogan { font-size: calc(0.9rem + 0.4vw); letter-spacing: 0.43vw; white-space: nowrap; }
.subtitulo-eslogan2 { font-size: calc(0.9rem + 0.4vw); letter-spacing: 0.37vw; white-space: nowrap; }
.text-parrafo { font-family: 'DIN', sans-serif; font-weight: 400; font-size: calc(1rem + 0.2vw); text-wrap: pretty; }
.titulo-postventa-1{ font-size: calc(1.4rem + 0.8vw); line-height: 1.2; }
.titulo-postventa-2{ font-size: calc(1.1rem + 0.3vw); line-height: 1.1; }
.beneficio { font-size: calc(0.95rem + 0.2vw); line-height: 1.2; }
.datos{ font-size: calc(1.2rem + 0.15vw); margin-bottom: 0; }

/* ==========================================================================
   3. NUEVAS CLASES UNIFICADAS PARA SECCIÓN X35 (Tipografía Responsiva)
   ========================================================================== */
.bl-1 { 
  border-left: 1px solid #000; padding-left: 20px; height: fit-content; margin-bottom: 20px; 
}
.small-responsive {
  font-size: calc(0.8rem + 0.3vw);
}
.body-responsive {
  font-size: calc(0.95rem + 0.2vw);
}
/* Tipografía fluida para los títulos de sección del modelo (Diseño / Interior) */
.titulo-seccion-modelo {
  font-size: calc(2.4rem + 1.5vw); /* Escala suave y proporcional en todas las pantallas */
  line-height: 1;
  letter-spacing: 0.5px;
}

/* ==========================================================================
   4. TUS MEDIA QUERIES ORIGINALES (Optimizados sin romper selectores)
   ========================================================================== */
@media (min-width: 1400px) {
    .titulo-concesionario { font-size: 2.5rem; letter-spacing: 2px; }
    .img-logo-brand { height: 48px; }
    .text-parrafo { font-size: 1.25rem; }
}

@media (min-width: 768px) { 
  .w-md-100{ width: 100%; }
  .d-block.w-100.overflow-x-auto.pb-2{overflow-x: hidden!important;}
  #test-drive-section { min-height: 80vh; display: flex; align-items: center; background: #000; }
  #asesoramiento .col-md-5{ padding-right: 4%; }
  #asesoramiento .col-md-7{ padding-left: 4%; }
  #test-drive-section::before {
    content: ""; position: absolute; top: 0; right: 0; width: 50%; height: 100%;
    background: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.2) 100%), 
                url('images/background-testdrive.jpg') center center / cover no-repeat;
    z-index: 1;
  }
  .border-start-md { border-left: 2px solid #e0e0e0; }
  #baic-form-section { min-height: 85vh; display: flex; align-items: center; }
  .border{ border-bottom:12px solid #000!important; }
}

@media (min-width: 992px) {
  .container-md { padding-right: 8%; padding-left: 8%; }
  .gallery-section { padding-left: 5%; padding-right: 5%; }
  .navbar-expand-lg .navbar-nav { justify-content: center; width: 100%; }
  .navbar-nav li { padding-right: 10%; }
  .txtunder { width: 60%; }
  .display-1-md { font-size: 5rem; }
}

@media (max-width: 767.98px){
  .nav-index #navbarNav{ background-color: #000000 !important; padding-left: 15px !important; padding-right: 15px !important; }
  .nav-index button { color: #fff; background-color: #000; }
  #ficha { padding: 0 10px; align-items:start!important; }
  #ficha .col { margin-bottom: 30px; }
  svg-icon.rs { width: 40px !important; height: 40px !important; top: -5px !important; }
  #ficha .col p { font-size: .8em; }
  #principal .col-md-3 { z-index: 500; text-align: center; position: absolute; }
  #principal .col-md-9 { z-index: 0; }
  #principal .d-flex.flex-column.mt-5 { margin-top: 0 !important; }
  .flex-grow-1.d-flex.flex-column.align-items-center.bg-responsive-banner, 
  .flex-grow-1.d-flex.flex-column.justify-content-end.align-items-center.mb-2 {
    min-height: 45vh !important; background-position: center bottom !important;
  }
  #disenio, #interior { padding: 0 10px; }
  #end h1 { font-size: unset; }
  .hero-kaola-container {
    height: 55vh !important;
    overflow: hidden;
  }
  .img-hero-kaola {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
    /* Mueve el foco horizontal al 75% (derecha). Si el auto está a la izquierda usa 25% */
    object-position: 60% center !important; 
  }
  .content-hero-kaola {
    top: 35px;
    left: 0;
    right: 0;
  }
  .display-3 { font-size: 2.5rem !important; }
  .h5 { font-size: 1.15rem !important; }
  .fs-7 { font-size: 0.85rem !important; }
  .py-1.5 { padding-top: 0.4rem !important; padding-bottom: 0.4rem !important; }
}
@media (max-width: 599.99px){
  .ficha1{ width: 10% }
  .fichas{ width: 22.5%; font-size: .8em; }
  #interior span { width: 100%; display: block; }
}