/* ==========================================================================
   AutoMax Motors — Design tokens
   Paleta: grafito + acento ignición (naranja-rojo), pensada para transmitir
   solidez mecánica y confianza, no el "SaaS card kit" genérico.
   Tipografía: DM Sans (display + texto).
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

:root{
  --ink:        #12161D;   /* fondo oscuro principal (menú, pie de página) */
  --ink-rgb:    18, 22, 29; /* mismo color que --ink, en R,G,B — para usarlo con transparencia (rgba) */
  --text:       #12161D;   /* color del texto en toda la página (sobre fondo claro) — independiente de --ink */
  --ink-text:      #F5F5F1; /* texto legible sobre --ink — se recalcula solo según qué tan claro/oscuro sea --ink */
  --ink-text-rgb:  245, 245, 241;
  --ink-2:      #1D2430;   /* fondo oscuro secundario / cards sobre oscuro */
  --steel:      #3A4658;   /* acentos medios, bordes sobre oscuro */
  --paper:      #F6F5F1;   /* fondo claro principal */
  --paper-2:    #ECEAE3;   /* fondo claro secundario */
  --ignition:   #E85D2C;   /* acento primario — naranja ignición */
  --ignition-rgb: 232, 93, 44;
  --ignition-d: #C74A1F;   /* acento primario hover/dark */
  --moss:       #2F8F5B;   /* acento secundario — confirmación / financiamiento */
  --slate:      #5B6472;   /* texto secundario */
  --line:       #DEDAD0;   /* líneas/bordes sobre claro */

  --nav-link:       #EDEBE6; /* color de los links del menú */
  --nav-link-hover: #FFFFFF; /* color al pasar el mouse / activo, y del nombre de marca */
  --nav-bg:     var(--ink);     /* fondo del menú al hacer scroll / en páginas internas (por defecto = --ink) */
  --nav-bg-rgb: var(--ink-rgb);
  --nav-link-top:       var(--nav-link);       /* links mientras el menú es transparente sobre la foto del home */
  --nav-link-top-hover: var(--nav-link-hover);

  --hero-overlay:     #12161D; /* oscurece la foto del hero para que el texto se lea */
  --hero-overlay-rgb: 18, 22, 29;
  --hero-text:        #FFFFFF; /* título y texto sobre la foto del hero */
  --hero-text-rgb:    255, 255, 255;

  --page-hero-bg:        #12161D; /* fondo del encabezado en Stock, Financiamiento, etc. */
  --page-hero-bg-rgb:    18, 22, 29;
  --page-hero-text:      #FFFFFF;
  --page-hero-text-rgb:  255, 255, 255;

  --footer-bg:        #12161D; /* fondo del pie de página — independiente del menú */
  --footer-bg-rgb:    18, 22, 29;
  --footer-text:      #F5F5F1; /* se recalcula solo según qué tan claro sea --footer-bg */
  --footer-text-rgb:  245, 245, 241;

  --font-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-display: var(--font-sans);
  --font-body: var(--font-sans);

  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 26px;

  --shadow-1: 0 1px 2px rgba(18,22,29,.06), 0 8px 24px -12px rgba(18,22,29,.18);
  --shadow-2: 0 20px 60px -20px rgba(18,22,29,.35);

  --container-max: 1280px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html{ overflow-x: clip; } /* red de seguridad: nada debe generar scroll horizontal */
body{
  font-family: var(--font-body);
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1,h2,h3,h4,.font-display{
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  font-weight: 600;
}
p{ color: var(--slate); line-height: 1.65; max-width: 62ch; }
a{ text-decoration:none; color:inherit; }
img{max-width:100%; display:block;}
.container-xl{ max-width: var(--container-max); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior:auto !important; }
}

:focus-visible{ outline: 3px solid var(--ignition); outline-offset: 2px; }

/* ---------- Utilidades de sección ---------- */
.section{ padding: clamp(3.5rem, 6vw, 6rem) 0; }
.section-head{ max-width: 640px; margin-bottom: 2.5rem; }
.section-head h2{ font-size: clamp(1.9rem, 3vw, 2.6rem); margin-bottom: .6rem; }
.section-head p{ font-size: 1.05rem; }
.section-dark{ background: var(--ink); color: var(--ink-text); }
.section-dark p{ color: rgba(var(--ink-text-rgb),.75); }
.section-dark h2, .section-dark h3{ color: var(--ink-text); }

/* Botones principales. Opcionales por cliente: --btn-bg, --btn-bg-hover, --btn-text, --btn-text-hover,
   --btn-sending-bg, --btn-sending-text (si no existen se usa el color de marca --ignition). */
.btn-ignition{
  background: var(--btn-bg, var(--ignition)); border: 1px solid var(--btn-bg, var(--ignition));
  color: var(--btn-text, #fff); font-weight:600; border-radius: 999px;
  padding: .75rem 1.6rem; transition: background .18s ease, transform .18s ease;
}
.btn-ignition:hover{ background: var(--btn-bg-hover, var(--ignition-d)); border-color: var(--btn-bg-hover, var(--ignition-d)); color: var(--btn-text-hover, var(--btn-text, #fff)); transform: translateY(-1px); }
.btn-outline-line{
  background: transparent; border: 1.5px solid currentColor; border-radius: 999px;
  padding: .7rem 1.5rem; font-weight:600; transition: all .18s ease;
}
.btn-outline-line:hover{ background: currentColor; }
.btn-outline-line.text-white:hover{ color: var(--text) !important; }
.btn-outline-line.text-ink:hover{ color: var(--paper) !important; background: var(--text); border-color: var(--text); }
/* Cabecera de sección con botón al lado (título a la izquierda, botón a la derecha) */
.section-head.d-flex{ max-width:none; gap:.5rem 2rem; margin-bottom:2rem !important; }
.section-head.d-flex > div{ max-width:640px; }
.section-head.d-flex > .btn{ margin-bottom:1.1rem !important; }
.text-ink{ color: var(--text) !important; }

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.navbar-am{
  position: fixed; top:0; left:0; right:0; z-index: 1030;
  padding: 1.1rem 0; transition: background .25s ease, padding .25s ease, box-shadow .25s ease;
  background: transparent;
}
.navbar-am.is-scrolled{
  background: rgba(var(--nav-bg-rgb),.92); backdrop-filter: blur(10px);
  padding: .7rem 0; box-shadow: 0 8px 24px -16px rgba(0,0,0,.5);
}
.navbar-am .brand{ font-family: var(--font-display); font-weight:700; font-size:1.35rem; color: var(--nav-link-hover); display:flex; align-items:center; gap:.5rem; }
.navbar-am .brand .dot{ width:10px; height:10px; border-radius:50%; background: var(--ignition); display:inline-block; }
.navbar-am .brand-logo{ height:60px; width:auto; max-width:220px; object-fit:contain; object-position:left center; display:block; }
.navbar-am .nav-link{ color: var(--nav-link); font-weight:500; padding: .5rem 1rem !important; opacity:.88; }
.navbar-am .nav-link:hover, .navbar-am .nav-link.active{ opacity:1; color: var(--nav-link-hover); }
.navbar-am .navbar-toggler{ border:none; color: var(--nav-link-hover); }
.navbar-am .btn-ignition{ padding:.55rem 1.25rem; }
/* Menú transparente sobre la foto del home: usa los colores "top" (legibles sobre la foto) */
.navbar-am:not(.is-scrolled):not(.navbar-solid) .nav-link{ color: var(--nav-link-top); }
.navbar-am:not(.is-scrolled):not(.navbar-solid) .nav-link:hover,
.navbar-am:not(.is-scrolled):not(.navbar-solid) .nav-link.active{ color: var(--nav-link-top-hover); }
.navbar-am:not(.is-scrolled):not(.navbar-solid) .brand,
.navbar-am:not(.is-scrolled):not(.navbar-solid) .navbar-toggler{ color: var(--nav-link-top-hover); }

/* Menú móvil: alineado a la derecha, bajo el botón hamburguesa */
@media (max-width: 991.98px){
  .navbar-am .navbar-nav{ text-align: right; }
  .navbar-am .navbar-nav .nav-item{ width:100%; }
  .navbar-am .navbar-nav .nav-item.ms-lg-2{ display:flex; justify-content:flex-end; }
}

/* páginas internas (sin hero oscuro fullscreen) necesitan navbar sólida siempre */
.navbar-solid{ background: rgba(var(--nav-bg-rgb),.96); backdrop-filter: blur(10px); padding: .7rem 0; }

/* ==========================================================================
   HERO SLIDER (home)
   ========================================================================== */
.hero{
  position: relative; height: min(92vh, 880px); min-height: 560px;
  background: var(--hero-overlay); overflow:hidden;
}
.hero .swiper{ height:100%; }
.hero-slide{ position:relative; height:100%; width:100%; }
.hero-slide img{ width:100%; height:100%; object-fit:cover; }
.hero-slide::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(var(--hero-overlay-rgb),.55) 0%, rgba(var(--hero-overlay-rgb),.25) 35%, rgba(var(--hero-overlay-rgb),.85) 100%);
}
.hero-copy{
  position:absolute; z-index:5; left:0; right:0; bottom: 9rem; color: var(--hero-text);
  padding: 0 clamp(1.2rem, 5vw, 4rem);
  pointer-events: none; /* deja pasar los clics a las flechas del slider debajo */
}
.hero-copy a{ pointer-events: auto; }
.hero-copy .eyebrow-plate{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family: var(--font-display); font-size:.8rem; letter-spacing:.06em;
  background: rgba(var(--hero-text-rgb),.08); border:1px solid rgba(var(--hero-text-rgb),.25);
  padding: .35rem .8rem; border-radius: 6px; margin-bottom:1.1rem;
}
.hero-copy h1{
  font-size: clamp(2.2rem, 5.2vw, 4rem); color: var(--hero-text); max-width: 15ch; line-height:1.06; margin-bottom: 1rem;
}
.hero-copy .lead{ color: var(--hero-text); opacity:.82; font-size: clamp(1rem, 1.6vw, 1.2rem); max-width: 46ch; margin-bottom: 1.6rem; }

.hero .swiper-button-next, .hero .swiper-button-prev{
  color: var(--hero-text); width:46px; height:46px; background: rgba(var(--hero-text-rgb),.08);
  border:1px solid rgba(var(--hero-text-rgb),.3); border-radius:50%; backdrop-filter: blur(4px);
}
.hero .swiper-button-next:after, .hero .swiper-button-prev:after{ font-size:1.1rem; }
.hero .swiper-pagination-bullet{ background: var(--hero-text); opacity:.45; }
.hero .swiper-pagination-bullet-active{ opacity:1; background: var(--ignition); }

/* Caja de búsqueda flotante que "muerde" el hero */
.search-float{
  position: relative; z-index: 10; margin-top: -4.6rem;
}
.search-card{
  background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-2);
  padding: 1.4rem; display:flex; gap:.75rem; align-items:center;
  flex-wrap:nowrap;
}
.search-card .form-control{
  border:none; background: var(--paper-2); border-radius: 999px;
  padding: .95rem 1.4rem; font-size:1rem;
}
.search-card .form-control:focus{ box-shadow: 0 0 0 3px rgba(var(--ignition-rgb),.18); background:#fff; }
.search-card .btn-ignition{ white-space:nowrap; }
@media (max-width: 767.98px){
  .search-card{ flex-wrap:wrap; border-radius: var(--radius-md); }
  .search-card .btn-ignition{ width:100%; }
  .search-card .form-control{ width:100%; }
}

/* ==========================================================================
   TARJETA DE VEHÍCULO (usada en destacados y stock)
   ========================================================================== */
.cartel-especial{
  font-size:.72rem; font-weight:700; background: var(--moss); color:#fff; border-radius:999px;
  padding: .2rem .65rem .2rem .55rem; display:inline-flex; align-items:center; gap:.3rem; margin-left:.4rem;
}
.bono-tag{
  font-size:.82rem; font-weight:600; background: rgba(47,143,91,.12); color: var(--moss); border-radius:999px;
  padding: .35rem .8rem; align-items:center; gap:.4rem;
}
.car-card .car-tag.tag-especial{ background: var(--moss); }
.car-card .bono-mini{
  font-size:.7rem; font-weight:700; color: var(--moss); background: rgba(47,143,91,.12);
  border-radius:999px; padding:.2rem .5rem; display:inline-flex; align-items:center; gap:.25rem;
}
.car-card-link{ display:block; height:100%; }
.car-card{
  background:#fff; border-radius: var(--radius-md); overflow:hidden;
  box-shadow: var(--shadow-1); height:100%; display:flex; flex-direction:column;
  transition: transform .22s ease, box-shadow .22s ease;
  border: 1px solid var(--line);
}
.car-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-2); }
.car-card .car-media{ position:relative; aspect-ratio: 4 / 3; overflow:hidden; background: var(--paper-2); }
.car-card .car-media img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.car-card:hover .car-media img{ transform: scale(1.06); }
.car-card .car-tag{
  position:absolute; top:.75rem; left:.75rem; background: var(--ignition); color:#fff;
  font-size:.72rem; font-weight:700; padding:.3rem .65rem; border-radius:999px;
}
.car-card .car-body{ padding: 1.1rem 1.15rem 1.25rem; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.car-card .car-title{ font-family: var(--font-display); font-size:1.08rem; font-weight:700; margin:0; }
.car-card .car-version{ color: var(--slate); font-size:.86rem; line-height:1.3; margin-bottom:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Versión + DESCR: bloque de 2 líneas fijas, así km / transmisión / combustible quedan siempre al mismo nivel */
.car-card .car-sub{ min-height: calc(2 * 1.3 * .86rem); }
.car-card .car-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin: .3rem 0 .5rem; }
.car-card .car-meta span{
  font-size:.74rem; color: var(--text); background: var(--paper-2); border-radius:6px;
  padding: .25rem .55rem; display:inline-flex; align-items:center; gap:.3rem;
}
.car-card .car-price-row{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  margin-top:auto; padding-top:.6rem; border-top:1px dashed var(--line);
}
.car-card .car-price{ font-family: var(--font-display); font-size:1.3rem; font-weight:700; color: var(--ignition); }

/* Cinta "VENDIDO" sobre la foto cuando el vehículo ya no está disponible */
.ribbon-vendido{
  position:absolute; top:1rem; right:-2.4rem; width:150px; padding:.3rem 0;
  background:#D92B2B; color:#fff; font-size:.72rem; font-weight:700; letter-spacing:.05em;
  text-align:center; text-transform:uppercase; transform: rotate(45deg);
  box-shadow: 0 3px 8px rgba(0,0,0,.25); z-index:3; pointer-events:none;
}
/* Cinta "RECIÉN LLEGADO" (autos con hasta 7 días en stock): misma esquina que VENDIDO, nunca juntas */
.ribbon-nuevo{
  position:absolute; top:1.1rem; right:-2.6rem; width:160px; padding:.22rem 0;
  background:#FFD60A; color:#12161D; font-size:.62rem; font-weight:800; line-height:1.15; letter-spacing:.04em;
  text-align:center; text-transform:uppercase; transform: rotate(45deg);
  box-shadow: 0 3px 8px rgba(0,0,0,.25); z-index:3; pointer-events:none;
}
.car-card .car-media.is-vendido img{ filter: grayscale(30%) brightness(.92); }

/* skeleton para lazy load */
.car-card.skeleton .car-media{ background: linear-gradient(90deg, #ECEAE3 25%, #F6F5F1 37%, #ECEAE3 63%); background-size:400% 100%; animation: shimmer 1.4s infinite; }
.car-card.skeleton .line{ height:.8rem; background:#ECEAE3; border-radius:4px; margin-bottom:.5rem; }
@keyframes shimmer{ 0%{background-position:100% 50%;} 100%{background-position:0 50%;} }

.destacados-strip{ position:relative; }

/* Grilla de tarjetas con ancho fijo (~300px por tarjeta), reemplaza el
   sistema de columnas de Bootstrap (row/col) para destacados y stock.
   La especificidad del selector de ID basta para ganarle a ".row" de
   Bootstrap sin tener que tocar las plantillas PHP. */
/* Máximo de tarjetas por fila: 3 o 4, definido en config.php (CARDS_MAX_PER_ROW);
   header.php lo expone como --cards-max. La columna nunca baja de 290px, así que
   en pantallas angostas se reduce sola (3, 2, 1) y nunca supera el máximo. */
:root{ --cards-max: 4; --cards-gap: 1.25rem; }
#destacadosGrid,
#stockGrid,
#similaresGrid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(max(290px, calc((100% - (var(--cards-max) - 1) * var(--cards-gap)) / var(--cards-max))), 1fr));
  gap: var(--cards-gap);
}
#stockGrid{ --bs-gutter-y:0; margin-top:1.25rem; }
#destacadosGrid > *,
#stockGrid > *,
#similaresGrid > *{
  margin:0; padding:0; max-width:none; flex:none; width:auto;
}
#destacadosGrid .empty-state,
#stockGrid .empty-state,
#similaresGrid > .col-12{ grid-column: 1 / -1; }
/* Mobile: las tarjetas conservan un margen lateral (el .row de Bootstrap las
   pegaba al borde con su margen negativo) y se distinguen unas de otras. */
@media (max-width: 767.98px){
  #destacadosGrid, #stockGrid{ margin-left:0; margin-right:0; }
}
@media (max-width: 991.98px){
  .row.g-5{ --bs-gutter-x:1.5rem; } /* g-5 (3rem) desbordaba el container -> scroll horizontal */
}
#similaresGrid{ margin:0; }

/* ==========================================================================
   TESTIMONIOS (carrusel)
   ========================================================================== */
.testi-carousel-wrap{ position:relative; padding: 0 3rem; }
.testi-carousel-wrap .swiper-slide{ height:auto; }
.testi-card{
  background:#fff; border-radius: var(--radius-md); padding: 1.6rem; height:100%;
  border:1px solid var(--line); box-shadow: var(--shadow-1);
  display:flex; flex-direction:column;
}
.testi-card .stars{ color: #FBBC04; /* amarillo fijo tipo Google, no depende del color del cliente */ letter-spacing:.15em; font-size:.95rem; margin-bottom:.6rem; }
.testi-card p{ color: var(--text); font-size:1rem; margin-bottom: 1.2rem; flex:1; }
.testi-card .who-row{ display:flex; align-items:center; gap:.8rem; }
.testi-card .avatar-circle{
  width:44px; height:44px; border-radius:50%; flex-shrink:0; color:#fff;
  font-family: var(--font-display); font-weight:700; font-size:.95rem;
  display:flex; align-items:center; justify-content:center;
}
.testi-card .who{ font-family: var(--font-display); font-weight:700; font-size:.95rem; color: var(--text); }
.testi-card .who span{ display:block; font-family: var(--font-body); font-weight:400; color: var(--slate); font-size:.82rem; }

.testi-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:44px; height:44px; border-radius:50%; border:1px solid rgba(var(--ink-text-rgb),.25);
  background: rgba(var(--ink-text-rgb),.08); color: var(--ink-text); display:flex; align-items:center; justify-content:center;
  transition: background .15s ease;
}
.testi-nav:hover{ background: var(--ignition); border-color: var(--ignition); }
.testi-nav-prev{ left:0; }
.testi-nav-next{ right:0; }
.testiPagination{ position: static !important; text-align:center; margin-top: 1.5rem; }
.testiPagination .swiper-pagination-bullet{ background:#fff; opacity:.4; }
.testiPagination .swiper-pagination-bullet-active{ opacity:1; background: var(--ignition); }
@media (max-width: 575.98px){
  .testi-carousel-wrap{ padding: 0 2.6rem; }
  .testi-nav{ width:36px; height:36px; }
}

/* ==========================================================================
   SERVICIOS
   ========================================================================== */
.service-card{
  padding: 1.8rem; border-radius: var(--radius-md); height:100%;
  background: var(--paper-2); transition: background .2s ease, color .2s ease;
  border: 1px solid transparent;
}
.service-card:hover{ background: var(--ink); color: var(--ink-text); }
.service-card:hover p{ color: rgba(var(--ink-text-rgb),.75); }
.service-card .icon-wrap{
  width:54px; height:54px; border-radius: 14px; background:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; color: var(--ignition); margin-bottom:1.1rem; box-shadow: var(--shadow-1);
}
.service-card h3{ font-size:1.15rem; margin-bottom:.4rem; }

/* ==========================================================================
   PARTNERS (marquee)
   ========================================================================== */
.partners-track{
  background: var(--paper); /* el fondo propio permite que mix-blend-mode:multiply funcione dentro de la animación */
  display:flex; gap: 3.5rem; align-items:center; width:max-content;
  animation: scrollx 26s linear infinite;
}
.partners-viewport{ background: var(--paper); overflow:hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.partners-track .p-item{ font-family: var(--font-display); font-weight:700; font-size:1.15rem; color: var(--text); display:inline-flex; align-items:center; gap:.7rem; white-space:nowrap; }
.partners-track .p-logo{
  width:42px; height:42px; border-radius:10px; background: var(--paper-2); border:1px solid var(--line);
  display:inline-flex; align-items:center; justify-content:center; color: var(--ignition); font-size:1.15rem; flex-shrink:0;
}
@keyframes scrollx{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }

/* ==========================================================================
   MAPA
   ========================================================================== */
.map-wrap{ border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-1); border:1px solid var(--line); }
#map{ height: 420px; width:100%; filter: grayscale(.15); }
.map-info-card{
  background:#fff; border-radius: var(--radius-md); padding: 1.6rem; box-shadow: var(--shadow-1);
  border:1px solid var(--line); height:100%;
}
.map-info-card .row-item{ display:flex; gap:.9rem; margin-bottom:1.1rem; }
.map-info-card .row-item .ic{ width:38px; height:38px; border-radius:10px; background: var(--paper-2); display:flex; align-items:center; justify-content:center; color: var(--ignition); flex-shrink:0; }

/* ==========================================================================
   UBICACIÓN — título + botones grandes de "cómo llegar" + mapa (footer)
   ========================================================================== */
.ubicacion-sucursal{
  background: var(--footer-bg); color: var(--footer-text); text-align:center;
  padding: 3rem 1.2rem 2.6rem;
  background-image:
    repeating-linear-gradient(22.5deg, transparent, transparent 2px, rgba(var(--footer-text-rgb),.05) 2px, rgba(var(--footer-text-rgb),.05) 3px, transparent 3px, transparent 8px),
    repeating-linear-gradient(112.5deg, transparent, transparent 2px, rgba(var(--footer-text-rgb),.04) 2px, rgba(var(--footer-text-rgb),.04) 3px, transparent 3px, transparent 8px);
  border-top: 2px solid var(--ignition);
}
.ubicacion-sucursal .us-inner{ max-width: 680px; margin: 0 auto; }
.ubicacion-sucursal .us-title{
  font-family: var(--font-display); font-weight:700; font-size:1.3rem; line-height:1.4; margin-bottom:.9rem;
}
.ubicacion-sucursal .us-address{ color: var(--footer-accent, var(--ignition)); }
.ubicacion-sucursal .us-sub{ color: rgba(var(--footer-text-rgb),.9); font-size:.95rem; margin:0 auto 1.8rem; }
.ubicacion-sucursal .us-actions{ display:flex; justify-content:center; gap:.9rem; flex-wrap:wrap; }
.btn-mapa{
  display:inline-flex; align-items:center; gap:.6rem; padding:.75rem 1.3rem; border-radius:999px;
  background: rgba(var(--footer-text-rgb),.1); color: var(--footer-text); text-decoration:none;
  font-size:.92rem; font-weight:600; transition: background .2s ease;
}
.btn-mapa:hover{ background: var(--ignition); color:#fff; }
.btn-mapa i{ font-size:1.15rem; }
.btn-mapa .mapa-ico{ flex:0 0 auto; display:block; }

.footer-map-wrap{ position:relative; width:100%; }
#footerMap{ height: 380px; width:100%; filter: grayscale(.1); }
.footer-map-card{
  position:absolute; top:1.4rem; left:1.4rem; z-index:400;
  background:#fff; border-radius: var(--radius-md); box-shadow: var(--shadow-2);
  padding: 1rem 1.3rem; max-width: 280px;
}
.footer-map-card .fmc-brand{ font-family: var(--font-display); font-weight:700; font-size:1.05rem; display:flex; align-items:center; gap:.5rem; margin-bottom:.4rem; }
.footer-map-card .fmc-brand .dot{ width:9px; height:9px; border-radius:50%; background: var(--ignition); display:inline-block; }
.footer-map-card .fmc-brand-logo{ height:32px; width:auto; max-width:100%; object-fit:contain; object-position:left center; display:block; margin-bottom:.6rem; }
.footer-map-card .fmc-brand-logo.on-dark{ background: var(--ink); padding:.5rem .8rem; border-radius:10px; box-sizing:content-box; max-width:calc(100% - 1.6rem); }
.footer-map-card p{ font-size:.85rem; color: var(--slate); max-width:none; }
@media (max-width: 575.98px){
  #footerMap{ height: 300px; }
  .footer-map-card{ left:.8rem; right:.8rem; top:.8rem; max-width:none; }
  .ubicacion-sucursal{ padding: 2.4rem 1rem 2rem; }
  .ubicacion-sucursal .us-actions{ flex-direction:column; align-items:stretch; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer-am{ background: var(--footer-bg); color: rgba(var(--footer-text-rgb),.85); padding: 3rem 0 1.5rem; }
.footer-am h3{ color: var(--footer-accent, var(--footer-text)); font-family:var(--font-display); }
.footer-am a.flink{ color: rgba(var(--footer-text-rgb),.85); display:block; padding:.28rem 0; transition:color .15s ease; }
.footer-am a.flink:hover{ color: var(--footer-accent, var(--ignition)); }
.footer-am .brand{ color: var(--footer-text); font-family: var(--font-display); font-weight:700; font-size:1.4rem; }
.footer-am .footer-brand-logo{ height:38px; width:auto; max-width:100%; object-fit:contain; object-position:left center; display:block; }
.footer-top-row{ border-bottom:1px solid rgba(var(--footer-text-rgb),.12); }
.footer-info-row .finfo-title{ color: var(--footer-accent, var(--ignition)); font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:.7rem; }
.footer-info-row p{ color: rgba(var(--footer-text-rgb),.92); font-size:.92rem; max-width:none; }
.waze-btn{
  display:inline-flex; align-items:center; gap:.4rem; background: rgba(var(--footer-text-rgb),.08); border:1px solid rgba(var(--footer-text-rgb),.25);
  color: var(--footer-text); border-radius:999px; padding:.4rem .9rem; font-size:.85rem; font-weight:600; transition: background .15s ease;
}
.waze-btn:hover{ background: var(--ignition); border-color: var(--ignition); color:#fff; }
.footer-am .social a{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(var(--footer-text-rgb),.2);
  display:inline-flex; align-items:center; justify-content:center; margin-right:.5rem; color: var(--footer-text);
  transition: all .18s ease;
}
.footer-am .social a:hover{ background: var(--ignition); border-color: var(--ignition); }
.footer-bottom{ border-top:1px solid rgba(var(--footer-text-rgb),.12); margin-top:2.5rem; padding-top:1.5rem; font-size:.85rem; color: rgba(var(--footer-text-rgb),.55); }
.fm-credit{ display:inline-flex; align-items:center; gap:.6rem; color: rgba(var(--footer-text-rgb),.55); transition: opacity .15s ease; }
.fm-credit:hover{ opacity:.8; }
.fm-credit .fm-label{ font-size:.8rem; }
.fm-credit .fm-logo-img{ width:150px; max-width:150px; height:auto; display:block; }

/* ==========================================================================
   WHATSAPP FLOTANTE
   ========================================================================== */
.wa-float{
  position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 1040;
  width:60px; height:60px; border-radius:50%; background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.7rem;
  box-shadow: 0 10px 30px -8px rgba(37,211,102,.6);
  animation: pulse-wa 2.6s ease-in-out infinite;
}
.wa-float:hover{ color:#fff; }
@keyframes pulse-wa{
  0%,100%{ box-shadow: 0 10px 30px -8px rgba(37,211,102,.6); }
  50%{ box-shadow: 0 10px 34px -4px rgba(37,211,102,.85); }
}

/* ==========================================================================
   PÁGINAS INTERNAS — hero con imagen de fondo
   ========================================================================== */
.page-hero{
  background:
    linear-gradient(180deg, rgba(var(--page-hero-bg-rgb),.72) 0%, rgba(var(--page-hero-bg-rgb),.88) 100%),
    var(--page-hero-img, none) center/cover no-repeat,
    var(--page-hero-bg);
  color: var(--page-hero-text); padding: 10.5rem 0 4.5rem;
  position:relative; overflow:hidden;
}
.page-hero h1{ color: var(--page-hero-text); font-size: clamp(2rem, 4vw, 3rem); }
.page-hero .lead{ color: var(--page-hero-text); opacity:.85; font-size:1.05rem; max-width:60ch; margin-bottom:0; }
.page-hero .breadcrumb-am{ color: rgba(var(--page-hero-text-rgb),.65); font-size:.9rem; margin-bottom:1rem; }
.page-hero .breadcrumb-am a{ color: rgba(var(--page-hero-text-rgb),.65); }
.page-hero .breadcrumb-am a:hover{ color: var(--page-hero-text); }

/* ==========================================================================
   QUIENES SOMOS
   ========================================================================== */
.value-item{ display:flex; gap:1rem; padding: 1.2rem 0; border-bottom: 1px solid var(--line); }
.value-item .num{ font-family: var(--font-display); font-size:1.6rem; font-weight:700; color: var(--ignition); flex-shrink:0; width:2.6rem; }
.timeline-am{ position:relative; padding-left: 2rem; }
.timeline-am::before{ content:''; position:absolute; left:6px; top:6px; bottom:6px; width:2px; background: var(--line); }
.timeline-am .t-item{ position:relative; padding-bottom: 2rem; }
.timeline-am .t-item::before{ content:''; position:absolute; left:-2rem; top:4px; width:14px; height:14px; border-radius:50%; background: var(--ignition); border:3px solid #fff; box-shadow:0 0 0 2px var(--ignition); }
.timeline-am .t-year{ font-family: var(--font-display); font-weight:700; color: var(--ignition); }

.team-card{ text-align:center; }
.team-card .ph{ width:100%; aspect-ratio:1; border-radius: var(--radius-md); overflow:hidden; margin-bottom:1rem; background: var(--paper-2); }
.team-card .ph img{ width:100%; height:100%; object-fit:cover; }

/* ==========================================================================
   STOCK — barra lateral de filtros + grilla
   ========================================================================== */
.filters-toggle-btn{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1px solid var(--line); border-radius: var(--radius-md);
  padding: .9rem 1.1rem; font-weight:600; color: var(--text); margin-bottom:1rem;
}
.filters-toggle-btn .toggle-chevron{ transition: transform .2s ease; }
.filters-toggle-btn.is-open .toggle-chevron{ transform: rotate(180deg); }

.filters-sidebar{
  background:#fff; border-radius: var(--radius-md); border:1px solid var(--line);
  padding: 1.1rem 1.2rem; box-shadow: var(--shadow-1);
}
.filters-sidebar .fs-title{
  align-items:center; justify-content:space-between; font-family: var(--font-display);
  font-weight:700; font-size:1.05rem; margin-bottom:.8rem; padding-bottom:.7rem; border-bottom:1px solid var(--line);
}
.btn-clear-mini{ border:none; background:none; color: var(--slate); font-size:.8rem; display:flex; align-items:center; gap:.3rem; }
.btn-clear-mini:hover{ color: var(--ignition); }

.filter-search .form-label{ font-size:.78rem; font-weight:600; color: var(--slate); margin-bottom:.3rem; }
.filter-search .input-group-text{ background:#fff; border-color: var(--line); }
.filter-search .form-control{ border-color: var(--line); font-size:.92rem; }
.filter-search .form-control:focus{ box-shadow: 0 0 0 3px rgba(var(--ignition-rgb),.15); border-color: var(--ignition); }

.active-chips{ margin: .6rem 0 0; }
.active-chips:empty{ margin:0; }

.filters-accordion{ margin-top: .2rem; display:grid; grid-template-columns: 1fr 1fr; column-gap: .9rem; }
.filters-accordion .accordion-item{ grid-column: 1 / -1; }
/* dos filtros cortos (Transmisión / Combustible) comparten fila: stock.js
   les agrega .fa-half. */
.filters-accordion .accordion-item.fa-half{ grid-column: span 1; min-width:0; }
/* Sin acordeón: todos los grupos siempre visibles, sin separadores ni flecha.
   El título actúa como una etiqueta pequeña sobre cada control. */
.filters-accordion .accordion-item{ border:none; background:none; margin-bottom:.55rem; }
.filters-accordion .accordion-item:last-child{ margin-bottom:0; }
.filters-accordion .accordion-header{ margin:0; }
.filters-accordion .accordion-button{
  display:block; width:100%; padding:0 0 .2rem; font-weight:600; font-size:.74rem; letter-spacing:.02em;
  color: var(--slate); background:none; box-shadow:none; pointer-events:none; cursor:default;
}
.filters-accordion .accordion-button:not(.collapsed){ color: var(--slate); background:none; box-shadow:none; }
.filters-accordion .accordion-button::after{ display:none; }
.filters-accordion .accordion-collapse{ display:block !important; height:auto !important; visibility:visible !important; }
.filters-accordion .accordion-body{ padding: 0; }
.filters-accordion .form-select{ border-radius: var(--radius-sm); border-color: var(--line); font-size:.88rem; padding-top:.4rem; padding-bottom:.4rem; text-overflow:ellipsis; }
.filters-accordion .form-select:focus{ box-shadow: 0 0 0 3px rgba(var(--ignition-rgb),.15); border-color: var(--ignition); }

/* ---- Filtros en barra superior (desktop) --------------------------------
   stock.js agrega .filters-top a la fila que contiene el panel. El panel
   pasa a ancho completo, sin sticky, en una grilla de 30 columnas:
   fila 1: buscador; fila 2: 5 selects (placeholder = título);
   fila 3: 3 sliders con el título en la misma línea que los valores. */
.rv-title{ display:inline; font-size:.74rem; font-weight:600; color: var(--slate); }
.btn-show-results{ display:none; margin-bottom:.6rem; }
.filters-accordion .accordion-header{ display:none; } /* el título va como placeholder / junto a los valores */
.range-values{ gap:.6rem; align-items:baseline; }
.range-values > span:last-child{ margin-left:auto; }
@media (max-width: 991.98px){ .btn-show-results{ display:block; } }
.fa-max-only #kmMin, .fa-max-only #kmMinLabel{ display:none; }
@media (min-width: 992px){
  .row.filters-top > *{ flex:0 0 100% !important; max-width:100% !important; width:100% !important; }
  .filters-top .filters-sidebar{
    position:static; padding:.8rem 1rem 1rem;
    display:grid; grid-template-columns: repeat(30, minmax(0,1fr)); column-gap:1rem; row-gap:.8rem; align-items:end;
  }
  .filters-top .filters-sidebar .fs-title{ grid-column:1 / -1; margin:0; padding:0; border:none; font-size:.95rem; }
  .filters-top .filters-sidebar .active-chips{ display:none; }
  .filters-top .filters-sidebar .filter-search{ grid-column:1 / -1; }
  .filters-top .filters-sidebar .filter-search .form-label{ display:none; }
  .filters-top .filters-sidebar .filters-accordion{ display:contents; }
  .filters-top .filters-sidebar .filters-accordion .accordion-item{ grid-column: span 6; margin:0; min-width:0; }
  .filters-top .filters-sidebar .filters-accordion .accordion-item.fa-range{ grid-column: span 10; }
  .filters-top .filters-sidebar .accordion-header{ display:none; }
  .filters-top .range-values{ gap:.6rem; align-items:baseline; margin-bottom:.1rem; }
  .filters-top .range-values .rv-title{ display:inline; font-size:.74rem; font-weight:600; color: var(--slate); }
  .filters-top .range-values > span:last-child{ margin-left:auto; }
}

/* Slider de rango doble (año / precio / kilometraje) */
.range-slider .range-values{ display:flex; justify-content:space-between; font-size:.8rem; font-weight:600; color: var(--text); margin-bottom:.15rem; }
.range-track-wrap{ position:relative; height:28px; }
.range-track{ position:absolute; top:50%; left:0; right:0; height:4px; margin-top:-2px; background: var(--line); border-radius:2px; }
.range-track-fill{ position:absolute; top:50%; height:4px; margin-top:-2px; background: var(--ignition); border-radius:2px; }
.range-input{
  position:absolute; top:0; left:0; width:100%; height:28px; margin:0; background:none;
  -webkit-appearance:none; appearance:none; pointer-events:none;
}
.range-input::-webkit-slider-runnable-track{ -webkit-appearance:none; background:transparent; height:28px; }
.range-input::-webkit-slider-thumb{
  -webkit-appearance:none; pointer-events:auto; width:18px; height:18px; border-radius:50%; margin-top:5px;
  background: var(--ignition); border:3px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.35); cursor:pointer;
}
.range-input::-moz-range-track{ background:transparent; border:none; height:28px; }
.range-input::-moz-range-thumb{
  pointer-events:auto; width:18px; height:18px; border-radius:50%; border:3px solid #fff;
  background: var(--ignition); box-shadow:0 1px 4px rgba(0,0,0,.35); cursor:pointer;
}

.chip{
  display:inline-flex; align-items:center; gap:.4rem; background: var(--paper-2); border-radius:999px;
  padding:.35rem .8rem .35rem 1rem; font-size:.82rem; margin: .2rem .4rem .2rem 0;
}
.chip button{ border:none; background:none; color: var(--slate); line-height:1; padding:0; font-size:1rem; }

.results-bar{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.6rem; margin: 0 0 1.2rem; }
.results-bar .count{ color: var(--slate); font-size:.92rem; }

.sort-select{ width:auto; display:inline-block; }

.empty-state{ text-align:center; padding: 4rem 1rem; color: var(--slate); }
.empty-state .ic{ font-size:2.6rem; color: var(--line); margin-bottom:1rem; }

.load-more-wrap{ text-align:center; margin-top: 2.2rem; }

/* fade-in cuando la imagen lazy termina de cargar */
.lazy-img{ opacity:0; transition: opacity .45s ease; }
.lazy-img.is-loaded{ opacity:1; }

/* ==========================================================================
   FICHA DE VEHÍCULO
   ========================================================================== */
.gallery-main{ border-radius: var(--radius-md); overflow:hidden; position:relative; aspect-ratio: 4/3; background:var(--ink-2); }
.gallery-main{ touch-action: pan-y; } /* el swipe horizontal es de la galería; el vertical sigue siendo scroll */
.gallery-main img{ width:100%; height:100%; object-fit:cover; cursor: zoom-in; transition: opacity .12s ease; }
.gallery-main .gallery-count{
  position:absolute; top:.8rem; right:.8rem; background: rgba(0,0,0,.55); color:#fff; font-size:.75rem;
  padding:.25rem .6rem; border-radius:999px; pointer-events:none; backdrop-filter: blur(3px);
}
.gallery-main .zoom-hint{
  position:absolute; bottom:.9rem; right:.9rem; background: rgba(0,0,0,.55); color:#fff;
  font-size:.78rem; padding:.4rem .7rem; border-radius: 999px; display:flex; gap:.4rem; align-items:center;
  backdrop-filter: blur(3px); pointer-events:none;
}
.gallery-thumbs{ display:flex; gap:.6rem; margin-top:.7rem; overflow-x:auto; padding-bottom:.3rem; }
.gallery-thumbs img{
  width: 84px; height:64px; object-fit:cover; border-radius:8px; cursor:pointer; flex-shrink:0;
  border:2px solid transparent; opacity:.65; transition: all .15s ease;
}
.gallery-thumbs img.active, .gallery-thumbs img:hover{ opacity:1; border-color: var(--ignition); }

.vehicle-header{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; align-items:flex-start; margin-bottom:1rem; }
.vehicle-header h1{ font-size: clamp(1.6rem,3vw,2.1rem); margin-bottom:.2rem; }
.vehicle-price{ font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight:700; color: var(--text); }
.vehicle-price small{ display:block; font-family: var(--font-body); font-weight:400; font-size:.8rem; color: var(--slate); }

.spec-grid{ display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .8rem; margin: 1.2rem 0; }
.spec-grid .spec{ background: var(--paper-2); border-radius: 10px; padding: .8rem .9rem; }
.spec-grid .spec .lbl{ font-size:.72rem; color: var(--slate); }
.spec-grid .spec .val{ font-family: var(--font-display); font-weight:700; font-size:.98rem; }

.feature-pill{ background: var(--paper-2); border-radius:999px; padding:.4rem .9rem; font-size:.85rem; display:inline-flex; align-items:center; gap:.4rem; margin:.25rem .4rem .25rem 0; }

.contact-box{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius-md); padding: 1.5rem;
  box-shadow: var(--shadow-1); position: sticky; top: 6.5rem;
}
.btn-wa{
  background:#25D366; color:#fff; border-radius:999px; width:100%; padding:.8rem; font-weight:600;
  display:flex; align-items:center; justify-content:center; gap:.5rem; border:none; text-decoration:none;
}
.btn-wa:hover{ background:#1fbf5c; color:#fff; }

.nav-tabs-am{ border-bottom: 1px solid var(--line); }
.nav-tabs-am .nav-link{ border:none; color: var(--slate); font-weight:600; padding: .8rem .2rem; margin-right: 1.6rem; border-bottom: 2px solid transparent; }
.nav-tabs-am .nav-link.active{ color: var(--text); border-color: var(--ignition); background:none; }

.video-embed{ position:relative; padding-top:56.25%; border-radius: var(--radius-md); overflow:hidden; background:#000; }
.video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

.social-video-card{
  background: var(--paper-2); border-radius: var(--radius-md); padding: 1.2rem; display:flex; align-items:center; gap:1rem;
}
.social-video-card .ic{ width:48px; height:48px; border-radius:12px; background:#fff; display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0; }

/* ==========================================================================
   FINANCIAMIENTO
   ========================================================================== */
.calc-card{ background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-2); padding: clamp(1.4rem, 3vw, 2.4rem); }
.calc-result{ background: var(--ink); color: var(--ink-text); border-radius: var(--radius-md); padding: 1.6rem; text-align:center; }
.calc-result .big{ font-family: var(--font-display); font-size: 2.4rem; font-weight:700; color: var(--ignition); }
.form-range::-webkit-slider-thumb{ background: var(--ignition); }
.form-range::-moz-range-thumb{ background: var(--ignition); }

.req-list li{ padding: .5rem 0; border-bottom:1px dashed var(--line); display:flex; gap:.6rem; }
.req-list li:last-child{ border-bottom:none; }

/* ==========================================================================
   CONSIGNACIONES
   ========================================================================== */
.step-card{ background:#fff; border:1px solid var(--line); border-radius: var(--radius-md); padding:1.6rem; height:100%; }
.step-card .step-badge{ font-family: var(--font-display); font-weight:700; color: var(--ignition); font-size:.85rem; margin-bottom:.5rem; display:block; }

/* ==========================================================================
   CONTACTO
   ========================================================================== */
.contact-form-card{ background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-1); border:1px solid var(--line); padding: clamp(1.4rem,3vw,2.4rem); }
.form-control-am, .form-select-am{ border-radius: var(--radius-sm); border-color: var(--line); padding:.75rem .9rem; }
.form-control-am:focus, .form-select-am:focus{ border-color: var(--ignition); box-shadow: 0 0 0 3px rgba(var(--ignition-rgb),.15); }

/* back to top */
.back-top{
  position:fixed; left:1.4rem; bottom:1.4rem; z-index:1040; width:46px; height:46px; border-radius:50%;
  background: var(--ink); color: var(--ink-text); display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform: translateY(10px); transition: all .25s ease;
}
.back-top.show{ opacity:1; visibility:visible; transform:none; }

/* loader de página */
#page-loader{ position:fixed; inset:0; background: var(--ink); z-index:2000; display:flex; align-items:center; justify-content:center; transition: opacity .3s ease, visibility .3s ease; }
#page-loader.hide{ opacity:0; visibility:hidden; }
#page-loader .gear{ width:44px; height:44px; border:3px solid rgba(var(--ink-text-rgb),.2); border-top-color: var(--ignition); border-radius:50%; animation: spin 0.9s linear infinite; }
@keyframes spin{ to{ transform: rotate(360deg); } }

/* Teléfonos clickeables en la página de contacto */
.map-info-card a.tel-link{ color: inherit; text-decoration:none; }
.map-info-card a.tel-link:hover{ color: var(--ignition); text-decoration: underline; }

.footer-info-row .hr-horas{ padding-left:1.6rem; display:inline-block; }


/* Botón de envío de formularios: estado "Enviando…" */
.am-spin{display:inline-block;width:1em;height:1em;margin-right:.45em;vertical-align:-.15em;border:.17em solid currentColor;border-right-color:transparent;border-radius:50%;animation:amSpin .7s linear infinite}
@keyframes amSpin{to{transform:rotate(360deg)}}
.btn.is-sending,.btn.is-sending:disabled{opacity:.85;cursor:progress;pointer-events:none}
/* Mientras se envía (Bootstrap deja los botones deshabilitados transparentes: se fija el color explícito) */
.btn-ignition.is-sending,.btn-ignition.is-sending:disabled,.btn-ignition.is-sending:hover{
  background: var(--btn-sending-bg, var(--btn-bg, var(--ignition)));
  border-color: var(--btn-sending-bg, var(--btn-bg, var(--ignition)));
  color: var(--btn-sending-text, var(--btn-text, #fff)); transform:none;
}


/* ==========================================================================
   FINANCIERAS / MEDIOS DE PAGO (franja del pie, en todas las páginas)
   Todas las casillas miden lo mismo; el logo se ajusta dentro (object-fit: contain).
   ========================================================================== */
.fin-strip{ background: var(--paper); padding: 1.6rem 0; border-top:1px solid var(--line); }
.fin-viewport{ overflow:hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.fin-track{ display:flex; align-items:center; width:max-content; background: var(--paper); animation: finscroll 40s linear infinite; }
.fin-track:hover{ animation-play-state: paused; }
.fin-dup{ display:contents; }
.fin-item{ flex:0 0 auto; width:150px; height:64px; margin-right:40px; display:flex; align-items:center; justify-content:center; }
.fin-item img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block; mix-blend-mode:multiply; } /* multiply: el fondo blanco del .jpg se funde con el de la franja */
@keyframes finscroll{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} }
@media (max-width: 575.98px){ .fin-item{ width:120px; height:52px; margin-right:28px; } }

/* Móvil: espacio al final del pie para que los botones flotantes (WhatsApp y "subir") no tapen el crédito de FullMotor */
@media (max-width: 767.98px){
  .footer-am{ padding-bottom: 7rem; }
}

/* Ficha en móvil: marca/modelo, versión/año, precio, fotos, datos + formulario y al final descripción/características.
   (En escritorio no cambia: galería+pestañas a la izquierda, datos a la derecha.) */
.ficha-price-m{ margin-bottom:.2rem; }
@media (max-width: 991.98px){
  .ficha-layout{ display:flex; flex-direction:column; --bs-gutter-x:0; --bs-gutter-y:0; margin-left:0; margin-right:0; row-gap:1.1rem; }
  .ficha-layout > .ficha-left, .ficha-layout > .ficha-right{ display:contents; }
  .ficha-layout{ width:100%; max-width:100%; min-width:0; overflow-x:clip; }
  .ficha-layout .vehicle-header, .ficha-layout .ficha-price-m, .ficha-layout .gallery-main,
  .ficha-layout .gallery-thumbs, .ficha-layout .spec-grid, .ficha-layout .contact-box,
  .ficha-layout #vehicleTabs, .ficha-layout .tab-content{
    width:100%; max-width:100%; min-width:0; box-sizing:border-box; flex:0 0 auto;
  }
  .ficha-layout .gallery-thumbs{ overflow-x:auto; }
  .ficha-layout .gallery-thumbs img{ flex:0 0 auto; }
  .ficha-layout .tab-content, .ficha-layout .contact-box{ overflow-wrap:anywhere; }
  .ficha-layout .vehicle-header{ order:1; margin-bottom:0; }
  .ficha-layout .ficha-price-m{ order:2; }
  .ficha-layout .gallery-main{ order:3; }
  .ficha-layout .gallery-thumbs{ order:4; margin-top:0; }
  .ficha-layout .spec-grid{ order:5; margin:0; }
  .ficha-layout .contact-box{ order:6; }
  .ficha-layout #vehicleTabs{ order:7; margin-top:.5rem !important; }
  .ficha-layout .tab-content{ order:8; }
}

/* Ficha: 3 características en una fila (también en móvil) */
.spec-grid .spec .lbl, .spec-grid .spec .val{ overflow-wrap:anywhere; }
@media (max-width: 575.98px){
  .spec-grid{ gap:.5rem; }
  .spec-grid .spec{ padding:.6rem .55rem; }
  .spec-grid .spec .lbl{ font-size:.72rem; }
  .spec-grid .spec .val{ font-size:.86rem; line-height:1.25; }
}
.ficha-descr{ font-size:1rem; }
/* Ficha: sección "Llámanos" */
.llamenos{ margin-bottom:1rem; }
.llamenos-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.45rem; }
.llamenos.con-nombres .llamenos-grid{ grid-template-columns:minmax(0,1fr); }
.llamenos-item{ min-width:0; display:flex; align-items:center; gap:.7rem; padding:.55rem .7rem; border:1px solid var(--line, rgba(0,0,0,.12)); border-radius:10px; color:var(--ink); text-decoration:none; background:var(--paper-2); }
.llamenos-item:hover{ border-color:var(--ignition); color:var(--ink); }
.llamenos-item i{ color:var(--ignition); }
.llamenos-item b{ display:block; font-size:.86rem; font-weight:600; }
.llamenos-num{ display:block; font-size:.95rem; }
/* Pie: nombre del ejecutivo sobre el teléfono */
.ftel-ejec{ display:block; font-size:.8rem; opacity:.75; margin-top:.35rem; }
@media (max-width: 575.98px){
  .llamenos-item{ padding:.5rem .5rem; gap:.4rem; }
  .llamenos-item i{ display:none; }
  .llamenos-num{ font-size:.84rem; white-space:nowrap; }
}

/* Ficha: cintas VENDIDO / RECIÉN LLEGADO sobre el visor y aviso de vehículo vendido */
.gallery-main.has-ribbon .gallery-count{ right:auto; left:.8rem; }
.gallery-main.is-vendido img{ filter: grayscale(35%) brightness(.9); }
.aviso-vendido{
  display:flex; align-items:center; gap:.75rem; margin:0 0 1.2rem; padding:.9rem 1.1rem;
  border:1px solid #D92B2B; border-radius:10px; background:rgba(217,43,43,.07); color:#B71C1C;
}
.aviso-vendido > i{ font-size:1.4rem; color:#D92B2B; flex:0 0 auto; }
.aviso-vendido a{ color:inherit; font-weight:600; text-decoration:underline; }

/* Ficha: característica premium (equipamiento destacado) */
.feature-pill.feature-premium{
  background: rgba(var(--ignition-rgb), .12); border:1px solid rgba(var(--ignition-rgb), .45);
  color: var(--ink); font-weight:700;
}
.feature-pill.feature-premium i{ color: var(--ignition); }

/* Mapa del pie bloqueado en móvil/táctil: sin zoom ni arrastre; el dedo desliza la página */
#footerMap.map-bloqueado, #footerMap.map-bloqueado.leaflet-container{ touch-action: pan-y !important; }
#footerMap.map-bloqueado .leaflet-control-zoom{ display:none; }