:root{--primary:#0759e6;--primary-dark:#063487;--navy:#071b44;--cyan:#1bc5ff;--green:#16b85a;--text:#10203d;--muted:#68748a;--bg:#f5f8fd;--white:#fff;--radius:20px;--shadow:0 18px 50px rgba(23,52,105,.14)}
:root {
  --container-width: 1440px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;
 scroll-padding-top: 90px;
}
body{margin:0;font-family:Inter,sans-serif;color:var(--text);background:var(--bg)}button,input,select{font:inherit}button{cursor:pointer}
.container {
  width: min(var(--container-width), calc(100% - 48px));
  margin-inline: auto;
}
.header{height:74px;background:#fff;display:flex;align-items:center;  padding-inline: max(
    24px,
    calc((100% - var(--container-width)) / 2)
  );gap:28px;position:sticky;top:0;z-index:20;box-shadow:0 4px 20px rgba(6,31,81,.07)}
.brand {
  width: auto;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.brand img {
  display: block;
  width: 185px;
  height: auto;
  object-fit: contain;
}
.brand span span{color:var(--primary)}.brand-icon{font-size:26px}
.nav{display:flex;gap:26px;margin-left:auto}
.nav a{text-decoration:none;color:var(--text);font-size:14px;font-weight:600;
position: relative;}
.nav-pr{
  color: #0346bd !important
  ;
  font-weight: 700 !important;
}
.nav a::before{
  position: absolute;
  content: "";
  left: 0;
  bottom: -3px;
  width: 0%;
  height: 3px;
  background: #0346bd;
  transition: width 0.3s ease;
}
.nav a:hover::before{
width: 100%;

}
.nav a:hover{
  color: #0346bd;
}
.btn{border:0;border-radius:12px;padding:14px 20px;font-weight:700}
.btn-primary{background:linear-gradient(135deg,var(--primary),#0346bd);color:white;box-shadow:0 10px 24px rgba(7,89,230,.24)}.btn-light{background:white;color:var(--primary)}.btn-whatsapp{width:100%;background:linear-gradient(135deg,#19c45d,#0b9b47);color:white}.menu-toggle{display:none;background:none;border:0;font-size:24px}
 .hero h1 span{color:#2f8cff}.hero p{font-size:20px;color:#e3ebfa}
.search-panel{width: 100%;  margin-top:42px;background:white;border-radius:22px; padding: 18px 22px 22px;box-shadow:var(--shadow)}.tabs{display:flex;gap:8px;margin-bottom:16px}
.tab{border:0;background:#eef4ff;color:#34415d;border-radius:10px;padding:10px 18px;font-weight:700}.tab.active{background:var(--primary);color:white}
.search-panel {
  width: 100%;
  margin-top: 42px;
  padding: 18px 22px 22px;
  border-radius: 22px;
}

.search-grid {
  display: grid;
  grid-template-columns:
    minmax(160px, 1fr)
    minmax(160px, 1fr)
    minmax(160px, 1fr)
    minmax(160px, 1fr)
    minmax(175px, auto);
  gap: 14px;
  align-items: end;
}.search-grid label,

.report-card label{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:700;color:#526079}.search-grid select,.report-card input,.publish-form input,.publish-form select{border:1px solid #dbe4f2;border-radius:10px;padding:13px;background:white;outline:none}
  

.trust-strip span{
    font-size:14px;
    color:#6b7280;
} .section{padding:38px 0}.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:28px}.section-heading h2,.report-section h2{font-size:36px;margin:8px 0 0}.text-button{border:0;background:none;color:var(--primary);font-weight:700}
  .vehicle-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}.vehicle-card{background:white;border-radius:18px;overflow:hidden;box-shadow:0 12px 32px rgba(20,49,101,.1);transition:.25s}.vehicle-card:hover{transform:translateY(-5px)}
.vehicle-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}.vehicle-body{padding:18px}.badge{display:inline-flex;background:#e9f2ff;color:var(--primary);padding:6px 9px;border-radius:999px;font-size:11px;font-weight:800}.vehicle-body h3{margin:12px 0 6px}.vehicle-meta{font-size:13px;color:var(--muted)}.vehicle-price{font-size:22px;font-weight:800;margin-top:14px}
.vehicle-actions{display:flex;gap:10px;margin-top:16px}
.vehicle-actions button{flex:1;padding:11px;border-radius:10px;border:1px solid #d9e3f2;background:white;font-weight:700}.vehicle-actions button:first-child{background:var(--primary);color:white;border-color:var(--primary)}.empty-state{text-align:center;background:white;padding:40px;border-radius:16px}.hidden{display:none!important}
.category-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.category-grid button{border:0;background:white;border-radius:18px;padding:0px 10px 18px;box-shadow:0 10px 26px rgba(20,49,101,.08);display:flex;flex-direction:column;gap:8px;font-size:30px}
.category-grid b{font-size:17px}.category-grid span{font-size:12px;color:var(--muted)}
.vehicle-actions button:first-child{
  border:1px solid #0759e6;
  background:#0759e6;
  color:#fff;
  transition: all 0.3s ease;
}

.vehicle-actions button:first-child:hover{
  background:#0346bd;
}

.vehicle-actions button:last-child{
  border:1px solid #d8e1ef;
  background:#fff;
  color:#17233c;
    transition: all 0.3s ease;
}

.vehicle-actions button:last-child:hover{
  background:#f4f7fc;
}
.report-lead{color:#dfe9ff;font-size:18px}.report-items{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px}.report-items article{display:flex;gap:14px;background:rgba(255,255,255,.1);padding:16px;border:1px solid rgba(255,255,255,.14);border-radius:16px}.report-items article span{font-size:25px}.report-items b{font-size:14px}.report-items p{font-size:12px;color:#dce8ff;margin:5px 0}

  .report-card img {
     max-width: 280px;
     margin: auto;
     display: flex;
  }
.phone-top{width:80px;height:20px;background:#09152e;border-radius:0 0 16px 16px;margin:-26px auto 18px}.phone-preview span{font-size:12px;font-weight:800;color:var(--primary)}.phone-preview strong{display:block;font-size:30px;margin:20px 0}.phone-preview ul{list-style:none;text-align:left;padding:0;font-size:12px;line-height:2}.form-message{font-size:13px;min-height:18px}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.steps article{background:white;padding:26px;border-radius:18px;box-shadow:0 10px 26px rgba(20,49,101,.08)}.steps span{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#e9f2ff;color:var(--primary);font-weight:800}.steps p{font-size:13px;color:var(--muted)}.cta{background:linear-gradient(135deg,#0346bd,#0a75ff);color:white;border-radius:22px;padding:34px 42px;margin-bottom:80px;display:flex;justify-content:space-between;align-items:center}footer{background:#061633;color:#d4def2;padding:54px 0 20px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}.footer-grid>div{display:flex;flex-direction:column;gap:10px}.footer-grid a{color:#d4def2;text-decoration:none}.footer-brand{color:white}.copyright{text-align:center;font-size:12px;color:#8593ad;margin-top:40px}.modal{position:fixed;inset:0;background:rgba(1,13,38,.7);display:grid;place-items:center;padding:20px;z-index:50}.modal-card{width:min(680px,100%);background:white;border-radius:22px;padding:30px;position:relative}.modal-close{position:absolute;right:18px;top:12px;border:0;background:none;font-size:30px}.publish-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}.full{grid-column:1/-1}@media(max-width:900px){.header{padding:0 18px}.nav{position:absolute;left:0;right:0;top:74px;background:white;padding:18px;display:none;flex-direction:column}.nav.open{display:flex}.menu-toggle{display:block;margin-left:auto}
 .header>.btn{display:none}.hero h1{font-size:46px}.search-grid{grid-template-columns:1fr 1fr}.search-grid .btn{grid-column:1/-1}.vehicle-grid{grid-template-columns:repeat(2,1fr)}
 .report-grid{grid-template-columns:1fr}.steps{grid-template-columns:1fr 1fr}}@media(max-width:600px){.container{width:min(100% - 22px,1180px)}.hero{min-height:760px}.hero-content{padding-top:60px}.hero h1{font-size:39px}.hero p{font-size:16px}.search-panel{margin-top:32px}.tabs{overflow:auto}.search-grid{grid-template-columns:1fr}.section{padding:56px 0}.section-heading h2,.report-section h2{font-size:29px}.vehicle-grid,.category-grid,.steps,.report-items{grid-template-columns:1fr}.vehicle-card img{height:200px}.cta{flex-direction:column;align-items:flex-start;gap:20px;margin-bottom:50px}.footer-grid{grid-template-columns:1fr}.publish-form{grid-template-columns:1fr}.full{grid-column:auto}.phone-preview{width:210px}
 .report-section{padding:62px 0}}
@media (max-width: 1200px) {
  .vehicle-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 800px) {
  .vehicle-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .vehicle-grid {
    grid-template-columns: 1fr;
  }
}
.benefits{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:60px;
    flex-wrap:wrap;
}

.item{
    display:flex;
    align-items:center;
    gap:15px;
}

.icon{
    width:55px;
    height:55px;
    border-radius:50%;
    background:#eef5ff;
    display:flex;
    justify-content:center;
    align-items:center;
}

.icon i{
    font-size:24px;
    color:#2563eb;
}

.text h4{
    font-size:16px;
    font-weight:700;
    color:#1f2937;
    margin-bottom:4px;
}

.text p{
    font-size:14px;
    color:#6b7280;
}
  


 
 

 
 

.input-placa{
    width:100%;
    height:52px;

    margin:0;

    padding:0 18px;

    border:none;
    border-radius:10px;

    background:#fff;
    color:#333;

    font-size:16px;

    outline:none;

    box-shadow:0 4px 12px rgba(0,0,0,.15);
}

.input-placa:focus{
    box-shadow:
        0 0 0 4px rgba(7,89,230,.16),
        0 4px 12px rgba(0,0,0,.15);
}

.input-placa::placeholder{
    color:#8a8a8a;
}

.btn-whatsapp{
    width:100%;
    min-height:52px;

    border:none;
    border-radius:8px;

    background:#16c85a;
    color:#fff;

    font-size:16px;
    font-weight:700;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    cursor:pointer;

    transition:.3s;

    box-shadow:0 4px 10px rgba(0,0,0,.18);
}

.btn-whatsapp:hover{
    background:#12b54f;
    transform:translateY(-2px);
}

#reportMessage{
    min-height:16px;
    margin:0;

    color:#fff;
    text-align:center;
    font-size:13px;
}
@media (max-width: 1000px){

    .report1-form{
        right:4%;
        bottom:5%;

        width:350px;
        max-width:38%;
    }

    .input-placa,
    .btn-whatsapp{
        min-height:48px;
        font-size:14px;
    }

}
@media (max-width: 700px){

    .info-content{
        display:flex;
        flex-direction:column;
    }

    .info-content img{
        width:100%;
        min-height:360px;

        object-fit:cover;
        object-position:68% center;
    }

    .report1-form{
        position:static;

        width:100%;
        max-width:none;

        padding:16px;

        background:#061d4d;
    }

    .input-placa{
        height:50px;
    }

    .btn-whatsapp{
        min-height:52px;
    }

}
@media (max-width: 430px){

    .info-content img{
        min-height:320px;
        object-position:70% center;
    }

    .report1-form{
        padding:14px 12px 18px;
    }

    .input-placa{
        font-size:14px;
        padding:0 14px;
    }

    .btn-whatsapp{
        font-size:14px;
    }

}

 
.Infovehi {
  width: 100%;
  
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  background: #061d4d;
  border-radius: 18px;
}

.Infovehi a{
  display: block; /* importante */
  transition: transform 0.3s ease;
}

.Infovehi img{
  width: 100%;
 
  object-fit: 100% auto;
  display: block;
}

.Infovehi a:hover{
  transform: translateY(-8px);
} 

.info-content {
    position: relative;
    width: 100%;
}

.banner-picture {
    display: block;
    width: 100%;
}

.banner-info {
    display: block;
    width: 100%;
    height: auto;
}

/* Formulario en escritorio */
.report1-form {
    position: absolute;
    right: 5%;
    bottom: 6%;

    width: 390px;
    max-width: 32%;

    display: flex;
    flex-direction: column;
    gap: 10px;

    z-index: 5;
}

.input-placa {
    width: 100%;
    height: 52px;
    margin: 0;
    padding: 0 18px;

    border: 1px solid #dbe4ef;
    border-radius: 10px;

    background: #fff;
    color: #333;

    font-size: 16px;
    outline: none;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.input-placa:focus {
    border-color: #0759e6;
    box-shadow:
        0 0 0 4px rgba(7, 89, 230, 0.16),
        0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-whatsapp {
    width: 100%;
    min-height: 52px;

    border: 0;
    border-radius: 8px;

    background: #16c85a;
    color: #fff;

    font-size: 16px;
    font-weight: 700;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    cursor: pointer;
    transition: 0.25s;
}

.btn-whatsapp:hover {
    background: #12b54f;
    transform: translateY(-2px);
}

#reportMessage {
    min-height: 16px;
    margin: 0;
    color: #fff;
    text-align: center;
    font-size: 13px;
}
@media (max-width: 700px) {

    .info-content {
        display: flex;
        flex-direction: column;
    }

    /*
    Importante:
    sin min-height,
    sin object-fit: cover,
    sin content: url()
    */
    .info-content .banner-info {
        width: 100%;
        height: auto;
        min-height: 0;
        object-fit: initial;
        object-position: initial;
    }

    .report1-form {
        position: static;

        width: 100%;
        max-width: none;

        padding: 14px 12px 20px;

        background: #061d4d;
    }

    .input-placa {
        height: 50px;
        font-size: 14px;
    }

    .btn-whatsapp {
        min-height: 52px;
        font-size: 14px;
    }
}
.dest{
    color: #0346bd;
}
/* ==================================================
   HERO RESPONSIVE AUTOMARKET
================================================== */

@media (max-width:700px){

  .hero{
    position:relative;
    min-height:auto;

    background-image:
      linear-gradient(
        to bottom,
        rgba(5,25,65,.18) 0%,
        rgba(5,25,65,.28) 45%,
        rgba(5,25,65,.55) 100%
      ),
      url("img/fondo-responsive.png");

    background-repeat:no-repeat;
    background-size:cover;
    background-position:center bottom;
  }

  .hero-content{
    width:calc(100% - 24px);
    padding-top:54px;
    padding-bottom:28px;
  }

  .hero-copy{
    width:100%;
    max-width:none;
  }

  .hero .eyebrow{
    font-size:11px;
    line-height:1.3;
  }

  .hero h1{
    max-width:350px;
    margin:12px 0 14px;

    font-size:clamp(36px,10vw,43px);
    line-height:1.02;
    letter-spacing:-1px;
  }

  .hero p{
    max-width:340px;
    margin:0;

    font-size:15px;
    line-height:1.5;
  }

  .search-panel{
    width:100%;
    margin-top:28px;
    padding:14px;

    border-radius:18px;
  }

  .tabs{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:6px;
    margin-bottom:16px;
    overflow:visible;
  }

  .tab{
    width:100%;
    min-width:0;
    padding:12px 5px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;

    font-size:12px;
    border-radius:10px;
  }

  .search-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
  }

  .search-grid label{
    width:100%;
  }

  .search-grid select{
    width:100%;
    min-height:46px;
  }

  .search-grid .btn{
    width:100%;
    min-height:48px;
    grid-column:auto;
  }
}
@media (max-width:390px){

  .hero-content{
    width:calc(100% - 18px);
    padding-top:42px;
  }

  .hero h1{
    font-size:35px;
  }

  .hero p{
    font-size:14px;
  }

  .tab{
    font-size:11px;
    padding:10px 3px;
  }

  .search-panel{
    padding:12px;
  }
}
/* ==========================
   HEADER MOBILE
========================== */

@media (max-width:700px){

.header{

    height:72px;
    padding:0 16px;

    display:flex;
    justify-content:space-between;
    align-items:center;

}

.brand{

    flex:1;
    display:flex;
    align-items:center;

}

.brand img{

    width:165px;
    max-width:100%;
    height:auto;
    object-fit:contain;

}

.menu-toggle{

    display:flex;
    align-items:center;
    justify-content:center;

    width:42px;
    height:42px;

    font-size:30px;

    background:none;
    border:0;

    margin-left:10px;

}

.nav{

    position:absolute;
    top:72px;
    left:0;
    right:0;

    background:#fff;

    display:none;
    flex-direction:column;

    padding:18px;

    box-shadow:0 10px 25px rgba(0,0,0,.12);

}

.nav.open{

    display:flex;

}

.nav a{

    padding:14px 0;
    border-bottom:1px solid #eee;

}

.header>.btn{

    display:none;

}
 
}
/* =========================================
   MODAL DETALLE DEL VEHÍCULO
========================================= */

.vehicle-detail-modal{
  position:fixed;
  inset:0;
  z-index:1000;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:24px;
}

.vehicle-detail-modal.hidden{
  display:none;
}

.vehicle-detail-backdrop{
  position:absolute;
  inset:0;

  background:rgba(3,15,40,.76);
  backdrop-filter:blur(6px);
}

.vehicle-detail-card{
  position:relative;
  z-index:2;

  width:min(980px,100%);
  max-height:90vh;

  overflow-y:auto;

  background:#fff;
  border-radius:24px;

  box-shadow:0 30px 80px rgba(0,0,0,.32);
}

.vehicle-detail-close{
  position:absolute;
  top:16px;
  right:16px;
  z-index:5;

  width:42px;
  height:42px;

  display:grid;
  place-items:center;

  border:0;
  border-radius:50%;

  background:rgba(255,255,255,.95);
  color:#10203d;

  font-size:20px;
  cursor:pointer;

  box-shadow:0 8px 22px rgba(0,0,0,.16);
}

.vehicle-detail-close:hover{
  background:#f1f5fb;
}

.vehicle-detail-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
}

.vehicle-detail-image{
  min-height:520px;
  background:#edf2f8;
}

.vehicle-detail-image img{
  width:100%;
  height:100%;
  min-height:520px;

  display:block;
  object-fit:cover;
}

.vehicle-detail-info{
  padding:48px 38px 38px;
}

.vehicle-detail-info h2{
  margin:14px 0 8px;

  font-size:34px;
  line-height:1.15;
  color:#10203d;
}

.vehicle-detail-price{
  margin-bottom:28px;

  font-size:34px;
  font-weight:800;
  color:#0759e6;
}

.vehicle-specs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.vehicle-specs > div{
  min-height:96px;

  display:grid;
  grid-template-columns:32px 1fr;
  column-gap:10px;
  align-items:center;

  padding:14px;

  border:1px solid #e0e8f4;
  border-radius:14px;

  background:#f8faff;
}

.vehicle-specs i{
  grid-row:1 / 3;

  font-size:20px;
  color:#0759e6;
}

.vehicle-specs span{
  font-size:11px;
  color:#758198;
}

.vehicle-specs strong{
  font-size:14px;
  color:#10203d;
}

.detail-whatsapp{
  width:100%;
  min-height:52px;

  margin-top:26px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;

  border:0;
  border-radius:12px;

  background:#16c85a;
  color:#fff;

  font-size:15px;
  font-weight:800;
  cursor:pointer;
}

.detail-whatsapp:hover{
  background:#11ae4c;
}

.detail-loading,
.detail-error{
  min-height:340px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;

  padding:40px;
  text-align:center;
}

.detail-loading i,
.detail-error i{
  font-size:34px;
  color:#0759e6;
}

.modal-open{
  overflow:hidden;
}


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

@media(max-width:760px){

  .vehicle-detail-modal{
    padding:12px;
    align-items:flex-end;
  }

  .vehicle-detail-card{
    width:100%;
    max-height:94vh;

    border-radius:22px 22px 0 0;
  }

  .vehicle-detail-grid{
    grid-template-columns:1fr;
  }

  .vehicle-detail-image{
    min-height:240px;
  }

  .vehicle-detail-image img{
    height:240px;
    min-height:240px;
  }

  .vehicle-detail-info{
    padding:28px 20px 24px;
  }

  .vehicle-detail-info h2{
    font-size:27px;
  }

  .vehicle-detail-price{
    font-size:29px;
  }

  .vehicle-specs{
    grid-template-columns:1fr 1fr;
  }

  .vehicle-specs > div{
    min-height:82px;
  }
}

@media(max-width:390px){

  .vehicle-specs{
    grid-template-columns:1fr;
  }

}


/* ==========================================
   DETALLE COMPLETO DEL VEHÍCULO
========================================== */

.vehicle-detail-modal{
  position:fixed;
  inset:0;
  z-index:1000;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:24px;
}

.vehicle-detail-modal.hidden{
  display:none;
}

.vehicle-detail-backdrop{
  position:absolute;
  inset:0;

  background:rgba(3,15,40,.78);
  backdrop-filter:blur(7px);
}

.vehicle-detail-card{
  position:relative;
  z-index:2;

  width:min(1120px,100%);
  max-height:92vh;

  overflow-y:auto;

  background:#fff;
  border-radius:24px;

  box-shadow:0 35px 90px rgba(0,0,0,.35);
}

.vehicle-detail-close{
  position:absolute;
  top:15px;
  right:15px;
  z-index:20;

  width:44px;
  height:44px;

  display:grid;
  place-items:center;

  border:0;
  border-radius:50%;

  background:#fff;
  color:#10203d;

  font-size:20px;

  box-shadow:0 8px 24px rgba(0,0,0,.17);
}

.vehicle-detail-layout{
  display:grid;
  grid-template-columns:1.25fr .75fr;
}

.vehicle-gallery{
  min-width:0;
  padding:18px;
  background:#edf2f8;
}

.gallery-main{
  position:relative;
  height:520px;

  overflow:hidden;
  border-radius:17px;

  background:#dfe6ef;
}

.gallery-main img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.gallery-counter{
  position:absolute;
  bottom:14px;
  right:14px;

  padding:7px 12px;

  border-radius:999px;

  background:rgba(3,15,40,.75);
  color:#fff;

  font-size:12px;
  font-weight:700;
}

.gallery-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);

  width:46px;
  height:46px;

  display:grid;
  place-items:center;

  border:0;
  border-radius:50%;

  background:rgba(255,255,255,.92);
  color:#10203d;

  font-size:17px;

  box-shadow:0 7px 20px rgba(0,0,0,.18);
}

.gallery-prev{
  left:14px;
}

.gallery-next{
  right:14px;
}

.gallery-thumbnails{
  display:flex;
  gap:10px;

  margin-top:12px;
  padding-bottom:4px;

  overflow-x:auto;
  scrollbar-width:thin;
}

.gallery-thumbnail{
  flex:0 0 105px;

  height:72px;
  padding:0;

  overflow:hidden;

  border:3px solid transparent;
  border-radius:10px;

  background:#fff;
}

.gallery-thumbnail.active{
  border-color:#0759e6;
}

.gallery-thumbnail img{
  width:100%;
  height:100%;

  display:block;
  object-fit:cover;
}

.vehicle-detail-summary{
  padding:42px 32px 30px;
}

.detail-topline{
  display:flex;
  align-items:center;
  gap:9px;
}

.featured-label{
  display:inline-flex;

  padding:6px 10px;

  border-radius:999px;

  background:#fff4d7;
  color:#9a6500;

  font-size:11px;
  font-weight:800;
}

.vehicle-detail-summary h2{
  margin:14px 0 4px;

  font-size:33px;
  line-height:1.16;
}

.vehicle-version{
  margin:0 0 12px;
  color:#748097;
}

.vehicle-detail-price{
  margin-bottom:11px;

  color:#0759e6;

  font-size:35px;
  font-weight:900;
}

.vehicle-location{
  display:flex;
  align-items:center;
  gap:7px;

  margin-bottom:24px;

  color:#68748a;
  font-size:14px;
}

.vehicle-location i{
  color:#0759e6;
}

.vehicle-specs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.vehicle-specs > div{
  min-height:84px;

  display:grid;
  grid-template-columns:30px 1fr;
  column-gap:8px;
  align-items:center;

  padding:12px;

  border:1px solid #e0e8f4;
  border-radius:13px;

  background:#f8faff;
}

.vehicle-specs i{
  grid-row:1 / 3;

  color:#0759e6;
  font-size:18px;
}

.vehicle-specs span{
  color:#7b879c;
  font-size:10px;
}

.vehicle-specs strong{
  font-size:13px;
}

.seller-card{
  display:flex;
  align-items:center;
  gap:13px;

  margin-top:22px;
  padding:14px;

  border:1px solid #e2e9f3;
  border-radius:14px;

  background:#fff;
}

.seller-avatar{
  width:46px;
  height:46px;

  display:grid;
  place-items:center;
  flex-shrink:0;

  border-radius:50%;

  background:#eaf2ff;
  color:#0759e6;
}

.seller-card div:last-child{
  display:flex;
  flex-direction:column;
}

.seller-card span,
.seller-card small{
  color:#758198;
  font-size:11px;
}

.seller-card strong{
  margin:2px 0;
  font-size:14px;
}

.detail-contact-actions{
  display:grid;
  grid-template-columns:1fr 52px;
  gap:9px;

  margin-top:15px;
}

.detail-whatsapp,
.detail-call{
  min-height:52px;

  border:0;
  border-radius:12px;

  cursor:pointer;
}

.detail-whatsapp{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  background:#16c85a;
  color:#fff;

  font-weight:800;
}

.detail-call{
  background:#eaf2ff;
  color:#0759e6;

  font-size:17px;
}

.vehicle-detail-extra{
  padding:12px 34px 36px;
}

.detail-section{
  padding:26px 0;
  border-top:1px solid #e4eaf2;
}

.detail-section h3{
  margin:0 0 14px;

  color:#10203d;
  font-size:22px;
}

.detail-section > p{
  max-width:850px;

  margin:0;

  color:#68748a;

  font-size:14px;
  line-height:1.75;
}

.technical-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}

.technical-grid > div{
  display:flex;
  flex-direction:column;
  gap:5px;

  padding:13px;

  border:1px solid #e0e7f1;
  border-radius:12px;

  background:#f8faff;
}

.technical-grid span{
  color:#7a879b;
  font-size:11px;
}

.technical-grid strong{
  font-size:13px;
}

.vehicle-feature-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:11px;
}

.vehicle-feature-item{
  display:flex;
  align-items:center;
  gap:8px;

  padding:12px;

  border-radius:11px;

  background:#f5f8fd;

  font-size:13px;
}

.vehicle-feature-item i{
  color:#16b85a;
}

.detail-security{
  display:grid;
  grid-template-columns:46px 1fr auto;
  align-items:center;
  gap:14px;

  padding:18px;

  border-radius:15px;

  background:#eaf2ff;
}

.detail-security > i{
  font-size:27px;
  color:#0759e6;
}

.detail-security strong{
  display:block;
  margin-bottom:3px;
}

.detail-security p{
  margin:0;

  color:#68748a;
  font-size:12px;
}

.detail-security a{
  padding:11px 15px;

  border-radius:10px;

  background:#0759e6;
  color:#fff;

  text-decoration:none;
  font-size:13px;
  font-weight:800;
}

.no-data{
  color:#758198;
}

.modal-open{
  overflow:hidden;
}


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

@media(max-width:800px){

  .vehicle-detail-modal{
    padding:0;
    align-items:flex-end;
  }

  .vehicle-detail-card{
    width:100%;
    max-height:96vh;

    border-radius:22px 22px 0 0;
  }

  .vehicle-detail-layout{
    grid-template-columns:1fr;
  }

  .vehicle-gallery{
    padding:0;
  }

  .gallery-main{
    height:280px;
    border-radius:0;
  }

  .gallery-thumbnails{
    padding:0 12px 10px;
  }

  .gallery-thumbnail{
    flex-basis:88px;
    height:62px;
  }

  .vehicle-detail-summary{
    padding:26px 18px 22px;
  }

  .vehicle-detail-summary h2{
    font-size:27px;
  }

  .vehicle-detail-price{
    font-size:30px;
  }

  .vehicle-detail-extra{
    padding:0 18px 28px;
  }

  .technical-grid{
    grid-template-columns:1fr 1fr;
  }

  .vehicle-feature-grid{
    grid-template-columns:1fr 1fr;
  }

  .detail-security{
    grid-template-columns:40px 1fr;
  }

  .detail-security a{
    grid-column:1 / -1;
    text-align:center;
  }

}

@media(max-width:420px){

  .gallery-main{
    height:235px;
  }

  .vehicle-specs{
    grid-template-columns:1fr 1fr;
  }

  .technical-grid,
  .vehicle-feature-grid{
    grid-template-columns:1fr;
  }

}
.category-grid img{
    max-width: 180px;
    padding: 0;
    display: flex;
    margin: auto;
    
} 
/* ==========================================================
   MEJORA VISUAL FINAL - AUTOMARKET
   COLOCAR AL FINAL DE styles.css
========================================================== */

:root{
    --am-blue:#0759e6;
    --am-blue-dark:#0346bd;
    --am-navy:#071b44;
    --am-light:#f4f8ff;
    --am-text:#10203d;
    --am-muted:#6c7890;
    --am-border:#e2e9f4;
    --am-green:#18c45c;

    --am-radius:18px;

    --am-shadow:
        0 14px 38px rgba(20,49,101,.10);

    --am-shadow-hover:
        0 22px 46px rgba(20,49,101,.16);
}


/* ==========================================================
   BODY
========================================================== */

body{
    background:
        linear-gradient(
            180deg,
            #ffffff 0,
            #f7faff 450px,
            #f5f8fd 100%
        );

    color:var(--am-text);
}


/* ==========================================================
   HEADER
========================================================== */

.header{
    height:78px;

    background:
        rgba(255,255,255,.96);

    backdrop-filter:
        blur(15px);

    border-bottom:
        1px solid rgba(7,89,230,.08);

    box-shadow:
        0 5px 25px rgba(7,45,105,.06);
}

.brand img{
    width:220px;

    transition:
        transform .25s ease;
}

.brand:hover img{
    transform:
        scale(1.025);
}


.nav{
    gap:30px;
}

.nav a{
    position:relative;

    padding:27px 0;

    font-size:14px;
    font-weight:650;

    transition:
        color .25s ease;
}

.nav a::before{
    content:"";

    position:absolute;

    left:50%;
    bottom:18px;

    width:0;
    height:3px;

    border-radius:99px;

    background:
        linear-gradient(
            90deg,
            #0759e6,
            #20a0ff
        );

    transform:
        translateX(-50%);

    transition:
        width .25s ease;
}

.nav a:hover::before{
    width:100%;
}

.nav a:hover{
    color:var(--am-blue);
}


/* TU HTML USA nav-pri */

.nav-pri{
    color:var(--am-blue) !important;
}

.nav-pri::before{
    width:100% !important;
}


/* BOTÓN HEADER */

.header .btn-primary{
    padding:
        13px 21px;

    border-radius:11px;

    background:
        linear-gradient(
            135deg,
            #0759e6,
            #0346bd
        );

    box-shadow:
        0 10px 24px rgba(7,89,230,.20);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.header .btn-primary:hover{
    transform:
        translateY(-2px);

    box-shadow:
        0 14px 30px rgba(7,89,230,.27);
}


/* ==========================================================
   HERO
========================================================== */

.hero{
    position:relative;

    overflow:hidden;

    min-height:540px;

    background-color:
        #071b44;

    background-position:
        right center;

    background-size:
        cover;
}

.hero::after{
    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            90deg,
            rgba(4,20,54,.94) 0%,
            rgba(4,20,54,.76) 43%,
            rgba(4,20,54,.15) 78%,
            transparent 100%
        );
}

.hero-content{
    position:relative;

    z-index:2;

    padding-top:70px;
    padding-bottom:42px;
}

.hero-copy{
    max-width:650px;
}

.hero .eyebrow{
    display:inline-flex;

    padding:
        7px 12px;

    border:
        1px solid rgba(97,182,255,.25);

    border-radius:999px;

    background:
        rgba(38,129,255,.12);

    color:#79d8ff;
}

.hero h1{
    margin:
        17px 0 18px;

    max-width:690px;

    font-size:
        clamp(43px,4.2vw,64px);

    letter-spacing:
        -1.5px;

    text-wrap:balance;
}

.hero h1 span{
    background:
        linear-gradient(
            90deg,
            #37a8ff,
            #6ac9ff
        );

    background-clip:text;
    -webkit-background-clip:text;

    color:transparent;
}

.hero p{
    max-width:600px;

    margin:0;

    font-size:19px;
    line-height:1.55;

    color:
        rgba(255,255,255,.82);
}


/* ==========================================================
   BUSCADOR
========================================================== */

.search-panel{
    position:relative;

    width:100%;

    margin-top:44px;

    padding:
        20px 22px 23px;

    border:
        1px solid rgba(255,255,255,.7);

    border-radius:20px;

    background:
        rgba(255,255,255,.97);

    box-shadow:
        0 20px 55px rgba(0,15,54,.30);

    backdrop-filter:
        blur(15px);
}

.tabs{
    display:flex;

    gap:8px;

    margin-bottom:17px;
}

.tab{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:6px;

    min-height:40px;

    padding:
        9px 17px;

    border-radius:9px;

    background:#eef4ff;

    transition:
        .25s ease;
}

.tab:hover{
    background:#dfeaff;

    transform:
        translateY(-1px);
}

.tab.active{
    background:
        linear-gradient(
            135deg,
            #0759e6,
            #0346bd
        );

    color:#fff;

    box-shadow:
        0 8px 20px rgba(7,89,230,.22);
}


.search-grid select{
    min-height:47px;

    border:
        1px solid #dbe4f2;

    border-radius:10px;

    background:
        #fbfdff;

    transition:
        border .2s ease,
        box-shadow .2s ease;
}

.search-grid select:focus{
    border-color:
        #0759e6;

    box-shadow:
        0 0 0 3px
        rgba(7,89,230,.10);
}

.search-grid > .btn{
    min-height:47px;
}


/* ==========================================================
   TRUST STRIP
========================================================== */
  

/* ==========================================================
   SECCIONES
========================================================== */

.section{
    padding:
        72px 0;
}

.section-heading{
    margin-bottom:31px;
}

.section-heading h2{
    margin-top:6px;

    font-size:
        clamp(29px,3vw,39px);

    line-height:1.1;

    letter-spacing:
        -.7px;
}

.section-heading .eyebrow{
    color:#0759e6;
}

.dest{
    color:#0759e6;
}


/* ==========================================================
   VEHÍCULOS
========================================================== */

.vehicle-grid{
    gap:22px;
}

.vehicle-card{
    position:relative;

    overflow:hidden;

    border:
        1px solid #e3eaf3;

    border-radius:17px;

    background:#fff;

    box-shadow:
        0 10px 30px rgba(20,49,101,.07);

    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border .28s ease;
}

.vehicle-card:hover{
    transform:
        translateY(-7px);

    border-color:
        #c6daf9;

    box-shadow:
        0 20px 42px rgba(20,49,101,.15);
}

.vehicle-card img{
    height:205px;

    transition:
        transform .45s ease;
}

.vehicle-card:hover > img{
    transform:
        scale(1.035);
}

.vehicle-body{
    padding:
        18px 19px 20px;
}

.vehicle-body h3{
    margin:
        11px 0 7px;

    font-size:17px;
}

.vehicle-price{
    color:#0759e6;

    font-size:23px;
}

.vehicle-actions{
    margin-top:17px;
}

.vehicle-actions button{
    min-height:42px;

    transition:
        .25s ease;
}


/* ==========================================================
   CATEGORÍAS
========================================================== */

.category-grid{
    gap:18px;
}

.category-grid button{
    position:relative;

    overflow:hidden;

    min-height:205px;

    border:
        1px solid #e4ebf4;

    border-radius:18px;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f9fbff
        );

    box-shadow:
        0 10px 30px rgba(20,49,101,.06);

    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border .28s ease;
}

.category-grid button:hover{
    transform:
        translateY(-7px);

    border-color:
        #bcd5fa;

    box-shadow:
        0 19px 38px rgba(20,49,101,.13);
}

.category-grid img{
    width:100%;
    max-width:185px;

    margin:auto;

    transition:
        transform .35s ease;
}

.category-grid button:hover img{
    transform:
        scale(1.06);
}

.category-grid b{
    color:#101f3a;
}

.category-grid span{
    color:#768199;
}


/* ==========================================================
   BANNER INFORMACIÓN VEHICULAR
========================================================== */

.Infovehi{
    position:relative;

    width:
        min(1440px,calc(100% - 40px));

    margin:
        25px auto 35px;

    overflow:hidden;

    border-radius:20px;

    background:#061d4d;

    box-shadow:
        0 20px 45px rgba(3,29,73,.17);
}

.Infovehi a{
    display:block;

    overflow:hidden;
}

.Infovehi img{
    width:100%;

    /*
      560px es demasiado alto.
      Con aspect-ratio se adapta mejor.
    */

    height:auto;

    aspect-ratio:
        2048 / 670;

    object-fit:cover;

    transition:
        transform .5s ease,
        filter .5s ease;
}

.Infovehi:hover img{
    transform:
        scale(1.015);

    filter:
        brightness(1.035);
}


/* ==========================================================
   COMO FUNCIONA
========================================================== */

.steps{
    gap:20px;
}

.steps article{
    position:relative;

    min-height:190px;

    padding:
        27px 24px;

    border:
        1px solid #e2e9f4;

    border-radius:17px;

    background:#fff;

    box-shadow:
        0 10px 27px rgba(20,49,101,.06);

    transition:
        transform .27s ease,
        box-shadow .27s ease,
        border .27s ease;
}

.steps article:hover{
    transform:
        translateY(-6px);

    border-color:
        #bed6fa;

    box-shadow:
        0 18px 37px rgba(20,49,101,.12);
}

.steps span{
    width:44px;
    height:44px;

    background:
        linear-gradient(
            145deg,
            #e4efff,
            #f4f8ff
        );

    font-size:16px;
}

.steps h3{
    margin:
        18px 0 7px;

    font-size:18px;
}

.steps p{
    margin:0;

    line-height:1.55;
}


/* ==========================================================
   CTA
========================================================== */

.cta{
    position:relative;

    overflow:hidden;

    min-height:170px;

    padding:
        38px 44px;

    border-radius:22px;

    background:
        radial-gradient(
            circle at 85% 35%,
            rgba(66,190,255,.38),
            transparent 30%
        ),
        linear-gradient(
            120deg,
            #052765,
            #0759e6
        );

    box-shadow:
        0 18px 44px rgba(4,63,151,.18);
}

.cta::before{
    content:"";

    position:absolute;

    width:250px;
    height:250px;

    right:-70px;
    bottom:-170px;

    border:
        35px solid rgba(255,255,255,.07);

    border-radius:50%;
}

.cta h2{
    position:relative;

    margin:
        0 0 6px;

    font-size:30px;
}

.cta p{
    position:relative;

    margin:0;

    color:
        rgba(255,255,255,.82);
}

.cta .btn-light{
    position:relative;

    box-shadow:
        0 8px 22px rgba(0,0,0,.10);

    transition:
        .25s ease;
}

.cta .btn-light:hover{
    transform:
        translateY(-3px);
}


/* ==========================================================
   FOOTER
========================================================== */

footer{
    padding-top:58px;

    background:
        linear-gradient(
            145deg,
            #061633,
            #041127
        );
}

.footer-brand{
    font-size:20px;
    font-weight:800;
}

.footer-grid a{
    transition:
        color .2s;
}

.footer-grid a:hover{
    color:#fff;
}


/* ==========================================================
   MODAL VEHÍCULO
========================================================== */

.vehicle-detail-card{
    border:
        1px solid rgba(255,255,255,.85);

    box-shadow:
        0 35px 100px
        rgba(0,0,0,.38);
}

.gallery-main{
    background:
        linear-gradient(
            145deg,
            #e5ebf3,
            #f7f9fc
        );
}

.gallery-arrow{
    transition:
        transform .2s ease,
        background .2s ease;
}

.gallery-arrow:hover{
    background:white;

    transform:
        translateY(-50%)
        scale(1.07);
}

.vehicle-specs > div{
    transition:
        border .2s ease,
        background .2s ease;
}

.vehicle-specs > div:hover{
    border-color:
        #bfd6f8;

    background:
        #f1f6ff;
}

.seller-card{
    box-shadow:
        0 8px 22px
        rgba(20,49,101,.05);
}


/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:900px){

    .header{
        height:70px;
    }

    .brand img{
        width:225px;
    }

    .nav{
        top:70px;

        padding:
            10px 22px 20px;
    }

    .nav a{
        padding:
            13px 4px;
    }

    .nav a::before{
        display:none;
    }


    .hero{
        min-height:auto;
    }

    .hero-content{
        padding:
            55px 0 32px;
    }


    .vehicle-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }


    .category-grid{
        grid-template-columns:
            repeat(2,1fr);
    }


    .steps{
        grid-template-columns:
            repeat(2,1fr);
    }


    .Infovehi{
        width:
            calc(100% - 24px);
    }
  .Infovehi img{
    min-height: 180px;
  }
}


/* ==========================================================
   MOBILE <= 600
========================================================== */

@media(max-width:600px){

    .container{
        width:
            calc(100% - 24px);
    }


    .hero{
        background-position:
            64% center;
    }

    .hero::after{
        background:
            linear-gradient(
                180deg,
                rgba(5,22,59,.45),
                rgba(5,22,59,.78)
            );
    }

    .hero-content{
        padding-top:45px;
    }

    .hero h1{
        font-size:
            clamp(37px,11vw,46px);
    }

    .hero p{
        font-size:15px;
    }


    .search-panel{
        margin-top:30px;

        padding:
            13px;

        border-radius:17px;
    }

    .tabs{
        display:grid;

        grid-template-columns:
            repeat(4,1fr);

        gap:5px;
    }

    .tab{
        min-width:0;

        padding:
            10px 3px;

        flex-direction:column;

        font-size:10px;
    }


    .search-grid{
        grid-template-columns:1fr;
    }
 


    .section{
        padding:
            52px 0;
    }


    .vehicle-grid{
        grid-template-columns:1fr;
    }


    .vehicle-card img{
        height:225px;
    }


    .category-grid{
        grid-template-columns:
            repeat(2,1fr);

        gap:10px;
    }

    .category-grid button{
        min-height:175px;

        padding:
            5px 8px 16px;
    }

    .category-grid img{
        max-width:135px;
    }


    .Infovehi{
        width:100%;

        border-radius:0;

        margin:
            10px 0 20px;
    }

    .Infovehi img{
        width:100%;

        aspect-ratio:auto;

        height:auto;

        object-fit:contain;
    }


    .steps{
        grid-template-columns:1fr;
    }


    .cta{
        margin:
            0 12px 45px;

        padding:
            29px 24px;

        align-items:flex-start;
    }

    .cta h2{
        font-size:25px;
    }


    .footer-grid{
        grid-template-columns:1fr;
    }

}


/* ==========================================================
   CELULARES PEQUEÑOS
========================================================== */

@media(max-width:390px){

    .brand img{
        width:155px;
    }

    .hero h1{
        font-size:35px;
    }

    .category-grid{
        grid-template-columns:1fr 1fr;
    }

}

/* =========================================
   FORMULARIO PUBLICAR VEHÍCULO
========================================= */

.publish-modal-card{
    width:min(920px,96vw);
    max-height:92vh;

    padding:0;

    overflow-y:auto;

    border-radius:24px;

    background:#fff;

    box-shadow:
        0 30px 90px
        rgba(0,0,0,.30);
}


/* HEADER */

.publish-header{
    display:flex;
    align-items:center;

    gap:16px;

    padding:
        28px 34px 23px;

    border-bottom:
        1px solid #e8edf5;

    background:
        linear-gradient(
            135deg,
            #f7faff,
            #ffffff
        );
}


.publish-header-icon{
    width:54px;
    height:54px;

    display:grid;
    place-items:center;

    flex-shrink:0;

    border-radius:15px;

    background:
        linear-gradient(
            135deg,
            #0759e6,
            #1785ff
        );

    color:white;

    font-size:23px;

    box-shadow:
        0 10px 25px
        rgba(7,89,230,.20);
}


.publish-header h2{
    margin:
        4px 0 3px;

    font-size:25px;
}


.publish-header p{
    margin:0;

    color:#778399;

    font-size:13px;
}


/* FORM */

.publish-form{
    display:grid;

    grid-template-columns:
        repeat(2,1fr);

    gap:
        16px 18px;

    padding:
        28px 34px 34px;
}


.publish-form label{
    display:flex;
    flex-direction:column;

    gap:7px;

    color:#526079;

    font-size:12px;
    font-weight:700;
}


.publish-form input,
.publish-form select,
.publish-form textarea{
    width:100%;

    min-height:47px;

    padding:
        12px 14px;

    border:
        1px solid #dce5f1;

    border-radius:10px;

    outline:none;

    background:#fff;

    color:#17243d;

    transition:
        border .2s,
        box-shadow .2s;
}


.publish-form textarea{
    resize:vertical;

    min-height:120px;
}


.publish-form input:focus,
.publish-form select:focus,
.publish-form textarea:focus{
    border-color:#0759e6;

    box-shadow:
        0 0 0 3px
        rgba(7,89,230,.10);
}


.form-section-title{
    grid-column:1/-1;

    display:flex;
    align-items:center;

    gap:9px;

    margin-top:5px;

    padding-bottom:10px;

    border-bottom:
        1px solid #e8edf5;

    color:#10203d;

    font-size:14px;
    font-weight:800;
}


.form-section-title i{
    color:#0759e6;
}


/* =========================================
   UPLOAD IMÁGENES
========================================= */

.upload-area{
    position:relative;

    min-height:145px;

    display:flex !important;

    align-items:center;
    justify-content:center;

    text-align:center;

    cursor:pointer;

    border:
        2px dashed #bed2ef !important;

    border-radius:15px;

    background:#f8fbff;

    transition:.25s;
}


.upload-area:hover{
    border-color:#0759e6 !important;

    background:#f1f6ff;
}


.upload-area > i{
    color:#0759e6;

    font-size:31px;
}


.upload-area strong{
    color:#10203d;

    font-size:14px;
}


.upload-area span{
    color:#7b879b;

    font-size:11px;
}


.upload-area input{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    opacity:0;

    cursor:pointer;
}


/* =========================================
   PREVIEW
========================================= */

.image-preview-grid{
    display:grid;

    grid-template-columns:
        repeat(5,1fr);

    gap:10px;
}


.image-preview-item{
    height:105px;

    overflow:hidden;

    border:
        1px solid #dde6f1;

    border-radius:10px;

    background:#edf2f8;
}


.image-preview-item img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
}


/* =========================================
   CHECKBOX
========================================= */

.checkbox-field{
    flex-direction:row !important;

    align-items:center;

    gap:9px !important;

    margin-top:24px;
}


.checkbox-field input{
    width:18px;
    height:18px;

    min-height:auto;
}


/* =========================================
   ACCIONES
========================================= */

.publish-actions{
    display:flex;

    justify-content:flex-end;

    gap:11px;

    margin-top:12px;
}


.btn-cancel{
    border:
        1px solid #dbe3ef;

    background:#fff;

    color:#536177;
}


.publish-actions .btn{
    min-width:150px;
}


.form-message{
    margin:0;

    color:#0759e6;

    font-weight:700;
}


/* =========================================
   MOBILE
========================================= */

@media(max-width:700px){

    .publish-modal-card{
        width:100%;
        max-height:96vh;

        border-radius:
            22px 22px 0 0;
    }


    .publish-header{
        padding:
            24px 20px 18px;
    }


    .publish-form{
        grid-template-columns:1fr;

        padding:
            22px 18px 27px;
    }


    .form-section-title,
    .full{
        grid-column:auto;
    }


    .image-preview-grid{
        grid-template-columns:
            repeat(3,1fr);
    }


    .publish-actions{
        flex-direction:column-reverse;
    }


    .publish-actions .btn{
        width:100%;
    }

}
/* =========================================
   IMAGEN DE TARJETA
========================================= */

.vehicle-image-container{
    position:relative;
    overflow:hidden;
}


/* Imagen */

.vehicle-image-container img{
    width:100%;
    height:205px;
    object-fit:cover;
    display:block;
}


/* =========================================
   PUBLICADO RECIÉN
========================================= */

.badge-recien{
    position:absolute;

    top:12px;
    right:12px;

    display:flex;
    align-items:center;
    gap:6px;

    padding:8px 12px;

    border-radius:999px;

    background:
        linear-gradient(
            135deg,
            #16c85a,
            #0ba64a
        );

    color:#fff;

    font-size:11px;
    font-weight:800;

    box-shadow:
        0 7px 18px
        rgba(0,0,0,.20);

    z-index:3;
}


.badge-recien i{
    font-size:10px;
}


/* CELULAR */

@media(max-width:600px){

    .badge-recien{
        top:10px;
        right:10px;

        padding:7px 10px;

        font-size:10px;
    }

}


/* =========================================================
   ESPECIFICACIONES DEL VEHÍCULO
========================================================= */

.vehicle-specs{

    display:grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:12px;

    margin-top:24px;
}


/* TARJETA */

.vehicle-spec-item{

    min-height:84px;

    display:flex;
    align-items:center;

    gap:13px;

    padding:
        15px 16px;

    border:
        1px solid #dce6f5;

    border-radius:14px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f7faff
        );

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;

}


/* HOVER */

.vehicle-spec-item:hover{

    transform:
        translateY(-3px);

    border-color:
        #a9c9fa;

    box-shadow:
        0 10px 25px
        rgba(20,70,150,.10);

}


/* ICONO */

.spec-icon{

    width:43px;
    height:43px;

    flex-shrink:0;

    display:grid;
    place-items:center;

    border-radius:12px;

    background:
        linear-gradient(
            135deg,
            #e7f0ff,
            #f3f7ff
        );

    color:#0759e6;

    font-size:18px;

}


/* INFORMACIÓN */

.spec-info{

    min-width:0;

    display:flex;
    flex-direction:column;

    gap:4px;

}


/* TEXTO PEQUEÑO */

.spec-info span{

    color:#7c899e;

    font-size:11px;

    font-weight:500;

}


/* VALOR */

.spec-info strong{

    overflow:hidden;

    color:#0b1935;

    font-size:14px;

    font-weight:750;

    white-space:nowrap;

    text-overflow:ellipsis;

}
@media(max-width:600px){

    .vehicle-specs{

        grid-template-columns:
            repeat(2, 1fr);

        gap:9px;

    }


    .vehicle-spec-item{

        min-height:76px;

        gap:9px;

        padding:
            12px 10px;

    }


    .spec-icon{

        width:36px;
        height:36px;

        border-radius:10px;

        font-size:15px;

    }


    .spec-info span{

        font-size:9px;

    }


    .spec-info strong{

        font-size:12px;

    }

}
.vehicle-title{
    display:flex;
    align-items:center;
    gap:7px;
    flex-wrap:wrap;
}

.vehicle-year{
    color:#091a38;
    font-weight:800;
}

/* =========================================================
   TÍTULO VEHÍCULO + AÑO
========================================================= */

.vehicle-detail-title{
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;

    gap:9px;

    margin:
        12px 0 3px;

    color:#091a38;

    font-size:34px;
    font-weight:800;

    line-height:1.05;
}


.vehicle-detail-year{
color:#091a38;

    font-size:34px;
     font-weight:800;
}


/* =========================================================
   TIEMPO DE PUBLICACIÓN + UBICACIÓN
========================================================= */

.vehicle-publish-meta{
    display:flex;
    align-items:center;
    flex-wrap:wrap;

    gap:7px;

    margin-top:10px;

    color:#68768d;

    font-size:13px;
    font-weight:500;
}


.publish-time,
.publish-location{
    display:inline-flex;
    align-items:center;

    gap:5px;
}


.publish-time i{
    color:#75839a;
    font-size:12px;
}


.publish-location i{
    color:#0759e6;
    font-size:13px;
}


.publish-separator{
    color:#aeb8c7;
}


/* =========================================================
   CELULAR
========================================================= */

@media(max-width:600px){

    .vehicle-detail-title{
        gap:6px;

        font-size:28px;
    }


    .vehicle-detail-year{
        font-size:28px;
    }


    .vehicle-publish-meta{
        font-size:12px;

        gap:5px;
    }

}

/* =========================================================
   BANNER INFORME VEHICULAR
========================================================= */
.detail-security-banner{
    position: relative;
    width: 95%;
    min-height: 450px;
    margin-top: 28px;
    overflow: hidden;
    border-radius: 18px;

    background-image: url("img/Información\ vehicular\ y\ contacto\ por\ WhatsApp.png");
 
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 100% 110%; /* aquí haces que se vea más completa */
}


/* =========================================================
   BOTÓN
========================================================= */

.security-banner-button{
    position:absolute;

    top:50%;
    right:35px;

    transform:
        translateY(-50%);

    display:inline-flex;

    align-items:center;
    justify-content:center;

    gap:10px;

    min-width:190px;

    padding:
        15px 24px;

    border-radius:12px;

    background:
        linear-gradient(
            135deg,
            #0759e6,
            #0347c8
        );

    color:#fff;

    font-size:14px;

    font-weight:800;

    text-decoration:none;

    box-shadow:
        0 10px 25px
        rgba(7,89,230,.25);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.security-banner-button:hover{

    transform:
        translateY(-50%)
        translateY(-2px);

    box-shadow:
        0 15px 30px
        rgba(7,89,230,.34);

}


.security-banner-button i{
    font-size:13px;
}
@media(max-width:600px){

    .detail-security-banner{

        min-height:130px;

        background-image:
            url("img/Información\ vehicular\ y\ contacto\ por\ WhatsApp.png");

        background-position:center;

        background-size:cover;

    }


    .security-banner-button{

        top:auto;

        right:18px;
        left:18px;
        bottom:18px;

        width:auto;
        min-width:0;

        transform:none;

        padding:
            14px 18px;

    }


    .security-banner-button:hover{

        transform:
            translateY(-2px);

    }

}

/* =========================================================
   CÓMO FUNCIONA
========================================================= */

.how-section{
    position:relative;

    padding:75px 0 85px;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 50% 110%,
            rgba(7,89,230,.08),
            transparent 40%
        ),
        linear-gradient(
            180deg,
            #f8fbff 0%,
            #f3f7fd 100%
        );
}


/* DECORACIÓN DE FONDO */

.how-section::before{
    content:"";

    position:absolute;

    width:500px;
    height:500px;

    left:-300px;
    bottom:-270px;

    border:70px solid rgba(7,89,230,.025);

    border-radius:50%;

    pointer-events:none;
}


.how-section::after{
    content:"";

    position:absolute;

    width:420px;
    height:420px;

    right:-270px;
    top:-220px;

    border:60px solid rgba(7,89,230,.025);

    border-radius:50%;

    pointer-events:none;
}


/* =========================================================
   CABECERA
========================================================= */

.how-header{
    position:relative;

    z-index:2;

    max-width:700px;

    margin:
        0 auto 45px;

    text-align:center;
}


.how-eyebrow{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:14px;

    margin-bottom:12px;

    color:#0759e6;

    font-size:12px;
    font-weight:800;

    letter-spacing:2px;
}


.how-eyebrow span{
    width:32px;
    height:2px;

    border-radius:10px;

    background:#0759e6;
}


.how-header h2{
    margin:0;

    color:#071b44;

    font-size:
        clamp(34px,4vw,48px);

    font-weight:800;

    letter-spacing:-1px;
}


.how-header p{
    max-width:560px;

    margin:
        12px auto 0;

    color:#71809a;

    font-size:15px;

    line-height:1.6;
}


/* =========================================================
   GRID
========================================================= */

.how-steps{
    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:28px;
}


/* =========================================================
   TARJETAS
========================================================= */

.how-card{
    position:relative;

    min-height:330px;

    display:flex;
    flex-direction:column;
    align-items:center;

    padding:
        28px 24px 25px;

    border:
        1px solid #e0e9f5;

    border-radius:20px;

    background:
        rgba(255,255,255,.96);

    box-shadow:
        0 14px 35px
        rgba(23,58,111,.07);

    text-align:center;

    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease;
}


.how-card:hover{
    transform:
        translateY(-8px);

    border-color:
        #b8d2fb;

    box-shadow:
        0 22px 48px
        rgba(23,58,111,.13);
}


/* =========================================================
   NÚMERO
========================================================= */

.step-number{
    position:absolute;

    top:22px;
    left:22px;

    width:42px;
    height:42px;

    display:grid;
    place-items:center;

    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            #0875ff,
            #0759e6
        );

    color:#fff;

    font-size:15px;
    font-weight:800;

    box-shadow:
        0 8px 18px
        rgba(7,89,230,.20);
}


/* =========================================================
   ICONO
========================================================= */

.step-icon{
    width:92px;
    height:92px;

    display:grid;
    place-items:center;

    margin:
        35px auto 23px;

    border-radius:50%;

    background:
        linear-gradient(
            145deg,
            #e8f2ff,
            #f8fbff
        );

    color:#0759e6;

    font-size:39px;

    transition:
        transform .28s ease,
        background .28s ease;
}


.how-card:hover .step-icon{
    transform:
        scale(1.08);

    background:
        linear-gradient(
            145deg,
            #ddebff,
            #f3f8ff
        );
}


/* =========================================================
   TEXTO
========================================================= */

.how-card h3{
    margin:
        0 0 10px;

    color:#071b44;

    font-size:24px;
    font-weight:800;
}


.how-card p{
    max-width:230px;

    margin:0 auto;

    color:#66758e;

    font-size:14px;
    line-height:1.55;
}


/* =========================================================
   LÍNEA INFERIOR
========================================================= */

.step-line{
    width:62%;

    height:3px;

    margin-top:auto;

    border-radius:20px;

    background:
        linear-gradient(
            90deg,
            #0759e6,
            #46a6ff
        );

    opacity:.9;
}


/* =========================================================
   FLECHA ENTRE PASOS
========================================================= */

.step-connector{
    position:absolute;

    top:50%;
    right:-45px;

    width:42px;
    height:42px;

    display:grid;
    place-items:center;

    transform:
        translateY(-50%);

    border:
        1px solid #9fc5ff;

    border-radius:50%;

    background:#fff;

    color:#0759e6;

    font-size:14px;

    box-shadow:
        0 5px 15px
        rgba(7,89,230,.10);

    z-index:5;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1000px){

    .how-steps{
        grid-template-columns:
            repeat(2,1fr);

        gap:22px;
    }


    .step-connector{
        display:none;
    }


    .how-card{
        min-height:300px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:600px){

    .how-section{
        padding:
            55px 0 65px;
    }


    .how-header{
        margin-bottom:28px;

        padding:
            0 15px;
    }


    .how-eyebrow{
        font-size:10px;

        letter-spacing:1.5px;
    }


    .how-eyebrow span{
        width:22px;
    }


    .how-header h2{
        font-size:32px;
    }


    .how-header p{
        font-size:13px;
    }


    .how-steps{
        grid-template-columns:1fr;

        gap:14px;
    }


    .how-card{
        min-height:auto;

        display:grid;

        grid-template-columns:
            54px 1fr;

        grid-template-areas:
            "number icon"
            "number title"
            "number text";

        align-items:center;

        column-gap:14px;

        padding:
            18px 18px;

        text-align:left;
    }


    .step-number{
        position:static;

        grid-area:number;

        width:42px;
        height:42px;

        margin:auto;
    }


    .step-icon{
        grid-area:icon;

        width:44px;
        height:44px;

        margin:0 0 6px;

        font-size:20px;
    }


    .how-card h3{
        grid-area:title;

        margin:
            0 0 3px;

        font-size:19px;
    }


    .how-card p{
        grid-area:text;

        max-width:none;

        margin:0;

        font-size:12px;
    }


    .step-line{
        display:none;
    }

}
.search-text-box {
    grid-column: 1 / -1;
}

.search-text-box > label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #46536b;
    margin-bottom: 8px;
}

.search-input-wrapper {
    position: relative;
    width: 100%;
}

.search-input-wrapper i {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #1264d8;
    font-size: 18px;
    pointer-events: none;
}

.search-input-wrapper input {
    width: 100%;
    height: 58px;
    padding: 0 20px 0 50px;

    border: 1px solid #dce3ee;
    border-radius: 12px;

    background: #fff;
    color: #172033;

    font-family: inherit;
    font-size: 15px;
    font-weight: 500;

    outline: none;
    box-sizing: border-box;

    transition: .2s ease;
}

.search-input-wrapper input::placeholder {
    color: #8c97a9;
}

.search-input-wrapper input:focus {
    border-color: #1264d8;
    box-shadow: 0 0 0 3px rgba(18, 100, 216, .10);
}

@media (max-width: 768px) {
    .search-text-box {
        grid-column: 1 / -1;
    }

    .search-input-wrapper input {
        height: 54px;
    }
}
/* ==============================
   PANEL DE BÚSQUEDA
============================== */

.search-panel {
    background: #ffffff;
    border-radius: 22px;
    padding: 24px 28px 28px;
    box-shadow: 0 15px 45px rgba(0, 30, 80, .15);
}


/* TABS */

.search-panel .tabs {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}


/* ==============================
   BUSCADOR DE TEXTO
============================== */

.search-text-box {
    width: 100%;
    margin-bottom: 18px;
}

.search-text-box label {
    display: block;
    margin-bottom: 8px;

    color: #45536c;
    font-size: 14px;
    font-weight: 700;
}

.search-input-wrapper {
    position: relative;
    width: 100%;
}

.search-input-wrapper > i {
    position: absolute;
    left: 20px;
    top: 50%;

    transform: translateY(-50%);

    color: #0864df;
    font-size: 20px;

    pointer-events: none;
}

.search-input-wrapper input {
    width: 100%;
    height: 58px;

    padding: 0 20px 0 58px;

    border: 1px solid #d9e1ec;
    border-radius: 13px;

    background: #fff;

    color: #172033;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;

    outline: none;
    box-sizing: border-box;

    transition: .2s ease;
}

.search-input-wrapper input::placeholder {
    color: #94a0b3;
}

.search-input-wrapper input:focus {
    border-color: #0864df;

    box-shadow:
        0 0 0 3px rgba(8, 100, 223, .10);
}


/* ==============================
   FILTROS
============================== */

.search-grid {
    display: grid;

    grid-template-columns:
        1fr
        1fr
        1fr
        1fr
        auto;

    gap: 14px;

    align-items: end;
}

.search-grid label {
    display: flex;
    flex-direction: column;
    gap: 8px;

    color: #45536c;

    font-size: 14px;
    font-weight: 700;
}

.search-grid select {
    width: 100%;
    height: 58px;

    padding: 0 18px;

    border: 1px solid #d9e1ec;
    border-radius: 12px;

    background: #fff;

    color: #111827;

    font-family: inherit;
    font-size: 14px;
    font-weight: 600;

    outline: none;
}

.search-grid select:focus {
    border-color: #0864df;

    box-shadow:
        0 0 0 3px rgba(8, 100, 223, .10);
}


/* BOTÓN */

.search-submit {
    height: 58px;

    padding: 0 25px;

    border-radius: 12px;

    white-space: nowrap;

    font-size: 16px;
    font-weight: 700;
}


/* ==============================
   TABLET
============================== */

@media (max-width: 1100px) {

    .search-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .search-submit {
        width: 100%;
    }

}


/* ==============================
   MÓVIL
============================== */

@media (max-width: 650px) {

    .search-panel {
        padding: 18px;
        border-radius: 18px;
    }

    .search-grid {
        grid-template-columns: 1fr;
    }

    .search-input-wrapper input {
        height: 54px;
        font-size: 14px;
    }

    .search-grid select,
    .search-submit {
        height: 54px;
    }

    .search-submit {
        width: 100%;
    }

}
/* ==========================================
   NUEVO DISEÑO TARJETA VEHÍCULO
========================================== */

.vehicle-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    overflow: hidden;

    box-shadow:
        0 5px 18px rgba(15, 40, 80, .07);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.vehicle-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 12px 30px rgba(15, 40, 80, .13);
}


/* ===============================
   IMAGEN
================================ */

.vehicle-image-container {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    background: #f3f4f6;
}

.vehicle-image-container > img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .35s ease;
}

.vehicle-card:hover
.vehicle-image-container > img {
    transform: scale(1.025);
}


/* ===============================
   CUERPO
================================ */

.vehicle-body {
    padding: 20px;
}


/* ===============================
   TÍTULO
================================ */

.vehicle-title {
    display: flex;
    align-items: center;
    gap: 8px;

    margin: 0;

    color: #0f172a;

    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
}

.vehicle-year {
    color: #0f172a;
    font-weight: 800;
}


/* ===============================
   UBICACIÓN
================================ */

.vehicle-location {
    display: flex;
    align-items: center;
    gap: 6px;

    margin-top: 8px;

    color: #64748b;

    font-size: 13px;
    font-weight: 500;
}

.vehicle-location i {
    color: #0864e8;
}


/* ==========================================
   KILOMETRAJE / TRANSMISIÓN / COMBUSTIBLE
========================================== */

.card-specs {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
 text-align: center;
    margin-top: 18px;
    padding: 17px 0;
 
    border-top: 1px solid #edf0f4;
    border-bottom: 1px solid #edf0f4;
}


/* CADA DATO */

 
.card-spec {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 0 5px;
    text-align: center;
}

/* SEPARADORES */

.card-spec:not(:last-child)::after {
    content: "";

    position: absolute;

    right: 0;
    top: 5px;

    width: 1px;
    height: calc(100% - 10px);

    background: #e7eaf0;
}


/* ICONO */

.card-spec-icon {
    display: flex;
    align-items: center;

    height: 23px;

    margin-bottom: 6px;

    color: #343a46;

    font-size: 18px;
}


/* TEXTO GRIS */

.card-spec > span {
    display: block;

    margin-bottom: 6px;

    color: #9ca3af;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .35px;

    white-space: nowrap;
}


/* VALOR */

.card-spec > strong {
    display: block;

    overflow: hidden;

    color: #252b36;

    font-size: 13px;
    font-weight: 800;

    text-overflow: ellipsis;
    white-space: nowrap;
}
 
@media (max-width: 600px) {
    .card-spec {
        padding: 0 3px;
    }

    .card-spec > span {
        font-size: 8px;
        letter-spacing: 0;
    }

    .card-spec > strong {
        font-size: 11px;
    }

    .card-spec-icon {
        font-size: 16px;
    }
}

/* ===============================
   PRECIO
================================ */

.vehicle-price {
    margin-top: 17px;
    margin-bottom: 16px;

    color: #0864e8;

    font-size: 27px;
    font-weight: 800;

    line-height: 1;
}


/* ===============================
   BOTONES
================================ */

.vehicle-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 10px;
}

.vehicle-actions button {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    min-height: 45px;

    border-radius: 10px;

    font-family: inherit;
    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    transition: .2s ease;
}


/* CONTACTAR */

.card-contact-btn {
    border: 1px solid #0864e8 !important;

    background: #0864e8 !important;
    color: #fff !important;
}

.card-contact-btn:hover {
    background: #0755c7 !important;
    border-color: #0755c7 !important;
}


/* VER DETALLE */

.card-detail-btn {
    border: 1px solid #d4deed !important;

    background: #fff !important;
    color: #172033 !important;
}

.card-detail-btn:hover {
    border-color: #0864e8 !important;

    color: #0864e8 !important;

    background: #f7faff !important;
}


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

@media (max-width: 480px) {

    .vehicle-body {
        padding: 17px;
    }

    .vehicle-title {
        font-size: 18px;
    }

    .card-spec {
        padding: 0 8px;
    }

    .card-spec > span {
        font-size: 8px;
    }

    .card-spec > strong {
        font-size: 11px;
    }

    .card-spec-icon {
        font-size: 16px;
    }

    .vehicle-price {
        font-size: 25px;
    }

    .vehicle-actions button {
        font-size: 13px;
    }

}
/* =========================================
   BENEFICIOS MODERNOS
========================================= */
/* =========================================
   BARRA DE BENEFICIOS
========================================= */

.benefits-bar {
    position: relative;
    z-index: 5;

    background: #ffffff;

    padding: 20px 5%;

    border-bottom: 1px solid #e8edf5;
}


/* CONTENEDOR */

.benefits-container {
    width: 100%;
    max-width: 1500px;

    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    background: #ffffff;
}


/* CADA BENEFICIO */

.benefit-item {
    flex: 1;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 14px;

    min-width: 0;

    padding: 6px 20px;
}


/* ICONO */

.benefit-icon {
    flex: 0 0 48px;

    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background: #eef5ff;

    color: #0864e8;

    font-size: 20px;
}


/* TEXTO */

.benefit-item > div:last-child {
    display: flex;
    flex-direction: column;

    gap: 3px;
}

.benefit-item strong {
    color: #101828;

    font-size: 15px;
    font-weight: 800;

    line-height: 1.2;
}

.benefit-item span {
    color: #7b8495;

    font-size: 12px;
    font-weight: 500;

    line-height: 1.3;
}


/* LÍNEAS ENTRE BENEFICIOS */

.benefit-divider {
    width: 1px;
    height: 42px;

    flex: 0 0 1px;

    background: #e5eaf1;
}


/* EFECTO */

.benefit-item {
    border-radius: 13px;

    transition:
        background .2s ease,
        transform .2s ease;
}

.benefit-item:hover {
    background: #f7faff;
    transform: translateY(-2px);
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1000px) {

    .benefits-container {
        display: grid;
        grid-template-columns: 1fr 1fr;

        gap: 10px;
    }

    .benefit-divider {
        display: none;
    }

    .benefit-item {
        justify-content: flex-start;

        padding: 10px 14px;
    }

}


/* =========================================
   MÓVIL
========================================= */

@media (max-width: 600px) {

    .benefits-bar {
        padding: 14px 16px;
    }

    .benefits-container {
        grid-template-columns: 1fr 1fr;

        gap: 7px;
    }

    .benefit-item {
        padding: 8px;

        gap: 9px;
    }

    .benefit-icon {
        flex: 0 0 38px;

        width: 38px;
        height: 38px;

        border-radius: 11px;

        font-size: 16px;
    }

    .benefit-item strong {
        font-size: 12px;
    }

    .benefit-item span {
        font-size: 10px;
    }

}
/* =====================================================
   BARRA BENEFICIOS - DISEÑO COMPACTO
===================================================== */

.benefits-bar {
    background: #ffffff;
    border-bottom: 1px solid #e8edf5;
    padding: 14px 0;
}

.benefits-container {
    width: min(1440px, calc(100% - 48px));
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
}


/* BENEFICIO */

.benefit-item {
    position: relative;

    display: flex;
    align-items: center;

    gap: 13px;

    padding: 8px 28px;

    transition: .2s ease;
}

.benefit-item:hover {
    transform: translateY(-2px);
}


/* ICONO */

.benefit-icon {
    flex: 0 0 46px;

    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #eef5ff;

    border-radius: 50%;

    color: #0759e6;

    font-size: 19px;
}


/* TEXTO */

.benefit-item > div:last-child {
    display: flex;
    flex-direction: column;

    min-width: 0;
}

.benefit-item strong {
    color: #10203d;

    font-size: 14px;
    font-weight: 800;

    margin-bottom: 3px;
}

.benefit-item span {
    color: #7b8495;

    font-size: 12px;
    font-weight: 500;

    white-space: nowrap;
}


/* SEPARADORES */

.benefit-divider {
    display: none;
}

.benefit-item:not(:last-child)::after {
    content: "";

    position: absolute;

    right: 0;
    top: 50%;

    transform: translateY(-50%);

    width: 1px;
    height: 38px;

    background: #e5eaf2;
}


/* =====================================================
   VEHÍCULOS DESTACADOS
   AQUÍ QUITAMOS EL ESPACIO GRANDE
===================================================== */

#vehiculos {
    padding-top: 38px !important;
    padding-bottom: 65px;
}


/* CABECERA DESTACADOS */

#vehiculos .section-heading {
    margin-bottom: 25px;
}

#vehiculos .eyebrow {
    display: inline-block;

    margin-bottom: 6px;

    color: #0759e6;

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 2px;
}

#vehiculos .section-heading h2 {
    margin: 0;

    font-size: 36px;
    line-height: 1.1;
}


/* VER TODOS */

#vehiculos .text-button {
    padding: 10px 15px;

    border-radius: 9px;

    transition: .2s ease;
}

#vehiculos .text-button:hover {
    background: #eaf2ff;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 950px) {

    .benefits-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 5px;
    }

    .benefit-item {
        padding: 10px 18px;
    }

    .benefit-item::after {
        display: none;
    }

}


/* =====================================================
   MÓVIL
===================================================== */

@media (max-width: 600px) {

    .benefits-bar {
        padding: 10px 0;
    }

    .benefits-container {
        width: calc(100% - 24px);

        grid-template-columns: 1fr 1fr;

        gap: 5px;
    }

    .benefit-item {
        gap: 8px;

        padding: 8px 5px;
    }

    .benefit-icon {
        flex: 0 0 36px;

        width: 36px;
        height: 36px;

        font-size: 15px;
    }

    .benefit-item strong {
        font-size: 11px;
    }

    .benefit-item span {
        font-size: 9px;

        white-space: normal;
    }

    #vehiculos {
        padding-top: 25px !important;
        padding-bottom: 45px;
    }

}
/* ===== BUSCADOR AVANZADO ===== */
.advanced-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;flex-wrap:wrap}
.advanced-toggle,.advanced-clear{border:1px solid #d9e5fa;background:#eff5ff;color:#0759e6;padding:12px 17px;border-radius:12px;font-weight:750;display:inline-flex;align-items:center;gap:9px}
.advanced-toggle:hover,.advanced-clear:hover{background:#e0ecff}
.advanced-toggle[aria-expanded="true"] .fa-chevron-down{transform:rotate(180deg)}
.advanced-clear{background:transparent;color:#58677d}
.advanced-fields[hidden]{display:none!important}
.advanced-fields{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:17px;padding:18px;background:#f6f9ff;border:1px solid #e0e9f9;border-radius:16px}
.advanced-fields label{min-width:0;display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:700;color:#526079}
.advanced-fields input,.advanced-fields select{width:100%;min-width:0;min-height:46px;padding:11px;border:1px solid #dbe4f2;border-radius:10px;background:#fff;color:#10203d;font-size:14px;outline:none}
.advanced-fields input:focus,.advanced-fields select:focus{border-color:#0759e6;box-shadow:0 0 0 3px rgba(7,89,230,.12)}
.advanced-count{color:#64748b;font-size:14px;font-weight:650;margin:0 0 15px}
@media(max-width:1100px){.advanced-fields{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.advanced-fields{grid-template-columns:repeat(2,minmax(0,1fr));padding:12px;gap:10px}.advanced-actions{margin-top:12px}.advanced-toggle,.advanced-clear{min-height:46px;justify-content:center}.advanced-fields input,.advanced-fields select{font-size:16px}.search-panel{height:auto!important}.hero{min-height:0!important;background-size:cover!important}.search-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.search-grid .search-submit{grid-column:1/-1}.tabs{overflow-x:auto;scrollbar-width:thin}.tab{flex:0 0 auto}}
@media(max-width:420px){.advanced-fields{grid-template-columns:1fr}.search-grid{grid-template-columns:1fr!important}.advanced-actions{display:grid;grid-template-columns:1fr 1fr}.advanced-toggle,.advanced-clear{font-size:12px;padding:10px 7px}}

/* ===== AUTOMARKET: BUSCADOR SUPERIOR + FILTROS LATERALES ===== */
.marketplace-layout{display:grid;grid-template-columns:290px minmax(0,1fr);column-gap:25px;row-gap:22px;align-items:start;padding-top:30px;padding-bottom:45px}
.marketplace-layout #searchForm{display:contents}
.marketplace-layout .search-text-box{grid-column:1/-1;grid-row:1;background:#fff;padding:18px 22px;border-radius:18px;box-shadow:0 8px 28px rgba(20,49,101,.08);margin:0;min-width:0}
.marketplace-layout .search-text-box input{width:100%}
.marketplace-layout .sidebar-inner{grid-column:1;grid-row:2;background:#fff;border:1px solid #e2e9f5;border-radius:18px;padding:20px;box-shadow:0 10px 30px rgba(20,49,101,.07);min-width:0}
.marketplace-layout .marketplace-results{grid-column:2;grid-row:2;min-width:0}
.marketplace-layout .tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;overflow:visible}
.marketplace-layout .tab{padding:11px 6px;font-size:13px;white-space:nowrap}
.marketplace-layout .search-grid{display:grid!important;grid-template-columns:1fr!important;gap:13px}
.marketplace-layout .search-grid .search-submit{grid-column:1!important;width:100%}
.marketplace-layout .advanced-actions{display:grid;grid-template-columns:1fr;gap:8px}
.marketplace-layout .advanced-actions button{justify-content:center;width:100%}
.marketplace-layout .advanced-fields{grid-template-columns:1fr!important;margin-top:12px;padding:12px;gap:12px}
.marketplace-layout .sidebar-inner label{min-width:0}
.marketplace-layout .sidebar-inner input,.marketplace-layout .sidebar-inner select{width:100%;max-width:100%;min-width:0}
.marketplace-layout #vehiculos{width:100%;padding:0!important;margin:0!important}
.marketplace-layout #vehiculos .vehicle-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.marketplace-layout #vehiculos .section-heading{align-items:center;gap:10px}
.marketplace-layout #vehiculos .section-heading h2{font-size:clamp(23px,2.5vw,35px)}
.marketplace-layout .sidebar-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:17px;font-size:17px;color:#10203d}
.marketplace-layout .sidebar-heading i{color:#0759e6;margin-right:5px}
#closeMobileFilters,.mobile-filter-bar{display:none}
@media(max-width:1250px){.marketplace-layout #vehiculos .vehicle-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:850px){
.marketplace-layout{grid-template-columns:1fr;gap:16px;padding-top:18px}
.marketplace-layout .search-text-box{grid-column:1;grid-row:1;padding:14px}
.marketplace-layout .marketplace-results{grid-column:1;grid-row:2}
.marketplace-layout .sidebar-inner{display:none;position:fixed;inset:0 auto 0 0;width:min(360px,92vw);height:100dvh;overflow-y:auto;z-index:110;padding:20px;border-radius:0 20px 20px 0;box-shadow:0 0 0 100vmax rgba(5,19,47,.55);overscroll-behavior:contain}
.marketplace-layout .sidebar-inner.mobile-open{display:block}
.mobile-filter-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;font-size:13px;color:#66758d}
.mobile-filter-bar button{border:0;background:#0759e6;color:#fff;padding:12px 18px;border-radius:11px;font-weight:750;white-space:nowrap}
#closeMobileFilters{display:inline-flex;border:0;background:#eff5ff;border-radius:9px;padding:10px}
.marketplace-layout #vehiculos .vehicle-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

#closeMobileFilters,.mobile-filter-bar{display:none}
 
}
@media(max-width:550px){.marketplace-layout #vehiculos .vehicle-grid{grid-template-columns:1fr}.marketplace-layout #vehiculos .section-heading{align-items:flex-start}.marketplace-layout #vehiculos .section-heading h2{font-size:24px}.marketplace-layout .search-text-box{padding:12px}.marketplace-layout{padding-bottom:20px}}

/* ===== PORTADA AUTOMARKET CORREGIDA ===== */
.hero{position:relative;min-height:570px;background-size:cover!important;background-position:center center;background-repeat:no-repeat;isolation:isolate}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,15,43,.42) 0%,rgba(2,15,43,.18) 48%,transparent 85%);z-index:-1;pointer-events:none}
.hero-content{min-height:570px;display:flex;align-items:center;padding-top:52px;padding-bottom:52px}
.hero-copy{width:min(680px,100%);max-width:680px}
.hero-copy p{max-width:600px;line-height:1.55;margin:20px 0 0}
.hero-buttons{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:28px}
.hero-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:13px 22px;border-radius:12px;font-size:15px;font-weight:750;text-decoration:none;transition:transform .2s,background .2s;cursor:pointer}
.hero-btn:hover{transform:translateY(-2px)}
.hero-btn-primary{background:#0759e6;color:#fff;border:1px solid #0759e6;box-shadow:0 10px 25px rgba(7,89,230,.25)}
.hero-btn-outline{background:rgba(255,255,255,.10);color:#fff;border:1px solid rgba(255,255,255,.65);backdrop-filter:blur(8px)}
.hero-report{display:flex;align-items:center;gap:14px;width:min(450px,100%);padding:15px 17px;margin-top:25px;background:rgba(5,28,68,.72);border:1px solid rgba(255,255,255,.22);border-radius:15px;color:#fff;text-decoration:none;backdrop-filter:blur(10px);transition:background .2s}
.hero-report:hover{background:rgba(7,55,120,.9)}
.hero-report-icon{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:12px;background:rgba(55,151,255,.23);color:#8cd8ff;font-size:21px}
.hero-report strong,.hero-report small{display:block}.hero-report strong{font-size:14px}.hero-report small{font-size:12px;color:#d9e8ff;margin-top:5px;line-height:1.4}
.hero-report-arrow{margin-left:auto;color:#85cbff}
#buscar-vehiculos{scroll-margin-top:90px}
@media(max-width:850px){.hero{min-height:520px}.hero-content{min-height:520px;padding-top:55px;padding-bottom:55px}.hero-copy{max-width:580px}}
@media(max-width:700px){.hero{min-height:0!important;background-size:cover!important;background-position:center bottom!important}.hero-content{min-height:550px;padding:44px 0 35px;align-items:flex-start}.hero-overlay{background:linear-gradient(90deg,rgba(2,15,43,.55),rgba(2,15,43,.12))}.hero-copy h1{font-size:clamp(34px,9vw,43px)}.hero-copy p{font-size:15px}.hero-buttons{gap:10px;margin-top:23px}.hero-btn{flex:1 1 175px;font-size:13px;padding:12px 10px;min-height:49px}.hero-report{margin-top:20px;padding:12px}.hero-report strong{font-size:13px}.hero-report small{font-size:11px}}
@media(max-width:390px){.hero-content{min-height:570px}.hero-buttons{flex-direction:column;align-items:stretch}.hero-btn{flex:auto;width:100%}}
/* PORTADA */
.hero {
    min-height: 400px;
    height: auto;
}

.hero-content {
    padding-top: 35px;
    padding-bottom: 35px;
}

.hero-copy h1 {
    font-size: clamp(34px, 4vw, 58px);
    line-height: 1.08;
}

/* BENEFICIOS */
.benefits-bar {
    padding: 12px 20px;
}

.benefit-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0755d9;
    font-size: 20px;
}

/* BUSCADOR */
.marketplace-layout {
    margin-top: 18px;
}

.search-panel {
    padding: 16px;
}

.search-text-box {
    margin-bottom: 12px;
}

.search-input-wrapper {
    min-height: 48px;
}

/* DESTACADOS */
.marketplace-results .section {
    padding-top: 8px;
}

@media (max-width: 768px) {
    .hero {
        min-height: 420px;
    }

    .hero-content {
        padding: 30px 18px;
    }

    .marketplace-layout {
        margin-top: 12px;
    }
}
/* =====================================
   AUTOMARKET - 2 VEHÍCULOS EN MÓVIL
===================================== */

@media (max-width: 768px) {

    /* Dos columnas */
    .vehicle-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100%;
    }

    /* Tarjetas */
    .vehicle-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        overflow: hidden;
    }

    /* Fotografías */
    .vehicle-card img {
        width: 100%;
        height: 125px;
        object-fit: cover;
    }

    /* Información */
    .vehicle-card h3 {
        font-size: 13px !important;
        line-height: 1.3;
    }

    /* Precio */
    .vehicle-card .price {
        font-size: 17px !important;
        font-weight: 800;
    }

    /* Botones */
    .vehicle-card .btn {
        font-size: 11px !important;
        padding: 9px 5px !important;
    }

    /* Contenedor */
    .marketplace-results {
        min-width: 0;
        width: 100%;
    }

    #vehiculos {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ==========================================
   AUTOMARKET - TARJETAS RESPONSIVE
   2 VEHÍCULOS POR FILA
========================================== */

@media (max-width: 768px) {

    .vehicle-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        align-items: stretch;
    }

    .vehicle-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column;
        overflow: hidden !important;
        border-radius: 14px !important;
    }

    /* Corregir el espacio vacío de la fotografía */
    .vehicle-card .vehicle-image,
    .vehicle-card .vehicle-image-wrapper,
    .vehicle-card .vehicle-photo {
        height: 125px !important;
        min-height: 0 !important;
        aspect-ratio: auto !important;
        overflow: hidden;
    }

    .vehicle-card .vehicle-image img,
    .vehicle-card .vehicle-image-wrapper img,
    .vehicle-card .vehicle-photo img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block;
    }

    /* Para imágenes directas dentro de la tarjeta */
    .vehicle-card > img {
        width: 100% !important;
        height: 125px !important;
        object-fit: cover !important;
        display: block;
    }

    /* Contenido */
    .vehicle-card .vehicle-info,
    .vehicle-card .vehicle-content,
    .vehicle-card .vehicle-body {
        padding: 10px !important;
        min-width: 0;
    }

    .vehicle-card h3 {
        font-size: 13px !important;
        line-height: 1.3 !important;
        overflow-wrap: anywhere;
    }

    /* Ocultar las tres características en móvil */
    .vehicle-card .vehicle-specs,
    .vehicle-card .vehicle-features,
    .vehicle-card .specs {
        display: none !important;
    }

    /* Precio */
    .vehicle-card .price,
    .vehicle-card .vehicle-price {
        font-size: 18px !important;
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

    /* Botones: uno debajo del otro */
    .vehicle-card .vehicle-actions,
    .vehicle-card .card-actions,
    .vehicle-card .vehicle-buttons {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 6px !important;
        width: 100% !important;
    }

    .vehicle-card .vehicle-actions > *,
    .vehicle-card .card-actions > *,
    .vehicle-card .vehicle-buttons > * {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box;
        justify-content: center;
        font-size: 11px !important;
        padding: 9px 4px !important;
        white-space: normal !important;
    }

    /* Etiqueta recién publicado */
    .vehicle-card .badge,
    .vehicle-card .vehicle-badge {
        font-size: 9px !important;
        padding: 5px 7px !important;
    }
}

/* =========================================
   AUTOMARKET - CORRECCIÓN RESPONSIVE
   ANCHO COMPLETO + IMÁGENES SIN ESPACIOS
========================================= */

@media (max-width: 768px) {

    html, body {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        overflow-x: clip;
    }

    /* QUITAR MÁRGENES LATERALES */
    .container,
    .marketplace-layout,
    .marketplace-results,
    #vehiculos {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    .marketplace-layout {
        display: block !important;
        padding: 12px !important;
    }

    .marketplace-results {
        padding: 0 !important;
    }

    #vehiculos {
        padding: 0 !important;
    }

    /* BUSCADOR */
    .search-panel {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* DOS VEHÍCULOS POR FILA */
    #vehicleGrid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100% !important;
    }

    /* TARJETAS */
    #vehicleGrid > * {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* CONTENEDOR DE LA FOTO */
    #vehicleGrid .vehicle-image,
    #vehicleGrid .vehicle-image-wrapper,
    #vehicleGrid .vehicle-photo,
    #vehicleGrid .vehicle-card-image,
    #vehicleGrid .card-image {
        width: 100% !important;
        height: 135px !important;
        min-height: 0 !important;
        max-height: 135px !important;
        padding: 0 !important;
        margin: 0 !important;
        aspect-ratio: auto !important;
        overflow: hidden !important;
        display: block !important;
    }

    /* IMAGEN */
    #vehicleGrid .vehicle-image img,
    #vehicleGrid .vehicle-image-wrapper img,
    #vehicleGrid .vehicle-photo img,
    #vehicleGrid .vehicle-card-image img,
    #vehicleGrid .card-image img {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        object-fit: cover !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* INFORMACIÓN DE LA TARJETA */
    #vehicleGrid .vehicle-info,
    #vehicleGrid .vehicle-content,
    #vehicleGrid .vehicle-body {
        padding: 10px !important;
        margin: 0 !important;
        min-width: 0 !important;
    }

    /* NOMBRE DEL VEHÍCULO */
    #vehicleGrid h3 {
        font-size: 13px !important;
        line-height: 1.35 !important;
        overflow-wrap: anywhere;
    }

    /* BOTONES SIN DESBORDAMIENTO */
    #vehicleGrid .vehicle-actions,
    #vehicleGrid .card-actions {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 7px !important;
        width: 100% !important;
    }

    #vehicleGrid .vehicle-actions > *,
    #vehicleGrid .card-actions > * {
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        font-size: 12px !important;
        padding: 10px 5px !important;
    }

}

/* CELULARES PEQUEÑOS */
@media (max-width: 380px) {
    .marketplace-layout {
        padding: 8px !important;
    }

    #vehicleGrid {
        gap: 8px !important;
    }

    #vehicleGrid .vehicle-image,
    #vehicleGrid .vehicle-image-wrapper,
    #vehicleGrid .vehicle-photo,
    #vehicleGrid .vehicle-card-image,
    #vehicleGrid .card-image {
        height: 115px !important;
        max-height: 115px !important;
    }
}

/* ========================================
   AUTOMARKET - FOTOS COMPACTAS EN MÓVIL
======================================== */

@media (max-width: 768px) {

    /* Tarjetas en dos columnas */
    #vehicleGrid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        align-items: start !important;
    }

    /* Tarjetas sin alturas forzadas */
    #vehicleGrid > * {
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        align-self: start !important;
        overflow: hidden !important;
    }

    /* Contenedores habituales de imágenes */
    #vehicleGrid .vehicle-image,
    #vehicleGrid .vehicle-photo,
    #vehicleGrid .vehicle-card-image,
    #vehicleGrid .vehicle-image-wrapper,
    #vehicleGrid .card-image,
    #vehicleGrid .image-container,
    #vehicleGrid .vehicle-media {
        height: 125px !important;
        min-height: 0 !important;
        max-height: 125px !important;
        aspect-ratio: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    /* Fotografía ajustada */
    #vehicleGrid .vehicle-image img,
    #vehicleGrid .vehicle-photo img,
    #vehicleGrid .vehicle-card-image img,
    #vehicleGrid .vehicle-image-wrapper img,
    #vehicleGrid .card-image img,
    #vehicleGrid .image-container img,
    #vehicleGrid .vehicle-media img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-height: none !important;
        object-fit: cover !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Información pegada debajo de la foto */
    #vehicleGrid .vehicle-info,
    #vehicleGrid .vehicle-body,
    #vehicleGrid .vehicle-content {
        margin-top: 0 !important;
        padding-top: 10px !important;
        min-height: 0 !important;
    }
}


/* AUTOMARKET - CORRECCIÓN TARJETAS RESPONSIVE */

.vehicle-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: auto;
    overflow: hidden;
}

.vehicle-image-container {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    min-height: 0;
    max-height: none;
    overflow: hidden;
    background: #f1f5f9;
    flex: none;
}

.vehicle-image-container > img {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    object-fit: cover;
    object-position: center;
}

.vehicle-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    height: auto;
}

/* DOS COLUMNAS EN CELULARES */
@media (max-width: 600px) {

    .vehicle-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        align-items: stretch;
    }

    .vehicle-card {
        width: 100%;
        min-width: 0;
    }

    .vehicle-image-container {
        aspect-ratio: 4 / 3;
    }

    .vehicle-body {
        padding: 10px;
    }

    .vehicle-title {
        font-size: 13px;
        line-height: 1.4;
        overflow-wrap: anywhere;
    }

    .vehicle-location {
        font-size: 11px;
    }

    .card-specs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 3px;
        width: 100%;
    }

    .card-spec {
        min-width: 0;
        overflow: hidden;
        text-align: center;
    }

    .card-spec span,
    .card-spec strong {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    }

    .card-spec span {
        font-size: 7px;
    }

    .card-spec strong {
        font-size: 10px;
    }

    .vehicle-actions {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .vehicle-actions button {
        width: 100%;
    }
}

/* ELIMINAR ESPACIO ENTRE CIUDAD Y CARACTERÍSTICAS */

.vehicle-body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start !important;
    height: auto !important;
    min-height: 0 !important;
}

.vehicle-location {
    margin-top: 5px !important;
    margin-bottom: 12px !important;
    padding-bottom: 0 !important;
}

.card-specs {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    padding-top: 12px !important;
}

/* Mantener tarjetas ordenadas */
.vehicle-title {
    margin-bottom: 5px !important;
}

/* =====================================
   AUTOMARKET - 2 COLUMNAS MÁS ANCHAS
===================================== */

@media (max-width: 768px) {

    /* Contenedores principales */
    .container,
    .marketplace-layout,
    .marketplace-results,
    #vehiculos {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* Quitar espacio lateral */
    .marketplace-layout {
        padding-left: 4px !important;
        padding-right: 4px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .marketplace-results {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Dos vehículos más anchos */
    #vehicleGrid,
    .vehicle-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 4px !important;
        width: 100% !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Tarjetas */
    #vehicleGrid > *,
    .vehicle-grid > .vehicle-card {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        border-radius: 10px !important;
        box-sizing: border-box !important;
    }

    /* Aprovechar mejor el espacio interior */
    .vehicle-body {
        padding: 8px !important;
    }

    /* Foto */
    .vehicle-image-container {
        width: 100% !important;
        aspect-ratio: 4 / 3 !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .vehicle-image-container img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    /* Características */
    .card-specs {
        gap: 2px !important;
    }
}

/* =====================================
   AUTOMARKET - REDUCIR ESPACIOS DEL PRECIO
===================================== */

/* Características del vehículo */
.vehicle-card .card-specs {
    margin-bottom: 16px !important;
    padding-bottom: 16px !important;
}

/* Precio */
.vehicle-card .vehicle-price,
.vehicle-card .price {
    margin-top: 8px !important;
    margin-bottom: 16px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Botones */
.vehicle-card .vehicle-actions {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Evitar separación automática */
.vehicle-card .vehicle-body {
    justify-content: flex-start !important;
}

/* Ajustes adicionales en celulares */
@media (max-width: 768px) {

    .vehicle-card .card-specs {
        margin-bottom: 10px !important;
        padding-bottom: 10px !important;
    }

    .vehicle-card .vehicle-price,
    .vehicle-card .price {
        margin-top: 6px !important;
        margin-bottom: 12px !important;
    }

    .vehicle-card .vehicle-actions {
        margin-top: 0 !important;
        gap: 6px !important;
    }
}


/* ============================================
   AUTOMARKET - DETALLE VEHICULAR PREMIUM
   SOLO MODAL VER DETALLES
============================================ */

/* VENTANA PRINCIPAL */
.vehicle-detail-card {
    width: min(1250px, 96vw) !important;
    max-height: 95vh !important;
    border-radius: 22px !important;
    overflow-y: auto !important;
    background: #fff;
}

/* DISTRIBUCIÓN FOTO + INFORMACIÓN */
.vehicle-detail-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr) !important;
    align-items: start;
}

/* GALERÍA SIN ESPACIO VACÍO */
.vehicle-gallery {
    padding: 16px !important;
    background: #f0f4fa !important;
    min-height: 0 !important;
    height: auto !important;
    align-self: start !important;
}

/* FOTO PRINCIPAL */
.gallery-main {
    height: 430px !important;
    border-radius: 15px !important;
    overflow: hidden;
}

.gallery-main img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* MINIATURAS */
.gallery-thumbnails {
    display: flex !important;
    gap: 8px !important;
    margin-top: 10px !important;
    padding: 0 0 4px !important;
}

.gallery-thumbnail {
    flex: 0 0 90px !important;
    height: 64px !important;
    border-radius: 9px !important;
}

/* PANEL DERECHO */
.vehicle-detail-summary {
    padding: 32px 28px 24px !important;
}

/* NOMBRE DEL VEHÍCULO */
.vehicle-detail-summary h2 {
    font-size: clamp(25px, 2.5vw, 32px) !important;
    margin: 12px 0 5px !important;
    line-height: 1.15 !important;
}

/* PRECIO */
.vehicle-detail-summary .vehicle-detail-price {
    font-size: 34px !important;
    margin: 7px 0 10px !important;
    color: #0759e6 !important;
}

/* UBICACIÓN Y FECHA PUBLICACIÓN */
.vehicle-detail-summary .vehicle-location {
    margin: 0 0 17px !important;
    font-size: 12px !important;
    line-height: 1.5;
    flex-wrap: wrap;
}

/* CARACTERÍSTICAS */
.vehicle-detail-summary .vehicle-specs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
}

.vehicle-detail-summary .vehicle-specs > div {
    min-height: 68px !important;
    padding: 10px !important;
    border-radius: 12px !important;
    background: #f7faff !important;
}

.vehicle-detail-summary .vehicle-specs i {
    font-size: 17px !important;
}

.vehicle-detail-summary .vehicle-specs strong {
    font-size: 12px !important;
}

/* VENDEDOR */
.vehicle-detail-summary .seller-card {
    margin-top: 14px !important;
    padding: 11px 13px !important;
    border-radius: 12px !important;
}

.vehicle-detail-summary .seller-avatar {
    width: 40px !important;
    height: 40px !important;
}

/* BOTONES DE CONTACTO */
.vehicle-detail-summary .detail-contact-actions {
    margin-top: 12px !important;
    gap: 9px !important;
}

.vehicle-detail-summary .detail-whatsapp,
.vehicle-detail-summary .detail-call {
    min-height: 48px !important;
    border-radius: 11px !important;
}

/* SECCIONES INFERIORES */
.vehicle-detail-extra {
    padding: 0 28px 24px !important;
}

.vehicle-detail-extra .detail-section {
    padding: 19px 0 !important;
}

.vehicle-detail-extra .detail-section h3 {
    font-size: 20px !important;
    margin-bottom: 10px !important;
}

/* FICHA TÉCNICA */
.vehicle-detail-extra .technical-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 9px !important;
}

.vehicle-detail-extra .technical-grid > div {
    padding: 11px !important;
    border-radius: 11px !important;
}

/* INFORME VEHICULAR */
.vehicle-detail-extra .detail-security {
    padding: 15px !important;
    border-radius: 14px !important;
}

/* ============================================
   RESPONSIVE TABLET / CELULAR
============================================ */

@media (max-width: 800px) {

    .vehicle-detail-modal {
        padding: 0 !important;
    }

    .vehicle-detail-card {
        width: 100% !important;
        max-height: 96vh !important;
        border-radius: 18px 18px 0 0 !important;
    }

    .vehicle-detail-layout {
        grid-template-columns: 1fr !important;
    }

    .vehicle-gallery {
        padding: 0 !important;
    }

    .gallery-main {
        height: 280px !important;
        border-radius: 0 !important;
    }

    .gallery-thumbnails {
        padding: 10px 12px !important;
        margin-top: 0 !important;
    }

    .gallery-thumbnail {
        flex-basis: 76px !important;
        height: 56px !important;
    }

    .vehicle-detail-summary {
        padding: 22px 16px 20px !important;
    }

    .vehicle-detail-summary h2 {
        font-size: 25px !important;
    }

    .vehicle-detail-summary .vehicle-detail-price {
        font-size: 29px !important;
    }

    .vehicle-detail-summary .vehicle-specs {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .vehicle-detail-summary .vehicle-specs > div {
        min-height: 65px !important;
        padding: 9px !important;
    }

    .vehicle-detail-extra {
        padding: 0 16px 24px !important;
    }

    .vehicle-detail-extra .technical-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .vehicle-detail-extra .vehicle-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .vehicle-detail-extra .detail-security {
        grid-template-columns: 40px minmax(0, 1fr) !important;
    }

    .vehicle-detail-extra .detail-security a {
        grid-column: 1 / -1 !important;
        text-align: center;
    }
}

@media (max-width: 420px) {

    .gallery-main {
        height: 235px !important;
    }

    .vehicle-detail-summary h2 {
        font-size: 23px !important;
    }

    .vehicle-detail-extra .technical-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}



/* ================================================
   AUTOMARKET - PUBLICAR VEHÍCULO FULL SCREEN
================================================ */

/* Ajusta estos selectores a los nombres reales
   de tu modal si son diferentes. */

#publishModal,
#publicarModal,
.modal-publicar {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    z-index: 9999 !important;
    background: #f4f7fc !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
}

/* Contenedor principal */
#publishModal .modal-content,
#publicarModal .modal-content,
.modal-publicar .modal-content {
    width: 100% !important;
    max-width: none !important;
    min-height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #f4f7fc !important;
    overflow: visible !important;
}

/* Encabezado */
#publishModal .modal-header,
#publicarModal .modal-header,
.modal-publicar .modal-header {
    position: sticky;
    top: 0;
    z-index: 20;
    padding: 22px clamp(20px, 5vw, 80px) !important;
    background: #fff !important;
    border-bottom: 1px solid #e5eaf3;
    box-shadow: 0 3px 14px rgba(15, 35, 70, .04);
}

/* Área del formulario */
#publishModal .modal-body,
#publicarModal .modal-body,
.modal-publicar .modal-body {
    width: 100% !important;
    max-width: 1500px !important;
    margin: 0 auto !important;
    padding: 32px 40px 70px !important;
    overflow: visible !important;
}

/* Secciones */
#publishModal fieldset,
#publicarModal fieldset,
.modal-publicar fieldset {
    border: 1px solid #e5ebf5;
    background: #fff;
    border-radius: 18px;
    padding: 24px;
    margin-bottom: 22px;
    box-shadow: 0 5px 22px rgba(20, 45, 90, .035);
}

/* Títulos de sección */
#publishModal legend,
#publicarModal legend,
.modal-publicar legend {
    font-weight: 800;
    font-size: 16px;
    color: #122b51;
    padding: 0 8px;
}

/* Campos */
#publishModal input,
#publishModal select,
#publishModal textarea,
#publicarModal input,
#publicarModal select,
#publicarModal textarea,
.modal-publicar input,
.modal-publicar select,
.modal-publicar textarea {
    border: 1px solid #dce5f2;
    border-radius: 11px;
    background: #fff;
    transition: border-color .2s, box-shadow .2s;
}

/* No alterar controles tipo checkbox */
#publishModal input:focus,
#publishModal select:focus,
#publishModal textarea:focus,
#publicarModal input:focus,
#publicarModal select:focus,
#publicarModal textarea:focus {
    outline: none;
    border-color: #1769f5;
    box-shadow: 0 0 0 3px rgba(23,105,245,.1);
}

/* Pantallas pequeñas */
@media (max-width: 768px) {
    #publishModal .modal-body,
    #publicarModal .modal-body,
    .modal-publicar .modal-body {
        padding: 18px 14px 40px !important;
    }

    #publishModal .modal-header,
    #publicarModal .modal-header,
    .modal-publicar .modal-header {
        padding: 16px !important;
    }

    #publishModal fieldset,
    #publicarModal fieldset,
    .modal-publicar fieldset {
        padding: 16px;
        border-radius: 14px;
    }
}


/* ==========================================
   AUTOMARKET - PUBLICAR VEHÍCULO PREMIUM
   MODAL A PANTALLA COMPLETA
========================================== */

#publishModal:not(.hidden) {
    display: flex !important;
}

#publishModal {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 99999 !important;
    background: #f3f6fb !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    overflow: hidden !important;
}

#publishModal.hidden {
    display: none !important;
}

/* Contenedor principal */
#publishModal .publish-modal-card {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: #f3f6fb !important;
    box-shadow: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin;
}

/* Cabecera fija */
#publishModal .publish-header {
    position: sticky !important;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px clamp(20px, 5vw, 85px) !important;
    background: #fff !important;
    border-bottom: 1px solid #e4eaf3;
    box-shadow: 0 4px 16px rgba(20, 40, 75, .04);
}

/* Icono de cabecera */
#publishModal .publish-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, #0866ff, #0043c6);
    color: #fff;
    font-size: 24px;
}

#publishModal .publish-header h2 {
    font-size: clamp(22px, 2vw, 30px);
    font-weight: 800;
    color: #102345;
    margin: 3px 0;
}

#publishModal .publish-header p {
    color: #71809a;
    font-size: 13px;
    margin: 0;
}

/* Botón cerrar */
#publishModal > .publish-modal-card > .modal-close {
    position: fixed !important;
    top: 24px !important;
    right: 32px !important;
    z-index: 50 !important;
    width: 42px;
    height: 42px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f7f9fc;
    color: #253755;
    font-size: 26px;
    cursor: pointer;
}

/* Formulario */
#publishModal .publish-form {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    column-gap: 24px !important;
    row-gap: 20px !important;
    width: min(100% - 80px, 1500px) !important;
    max-width: 1500px !important;
    margin: 35px auto 65px !important;
    padding: 32px !important;
    background: #fff;
    border: 1px solid #e8edf5;
    border-radius: 20px;
    box-shadow: 0 8px 35px rgba(17, 40, 80, .045);
}

/* Títulos de secciones */
#publishModal .form-section-title {
    grid-column: 1 / -1 !important;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 0 0 14px;
    color: #14294a;
    font-size: 17px;
    font-weight: 800;
    border-bottom: 1px solid #e8edf5;
}

#publishModal .form-section-title:first-child {
    margin-top: 0;
}

#publishModal .form-section-title i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    color: #0866ff;
    background: #edf4ff;
}

/* Campos */
#publishModal .publish-form > label:not(.checkbox-field) {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
    color: #344666;
    font-size: 13px;
    font-weight: 600;
}

#publishModal .publish-form input:not([type="checkbox"]):not([type="file"]),
#publishModal .publish-form select,
#publishModal .publish-form textarea {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 49px;
    padding: 12px 15px;
    border: 1px solid #dce5f1;
    border-radius: 11px;
    outline: none;
    background: #fff;
    color: #14294a;
    font: inherit;
    font-size: 14px;
    transition: border-color .2s, box-shadow .2s;
}

#publishModal .publish-form input:focus,
#publishModal .publish-form select:focus,
#publishModal .publish-form textarea:focus {
    border-color: #0866ff;
    box-shadow: 0 0 0 4px rgba(8, 102, 255, .09);
}

#publishModal .publish-form textarea {
    min-height: 130px;
    resize: vertical;
}

#publishModal .publish-form .full {
    grid-column: 1 / -1 !important;
}

/* Fotografías */
#publishModal .upload-area {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    min-height: 170px;
    padding: 24px;
    border: 2px dashed #a8c6fa !important;
    border-radius: 16px;
    background: #f5f9ff;
    text-align: center;
    cursor: pointer;
}

#publishModal .upload-area > i {
    color: #0866ff;
    font-size: 32px;
}

#publishModal .image-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 14px;
}

/* Checkbox */
#publishModal .checkbox-field {
    display: flex;
    align-items: center;
    gap: 10px;
    align-self: center;
    font-size: 14px;
    font-weight: 600;
}

#publishModal .checkbox-field input {
    width: 18px;
    height: 18px;
    accent-color: #0866ff;
}

/* Botones */
#publishModal .publish-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    padding-top: 24px;
    margin-top: 12px;
    border-top: 1px solid #e8edf5;
}

#publishModal .publish-actions .btn {
    min-height: 48px;
    padding: 12px 26px;
    border-radius: 11px;
    font-weight: 700;
    cursor: pointer;
}

#publishModal .publish-actions .btn-primary {
    background: #0866ff;
    color: #fff;
}

#publishModal .publish-actions .btn-cancel {
    background: #f0f3f8;
    color: #40516b;
}

/* Tablets */
@media (max-width: 1000px) {
    #publishModal .publish-form {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        width: calc(100% - 40px) !important;
        padding: 24px !important;
    }
}

/* Celulares */
@media (max-width: 650px) {
    #publishModal .publish-header {
        padding: 16px 60px 16px 16px !important;
        gap: 12px;
    }

    #publishModal .publish-header-icon {
        width: 44px;
        height: 44px;
        font-size: 19px;
    }

    #publishModal .publish-header h2 {
        font-size: 19px;
    }

    #publishModal .publish-header p {
        font-size: 11px;
    }

    #publishModal > .publish-modal-card > .modal-close {
        top: 17px !important;
        right: 12px !important;
        width: 36px;
        height: 36px;
    }

    #publishModal .publish-form {
        grid-template-columns: minmax(0, 1fr) !important;
        width: calc(100% - 24px) !important;
        margin: 14px auto 30px !important;
        padding: 18px !important;
        gap: 15px !important;
        border-radius: 14px;
    }

    #publishModal .form-section-title {
        font-size: 15px;
    }

    #publishModal .publish-actions {
        flex-direction: column-reverse;
    }

    #publishModal .publish-actions .btn {
        width: 100%;
    }
}

/* CONTROLES OCULTOS AL INICIO */
.producto-galeria .galeria-flecha,
.producto-galeria .galeria-puntos {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity .25s ease, visibility .25s ease;
}

/* MOSTRAR AL PASAR EL MOUSE */
@media (hover: hover) {
    .producto-galeria:hover .galeria-flecha,
    .producto-galeria:hover .galeria-puntos {
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* EN CELULARES MOSTRAR LOS CONTROLES */
@media (hover: none) {
    .producto-galeria .galeria-flecha,
    .producto-galeria .galeria-puntos {
        opacity: 1 !important;
        visibility: visible !important;
    }
}


/* GALERÍA EN TARJETAS */
.vehicle-image-container {
    position: relative;
    overflow: hidden;
}

.card-gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,.95);
    color: #075be8;
    cursor: pointer;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, visibility .2s;
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
}

.card-gallery-prev { left: 10px; }
.card-gallery-next { right: 10px; }

.card-gallery-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 5;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, visibility .2s;
}

.card-gallery-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,.65);
}

.card-gallery-dot.active {
    background: #075be8;
    width: 17px;
    border-radius: 8px;
}

/* SOLO MOSTRAR CUANDO PASAS EL MOUSE */
.vehicle-image-container:hover .card-gallery-arrow,
.vehicle-image-container:hover .card-gallery-dots {
    opacity: 1;
    visibility: visible;
}

.card-gallery-arrow:hover {
    background: #075be8;
    color: white;
}

/* CELULARES */
@media (hover: none) {
    .card-gallery-arrow,
    .card-gallery-dots {
        opacity: 1;
        visibility: visible;
    }
}

/* GALERÍA DE VEHÍCULOS */

.vehicle-image-container {
    position: relative;
    overflow: hidden;
}

/* FLECHAS */
.vehicle-image-container .card-gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    width: 34px;
    height: 34px;

    border: none;
    border-radius: 50%;

    background: rgba(255, 255, 255, .95);
    color: #075be8;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    z-index: 10;

    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}

.vehicle-image-container .card-gallery-prev {
    left: 10px;
}

.vehicle-image-container .card-gallery-next {
    right: 10px;
}

/* PUNTOS */
.vehicle-image-container .card-gallery-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);

    display: flex;
    gap: 6px;

    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}

.vehicle-image-container .card-gallery-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,.7);
}

.vehicle-image-container .card-gallery-dot.active {
    width: 17px;
    border-radius: 10px;
    background: #075be8;
}

/* MOSTRAR SOLO AL PASAR EL MOUSE */
@media (hover: hover) {
    .vehicle-image-container:hover .card-gallery-arrow,
    .vehicle-image-container:hover .card-gallery-dots,
    .vehicle-image-container:focus-within .card-gallery-arrow,
    .vehicle-image-container:focus-within .card-gallery-dots {
        opacity: 1;
        visibility: visible;
    }
}

/* EN CELULARES */
@media (hover: none) {
    .vehicle-image-container .card-gallery-arrow,
    .vehicle-image-container .card-gallery-dots {
        opacity: 1;
        visibility: visible;
    }
}


/* TODA LA TARJETA ES CLICABLE */
.vehicle-card {
    cursor: pointer;
}

/* INDICAR QUE LAS FLECHAS SON INDEPENDIENTES */
.vehicle-card .card-gallery-arrow {
    cursor: pointer;
}

/* MANTENER LOS BOTONES CON SU PROPIO CURSOR */
.vehicle-card .card-contact-btn,
.vehicle-card .card-detail-btn {
    cursor: pointer;
}

/* EFECTO SUAVE AL PASAR EL MOUSE */
@media (hover: hover) {
    .vehicle-card {
        transition: transform .2s ease, box-shadow .2s ease;
    }

    .vehicle-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 28px rgba(0, 50, 120, .12);
    }
}
 /* ======================================
   CORREGIR MODAL DETALLE VEHÍCULO
====================================== */
 
 

 /* ==========================================
   AUTOMARKET - CORRECCIÓN MODAL DETALLE
========================================== */

#vehicleDetailModal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    padding: 15px !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    background: transparent !important;
    filter: none !important;
    backdrop-filter: none !important;
}

/* Respetar el estado cerrado */
#vehicleDetailModal.hidden {
    display: none !important;
}

/* Fondo oscuro */
#vehicleDetailModal .vehicle-detail-backdrop {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    background: rgba(10, 20, 40, 0.65) !important;

    z-index: 0 !important;
    border-radius: 0 !important;
}

/* Contenedor real del vehículo */
#vehicleDetailModal .vehicle-detail-card {
    position: relative !important;

    width: min(1400px, 100%) !important;
    max-width: 1400px !important;
    height: min(900px, 95dvh) !important;
    max-height: 95dvh !important;

    margin: 0 auto !important;
    padding: 0 !important;

    background: #ffffff !important;
    border-radius: 16px !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    z-index: 1 !important;

    filter: none !important;
    backdrop-filter: none !important;

    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.25);
}

/* Galería e información lado a lado */
#vehicleDetailModal .vehicle-detail-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr) !important;
    gap: 24px !important;
    align-items: start !important;
    padding: 24px !important;
}

/* Galería */
#vehicleDetailModal .vehicle-gallery {
    min-width: 0 !important;
    width: 100% !important;
}

/* Imagen principal */
#vehicleDetailModal .gallery-main {
    position: relative !important;
    width: 100% !important;
    height: 470px !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    background: #f1f5f9 !important;
}

#vehicleDetailModal .gallery-main img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* Información del vehículo */
#vehicleDetailModal .vehicle-detail-summary {
    min-width: 0 !important;
    width: 100% !important;
}

/* Botón cerrar */
#vehicleDetailModal .vehicle-detail-close {
    position: absolute !important;
    top: 18px !important;
    right: 18px !important;
    z-index: 20 !important;
}

/* Descripción y ficha técnica */
#vehicleDetailModal .vehicle-detail-extra {
    padding: 0 24px 24px !important;
}

/* Tablet y móvil */
@media (max-width: 900px) {

    #vehicleDetailModal {
        padding: 0 !important;
    }

    #vehicleDetailModal .vehicle-detail-card {
        width: 100% !important;
        max-width: none !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
    }

    #vehicleDetailModal .vehicle-detail-layout {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
        padding: 14px !important;
    }

    #vehicleDetailModal .gallery-main {
        height: 340px !important;
    }

    #vehicleDetailModal .vehicle-detail-extra {
        padding: 0 14px 24px !important;
    }
}

@media (max-width: 480px) {

    #vehicleDetailModal .gallery-main {
        height: 260px !important;
    }
}
/* ==========================================
   AUTOMARKET - DETALLE A PANTALLA COMPLETA
========================================== */

/* Modal ocupa toda la pantalla */
#vehicleDetailModal {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 99999 !important;

    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;
}

#vehicleDetailModal.hidden {
    display: none !important;
}

/* Tarjeta completa */
#vehicleDetailModal .vehicle-detail-card {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    height: 100dvh !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;

    background: #ffffff !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    box-shadow: none !important;
}

/* Galería más ancha que la información */
#vehicleDetailModal .vehicle-detail-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr) !important;
    gap: 30px !important;
    align-items: start !important;

    padding: 22px 30px !important;
}

/* Contenedor de fotografías */
#vehicleDetailModal .vehicle-gallery {
    width: 100% !important;
    min-width: 0 !important;
    padding: 14px !important;

    background: #f1f5f9 !important;
    border-radius: 12px !important;
}

/* Imagen principal mucho más grande */
#vehicleDetailModal .gallery-main {
    position: relative !important;
    width: 100% !important;
    height: min(72dvh, 760px) !important;
    min-height: 450px !important;

    background: #eef2f7 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
}

/* Imagen completa sin recortar */
#vehicleDetailModal .gallery-main > img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
}

/* Miniaturas */
#vehicleDetailModal .gallery-thumbnails {
    display: flex !important;
    gap: 10px !important;
    margin-top: 12px !important;
    overflow-x: auto !important;
    padding-bottom: 4px !important;
}

/* Información derecha */
#vehicleDetailModal .vehicle-detail-summary {
    width: 100% !important;
    min-width: 0 !important;
    padding: 15px 10px 0 0 !important;
}

/* Descripción y ficha técnica */
#vehicleDetailModal .vehicle-detail-extra {
    width: 100% !important;
    padding: 15px 30px 35px !important;
}

/* Botón cerrar */
#vehicleDetailModal .vehicle-detail-close {
    position: fixed !important;
    top: 18px !important;
    right: 25px !important;
    z-index: 100 !important;
}

/* ==========================================
   RESPONSIVE - TABLET
========================================== */

@media (max-width: 1000px) {

    #vehicleDetailModal .vehicle-detail-layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 18px !important;
        padding: 18px !important;
    }

    #vehicleDetailModal .gallery-main {
        height: 55dvh !important;
        min-height: 350px !important;
    }

    #vehicleDetailModal .vehicle-detail-extra {
        padding: 15px 18px 30px !important;
    }
}

/* ==========================================
   RESPONSIVE - CELULAR
========================================== */

@media (max-width: 700px) {

    #vehicleDetailModal .vehicle-detail-layout {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        padding: 10px !important;
    }

    #vehicleDetailModal .vehicle-gallery {
        padding: 6px !important;
    }

    #vehicleDetailModal .gallery-main {
        height: 45dvh !important;
        min-height: 260px !important;
    }

    #vehicleDetailModal .vehicle-detail-summary {
        padding: 10px 5px !important;
    }

    #vehicleDetailModal .vehicle-detail-extra {
        padding: 10px 15px 30px !important;
    }

    #vehicleDetailModal .vehicle-detail-close {
        top: 12px !important;
        right: 12px !important;
    }
}

/* ==========================================
   AUTOMARKET - IMAGEN SIN ESPACIOS GRISES
========================================== */

@media (min-width: 1001px) {

    /* Contenedor de la galería */
    #vehicleDetailModal .vehicle-gallery {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        background: transparent !important;
    }

    /* Recuadro de imagen principal */
    #vehicleDetailModal .gallery-main {
        position: relative !important;

        width: 100% !important;
        height: 75dvh !important;
        min-height: 500px !important;

        padding: 0 !important;
        margin: 0 !important;

        overflow: hidden !important;
        background: #111827 !important;
        border-radius: 10px !important;
    }

    /* La imagen llena todo el recuadro */
    #vehicleDetailModal .gallery-main img {
        display: block !important;

        width: 100% !important;
        height: 100% !important;

        max-width: none !important;
        max-height: none !important;

        object-fit: cover !important;
        object-position: center !important;

        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }

    /* Miniaturas debajo de la imagen */
    #vehicleDetailModal .gallery-thumbnails {
        display: flex !important;
        gap: 10px !important;

        padding: 12px 8px !important;
        margin: 0 !important;

        background: #fff !important;
        overflow-x: auto !important;
    }
}

/* CELULARES */
@media (max-width: 1000px) {

    #vehicleDetailModal .vehicle-gallery {
        padding: 0 !important;
    }

    #vehicleDetailModal .gallery-main {
        width: 100% !important;
        height: 45dvh !important;
        min-height: 260px !important;
        padding: 0 !important;
        overflow: hidden !important;
    }

    #vehicleDetailModal .gallery-main img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center !important;
    }
}

/* ==========================================
   AUTOMARKET - CORREGIR GALERÍA RESPONSIVE
========================================== */

@media (max-width: 768px) {

    /* Modal a pantalla completa */
    #vehicleDetailModal {
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100dvh !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Tarjeta ocupa todo el celular */
    #vehicleDetailModal .vehicle-detail-card {
        width: 100% !important;
        max-width: none !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }

    /* Una sola columna */
    #vehicleDetailModal .vehicle-detail-layout {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
        padding: 0 !important;
    }

    /* Galería ocupa todo el ancho */
    #vehicleDetailModal .vehicle-gallery {
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    /* Contenedor de la fotografía */
    #vehicleDetailModal .gallery-main {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: 4 / 3;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        border-radius: 0 !important;
        background: #edf2f7 !important;
    }

    /* Mostrar el vehículo completo */
    #vehicleDetailModal .gallery-main img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        object-position: center !important;
        border-radius: 0 !important;
    }

    /* Miniaturas */
    #vehicleDetailModal .gallery-thumbnails {
        display: flex !important;
        gap: 8px !important;
        padding: 10px !important;
        margin: 0 !important;
        overflow-x: auto !important;
    }

    /* Información debajo de la imagen */
    #vehicleDetailModal .vehicle-detail-summary {
        width: 100% !important;
        min-width: 0 !important;
        padding: 16px !important;
        box-sizing: border-box !important;
    }

    /* Botón cerrar */
    #vehicleDetailModal .vehicle-detail-close {
        position: fixed !important;
        top: 12px !important;
        right: 12px !important;
        z-index: 100 !important;
    }
}

/* COMPARTIR VEHÍCULO */

.detail-share-actions {
    width: 100%;
    margin-top: 12px;
}

.btn-compartir-vehiculo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px;
    border-radius: 10px;
    border: 1px solid #cdddf8;
    background: #edf4ff;
    color: #0759e8;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s;
}

.btn-compartir-vehiculo:hover {
    background: #dceaff;
    border-color: #0759e8;
}

.btn-compartir-vehiculo i {
    font-size: 17px;
}


/* ====================================
   BUSCADOR MODERNO AUTOMARKET
==================================== */

.modern-search {
    width: 100%;
    background: #fff;
    border: 1px solid #edf1f7;
    border-radius: 22px;
    padding: 24px;
    box-shadow: 0 12px 35px rgba(16, 45, 90, .06);
}

.modern-search-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.modern-search-icon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eaf2ff;
    color: #0865f5;
    border-radius: 14px;
    font-size: 21px;
}

.modern-search-heading h3 {
    font-size: 19px;
    font-weight: 800;
    color: #102347;
    margin: 0 0 4px;
}

.modern-search-heading p {
    font-size: 13px;
    color: #78869d;
    margin: 0;
}

.modern-search-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #233653;
    margin-bottom: 9px;
}

.modern-search-field {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 7px 7px 7px 18px;
    background: #f8faff;
    border: 1.5px solid #dce6f5;
    border-radius: 15px;
    transition: .25s ease;
}

.modern-search-field:focus-within {
    background: #fff;
    border-color: #0865f5;
    box-shadow: 0 0 0 4px rgba(8, 101, 245, .09);
}

.search-field-icon {
    color: #0865f5;
    font-size: 19px;
}

.modern-search-field input {
    flex: 1;
    min-width: 0;
    width: 100%;
    height: 46px;
    padding: 0;
    background: transparent;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    font-size: 15px;
    color: #142442;
}

.modern-search-field input::placeholder {
    color: #9ba9be;
}

.modern-search-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 0 27px;
    border: none;
    border-radius: 11px;
    background: #0865f5;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: .2s;
}

.modern-search-button:hover {
    background: #004ed0;
    transform: translateY(-1px);
}

.modern-search-popular {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.modern-search-popular > span {
    color: #8995a8;
    font-size: 12px;
}

.modern-search-popular button {
    background: #f2f6fc;
    border: 1px solid #e6edf7;
    color: #49607d;
    border-radius: 30px;
    padding: 7px 13px;
    font-size: 12px;
    cursor: pointer;
}

.modern-search-popular button:hover {
    background: #e7f0ff;
    color: #0865f5;
}

/* RESPONSIVE */

@media (max-width: 600px) {
    .modern-search {
        padding: 16px;
        border-radius: 17px;
    }

    .modern-search-heading h3 {
        font-size: 16px;
    }

    .modern-search-heading p {
        font-size: 12px;
    }

    .modern-search-field {
        min-height: 56px;
        gap: 9px;
        padding: 6px 6px 6px 12px;
    }

    .modern-search-field input {
        font-size: 13px;
    }

    .modern-search-button {
        min-height: 43px;
        padding: 0 14px;
    }

    .modern-search-button span {
        display: none;
    }

    .modern-search-popular {
        gap: 6px;
    }
}

/* BUSCADOR EN TODA LA FILA SUPERIOR */

#buscar-vehiculos {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

#buscar-vehiculos > .modern-search {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin: 0;
}

#buscar-vehiculos > .search-panel {
    grid-column: 1;
    min-width: 0;
}

#buscar-vehiculos > .marketplace-results {
    grid-column: 2;
    min-width: 0;
}

@media (max-width: 768px) {
    #buscar-vehiculos {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    #buscar-vehiculos > .modern-search,
    #buscar-vehiculos > .search-panel,
    #buscar-vehiculos > .marketplace-results {
        grid-column: 1;
        width: 100%;
        min-width: 0;
    }
}

/* =====================================
   CORRECCIÓN DE DISTRIBUCIÓN AUTOMARKET
===================================== */

#buscar-vehiculos.marketplace-layout {
    display: grid !important;
    grid-template-columns: 280px minmax(0, 1fr) !important;
    column-gap: 24px !important;
    row-gap: 24px !important;
    align-items: start !important;
    padding-top: 30px !important;
}

/* BUSCADOR: TODA LA FILA SUPERIOR */

#buscar-vehiculos > .modern-search {
    grid-column: 1 / -1 !important;
    grid-row: 1;
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    margin: 0 !important;
    box-sizing: border-box;
    padding: 24px 30px;
}

/* CAMPO DE BÚSQUEDA */

#buscar-vehiculos .modern-search-field {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
}

#buscar-vehiculos .modern-search-field input {
    flex: 1;
    width: 100%;
    min-width: 0;
}

/* FILTROS: IZQUIERDA */

#buscar-vehiculos > .search-panel {
    grid-column: 1 !important;
    grid-row: 2;
    width: 100% !important;
    min-width: 0;
    margin: 0 !important;
}

/* VEHÍCULOS: DERECHA */

#buscar-vehiculos > .marketplace-results {
    grid-column: 2 !important;
    grid-row: 2;
    width: 100% !important;
    min-width: 0;
    margin: 0 !important;
}

/* RESPONSIVE */

@media (max-width: 768px) {

    #buscar-vehiculos.marketplace-layout {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 16px !important;
        padding-top: 20px !important;
    }

    #buscar-vehiculos > .modern-search {
        grid-column: 1 !important;
        grid-row: 1;
        padding: 18px 15px;
    }

    #buscar-vehiculos > .search-panel {
        grid-column: 1 !important;
        grid-row: 2;
    }

    #buscar-vehiculos > .marketplace-results {
        grid-column: 1 !important;
        grid-row: 3;
    }

    #buscar-vehiculos .modern-search-button {
        flex-shrink: 0;
    }
}

/* ====================================
   REDUCIR ESPACIOS EN MÓVIL
==================================== */

@media (max-width: 768px) {

    /* Menos espacio después de la barra superior */
    #buscar-vehiculos.marketplace-layout {
        padding-top: 10px !important;
        padding-bottom: 5px !important;
        row-gap: 10px !important;
    }

    /* Buscador más compacto */
    #buscar-vehiculos > .modern-search {
        padding: 15px !important;
        margin: 0 !important;
    }

    /* Reducir espacios internos del buscador */
    .modern-search-label {
        margin-bottom: 7px !important;
    }

    .modern-search-popular {
        margin-top: 9px !important;
        gap: 5px !important;
    }

    /* Reducir separación entre buscador y filtros */
    #buscar-vehiculos > .search-panel {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Barra de filtros más cerca de los vehículos */
    .mobile-filter-bar {
        margin-top: 0 !important;
        margin-bottom: 8px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* Sección de vehículos */
    #vehiculos.section {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* Título más cerca de las tarjetas */
    #vehiculos .section-heading {
        margin-top: 0 !important;
        margin-bottom: 12px !important;
    }
}

/* =====================================
   HERO MÁS COMPACTO EN MÓVIL
===================================== */

@media (max-width: 768px) {

    .hero {
        min-height: auto !important;
        height: auto !important;
        padding: 30px 0 24px !important;
    }

    .hero-content {
        min-height: 0 !important;
        height: auto !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .hero-copy {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .hero-report {
        margin-bottom: 0 !important;
    }

}

/* AUTOMARKET - MEJORAS RESPONSIVE */

@media (max-width: 768px) {

  /* Portada compacta */
  .hero {
    min-height: auto !important;
    height: auto !important;
    padding: 26px 0 22px !important;
  }

  .hero-content {
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .hero-copy h1 {
    font-size: clamp(27px, 7vw, 34px);
    line-height: 1.12;
    letter-spacing: -0.8px;
  }

  .hero-copy p {
    font-size: 14px;
    line-height: 1.5;
  }

  /* Botones */
  .hero-buttons {
    gap: 8px;
  }

  .hero-btn {
    min-height: 46px;
    padding: 10px 12px;
    font-size: 12px;
  }

  /* Informe vehicular */
  .hero-report {
    padding: 12px;
    margin-bottom: 0;
  }

  /* Beneficios compactos */
  .benefits-bar {
    padding: 12px 0;
  }

  .benefits-container {
    gap: 10px;
  }

  .benefit-item {
    gap: 7px;
  }

  /* Menos espacio antes del buscador */
  .marketplace-layout {
    padding-top: 12px;
  }

  .modern-search {
    padding: 15px;
  }

  /* Dos vehículos por fila */
  .vehicle-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

}


/* ========================================
   AUTOMARKET - BUSCADOR ESTILO APP
======================================== */

.app-search {
  background: #fff;
  border: 1px solid #eeeeef;
  border-radius: 24px;
  padding: 22px;
  box-shadow: 0 8px 30px rgba(0,0,0,.035);
  width: 100%;
  min-width: 0;
}

.app-search-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.app-search-input {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  height: 52px;
  padding: 0 8px 0 16px;
  background: #f5f5f6;
  border: 1px solid transparent;
  border-radius: 50px;
  transition: .2s ease;
}

.app-search-input:focus-within {
  background: #fff;
  border-color: #b7c8e9;
  box-shadow: 0 0 0 3px rgba(0,90,230,.07);
}

.app-search-input > i {
  font-size: 17px;
  color: #222;
  flex-shrink: 0;
}

.app-search-input input {
  flex: 1;
  min-width: 0;
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  padding: 0 12px;
  font: inherit;
  font-size: 14px;
  color: #151515;
}

.app-search-input input::placeholder {
  color: #9b9b9b;
}

.app-search-submit {
  width: 37px;
  height: 37px;
  border: none;
  border-radius: 50%;
  background: #075be8;
  color: white;
  cursor: pointer;
  flex-shrink: 0;
}

.app-search-round {
  width: 52px;
  height: 52px;
  border: none;
  border-radius: 50%;
  background: #f5f5f6;
  color: #222;
  font-size: 18px;
  cursor: pointer;
  flex-shrink: 0;
}

.app-search-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 22px 0 15px;
}

.app-search-heading h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.5px;
  color: #161616;
}

.app-search-location {
  display: flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  color: #353535;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}

.app-search-location .fa-chevron-down {
  font-size: 9px;
}

.app-search-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 0 5px;
  scroll-snap-type: x proximity;
}

.app-search-chips::-webkit-scrollbar {
  display: none;
}

.app-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 39px;
  padding: 0 15px;
  border: 1px solid transparent;
  border-radius: 50px;
  background: #f5f5f6;
  color: #252525;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  scroll-snap-align: start;
  transition: .2s ease;
}

.app-chip:hover {
  background: #e9edf5;
}

.app-chip-main,
.app-chip.is-active {
  background: #15191f;
  color: #fff;
}

.app-chip-main:hover,
.app-chip.is-active:hover {
  background: #303946;
}

/* TABLET */
@media (max-width: 850px) {
  .app-search {
    padding: 17px;
    border-radius: 22px;
  }
}

/* MÓVIL */
@media (max-width: 600px) {
  .marketplace-layout {
    padding-top: 10px;
  }

  .app-search {
    padding: 15px 14px;
    border-radius: 22px;
    box-shadow: none;
  }

  .app-search-top {
    gap: 9px;
  }

  .app-search-input {
    height: 46px;
    padding-left: 14px;
  }

  .app-search-input input {
    font-size: 13px;
    padding: 0 9px;
  }

  .app-search-submit {
    width: 33px;
    height: 33px;
  }

  .app-search-round {
    width: 46px;
    height: 46px;
    font-size: 16px;
  }

  .app-search-heading {
    margin: 19px 0 13px;
  }

  .app-search-heading h2 {
    font-size: 16px;
  }

  .app-search-location {
    font-size: 11px;
  }

  .app-chip {
    min-height: 36px;
    padding: 0 13px;
    font-size: 11px;
  }

  .app-search-chips {
    margin-right: -14px;
    padding-right: 14px;
  }
}

/* ==========================================
   AUTOMARKET - REDUCIR FILTROS SUPERIORES
   SOLO EN PANTALLAS GRANDES
========================================== */

@media (min-width: 851px) {

    /* Ocultar filtros rápidos duplicados */
    .app-search .app-chip[data-app-type],
    .app-search #appPriceChip {
        display: none !important;
    }

    /* Mantener Filtros y Ordenar */
    .app-search #appFilterChip,
    .app-search #appSortChip {
        display: inline-flex !important;
    }

    /* Menor separación */
    .app-search .app-search-chips {
        gap: 8px;
        padding-bottom: 0;
    }

    /* Buscador más compacto */
    .app-search {
        padding: 20px 26px !important;
    }

    .app-search-heading {
        margin: 15px 0 12px !important;
    }

}

/* OCULTAR BOTÓN CIRCULAR DE FILTROS EN PC */
@media (min-width: 851px) {
    #appQuickFilters {
        display: none !important;
    }
}

/* ==========================================
   FILTROS SIMPLES AUTOMARKET
========================================== */

/* Ocultar botón de búsqueda */
#searchForm .search-submit {
    display: none !important;
}

/* Ocultar botón Más filtros */
#advancedToggle {
    display: none !important;
}

/* Mantener filtros avanzados fuera de vista */
#advancedFields {
    display: none !important;
}

/* Panel más compacto */
#searchForm .sidebar-inner {
    padding: 18px !important;
}

#searchForm .search-grid {
    gap: 12px !important;
}

#searchForm .tabs {
    gap: 8px !important;
}

#searchForm select {
    min-height: 46px;
}

/* Botón limpiar */
#clearAdvanced {
    width: 100%;
    margin-top: 6px;
}

/* ==========================================
   MÁS BUSCADOS - AUTOMARKET
========================================== */

.app-search-popular {
    margin-top: 14px;
}

.popular-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: #263b5d;
    font-size: 13px;
    font-weight: 700;
}

.popular-heading i {
    color: #0757d8;
}

.popular-list {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.popular-list button {
    border: 1px solid #e4eaf4;
    background: #f4f7fc;
    color: #344563;
    border-radius: 30px;
    padding: 10px 17px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
}

.popular-list button:hover,
.popular-list button.active {
    background: #0757d8;
    color: white;
    border-color: #0757d8;
    transform: translateY(-1px);
}

@media (max-width: 600px) {
    .popular-list {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 5px;
        scrollbar-width: none;
    }

    .popular-list::-webkit-scrollbar {
        display: none;
    }

    .popular-list button {
        flex-shrink: 0;
        padding: 9px 14px;
        font-size: 12px;
    }
}

/* =====================================
   DURACIÓN DE PUBLICACIÓN
===================================== */

#publishModal .publication-duration {
    grid-column: 1 / -1;
    margin: 14px 0;
}

#publishModal .duration-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

#publishModal .duration-heading > i {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    background: #edf4ff;
    color: #075be8;
    border-radius: 12px;
    font-size: 20px;
}

#publishModal .duration-heading strong {
    display: block;
    color: #0c1b39;
    font-size: 15px;
}

#publishModal .duration-heading span {
    display: block;
    margin-top: 3px;
    color: #78869b;
    font-size: 12px;
}

#publishModal .duration-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

#publishModal .duration-option {
    cursor: pointer;
    position: relative;
}

#publishModal .duration-option input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

#publishModal .duration-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 100px;
    padding: 18px 12px;
    background: #f7faff;
    border: 2px solid #e1e9f5;
    border-radius: 15px;
    transition: .2s ease;
}

#publishModal .duration-card strong {
    font-size: 19px;
    color: #0b1e40;
}

#publishModal .duration-card small {
    font-size: 12px;
    color: #7c8aa0;
    text-align: center;
}

#publishModal .duration-option input:checked
+ .duration-card {
    border-color: #075be8;
    background: #edf4ff;
    box-shadow: 0 4px 15px rgba(7,91,232,.09);
}

#publishModal .duration-option input:focus-visible
+ .duration-card {
    outline: 3px solid #94bfff;
    outline-offset: 2px;
}

@media (max-width: 600px) {
    #publishModal .duration-options {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    #publishModal .duration-card {
        min-height: 70px;
        padding: 12px;
    }
}

/* DURACIÓN DE PUBLICACIÓN */

#publishModal .duration-section {
    grid-column: 1 / -1;
    width: 100%;
}

#publishModal .duration-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

#publishModal .duration-heading > i {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #eaf2ff;
    color: #075bf4;
    font-size: 20px;
}

#publishModal .duration-heading strong {
    font-size: 16px;
    color: #071c40;
}

#publishModal .duration-heading p {
    margin: 4px 0 0;
    font-size: 12px;
    color: #7385a3;
}

#publishModal .duration-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

#publishModal .duration-card {
    display: block;
    position: relative;
    cursor: pointer;
}

#publishModal .duration-card input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

#publishModal .duration-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    padding: 18px 12px;
    border: 2px solid #dce5f3;
    border-radius: 15px;
    background: #f6f9ff;
    transition: .2s ease;
}

#publishModal .duration-card-content strong {
    font-size: 20px;
    color: #071c40;
}

#publishModal .duration-card-content small {
    margin-top: 6px;
    font-size: 12px;
    color: #7082a1;
}

#publishModal .duration-card input:checked + .duration-card-content {
    border-color: #075bf4;
    background: #eaf2ff;
    box-shadow: 0 3px 12px rgba(7, 91, 244, .08);
}

#publishModal .duration-card input:focus-visible + .duration-card-content {
    outline: 3px solid #8bb6ff;
    outline-offset: 3px;
}

@media (max-width: 600px) {
    #publishModal .duration-options {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    #publishModal .duration-card-content {
        min-height: 75px;
        padding: 12px;
    }
}

/* OCULTAR CONTACTAR Y VER DETALLE EN RESPONSIVE */
/* OCULTAR BOTONES EN CELULARES */
@media screen and (max-width: 768px) {

    #vehicleGrid .vehicle-card .vehicle-actions {
        display: none !important;
    }

}

/* PRECIO Y FLECHA MÁS INFO */

.vehicle-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
    width: 100%;
}

.vehicle-more-info {
    display: none;
}

@media screen and (max-width: 768px) {

    .vehicle-price-row .vehicle-price {
        margin: 0 !important;
        padding: 0 !important;
        min-width: 0;
    }

    .vehicle-more-info {
        display: inline-flex !important;
        align-items: center;
        gap: 4px;
        flex-shrink: 0;
        background: transparent;
        border: none;
        color: #075ff0;
        font-size: 10px;
        font-weight: 700;
        padding: 4px 0;
        cursor: pointer;
    }

    .vehicle-more-info i {
        display: grid;
        place-items: center;
        width: 23px;
        height: 23px;
        background: #eaf2ff;
        border-radius: 50%;
        font-size: 11px;
    }
}
/* SOLO CELULARES: OCULTAR FLECHAS DESPUÉS DE TOCAR */
@media (max-width: 768px) and (hover: none) {

    .vehicle-card .card-gallery-arrow {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .vehicle-card .show-gallery-arrows .card-gallery-arrow {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}

/* UBICACIÓN - PUBLICAR VEHÍCULO */

.ubicacion-selectores {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
    width: 100%;
}

.ubicacion-selectores label {
    display: flex;
    flex-direction: column;
    gap: 9px;
    font-size: 12px;
    font-weight: 600;
    color: #132342;
    min-width: 0;
}

.ubicacion-selectores select {
    width: 100%;
    min-width: 0;
    padding: 14px;
    border: 1px solid #d7e3f4;
    border-radius: 12px;
    background: white;
    color: #172b4d;
    font-size: 12px;
    outline: none;
}

.ubicacion-selectores select:focus {
    border-color: #0866ff;
    box-shadow: 0 0 0 3px rgba(8, 102, 255, .10);
}

.ubicacion-selectores select:disabled {
    background: #f5f7fb;
    color: #94a3b8;
    cursor: not-allowed;
}

@media (max-width: 768px) {
    .ubicacion-selectores {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* ======================================
   HERO CARRUSEL - AUTOMARKET
====================================== */

.hero-carousel {
    position: relative;
    width: 100%;
    aspect-ratio: 1966 / 768;
    overflow: hidden;
    background: #061b3c;
}

.hero-slides {
    position: relative;
    width: 100%;
    height: 100%;
}

.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .7s ease, visibility .7s;
}

.hero-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

.hero-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* FLECHAS */

.hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;

    width: 45px;
    height: 45px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255,255,255,.4);
    border-radius: 50%;

    background: rgba(0,0,0,.35);
    color: #fff;

    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: background .2s;
}

.hero-arrow:hover {
    background: #0866e8;
}

.hero-prev {
    left: 18px;
}

.hero-next {
    right: 18px;
}

/* INDICADORES */

.hero-dots {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;

    display: flex;
    align-items: center;
    gap: 9px;
}

.hero-dots button {
    width: 10px;
    height: 10px;
    padding: 0;
    border: none;
    border-radius: 20px;
    background: rgba(255,255,255,.6);
    cursor: pointer;
    transition: .3s;
}

.hero-dots button.active {
    width: 32px;
    background: #168cff;
}

/* RESPONSIVE */

@media (max-width: 768px) {

       .hero-carousel {
        width: 100%;
        height: 300px;
        aspect-ratio: auto;
    }

    .hero-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    .hero-arrow {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    .hero-prev {
        left: 8px;
    }

    .hero-next {
        right: 8px;
    }

    .hero-dots {
        bottom: 10px;
    }

    .hero-dots button {
        width: 8px;
        height: 8px;
    }

    .hero-dots button.active {
        width: 24px;
    }
}
/* CELULARES PEQUEÑOS */

@media (max-width: 400px) {

    .hero-carousel {
        height: 270px;
    }
}

/* CARRUSEL RESPONSIVE SIN RECORTAR IMÁGENES */

@media (max-width: 768px) {

    .hero-carousel {
        width: 100%;
        height: 240px;
        aspect-ratio: auto;
        background: #061b3c;
        overflow: hidden;
    }

    .hero-slide img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center;
    }

    .hero-arrow {
        width: 30px;
        height: 30px;
    }

    .hero-prev {
        left: 6px;
    }

    .hero-next {
        right: 6px;
    }

    .hero-dots {
        bottom: 8px;
    }
}

/* HERO RESPONSIVE: LLENAR TODO EL ESPACIO */

@media (max-width: 768px) {

    .hero-carousel {
        width: 100%;
        height: 240px;
        aspect-ratio: auto;
        overflow: hidden;
    }

    .hero-slides,
    .hero-slide {
        width: 100%;
        height: 100%;
    }

    .hero-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: fill;
    }
}

/* ==========================================
   MARCAS VISUALES - AUTOMARKET
========================================== */

.marcas-visuales {
    width: 100%;
    margin: 12px 0 16px;
}

.marcas-visuales-titulo {
    font-size: 13px;
    font-weight: 700;
    color: #334155;
    margin-bottom: 10px;
}

.marcas-visuales-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.marca-visual {
    min-width: 0;
    min-height: 74px;
    padding: 8px 4px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    transition: background .2s, border-color .2s, box-shadow .2s;
}

.marca-visual img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.marca-visual span {
    font-size: 9px;
    font-weight: 600;
    color: #475569;
    text-align: center;
    overflow-wrap: anywhere;
}

.marca-visual:hover {
    background: #f1f5ff;
    border-color: #93c5fd;
}

.marca-visual.activo {
    background: #eff6ff;
    border-color: #2563eb;
    box-shadow: 0 0 0 1px #2563eb;
}

.marca-visual.activo span {
    color: #1d4ed8;
}

@media (max-width: 480px) {
    .marcas-visuales-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
    }

    .marca-visual {
        min-height: 72px;
        padding: 8px 3px;
    }

    .marca-visual img {
        width: 26px;
        height: 26px;
    }

    .marca-visual span {
        font-size: 9px;
    }
}

/* FILTROS DOBLES DE PRECIO Y KM */

.range-filter {
    width: 100%;
    margin: 18px 0 24px;
    min-width: 0;
}

.range-filter-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.range-filter-heading label {
    font-size: 14px;
    font-weight: 700;
    color: #172033;
}

.range-filter-heading button {
    border: 0;
    background: none;
    color: #0666ff;
    font-size: 12px;
    cursor: pointer;
}

.range-inputs {
    display: flex;
    align-items: center;
    gap: 10px;
}

.range-field {
    flex: 1;
    min-width: 0;
    height: 42px;
    background: #f4f7fc;
    border: 1px solid #e5eaf2;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 8px;
}

.range-field span {
    font-size: 13px;
    color: #172033;
}

.range-field input {
    width: 100%;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    text-align: center;
    font-size: 13px;
    color: #172033;
    font-weight: 600;
    appearance: textfield;
    -moz-appearance: textfield;
}

.range-field input::-webkit-inner-spin-button,
.range-field input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.range-separator {
    color: #94a3b8;
    flex-shrink: 0;
}

.double-range {
    position: relative;
    height: 28px;
    margin-top: 10px;
    display: flex;
    align-items: center;
}

.range-track,
.range-progress {
    position: absolute;
    height: 5px;
    border-radius: 10px;
    pointer-events: none;
}

.range-track {
    width: 100%;
    background: #e4eaf3;
}

.range-progress {
    background: #0866ff;
    left: 0;
    right: 0;
}

.double-range input[type="range"] {
    position: absolute;
    width: 100%;
    height: 5px;
    margin: 0;
    background: none;
    pointer-events: none;
    appearance: none;
    -webkit-appearance: none;
}

.double-range input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: #0866ff;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 5px #0002;
    cursor: pointer;
    pointer-events: auto;
}

.double-range input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: #0866ff;
    border: 2px solid #fff;
    border-radius: 50%;
    cursor: pointer;
    pointer-events: auto;
}

.range-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #94a3b8;
}

.range-presets {
    display: flex;
    gap: 6px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.range-presets button {
    padding: 9px 12px;
    background: #f0f4fa;
    color: #475569;
    border: 0;
    border-radius: 20px;
    font-size: 11px;
    cursor: pointer;
}

.range-presets button.active {
    background: #0866ff;
    color: white;
    box-shadow: 0 3px 8px #0866ff30;
}

@media (max-width: 480px) {
    .range-filter {
        margin: 14px 0 20px;
    }

    .range-presets button {
        padding: 8px 10px;
    }
}



.marca-visual img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    display: block;
    filter: none !important;
    opacity: 1;
}

.marca-visual {
    background: #fff;
    transition: all .2s ease;
}

.marca-visual:hover {
    border-color: #2563eb;
    background: #f4f8ff;
    transform: translateY(-2px);
}

.marca-visual.activo {
    border: 2px solid #2563eb;
    background: #eff6ff;
}

/* FILTRO MARCAS */

.filtro-marcas {
  width: 100%;
}

.marcas-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.marcas-cabecera h3 {
  margin: 0;
  font-size: 14px;
  color: #142445;
  font-weight: 800;
}

.marcas-cabecera button {
  background: none;
  border: none;
  color: #0759e6;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

/* BUSCADOR */

.marcas-buscador {
  height: 42px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  margin-bottom: 12px;
  background: #f4f7fc;
  border: 1px solid #e4ebf5;
  border-radius: 10px;
}

.marcas-buscador i {
  color: #7585a1;
  font-size: 13px;
}

.marcas-buscador input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: 12px;
  color: #17243d;
}

/* LOGOS */

.marcas-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.marca-item {
  min-width: 0;
  min-height: 65px;
  padding: 7px 3px;
  background: #f5f7fc;
  border: 1px solid transparent;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: .2s;
}

.marca-item img {
  width: 100%;
  max-width: 37px;
  height: 27px;
  object-fit: contain;
}

.marca-item span {
  max-width: 100%;
  font-size: 10px;
  color: #34415d;
  overflow-wrap: anywhere;
  text-align: center;
}

.marca-item:hover,
.marca-item.active {
  border-color: #0759e6;
  background: #edf4ff;
}

.marca-item:nth-child(n+6) {
  display: none;
}

.marcas-grid.expandido .marca-item {
  display: flex;
}

/* RESPONSIVE */

@media (max-width: 600px) {
  .marcas-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/* Ocultar selector de marcas */
#brandFilter {
    display: none !important;
}

/* SELECT DE UBICACIÓN CON ÍCONO */

.ubicacion-select {
    position: relative;
    width: 100%;
    
}
.ubicacion-select #locationFilter{
    cursor: pointer !important;
}
.ubicacion-select > i {
    position: absolute;
    left: 17px;
    top: 50%;
    transform: translateY(-50%);
    color: #0866e8;
    font-size: 16px;
    z-index: 2;
    pointer-events: none;
}

.ubicacion-select select {
    width: 100%;
    padding-left: 45px !important;
    padding-right: 35px;
}

/* CONDICIÓN - BOTONES MODERNOS */

.condicion-grupo #conditionFilter {
    display: none !important;
}

.condicion-botones {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-top: 9px;
}

.condicion-btn {
    min-width: 0;
    min-height: 39px;
    padding: 8px 5px;
    border: 1px solid #e6ebf5;
    border-radius: 9px;
    background: #f1f5fb;
    color: #263a5c;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: .2s ease;
}

.condicion-btn i {
    font-size: 12px;
}

.condicion-btn:hover {
    background: #e8f0ff;
    border-color: #b9d1ff;
}

.condicion-btn.activo {
    background: #0759e6;
    border-color: #0759e6;
    color: #fff;
    box-shadow: 0 3px 8px rgba(7, 89, 230, .18);
}

.condicion-btn:focus-visible {
    outline: 2px solid #0759e6;
    outline-offset: 2px;
}

/* ===== TARJETAS AUTOMARKET ===== */

.vehicle-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.vehicle-card {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #e4ebf5;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 28px rgba(18, 49, 100, .08);
  transition: transform .25s, box-shadow .25s;
}

.vehicle-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(18, 49, 100, .14);
}

/* Imagen */
.vehicle-card .vehicle-image-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #f1f5f9;
}

.vehicle-card .vehicle-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Corazón */
.vehicle-favorite {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.96);
  color: #475569;
  box-shadow: 0 4px 14px rgba(0,0,0,.13);
  cursor: pointer;
}

.vehicle-favorite i {
  font-size: 18px;
}

.vehicle-favorite.active {
  color: #ef4444;
  background: #fff1f2;
}

/* Contenido */
.vehicle-card .vehicle-body {
  padding: 15px;
}

.vehicle-card .vehicle-body h3 {
  margin: 0 0 9px;
  font-size: 17px;
  line-height: 1.3;
  color: #10203d;
}

/* Ubicación a la izquierda, tipo a la derecha */
.vehicle-location-type {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px;
}

.vehicle-location-text {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vehicle-type-badge {
    flex-shrink: 0;
    margin: 0 !important;
    align-self: self-start;
}
/* Precio */
.vehicle-card .vehicle-price {
  color: #0759e6;
  font-size: 24px;
  font-weight: 850;
  margin-top: 12px;
}

/* Botones */
.vehicle-card .vehicle-actions {
  display: flex;
  gap: 8px;
  margin-top: 13px;
}

.vehicle-card .vehicle-actions button {
  min-width: 0;
  padding: 10px 6px;
  font-size: 12px;
  border-radius: 9px;
}

/* Tablets */
@media (max-width: 1100px) {
  .vehicle-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 800px) {
  .vehicle-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Celulares: siempre 2 columnas */
@media (max-width: 600px) {
  .vehicle-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .vehicle-card {
    border-radius: 12px;
  }

  .vehicle-card .vehicle-body {
    padding: 10px;
  }

  .vehicle-card .vehicle-body h3 {
    font-size: 13px;
  }

  .vehicle-favorite {
    width: 32px;
    height: 32px;
    top: 8px;
    right: 8px;
  }

  .vehicle-card .vehicle-price {
    font-size: 18px;
  }

  .vehicle-location-type {
    gap: 4px;
  }

  .vehicle-location-type .vehicle-location-text {
    font-size: 10px;
  }

  .vehicle-location-type .vehicle-type-badge {
    font-size: 9px;
    padding: 4px 6px;
  }

  .vehicle-card .vehicle-actions button {
    font-size: 10px;
    padding: 9px 3px;
  }
}

/* ===================================
   AUTOMARKET - FAVORITOS Y TIPO
=================================== */

/* Contenedor de fotografía */
.vehicle-card .vehicle-image-container {
    position: relative;
}

/* Corazón superior derecho */
.vehicle-card .btn-favorito {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 30;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;
    padding: 0;

    border: none;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.96);
    color: #334155;

    font-size: 19px;
    cursor: pointer;

    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
    transition: transform .2s, color .2s;
}

.vehicle-card .btn-favorito:hover {
    transform: scale(1.1);
}

.vehicle-card .btn-favorito.activo {
    color: #ef334b;
}

/* Mantener Recién publicado a la izquierda */
.vehicle-card .badge-recien {
    left: 10px;
    right: auto;
}

/* Ubicación izquierda y tipo derecha */
.vehicle-card .vehicle-location-type {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}

.vehicle-card .vehicle-location-type .vehicle-location {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0;
}

/* Etiqueta del tipo */
.vehicle-card .vehicle-type-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 5px 10px;
    border-radius: 7px;

    background: #edf4ff;
    color: #0759e6;

    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

/* Celulares */
@media (max-width: 600px) {

    .vehicle-card .btn-favorito {
        top: 8px !important;
        right: 8px !important;
        width: 31px;
        height: 31px;
        font-size: 16px;
    }

    .vehicle-card .vehicle-location-type {
        gap: 4px;
    }

    .vehicle-card .vehicle-type-badge {
        font-size: 9px;
        padding: 4px 6px;
    }
}

/* UBICACIÓN DE LAS TARJETAS */
.vehicle-card .vehicle-location {
    font-size: 11px !important;
    font-weight: 400 !important;
    line-height: 1.4;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ÍCONO DE UBICACIÓN */
.vehicle-card .vehicle-location i {
    font-size: 11px;
    color: #0759e6;
    margin-right: 3px;
}

/* RESPONSIVE - CELULARES */
@media (max-width: 600px) {
    .vehicle-card .vehicle-location {
        font-size: 8px !important;
    }

    .vehicle-card .vehicle-location i {
        font-size: 8px;
    }
}

/* TARJETAS MÁS COMPACTAS EN MÓVIL */
@media (max-width: 600px) {

    /* Separación entre tarjetas */
    #vehicleGrid.vehicle-grid {
        gap: 8px !important;
    }

    /* Contenido de la tarjeta */
    #vehicleGrid .vehicle-body {
        padding: 4px 8px !important;
    }

    /* Nombre y año */
    #vehicleGrid .vehicle-title {
        font-size: 12px !important;
        line-height: 1.2 !important;
        margin: 0 0 5px !important;
    }

    /* Ubicación y tipo */
    #vehicleGrid .vehicle-location-type {
        margin: 4px 0 6px !important;
        gap: 4px !important;
    }

    #vehicleGrid .vehicle-location {
        font-size: 9px !important;
    }

    #vehicleGrid .vehicle-type-badge {
        font-size: 8px !important;
        padding: 2px 5px !important;
    }

    /* Características */
    #vehicleGrid .card-specs {
        margin-top: 5px !important;
        padding: 8px 0 !important;
    }

    #vehicleGrid .card-spec {
        padding: 0 2px !important;
    }

    #vehicleGrid .card-spec-icon {
        height: 17px !important;
        margin-bottom: 3px !important;
        font-size: 14px !important;
    }

    #vehicleGrid .card-spec > span {
        margin-bottom: 3px !important;
        font-size: 7px !important;
    }

    #vehicleGrid .card-spec > strong {
        font-size: 10px !important;
    }

    /* Precio */
    #vehicleGrid .vehicle-price-row {
        margin-top: 6px !important;
        padding-top: 5px !important;
        gap: 4px !important;
    }

    #vehicleGrid .vehicle-price {
        font-size: 15px !important;
        line-height: 1.2 !important;
    }

    /* Botón Más info */
    #vehicleGrid .vehicle-price-row button {
        font-size: 9px !important;
    }
}
/* ============================================
   AUTOMARKET - ELIMINAR ESPACIOS EN RESPONSIVE
============================================ */

@media screen and (max-width: 600px) {

    #vehicleGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        align-items: start !important;
        gap: 8px !important;
    }

    #vehicleGrid .vehicle-card {
        display: flex !important;
        flex-direction: column !important;
        height: fit-content !important;
        min-height: 0 !important;
        align-self: start !important;
    }

    #vehicleGrid .vehicle-body {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        height: auto !important;
        min-height: 0 !important;
        flex: 0 0 auto !important;
        padding: 7px 6px !important;
        gap: 0 !important;
    }

    #vehicleGrid .vehicle-title {
        margin: 0 0 4px !important;
        padding: 0 !important;
    }

    #vehicleGrid .vehicle-location-type {
        margin: 0 0 5px !important;
        padding: 0 !important;
        height: auto !important;
        min-height: 0 !important;
    }

    #vehicleGrid .card-specs {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        margin: 0 0 5px !important;
        padding: 6px 0 !important;
        height: auto !important;
        min-height: 0 !important;
        flex: 0 0 auto !important;
    }

    #vehicleGrid .card-spec {
        padding: 0 2px !important;
    }

    #vehicleGrid .card-spec-icon {
        height: 15px !important;
        margin-bottom: 2px !important;
    }

    #vehicleGrid .card-spec > span {
        margin: 0 0 2px !important;
    }

    #vehicleGrid .vehicle-price-row {
        margin: 0 !important;
        padding: 5px 0 0 !important;
        height: auto !important;
        min-height: 0 !important;
        flex: 0 0 auto !important;
    }

    #vehicleGrid .vehicle-actions {
        display: none !important;
    }
}
/* BOTÓN FLOTANTE SUBIR */

.btn-subir {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: #2563eb;
    color: white;
    font-size: 19px;
    cursor: pointer;
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow: 0 5px 20px rgba(37,99,235,.3);

    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);

    transition: all .3s ease;
}

.btn-subir.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.btn-subir:hover {
    background: #1d4ed8;
    transform: translateY(-4px);
}

/* RESPONSIVE */
@media (max-width: 600px) {
    .btn-subir {
        width: 42px;
        height: 42px;
        bottom: 18px;
        right: 15px;
        font-size: 17px;
    }
}

/* ============================================
   AUTOMARKET - MODAL VEHICULAR PREMIUM
   Agregar al FINAL de styles.css
============================================ */

/* CONTENEDOR PRINCIPAL */
.vehicle-detail-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.vehicle-detail-modal.hidden {
    display: none !important;
}

.vehicle-detail-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 16, 38, .82);
    backdrop-filter: blur(8px);
}

.vehicle-detail-card {
    position: relative;
    z-index: 2;
    width: min(1440px, 100%);
    max-height: 96dvh;
    overflow-x: hidden;
    overflow-y: auto;
    background: #fff;
    border-radius: 20px;
    border: 1px solid #e5eaf2;
    box-shadow: 0 35px 100px rgba(0,0,0,.32);
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.vehicle-detail-close {
    position: sticky;
    float: right;
    top: 14px;
    margin: 14px 14px -60px 0;
    z-index: 30;
    width: 43px;
    height: 43px;
    display: grid;
    place-items: center;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    background: #fff;
    color: #17243d;
    font-size: 19px;
    box-shadow: 0 5px 18px rgba(0,0,0,.15);
    cursor: pointer;
}

.vehicle-detail-close:hover {
    background: #eef4ff;
    color: #0759e6;
}

/* DISTRIBUCIÓN PRINCIPAL */
.vehicle-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(360px, .85fr);
    align-items: stretch;
    background: #fff;
}

/* GALERÍA */
.vehicle-gallery {
    min-width: 0;
    padding: 20px;
    background: #f7f9fd;
    border-right: 1px solid #edf0f5;
}

.gallery-main {
    position: relative;
    height: clamp(420px, 42vw, 610px);
    overflow: hidden;
    border-radius: 15px;
    background: #eef2f7;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-main img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 43px;
    height: 43px;
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.96);
    color: #10203d;
    font-size: 16px;
    box-shadow: 0 4px 15px rgba(0,0,0,.15);
    cursor: pointer;
    transition: background .2s, opacity .2s;
}

.gallery-arrow:hover {
    background: #0759e6;
    color: #fff;
}

.gallery-prev { left: 14px; }
.gallery-next { right: 14px; }

.gallery-counter {
    position: absolute;
    right: 15px;
    bottom: 15px;
    padding: 7px 13px;
    border-radius: 30px;
    background: rgba(7, 20, 46, .8);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

/* MINIATURAS */
.gallery-thumbnails {
    display: flex;
    gap: 10px;
    margin-top: 13px;
    padding: 3px 2px 8px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.gallery-thumbnail {
    flex: 0 0 100px;
    width: 100px;
    height: 72px;
    padding: 0;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: 10px;
    background: #edf2f8;
    cursor: pointer;
    transition: border-color .2s;
}

.gallery-thumbnail.active {
    border-color: #0759e6;
}

.gallery-thumbnail img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* INFORMACIÓN PRINCIPAL */
.vehicle-detail-summary {
    min-width: 0;
    padding: 40px 30px 28px;
}

.detail-topline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.featured-label {
    display: inline-flex;
    align-items: center;
    padding: 7px 11px;
    border-radius: 7px;
    background: #fff3d9;
    color: #a56a00;
    font-size: 11px;
    font-weight: 800;
}

.vehicle-detail-summary h2 {
    margin: 10px 0 5px;
    font-size: clamp(26px, 2.4vw, 36px);
    line-height: 1.15;
    letter-spacing: -.7px;
    color: #101f39;
    overflow-wrap: anywhere;
}

.vehicle-version {
    margin: 0 0 12px;
    color: #758198;
    font-size: 13px;
}

.vehicle-detail-price {
    margin: 12px 0;
    color: #0759e6;
    font-size: clamp(30px, 2.7vw, 40px);
    font-weight: 900;
    letter-spacing: -.8px;
}

.vehicle-location {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 23px;
    color: #6b778e;
    font-size: 13px;
}

.vehicle-location i {
    color: #0759e6;
}

/* CARACTERÍSTICAS RÁPIDAS */
.vehicle-specs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.vehicle-specs > div {
    min-width: 0;
    min-height: 77px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-content: center;
    align-items: center;
    column-gap: 10px;
    padding: 12px;
    border: 1px solid #e5ebf4;
    border-radius: 12px;
    background: #f8faff;
}

.vehicle-specs > div:hover {
    background: #eef5ff;
    border-color: #cbdcf8;
}

.vehicle-specs i {
    grid-row: 1 / 3;
    font-size: 19px;
    color: #0759e6;
}

.vehicle-specs span {
    display: block;
    font-size: 11px;
    color: #7a879a;
}

.vehicle-specs strong {
    display: block;
    margin-top: 3px;
    font-size: 13px;
    font-weight: 800;
    color: #17243d;
    overflow-wrap: anywhere;
}

/* VENDEDOR */
.seller-card {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    padding: 15px;
    border: 1px solid #e3eaf4;
    border-radius: 13px;
    background: #fff;
    box-shadow: none;
}

.seller-avatar {
    flex-shrink: 0;
    width: 47px;
    height: 47px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #eaf2ff;
    color: #0759e6;
    font-size: 20px;
}

.seller-card div:last-child {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.seller-card span,
.seller-card small {
    font-size: 11px;
    color: #7b879b;
}

.seller-card strong {
    margin: 3px 0;
    font-size: 14px;
    color: #10203d;
}

/* CONTACTO */
.detail-contact-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 54px;
    gap: 10px;
    margin-top: 16px;
}

.detail-whatsapp,
.detail-call {
    min-height: 52px;
    margin: 0;
    border: 0;
    border-radius: 11px;
    cursor: pointer;
    transition: background .2s, transform .2s;
}

.detail-whatsapp {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 10px;
    background: #16b957;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
}

.detail-whatsapp:hover {
    background: #0d9d47;
    transform: translateY(-1px);
}

.detail-call {
    display: grid;
    place-items: center;
    background: #eaf2ff;
    color: #0759e6;
    font-size: 18px;
    text-decoration: none;
}

.detail-call:hover {
    background: #dbe9ff;
}

/* ============================================
   MÁS INFORMACIÓN
============================================ */
.vehicle-detail-extra {
    padding: 12px 34px 38px;
    background: #fff;
}

.detail-section {
    padding: 26px 0;
    border-top: 1px solid #e6ebf2;
}

.detail-section h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 17px;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.4px;
    color: #10203d;
}

.detail-section > p {
    max-width: 100%;
    margin: 0;
    color: #59677c;
    font-size: 14px;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

/* FICHA TÉCNICA */
.technical-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.technical-grid > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    min-height: 76px;
    padding: 15px;
    border: 1px solid #e3eaf3;
    border-radius: 11px;
    background: #f8faff;
}

.technical-grid span {
    font-size: 11px;
    color: #7b879b;
}

.technical-grid strong {
    font-size: 14px;
    font-weight: 800;
    color: #17243d;
    overflow-wrap: anywhere;
}

/* EQUIPAMIENTO */
.vehicle-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px;
}

.vehicle-feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid #e6edf5;
    border-radius: 10px;
    background: #f8faff;
    color: #263650;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.vehicle-feature-item i {
    flex-shrink: 0;
    color: #16b85a;
    font-size: 15px;
}

.no-data {
    color: #8390a3;
    font-size: 14px;
}

/* INFORME VEHICULAR */
.detail-security {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 15px;
    margin-top: 10px;
    padding: 22px;
    border: 1px solid #dbe8ff;
    border-radius: 14px;
    background: linear-gradient(110deg, #eef5ff, #f8fbff);
}

.detail-security > i {
    font-size: 29px;
    color: #0759e6;
}

.detail-security strong {
    display: block;
    margin-bottom: 5px;
    color: #10203d;
    font-size: 15px;
}

.detail-security p {
    margin: 0;
    color: #66758b;
    font-size: 12px;
    line-height: 1.6;
}

.detail-security a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 43px;
    padding: 11px 16px;
    border-radius: 9px;
    background: #0759e6;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}

.detail-security a:hover {
    background: #0346bd;
}

/* SCROLL BLOQUEADO AL ABRIR */
body.modal-open {
    overflow: hidden;
}

/* ============================================
   TABLETS
============================================ */
@media (max-width: 1050px) {
    .vehicle-detail-layout {
        grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr);
    }

    .vehicle-gallery {
        padding: 12px;
    }

    .gallery-main {
        height: 440px;
    }

    .vehicle-detail-summary {
        padding: 38px 20px 24px;
    }

    .vehicle-detail-extra {
        padding: 10px 24px 30px;
    }

    .technical-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ============================================
   CELULARES
============================================ */
@media (max-width: 800px) {
    .vehicle-detail-modal {
        padding: 0;
        align-items: flex-end;
    }

    .vehicle-detail-card {
        width: 100%;
        max-height: 97dvh;
        border-radius: 18px 18px 0 0;
    }

    .vehicle-detail-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .vehicle-gallery {
        padding: 0;
        border-right: 0;
        background: #fff;
    }

    .gallery-main {
        height: clamp(250px, 65vw, 400px);
        border-radius: 0;
    }

    .gallery-main img {
        object-fit: contain;
    }

    .gallery-thumbnails {
        gap: 8px;
        margin-top: 10px;
        padding: 0 12px 12px;
    }

    .gallery-thumbnail {
        flex-basis: 80px;
        width: 80px;
        height: 58px;
    }

    .gallery-arrow {
        width: 37px;
        height: 37px;
        font-size: 14px;
    }

    .gallery-prev { left: 10px; }
    .gallery-next { right: 10px; }

    .vehicle-detail-summary {
        padding: 20px 17px 24px;
    }

    .vehicle-detail-summary h2 {
        font-size: 27px;
    }

    .vehicle-detail-price {
        font-size: 32px;
    }

    .vehicle-location {
        margin-bottom: 18px;
    }

    .vehicle-specs {
        gap: 8px;
    }

    .vehicle-specs > div {
        min-height: 72px;
        padding: 10px;
    }

    .seller-card {
        margin-top: 16px;
    }

    .vehicle-detail-extra {
        padding: 0 17px 28px;
    }

    .detail-section {
        padding: 22px 0;
    }

    .detail-section h3 {
        font-size: 19px;
    }

    .technical-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .vehicle-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .detail-security {
        grid-template-columns: 38px minmax(0, 1fr);
        padding: 16px;
    }

    .detail-security > i {
        font-size: 24px;
    }

    .detail-security a {
        grid-column: 1 / -1;
        width: 100%;
    }
}

/* ============================================
   CELULARES PEQUEÑOS
============================================ */
@media (max-width: 420px) {
    .vehicle-detail-summary {
        padding: 18px 13px 22px;
    }

    .vehicle-detail-summary h2 {
        font-size: 25px;
    }

    .vehicle-detail-price {
        font-size: 30px;
    }

    .vehicle-detail-extra {
        padding: 0 13px 25px;
    }

    .vehicle-specs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vehicle-specs > div {
        grid-template-columns: 23px minmax(0, 1fr);
        gap: 5px;
        padding: 9px;
    }

    .vehicle-specs i {
        font-size: 16px;
    }

    .vehicle-specs strong {
        font-size: 12px;
    }

    .technical-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .technical-grid > div {
        padding: 11px;
        min-height: 68px;
    }

    .technical-grid strong {
        font-size: 12px;
    }

    .vehicle-feature-grid {
        grid-template-columns: 1fr;
    }

    .gallery-main {
        height: 250px;
    }
}

/* ==============================================
   AUTOMARKET - MODAL PANTALLA COMPLETA
============================================== */

#vehicleDetailModal {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    overflow: hidden !important;
    z-index: 99999 !important;
}

#vehicleDetailModal.hidden,
#vehicleDetailModal[hidden] {
    display: none !important;
}

#vehicleDetailModal .vehicle-detail-card {
    position: relative !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: #fff !important;
    box-shadow: none !important;
    scrollbar-width: thin;
}

#vehicleDetailModal .vehicle-detail-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, .85fr) !important;
    gap: 22px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 20px 28px 10px !important;
    align-items: start !important;
}

#vehicleDetailModal .vehicle-gallery {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

#vehicleDetailModal .gallery-main {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: min(68dvh, 690px) !important;
    min-height: 300px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 13px !important;
    background: #f3f6fa !important;
}

#vehicleDetailModal .gallery-main img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
}

#vehicleDetailModal .gallery-thumbnails {
    display: flex !important;
    gap: 9px !important;
    margin: 10px 0 0 !important;
    padding: 0 0 6px !important;
}

#vehicleDetailModal .vehicle-detail-summary {
    min-width: 0 !important;
    width: 100% !important;
    padding: 8px 14px 0 0 !important;
}

#vehicleDetailModal .vehicle-detail-extra {
    width: 100% !important;
    max-width: none !important;
    padding: 12px 28px 32px !important;
}

#vehicleDetailModal .vehicle-detail-close {
    position: fixed !important;
    top: 16px !important;
    right: 18px !important;
    z-index: 100001 !important;
    margin: 0 !important;
}

/* TABLET */
@media (max-width: 900px) {
    #vehicleDetailModal .vehicle-detail-layout {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px !important;
        padding: 0 !important;
    }

    #vehicleDetailModal .gallery-main {
        height: min(60dvh, 520px) !important;
        border-radius: 0 !important;
    }

    #vehicleDetailModal .gallery-thumbnails {
        padding: 0 14px 8px !important;
    }

    #vehicleDetailModal .vehicle-detail-summary {
        padding: 12px 18px !important;
    }

    #vehicleDetailModal .vehicle-detail-extra {
        padding: 8px 18px 28px !important;
    }
}

/* CELULAR */
@media (max-width: 480px) {
    #vehicleDetailModal .gallery-main {
        height: min(52dvh, 360px) !important;
        min-height: 220px !important;
    }

    #vehicleDetailModal .vehicle-detail-summary {
        padding: 12px 14px !important;
    }

    #vehicleDetailModal .vehicle-detail-extra {
        padding: 8px 14px 25px !important;
    }
}

/* ==========================================
   AUTOMARKET - FONDO BLUR TIPO FACEBOOK
========================================== */

#vehicleDetailModal .gallery-main {
    position: relative !important;
    isolation: isolate;
    overflow: hidden !important;
    background: #101827 !important;
}

/* Fondo: misma fotografía ampliada y borrosa */
#vehicleDetailModal .gallery-main::before {
    content: "";
    position: absolute;
    inset: -35px;
    z-index: -1;

    background-image: var(--gallery-blur-image, none);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    filter: blur(35px) brightness(.65) saturate(1.15);
    transform: scale(1.08);

    pointer-events: none;
}

/* Imagen original: siempre completa */
#vehicleDetailModal .gallery-main img {
    position: relative !important;
    z-index: 1;
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;
    object-position: center !important;
}

/* Flechas y contador por encima de la fotografía */
#vehicleDetailModal .gallery-arrow,
#vehicleDetailModal .gallery-counter {
    z-index: 5 !important;
}

/* ============================================
   AUTOMARKET - GALERÍA DE TAMAÑO FIJO
   Todas las fotos mantienen la misma altura
============================================ */

#vehicleDetailModal .gallery-main {
    position: relative !important;

    width: 100% !important;
    height: 560px !important;
    min-height: 560px !important;
    max-height: 560px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;
    border-radius: 14px !important;

    background: #172033 !important;
    isolation: isolate;
}

/* Fondo desenfocado tipo Facebook */
#vehicleDetailModal .gallery-main::before {
    content: "";
    position: absolute;
    inset: -35px;
    z-index: -1;

    background-image: var(--gallery-blur-image, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    filter: blur(35px) brightness(.65);
    transform: scale(1.1);

    pointer-events: none;
}

/* Fotografía original sin recortes */
#vehicleDetailModal .gallery-main img {
    position: relative !important;
    z-index: 1;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: 100% !important;
    max-height: 100% !important;

    object-fit: contain !important;
    object-position: center !important;
}

/* Flechas y contador siempre visibles */
#vehicleDetailModal .gallery-arrow,
#vehicleDetailModal .gallery-counter {
    z-index: 5 !important;
}

/* TABLET */
@media (max-width: 900px) {
    #vehicleDetailModal .gallery-main {
        height: 450px !important;
        min-height: 450px !important;
        max-height: 450px !important;
    }
}

/* CELULAR */
@media (max-width: 600px) {
    #vehicleDetailModal .gallery-main {
        height: 360px !important;
        min-height: 360px !important;
        max-height: 360px !important;

        border-radius: 0 !important;
    }
}

/* ============================================
   AUTOMARKET - GALERÍA MÁS ALTA
============================================ */

/* ESCRITORIO */
@media (min-width: 901px) {

    #vehicleDetailModal .gallery-main {
        width: 100% !important;

        height: 76dvh !important;
        min-height: 76dvh !important;
        max-height: 76dvh !important;

        position: relative !important;
        overflow: hidden !important;
        border-radius: 14px !important;
    }

    #vehicleDetailModal .gallery-main img {
        width: 100% !important;
        height: 100% !important;

        object-fit: contain !important;
        object-position: center !important;
    }

}

/* TABLET */
@media (min-width: 601px) and (max-width: 900px) {

    #vehicleDetailModal .gallery-main {
        height: 65dvh !important;
        min-height: 65dvh !important;
        max-height: 65dvh !important;
    }

}

/* CELULAR */
@media (max-width: 600px) {

    #vehicleDetailModal .gallery-main {
        height: 55dvh !important;
        min-height: 55dvh !important;
        max-height: 55dvh !important;
    }

}

/* GALERÍA MÁS GRANDE - AUTOMARKET */

@media (min-width: 901px) {
    #vehicleDetailModal .gallery-main {
        height: 85dvh !important;
        min-height: 85dvh !important;
        max-height: 85dvh !important;
    }

    #vehicleDetailModal .gallery-main img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center !important;
    }
}

/* ==========================================
   AUTOMARKET - MODAL PREMIUM
========================================== */

#vehicleDetailModal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

#vehicleDetailModal.hidden {
    display: none !important;
}

#vehicleDetailModal .vehicle-detail-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 22, 42, .75);
    backdrop-filter: blur(6px);
}

#vehicleDetailModal .vehicle-detail-card {
    position: relative;
    width: min(1320px, 100%);
    max-width: 1320px;
    max-height: 94dvh;
    overflow-y: auto;
    background: #fff;
    border-radius: 20px;
    padding: 0;
    box-shadow: 0 25px 90px rgba(0,0,0,.28);
}

#vehicleDetailModal .vehicle-detail-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 30;
    width: 38px;
    height: 38px;
    border: 1px solid #e2e8f0;
    border-radius: 50%;
    background: #fff;
    color: #334155;
    cursor: pointer;
}

#vehicleDetailModal .am-detail-top {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: 26px;
    padding: 28px;
    align-items: start;
}

#vehicleDetailModal .am-detail-gallery,
#vehicleDetailModal .am-detail-summary {
    min-width: 0;
}

#vehicleDetailModal .am-gallery-main {
    position: relative;
    width: 100%;
    height: 440px;
    border-radius: 14px;
    overflow: hidden;
    background: #f5f7fb;
}

#vehicleDetailModal .am-gallery-main img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#vehicleDetailModal .am-photo-count {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    padding: 9px 12px;
    border-radius: 9px;
    background: rgba(15,23,42,.75);
    color: white;
    font-size: 12px;
    font-weight: 700;
}

#vehicleDetailModal .am-detail-favorite {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 0;
    background: white;
    color: #334155;
    display: grid;
    place-items: center;
    cursor: pointer;
}

#vehicleDetailModal .am-detail-favorite.activo {
    color: #e11d48;
}

#vehicleDetailModal .gallery-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.94);
    color: #152b4a;
    cursor: pointer;
}

#vehicleDetailModal .gallery-prev { left: 14px; }
#vehicleDetailModal .gallery-next { right: 14px; }

#vehicleDetailModal .gallery-counter {
    position: absolute;
    bottom: 14px;
    right: 14px;
    background: rgba(15,23,42,.76);
    color: #fff;
    padding: 7px 12px;
    border-radius: 20px;
    font-size: 12px;
}

#vehicleDetailModal .am-gallery-thumbnails {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    overflow-x: auto;
    padding: 2px 0 8px;
}

#vehicleDetailModal .am-gallery-thumbnails .gallery-thumbnail {
    flex: 0 0 94px;
    width: 94px;
    height: 72px;
    border: 2px solid transparent;
    border-radius: 10px;
    overflow: hidden;
    background: #f1f5f9;
    padding: 0;
    cursor: pointer;
}

#vehicleDetailModal .am-gallery-thumbnails .gallery-thumbnail.active {
    border-color: #2563eb;
}

#vehicleDetailModal .am-gallery-thumbnails img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#vehicleDetailModal .am-detail-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

#vehicleDetailModal .am-condition-badge,
#vehicleDetailModal .am-featured-badge {
    font-size: 11px;
    font-weight: 800;
    padding: 7px 11px;
    border-radius: 6px;
}

#vehicleDetailModal .am-condition-badge {
    background: #eaf2ff;
    color: #2563eb;
}

#vehicleDetailModal .am-featured-badge {
    background: #fff4dc;
    color: #b7791f;
}

#vehicleDetailModal .am-detail-title {
    font-size: clamp(24px, 2.3vw, 32px);
    font-weight: 800;
    line-height: 1.18;
    color: #0f2545;
    margin: 0 0 6px;
}

#vehicleDetailModal .am-detail-title span {
    font-weight: 700;
}

#vehicleDetailModal .am-detail-version {
    color: #64748b;
    font-size: 13px;
    margin: 0 0 10px;
}

#vehicleDetailModal .am-detail-price {
    color: #1763dd;
    font-size: clamp(27px, 2.7vw, 38px);
    font-weight: 700;
    margin:  0;
}

#vehicleDetailModal .am-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    color: #64748b;
    font-size: 12px;
    margin-bottom: 18px;
}

#vehicleDetailModal .am-detail-meta i {
    margin-right: 5px;
}

#vehicleDetailModal .am-detail-specs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
}

#vehicleDetailModal .am-spec {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 12px;
    background: #f7f9fc;
    border: 1px solid #edf1f6;
    border-radius: 10px;
}

#vehicleDetailModal .am-spec-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    color: #2563eb;
    background: #eaf2ff;
    border-radius: 9px;
}

#vehicleDetailModal .am-spec small,
#vehicleDetailModal .am-spec strong {
    display: block;
}

#vehicleDetailModal .am-spec small {
    color: #64748b;
    font-size: 10px;
    margin-bottom: 4px;
}

#vehicleDetailModal .am-spec strong {
    color: #1e293b;
    font-size: 12px;
    overflow-wrap: anywhere;
}

#vehicleDetailModal .am-seller {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding: 13px;
    border: 1px solid #e5eaf1;
    border-radius: 12px;
}

#vehicleDetailModal .am-seller-avatar {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #eaf2ff;
    color: #2563eb;
    font-size: 19px;
}

#vehicleDetailModal .am-seller small,
#vehicleDetailModal .am-seller strong,
#vehicleDetailModal .am-seller span {
    display: block;
}

#vehicleDetailModal .am-seller small,
#vehicleDetailModal .am-seller span {
    color: #64748b;
    font-size: 11px;
}

#vehicleDetailModal .am-seller strong {
    color: #172b4d;
    font-size: 14px;
    margin: 3px 0;
}

#vehicleDetailModal .am-contact-row {
    display: flex;
    gap: 10px;
    margin-top: 13px;
}

#vehicleDetailModal .am-whatsapp,
#vehicleDetailModal .am-phone,
#vehicleDetailModal .am-share {
    min-height: 44px;
    border-radius: 9px;
    font-weight: 700;
    cursor: pointer;
}

#vehicleDetailModal .am-whatsapp {
    flex: 1;
    border: 0;
    background: #18b765;
    color: #fff;
    font-size: 13px;
}

#vehicleDetailModal .am-phone {
    width: 48px;
    border: 0;
    background: #2563eb;
    color: white;
}

#vehicleDetailModal .am-share {
    width: 100%;
    margin-top: 9px;
    border: 1px solid #dce4ee;
    background: #fff;
    color: #334155;
    font-size: 12px;
}

#vehicleDetailModal .am-share i,
#vehicleDetailModal .am-whatsapp i {
    margin-right: 7px;
}

#vehicleDetailModal .am-detail-bottom {
    padding: 0 28px 28px;
}

#vehicleDetailModal .am-detail-tabs {
    display: flex;
    gap: 24px;
    border-bottom: 1px solid #e2e8f0;
    overflow-x: auto;
}

#vehicleDetailModal .am-detail-tab {
    position: relative;
    flex-shrink: 0;
    padding: 16px 2px;
    border: 0;
    background: none;
    color: #64748b;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

#vehicleDetailModal .am-detail-tab.active {
    color: #2563eb;
}

#vehicleDetailModal .am-detail-tab.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    border-radius: 3px;
    background: #2563eb;
}

#vehicleDetailModal .am-detail-panel {
    padding: 22px 0 0;
}

#vehicleDetailModal .am-detail-panel[hidden] {
    display: none !important;
}

#vehicleDetailModal .am-detail-panel h3 {
    color: #14294b;
    font-size: 17px;
    margin: 0 0 12px;
}

#vehicleDetailModal .am-description {
    color: #475569;
    font-size: 13px;
    line-height: 1.8;
    white-space: pre-line;
}

#vehicleDetailModal .am-description-facts {
    display: grid;
    grid-template-columns: repeat(5, minmax(0,1fr));
    gap: 12px;
    margin-top: 20px;
}

#vehicleDetailModal .am-description-facts > div {
    padding: 12px;
    background: #f8fafc;
    border-radius: 10px;
    min-width: 0;
}

#vehicleDetailModal .am-description-facts i {
    color: #2563eb;
    margin-right: 5px;
}

#vehicleDetailModal .am-description-facts span,
#vehicleDetailModal .am-description-facts strong {
    display: block;
    margin-top: 6px;
    font-size: 12px;
}

#vehicleDetailModal .am-description-facts span {
    color: #64748b;
}

#vehicleDetailModal .am-description-facts strong {
    color: #1e293b;
}

#vehicleDetailModal .am-technical-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 12px;
}

#vehicleDetailModal .am-technical-grid > div {
    padding: 13px;
    border-radius: 9px;
    background: #f8fafc;
}

#vehicleDetailModal .am-technical-grid span,
#vehicleDetailModal .am-technical-grid strong {
    display: block;
    font-size: 12px;
}

#vehicleDetailModal .am-technical-grid span {
    color: #64748b;
    margin-bottom: 5px;
}

#vehicleDetailModal .am-technical-grid strong {
    color: #1e293b;
}

/* TABLET */
@media (max-width: 950px) {
    #vehicleDetailModal .am-detail-top {
        grid-template-columns: 1fr;
    }

    #vehicleDetailModal .am-gallery-main {
        height: 420px;
    }

    #vehicleDetailModal .am-description-facts {
        grid-template-columns: repeat(3, minmax(0,1fr));
    }
}

/* MÓVIL */
@media (max-width: 600px) {
    #vehicleDetailModal {
        padding: 0;
    }

    #vehicleDetailModal .vehicle-detail-card {
        width: 100%;
        max-height: 100dvh;
        height: 100dvh;
        border-radius: 0;
    }

    #vehicleDetailModal .am-detail-top {
        padding: 12px;
        gap: 18px;
    }

    #vehicleDetailModal .am-gallery-main {
        height: 300px;
        border-radius: 10px;
    }

    #vehicleDetailModal .am-gallery-thumbnails .gallery-thumbnail {
        flex-basis: 72px;
        width: 72px;
        height: 58px;
    }

    #vehicleDetailModal .am-detail-title {
        font-size: 25px;
    }

    #vehicleDetailModal .am-detail-price {
        font-size: 30px;
    }

    #vehicleDetailModal .am-detail-specs {
        gap: 8px;
    }

    #vehicleDetailModal .am-spec {
        padding: 9px;
        gap: 7px;
    }

    #vehicleDetailModal .am-spec-icon {
        width: 29px;
        height: 29px;
    }

    #vehicleDetailModal .am-detail-bottom {
        padding: 0 12px 24px;
    }

    #vehicleDetailModal .am-detail-tabs {
        gap: 18px;
    }

    #vehicleDetailModal .am-description-facts {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    #vehicleDetailModal .am-technical-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    #vehicleDetailModal .vehicle-detail-close {
        top: 9px;
        right: 9px;
    }
}

/* ==============================================
   AUTOMARKET - PANEL PREMIUM DE DETALLE
============================================== */

#vehicleDetailModal .am-summary-premium {
    background: #fff;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 19px;
    min-width: 0;
    box-sizing: border-box;
    color: #17243b;
}

#vehicleDetailModal .am-premium-badges {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

#vehicleDetailModal .am-detail-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

#vehicleDetailModal .am-condition-badge,
#vehicleDetailModal .am-featured-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding:5px 11px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 800;
}

#vehicleDetailModal .am-condition-badge {
    background: #eaf4ff;
    color: #1766b2;
}

#vehicleDetailModal .am-featured-badge {
    background: #fff3d9;
    color: #a66a08;
}

#vehicleDetailModal .am-premium-top-actions {
    display: flex;
    gap: 7px;
}

#vehicleDetailModal .am-premium-icon-btn {
    position: static;
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    border: 1px solid #e4eaf2;
    border-radius: 10px;
    background: #fff;
    color: #34465e;
    cursor: pointer;
    font-size: 15px;
}

#vehicleDetailModal .am-premium-icon-btn.activo {
    color: #e93b60;
    background: #fff0f3;
    border-color: #ffd7e1;
}

#vehicleDetailModal .am-premium-heading {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#vehicleDetailModal .am-detail-title {
    margin: 0;
    font-size: clamp(23px, 2.1vw, 31px);
    line-height: 1.18;
    font-weight: 850;
    letter-spacing: -.7px;
    color: #14233c;
}

#vehicleDetailModal .am-detail-title span {
    color: inherit;
}

#vehicleDetailModal .am-premium-subtitle {
    margin: 0;
    font-size: 12px;
    color: #778397;
}

#vehicleDetailModal .am-premium-price-block {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

#vehicleDetailModal .am-premium-price-label {
    font-size: 11px;
    color: #8190a3;
    font-weight: 600;
}

#vehicleDetailModal .am-detail-price {
    font-size: clamp(29px, 2.6vw, 39px);
    font-weight: 900;
    line-height: 1.1;
    color: #1766d1;
    letter-spacing: -1px;
}

#vehicleDetailModal .am-premium-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 18px;
    padding-bottom: 17px;
    border-bottom: 1px solid #edf0f5;
    font-size: 12px;
    color: #728197;
}

#vehicleDetailModal .am-premium-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#vehicleDetailModal .am-premium-section-heading,
#vehicleDetailModal .am-premium-seller-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

#vehicleDetailModal .am-premium-section-heading h3,
#vehicleDetailModal .am-premium-seller-heading h3,
#vehicleDetailModal .am-premium-quick-actions h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    color: #1d2e47;
}

#vehicleDetailModal .am-premium-section-heading > span {
    font-size: 10px;
    color: #8a97a9;
}

#vehicleDetailModal .am-premium-specs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

#vehicleDetailModal .am-premium-specs .am-spec {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 12px;
    border: 1px solid #eaf0f6;
    border-radius: 12px;
    background: #f8fafc;
    box-sizing: border-box;
}

#vehicleDetailModal .am-premium-specs .am-spec-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    background: #e9f2ff;
    border-radius: 9px;
    color: #2874d1;
    font-size: 14px;
}

#vehicleDetailModal .am-premium-specs .am-spec > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#vehicleDetailModal .am-premium-specs small {
    font-size: 10px;
    color: #8190a3;
    line-height: 1.2;
}

#vehicleDetailModal .am-premium-specs strong {
    font-size: 12px;
    color: #21314a;
    font-weight: 800;
    overflow-wrap: anywhere;
}

#vehicleDetailModal .am-premium-seller {
    border: 1px solid #e9edf3;
    border-radius: 14px;
    padding: 16px;
    background: #fff;
}

#vehicleDetailModal .am-premium-seller-heading {
    margin-bottom: 13px;
}

#vehicleDetailModal .am-premium-seller .am-seller {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
}

#vehicleDetailModal .am-premium-seller .am-seller-avatar {
    flex: 0 0 43px;
    width: 43px;
    height: 43px;
    border-radius: 50%;
    background: #e9f2ff;
    color: #276fd1;
    display: grid;
    place-items: center;
    font-size: 19px;
}

#vehicleDetailModal .am-premium-seller-info {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

#vehicleDetailModal .am-premium-seller-info small,
#vehicleDetailModal .am-premium-seller-info span {
    font-size: 11px;
    color: #8491a3;
}

#vehicleDetailModal .am-premium-seller-info strong {
    font-size: 14px;
    color: #1b2b45;
}

#vehicleDetailModal .am-premium-seller-type {
    font-size: 10px;
    color: #3d719f;
    background: #edf5ff;
    padding: 7px 9px;
    border-radius: 7px;
    white-space: nowrap;
}

#vehicleDetailModal .am-premium-contact {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

#vehicleDetailModal .am-premium-contact .am-contact-row {
    display: flex;
    gap: 9px;
}

#vehicleDetailModal .am-premium-contact .am-whatsapp {
    flex: 1;
    min-width: 0;
    min-height: 48px;
    border: 0;
    border-radius: 11px;
    background: #19a865;
    color: white;
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
}

#vehicleDetailModal .am-premium-contact .am-phone {
    flex: 0 0 49px;
    width: 49px;
    min-height: 48px;
    border: 1px solid #dbe6f2;
    border-radius: 11px;
    background: #eff6ff;
    color: #256bc4;
    cursor: pointer;
}

#vehicleDetailModal .am-premium-contact .am-share {
    width: 100%;
    min-height: 41px;
    border: 1px solid #e2e9f2;
    border-radius: 10px;
    background: white;
    color: #354963;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

#vehicleDetailModal .am-premium-contact button:disabled,
#vehicleDetailModal .am-premium-quick-grid button:disabled {
    opacity: .5;
    cursor: not-allowed;
}

#vehicleDetailModal .am-premium-quick-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#vehicleDetailModal .am-premium-quick-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

#vehicleDetailModal .am-premium-quick-grid button {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 49px;
    padding: 10px 12px;
    border: 1px solid #e8edf4;
    border-radius: 11px;
    background: #f8fafc;
    color: #30425c;
    font-size: 11px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

#vehicleDetailModal .am-premium-quick-grid button i {
    color: #347bd1;
    font-size: 16px;
}

#vehicleDetailModal .am-premium-quick-grid button:hover {
    background: #edf5ff;
    border-color: #c8dfff;
}

#vehicleDetailModal .am-premium-safety {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0;
    padding: 12px;
    border-radius: 10px;
    background: #f3f7fc;
    color: #687a90;
    font-size: 11px;
    line-height: 1.5;
}

#vehicleDetailModal .am-premium-safety i {
    color: #3974bd;
    margin-top: 2px;
}

/* TABLET */
@media (max-width: 1100px) {
    #vehicleDetailModal .am-summary-premium {
        padding: 20px;
        gap: 16px;
    }

    #vehicleDetailModal .am-premium-specs .am-spec {
        padding: 9px;
        gap: 7px;
    }
}

/* CELULARES */
@media (max-width: 768px) {
    #vehicleDetailModal .am-summary-premium {
        width: 100%;
        padding: 18px 15px 24px;
        gap: 17px;
    }

    #vehicleDetailModal .am-detail-title {
        font-size: 25px;
    }

    #vehicleDetailModal .am-detail-price {
        font-size: 34px;
    }

    #vehicleDetailModal .am-premium-specs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    #vehicleDetailModal .am-premium-specs .am-spec {
        padding: 10px;
    }

    #vehicleDetailModal .am-premium-specs .am-spec-icon {
        flex-basis: 30px;
        width: 30px;
        height: 30px;
    }

    #vehicleDetailModal .am-premium-seller-type {
        display: none;
    }
}

@media (max-width: 360px) {
    #vehicleDetailModal .am-premium-specs .am-spec-icon {
        display: none;
    }

    #vehicleDetailModal .am-premium-quick-grid {
        gap: 7px;
    }
}

/* VISUALIZACIONES DEL VEHÍCULO */

#vehicleDetailModal .am-vehicle-views {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #728197;
    white-space: nowrap;
}

#vehicleDetailModal .am-vehicle-views i {
    font-size: 14px;
    color: #347bd1;
}

#vehicleDetailModal .am-vehicle-views strong {
    font-weight: 800;
    color: #263d5c;
}

@media (max-width: 768px) {
    #vehicleDetailModal .am-premium-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 15px;
    }

    #vehicleDetailModal .am-vehicle-views {
        font-size: 11px;
    }
}

/* CARACTERÍSTICAS PRINCIPALES - 3 POR FILA */

#vehicleDetailModal .am-premium-specs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

#vehicleDetailModal .am-premium-specs .am-spec {
    padding: 10px 8px;
    gap: 7px;
    min-width: 0;
}

#vehicleDetailModal .am-premium-specs .am-spec-icon {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    font-size: 12px;
}

#vehicleDetailModal .am-premium-specs strong {
    font-size: 11px;
    overflow-wrap: anywhere;
}

/* CELULARES: 2 POR FILA */
@media (max-width: 600px) {
    #vehicleDetailModal .am-premium-specs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* =====================================
   AUTOMARKET - CABECERA MÁS COMPACTA
===================================== */

#vehicleDetailModal .am-summary-premium {
    gap: 12px;
}

/* Etiquetas Seminuevo y Destacado */
#vehicleDetailModal .am-premium-badges {
    margin-bottom: 0;
}

/* Título y subtítulo */
#vehicleDetailModal .am-premium-heading {
    gap: 3px;
    margin: 0;
}

#vehicleDetailModal .am-detail-title {
    margin: 0;
    line-height: 1.12;
}

#vehicleDetailModal .am-premium-subtitle {
    margin: 0;
    line-height: 1.3;
}

/* Precio */
#vehicleDetailModal .am-premium-price-block {
    gap: 2px;
    margin: 0;
}

#vehicleDetailModal .am-detail-price {
    margin: 0;
    line-height: 1.05;
}

/* Fecha, ubicación y visualizaciones */
#vehicleDetailModal .am-premium-meta {
    gap: 8px 14px;
    margin: 0;
    padding-bottom: 12px;
    line-height: 1.3;
}

/* Responsive */
@media (max-width: 768px) {
    #vehicleDetailModal .am-summary-premium {
        gap: 10px;
    }

    #vehicleDetailModal .am-detail-title {
        font-size: 24px;
    }

    #vehicleDetailModal .am-detail-price {
        font-size: 32px;
    }
}

/* =========================================
   AUTOMARKET - 3 BOTONES EN UNA SOLA FILA
========================================= */

#vehicleDetailModal .am-premium-contact {
    width: 100%;
    display: block;
}

#vehicleDetailModal .am-premium-contact .am-contact-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 8px;
    width: 100%;
}

#vehicleDetailModal .am-premium-contact .am-whatsapp,
#vehicleDetailModal .am-premium-contact .am-phone,
#vehicleDetailModal .am-premium-contact .am-share {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 0;
    height: 45px;
    min-height: 45px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    box-sizing: border-box;
}

/* WHATSAPP */
#vehicleDetailModal .am-premium-contact .am-whatsapp {
    flex: 1.5 1 0;
    background: #12a765;
    color: #fff;
    border: none;
}

/* LLAMAR */
#vehicleDetailModal .am-premium-contact .am-phone {
    flex: 0.7 1 0;
    width: auto;
    background: #eff5ff;
    color: #1766c1;
    border: 1px solid #dbe7f7;
}

/* COMPARTIR */
#vehicleDetailModal .am-premium-contact .am-share {
    flex: 1.1 1 0;
    width: auto;
    background: #f5f8fc;
    color: #245ca8;
    border: 1px solid #dbe7f7;
}

#vehicleDetailModal .am-premium-contact button:hover {
    filter: brightness(0.96);
}

/* PANTALLAS PEQUEÑAS */
@media (max-width: 600px) {
    #vehicleDetailModal .am-premium-contact .am-contact-row {
        gap: 5px;
    }

    #vehicleDetailModal .am-premium-contact .am-whatsapp,
    #vehicleDetailModal .am-premium-contact .am-phone,
    #vehicleDetailModal .am-premium-contact .am-share {
        padding: 0 6px;
        font-size: 10px;
        gap: 4px;
        height: 41px;
        min-height: 41px;
    }

    #vehicleDetailModal .am-premium-contact .am-whatsapp {
        flex: 1.5 1 0;
    }

    #vehicleDetailModal .am-premium-contact .am-phone {
        flex: 0.65 1 0;
    }

    #vehicleDetailModal .am-premium-contact .am-share {
        flex: 1.1 1 0;
    }

    #vehicleDetailModal .am-premium-contact .am-share span {
        font-size: 0;
    }

    #vehicleDetailModal .am-premium-contact .am-share span::after {
        content: "Compartir";
        font-size: 10px;
    }
}

/* CORREGIR ALINEACIÓN DE LOS 3 BOTONES */

.vehicle-detail-summary .detail-share-actions {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    align-self: stretch !important;
}

.vehicle-detail-summary .detail-contact-actions {
    display: grid !important;
    grid-template-columns: 1.7fr 0.9fr 1.3fr !important;
    align-items: stretch !important;
    gap: 8px !important;
}

.vehicle-detail-summary .detail-contact-actions .detail-whatsapp,
.vehicle-detail-summary .detail-contact-actions .detail-call,
.vehicle-detail-summary .detail-share-actions .btn-compartir-vehiculo {
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* =========================================
   AUTOMARKET - ALINEACIÓN DEFINITIVA
   WHATSAPP | LLAMAR | COMPARTIR
========================================= */

#vehicleDetailModal .am-premium-contact {
    width: 100% !important;
    margin: 16px 0 0 !important;
    padding: 0 !important;
}

#vehicleDetailModal .am-contact-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1.7fr)
                           minmax(0, 0.9fr)
                           minmax(0, 1.3fr) !important;
    gap: 8px !important;
    align-items: stretch !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Los tres botones exactamente iguales en altura */
#vehicleDetailModal .am-contact-row > button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: stretch !important;

    width: 100% !important;
    min-width: 0 !important;
    height: 46px !important;
    min-height: 46px !important;

    margin: 0 !important;
    padding: 0 8px !important;

    transform: none !important;
    position: static !important;
    box-sizing: border-box !important;

    border-radius: 10px !important;
    gap: 7px !important;

    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

/* Eliminar cualquier desplazamiento del botón Compartir */
#vehicleDetailModal .am-contact-row > .am-share {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    top: auto !important;
    bottom: auto !important;
}

/* Móvil: mantener los tres en una fila */
@media (max-width: 600px) {
    #vehicleDetailModal .am-contact-row {
        grid-template-columns: minmax(0, 1.5fr)
                               minmax(0, 0.7fr)
                               minmax(0, 1fr) !important;
        gap: 5px !important;
    }

    #vehicleDetailModal .am-contact-row > button {
        height: 42px !important;
        min-height: 42px !important;
        font-size: 10px !important;
        padding: 0 4px !important;
        gap: 4px !important;
    }

    #vehicleDetailModal .am-share span {
        font-size: 0 !important;
    }

    #vehicleDetailModal .am-share span::after {
        content: "Compartir";
        font-size: 10px;
    }
}

/* Ocultar paneles inactivos */
.am-detail-panel[hidden] {
    display: none !important;
}

/* Pestaña activa */
.am-detail-tab.active {
    color: #2563eb;
    border-bottom: 3px solid #2563eb;
    font-weight: 700;
}

/* Pestañas */
.am-detail-tab {
    cursor: pointer;
    transition: color 0.2s ease;
}

.am-detail-tab:hover {
    color: #2563eb;
}

#vehicleDetailModal .am-detail-panel[hidden] {
    display: none !important;
}

#vehicleDetailModal .am-detail-panel:not([hidden]) {
    display: block !important;
}

#vehicleDetailModal .am-detail-tab {
    pointer-events: auto;
    cursor: pointer;
}

#vehicleDetailModal .am-detail-tab.active {
    color: #2563eb !important;
    font-weight: 700;
}



/* =========================================
   MOTORPLAZ - CORRECCIÓN 4 COLUMNAS
========================================= */

@media (min-width: 1400px) {

    /* Contenedor principal más ancho */
    .container.marketplace-layout {
        width: calc(100% - 40px) !important;
        max-width: 1800px !important;
        margin-left: auto !important;
        margin-right: auto !important;

        grid-template-columns: 245px minmax(0, 1fr) !important;
        column-gap: 18px !important;
    }

    /* Panel lateral */
    .marketplace-layout .search-panel {
        width: 245px !important;
        min-width: 0 !important;
    }

    /* Área de resultados */
    .marketplace-layout .marketplace-results {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    /* Eliminar límites internos de ancho */
    .marketplace-results #vehiculos {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
    }

    /* FORZAR 4 VEHÍCULOS POR FILA */
    .marketplace-results #vehicleGrid {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 14px !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    /* Evitar anchos mínimos en las tarjetas */
    #vehicleGrid > .vehicle-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
    }

    /* Imágenes */
    #vehicleGrid .vehicle-image-container {
        width: 100% !important;
        min-width: 0 !important;
    }

    #vehicleGrid .card-gallery-image {
        width: 100% !important;
    }

    /* Información compacta */
    #vehicleGrid .vehicle-body {
        padding: 12px !important;
    }

    #vehicleGrid .vehicle-title {
        font-size: 17px !important;
    }

    #vehicleGrid .vehicle-price {
        font-size: 22px !important;
    }

    #vehicleGrid .card-spec span {
        font-size: 10px !important;
    }

    #vehicleGrid .card-spec strong {
        font-size: 12px !important;
    }

    #vehicleGrid .vehicle-actions button {
        font-size: 14px !important;
        padding: 10px 4px !important;
    }
}

/* ==========================================
   MOTORPLAZ - TARJETAS MÁS COMPACTAS
========================================== */

/* Contenido interior */
#vehicleGrid .vehicle-body {
    padding: 10px 12px !important;
}

/* Título del vehículo */
#vehicleGrid .vehicle-title {
    margin: 0 0 5px !important;
    line-height: 1.2 !important;
}

/* Ubicación */
#vehicleGrid .vehicle-location {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}

/* Características */
#vehicleGrid .card-specs {
    margin-top: 10px !important;
    margin-bottom: 8px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    gap: 4px !important;
}

/* Reducir separación entre iconos y textos */
#vehicleGrid .card-spec {
    gap: 3px !important;
}

#vehicleGrid .card-spec i {
    margin-bottom: 3px !important;
}

#vehicleGrid .card-spec span,
#vehicleGrid .card-spec strong {
    line-height: 1.2 !important;
}

/* Precio */
#vehicleGrid .vehicle-price {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
    line-height: 1.1 !important;
}

/* Botones */
#vehicleGrid .vehicle-actions {
    margin-top: 6px !important;
    margin-bottom: 0 !important;
    gap: 8px !important;
}

#vehicleGrid .vehicle-actions button,
#vehicleGrid .vehicle-actions a {
    min-height: 39px !important;
    height: 39px !important;
    padding: 6px 8px !important;
}

/* Evitar altura mínima innecesaria */
#vehicleGrid .vehicle-card {
    min-height: 0 !important;
}

/* Responsive */
@media (max-width: 600px) {
    #vehicleGrid .vehicle-body {
        padding: 8px !important;
    }

    #vehicleGrid .card-specs {
        margin-top: 7px !important;
        margin-bottom: 6px !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    #vehicleGrid .vehicle-price {
        margin-top: 6px !important;
        margin-bottom: 6px !important;
    }
}