/* ============================================================
   VELIT CARS — Hoja de estilos principal (tema oscuro)
   Diseño basado en la estructura de referencia (Auto Unión)
   ============================================================ */

:root {
  --black: #000000;      /* negro puro, muestreado de la foto de los llaveros (antes #050505) */
  --surface: #101010;    /* secciones alternas, más oscuras (antes #171717) */
  --card: #161616;       /* tarjetas, más oscuras (antes #1c1c1c) */
  --dark: #121212;       /* franjas */
  --accent: #d4a95c;     /* dorado champán */
  --accent-h: #e8c27d;   /* dorado claro (hover) */
  --red: #d61f2c;        /* rojo para destacar */
  --white: #ffffff;
  --text: #ececec;
  --muted: #a3a3a3;
  --line: #262626;
  --font: 'Manrope', 'Segoe UI', sans-serif;   /* misma tipografía que autouniongranada.com (confirmado en su web) */
  --font-head: 'Manrope', 'Segoe UI', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font); color: var(--text); background: var(--black); line-height: 1.6; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

.container { width: min(1760px, 95%); margin: 0 auto; }

h1, h2, h3 { font-family: var(--font-head); font-weight: 700; letter-spacing: .5px; color: #fff; }
.section { padding: 90px 0; }
.section-title { font-size: clamp(1.5rem, 3vw, 2.2rem); text-align: center; margin-bottom: 18px; }
.section-title::after { content: ''; display: block; width: 56px; height: 2px; background: var(--accent); margin: 16px auto 0; }
.section-sub { max-width: 760px; margin: 0 auto 55px; text-align: center; color: var(--muted); }

/* ---------- Contenido siempre visible al hacer scroll ---------- */
.reveal, .reveal.visible { opacity: 1; transform: none; transition: none; }

/* ---------- Scroll Reveal premium (secciones tras el Hero) ----------
   Mismo lenguaje visual que el Hero — Image Slice Reveal + Split Text Reveal,
   con el texto entrando al ~70% del reveal de la imagen — para que toda la
   página se sienta como una única secuencia. Independiente del Hero: no toca
   ni depende de sus clases (.slide, .slice, .hero-content...). */
.reveal-slice-wrap { position: relative; overflow: hidden; }
.reveal-slice-wrap > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.reveal-slice-wrap .rs-slice {
  position: absolute; top: 0; bottom: 0; z-index: 1;
  left: calc(var(--i) * 6.25%); width: calc(6.25% + 1.5px);
  overflow: hidden; opacity: 0;
  transform: translateY(27px) translateZ(0); filter: blur(6px);
  will-change: transform, opacity, filter;
}
.reveal-slice-wrap .rs-slice-inner { position: absolute; top: 0; height: 100%; width: 1600%; background-size: cover; background-position: center; }
.reveal-slice-wrap.in-view .rs-slice {
  animation: rsSliceIn 1.3s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--i) * .056s);
}
@keyframes rsSliceIn {
  from { opacity: 0; transform: translateY(27px) translateZ(0); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0) translateZ(0); filter: blur(0); }
}
/* Zoom-in continuo tras completar el reveal (100%), sin quitar el efecto de franjas */
.reveal-slice-wrap.in-view {
  animation: rsZoom 16s ease-out 2.14s both;
}
@keyframes rsZoom { from { transform: scale(1); } to { transform: scale(1.06); } }

[data-split] .rs-w { display: inline-block; opacity: 1; }
[data-split].in-view .rs-w {
  animation: rsWordIn .88s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--i) * .06s);
}
@keyframes rsWordIn {
  from { opacity: 0; transform: translateY(13px); filter: blur(4px); }
  to   { opacity: 1; transform: none; filter: none; }
}

[data-fade] { opacity: 1; transform: none; }
[data-fade].in-view { animation: rsFadeIn .9s cubic-bezier(.22,1,.36,1) both; }
@keyframes rsFadeIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .reveal-slice-wrap .rs-slice { animation: none !important; opacity: 1; transform: none; filter: none; }
  .reveal-slice-wrap.in-view { animation: none !important; }
  [data-split] .rs-w { animation: none !important; opacity: 1; }
  [data-fade] { animation: none !important; opacity: 1; transform: none; }
}

/* ---------- Botones ---------- */
.btn {
  display: inline-block; padding: 12px 28px; border: 1px solid currentColor;
  border-radius: 999px;
  text-transform: uppercase; letter-spacing: 1.5px; font-size: .74rem; font-weight: 600;
  transition: all .3s ease; cursor: pointer; background: transparent;
}
.btn-light { color: var(--white); }
.btn-light:hover { background: var(--accent); border-color: var(--accent); color: #151515; }
.btn-dark { color: var(--white); }
.btn-dark:hover { background: var(--accent); border-color: var(--accent); color: #151515; }
.btn-solid { background: #fff; color: var(--black); border-color: #fff; }
.btn-solid:hover { background: transparent; color: #fff; }
.btn-wsp { background: #25d366; border-color: #25d366; color: #fff; }
.btn-wsp:hover { background: #1faf53; border-color: #1faf53; color: #fff; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: linear-gradient(rgba(0,0,0,.62), rgba(0,0,0,0));
  transition: background .4s ease;
}
.site-header.scrolled { background: rgba(9,9,10,.94); }
.header-inner { display: flex; justify-content: space-between; align-items: center; height: 76px; }
.main-nav ul { display: flex; gap: 8px; }
.main-nav a {
  display: inline-block; color: var(--white); font-size: .55rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1px; padding: 6px 13px;
  border: 1px solid rgba(255,255,255,.4); border-radius: 999px;
  transition: all .3s ease;
}
.main-nav a:hover, .main-nav a.active {
  background: var(--accent); border-color: var(--accent); color: #151515;
}
.header-cta { font-size: .58rem; padding: 7px 14px; }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; }
.nav-toggle span { display: block; width: 26px; height: 2px; background: #fff; margin: 6px 0; transition: .3s; }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .main-nav { position: absolute; top: 78px; left: 0; right: 0; background: var(--black); display: none; }
  .main-nav.open { display: block; }
  .main-nav ul { flex-direction: column; gap: 0; padding: 10px 5%; }
  .main-nav li { border-bottom: 1px solid rgba(255,255,255,.07); }
  .main-nav a { display: block; padding: 15px 0; }
  .header-cta { display: none; }
}

/* ---------- Hero slider ---------- */
.hero { position: relative; height: 92vh; min-height: 560px; overflow: hidden; background: var(--black); }
.slide {
  position: absolute; inset: 0; opacity: 0;
  background-size: cover; background-position: center; display: flex; align-items: center;
}
.slide::before { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.75)); }
.slide.show { opacity: 1; z-index: 2; }

/* ---------- Image Slice Reveal (hero) ----------
   16 franjas verticales; cada una entra escalonada con desplazamiento +
   opacidad. Antes también llevaban filter: blur() animado — un blur()
   por franja, en 16 franjas a la vez, es de lo más caro de renderizar que
   hay en CSS (no va por el mismo camino barato de GPU que opacity/transform).
   En una máquina real, con el marquee de marcas y los vídeos del showroom
   animando a la vez en el resto de la página, esa carga acumulada podía
   hacer que el navegador saltara fotogramas — y un salto de fotogramas se
   ve exactamente como "entra de golpe", aunque el reloj de la animación
   internamente sea correcto. Quitado el blur(): ahora solo opacity/transform
   (translateY), las dos propiedades más baratas de animar que existen. */
.slide .slice {
  position: absolute; top: 0; bottom: 0; z-index: 1;
  left: calc(var(--i) * 6.25%); width: calc(6.25% + 1.5px);
  overflow: hidden; opacity: 0;
  transform: translateY(27px) translateZ(0);
  will-change: transform, opacity;
}
.slide .slice-inner {
  position: absolute; top: 0; height: 100%; width: 1600%;
  background-size: cover; background-position: center;
}
.slide.show .slice {
  animation: sliceIn 1.3s cubic-bezier(.22,1,.36,1) both;
  animation-delay: calc(var(--i) * .056s);
}
@keyframes sliceIn {
  from { opacity: 0; transform: translateY(27px) translateZ(0); }
  to   { opacity: 1; transform: translateY(0) translateZ(0); }
}
.slide::before { z-index: 2; }
@media (prefers-reduced-motion: reduce) {
  .slide .slice { animation: none !important; opacity: 1; transform: none; }
}
/* El botón cambia con un fundido sutil */
#hero-cta.swapping { animation: ctaSwap .6s ease both; }
@keyframes ctaSwap { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.hero-content .hc { opacity: 0; }
.hero-content.animate .hc { animation: hcUp 1.2s cubic-bezier(.25,.46,.45,.94) both; }
.hero-content.animate .hc-1 { animation-delay: .15s; }
.hero-content.animate .hc-2 { animation-delay: .2s; }
.hero-content.animate .hc-3 { animation-delay: 1s; }
@keyframes hcUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* Logo grande como encabezado del hero (único logo de la página) */
.hero-logo {
  width: min(680px, 84vw); height: auto; margin: 0 auto;
  opacity: 0; animation: hcUp 1.4s cubic-bezier(.25,.46,.45,.94) both .25s;
}
/* El eslogan y el botón entran/salen como UN SOLO bloque (fundido +
   desenfoque + desplazamiento), controlado por JS con la Web Animations API
   — misma curva de suavizado que el barrido de franjas de la imagen, misma
   duración siempre (no depende del número de palabras del eslogan), así
   las tres fotos se comportan exactamente igual. Ambos arrancan en
   opacity:0 por CSS para que no haya ni un frame de flash a plena vista
   antes de que JS dispare su animación de entrada. */
.hero-content .tagline { opacity: 0; }
.hero-content .hero-btns { opacity: 0; }
.hero-content .tagline { clip-path: inset(0 100% 0 0); will-change: clip-path, transform, opacity; }
.hero-content .hero-word { display: inline-block; white-space: nowrap; }
.hero-content .hero-letter {
  display: inline-block;
  opacity: 0;
  will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
  .hero-content .tagline { clip-path: none; }
  .hero-content .hero-letter { opacity: 1; transform: none; }
}

/* ---------- Zoom-in continuo tras completar el reveal (Hero) ----------
   Arranca justo cuando el Image Slice Reveal llega al 100% (delay 2.14s) y
   añade un zoom lento y sutil sin quitar el efecto de franjas. */
.slide.show {
  animation: heroZoom 12s linear 2.14s both;
}
@keyframes heroZoom { from { transform: scale(1); } to { transform: scale(1.07); } }
@media (prefers-reduced-motion: reduce) {
  .slide.show { animation: none !important; }
}
.hero-content {
  position: absolute; inset: 0; z-index: 4; color: var(--white); text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: 88px 6% 7vh;
}
.hero-content .tagline { margin-top: auto; }
.hero-content .hero-btns { margin-bottom: auto; }
@media (max-width: 640px) { .hero-content { padding-top: 96px; } }
.hero-content .tagline {
  font-family: var(--font); font-weight: 700;
  font-size: clamp(2.1rem, 5.2vw, 4.3rem); letter-spacing: .5px; line-height: 1.15;
  margin-bottom: 48px; color: #fff; max-width: 1500px;
}
.hero-btns { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.hero-dots { position: absolute; bottom: 28px; left: 0; right: 0; z-index: 5; display: flex; justify-content: center; gap: 10px; }
.hero-dots button { width: 10px; height: 10px; border-radius: 50%; border: 1px solid #fff; background: transparent; cursor: pointer; }
.hero-dots button.active { background: var(--accent); border-color: var(--accent); }
.slide-logo { height: 120px; width: auto; margin: 0 auto 20px; }
.slide-brand { font-family: var(--font-head); font-size: clamp(1.9rem, 4vw, 3rem); letter-spacing: 8px; text-transform: uppercase; color: #fff; margin-bottom: 12px; font-weight: 700; }
.slide-brand em { font-style: normal; color: var(--accent); }

/* ---------- Buscador ---------- */
/* Tarjeta blanca pequeña y centrada, flotando sobre el negro de fondo.
   Padding superior igual a .section para mantener la separación con el
   bloque anterior; padding inferior reducido para que "Nuestras últimas
   incorporaciones" quede más pegada y la web se sienta más compacta. */
.search-bar { background: transparent; padding: 60px 0 26px; }
.search-card {
  max-width: 940px; margin: 0 auto; background: #ffffff; border-radius: 20px;
  padding: 24px 30px; box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
/* Grid de una sola fila y ancho fijo (sin auto-fit ni columnas "sueltas"):
   la tarjeta se hizo más ancha en vez de más alta para que los 5 campos y
   el botón quepan siempre en línea, dentro de la propia tarjeta. */
.search-grid { display: grid; grid-template-columns: repeat(5, 1fr) auto; gap: 14px 12px; align-items: end; }
.search-field label { display: block; color: #6b6b6b; font-size: .7rem; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 6px; }
.search-field select, .search-field input {
  width: 100%; background: #fff; border: 1px solid #d6d6d6; color: #16161a;
  padding: 10px 14px; font-family: var(--font); font-size: .9rem; outline: none; transition: border-color .3s;
}
.search-field select:focus, .search-field input:focus { border-color: var(--accent); }
.search-field input::placeholder { color: #a3a3a3; }
/* El botón "Buscar" en rojo, un poco más bajo que antes para acompañar los campos */
.search-bar .btn { background: var(--red); border-color: var(--red); color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 24px; white-space: nowrap; }
.search-bar .btn:hover { background: #b81823; border-color: #b81823; color: #fff; }
.search-bar .btn svg { width: 15px; height: 15px; flex-shrink: 0; }
@media (max-width: 900px) {
  .search-grid { grid-template-columns: repeat(2, 1fr); }
  .search-grid .search-field:last-child { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .search-grid { grid-template-columns: 1fr; }
  .search-grid .search-field:last-child { grid-column: auto; }
  .search-card { padding: 24px 20px; border-radius: 18px; }
  .search-bar { padding: 60px 0; }
}

/* ---------- Tarjetas de coche ---------- */
.cars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
@media (max-width: 1000px) { .cars-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .cars-grid { grid-template-columns: 1fr; } }

.car-card { border: 1px solid var(--line); background: var(--card); transition: box-shadow .3s, transform .3s, border-color .3s; display: flex; flex-direction: column; }
.car-card:hover { box-shadow: 0 20px 50px rgba(0,0,0,.55), 0 0 0 1px rgba(212,169,92,.35); transform: translateY(-6px); border-color: rgba(212,169,92,.55); }
.car-card .car-img { position: relative; overflow: hidden; aspect-ratio: 16/10; }
.car-card .car-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.car-card:hover .car-img img { transform: scale(1.07); }
.car-badge {
  position: absolute; top: 14px; left: 14px; background: var(--red); color: #fff;
  font-size: .68rem; letter-spacing: 2px; text-transform: uppercase; padding: 5px 12px; font-weight: 600;
}
.car-badge.sold { background: #8c1c1c; color: #fff; }
.car-body { padding: 24px 24px 28px; display: flex; flex-direction: column; flex: 1; }
.car-body h3 { font-size: .98rem; margin-bottom: 14px; min-height: 52px; }
.car-body h3 a:hover { color: #cfcfd4; }
.car-specs { display: flex; flex-wrap: wrap; gap: 10px 16px; color: var(--muted); font-size: .82rem; margin-bottom: 18px; }
.car-specs span { display: inline-flex; align-items: center; gap: 8px; }
/* Iconos básicos (sin color propio): heredan el gris apagado del texto que acompañan */
.spec-icon { width: 15px; height: 15px; flex-shrink: 0; }
/* Chip circular dorado para los iconos de las tarjetas de "Últimas incorporaciones":
   más definidos y vistosos que el icono plano suelto */
.spec-chip {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(212,169,92,.14); border: 1px solid rgba(212,169,92,.3);
}
.spec-chip .spec-icon { width: 13px; height: 13px; color: var(--accent); }
.car-price { font-size: 1.45rem; font-weight: 600; margin-bottom: 18px; color: var(--accent); }
.car-body .btn { margin-top: auto; text-align: center; }

.center-cta { text-align: center; margin-top: 50px; }

/* ---------- Carrusel de "Últimas incorporaciones" ---------- */
.cars-carousel { position: relative; display: flex; align-items: center; gap: 14px; }
/* min-width:0 es imprescindible aquí: sin él, un hijo flex con contenido ancho
   (la tarjeta) empuja a este contenedor a crecer más allá del hueco que le
   corresponde entre las flechas (bug clásico de flexbox), y el overflow:hidden
   deja de recortar donde debería — eso es lo que provocaba que en móvil la
   tarjeta se viera cortada a la derecha (precio y botón "Ver detalles" fuera). */
.cars-carousel .cc-viewport { flex: 1; min-width: 0; overflow: hidden; }
.cars-carousel .cars-track {
  display: flex; flex-wrap: nowrap; gap: 30px; overflow-x: auto;
  padding-bottom: 4px; min-width: 0;
  scrollbar-width: none; -ms-overflow-style: none;
}
.cars-carousel .cars-track::-webkit-scrollbar { display: none; }
.cars-carousel .cars-track.snap { scroll-snap-type: x mandatory; scroll-behavior: smooth; }
/* Tamaño calculado para que se vean exactamente 3 tarjetas completas al cargar */
.cars-carousel .cars-track .car-card {
  flex: 0 0 calc((100% - 60px) / 3); /* 60px = 2 huecos de 30px entre 3 tarjetas */
  min-width: 0;
  transition: transform .5s ease, box-shadow .5s ease, border-color .5s ease;
}
.cars-carousel .cars-track .car-card.in-focus {
  transform: translateY(-4px);
  border-color: rgba(212,169,92,.55);
  box-shadow: 0 20px 50px rgba(0,0,0,.5), 0 0 0 1px rgba(212,169,92,.3);
}
@media (max-width: 1000px) {
  .cars-carousel .cars-track .car-card { flex-basis: calc((100% - 30px) / 2); }
}
@media (max-width: 640px) {
  /* IMPORTANTE: porcentaje (%), no vw — vw se mide contra TODA la pantalla,
     no contra el hueco real disponible dentro del carrusel (que es más
     estrecho porque a los lados quedan las flechas prev/next). Usar vw aquí
     era la causa exacta del corte: la tarjeta se dibujaba más ancha que su
     contenedor visible y el overflow:hidden se comía el resto por la derecha. */
  .cars-carousel { gap: 8px; }
  .cars-carousel .cars-track .car-card { flex-basis: 100%; }
}
.cc-arrow {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--card); color: var(--text); font-size: 1.3rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: border-color .25s, color .25s;
}
.cc-arrow:hover { border-color: var(--accent); color: var(--accent); }
.cc-arrow:disabled { opacity: .3; cursor: default; }
.cc-arrow:disabled:hover { border-color: var(--line); color: var(--text); }
@media (max-width: 640px) { .cc-arrow { width: 38px; height: 38px; font-size: 1.1rem; } }

/* Vídeo dentro de la galería de ficha de coche y su lightbox */
.car-img video, .gallery-main video, .gcell video, .lightbox video { width: 100%; height: 100%; object-fit: cover; display: block; }
.lightbox video { max-width: 92vw; max-height: 85vh; object-fit: contain; }
.gcell.has-video, .gallery-main:has(video) { position: relative; }
.gcell.has-video::after, .gallery-main:has(video)::after {
  content: '▶'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 40px; height: 40px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: .85rem; pointer-events: none;
}

/* ---------- Sección Sobre (split) ---------- */
.about-split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.about-split img { width: 100%; height: 100%; object-fit: cover; }
.about-split h2 { font-size: clamp(1.4rem, 2.7vw, 2rem); margin-bottom: 20px; }
.about-split p { color: var(--muted); margin-bottom: 20px; }
.about-split .about-list { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 14px; }
.about-split .about-list li { position: relative; padding-left: 26px; color: var(--muted); line-height: 1.6; }
.about-split .about-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .55; }
.about-split .about-list strong { color: inherit; font-weight: 700; }
@media (max-width: 860px) { .about-split { grid-template-columns: 1fr; } }


/* ---------- Marcas (marquee interactivo) ---------- */
.brands { background: #f6f6f4; padding: 38px 0; overflow: hidden; border-top: 2px solid var(--accent); border-bottom: 2px solid var(--accent); position: relative; }
.brands::before, .brands::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none;
}
.brands::before { left: 0; background: linear-gradient(90deg, #f6f6f4, transparent); }
.brands::after { right: 0; background: linear-gradient(-90deg, #f6f6f4, transparent); }
.brands-track {
  display: flex; align-items: center; gap: 0; width: max-content;
  animation: marquee 55s linear infinite; will-change: transform;
}
.brands:hover .brands-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.brand-item {
  padding: 0 46px; white-space: nowrap; display: flex; align-items: center; justify-content: center;
  transition: transform .3s, opacity .3s; opacity: .92; height: 100px;
}
/* Los PNG venían con mucho margen blanco alrededor del logo real; ya recortados
   y con fondo transparente, así se ven grandes y nítidos en vez de un sello diminuto */
.brand-item img { height: 78px; width: auto; max-width: 190px; object-fit: contain; }
.brand-item:hover { transform: scale(1.1); opacity: 1; }

/* ---------- Features: banda con foto de fondo (estilo referencia del cliente) ---------- */
.features-banner {
  position: relative; background-size: cover; background-position: center;
  padding: 100px 0; overflow: hidden;
}
.features-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(0,0,0,.92) 10%, rgba(0,0,0,.6) 50%, rgba(0,0,0,.25) 100%);
}
/* Contenido desplazado un poco hacia la derecha (sin centrarlo del todo) y
   con el título más pequeño, tal como se pidió. */
.features-content { position: relative; z-index: 1; padding-left: 7%; }
.features-content .section-title { max-width: 560px; margin-bottom: 34px; text-align: left; font-size: clamp(1.25rem, 2.3vw, 1.7rem); }
.features-content .section-title::after { display: none; }
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 680px; margin-top: 0; }
.feature {
  /* Contorno más marcado (dorado) para que las tarjetas se vean claramente
     delimitadas sobre la foto de fondo. */
  border: 1.5px solid rgba(212,169,92,.55); background: rgba(20,20,20,.6);
  padding: 20px 16px; text-align: left; display: block;
  transition: transform .3s, background .3s, border-color .3s;
}
a.feature { cursor: pointer; }
.feature:hover { background: rgba(35,35,35,.8); border-color: var(--accent); transform: translateY(-4px); }
.feature .icon { margin-bottom: 12px; }
.feature .icon svg { width: 24px; height: 24px; stroke: var(--accent); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; display: block; }
.feature h3 { font-size: .78rem; text-transform: none; letter-spacing: normal; font-weight: 700; line-height: 1.35; color: #fff; }
@media (max-width: 860px) {
  .features-content { padding-left: 0; }
  .features-grid { grid-template-columns: 1fr; max-width: 320px; }
  .features-banner { padding: 70px 0; }
  .features-overlay { background: rgba(0,0,0,.72); }
}

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; background: none; border: none; font-family: var(--font); font-size: 1.02rem;
  font-weight: 600; text-align: left; padding: 22px 40px 22px 0; cursor: pointer; position: relative; color: var(--text);
  transition: color .3s;
}
.faq-q:hover { color: #fff; }
.faq-q::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; font-weight: 300; transition: .3s; color: var(--accent); }
.faq-item.open .faq-q::after { transform: translateY(-50%) rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .4s ease; color: var(--muted); }
.faq-item.open .faq-a { max-height: 220px; }
.faq-a p { padding: 0 0 22px; }

/* ---------- Stats ---------- */
.stats { background: url('../img/glc350e-5.jpeg') center/cover fixed; position: relative; }
.stats::before { content: ''; position: absolute; inset: 0; background: rgba(5,5,6,.82); }
.stats .container { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; text-align: center; color: #fff; }
.stat .num { font-size: clamp(2.3rem, 5.3vw, 3.5rem); font-weight: 600; color: var(--accent); }
.stat .label { text-transform: uppercase; letter-spacing: 2.5px; font-size: .85rem; color: #cfcfcf; }
@media (max-width: 640px) { .stats .container { grid-template-columns: 1fr; } }

/* ---------- Bloque confianza (FAQ + foto + stats) ---------- */
.trust-block { background: var(--black); }
.trust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: start; }
.trust-text .section-title { text-align: left; margin-bottom: 8px; }
.trust-text .section-title::after { display: none; }
.trust-text .section-sub { text-align: left; color: var(--muted); margin: 0 0 10px; }
.trust-text .faq { max-width: 100%; margin: 0; }
.trust-photo { position: relative; padding-bottom: 46px; }
.trust-photo img { width: 100%; height: 460px; object-fit: cover; display: block; }
.trust-stats { position: absolute; left: 0; bottom: 0; display: flex; }
.trust-stats .stat { background: rgba(8,8,8,.94); border: 1px solid rgba(212,169,92,.3); padding: 20px 26px; }
.trust-stats .stat .num { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.trust-stats .stat .label { font-size: .72rem; letter-spacing: 1.5px; }
@media (max-width: 860px) {
  .trust-grid { grid-template-columns: 1fr; gap: 34px; }
  .trust-photo { order: -1; }
}

/* ---------- CTA banda ---------- */
.cta-band { background: var(--red); padding: 38px 0; }
.cta-band .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cta-band h2 { color: #fff; font-size: clamp(1.15rem, 2.2vw, 1.55rem); font-weight: 600; margin: 0; text-align: left; max-width: 640px; }
.cta-link { color: #fff; font-size: 1.05rem; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; white-space: nowrap; }
.cta-link svg { width: 17px; height: 17px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s; }
.cta-link:hover svg { transform: translate(3px,-3px); }
@media (max-width: 640px) { .cta-band .container { flex-direction: column; align-items: flex-start; } }

/* ---------- Testimonios (sección clara, estilo reseñas) ---------- */
.testi-section { background: #ececec; padding-top: 60px; }
.testi-section .section-title { color: #16161a; }
.testi-section .section-title::after { background: var(--accent); }
.testi-section .section-sub { color: #5c5c5c; }
.testi-carousel { display: flex; align-items: center; gap: 22px; max-width: 1180px; margin: 0 auto; }
.testi-score { flex-shrink: 0; text-align: center; width: 130px; }
.testi-score-stars { color: #d4a95c; font-size: 1.3rem; letter-spacing: 2px; margin-bottom: 8px; }
.testi-score-label { color: #5c5c5c; font-size: .82rem; line-height: 1.35; }
.testi-viewport { flex: 1; overflow: hidden; }
.testi-track { display: flex; transition: transform .5s cubic-bezier(.22,1,.36,1); }
.testi-page { flex: 0 0 100%; display: flex; gap: 22px; box-sizing: border-box; }
.testi { flex: 1; min-width: 0; box-sizing: border-box; border: 1px solid #e0e0e0; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.06); padding: 26px 26px; }
.testi-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.testi-avatar { width: 40px; height: 40px; border-radius: 50%; background: rgba(212,169,92,.16); border: 1px solid rgba(212,169,92,.4); color: #9c7a2f; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .95rem; flex-shrink: 0; }
.testi p { color: #444; font-style: italic; margin-bottom: 0; font-size: .92rem; }
.testi .who { font-weight: 600; color: #16161a; font-size: .92rem; }
.testi .where { color: #7a7a7a; font-size: .8rem; }
.testi .starline { color: #d4a95c; letter-spacing: 3px; margin-bottom: 14px; font-size: .9rem; }
.testi-arrow { width: 36px; height: 36px; border-radius: 50%; border: 1px solid #d8d8d8; background: #fff; color: #16161a; font-size: 1.1rem; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: border-color .25s, background .25s; }
.testi-arrow:hover:not(:disabled) { border-color: var(--accent); background: #f7efdf; }
.testi-arrow:disabled { opacity: .35; cursor: default; }
@media (max-width: 860px) { .testi-page { flex-direction: column; } .testi-score { display: none; } }
@media (max-width: 640px) { .testi { padding: 24px 22px; } .testi-carousel { gap: 8px; } }

/* ---------- Página interior: cabecera ---------- */
.page-head { background: var(--surface); color: #fff; padding: 150px 0 70px; text-align: center; border-bottom: 1px solid var(--line); }
.page-head h1 { font-size: clamp(1.6rem, 3.5vw, 2.45rem); }
.breadcrumb { color: #8a8a90; font-size: .85rem; margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.breadcrumb a:hover { color: #fff; }
.breadcrumb-home { display: inline-flex; align-items: center; line-height: 0; opacity: .85; transition: opacity .2s ease; }
.breadcrumb-home:hover { opacity: 1; }
.breadcrumb-home img { height: 28px; width: auto; display: block; }

/* Logo en la cabecera de la ficha de coche: enlaza a Inicio para volver sin usar "atrás" */
.detail-logo-link { display: inline-block; margin-bottom: 16px; transition: opacity .3s; }
.detail-logo-link:hover { opacity: .8; }
.detail-logo { height: 46px; width: auto; margin: 0 auto; }

/* ---------- Detalle de coche ---------- */
.detail-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: 50px; align-items: start; }
@media (max-width: 960px) { .detail-layout { grid-template-columns: 1fr; } }
.gallery-main { aspect-ratio: 16/10; overflow: hidden; background: var(--card); }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-main img { cursor: zoom-in; transition: transform .6s; }
.gallery-main:hover img { transform: scale(1.04); }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.gallery-grid .gcell { overflow: hidden; }
.gallery-grid img {
  aspect-ratio: 16/11; object-fit: cover; width: 100%; height: 100%; cursor: zoom-in;
  transition: transform .45s, filter .45s;
}
.gallery-grid img:hover { transform: scale(1.08); filter: brightness(1.1); }
@media (max-width: 640px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.94);
  display: none; align-items: center; justify-content: center;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 90vw; max-height: 86vh; object-fit: contain; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.lightbox button {
  position: absolute; background: none; border: none; color: #fff; cursor: pointer;
  font-size: 2.6rem; line-height: 1; padding: 14px; opacity: .75; transition: .25s; z-index: 2;
}
.lightbox button:hover { opacity: 1; color: var(--accent); }
.lb-close { top: 14px; right: 22px; }
.lb-prev { left: 14px; top: 50%; transform: translateY(-50%); font-size: 3.4rem; }
.lb-next { right: 14px; top: 50%; transform: translateY(-50%); font-size: 3.4rem; }

.detail-info h1 { font-size: 1.45rem; margin-bottom: 8px; }
.detail-price { font-size: 2.1rem; font-weight: 600; margin: 14px 0 20px; color: var(--accent); }
/* Ficha técnica en grid de 2 columnas (etiqueta arriba, valor debajo) en vez
   de una fila por dato: con ~50 datos técnicos, una tabla de una sola columna
   se hacía kilométrica; en 2 columnas ocupa la mitad de alto y cabe mejor
   junto a la galería/descripción de la izquierda. */
.spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; margin-bottom: 14px; }
.spec-grid.spec-grid-top { margin-bottom: 22px; }
.spec-item { padding: 7px 0; border-bottom: 1px solid var(--line); }
.spec-item .k {
  display: flex; align-items: center; gap: 6px; color: var(--muted);
  text-transform: uppercase; font-size: .66rem; letter-spacing: 1.2px; margin-bottom: 2px;
}
.spec-item .v { display: block; color: var(--text); font-size: .84rem; line-height: 1.3; }
@media (max-width: 480px) { .spec-grid { grid-template-columns: 1fr; } }
.detail-info .btn { width: 100%; text-align: center; margin-bottom: 12px; }

/* Ficha técnica ampliada: cada bloque (Motor, Consumos, Prestaciones...) lleva
   su propio título de categoría con icono, y debajo su propio grid de specs.
   Espaciado reducido para que toda la ficha ocupe menos alto y no se quede
   un hueco negro grande bajo la columna de la izquierda (más corta). */
.spec-group { margin-bottom: 2px; }
.spec-cat-title {
  display: flex; align-items: center; gap: 9px; color: var(--accent);
  font-size: .76rem; text-transform: uppercase; letter-spacing: 1.4px; font-weight: 600;
  margin: 16px 0 6px; padding-top: 12px; border-top: 1px solid var(--line);
}
.spec-group:first-child .spec-cat-title { margin-top: 2px; padding-top: 0; border-top: none; }
.spec-cat-title .spec-icon { width: 15px; height: 15px; }

/* Botones de contacto en círculo (WhatsApp / Llamar) en la ficha de coche */
.detail-cta-circles { display: flex; gap: 22px; margin-top: 6px; }
.circle-cta { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.circle-btn {
  width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  transition: transform .3s, background .3s; box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.circle-btn svg { width: 26px; height: 26px; fill: #fff; }
.circle-wsp { background: #25d366; }
.circle-wsp:hover { background: #1faf53; transform: translateY(-4px) scale(1.06); }
.circle-call { background: var(--accent); }
.circle-call:hover { background: var(--accent-h); transform: translateY(-4px) scale(1.06); }
.circle-cta .circle-label { font-size: .72rem; color: var(--muted); text-align: center; max-width: 100px; }

/* La descripción ahora va debajo de la galería, en la columna izquierda
   (antes iba a todo lo ancho, tras la ficha técnica entera, y eso alargaba
   mucho el scroll). Así corre en paralelo a la ficha técnica de la derecha
   y la página total queda más corta. Tipografía algo más compacta también. */
.detail-desc { margin-top: 26px; }
.detail-desc h2 { margin-bottom: 14px; font-size: 1.15rem; text-transform: uppercase; letter-spacing: 2px; }
.detail-desc p.lead { font-weight: 500; margin-bottom: 10px; color: #fff; font-size: .92rem; }
.detail-desc ul { list-style: none; }
.detail-desc li { padding: 5px 0 5px 20px; position: relative; color: var(--muted); border-bottom: 1px dashed var(--line); font-size: .86rem; line-height: 1.35; }
.detail-desc li::before { content: '›'; position: absolute; left: 4px; color: var(--accent); font-weight: 600; }

/* ---------- Footer ---------- */
.site-footer { background: #09090a; color: #cfcfcf; padding: 80px 0 0; border-top: 1px solid var(--line); }
.footer-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 60px; padding-bottom: 60px; align-items: center; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-stars { color: var(--accent); letter-spacing: 6px; font-size: 1rem; margin-bottom: 18px; }
.footer-logo { height: 46px; margin-bottom: 26px; display: block; }
.site-footer .logo img { height: 52px; margin-bottom: 22px; }
.footer-claim { font-size: clamp(1.5rem, 2.8vw, 2.1rem); font-weight: 700; color: #fff; margin-bottom: 30px; max-width: 480px; line-height: 1.25; }
.footer-contact li { margin-bottom: 14px; font-size: .92rem; display: flex; gap: 12px; align-items: flex-start; }
.footer-contact svg { width: 17px; height: 17px; fill: var(--accent); flex-shrink: 0; margin-top: 4px; }
.footer-contact a:hover { color: #fff; }
.footer-social { display: flex; gap: 16px; margin-top: 26px; }
.footer-social a {
  border: 1px solid transparent; width: 42px; height: 42px; border-radius: 50%; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; transition: .3s; overflow: hidden;
}
.footer-social a svg { width: 22px; height: 22px; display: block; transition: transform .3s; }
.footer-social a.ig-btn {
  background: linear-gradient(45deg, #FFDD55 0%, #FF543E 25%, #C837AB 50%, #7F32DF 75%, #4776E6 100%);
}
.footer-social a.wa-btn { background: #25d366; }
.footer-social a:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.footer-social a:hover svg { transform: scale(1.08); }
.footer-map { position: relative; border-radius: 6px; overflow: hidden; }
.footer-map iframe { width: 100%; height: 380px; border: 0; display: block; }
.footer-map-card { position: absolute; top: 16px; left: 16px; background: #fff; color: #16161a; border-radius: 6px; padding: 12px 16px; box-shadow: 0 4px 14px rgba(0,0,0,.25); max-width: 240px; }
.footer-map-card .fmc-name { font-weight: 700; font-size: .95rem; margin-bottom: 4px; }
.footer-map-card .fmc-addr { font-size: .78rem; color: #5c5c5c; line-height: 1.35; }
@media (max-width: 900px) { .footer-map iframe { height: 260px; } }
.footer-bottom {
  border-top: 1px solid #202024; padding: 24px 0; display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: space-between; font-size: .8rem; color: #8a8a8a;
}
.footer-bottom a:hover { color: #fff; }

/* ---------- Botón flotante WhatsApp ---------- */
.wsp-float {
  position: fixed; bottom: 26px; right: 26px; z-index: 90; width: 56px; height: 56px;
  background: #25d366; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.5); transition: transform .3s;
}
.wsp-float:hover { transform: scale(1.1); }
.wsp-float svg { width: 30px; height: 30px; fill: #fff; }

/* ---------- Utilidades ---------- */
.bg-grey { background: var(--surface); }
.empty-msg { text-align: center; color: var(--muted); padding: 60px 0; font-size: 1.05rem; }

/* ---------- Galería mosaico (inicio) ---------- */
.photo-mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; gap: 12px; }
.photo-mosaic .ph { overflow: hidden; display: block; position: relative; }
.photo-mosaic .ph.big { grid-column: span 2; grid-row: span 2; }
.photo-mosaic .ph img, .photo-mosaic .ph video { width: 100%; height: 100%; object-fit: cover; transition: transform .5s, filter .5s; }
.photo-mosaic .ph:hover img, .photo-mosaic .ph:hover video { transform: scale(1.08); filter: brightness(1.12); }
.photo-mosaic .ph::after {
  content: ''; position: absolute; inset: 0; border: 0 solid var(--accent); transition: border-width .3s; pointer-events: none;
}
.photo-mosaic .ph:hover::after { border-width: 2px; }
.photo-mosaic .ph.has-video::before {
  content: '▶'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: .9rem; pointer-events: none; z-index: 2;
}
@media (max-width: 760px) { .photo-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; } }

/* ---------- Banda panorámica ---------- */
.parallax-banner {
  height: 58vh; min-height: 400px; background-size: cover; background-position: center;
  background-attachment: fixed; position: relative;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.parallax-banner::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.25); }
@media (max-width: 900px) { .parallax-banner { background-attachment: scroll; height: 40vh; } }

@media (min-width: 1400px) {
  .photo-mosaic { grid-auto-rows: 260px; }
  .cars-grid { gap: 36px; }
}

/* ---------- Formulario de contacto ---------- */
.contact-form { max-width: 820px; margin: 28px auto 0; display: grid; gap: 14px; }
.contact-grid { display: grid; gap: 14px; grid-template-columns: repeat(3, 1fr); }
.contact-form input,
.contact-form textarea {
  width: 100%; padding: 14px 16px; border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12); background: #fff;
  font: inherit; color: inherit; outline: none;
}
.contact-form input:focus,
.contact-form textarea:focus { border-color: #c9a227; }
.contact-form textarea { resize: vertical; }
.contact-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.contact-note { font-size: .9rem; opacity: .75; }
@media (max-width: 720px) { .contact-grid { grid-template-columns: 1fr; } }