/* vo.css — auto-generated from vo/*.css sources */

/* ══ Global Variables & Reset ══ */
* {
  font-family: 'Urbanist', sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 16px;
  --base-color: #fff;
  --main-color: #DA291C;
  --main-font-color: #000000;
  --main-bg-color: #F0EFF0;
  --secondary-bg-color: #CCCACB;
  --error-color: #F23702;
}

p {
  margin: 0;
}

h2,
h3,
h3>span,
h4 {
  font-weight: 600;
}

button.btn-default {
  border: none;
  color: #fff;
  box-shadow: 0px 3.72063px 10px rgba(0, 0, 0, 0.2);
  border-radius: 30px;
  background: #FF5E00;
  font-size: 14px;
  line-height: 17px;
  padding: 12px 20px;
  font-weight: 700;
}

button.btn-default:hover {
  background-color: #FF5E00;
  opacity: 0.9;
  color: var(--base-color);
}

button.btn-link {
  border: none;
  background: transparent;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-size: 10px;
  line-height: 12px;
}

button.btn-default:disabled {
  background-color: var(--main-bg-color);
  cursor: not-allowed;
  user-select: none;
  pointer-events: none;
}

button.btn-default:disabled.loading {
  background: var(--main-bg-color) url(../img/icons/loader.gif) no-repeat center;
  background-size: contain;
}

/* ══ header.css ══ */
html, body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

.header-2024 {
    position: relative;
    width: 100%;
}

.header-2024.sticky {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out;
}

.header-2024.sticky.visible {
    transform: translateY(0);
}

/* Estilos para el header principal */
.header-2024 .main-header {
    background: #0E3A2F;
    box-shadow: 0 6.838px 13.675px 0 rgba(0, 0, 0, 0.33);
}

.header-2024 .main-header .container {
    display: flex;
    max-width: 1440px;
    height: 81px;
    padding: 17.778px 100px;
    justify-content: space-between;
    align-items: center;
}

.header-2024 .main-logo img {
    width: 176px;
    height: 46px;
    object-fit: contain;
}

.header-2024 .cta-button {
    display: none;
    /* Oculto por defecto */
    padding: 12px 24px;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
    background: #FF5E00;
    color: #FFF;
    font-family: 'Urbanist', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: normal;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Mostrar el botón solo cuando el header es sticky y visible */
.header-2024.sticky.visible .cta-button {
    display: flex;
}

.header-2024 .cta-button:hover {
    background: #F5F5F5;
}


/* Media queries para responsive */
@media (max-width: 768px) {

    .header-2024 .main-header .container {
        height: auto;
        padding: 15px;
        justify-content: space-between;
    }

    .header-2024 .main-logo img {
        width: 176px;
        height: 46px;
        flex-shrink: 0;
    }

    .header-2024 .cta-button {
        width: 180px;
        height: 30px;
        padding: 6px 12px;
        font-size: 14px;
    }

    .header-2024 .top-bar-content {
        flex-direction: column;
        padding: 12px 0px;
        gap: 12px;
    }

    .header-2024 .alert-text {
        font-size: 14px;
    }

}

/* En pantallas muy pequeñas, colocar el botón debajo del logo y centrar ambos */
@media (max-width: 400px) {
    .header-2024.sticky.visible .main-header .container {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        height: auto;
        padding: 10px 12px;
    }

    .header-2024.sticky.visible .main-logo img {
        margin: 0 auto;
        display: block;
    }

    .header-2024.sticky.visible .cta-button {
        display: flex;
        width: 100%;
        max-width: 220px;
        justify-content: center;
    }
}

/* ══ banner.css ══ */
/* ========================================
   HERO BANNER - MAIN STYLES
   ======================================== */

.hero-banner {
  position: relative;
  height: 531px;
  overflow: hidden;
  background-color: #00CB7B;
}

/* ---- Elipses decorativas (CSS puro) ---- */
.hero-ellipse {
  position: absolute;
  border-radius: 50%;
  background-color: #0E3A2F;
  aspect-ratio: 1 / 1;
  z-index: 0;
  /* Desktop: 241px, centradas verticalmente, alineadas a la derecha */
  width: 241px;
  top: 60%;
  transform: translateY(-50%);
}

.hero-ellipse--1 {
  left: 46%;
}

.hero-ellipse--2 {
  left: 66%;
}

.hero-ellipse--3 {
  left: 85%;
}

/* Car image layer - separate from background */
.hero-cars {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  pointer-events: none;
}

/* Vehicle block: price + cars grouped together */
.hero-vehicle-block {
  position: absolute;
  top: 68%;
  left: 70%;
  transform: translate(-50%, -50%);
  width: 30%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  overflow: visible;
}

/* ---- Landing de modelo concreto: coche más pequeño ---- */
.hero-banner--model .hero-vehicle-block {
  width: 30%;
}



.container.hero-content {
  position: relative;
  display: flex;
  justify-content: flex-start;
  max-width: 1440px;
  width: 100%;
  padding: 60px 90px;
  margin: 0 auto;
  z-index: 1;
  height: 100%;
}

.hero-left,
.hero-right {
  flex: 1;
}

.hero-right {
  display: flex;
  gap: 6px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  max-width: 45%;
  margin-right: auto;
}

/* ========================================
     TYPOGRAPHY
     ======================================== */

.hero-right p.pretitle {
  color: #FFF;
  font-family: 'Urbanist', sans-serif;
  font-size: 21px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
  letter-spacing: 1.04px;

}

.hero-right p {
  color: #FFF;
  font-family: 'Urbanist', sans-serif;
  font-size: 15px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
  letter-spacing: 0.6px;
}

.hero-right h1 {
  color: #0E3A2F;
  font-family: 'Urbanist', sans-serif;
  font-size: 42px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.1;
  margin-bottom: 10px;
  margin-top: 2px;
}

.hero-right p del {
  color: #c1002f;
  font-weight: 700;
  text-decoration-color: #c1002f;
}

/* ========================================
     BUTTONS
     ======================================== */

.hero-banner .container .hero-right button {
  display: flex;
  padding: 10px 20px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  border-radius: 30px;
  background: #FF5E00;
  color: #FFF;
  text-align: center;
  max-width: 336px;
  font-family: 'Urbanist', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.hero-banner .container .hero-right button:hover {
  background: #FF5E00;
  opacity: 0.9;
  color: var(--primario-blanco, #FFF);
}

.hero-right .btn-default {
  display: flex;
  padding: 15px 20px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 30px;
  background: #000;
  border: none;
  color: #fff;
  text-align: center;
  font-family: 'Urbanist', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.96px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.hero-right .btn-default:hover {
  background: #fff;
  color: #000;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ========================================
     FEATURE LISTS
     ======================================== */

.feature-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 25px;
}

.feature-list.responsive {
  display: none;
}

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

.feature-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.feature-item span {
  color: #0E3A2F;
  font-family: 'Urbanist', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.feature-item span strong {
  color: #0E3A2F;
  font-family: 'Urbanist', sans-serif;
  font-size: inherit;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

/* ========================================
     GOOGLE REVIEWS
     ======================================== */

.google-reviews {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 0px;
}

.google-reviews img {
  width: 30px;
  height: auto;
}

.google-reviews .google-logo {
  height: 24px;
  width: auto;
}

.google-reviews .review-text {
  color: var(--primario-White, #FFF);
  text-align: center;
  font-family: 'Urbanist', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.32px;
}

.google-reviews .stars {
  display: flex;
  gap: 4px;
}

.google-reviews .review-count {
  color: var(--primario-White, #FFF);
  text-align: center;
  font-family: 'Urbanist', sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.28px;
}

/* ========================================
     PROMO EXTENDED
     ======================================== */

.hero-right .promo-extended {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  margin-top: 4px;
  letter-spacing: 0.76px;
  background-color: #c1002f;
  padding: 4px 12px;
  border-radius: 0px;
  display: inline-block;
}

.promo-extended-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ========================================
     PRICE CALLOUT OVERLAY
     ======================================== */

.hero-price-callout {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 2;
  white-space: nowrap;
  flex-shrink: 0;
  margin-bottom: 5px;
}

.hero-price-desde {
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  color: #fff;
  font-family: 'Urbanist', sans-serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0.88px;
  text-transform: capitalize;
}

.hero-price-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hero-price-label {
  color: #fff;
  font-family: 'Urbanist', sans-serif;
  font-size: 52px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 1px;
  margin-bottom: -5px;
  white-space: nowrap;
}

.hero-price-amount {
  color: #fff;
  font-family: 'Urbanist', sans-serif;
  font-size: 150px;
  font-weight: 900;
  line-height: 0.8;
  letter-spacing: -4.5px;
  display: inline-flex;
  align-items: baseline;
}

.hero-price-amount small {
  font-size: 90px;
  font-weight: 800;
}

.hero-price-period {
  color: #fff;
  font-family: 'Urbanist', sans-serif;
  font-size: 25px;
  font-weight: 600;
  margin-left: 6px;
  letter-spacing: 1px;
}

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

/* Desktop Large */
@media (max-width: 1262px) {
  .hero-left {
    flex: 0.7;
  }

  .hero-right h1 {
    font-size: 34px;
  }


  .hero-price-amount {
    font-size: 90px;
    letter-spacing: -2.7px;
  }

  .hero-price-amount small {
    font-size: 54px;
  }

  .hero-price-label {
    font-size: 34px;
  }

  /* Elipses intermedias: 180px */
  .hero-ellipse {
    width: 180px;
  }
}

/* Desktop Medium — narrow desktop (769-879px) */
@media (max-width: 879px) {
  .hero-banner {
    height: 500px;
  }

  .container.hero-content {
    align-items: center;
    padding: 30px 24px;
  }

  .hero-right {
    max-width: 48%;
  }

  .hero-right h1 {
    font-size: 28px;
  }

  .hero-left {
    flex: 0.6;
  }

  /* Vehicle block: wider and lower for this narrow viewport */
  .hero-vehicle-block {
    left: 72%;
    width: 55%;
    top: 55%;
  }

  .hero-banner--model .hero-vehicle-block {
    width: 42%;
  }

  .hero-price-callout {
    gap: 4px;
    margin-bottom: 5px;
  }

  .hero-price-amount {
    font-size: 60px;
    letter-spacing: -1.5px;
  }

  .hero-price-amount small {
    font-size: 36px;
  }

  .hero-price-label {
    font-size: 22px;
    margin-bottom: -2px;
  }

  .hero-price-desde {
    font-size: 14px;
  }

  .hero-price-period {
    font-size: 16px;
  }

  /* Elipses: smaller for this range */
  .hero-ellipse {
    width: 150px;
    top: 52%;
  }

  .hero-ellipse--1 {
    left: 50%;
  }

  .hero-ellipse--2 {
    left: 70%;
  }

  .hero-ellipse--3 {
    left: 88%;
  }
}


/* ========================================
     MOBILE — SINGLE CONSOLIDATED BLOCK
     All ≤768px rules in one place. No duplicates.
     Layout: flex column with order (content → cars → features)
     ======================================== */
@media (max-width: 768px) {
  /* --- Banner layout: flex column --- */
  .hero-banner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
    height: auto;
    min-height: unset;
    padding-bottom: 20px;
  }

  /* --- Content block: order 1 --- */
  .container.hero-content {
    padding: 16px 20px 24px;
    position: relative;
    z-index: 2;
    order: 1;
  }

  .hero-right {
    gap: 2px;
    max-width: 100%;
  }

  .hero-right p.pretitle {
    font-size: 20px;
    margin: 0;
  }

  .hero-right p {
    font-size: 18px;
    letter-spacing: 0.64px;
    margin: 0;
  }

  .hero-right h1 {
    font-size: 32px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: 0.96px;
    margin: 2px 0 4px;
  }

  .hero-right .btn-default {
    padding: 10px 20px;
    margin-top: 2px;
  }

  .google-reviews {
    margin-top: 0;
  }

  .google-reviews img {
    width: 26px;
  }

  /* --- Vehicle block: order 2 (price + cars grouped) --- */
  .hero-vehicle-block {
    position: static;
    transform: none;
    width: 90%;
    max-width: 450px;
    margin: 10px auto 0;
    order: 2;
    align-items: center;
  }

  .hero-banner--model .hero-vehicle-block {
    width: 70%;
    max-width: 350px;
  }

  .hero-price-callout {
    position: static;
    transform: none;
    justify-content: center;
    margin: 0 auto 0;
    width: 100%;
    max-width: 380px;
  }

  .hero-price-amount {
    font-size: 75px;
    letter-spacing: -2px;
  }

  .hero-price-amount small {
    font-size: 45px;
  }

  .hero-price-label {
    font-size: 28px;
  }

  .hero-price-desde {
    font-size: 18px;
  }

  .hero-price-period {
    font-size: 20px;
  }

  /* --- Feature lists --- */
  .feature-list {
    margin-bottom: 0px;
  }

  .feature-list.desktop {
    display: none;
  }

  .feature-list.responsive {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    z-index: 3;
    padding: 16px 20px;
    margin: 0;
    width: auto;
    background: transparent;
    color: #0E3A2F;
    order: 3;
  }

  /* --- Elipses mobile: 147px, spacing fijo --- */
  .hero-ellipse {
    width: 147px;
    top: auto;
    bottom: 22%;
    transform: none;
  }

  .hero-ellipse--1 {
    right: auto;
    left: -40px;
  }

  .hero-ellipse--2 {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }

  .hero-ellipse--3 {
    right: -40px;
    left: auto;
  }

  /* --- Desktop paragraph visibility --- */
  .hero-right p.desktop {
    display: none;
  }
}

/* Mobile Medium — ≤580px refinements */
@media (max-width: 580px) {
  .container.hero-content {
    padding: 20px 16px 10px;
  }

  .hero-right {
    gap: 8px;
  }

  .hero-right p {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.64px;
  }

  .feature-item span {
    font-size: 14px;
  }

  .hero-right .btn-default {
    width: 100%;
    font-size: 14px;
    background: #000;
    color: #fff;
  }

  .hero-right .btn-default:hover {
    background: #fff;
    color: #000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .hero-right .promo-extended {
    font-size: 14px;
    padding: 3px 10px;
  }

  .google-reviews {
    margin-top: 0;
    gap: 8px;
  }

  .google-reviews .google-logo {
    height: 20px;
  }

  .google-reviews .review-text,
  .google-reviews .review-count {
    font-size: 12px;
  }

  .google-reviews .stars svg {
    width: 14px;
    height: 14px;
  }
}

/* Mobile Small — ≤569px */
@media (max-width: 569px) {
  .container.hero-content {
    padding: 20px 24px 10px;
  }

  .hero-right {
    gap: 8px;
  }

  .hero-right p {
    font-size: 12px;
  }

  .hero-right h1 {
    font-size: 21px;
    margin-top: 10px;
    line-height: 1.1;
    margin-bottom: 10px;
  }

  .feature-item span {
    font-size: 13px;
  }

  .hero-right .btn-default {
    width: 100%;
    font-size: 14px;
  }

  .feature-list.responsive {
    padding: 10px 20px;
  }
}

/* Mobile Extra Small — ≤366px */
@media (max-width: 366px) {
  .google-reviews {
    gap: 6px;
  }

  .google-reviews img {
    width: 22px;
  }

  .google-reviews .review-text {
    font-size: 13px;
    white-space: nowrap;
  }

  .google-reviews .review-count {
    font-size: 12px;
    white-space: nowrap;
  }

  .google-reviews .stars svg {
    width: 12px;
    height: 12px;
  }

  .hero-right p.pretitle {
    font-size: 16px;
  }

  .hero-right h1 {
    font-size: 18px;
    line-height: 1.2;
  }
}

@media (max-width: 320px) {
  .hero-right h1 {
    font-size: 20px;
    line-height: 1.1;
  }
}

@media (max-width: 280px) {
  .hero-right h1 {
    font-size: 18px;
    line-height: 1.1;
  }
}

/* ========================================
     VISIBILITY FOR DESKTOP/RESPONSIVE PARAGRAPHS
     ======================================== */
@media (min-width: 769px) {
  .hero-right p.responsive {
    display: none;
  }
}

/* ══ below-banner.css ══ */
.below-banner {
    background: #0E3A2F;
    padding: 10px 0;
}

.below-banner-content {
    display: flex;
    max-width: 1440px;
    margin: 0 auto;
    padding: 10px 32.82px;
    justify-content: center;
    align-items: center;
    gap: 13px;
}

.alert-group {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 30px;
}

.alert-icon {
    width: 15.235px;
    height: 20px;
    margin: 0;
}

.alert-text {
    color: var(--primario-blanco, #FFF);
    font-family: 'Urbanist', sans-serif;
    font-size: 16.51px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.units-counter {
    color: #0E3A2F;
    text-align: center;
    leading-trim: both;
    text-edge: cap;
    font-family: 'Urbanist', sans-serif;
    font-size: 15.333px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    display: flex;
    align-items: center;
    gap: 7px;
}

.counter-text {
    color: var(--primario-blanco, #FFF);
    text-align: center;
    leading-trim: both;
    text-edge: cap;
    font-family: 'Urbanist', sans-serif;
    font-size: 14.151px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.counter-digits {
    display: flex;
}

.counter-digits .digit {
    display: flex;
    padding: 5.111px;
    justify-content: center;
    align-items: center;
    border-radius: 0px 0.852px 0.852px 0px;
    background: linear-gradient(180deg, #D5D4D4 0%, #F1F0F0 51.5%, #D5D4D4 100%);
    color: var(--primario-Blue---primary, #002554);
    font-family: 'Urbanist', sans-serif;
    font-size: 18.082px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.counter-digits .digit.border-digit {
    border-right: 0.852px solid var(--primario-Blue---primary, #002554);
}

@media (max-width: 768px) {
    .below-banner-content {
        flex-direction: column;
        gap: 15px;
        padding: 15px 24px;
    }
}

/* ══ wins.css ══ */
.wins-section {
    display: flex;
    padding: 0px 70px 80px;
    flex-direction: column;
    align-items: flex-start;
    gap: 50px;
    align-self: stretch;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

.wins-container {
    display: flex;
    align-items: center;
    align-self: stretch;
    width: 100%;
    justify-content: space-between;
}

.wins-title-column {
    flex: 1;
    margin-right: 50px;
    min-width: 27%;

    width: 100%;
}

.wins-items-container {
    display: flex;
    justify-content: space-between;
    flex: 3;
    gap: 20px;
}

.wins-title-column h2 span {
    color: #0E3A2F;
    font-family: 'Urbanist', sans-serif;
    font-size: 30px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 1.2px;
    min-width: 340px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.wins-title-column h2 strong {
    color: #0E3A2F;
    font-family: 'Urbanist', sans-serif;
    font-size: 30px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    letter-spacing: 1.2px;
    display: block;
}

.wins-item {
    display: flex;
    align-items: flex-start;
    gap: 17px;
    max-width: 310px;
    width: 100%;
}

.wins-item:last-child {
    margin-right: -20px;
}

.wins-item .icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

.wins-item .content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wins-item .content h3 span{
    color: var(--primario-Blue, #002554);
    font-family: 'Urbanist', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.wins-item .content h3 strong {
    color: var(--primario-Blue, #002554);
    font-family: 'Urbanist', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
    display: block;
}

.wins-item .content p {
    color: var(--primario-Blue, #002554);
    font-family: 'Urbanist', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

@media (max-width: 768px) {
    .wins-section {
        padding: 50px 30px;
        gap: 40px;
        align-items: center;
    }

    .wins-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .wins-title-column {
        margin-right: 0;
        margin-bottom: 30px;
        min-width: unset;
        width: 100%;
        max-width: 390px;
    }

    .wins-title-column h2 {
        text-align: center;
        min-width: unset;
    }

    .wins-items-container {
        flex-direction: column;
        gap: 40px;
        width: 100%;
        align-items: center;
    }

    .wins-item {
        margin: 0;
        max-width: 390px;
    }

    .wins-item:last-child {
        margin-right: 0;
    }

    .wins-item .content {
        text-align: left;
    }

    .wins-item .content h3 strong,
    .wins-item .content h3 span {
        text-align: left;
    }
    .wins-title-column h2 strong {
        color: #0E3A2F;
font-family: 'Urbanist', sans-serif;
font-size: 26px;
font-style: normal;
font-weight: 800;
line-height: 33px; /* 126.923% */
letter-spacing: 1.04px;

    }
    .wins-title-column h2 {
        text-align: left;
    }
    .wins-title-column h2 span {
        color: #0E3A2F;
        font-family: 'Urbanist', sans-serif;
        font-size: 26px;
        font-style: normal;
        font-weight: 400;
        line-height: 33px;
        letter-spacing: 1.04px;
        text-align: left;
    }
}

@media (max-width: 480px) {
    .wins-section {
        padding: 50px 20px;
    }

    .wins-title-column,
    .wins-item {
        max-width: 100%;
    }
}


/* ══ elegir.css ══ */
.elegir-mas {
    display: flex;
    padding: 70px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    background: #F2F2F2;
}

.elegir-mas .subtitle {
    color: #00CB7B;
    text-align: center;
    font-family: 'Urbanist', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    display: flex;
padding: 7px 10px;
justify-content: center;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}

.elegir-mas .title {
    color: #0E3A2F;
    text-align: center;
    
    /* Titulos/Bold 26 px */
    font-family: 'Urbanist', sans-serif;
    font-size: 26px;
    font-style: normal;
    font-weight: 800;
    line-height: 33px; /* 126.923% */
    letter-spacing: 1.04px;
    margin-bottom: 30px;
}

.elegir-mas .elegir-intro-text {
    color: #0E3A2F;
    text-align: center;
    font-family: 'Urbanist', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    max-width: 900px;
    margin: 0 auto 50px auto;
}

.elegir-mas .columns-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
    max-width: 1200px;
}

.elegir-mas .column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px;
    flex: 1;
    text-align: center;
    max-width: 310px;
}

.elegir-mas .column .icon {
    width: 74px;
    height: 74px;
}

.elegir-mas .column h3 {
    color: #0A5D3F;
    text-align: center;
    font-family: 'Urbanist', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 120% */
    margin-top: 20px;
}

.elegir-mas .columns-container .column:nth-child(2) h3 {
    max-width: 240px;
    margin-top: 20px;
}

.elegir-mas .columns-container .column:nth-child(3) h3 {
    max-width: 260px;
    margin-top: 20px;
}

.elegir-mas .column p {
    color: #0E3A2F;
    text-align: center;
    font-family: 'Urbanist', sans-serif;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 23px; /* 153.333% */
}

@media (max-width: 768px) {
    .elegir-mas {
        width: 100%;
        padding: 60px 20px 50px 20px;
        gap: 0px;
    }

    .elegir-mas .title {
        margin-bottom: 20px;
    }

    .elegir-mas .elegir-intro-text {
        font-size: 15px;
        line-height: 22px;
        margin-bottom: 40px;
        padding: 0 10px;
    }

    .elegir-mas .columns-container {
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }

    .elegir-mas .column {
        width: 100%;
    }
}


/* ══ car.css ══ */
/* ========================================
   CAR COMPONENT - MAIN STYLES
   ======================================== */

.car {
    display: flex;
    width: 100%;
    max-width: 350px;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 6px;
    box-shadow: 0px 0px 7px 0px rgba(184, 176, 177, 0.50);
    position: relative;
}

.car img {
    width: 100%;
    margin-bottom: 0px;
}

/* Fallback images (trimmed herobanner car.png) need breathing room at top */
.car img.car-img--fallback {
    padding: 50px 8px 0;
    box-sizing: border-box;
    object-fit: contain;
}

/* ========================================
   CAR TYPOGRAPHY
   ======================================== */

.car h3 {
    color: #0E3A2F;
    text-align: center;
    font-family: 'Urbanist', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    width: 100%;
    margin: 0;
    padding: 20px 0 11px;
}

.car h4 {
    color: #0A5D3F;
    text-align: center;
    font-family: 'Urbanist', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    width: 100%;
    margin: 0;
    padding-bottom: 20px;
}

.car h3,
.car h3>span {
    font-size: 21px;
    line-height: 29px;
    margin-bottom: 0;
}

.car h3.margin {
    margin: 22px 0 31px;
}

.car h3>span {
    white-space: nowrap;
}

.car h4+p {
    text-align: center;
    font-size: 15px;
    line-height: 18px;
    margin-bottom: 14px;
}

/* ========================================
   CAR CONTENT AREAS
   ======================================== */

.car .bottom {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    padding: 0 10px;
    margin-bottom: 15px;
}

.car .price-container {
    text-align: center;
    padding: 0;
}

.car .price-container .text {
    color: #0E3A2F;
    font-family: 'Urbanist', sans-serif;
    font-size: 11.773px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0;
    padding-bottom: 8px;
}

.car .price-container .text strong {
    color: #0E3A2F;
    font-family: 'Urbanist', sans-serif;
    font-size: 19.341px;
    font-style: normal;
    font-weight: 600;
    line-height: 18px;
}

.car .price-container .full-price {
    color: #0E3A2F;
    font-family: 'Urbanist', sans-serif;
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin: 0;
}

.car .price-container .price>sup {
    font-weight: 700;
}

.car .price-original {
    text-decoration: line-through;
}

.car .bottom span {
    color: #0E3A2F;
    font-family: "Urbanist" !important;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.car .bottom span strong {
    font-size: 11px;
}

/* ========================================
   CAR BUTTONS
   ======================================== */

.car .car-button {
    display: flex !important;
    padding: 15px 20px !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    height: 49px !important;
    border-radius: 53px;
    background: var(--ff-3-a-00-uso-cta, #FF5E00);
    color: var(--primario-blanco, #FFF) !important;
    text-align: center !important;
    font-family: 'Urbanist', sans-serif;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: normal !important;
    border: none !important;
    cursor: pointer !important;
    width: 100% !important;
    flex: none !important;
}

.car .car-button:hover {

    background: var(--fe-764-ecta-hover, #FE764E);
}

.car .price-container button.btn-default {
    width: auto;
    padding: 10px 15px 10px 15px;
    height: 41px;
    background: var(--primario-Black, #000);
}

.car .price-container button.btn-default:hover {
    background-color: #807F7F;
}

/* ========================================
   CAR LABELS
   ======================================== */

.car .label-ahorro {
    position: absolute;
    top: 0;
    right: 0 !important;
    left: auto !important;
    width: auto;
    /* ancho según contenido */
    max-width: 85%;
    /* no ocupar el 100% de la card */
    box-sizing: border-box;
    display: flex;
    height: 30px;
    padding: 6px 10px;
    align-items: center;
    justify-content: center;
    border-radius: 0px 0px 0px 16px;
    background: #0E3A2F !important;
    color: var(--primario-blanco, #FFF);
    font-family: "Urbanist" !important;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    gap: 6px;
    white-space: nowrap;
    /* evitar salto a dos líneas */
    overflow: visible;
}

.car .label-ahorro svg {
    width: 10px;
    height: 12px;
}

.car .label-ahorro span {
    font-weight: 700;
}

/* ========================================
   CAR FEATURES
   ======================================== */

.car-features-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 5px;
    row-gap: 10px;
    padding: 0 10px;
    margin-bottom: 20px;
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
}

.car-feature {
    display: flex;
    padding: 3px 6px;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border-radius: 10px;
    background: #EDEDED;
    font-family: 'Urbanist', sans-serif;
    line-height: normal;
    white-space: nowrap;
    color: #0A5D3F;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
}

.car-feature svg {
    flex-shrink: 0;
}

.car-feature svg:first-child {
    width: 11px;
    height: 11px;
    aspect-ratio: 1/1;
}

.car-feature svg:nth-child(2) {
    width: 16px;
    height: 10px;
    aspect-ratio: 8/5;
}

.car-feature svg:nth-child(3) {
    width: 12px;
    height: 11px;
    aspect-ratio: 12/11;
}

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

/* Tablet */
@media (min-width: 768px) {
    .car h3.margin {
        margin: 10px 0 10px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .car {
        margin: 0 auto;
        height: auto;
        display: flex;
        flex-direction: column;
        width: auto;
    }

    .car .bottom {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .slick-track {
        display: flex !important;
    }

    .slick-slide {
        height: inherit !important;
    }
}

/* Mobile Small */
@media (max-width: 355px) {
    .car {
        width: 270px;
    }
}

/* ========================================
   ENVIRONMENTAL LABEL
   ======================================== */

.car .environmental-label {
    position: absolute;
    top: 30px;
    left: 35px;
    width: 30px;
    height: auto;
    z-index: 2;
}

.car .environmental-label img {
    width: 100%;
    height: auto;
    display: block;
}

/* ══ another-model.css ══ */
.another-model {
  padding: 80px 100px 80px;
  text-align: center;
  max-width: 1440px;
  margin: 0 auto;
}

.another-model .container {
  display: flex;
  height: 291px;
  padding: 0px 80px;
  justify-content: center;
  align-items: center;
  gap: 38px;
  border-radius: 10px;
  align-self: stretch;
  background: var(--secundario-gris-f-6-f-6-f-6, #f6f6f6);
}

.another-model img {
  width: 100%;
  max-width: 576px;
  margin-bottom: 15px;
}

.another-model .another-model-text-box {
  display: flex;
  justify-content: flex-start;

  flex-direction: column;
}

.another-model h2 {
  max-width: 342px;
  color: #0E3A2F;
  text-align: left;
  /* Titulos/Bold 30px */
  font-family: 'Urbanist', sans-serif;
  font-size: 30px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
  letter-spacing: 1.2px;
  padding-bottom: 10px;
}

.another-model p {
  font-size: 14px;
  line-height: 17px;
  margin-bottom: 24px;
}

.another-model button.btn-default {
  width: 100%;
  height: 49px;
  display: flex;
  width: 200px;
  padding: 15px 10px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 30px;
  border: none;
  background: #FF5E00;
  color: var(--primario-blanco, #FFF) !important;
  cursor: pointer;
}

@media (max-width: 992px) {

  .another-model img {
    max-width: 535px;

  }

  .another-model .container {
    height: auto;
    flex-direction: column-reverse;
    gap: 0px;
    width: 100%;
    max-width: 100%;
    padding: 30px 20px;
  }

  .another-model h2 {
    font-size: 22px;
    text-align: center;
    max-width: 100%;
    width: 100%;
  }

  .another-model button.btn-default {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .another-model {
    padding: 0px;
    text-align: left;
  }

  .another-model>div {
    display: flex;
    column-gap: 50px;
    justify-content: center;
    align-items: center;
  }

  .another-model .container {
    height: auto;
    flex-direction: column-reverse;
    gap: 0px;
    width: 100%;
    max-width: 100%;
    padding: 30px 20px;
  }

  .another-model h2 {
    font-size: 22px;
    text-align: center;
    max-width: 100%;
    width: 100%;
  }

  .another-model button.btn-default {
    width: 100%;
  }

}

/* ══ carousel.css ══ */
/* Estilos para el carrusel de furgonetas */
.models-section {
  padding: 80px 0;
  margin: 0 auto;
  /* padding-left: 100px; */
}

.model-section {
  margin-bottom: 0px;
  display: flex;
  align-items: center;
  gap: 40px;
}

.model-section:last-child {
  margin-bottom: 0;
}

.intro-content {
  flex: 0 0 300px;
  text-align: left;
  position: sticky;
  top: 20px;
}

.intro-content h3 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 10px;
  font-family: 'Urbanist', sans-serif;
  font-size: 29px;
  font-weight: 700;
  color: #00CB7B;
  margin-bottom: 10px;
}

.intro-content h4 {
  font-size: 1.2rem;
  color: #666;
  margin-bottom: 0px;
}

/* Navegación del carrusel */
.models-navigation-medium {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: calc(100% + 50px);
  left: -25px;
  display: none; /* Siempre oculta */
  justify-content: space-between;
  pointer-events: none;
  z-index: 10;
}

.models-navigation-medium .nav-button {
  background: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  pointer-events: auto;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.models-navigation-medium .nav-button:hover {
  background: rgba(255, 255, 255, 1);
  transform: scale(1.1);
}

.models-navigation-medium .nav-button img {
  width: 20px;
  height: 20px;
  transition: opacity 0.3s ease;
}

.models-navigation-medium .nav-button .arrow-hover {
  opacity: 0;
  position: absolute;
}

.models-navigation-medium .nav-button:hover .arrow {
  opacity: 0;
}

.models-navigation-medium .nav-button:hover .arrow-hover {
  opacity: 1;
}

.models-navigation-medium .nav-button.prev {
  left: -25px;
}

.models-navigation-medium .nav-button.next {
  right: -25px;
}

/* Contenido del carrusel */
.models-content {
  position: relative;
  flex: 1;
  min-width: 0;
}

.models-grid {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 20px 0 20px 10px;
  scroll-behavior: smooth;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  touch-action: pan-y pan-x; /* Permite scroll horizontal y vertical */
  cursor: grab;
  width: 100%;
  min-width: 0; /* Permitir que se contraiga */
  user-select: none; /* Prevenir selección de texto durante drag */
}

.models-grid:active {
  cursor: grabbing;
}

.models-grid::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}

.models-grid .car {
  /* flex sizing handled below in grid section */
}

.models-grid .car:last-child {
  margin-right: 0;
}

/* Navegación desktop (debajo del intro-content) */
.intro-content .models-navigation {
  display: flex;
  justify-content: flex-start;
  gap: 20px;
  margin-top: 30px;
}

/* Navegación inferior (debajo de las cards en responsive) */
.models-content .models-navigation {
  display: none;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

.models-navigation .nav-button {
  background: #0E3A2F;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 203, 123, 0.3);
}

.models-navigation .nav-button:hover {
  background: #00CB7B;
  transform: scale(1.1);
}

.models-navigation .nav-button:disabled {
  background: #ccc;
  cursor: not-allowed;
  transform: none;
}

.models-navigation .nav-button {
  background: #0E3A2F;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 203, 123, 0.3);
  color: white;
  font-size: 24px;
  font-weight: bold;
  font-family: Arial, sans-serif;
  text-align: center;
  line-height: 1;
  padding: 0;
  margin: 0;
}

/* Corrección específica para centrado perfecto */
.models-navigation .nav-button.prev {
  transform: translateX(-1px); /* Compensar efecto óptico */
}

/* Responsive */
@media (max-width: 768px) {
  .models-section {
    padding: 40px 0 40px 0px;
  }
  
  .model-section {
    margin-bottom: 20px;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
  }
  
  .intro-content {
    flex: none;
    text-align: left;
    position: static;
  }
  
  .intro-content h3 {
    font-size: 2rem;
  }
  
  .intro-content h4 {
    font-size: 1rem;
  }
  
  /* Ocultar navegación del intro-content en móvil */
  .intro-content .models-navigation {
    display: none !important;
  }
  
  /* Permitir que JavaScript controle la navegación mobile */
  .models-content .models-navigation {
    margin-top: 20px;
  }
  
  .models-navigation-medium {
    display: none;
  }
  
  .models-navigation .nav-button {
    width: 45px;
    height: 45px;
  }
  
  .models-navigation .nav-button {
    font-size: 22px;
  }
  

  
  .models-grid {
    padding: 20px 0 20px 5px;
    touch-action: pan-y pan-x; /* Permite scroll horizontal y vertical */
    overflow-x: auto !important; /* Forzar scroll horizontal en el carrusel */
    -webkit-overflow-scrolling: touch; /* Scroll suave en iOS */
    width: 100%; /* Asegurar que el grid tenga ancho completo */
    max-width: none; /* Remover cualquier limitación de ancho */
  }
  
  /* Padding derecho para la última card en responsive */
  .models-grid .car:last-child {
    margin-right: 20px;
  }
  
  /* Prevenir scroll horizontal de la página en móvil, pero permitir en el carrusel */
  body {
    overflow-x: hidden;
  }
  
  /* Asegurar que el contenedor del carrusel permita scroll */
  .models-content {
    overflow: visible; /* Permitir que el contenido se desborde */
    width: 100%;
  }
}

@media (max-width: 480px) {
  .models-section {
    padding: 40px 0 40px 0px;
  }
  
  .model-section {
    padding-left: 15px;
  }
  
  .intro-content h3 {
    font-size: 1.8rem;
  }
  
  .intro-content h4 {
    font-size: 0.9rem;
  }
  
  .models-navigation .nav-button {
    width: 40px;
    height: 40px;
  }
  
  .models-navigation .nav-button {
    font-size: 20px;
  }
  
  /* Corrección específica para centrado perfecto en mobile */
  .models-navigation .nav-button.prev {
    transform: translateX(-1px);
  }
  
  .models-grid {
    padding: 20px 0 20px 5px;
    touch-action: pan-y pan-x; /* Permite scroll horizontal y vertical */
    overflow-x: auto !important; /* Forzar scroll horizontal en el carrusel */
  }
  
  /* Padding derecho para la última card en mobile */
  .models-grid .car:last-child {
    margin-right: 20px;
  }
}


/* ══ models.css ══ */
/* ========================================
   MODELS SECTION - MAIN STYLES
   ======================================== */

.models-section {
    display: flex;
    padding: 80px 0px 90px;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    margin: 0 auto;
}

.models-section .container {
    display: flex;
    flex-direction: column;
    gap: 50px;
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.section-header {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.models-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 20px;
}

.models-section h2 {
    color: #0E3A2F;
    text-align: center;
    font-family: 'Urbanist', sans-serif;
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: normal;
    margin: 0;
}


.guarantee-message {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 100%;
    flex-wrap: wrap;
    padding: 0 20px;
    box-sizing: border-box;
    margin-top: 0px;
}

.guarantee-message-top {
    display: flex;
    align-items: center;
    gap: 5px;
}

.guarantee-message svg {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.guarantee-message span {
    color: #00CB7B;
    text-align: center;
    leading-trim: both;
    text-edge: cap;
    font-family: 'Urbanist', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.4;
    white-space: normal;
    max-width: 500px;
}

.guarantee-message-top strong {
    color: #00CB7B;
    font-family: 'Urbanist', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.guarantee-message-bottom {
    color: #00CB7B;
    text-align: center;
    font-family: 'Urbanist', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.4;
    max-width: 100%;
}

/* ========================================
   MODELS GRID SYSTEM
   ======================================== */

.models-grid-container {
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Centrar el contenedor cuando hay pocas cards */
.models-grid-container.models-grid--centered {
    display: flex;
    justify-content: center;
}

.models-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 24px !important;
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 20px 0 !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    flex-direction: row !important;
    cursor: default !important;
    user-select: auto !important;
}

/* Cards: 4 per row on desktop */
.models-grid > .car {
    flex: 0 1 calc(25% - 18px) !important;
    max-width: calc(25% - 18px) !important;
    min-width: 280px !important;
}

/* Centrar cards cuando hay 3 o menos */
.models-grid.models-grid--centered {
    max-width: calc(3 * 350px + 2 * 24px) !important;
}

.models-grid.models-grid--centered > .car {
    flex: 0 1 350px !important;
    max-width: 350px !important;
}

.models {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 0 100px;
    align-items: stretch;
}

.car {
    flex: 1 1 320px;
    min-width: 280px;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Override de dimensiones cuando las cards están dentro del grid de modelos */
.models .car {
    width: auto;
    max-width: 350px;
    flex: 0 1 320px;
}

/* Cards dentro del grid (flexbox) */
.models-grid .car {
    flex: 0 1 calc(25% - 18px) !important;
    max-width: calc(25% - 18px) !important;
    min-width: 280px !important;
    box-sizing: border-box !important;
}

/* ========================================
   CAR STYLES (from models.css)
   ======================================== */

.car img {
    width: 100%;
    margin-bottom: 0px;
}

.car h3 {
    color: var(--primario-Black, #000);
    text-align: center;
    font-family: 'Urbanist', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    width: 100%;
    margin: 0;
    padding: 20px 0 11px;
}

.car h4 {
    color: var(--secundario-grey-4-c-4-c-4-c, #4C4C4C);
    text-align: center;
    font-family: 'Urbanist', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    width: 100%;
    margin: 0;
    padding-bottom: 20px;
}

.car h3,
.car h3>span {
    font-size: 21px;
    line-height: 29px;
    margin-bottom: 0;
}

.car h3.margin {
    margin: 22px 0 31px;
}

.car h3>span {
    white-space: nowrap;
}

.car h4+p {
    text-align: center;
    font-size: 15px;
    line-height: 18px;
    margin-bottom: 14px;
}

.car .bottom {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    padding: 0 10px;
    margin-bottom: 15px;
    margin-top: auto;
}

.car .price-container {
    text-align: center;
    padding: 0;
}

.car .price-container .text {
    color: var(--primario-Black, #000);
    font-family: 'Urbanist', sans-serif;
    font-size: 11.773px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0;
    padding-bottom: 8px;
}

.car .price-container .text strong {
    color: var(--primario-Black, #252728);
    font-family: 'Urbanist', sans-serif;
    font-size: 19.341px;
    font-style: normal;
    font-weight: 600;
    line-height: 18px;
}

.car .price-container .full-price {
    color: var(--primario-Black, #000);
    font-family: 'Urbanist', sans-serif;
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin: 0;
}

/*.car .car-button {
    display: flex !important;
    padding: 15px 20px !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    height: 49px !important;
    border-radius: 3px !important;
    background: #0E3A2F !important;
    color: var(--primario-blanco, #FFF) !important;
    text-align: center !important;
    font-family: "Urbanist" !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: normal !important;
    border: none !important;
    cursor: pointer !important;
    width: 100% !important;
}*/

.car .price-container .price>sup {
    font-weight: 700;
}

.car .price-container button.btn-default {
    width: auto;
    padding: 10px 15px 10px 15px;
    height: 41px;
    background: #FF5E00;
}

.car .price-container button.btn-default:hover {
    background: #FF5E00 !important;
    opacity: 0.8;
}

.car .bottom span {
    color: var(--primario-Black, #000);
    font-family: "Urbanist" !important;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.car .bottom span strong {
    font-size: 11px;
}

/* ========================================
   CAR FEATURES
   ======================================== */

.car-features-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 5px;
    row-gap: 10px;
    padding: 0 10px;
    margin-bottom: 20px;
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
}

.car-feature {
    display: flex;
    padding: 3px 6px;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border-radius: 10px;
    background: #EDEDED;
    color: #0E3A2F;
    font-family: 'Urbanist', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    white-space: nowrap;
}

.car-feature svg {
    flex-shrink: 0;
    color: #0E3A2F;
}

.car-feature img {
    width: 10px;
    height: 10px;
    aspect-ratio: 1/1;
}

.car-feature svg:first-child {
    width: 11px;
    height: 11px;
    aspect-ratio: 1/1;
}

.car-feature svg:nth-child(2) {
    width: 16px;
    height: 10px;
    aspect-ratio: 8/5;
}

.car-feature svg:nth-child(3) {
    width: 12px;
    height: 11px;
    aspect-ratio: 12/11;
}

/* ========================================
   CAR LABELS
   ======================================== */

.car .label-ahorro {
    position: absolute;
    top: 0;
    left: 0;
    width: 147px;
    display: flex;
    height: 30px;
    padding: 6px 10px;
    align-items: center;
    justify-content: center;
    border-radius: 0px 0px 16px 0px;
    background: var(--primario-Blue---primary, #002554);
    color: var(--primario-blanco, #FFF);
    font-family: "Urbanist" !important;
    font-size: 10px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    gap: 6px;
}

.car .label-ahorro svg {
    width: 10px;
    height: 12px;
}

.car .price-original {
    text-decoration: line-through;
}

/* ========================================
   OFERTA DEL MES BADGE
   Badge dorado para vehículos manuales destacados
   ======================================== */

.car .label-oferta-mes {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    height: auto;
    padding: 5px 10px;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: #00cb7b;
    color: #fff;
    font-family: "Urbanist", sans-serif;
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    gap: 5px;
    z-index: 2;
}



.car .label-oferta-mes svg {
    width: 10px;
    height: 12px;
    flex-shrink: 0;
}

.car .label-oferta-mes span {
    letter-spacing: 0.5px;
}

/* ========================================
   OFERTA EMPRESA BADGE
   Badge azul para vehículos autónomo/empresa
   ======================================== */

.car .label-oferta-empresa {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    height: auto;
    padding: 5px 10px;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: #f2f2f2;
    color: #0E3A2F;
    font-family: "Urbanist", sans-serif;
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    gap: 5px;
    z-index: 2;
}

.car .label-oferta-empresa svg {
    width: 16px;
    height: 17px;
    flex-shrink: 0;
}

.car .label-oferta-empresa span {
    letter-spacing: 0.5px;
}

/* ========================================
   PROMOCIÓN ESPECIAL BADGE
   Badge verde idéntico a Oferta del mes
   ======================================== */

.car .label-promo-especial {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    height: auto;
    padding: 5px 10px;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    background: #00cb7b;
    color: #fff;
    font-family: "Urbanist", sans-serif;
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    gap: 5px;
    z-index: 2;
}

.car .label-promo-especial svg {
    width: 10px;
    height: 12px;
    flex-shrink: 0;
}

.car .label-promo-especial span {
    letter-spacing: 0.5px;
}

/* ========================================
   FROZEN CARD (Precio congelado / RESERVADO)
   Card con precio del "dia de tall" que no
   cambia hasta el próximo snapshot mensual.
   ======================================== */

.car.car--frozen {
    position: relative;
}

/* Overlay sutil sobre la imagen */
.car.car--frozen img:not(.carousel-nav img),
.car.car--frozen .car-image-carousel {
    position: relative;
    filter: brightness(0.92) saturate(0.8);
}

/* Etiqueta RESERVADO con estilo diferenciado */
.car.car--frozen .label-ahorro {
    background: #B8860B;
    /* Dorado oscuro para distinguir de las normales */
}

/* CTA diferente: gris para no competir con las cards live */
.car.car--frozen .btn-default {
    background: #6c757d !important;
    opacity: 0.9;
}

.car.car--frozen .btn-default:hover {
    background: #5a6268 !important;
    opacity: 1;
}

/* Precio con indicador visual de "congelado" */
.car.car--frozen .price-container .text {
    color: #6c757d;
}

.car.car--frozen .price-container .text strong {
    color: #6c757d;
}

/* Pequeña etiqueta de "precio del snapshot" */
.car.car--frozen .price-container::after {
    content: 'Modelo reservado';
    display: block;
    font-size: 10px;
    color: #B8860B;
    font-weight: 600;
    font-family: 'Urbanist', sans-serif;
    margin-top: 2px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* ========================================
   CAROUSEL STYLES
   ======================================== */

.models-carousel {
    --default-car-width: 333px;
}

.custom-carousel-arrows {
    padding-top: 43px;
    display: flex;
    justify-content: space-between;
}

.custom-carousel-arrows .slick-arrow {
    width: 34px;
    height: 9px;
    background-size: 34px 9px;
    background-color: transparent;
    border: none;
    font-size: 0;
}

.custom-carousel-arrows .slick-arrow.slick-disabled {
    opacity: .2;
}

.custom-carousel-arrows .slick-arrow.slick-prev {
    background-image: url(../img/icons/arrow-left.svg);
}

.custom-carousel-arrows .slick-arrow.slick-next {
    background-image: url(../img/icons/arrow-right.svg);
}

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

/* Desktop Large */
@media (max-width: 1200px) {
    .car {
        flex: 1 1 320px;
        min-width: 280px;
        max-width: 360px;
    }
}

/* Desktop Medium */
@media (max-width: 900px) {
    .car {
        flex: 1 1 320px;
        min-width: 280px;
        max-width: 360px;
    }
}

/* Tablet */
@media (max-width: 768px) {
    .models-section {
        padding: 40px 20px;
    }

    .models-section .container {
        gap: 45px;
        padding: 0;
    }

    .section-header {
        gap: 15px;
    }

    .models-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .models-section h2 {
        font-size: 24px;
        max-width: 80%;
        text-align: center;
        margin: 0 auto;
    }

    .car h3.margin {
        margin: 10px 0 10px;
    }

    .models-carousel {
        margin-right: -12px;
        margin-left: -12px;
    }

    .guarantee-message {
        padding: 0 15px;
        gap: 8px;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .guarantee-message-top {
        gap: 8px;
    }

    .guarantee-message-top strong {
        font-size: 13px;
    }

    .guarantee-message-bottom {
        font-size: 13px;
        line-height: 1.5;
        text-align: center;
    }

    .models-grid-container {
        padding: 0 15px;
    }

    .models-grid-container.models-grid--centered {
        padding: 0 15px;
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }

    .models-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
        gap: 20px !important;
        padding: 15px 0 !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        align-items: flex-start !important;
    }

    .models-grid.models-grid--centered {
        grid-template-columns: repeat(auto-fit, minmax(280px, 350px)) !important;
        width: fit-content !important;
        max-width: calc(3 * 350px + 2 * 24px) !important;
        margin: 0 !important;
    }
}

/* Mobile Large */
@media (max-width: 600px) {
    .models {
        padding: 0 10px;
        gap: 15px;
    }

    .car {
        flex: 0 0 100%;
        min-width: 280px;
        max-width: 360px;
    }

    .models-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .models-section h2 {
        text-align: center;
        margin: 0 auto;
    }

    .guarantee-message {
        padding: 0 0px;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .guarantee-message-top strong {
        font-size: 14px;
    }

    .guarantee-message-bottom {
        font-size: 12px;
        line-height: 1.6;
        text-align: center;
    }

    .models-grid-container {
        padding: 0 10px;
    }

    .models-grid-container.models-grid--centered {
        padding: 0 10px;
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }

    .models-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 10px 10px !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        align-items: flex-start !important;
    }

    .models-grid.models-grid--centered {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
}

/* Mobile Small */
@media (max-width: 390px) {
    .models-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .models-section h2 {
        text-align: center;
        margin: 0 auto;
    }

    .guarantee-message {
        padding: 0 5px;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
    }

    .guarantee-message-top strong {
        font-size: 11px;
    }

    .guarantee-message-bottom {
        font-size: 11px;
    }
}

@media (max-width: 355px) {
    .car {
        width: 270px;
    }
}

/* ========================================
   BRAND FILTER
   ======================================== */

.brand-filter {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    padding: 30px 20px;
    margin-bottom: 20px;
}

.brand-filter-btn {
    background: #F8F8F8;
    border: 2px solid #E5E5E5;
    border-radius: 8px;
    padding: 15px 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 100px;
    height: 80px;
}

.brand-filter-btn:hover {
    border-color: #00C996;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 201, 150, 0.2);
}

.brand-filter-btn.active {
    border-color: #00C996;
    background-color: rgba(0, 201, 150, 0.1);
    box-shadow: 0 2px 4px rgba(0, 201, 150, 0.3);
}

.brand-filter-btn img {
    max-width: 100%;
    max-height: 60px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: all 0.3s ease;
}

.brand-filter-btn:hover img,
.brand-filter-btn.active img {
    filter: grayscale(0%);
    opacity: 1;
}

/* Ocultar cards cuando están filtradas */
.car[data-brand] {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.car.hidden {
    display: none;
}

/* Responsive para filtro */
@media (max-width: 768px) {
    .brand-filter {
        gap: 10px;
        padding: 20px 15px;
    }

    .brand-filter-btn {
        min-width: 85px;
        height: 65px;
        padding: 12px 15px;
    }

    .brand-filter-btn img {
        max-height: 45px;
    }
}

@media (max-width: 480px) {
    .brand-filter {
        gap: 8px;
        padding: 15px 10px;
    }

    .brand-filter-btn {
        min-width: 70px;
        height: 55px;
        padding: 10px 12px;
    }

    .brand-filter-btn img {
        max-height: 35px;
    }
}

/* ========================================
   CARRUSEL DE IMÁGENES PARA VEHÍCULOS
   ======================================== */

.car-image-carousel {
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
    background: #f8f9fa;
    cursor: grab;
    margin-bottom: 0;
}

.car-image-carousel:active {
    cursor: grabbing;
}

.carousel-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.carousel-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    user-select: none;
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
}

.carousel-image.active {
    opacity: 1;
}

.carousel-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 94, 0, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 94, 0, 0.6);
    display: inline-block;
}

.carousel-dot.active {
    background: #FF5E00;
    transform: scale(1.2);
    box-shadow: 0 2px 4px rgba(255, 94, 0, 0.4);
    border-color: #FF5E00;
}

.carousel-dot:hover {
    background: rgba(255, 94, 0, 0.7);
    transform: scale(1.1);
}

/* Navigation arrows */
.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 20;
    font-size: 20px;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    padding: 0;
    margin: 0;
    user-select: none;
    -webkit-user-select: none;
}

.car-image-carousel:hover .carousel-nav {
    opacity: 1;
}

.carousel-prev {
    left: 10px;
}

.carousel-next {
    right: 10px;
}

.carousel-nav:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: translateY(-50%) scale(1.1);
}

.carousel-nav:active {
    transform: translateY(-50%) scale(0.95);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .car-image-carousel {
        height: 200px;
    }

    .carousel-dot {
        width: 6px;
        height: 6px;
    }

    .carousel-dots {
        bottom: 8px;
        gap: 6px;
    }
}

@media (max-width: 480px) {
    .car-image-carousel {
        height: 180px;
    }

    .carousel-nav {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }

    .carousel-prev {
        left: 6px;
    }

    .carousel-next {
        right: 6px;
    }
}

/* ══ mapa.css ══ */
.mapa-section {
    padding: 0;
    background-color: #fff;
}

.mapa-section--igualada {
    padding-top: 80px;
}

.mapa-container {
    display: flex;
    gap: 0;
    flex-direction: row;
    width: 100%;
    margin: 0 auto;
}

/* Columna del mapa */
.map-column {
    flex: 1;
    height: 624px;
}

#map {
    width: 100%;
    height: 100%;
    background-color: #f8f9fa;
}

/* Columna de información */
.info-column {
    display: flex;
    width: 537px;
    height: 624px;
    padding: 0px 50px 0px 80px;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    flex-shrink: 0;
    background: #FFF;
    overflow: hidden;
}

/* Header de la información */
.header-info {
    flex-shrink: 0;
}

.header-info p {
    color: var(--green-primary-light-00-cb-7-b, #00CB7B);
    text-align: left;
    leading-trim: both;
    text-edge: cap;
    font-family: Urbanist;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 10px;
}

.header-info h2 {
    color: var(--green-primary-dark-0-e-3-a-2-f, #0E3A2F);
    font-weight: 600;

    /* 36pt Bold */
    font-family: Urbanist;
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

/* Lista de concesionarios con scroll */
.dealers-list {
    flex: 1;
    overflow-y: auto;
    width: 100%;
}

/* Ocultar scrollbar pero mantener funcionalidad */
.dealers-list::-webkit-scrollbar {
    display: none;
}

.dealers-list {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

/* Items de concesionarios */
.dealer-item {
    display: flex;
    padding: 30px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    align-self: stretch;
    border-radius: 10px;
    background: #F2F2F2;
    margin-bottom: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dealer-item:hover {
    background: #E8E8E8;
    transform: none;
}

.dealer-item.active {
    background: #F2F2F2;
    border: 2px solid #00CB7B;
    padding: 28px;
    transform: none;
}

/* Contenedor del título con icono */
.dealer-title {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
}

/* Icono SVG del concesionario */
.dealer-icon {
    flex-shrink: 0;
    width: 18px;
    height: 24px;
    margin-top: 2px;
}

.dealer-item h3 {
    color: #0E3A2F;
    font-family: Urbanist;
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0;
    flex: 1;
}

.dealer-item.active h3 {
    color: #0E3A2F;
}

.dealer-item p {
    color: #0A5D3F;
    font-family: Urbanist;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin: 0;
}

.dealer-item.active p {
    color: #0A5D3F;
}

@media (max-width: 1024px) {
    .info-column {
        width: 45%;
        padding: 50px 30px;
    }

    .dealer-item {
        padding: 20px;
        gap: 16px;
    }

    .dealer-item h3 {
        font-size: 24px;
    }

    .dealer-item p {
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .mapa-container {
        flex-direction: column;
    }

    .map-column,
    .info-column {
        width: 100%;
        height: auto;
    }

    .info-column {
        height: 525px;
        padding: 40px 20px 0px;
        width: 100%;
    }

    #map {
        height: 400px;
    }

    .dealer-item {
        margin-bottom: 20px;
        padding: 20px;
        gap: 16px;
    }

    .dealer-item h3 {
        font-size: 20px;
    }

    .dealer-item p {
        font-size: 14px;
    }
}

/* Estilos específicos para Leaflet */
.leaflet-popup-content {
    margin: 10px;
}

.leaflet-popup-content-wrapper {
    background: #002554;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

.leaflet-popup-content .dealer-info {
    padding: 0;
}

.leaflet-container a {
    color: var(--primario-Red, #C1002F);
}

.leaflet-popup-tip {
    background: #1e1e1e;
}

/* Ajustar el contraste de los controles del mapa */
.leaflet-control-zoom a {
    background-color: #1e1e1e !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.leaflet-control-zoom a:hover {
    background-color: #2d2d2d !important;
}

/* Personalizar controles de zoom */
.leaflet-control-zoom {
    border: none !important;
    margin: 20px !important;
}

.leaflet-control-zoom a {
    width: 40px !important;
    height: 40px !important;
    line-height: 40px !important;
    color: #000 !important;
    background-color: white !important;
    border: none !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.leaflet-control-zoom a:first-child {
    margin-bottom: 10px !important;
}

.leaflet-control-zoom a:hover {
    background-color: #f8f9fa !important;
    color: #000 !important;
}

/* Personalizar popups */
.leaflet-popup-content-wrapper {
    border-radius: 10px;
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.2);
}

.leaflet-popup-tip {
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.2);
}

/* Iconos personalizados del mapa */
.custom-marker-icon {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

.custom-marker-icon svg {
    display: block;
    transition: all 0.3s ease;
}

/* ══ modal.css ══ */
.modal .modal-content {
    border-radius: 11px;
}

.modal:not(.cookies) .modal-content {
    padding: 27px 50px 40px 50px;
}

.modal .modal-header {
    border-bottom: none;
    display: block;
    padding-top: 0px; /* Padding superior para margen de la cruz */
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    text-align: center;
   padding-top: 27px;
   padding-bottom: 20px;
}

/* Título del modal de información del modelo alineado a la izquierda */
#model-info-modal .modal-header {
    text-align: left;
}

#model-info-modal .modal-title {
    text-align: left;
}

/* Título del formulario cuando está visible */
.modal-content.has-form-padding .modal-title,
.modal:has(.form-content:not([style*="display: none"])) .modal-title {
    color: #0E3A2F;
    font-family: 'Urbanist', sans-serif;
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-align: left;
    margin-bottom: 16px;
    display: block !important;
}

.modal button.btn-close {
    background-image: url(../img/icons/cross.svg);
    opacity: 1;
    background-size: 36px;
    display: block;
    margin: 0 0 0px auto;
    padding-left: 20px;
}

.modal button.btn-close:hover {
    background-image: url(../img/icons/cross.svg);
}

.modal .modal-header p.offer-countdown {
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    background-color: #b625360d;
    margin-bottom: 6px !important;
    text-align: center;
    padding: 5px 10px;
    border-radius: 80px;
    width: fit-content;
    margin: 0 auto;
}

.modal h4 {
    color: #0E3A2F;
font-family: 'Urbanist', sans-serif;
font-size: 26px;
font-style: normal;
font-weight: 700;
line-height: normal;

}

.modal .modal-header p span {
    color: var(--main-color);
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
}

.modal h4 {
    color: var(--primario-Blue---primary, #002554);

    /* Titulos/Bold 26 px */
    font-family: 'Urbanist', sans-serif;
    font-size: 26px;
    font-style: normal;
    font-weight: 800;
    line-height: 33px; /* 126.923% */
    letter-spacing: 1.04px;
}

.modal .modal-body {
    padding: 0px 11px 0 0;
}

@media (min-width: 768px) {
    .modal .modal-dialog {
        min-width: 702px;
        margin: 5vh auto; /* Centrar verticalmente también en desktop */
    }
    
    .modal h4 {
       
        color: #0E3A2F;

        /* Titulos/Bold 30px */
        font-family: 'Urbanist', sans-serif;
        font-size: 29px;
        font-style: normal;
        font-weight: 800;
        line-height: normal;
        letter-spacing: 1.2px;

    }
}

/* FORM */

.modal form {
    --form-color: #99989B;
}

.modal form button.btn-default {
    width: 100%;
    max-width: none;
    height: 48px;
    display: flex;
    margin: 0 auto;
    border-radius: 53px;
    background: #FF5E00;
    color: #FFFFFF;
    text-align: center;
    font-family: 'Urbanist', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.8px;
    border: none;
    padding: 10px 20px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.modal form button.btn-default:hover {
    background: #FF5E00;
    opacity: 0.9;
}

.modal form .column {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    column-gap: 20px;
    row-gap: 1px;
    margin-bottom: 26px;
}

.modal form .column p {
    font-size: 12px;
    line-height: 15px;
}

.modal form .column > * {
    white-space: nowrap;
    width: fit-content;
}

/* fields */

.modal ::placeholder{
    color: #0E3A2F !important;
    opacity: 0.5;
    /* Text/Book 14 px */
    font-family: 'Urbanist', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.modal form select,.modal form input:not([type=checkbox]) {
    color: #0E3A2F !important;
    opacity: 1;
    /* Text/Book 14 px */
    font-family: 'Urbanist', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
#placeholder-concesionarios {
    color: #0E3A2F !important;
    opacity: 0.5;
    /* Text/Book 14 px */
    font-family: 'Urbanist', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}


.modal label:not(.error) {
    color: var(--primario-Blue---primary, #002554);
    font-family: "NouvelR AH";
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.modal form select, form input:not([type=checkbox]) {
    padding: 12px 20px;
    background-color: var(--base-color);
    width: 100%;
    border: 1px solid var(--primario-Blue---primary, #002554);
    margin-bottom: 14px;
    outline: none;
    color: var(--form-color);
}

/* AUTOCOMPLETE */
.modal input:-internal-autofill-selected {
    background-color: var(--base-color) !important;
    box-shadow: 0 0 0 30px var(--base-color) inset !important;
    -webkit-box-shadow: 0 0 0 30px var(--base-color) inset !important;
    color: var(--main-font-color) !important;
    -webkit-text-fill-color: var(--main-font-color) !important;
    appearance: none;
}

.modal form select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 40px;
    background-image: url(../img/icons/arrow-dropdown.svg);
    background-repeat: no-repeat;
    background-position: center right 16px;
    background-size: 16px;
    text-overflow: ellipsis;
}

.modal form select:valid {
    font-weight: 700;
    color: var(--main-font-color);
}

.modal form select.touched {
    color: var(--main-font-color);
}

.modal form input:not([type=checkbox]) {
    font-weight: 400;
    color: var(--main-font-color);
}



/* checkbox */

.required-camp,.modal form label.checkbox {
    color: var(--primario-Blue---primary, #002554);

    /* Text/Regular 12px */
    font-family: 'Urbanist', sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
  
.modal form label.checkbox a {
    font-size: 12px;
    line-height: 15px;
    color: var(--main-font-color);
    text-underline-offset: 2px;
    color: var(--primario-Blue---primary, #002554);

/* Text/Regular 12px */
font-family: 'Urbanist', sans-serif;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
  
.modal form input[type=checkbox] {
    visibility: hidden;
}
  
.modal form input[type=checkbox]+span {
    font-size: 12px;
    line-height: 15px;
    background: transparent url(../img/icons/checkbox-square-black-unselected.svg) no-repeat center left;
    background-size: 17px;
    padding: 5px 0 5px 25px;
    cursor: pointer;
    margin-left: -15px;
}
  
.modal form input[type=checkbox]:checked+span {
    background-image: url(../img/icons/checkbox-square-black-selected.svg);
}

/* error */

.modal form label:not(.checkbox).error {
    color: var(--error-color);
    font-size: 12px;
    line-height: 15px;
    width: 100%;
    text-align: left;
    margin-bottom: 16px;
    display: block;
}

.modal form input[type=checkbox]+span.error, form input[type=checkbox]+span.error a {
    color: var(--error-color);
    margin-bottom: 5px;
}

.modal form input[type=checkbox] ~ label.error { 
    margin: 5px 0 0;
}
  
.modal form input:not([type=checkbox]).error, form select.error {
    border: 1px solid var(--error-color);
    margin-bottom: 5px;
}

/* Estilos para los placeholders de los selectores */
#placeholder-model,
#placeholder-concesionarios {
    color: #0E3A2F !important;
    opacity: 0.5;
    /* Text/opacity: 0.5;Book 14 px */
    font-family: 'Urbanist', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

/* Estilos para los selectores cuando tienen el placeholder seleccionado */
.modal form select option[id^="placeholder-"]:checked ~ select,
.modal form select:valid option[id^="placeholder-"]:checked {
    color: #0E3A2F !important;
    opacity: 0.5;
    /* Text/Book 14 px */
    font-family: 'Urbanist', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

/* Estilos para los selectores cuando tienen una opción válida seleccionada */
.modal form select:valid:not([value=""]) {
    color: var(--primario-Black, #000);

    /* Text/Book 14 px */
    font-family: 'Urbanist', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

/* Estilos para los selectores cuando tienen el placeholder seleccionado */
.modal form select:valid[value=""] {
    color: var(--form-color);
    font-weight: normal;
}

.modal .modal-header .steps-bar {
    display: flex;
    padding: 10px 19px;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    align-self: stretch;
    border-radius: 4px;
    background: #F2F2F2;
    margin-top: 16px;
    margin-bottom: 0;
    max-width: 100%;
}

.modal .modal-header .step-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.modal .modal-header .step-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* Círculo con número para los steps cuando el formulario está visible */
.modal-content.has-form-padding .modal-header .step-item::before {
    content: attr(data-step-number);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 30px;
    background: #135241;
    color: #F2F2F2;
    font-family: 'Urbanist', sans-serif;
    font-size: 10px;
    font-weight: 700;
    line-height: normal;
    text-align: center;
    flex-shrink: 0;
}

/* Ocultar iconos SVG cuando el formulario está visible */
.modal-content.has-form-padding .modal-header .step-icon {
    display: none;
}

.modal .modal-header .step-text {
    color: #0E3A2F;
    font-family: 'Urbanist', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .modal:not(.cookies) .modal-content {
        padding: 0px;
    }
    .modal .modal-header .steps-bar {
        flex-direction: column;
        gap: 15px;
        padding: 15px;
    }
    .modal .modal-header {
        text-align: left;
    }
   
    

    .modal .modal-header .step-item {
        width: 100%;
        justify-content: flex-start;
    }
}

/* Estilo para el select cuando no tiene valor seleccionado */
.modal form select:not(:valid),
.modal form select option[disabled] {
    color: var(--form-color);
    font-weight: normal;
}

/* Estilo para los placeholders de los selectores */
#placeholder-model,
#placeholder-concesionarios {
    color: var(--form-color) !important;
}

/* Estilos para los selectores cuando tienen una opción válida seleccionada */
.modal form select:valid:not([value=""]) {
    color: var(--primario-Blue---primary, #002554);

    /* Text/Book 14 px */
    font-family: 'Urbanist', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

/* Estilos para los selectores cuando tienen el placeholder seleccionado */
.modal form select:valid[value=""] {
    color: var(--form-color);
    font-weight: normal;
}

.modal form input::placeholder,
.modal form select option:disabled {
    color: #4C4C4C;
    opacity: 0.5;
}

.modal form input:not(:placeholder-shown),
.modal form select:not(.untouched) {
    opacity: 1;
}

/* Estilos para campos de nombre separados */
.name-fields {
    display: block;
    margin-bottom: 0;
}

.name-fields label {
    display: block;
    margin-bottom: 0;
}

.name-fields input {
    margin-bottom: 14px;
    width: 100%;
}

/* ========================================
   FUNNEL CONTENT STYLES - HIGH SPECIFICITY
   ======================================== */

.modal .funnel-content {
    text-align: left;
    padding: 20px;
    max-width: 600px;
    margin: 0 auto;
}

.modal .funnel-content .funnel-message {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.modal .funnel-content .funnel-title {
    color: #0E3A2F;
    font-family: 'Urbanist', sans-serif;
    font-size: 26px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0;
    text-align: left;
}

.modal .funnel-content .funnel-text-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

/* Control de padding del modal-content - Sobrescribir media query */
@media (min-width: 768px) {
    .modal .modal-content {
        padding-top: 0 !important; /* Sin padding para funnel */
    }
    
}

/* Control de padding para móvil */
@media (max-width: 767px) {
    .modal .modal-content {
        padding-top: 0 !important; /* Sin padding para funnel en móvil */
    }
    
    .modal .modal-content.has-form-padding {
        padding: 20px !important; /* Padding completo para formulario en móvil */
    }
}

/* Imagen del funnel removida
.modal .modal-header .funnel-header-image {
    margin: 0 -50px 20px -50px;
    text-align: center;
    width: calc(100% + 100px);
}

.modal .modal-header .funnel-img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
*/

/* Títulos del funnel en el header */
.modal-header .funnel-header-title {
    text-align: center;
    margin-bottom: 20px;
}

.modal-header .funnel-header-title h3 {
    color: #0E3A2F;
    font-family: 'Urbanist', sans-serif;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 0px;
    line-height: 1.2;
    text-align: center;
}

.modal-header .funnel-header-title h4 {
    color: #0E3A2F;
    font-family: 'Urbanist', sans-serif;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 16px;
    line-height: 1.3;
    text-align: center;
}

.modal .funnel-content .funnel-message h3 {
    color: #0E3A2F;
    font-family: 'Urbanist', sans-serif;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 0px;
    line-height: 1.2;
    text-align: center;
}

.modal .funnel-content .funnel-message h4 {
    color: #0E3A2F;
    font-family: 'Urbanist', sans-serif;
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 16px;
    line-height: 1.3;
    text-align: center;
    line-height: normal;
}

.modal .funnel-content .funnel-text {
    text-align: left;
    margin: 0;
    padding: 0;
    max-height: none;
    overflow-y: visible;
}

/* Estilos de scrollbar personalizados para funnel-text */
.modal .funnel-content .funnel-text::-webkit-scrollbar {
    width: 6px; /* Scrollbar muy fina */
}

.modal .funnel-content .funnel-text::-webkit-scrollbar-track {
    background: transparent; /* Sin fondo, completamente transparente */
}

.modal .funnel-content .funnel-text::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2); /* Color muy sutil */
    border-radius: 3px;
    border: none; /* Sin borde */
}

.modal .funnel-content .funnel-text::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.3);
}

/* Firefox */
.modal .funnel-content .funnel-text {
    scrollbar-width: thin; /* Scrollbar fina en Firefox */
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent; /* Color y fondo transparente */
}

.modal .funnel-content .funnel-text p {
    color: #0E3A2F;
    font-family: 'Urbanist', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 7px;
    text-align: left;
    letter-spacing: 0.28px;
}

.modal .funnel-content .funnel-text p:last-child {
    margin-bottom: 0;
}

.modal .funnel-content .funnel-text strong {
    color: #0E3A2F;
    font-weight: 700;
    font-family: 'Urbanist', sans-serif;
}

/* Sección destacada con fondo gris */
.modal .funnel-content .funnel-text-highlight {
    background: #F2F2F2;
    border-radius: 4px;
    padding: 10px 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.modal .funnel-content .funnel-text-highlight p {
    color: #0E3A2F;
    font-family: 'Urbanist', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 0;
    text-align: left;
    letter-spacing: 0.28px;
}

.modal .funnel-content .funnel-text-highlight p strong {
    color: #0E3A2F;
    font-weight: 700;
    font-family: 'Urbanist', sans-serif;
}

/* Contenedor de botones del funnel */
.funnel-buttons {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
}

.modal .funnel-content button.btn-default.funnel-cta {
    display: flex;
    padding: 12px 20px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    height: 48px;
    border-radius: 53px;
    background: #FF5E00;
    color: #FFFFFF;
    text-align: center;
    font-family: 'Urbanist', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.8px;
    border: none;
    cursor: pointer;
    width: 100%;
    transition: all 0.3s ease;
}

.modal .funnel-content button.btn-default.funnel-cta:hover {
    opacity: 0.9;
    background: #FF5E00;
}

/* Botón "No" - Estilo con borde naranja */
.modal .funnel-content button.btn-default.funnel-cta-no {
    background: transparent;
    color: #FF5E00;
    border: 2px solid #FF5E00;
    border-radius: 53px;
    font-weight: 700;
    height: 48px;
    padding: 12px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-family: 'Urbanist', sans-serif;
    letter-spacing: 0.8px;
    cursor: pointer;
    width: 100%;
    transition: all 0.3s ease;
}

.modal .funnel-content button.btn-default.funnel-cta-no:hover {
    opacity: 0.9;
    background: rgba(255, 94, 0, 0.05);
}

/* Responsive adjustments for funnel */
@media (max-width: 768px) {
    .modal .modal-dialog {
        margin: 5vh auto; /* Centrar verticalmente - 5% arriba y abajo */
        max-height: 90vh; /* Usar el 90% de la altura de la ventana */
    }
    
    .modal .modal-header {
        padding-top: 15px; /* Menos padding en móvil */
    }
    
    .modal .funnel-content {
        padding: 0px 15px 20px 15px;
    }
    .modal .funnel-content button.btn-default.funnel-cta-no {
        font-size: 14px !important;
    }
    
    /* Imagen del funnel removida
    .modal .modal-header .funnel-header-image {
        margin: 0 0 0px 0;
        width: 100%;
        padding: 0;
    }
    
    .modal .modal-header .funnel-img {
        width: 100%;
        height: auto;
        border-radius: 8px;
    }
    */
    
    /* Títulos del funnel en el header - responsive */
    .modal-header .funnel-header-title h3 {
        font-size: 18px;
        margin-bottom: 5px;
    }
    
    .modal-header .funnel-header-title h4 {
        font-size: 16px;
        margin-bottom: 12px;
    }
    
    .modal .funnel-content .funnel-message h3 {
        font-size: 16px;
        margin-bottom: 0px;
        text-align: center;
    }
    
    .modal .funnel-content .funnel-message h4 {
        font-size: 16px;
        margin-bottom: 16px;
        text-align: center;
    }
    
    .modal .funnel-content .funnel-text {
        max-height: 500px; /* Más altura para evitar scroll */
        padding-right: 10px;
        padding-left: 5px;
        margin-bottom: 10px;
    }
    
    .modal .funnel-content .funnel-text p {
        font-size: 12px;
        margin-bottom: 12px; /* Más espaciamiento en móvil */
        line-height: 1.6;
    }
    .modal .funnel-content .funnel-text p strong {
        font-size: 12px;
    }
    
    .modal .funnel-content button.btn-default.funnel-cta {
      
        font-size: 12px;
        padding: 12px 18px;

    }
    .modal .funnel-content button.btn-default.funnel-cta-no {
        font-size: 12px !important;
    }
}

/* ========================================
   MODEL INFO MODAL STYLES
   ======================================== */

.model-info-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0;
}

.model-info-card {
    display: flex;
    background: #F2F2F2;
    border-radius: 20px;
    overflow: hidden;
    gap: 20px;
    padding:0px;
    margin: 20px 0px 0px;
}

.model-info-image-container {
    flex-shrink: 0;
    width: 210px;
    height: auto;
    overflow: hidden;
}

.model-info-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.model-info-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 10px 20px;
    justify-content: center;
}

.model-info-header {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.model-info-name {
    color: #0E3A2F;
    font-family: 'Urbanist', sans-serif;
    font-size: 27.56px;
    font-weight: 700;
    line-height: normal;
    margin: 0;
}

.model-info-variant {
    color: #0A5D3F;
    font-family: 'Urbanist', sans-serif;
    font-size: 16.96px;
    font-weight: 400;
    line-height: normal;
    margin: 0;
}

.model-info-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.model-info-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #135241;
    padding: 4.706px 12.549px;
    border-radius: 5px;
    color: #33F5A8;
}

.model-info-badge-icon {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.model-info-badge-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

/* Ajuste especial para el icono de CV que es más ancho */
.model-info-badge[data-type="cv"] .model-info-badge-icon {
    width: 21px;
    height: 18px;
}

.model-info-badge-text {
    color: #33F5A8;
    font-family: 'Urbanist', sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: normal;
    white-space: nowrap;
}

.model-info-price {
    display: flex;
    align-items: center;
    gap: 2.513px;
    padding: 2px 5.026px;
}

.model-info-price-label {
    color: #135241;
    font-family: 'Urbanist', sans-serif;
    font-size: 15.077px;
    font-weight: 400;
    line-height: normal;
}

.model-info-price-value {
    display: flex;
    align-items: flex-end;
    gap: 7.538px;
    color: #135241;
}

.model-info-price-value strong {
    color: #135241;
    font-family: 'Urbanist', sans-serif;
    font-size: 33.923px;
    font-weight: 700;
    line-height: 33.923px;
}

.model-info-price-value span {
    color: #135241;
    font-family: 'Urbanist', sans-serif;
    font-size: 15.077px;
    font-weight: 400;
    line-height: normal;
}

.model-info-actions {
    display: flex;
    flex-direction: column;
    gap: 11px;
    align-items: center;
}

.model-info-content button.model-info-cta,
.modal button.model-info-cta,
button.model-info-cta {
    display: flex !important;
    height: 48px !important;
    padding: 10px 20px !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    align-self: stretch !important;
    border-radius: 53px !important;
    background: var(--ff-3-a-00-uso-cta, #FF5E00) !important;
    color: var(--primario-blanco, #FFF) !important;
    text-align: center !important;
    font-family: 'Urbanist', sans-serif !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 700 !important;
    line-height: normal !important;
    letter-spacing: 0.8px !important;
    border: none !important;
    cursor: pointer !important;
    transition: opacity 0.3s ease !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

.model-info-cta:hover {
    opacity: 0.9;
}

.model-info-cta svg {
    width: 14px;
    height: 12px;
    flex-shrink: 0;
}

.model-info-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 10px;
}

.model-info-stats-icon {
    display: flex;
    width: 25px;
    height: 25px;
    padding: 1.786px;
    justify-content: center;
    align-items: center;
    gap: 5.357px;
    flex-shrink: 0;
    border-radius: 49.107px;
    background: var(--green-d-7-ffee, #D7FFEE);
}

.model-info-stats-text {
    color: #0E3A2F;
    font-family: 'Urbanist', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: normal;
    margin: 0;
}

.model-info-stats-text strong {
    font-weight: 700;
}

/* Responsive para model info modal */
@media (max-width: 768px) {
    /* Padding consistente para el modal de información del modelo */
    #model-info-modal .modal-content {
        padding: 20px !important;
    }
    
    #model-info-modal .modal-header {
        padding-top: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 15px !important;
    }
    
    #model-info-modal .modal-body {
        padding: 0 !important;
    }
    
    .model-info-content {
        padding: 0;
        gap: 15px;
    }
    
    .model-info-card {
        flex-direction: column;
        margin: 0;
        border-radius: 15px;
    }
    
    .model-info-image-container {
        width: 100%;
        height: 200px;
    }
    
    .model-info-details {
        padding: 15px;
        gap: 12px;
    }
    
    .model-info-name {
        font-size: 22px;
    }
    
    .model-info-variant {
        font-size: 14px;
    }
    
    .model-info-badges {
        gap: 6px;
    }
    
    .model-info-price {
        padding: 0;
    }
    
    .model-info-price-value strong {
        font-size: 28px;
    }
    
    .model-info-price-value span {
        font-size: 13px;
    }
    
    .model-info-actions {
        gap: 10px;
        width: 100%;
    }
    
    .model-info-stats {
        padding: 0;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .model-info-stats-text {
        font-size: 11px;
        text-align: center;
    }
}

/* ══ footer.css ══ */
footer {
    background-color: #0E3A2F;
    padding: 16px 0 22px;
}

footer > div > p {
    margin-bottom: 12px;
}

footer p.small-margin {
    margin-bottom: 6px;
}

footer button.btn-link {
    color: #fff;
    font-weight: 400;
}

footer p, footer p > span, footer a {
    font-size: 10px;
    line-height: 12px;
    color: #fff;
    text-underline-offset: 2px;
    font-weight: 400;
}

footer a:hover, footer button.btn-link:hover {
    color: var(--main-bg-color);
    font-weight: 400;
}

footer .links {
    line-height: 17px;
}

footer .legal-text {
    width: 100%;
    padding: 0px;
    box-sizing: border-box;
}

footer .legal-text p {
    width: 100%;
    max-width: none;
    margin: 16px 0 0;
    color: #666666;
    font-size: 11px;
    line-height: 1.4;
}

footer .legal-text p strong {
    font-size: 11px;
    color: #666666;
    font-weight: bold;
}

footer .container {
    margin-top: 20px;
}

@media (min-width: 768px) {
    footer {
        padding: 27px 0;
    }

    footer > div {
        display: flex;
        justify-content: space-between;
        column-gap: 30px;
        align-items: center;
    }

    footer > div > div {
        min-width: 330px;
    }
    
    footer > div > p {
        margin-bottom: 0;
        max-width: 725px;
    }

    footer .legal-text {
        padding: 0px;
    }

    footer .legal-text p {
        padding: 20px 70px;
        background-color: #fff;
        color: #666666;
        font-size: 11px;
        line-height: 1.4;
    }

    footer .legal-text p strong {
        font-size: 11px;
        color: #666666;
        font-weight: bold;
    }

    footer .container {
        margin-top: 30px;
    }
}

/* ══ aircross.css ══ */
.aircross-section {
    display: flex;
    align-items: stretch;
    width: 100%;
    margin: 0 auto;
}

.aircross-image-column,
.aircross-content-column {
    flex: 1;
    width: 50%;
}

.aircross-image-column {
    position: relative;
}

.aircross-image-column img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.aircross-content-column {
    display: flex;
    padding: 70px 120px 70px 60px;
    flex-direction: column;
    align-items: flex-start;
    background: #F2F2F2;
}

.aircross-content-column .subtitle {
    color: #00CB7B;
    text-align: center;
    font-family: 'Urbanist', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    display: flex;
    padding: 7px 0px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.aircross-content-column .title {
    color: #0E3A2F;
    font-family: 'Urbanist', sans-serif;
    font-size: 26px;
    font-style: normal;
    font-weight: 800;
    line-height: 33px;
    letter-spacing: 1.04px;
    margin-bottom: 40px;
}

.feature-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.feature-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 0px;
}

.aircross-content-column .feature-item span {
    color: #0E3A2F;

    /* Text/Bold 18px */
    font-family: 'Urbanist', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.aircross-content-column .feature-item span strong {
    color: #0E3A2F;

    /* Text/Bold 18px */
    font-family: 'Urbanist', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

@media (max-width: 768px) {
    .aircross-section {
        flex-direction: column;
    }

    .aircross-image-column,
    .aircross-content-column {
        width: 100%;
    }

    .aircross-image-column {
        height: 300px;
    }

    .aircross-content-column {
        padding: 40px 20px;
    }

    .aircross-content-column .title {
        font-size: 22px;
        line-height: 28px;
        margin-bottom: 30px;
    }

    .feature-item span {
        font-size: 14px;
    }
}

/* ══ fonts.css ══ */
/* Reemplazando las definiciones anteriores de Nissan Brand */
.font-light {
  font-family: 'Urbanist', sans-serif;
  font-weight: 300;
}

.font-regular {
  font-family: 'Urbanist', sans-serif;
  font-weight: 400;
}

.font-bold {
  font-family: 'Urbanist', sans-serif;
  font-weight: 700;
}

.font-extra-bold {
  font-family: 'Urbanist', sans-serif;
  font-weight: 800;
}