/* =========================================================
   Rediseño Autoplaya — capa nueva sobre style.css
   Identidad propia: cortes diagonales, tipografía display
   itálica/bold y acentos rojos angulados.
   Variables de marca definidas en style.css:
   --brand-red #E30613 · --brand-red-dark #B7050F · --brand-black #111111
   ========================================================= */

/* ---------- Base ---------- */
/* Bootstrap define html{font-size:10px}, así que cualquier tamaño en rem de
   esta hoja se calculaba sobre esa base reducida (ej: 1rem = 10px en vez de
   16px), dejando todo el texto ~40% más chico de lo previsto. Se restaura
   una base normal y un poco más grande para que se lea cómodo. */
html {
  font-size: 15.5px;
}

/* Varias clases propias (.btn-hero, .btn-quitar-slot, etc.) fijan su propio
   "display", y a igual especificidad la hoja del autor le gana a la hoja
   nativa del navegador que oculta [hidden]. Sin esta regla, un botón con el
   atributo "hidden" puesto por JS podía seguir mostrándose (pasó con
   "Siguiente"/"Publicar" del wizard, quedaban los dos visibles a la vez). */
[hidden] {
  display: none !important;
}

body {
  padding-top: 0;
  background: #0b0b0b;
}

body.sin-hero { padding-top: 96px; }

body.menu-abierto { overflow: hidden; }

.contenedor-ancho {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

img { max-width: 100%; }

/* ---------- Tipografía de sección ---------- */
.titulo-seccion {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(1.8rem, 3vw + 1rem, 3rem);
  line-height: 1.05;
  color: #fff;
  margin: 0 0 14px;
}

.titulo-seccion span { color: var(--brand-red); }

.bajada-seccion {
  font-family: 'Inter', sans-serif;
  color: #b0b0b0;
  font-size: clamp(.95rem, .4vw + .85rem, 1.08rem);
  line-height: 1.6;
  max-width: 640px;
  margin: 0 0 42px;
}

.eyebrow {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: .72rem;
  color: var(--brand-red);
  background: rgba(227, 6, 19, .12);
  border: 1px solid rgba(227, 6, 19, .45);
  padding: 7px 18px;
  border-radius: 999px;
  margin-bottom: 22px;
}

.divisor-diagonal {
  height: 56px;
  background: #0b0b0b;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  position: relative;
  z-index: 3;
  margin-top: -56px;
}

/* ---------- Navegación ---------- */
/*
 * OJO: .nav-autoplaya NUNCA debe llevar filter/backdrop-filter/transform
 * directamente. Cualquiera de esas propiedades en un ancestro convierte a ese
 * ancestro en el "containing block" de sus descendientes position:fixed — y
 * .nav-links (el panel del menú mobile) es fixed. Eso atrapaba el panel
 * dentro de la caja de ~96px del header en vez de ocupar toda la pantalla.
 * Por eso el fondo con blur va en un ::before aparte, no en el elemento.
 */
.nav-autoplaya {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: box-shadow .3s ease, padding .3s ease;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.nav-autoplaya::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(11, 11, 11, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background .3s ease, backdrop-filter .3s ease;
}

/* Sobre el hero arranca transparente y se vuelve sólida al hacer scroll */
body.con-hero .nav-autoplaya {
  border-bottom-color: transparent;
}

body.con-hero .nav-autoplaya::before {
  background: linear-gradient(180deg, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, 0) 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.con-hero .nav-autoplaya.nav-con-scroll,
.nav-autoplaya.nav-con-scroll {
  border-bottom-color: rgba(255, 255, 255, .08);
  box-shadow: 0 6px 30px rgba(0, 0, 0, .55);
}

body.con-hero .nav-autoplaya.nav-con-scroll::before,
.nav-autoplaya.nav-con-scroll::before {
  background: rgba(11, 11, 11, .96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.nav-inner {
  /* Más ancho que el contenido de las secciones (1180px): con 8 items de
     menú + iconos + botón, la barra necesita ese aire extra para no
     desbordarse en pantallas de escritorio. */
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  height: 96px;
  display: flex;
  align-items: center;
  gap: 18px;
  transition: height .3s ease;
}

.nav-autoplaya.nav-con-scroll .nav-inner { height: 76px; }

.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
}

.nav-logo img {
  height: 54px;
  width: auto;
  display: block;
  transition: height .3s ease;
}

.nav-autoplaya.nav-con-scroll .nav-logo img { height: 44px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.nav-links a {
  position: relative;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: .84rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #e8e8e8;
  text-decoration: none;
  padding: 10px 10px;
  border-radius: 6px;
  white-space: nowrap;
  transition: color .18s ease, background .18s ease;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 4px;
  height: 2px;
  background: var(--brand-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
}

.nav-links a:hover,
.nav-links a:focus-visible { color: #fff; }

.nav-links a:hover::after,
.nav-links a.activo::after { transform: scaleX(1); }

.nav-links a.activo { color: #fff; }

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--brand-red);
  color: #fff !important;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 12px 22px;
  border-radius: 6px;
  text-decoration: none;
  flex-shrink: 0;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 10px 24px -12px rgba(227, 6, 19, .9);
}

.nav-cta:hover,
.nav-cta:focus-visible {
  background: var(--brand-red-dark);
  transform: translateY(-1px);
  color: #fff !important;
}

.nav-cta-movil { display: none; }

/* ---------- Íconos sociales / acceso en el menú ---------- */
.nav-social {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.nav-social-movil { display: none; }

.nav-social-icono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18);
  color: #e8e8e8;
  font-size: 1.05rem;
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease;
}

.nav-social-icono:hover,
.nav-social-icono:focus-visible {
  transform: translateY(-2px);
  color: #fff;
}

.nav-social-icono:nth-child(1):hover { border-color: #e1306c; background: rgba(225, 48, 108, .12); }
.nav-social-icono:nth-child(2):hover { border-color: #1877f2; background: rgba(24, 119, 242, .12); }
.nav-login-icono { border-color: rgba(227, 6, 19, .4); color: var(--brand-red); }
.nav-login-icono:hover { border-color: var(--brand-red); background: rgba(227, 6, 19, .14); color: #fff; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 8px;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: #fff;
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}

body.menu-abierto .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-abierto .nav-toggle span:nth-child(2) { opacity: 0; }
body.menu-abierto .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  z-index: 998;
  backdrop-filter: blur(2px);
}

/* ---------- Hero carrusel ---------- */
.hero-carousel {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  background: #000;
  isolation: isolate;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s ease, visibility .9s ease;
  display: flex;
  align-items: center;
}

.hero-slide.activa {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

/* Foto de fondo con leve zoom mientras la slide está activa */
.hero-slide-foto {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  transition: transform 8s ease-out;
  z-index: 0;
}

.hero-slide.activa .hero-slide-foto { transform: scale(1); }

.hero-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(0, 0, 0, .93) 0%, rgba(0, 0, 0, .78) 42%, rgba(0, 0, 0, .35) 72%, rgba(0, 0, 0, .55) 100%),
    linear-gradient(0deg, #0b0b0b 2%, rgba(11, 11, 11, 0) 32%);
  z-index: 1;
}

/* Corte diagonal rojo de marca */
.hero-slide::after {
  content: "";
  position: absolute;
  right: -6%;
  top: -25%;
  width: 48%;
  height: 155%;
  background: var(--brand-red);
  opacity: .13;
  clip-path: polygon(38% 0, 100% 0, 62% 100%, 0 100%);
  z-index: 1;
  pointer-events: none;
}

.hero-contenido {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 130px 24px 120px;
  color: #fff;
}

/* --- Slide de marca (presentación) --- */
.hero-marca-titulo {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  font-size: clamp(1.6rem, 2.4vw + 1rem, 3rem);
  line-height: 1.02;
  margin: 0 0 26px;
}

.hero-marca-titulo span { color: var(--brand-red); }

.hero-datos {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 34px;
}

.hero-dato {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px;
  padding: 14px 20px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.hero-dato i {
  color: var(--brand-red);
  font-size: 1.2rem;
  flex-shrink: 0;
}

.hero-dato-texto strong {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: .95rem;
  color: #fff;
  line-height: 1.2;
}

.hero-dato-texto span {
  font-family: 'Inter', sans-serif;
  font-size: .76rem;
  color: #a8a8a8;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* --- Slides de vehículo --- */
.hero-slide h1,
.hero-slide h2.hero-titulo {
  font-family: 'Montserrat', sans-serif;
  font-style: italic;
  font-weight: 900;
  font-size: clamp(2.3rem, 3.6vw + 1.4rem, 4.6rem);
  line-height: .98;
  margin: 0 0 20px;
  text-transform: uppercase;
  letter-spacing: -.01em;
}

.hero-slide h1 span,
.hero-slide h2.hero-titulo span { color: var(--brand-red); }

.hero-lead {
  font-family: 'Inter', sans-serif;
  font-size: clamp(1rem, .55vw + .88rem, 1.22rem);
  line-height: 1.6;
  max-width: 580px;
  color: #dcdcdc;
  margin: 0 0 34px;
}

.hero-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 0 0 30px;
  font-family: 'Inter', sans-serif;
  font-size: .92rem;
  color: #cfcfcf;
}

.hero-specs span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.hero-specs i { color: var(--brand-red); }

.hero-precio {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: clamp(1.5rem, 1.4vw + 1.1rem, 2.3rem);
  color: #fff;
  background: var(--brand-red);
  padding: 8px 26px;
  border-radius: 6px;
  margin-bottom: 30px;
  box-shadow: 0 14px 34px -14px rgba(227, 6, 19, .95);
}

.hero-cta-group {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.btn-hero {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .88rem;
  padding: 16px 34px;
  border-radius: 6px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}

.btn-hero-primary {
  background: var(--brand-red);
  color: #fff;
  box-shadow: 0 14px 32px -12px rgba(227, 6, 19, .85);
}

.btn-hero-primary:hover,
.btn-hero-primary:focus-visible {
  background: var(--brand-red-dark);
  transform: translateY(-2px);
  color: #fff;
}

.btn-hero-outline {
  background: rgba(255, 255, 255, .05);
  color: #fff;
  border: 2px solid rgba(255, 255, 255, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.btn-hero-outline:hover,
.btn-hero-outline:focus-visible {
  border-color: #fff;
  background: rgba(255, 255, 255, .14);
  transform: translateY(-2px);
  color: #fff;
}

/* --- Controles del carrusel --- */
.hero-flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(0, 0, 0, .4);
  color: #fff;
  font-size: 1.3rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.hero-flecha:hover {
  background: var(--brand-red);
  border-color: var(--brand-red);
}

.hero-flecha.izq { left: 22px; }
.hero-flecha.der { right: 22px; }

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

.hero-dots button {
  width: 34px;
  height: 4px;
  border: 0;
  padding: 0;
  border-radius: 99px;
  background: rgba(255, 255, 255, .3);
  cursor: pointer;
  transition: background .25s ease, width .25s ease;
}

.hero-dots button.activa {
  background: var(--brand-red);
  width: 52px;
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide,
  .hero-slide-foto { transition: none; }
  .hero-slide-foto { transform: none; }
}

/* ---------- Franja de estadísticas ---------- */
.franja-valores {
  /* Un tono más oscuro que la sección que sigue (#111): si no, la franja y
     el bloque de abajo se leen como un solo bloque continuo. */
  background: #0b0b0b;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  padding: 30px 0;
  position: relative;
  z-index: 3;
}

.valores-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.valor-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: .96rem;
  color: #e8e8e8;
}

.valor-item i {
  color: var(--brand-red);
  font-size: 1.3rem;
  flex-shrink: 0;
}

/* ---------- Secciones ---------- */
.seccion-oscura { background: var(--brand-black); padding: 84px 0; }
.seccion-mas-oscura { background: #0b0b0b; padding: 84px 0; }

/*
 * El style.css original trae un "cebrado" heredado de la plantilla:
 *   main > section { background: #000 }
 *   main > section:nth-child(even) { background: #000 }
 * Ese segundo selector tiene más especificidad que una clase suelta, así que
 * en index.php (la única página con <main>) pintaba de negro una sección sí y
 * una no, rompiendo la alternancia de grises del diseño nuevo. Se repiten acá
 * los fondos con la misma especificidad para que gane el diseño.
 */
main > section.seccion-oscura { background: var(--brand-black); }
main > section.seccion-mas-oscura { background: #0b0b0b; }
main > section.franja-consignar {
  background: linear-gradient(135deg, #1c0406 0%, var(--brand-black) 48%);
}

/*
 * Misma herencia: #team, #testimonial { text-align: center } centraba solo la
 * sección de clientes, cuando todo el resto del sitio alinea a la izquierda.
 */
#testimonial { text-align: left; }

/* ---------- Grilla y tarjeta de vehículo ---------- */
.grid-vehiculos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 26px;
}

.card-vehiculo {
  position: relative;
  background: #161616;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .07);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  display: flex;
  flex-direction: column;
}

.card-vehiculo:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 44px -20px rgba(0, 0, 0, .8);
  border-color: rgba(227, 6, 19, .45);
}

.card-vehiculo-img {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #000;
}

.card-vehiculo-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
  display: block;
}

.card-vehiculo:hover .card-vehiculo-img img { transform: scale(1.07); }

/* Tarjeta de vehículo usada como selector (admin: eliminar/editar) */
.card-vehiculo.seleccionable {
  cursor: pointer;
  display: block;
  text-decoration: none;
}

.card-vehiculo.seleccionable:has(input:checked) {
  border-color: var(--brand-red);
  box-shadow: 0 0 0 3px rgba(227, 6, 19, .35);
}

.card-vehiculo .check-seleccion {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  width: 26px;
  height: 26px;
  accent-color: var(--brand-red);
  cursor: pointer;
}

.card-vehiculo-precio {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--brand-red);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: .82rem;
  padding: 7px 14px;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
  white-space: nowrap;
  z-index: 2;
}

.card-vehiculo-body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card-vehiculo-body h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  margin: 0 0 10px;
  color: #fff;
  line-height: 1.3;
}

.card-vehiculo-body h3 a { color: inherit; text-decoration: none; }
.card-vehiculo-body h3 a:hover { color: var(--brand-red); }

.card-vehiculo-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0 0 18px;
  font-family: 'Inter', sans-serif;
  font-size: .87rem;
  color: #b0b0b0;
  flex: 1;
}

.card-vehiculo-specs span { display: inline-flex; align-items: center; gap: 6px; }
.card-vehiculo-specs i { color: var(--brand-red); opacity: .85; }

.btn-ver-mas {
  display: block;
  text-align: center;
  background: transparent;
  border: 2px solid var(--brand-red);
  color: var(--brand-red) !important;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .84rem;
  padding: 11px;
  border-radius: 6px;
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}

.btn-ver-mas:hover,
.btn-ver-mas:focus-visible {
  background: var(--brand-red);
  color: #fff !important;
}

/* ---------- Panel de filtros ---------- */
.panel-filtros {
  background: #161616;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  padding: 26px;
  position: sticky;
  top: 110px;
}

.panel-filtros label {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  color: #cfcfcf;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 7px;
  display: block;
}

.panel-filtros select {
  margin-bottom: 18px;
  background: #0e0e0e;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 6px;
  height: auto;
  padding: 11px 12px;
}

.panel-filtros select:focus {
  border-color: var(--brand-red);
  outline: none;
  box-shadow: 0 0 0 3px rgba(227, 6, 19, .2);
}

/* ---------- Tarjetas de característica (Nosotros / Financiación) ---------- */
.grid-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 22px;
}

.card-feature {
  background: #161616;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  padding: 30px 26px;
  transition: transform .2s ease, border-color .2s ease;
}

.card-feature:hover {
  transform: translateY(-4px);
  border-color: rgba(227, 6, 19, .4);
}

.card-feature .icono-feature {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: rgba(227, 6, 19, .14);
  border: 1px solid rgba(227, 6, 19, .4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-red);
  font-size: 1.25rem;
  margin-bottom: 18px;
}

.card-feature h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  color: #fff;
  margin: 0 0 10px;
}

.card-feature p {
  font-family: 'Inter', sans-serif;
  color: #a8a8a8;
  font-size: .92rem;
  line-height: 1.6;
  margin: 0;
}

/* ---------- Sección 0 KM ---------- */
/* El emblema se dibuja por CSS (no es una imagen) para que se vea nítido
   en cualquier tamaño y no dependa de un archivo más para subir por FTP. */
.emblema-0km {
  width: 132px;
  height: 132px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 5px solid var(--brand-red);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: 2.35rem;
  letter-spacing: -1px;
  color: var(--brand-red);
  background: radial-gradient(circle at 50% 45%, rgba(227, 6, 19, .16), transparent 68%);
  box-shadow: 0 0 26px rgba(227, 6, 19, .45), inset 0 0 22px rgba(227, 6, 19, .28);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
}

/* El emblema va a la derecha y el texto arranca pegado al borde del
   contenedor, para que el título quede alineado con la bajada y los botones
   de abajo (si el emblema va primero, empuja el título hacia adentro y se
   nota el escalón). */
.encabezado-0km {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

/* El :not() es necesario porque el emblema también es un div: sin él se
   llevaba el flex-grow y se estiraba a todo el ancho sobrante. */
.encabezado-0km .emblema-0km { order: 2; flex: 0 0 auto; }
.encabezado-0km > div:not(.emblema-0km) { order: 1; flex: 1 1 260px; }

/* Pasos numerados: "cómo lo pedís". */
.pasos-0km {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
  counter-reset: paso;
}

.paso-0km {
  position: relative;
  background: #161616;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 12px;
  padding: 30px 26px 26px;
}

.paso-0km::before {
  counter-increment: paso;
  content: counter(paso);
  position: absolute;
  top: -18px;
  left: 26px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand-red);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(227, 6, 19, .4);
}

.paso-0km h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  color: #fff;
  margin: 12px 0 10px;
}

.paso-0km p {
  font-family: 'Inter', sans-serif;
  color: #a8a8a8;
  font-size: .92rem;
  line-height: 1.6;
  margin: 0;
}

/* Aclaración de "bajo consulta" al pie de la sección. */
.nota-consulta {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(227, 6, 19, .08);
  border: 1px solid rgba(227, 6, 19, .3);
  border-radius: 10px;
  padding: 18px 20px;
  margin-top: 32px;
  max-width: 780px;
}

.nota-consulta i { color: var(--brand-red); font-size: 1.1rem; margin-top: 2px; }

.nota-consulta p {
  font-family: 'Inter', sans-serif;
  color: #c2c2c2;
  font-size: .92rem;
  line-height: 1.6;
  margin: 0;
}

/* ---------- Bloque de texto largo ---------- */
.bloque-texto {
  max-width: 780px;
}

/* ---------- Ficha de vehículo (publicación individual) ---------- */
.foto-principal-publicacion {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(255, 255, 255, .08);
}

.foto-principal-publicacion img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.miniaturas-publicacion {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 14px;
}

.miniaturas-publicacion a,
.miniaturas-publicacion .miniatura-estatica {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  display: block;
  border: 1px solid rgba(255, 255, 255, .08);
}

.miniaturas-publicacion img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}

.miniaturas-publicacion a:hover img {
  transform: scale(1.08);
}

.miniaturas-publicacion .mas-fotos {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: .95rem;
  text-align: center;
  gap: 4px;
}

.miniaturas-publicacion .mas-fotos i { font-size: 1.4rem; color: var(--brand-red); }

.specs-ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px 16px;
  margin: 0;
}

.specs-ficha div { min-width: 0; }

.specs-ficha dt {
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: .72rem;
  color: #999;
  margin-bottom: 5px;
}

.specs-ficha dd {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.02rem;
  color: #fff;
  margin: 0;
}

.bloque-texto p {
  font-family: 'Inter', sans-serif;
  color: #c2c2c2;
  font-size: 1.02rem;
  line-height: 1.75;
  margin: 0 0 20px;
}

.bloque-texto p strong { color: #fff; }

/* Frase destacada dentro de un bloque de texto (quienes.php). */
.cita-destacada {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-style: italic;
  font-size: clamp(1.15rem, 1.1vw + .85rem, 1.6rem);
  line-height: 1.35;
  color: #fff;
  border-left: 4px solid var(--brand-red);
  padding: 4px 0 4px 22px;
  margin: 0 0 26px;
  max-width: 820px;
}

/* ---------- Galería de clientes felices ---------- */
/* Son 9 items (6 fotos + 3 videos): con 3 columnas queda una grilla 3x3
   exacta. Con auto-fill daban 4 columnas y la última fila quedaba con una
   sola foto suelta. El ancho máximo evita que en pantallas grandes cada
   foto crezca desmedida. */
.galeria-clientes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 940px;
}

.item-cliente {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  background: #101010;
  cursor: pointer;
  padding: 0;
  display: block;
  width: 100%;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.item-cliente img,
.item-cliente video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}

.item-cliente:hover,
.item-cliente:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(227, 6, 19, .55);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .6);
  outline: none;
}

.item-cliente:hover img,
.item-cliente:hover video { transform: scale(1.06); }

/* Velo inferior para que el ícono se lea sobre cualquier foto. */
.item-cliente::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, .45) 0%, transparent 45%);
  pointer-events: none;
}

.item-cliente .marca-video {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}

.item-cliente .marca-video i {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(227, 6, 19, .92);
  color: #fff;
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 4px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .55);
  transition: transform .3s ease;
}

.item-cliente:hover .marca-video i { transform: scale(1.12); }

/* --- Lightbox --- */
.lightbox-clientes {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0, 0, 0, .93);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.lightbox-clientes img,
.lightbox-clientes video {
  max-width: min(92vw, 620px);
  max-height: 86vh;
  border-radius: 10px;
  display: block;
}

.lightbox-cerrar,
.lightbox-flecha {
  position: absolute;
  background: rgba(22, 22, 22, .9);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 1.3rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .25s ease, border-color .25s ease;
}

.lightbox-cerrar:hover,
.lightbox-flecha:hover {
  background: var(--brand-red);
  border-color: var(--brand-red);
}

.lightbox-cerrar { top: 20px; right: 20px; }
.lightbox-flecha-prev { left: 18px; }
.lightbox-flecha-next { right: 18px; }

/* ---------- FAQ ---------- */
.faq-lista { max-width: 820px; }

.faq-item { border-bottom: 1px solid rgba(255, 255, 255, .1); }

.faq-item summary {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: #fff;
  font-size: 1.02rem;
  padding: 22px 40px 22px 0;
  cursor: pointer;
  list-style: none;
  position: relative;
  transition: color .18s ease;
}

.faq-item summary:hover { color: var(--brand-red); }
.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 4px;
  top: 50%;
  margin-top: -.7em;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--brand-red);
  font-weight: 400;
  transition: transform .22s ease;
}

.faq-item[open] summary::after { transform: rotate(45deg); }

.faq-item p {
  font-family: 'Inter', sans-serif;
  color: #b0b0b0;
  font-size: .95rem;
  line-height: 1.7;
  padding: 0 40px 24px 0;
  margin: 0;
}

/* ---------- Franja de consignación / CTA ---------- */
.franja-consignar {
  background: linear-gradient(135deg, #1c0406 0%, var(--brand-black) 48%);
  padding: 84px 0;
  position: relative;
  overflow: hidden;
}

.beneficios-consignar {
  list-style: none;
  padding: 0;
  margin: 28px 0 34px;
  display: grid;
  gap: 15px;
}

.beneficios-consignar li {
  font-family: 'Inter', sans-serif;
  color: #e2e2e2;
  font-size: 1rem;
  line-height: 1.55;
  padding-left: 32px;
  position: relative;
}

.beneficios-consignar li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--brand-red);
  font-weight: 900;
}

/* ---------- Tarjetas de contacto ---------- */
.grid-contacto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
}

.card-socio {
  background: #161616;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  padding: 30px 26px;
  text-align: center;
  transition: transform .2s ease, border-color .2s ease;
}

.card-socio:hover {
  transform: translateY(-4px);
  border-color: rgba(37, 211, 102, .45);
}

.card-socio .avatar-socio {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  margin: 0 auto 16px;
  background: rgba(37, 211, 102, .14);
  border: 1px solid rgba(37, 211, 102, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #25d366;
  font-size: 1.7rem;
}

.card-socio h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 1.06rem;
  color: #fff;
  margin: 0 0 4px;
}

.card-socio .cargo {
  font-family: 'Inter', sans-serif;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #8f8f8f;
  display: block;
  margin-bottom: 18px;
}

.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  background: #25d366;
  color: #0b0b0b !important;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: .86rem;
  padding: 12px 18px;
  border-radius: 8px;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}

.btn-whatsapp:hover,
.btn-whatsapp:focus-visible {
  background: #1eb457;
  transform: translateY(-2px);
  color: #0b0b0b !important;
}

.redes-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 8px;
}

.chip-red {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #161616;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 999px;
  padding: 12px 24px;
  color: #e4e4e4;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: .88rem;
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease, transform .2s ease;
}

.chip-red i { font-size: 1.2rem; }
.chip-red:hover { transform: translateY(-2px); color: #fff; border-color: var(--brand-red); }
.chip-red.ig:hover { border-color: #e1306c; }
.chip-red.fb:hover { border-color: #1877f2; }

/* ---------- Formularios sobre fondo oscuro ---------- */
.card-form {
  background: #161616;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  padding: 30px;
}

.card-form .form-control {
  background: #0e0e0e;
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
  border-radius: 6px;
  box-shadow: none;
  margin-bottom: 14px;
  padding: 12px 14px;
  height: auto;
}

.card-form .form-control::placeholder { color: #7d7d7d; }

.card-form .form-control:focus {
  border-color: var(--brand-red);
  box-shadow: 0 0 0 3px rgba(227, 6, 19, .2);
}

.card-form input[type="submit"] {
  background: var(--brand-red);
  border-color: var(--brand-red);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background .2s ease;
}

.card-form input[type="submit"]:hover { background: var(--brand-red-dark); }

/* ---------- Selector de archivos con estilo propio ---------- */
.campo-archivo {
  margin-bottom: 14px;
  padding: 14px;
  border: 1px dashed rgba(255, 255, 255, .18);
  border-radius: 8px;
  background: #0e0e0e;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  transition: border-color .2s ease;
}

.campo-archivo.arrastrando {
  border-color: var(--brand-red);
  background: rgba(227, 6, 19, .06);
}

.input-archivo-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.btn-archivo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: transparent;
  border: 2px solid var(--brand-red);
  color: var(--brand-red);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: .82rem;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
  flex-shrink: 0;
}

.btn-archivo:hover {
  background: var(--brand-red);
  color: #fff;
}

.input-archivo-oculto:focus-visible + .btn-archivo {
  outline: 2px solid var(--brand-red);
  outline-offset: 2px;
}

.archivo-nombre {
  font-family: 'Inter', sans-serif;
  font-size: .85rem;
  color: #9a9a9a;
  flex: 1;
  min-width: 140px;
}

.archivo-nombre.con-archivos { color: #d8d8d8; }

.mapa-embebido {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  line-height: 0;
  height: 100%;
  min-height: 380px;
}

.mapa-embebido iframe { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; }

/* ---------- Footer ---------- */
#footer {
  border-top: 4px solid var(--brand-red);
  /* Arriba tenía solo 14px y el contenido quedaba pegado al filo rojo.
     Abajo se mantiene un margen amplio a propósito: el globo flotante de
     WhatsApp ocupa los últimos ~85px de la esquina y taparía el contenido. */
  padding-top: 56px;
  padding-bottom: 92px;
  background: #0b0b0b;
}

#footer .section-title h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-style: italic;
  text-transform: uppercase;
  font-size: 1.12rem;
  letter-spacing: .02em;
}

/* Crédito del desarrollador: franja propia al pie, separada del copyright,
   pensada para destacar (el cliente pidió explícitamente que se note). */
.franja-credito {
  margin-top: 44px;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  text-align: center;
}

/* Sin caja de botón: es un link suelto, no un CTA. El único "adorno" es la
   rayita que hace de ruta bajo el texto y el auto que la cruza al hacer
   hover (ver más abajo). */
.credito-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  text-decoration: none;
  overflow: hidden;
}

/* Rayita tipo "ruta" que se dibuja bajo el texto al pasar el mouse. */
.credito-link::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 6px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(227, 6, 19, .7), transparent);
  transform: scaleX(0);
  transition: transform .5s ease;
  pointer-events: none;
}

.credito-link:hover::after,
.credito-link:focus-visible::after { transform: scaleX(1); }

.badge-credito-icono {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  object-fit: contain;
  position: relative;
  z-index: 1;
}

.credito-link span {
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem;
  color: #d8d8d8;
  transition: color .25s ease;
  position: relative;
  z-index: 1;
}

.credito-link:hover span,
.credito-link:focus-visible span { color: #fff; }

.credito-link strong {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-style: italic;
  color: var(--brand-red);
  letter-spacing: .01em;
}

/*
 * El efecto pedido: al pasar el mouse, un autito cruza todo el ancho del
 * link de punta a punta, como si "manejara" sobre la rayita de arriba, con
 * dos autos fantasma más chicos y tenues detrás simulando la estela.
 * "left" se anima en % (no transform/translateX) porque así queda relativo
 * al ancho real del link, y funciona igual de bien en mobile que en desktop.
 */
.credito-auto {
  position: absolute;
  top: 50%;
  left: -20%;
  transform: translateY(-50%);
  color: var(--brand-red);
  font-size: 1.3rem;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

.credito-auto-estela1 { font-size: 1.05rem; color: rgba(227, 6, 19, .55); }
.credito-auto-estela2 { font-size: .85rem; color: rgba(227, 6, 19, .3); }

@keyframes credito-manejar {
  0%   { left: -20%; opacity: 0; transform: translateY(-50%) rotate(0deg); }
  8%   { opacity: 1; }
  30%  { transform: translateY(-62%) rotate(-4deg); }
  55%  { transform: translateY(-38%) rotate(3deg); }
  80%  { opacity: 1; transform: translateY(-58%) rotate(-2deg); }
  100% { left: 115%; opacity: 0; transform: translateY(-50%) rotate(0deg); }
}

.credito-link:hover .credito-auto,
.credito-link:focus-visible .credito-auto {
  animation: credito-manejar 1s cubic-bezier(.34, .6, .3, 1) 1;
}

.credito-link:hover .credito-auto-estela1,
.credito-link:focus-visible .credito-auto-estela1 { animation-delay: .07s; }

.credito-link:hover .credito-auto-estela2,
.credito-link:focus-visible .credito-auto-estela2 { animation-delay: .14s; }

@media (prefers-reduced-motion: reduce) {
  .credito-auto { animation: none !important; }
}

/* ---------- Responsive ---------- */
/* Con 8 items en el menú (se sumó "0 KM") la barra ya no entra en pantallas
   medianas. Por debajo de 1400px se ocultan los iconos sociales del nav
   —siguen estando en el pie y dentro del menú mobile— y los links se
   comprimen; por debajo de 1240px pasa directo a menú hamburguesa. */
@media (max-width: 1400px) {
  .nav-social-escritorio { display: none; }
  .nav-links { gap: 0; }
  .nav-links a { padding: 10px 8px; font-size: .8rem; }
  .nav-cta-escritorio { padding: 11px 16px; font-size: .8rem; }
}

@media (max-width: 1240px) {
  .nav-toggle { display: flex; }
  .nav-cta-escritorio { display: none; }
  .nav-social-escritorio { display: none; }
  .nav-cta-movil { display: inline-flex; margin-top: 12px; justify-content: center; }
  .nav-social-movil { display: flex; justify-content: center; margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .08); }

  .nav-links {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 84vw);
    background: #101010;
    border-left: 1px solid rgba(255, 255, 255, .09);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
    padding: 104px 24px 30px;
    transform: translateX(100%);
    transition: transform .3s ease;
    z-index: 999;
    overflow-y: auto;
    margin-left: 0;
  }

  body.menu-abierto .nav-links { transform: translateX(0); }

  .nav-links a {
    padding: 15px 12px;
    font-size: .9rem;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    border-radius: 0;
  }

  .nav-links a::after { display: none; }
  .nav-links a.activo { color: var(--brand-red); }

  .nav-inner { height: 78px; }
  .nav-autoplaya.nav-con-scroll .nav-inner { height: 68px; }
  .nav-logo img { height: 44px; }
  .nav-autoplaya.nav-con-scroll .nav-logo img { height: 40px; }

  body.sin-hero { padding-top: 78px; }

  .panel-filtros { position: static; }
}

@media (max-width: 767px) {
  .hero-carousel { min-height: 88vh; }
  .hero-contenido { padding: 118px 22px 108px; }
  .hero-flecha { display: none; }
  .hero-dots { bottom: 24px; }
  .seccion-oscura, .seccion-mas-oscura, .franja-consignar { padding: 58px 0; }
  .franja-valores { padding: 22px 0; }
  .valores-grid { gap: 16px; }
  .valor-item { font-size: .88rem; justify-content: flex-start; }
  .hero-datos { gap: 10px; }
  .hero-dato { padding: 12px 16px; }

  /* En mobile, mientras se ve el hero a pantalla completa, la burbuja
     flotante de WhatsApp queda pegada a los puntos del carrusel y se
     superponen. Cada slide ya tiene su propio botón de WhatsApp en el CTA,
     así que arriba (el menú) alcanza: se oculta la burbuja solo acá. */
  body.con-hero .btn-wsp {
    display: none;
  }

  .badge-credito { padding: 12px 20px; gap: 10px; }
  .badge-credito span { font-size: .92rem; }
  .badge-credito-icono { width: 24px; height: 24px; }

  /* En mobile el encabezado del 0 KM se apila: conviene el emblema arriba de
     todo y más chico, en vez de quedar encajado entre el título y la bajada. */
  .encabezado-0km { gap: 16px; margin-bottom: 18px; }
  .encabezado-0km .emblema-0km {
    order: 0;
    width: 88px;
    height: 88px;
    font-size: 1.6rem;
    border-width: 4px;
  }
  .encabezado-0km > div { order: 1; flex-basis: 100%; }

  /* Dos columnas fijas: con auto-fill quedaría una sola foto enorme por fila. */
  .galeria-clientes {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .item-cliente .marca-video i { width: 42px; height: 42px; font-size: .95rem; }
  .lightbox-flecha-prev { left: 8px; }
  .lightbox-flecha-next { right: 8px; }
  .lightbox-cerrar { top: 12px; right: 12px; }
}

/* ---------- Wizard de carga de vehículo (formulario.php) ---------- */
.wizard-card {
  background: #161616;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  padding: 34px;
}

.wizard-progreso { margin-bottom: 30px; }

.wizard-progreso-texto {
  font-family: 'Inter', sans-serif;
  color: #999;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 10px;
}

.wizard-progreso-texto strong { color: var(--brand-red); }

.wizard-progreso-barra {
  height: 6px;
  background: #0e0e0e;
  border-radius: 99px;
  overflow: hidden;
}

.wizard-progreso-relleno {
  height: 100%;
  background: var(--brand-red);
  border-radius: 99px;
  transition: width .3s ease;
}

.wizard-paso[hidden] { display: none; }

.wizard-paso h2 { margin-top: 0; font-size: 1.5rem; }

.campo-wizard { margin-bottom: 16px; }

.campo-wizard label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  color: #cfcfcf;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 6px;
}

.wizard-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 32px;
  gap: 14px;
  flex-wrap: wrap;
}

.wizard-nav-derecha { display: flex; gap: 12px; margin-left: auto; flex-wrap: wrap; }

.error-wizard {
  color: #ff8a80;
  font-family: 'Inter', sans-serif;
  font-size: .85rem;
  margin-top: 14px;
  display: none;
}

.error-wizard.visible { display: block; }

.miniaturas-wizard {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.miniatura-wizard {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  cursor: pointer;
  transition: border-color .18s ease, transform .18s ease;
}

.miniatura-wizard:hover { border-color: var(--brand-red); transform: translateY(-2px); }

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

.miniatura-wizard .quitar-miniatura {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .75);
  color: #fff;
  border: 0;
  font-size: .8rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.miniatura-wizard .badge-uso {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(227, 6, 19, .92);
  color: #fff;
  font-size: .62rem;
  text-align: center;
  padding: 3px 4px;
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.slots-principales {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 26px;
  margin-top: 10px;
}

.slot-principal h4 {
  font-family: 'Montserrat', sans-serif;
  color: #fff;
  margin: 0 0 10px;
  font-size: 1rem;
}

.slot-acciones { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }

.btn-quitar-slot {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .2);
  color: #bbb;
  border-radius: 6px;
  padding: 9px 16px;
  font-family: 'Inter', sans-serif;
  font-size: .82rem;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease;
}

.btn-quitar-slot:hover { border-color: var(--brand-red); color: #fff; }

.selector-miniaturas {
  margin-top: 24px;
  padding: 22px;
  border: 1px dashed rgba(227, 6, 19, .45);
  border-radius: 10px;
  background: rgba(227, 6, 19, .05);
}

.selector-miniaturas[hidden] { display: none; }

.selector-miniaturas p {
  font-family: 'Inter', sans-serif;
  color: #ccc;
  margin: 0;
  font-size: .9rem;
}

.resumen-revision {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}

.resumen-item {
  background: #0e0e0e;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px;
  padding: 14px 16px;
}

.resumen-item span {
  display: block;
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .66rem;
  color: #888;
  margin-bottom: 5px;
}

.resumen-item strong {
  font-family: 'Montserrat', sans-serif;
  color: #fff;
  font-size: .95rem;
  word-break: break-word;
}

.revision-fotos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}

.revision-foto {
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  position: relative;
  background: #000;
}

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

.revision-foto span {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, .65);
  color: #fff;
  font-size: .72rem;
  text-align: center;
  padding: 5px;
  font-family: 'Inter', sans-serif;
}

@media (max-width: 767px) {
  .wizard-card { padding: 22px; }
  .revision-fotos { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}

/* ---------- Marco de reposicionar (elegir foco de una foto) ---------- */
.marco-reposicionar {
  position: relative;
  width: 100%;
  aspect-ratio: 720 / 480;
  overflow: hidden;
  background: #000;
  border: 1px dashed rgba(255, 255, 255, .25);
  border-radius: 8px;
}

.marco-reposicionar:not(.con-imagen)::before {
  content: 'Elegí una foto';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  font-family: 'Inter', sans-serif;
  font-size: .82rem;
  color: #777;
  text-align: center;
}

.marco-reposicionar.con-imagen { cursor: grab; }
.marco-reposicionar.con-imagen:active { cursor: grabbing; }

.marco-reposicionar.cargando::after {
  content: 'Convirtiendo foto...';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .7);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: .82rem;
}

.marco-reposicionar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  user-select: none;
  -webkit-user-drag: none;
  display: block;
}

.marco-ayuda {
  font-family: 'Inter', sans-serif;
  font-size: .78rem;
  color: #888;
  margin: 8px 0 0;
}

/* ---------- Toast de éxito (ej: destacados actualizados) ---------- */
.toast-exito {
  position: fixed;
  top: 104px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1500;
  max-width: min(440px, calc(100vw - 32px));
  background: #161616;
  border: 1px solid rgba(37, 211, 102, .45);
  border-left: 4px solid #25d366;
  border-radius: 8px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, .5);
}

.toast-exito i {
  color: #25d366;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.toast-exito span {
  font-family: 'Inter', sans-serif;
  color: #fff;
  font-size: .9rem;
  flex: 1;
}

.toast-exito button {
  background: none;
  border: 0;
  color: #888;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

.toast-exito button:hover { color: #fff; }