/* Explora Motos — original design system */
:root {
  /* ========== DARK MODE (night) — original ========== */
  --orange: #E8520A;
  --orange-soft: #FF6A1F;
  --orange-deep: #B83C00;
  --accent-rgb: 232, 82, 10;          /* for rgba(var(--accent-rgb), x) */
  --accent-soft-rgb: 255, 106, 31;
  --wa-verde: #25D366;                /* verde oficial de WhatsApp (botón flotante) */
  --wa-verde-rgb: 37, 211, 102;
  --bmw-blue: #1c69d4;                /* BMW signature blue (used only in light mode for now) */
  --bmw-navy: #002B5A;
  --bmw-red: #E22718;                  /* BMW M Sport red — used in both modes as live/sport accent */
  --black: #0A0A0A;
  --black-2: #111111;
  --black-3: #161616;
  --black-4: #1C1C1C;
  --line: rgba(255,255,255,0.08);
  --line-2: rgba(255,255,255,0.14);
  --text: #F5F2EE;
  --text-dim: #A8A39E;
  --text-mute: #6B6864;
  --shadow-soft: 0 8px 32px rgba(0,0,0,0.4);
  --shadow-glow: 0 0 60px rgba(232,82,10,0.4);
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.95  0 0 0 0 0.9  0 0 0 0.07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --m-tricolor: linear-gradient(90deg, #0166B1 0%, #002B5A 50%, #E22718 100%);  /* BMW M sport gradient */
  --transition-theme: background-color .4s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease;
  /* ── Identidad motera/off-road (Unidad 2) — texturas ESTÁTICAS pintadas una
     sola vez por GPU, reutilizables vía ::before SOLO a nivel de sección (≤10
     nodos), nunca por card, para no reintroducir jank de repaints en scroll. */
  --tread: repeating-linear-gradient(45deg, transparent 0 9px, rgba(255,255,255,0.025) 9px 11px);     /* huella de neumático */
  --contour: repeating-radial-gradient(circle at 50% 120%, transparent 0 38px, rgba(232,82,10,0.045) 38px 39px); /* curvas de nivel / mapa */
  --orange-glow: 0 0 0 1px rgba(232,82,10,0.4), 0 24px 60px -24px rgba(232,82,10,0.45);  /* glow de marca reutilizable */
  /* Factor móvil de animación (Unidad 3): ancla documentada. En ≤640px el scroll
     es más corto y táctil, así que las animaciones deben sentirse más rápidas.
     var() no funciona dentro de @keyframes, por eso las reglas móviles multiplican
     duraciones explícitas; esta variable marca dónde está el "factor móvil". */
  --anim-scale: 1;
}

/* El modo claro completo se eliminó (sitio dark-only); vive en el historial git. */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--black);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  position: relative;
  transition: var(--transition-theme);
}
body::before {
  content: ""; position: fixed; inset: 0;
  background-image: var(--grain);
  opacity: 0.5; pointer-events: none; z-index: 9999;
  mix-blend-mode: overlay;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

.display { font-family: 'Archivo Black', 'Inter', sans-serif; text-transform: uppercase; letter-spacing: -0.01em; line-height: 0.92; }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); }

.container { max-width: 1440px; margin: 0 auto; padding: 0 48px; }

/* ---------- HEADER ---------- */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 18px 40px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  background: linear-gradient(180deg, rgba(10,10,10,0.65) 0%, rgba(10,10,10,0.25) 70%, transparent 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.header::before {
  content: ""; position: absolute;
  left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--orange) 30%, var(--orange) 70%, transparent 100%);
  opacity: 0.85;
}
.header.scrolled {
  padding: 12px 40px;
  background: rgba(10,10,10,0.88);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

/* Logotipo oficial (assets/marca/). Es un lockup HORIZONTAL 4:1, no un icono
   cuadrado: sustituye al antiguo .logo-mark + .logo-text dibujados a mano.
   Se usa la variante blanca porque su único naranjo es el detalle de la
   carretera y así no compite con el naranjo de interfaz de los botones. */
.logo { display: flex; align-items: center; position: relative; z-index: 1; }
.logo-img {
  height: 44px; width: auto; display: block;
  transition: height .35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity .3s;
}
.logo:hover .logo-img { opacity: 0.82; }
.header.scrolled .logo-img { height: 38px; }

.nav {
  display: flex; gap: 4px;
  background: rgba(15,15,15,0.7);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  padding: 7px;
  box-shadow:
    0 12px 32px -10px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,255,255,0.06);
  position: relative; z-index: 1;
}
.nav a {
  font-size: 14px;
  padding: 11px 16px;
  border-radius: 999px;
  color: var(--text-dim);
  transition: all 0.25s cubic-bezier(.2,.8,.2,1);
  position: relative;
  letter-spacing: 0.01em;
  font-weight: 600;
  white-space: nowrap;
}
.nav a:hover {
  color: #fff;
  background: rgba(255,255,255,0.06);
}
.nav a.active {
  color: #fff;
  background: linear-gradient(135deg, var(--orange), #d44400);
  box-shadow:
    0 8px 24px -6px rgba(232,82,10,0.7),
    inset 0 1px 0 rgba(255,255,255,0.2);
  transform: scale(1.02);
}
.nav a.active::before { display: none; }

.header-actions { display: flex; align-items: center; gap: 12px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: 999px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  white-space: nowrap;
  position: relative;
}
.btn::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(255,255,255,0.2) 0%, transparent 70%);
  opacity: 0; pointer-events: none;
}
.btn:active { transform: scale(0.98); }
.btn-orange { background: var(--orange); color: #fff; }
.btn-orange:hover {
  background: var(--orange-soft);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -6px rgba(232,82,10,0.65), 0 0 30px rgba(232,82,10,0.15);
}
.btn-orange:active { transform: scale(0.98); box-shadow: 0 4px 12px -4px rgba(232,82,10,0.5); }
.btn-ghost { border: 1px solid var(--line-2); color: var(--text); transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
.btn-ghost:hover { border-color: var(--orange); color: var(--orange); background: rgba(232,82,10,0.06); }
.btn-outline-orange { border: 1px solid var(--orange); color: var(--orange); background: transparent; }
.btn-outline-orange:hover { background: rgba(232,82,10,0.08); border-color: var(--orange-soft); }
.btn-outline-orange:active { background: var(--orange); color: #fff; }
.btn-black { background: var(--black); color: #fff; }
.btn-black:hover { background: var(--black-3); transform: translateY(-1px); }
.btn-outline-black { border: 1px solid var(--black); color: var(--black); }
.btn-outline-black:hover { background: var(--black); color: #fff; }
.btn-lg { padding: 18px 32px; font-size: 16px; }
.header .btn {
  font-size: 15px; padding: 14px 24px;
  font-weight: 700;
  box-shadow: 0 8px 24px -6px rgba(232,82,10,0.55), inset 0 1px 0 rgba(255,255,255,0.15);
}
.header .btn:hover {
  box-shadow: 0 14px 36px -8px rgba(232,82,10,0.85), inset 0 1px 0 rgba(255,255,255,0.25);
}
.btn .arrow { transition: transform 0.25s; }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- HERO ---------- */
.hero {
  position: relative;
  min-height: 720px;
  padding: 0;
  overflow: hidden;
  display: flex; align-items: stretch;
}
.hero-bg {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.2) 35%, rgba(10,10,10,0.7) 80%, rgba(10,10,10,1) 100%),
    url('hero.jpg') center/cover;
}
.hero-vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 80% at 50% 60%, transparent 0%, rgba(10,10,10,0.7) 90%),
    linear-gradient(90deg, rgba(10,10,10,0.7) 0%, transparent 22%, transparent 78%, rgba(10,10,10,0.7) 100%);
  pointer-events: none;
}
.hero-topo {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(115deg, rgba(232,82,10,0.04) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(25deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 60px);
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  pointer-events: none;
}

/* Columna izquierda: riel + CTA, espaciado garantizado */
.hero-left-stack {
  position: absolute;
  left: 32px;
  top: 116px;
  bottom: 56px;
  width: 380px;
  z-index: 6;
  display: flex; flex-direction: column;
  /* Al quitar el riel "RUTA · CHILE" quedó un solo hijo: con space-between se
     habría ido al borde superior. El bloque de CTA va abajo. */
  justify-content: flex-end;
  align-items: flex-start;
  gap: 32px;
  pointer-events: none;
}
.hero-left-stack > * { pointer-events: auto; }

/* El riel "RUTA · CHILE" (.hero-rail / .rail-label / .rail-line / .rail-coords)
   se eliminó del hero, y con él .hero-rail-right, que ya era CSS muerto: no
   existía en ningún HTML. Vive en el historial git por si vuelve. */

.rail-specs {
  display: flex; flex-direction: column; gap: 0;
  margin: 0;
}
.rail-specs > div {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  font-size: 10px;
}
.rail-specs > div:last-child { border-bottom: 1px solid var(--line); }
.rail-specs dt { color: var(--text-mute); letter-spacing: 0.15em; text-transform: uppercase; font-size: 9px; }
.rail-specs dd {
  color: var(--text); font-family: 'Archivo Black', sans-serif;
  font-size: 10px; letter-spacing: 0.05em;
}
.rail-specs dd.ok { color: var(--orange); }
.rail-specs dd.ok::before {
  content: ""; display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--orange); margin-right: 6px;
  box-shadow: 0 0 8px var(--orange);
}

/* Hero content (centered) */
.hero-content {
  position: relative; z-index: 4;
  display: flex; flex-direction: column;
  padding: 96px 48px 56px;
  width: 100%;
  min-height: 720px;
  max-width: 1440px;
  margin: 0 auto;
  gap: 18px;
}
.hero-top {
  display: flex; justify-content: center; align-items: center;
  flex-wrap: wrap; gap: 16px;
  margin-top: 8px;
}
.hero-top .hero-tagline-mono { display: none; }
.hero-top .location-badge { margin-bottom: 0; }
.hero-tagline-mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
}

.hero-title {
  font-size: clamp(32px, 4.4vw, 64px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-align: right;
  display: flex; flex-direction: column; justify-content: center;
  align-items: flex-end;
  padding: 8px 0;
  margin: 4px 32px 4px auto;
  max-width: 56%;
}
.hero-title .line-1 {
  color: var(--text); display: block;
  font-family: 'Archivo Black', sans-serif;
  text-transform: uppercase;
}
.hero-title .line-1 .ampersand {
  color: var(--orange);
}
.hero-title .line-2 {
  color: var(--orange); display: block;
  font-style: italic;
  font-family: 'Archivo Black', sans-serif;
  text-transform: lowercase;
  margin-top: 16px;
  letter-spacing: -0.03em;
  text-shadow: 0 0 60px rgba(232,82,10,0.4);
}

.hero-bottom {
  display: flex; justify-content: flex-end;
  margin-top: auto;
  padding-top: 64px;
  padding-right: 24px;
}

/* CTA dentro de la columna izquierda */
.hero-cta-rail {
  position: relative;
  width: 100%;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.hero-cta-rail .cta-eyebrow {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.2em;
  color: var(--orange); text-transform: uppercase;
  margin-bottom: 12px;
}
.hero-cta-rail .hero-sub {
  font-size: 17px; line-height: 1.45;
  color: var(--text-dim);
  margin: 0 0 18px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hero-cta-rail .hero-sub strong { color: var(--text); }
.hero-cta-rail .hero-cta {
  display: flex; flex-direction: row; gap: 10px;
  align-items: stretch;
}
.hero-cta-rail .hero-cta .btn {
  flex: 1; min-width: 0;
  justify-content: center;
  padding: 14px 18px; font-size: 14px;
  border-radius: 999px;
  white-space: nowrap;
}
.hero-cta-block { max-width: 480px; }
.hero-sub {
  font-size: 18px; color: var(--text);
  line-height: 1.55;
}
.hero-sub strong { color: var(--orange); font-weight: 700; }
.hero-cta { margin-top: 26px; display: flex; gap: 14px; flex-wrap: wrap; }

.hero-odometer {
  background: rgba(10,10,10,0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 18px 16px;
  display: flex; flex-direction: column; gap: 10px;
  width: 460px;
  max-width: 100%;
  margin-left: auto;
  opacity: 0.92;
}
.odo-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.18em;
  color: var(--text-mute); text-transform: uppercase;
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 500;
}
.odo-label::after {
  content: "● LIVE"; color: var(--orange);
  font-size: 9px; letter-spacing: 0.15em;
  animation: pulse 2s infinite;
}
.odo-bar {
  position: relative; height: 3px;
  background: var(--black-3); border-radius: 2px;
  margin: 4px 0 18px;
}
.odo-fill {
  position: absolute; top: 0; left: 0; height: 100%;
  width: 92%; background: linear-gradient(90deg, var(--orange-deep), var(--orange));
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(232,82,10,0.6);
}
.odo-marker {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--black); border: 1.5px solid var(--text-mute);
}
.odo-marker.active {
  background: var(--orange); border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(232,82,10,0.25), 0 0 12px var(--orange);
  width: 10px; height: 10px;
}
.odo-marker::after {
  content: attr(data-tip);
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.15em;
  color: var(--text-mute); text-transform: uppercase;
  white-space: nowrap;
}
.odo-marker.active::after { color: var(--orange); }
.odo-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; padding-top: 14px;
  border-top: 1px solid var(--line);
  margin-top: 6px;
}
.odo-stats > div { display: flex; flex-direction: column; gap: 2px; }
.odo-stats b {
  font-family: 'Archivo Black', sans-serif;
  font-size: 20px; color: var(--text);
  letter-spacing: 0.01em; line-height: 1;
}
.odo-stats em {
  font-style: normal; font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.12em;
  color: var(--text-mute); text-transform: uppercase;
  font-weight: 400;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  /* La columna izquierda deja de ser overlay absoluto: el hero pasa a apilar
     verticalmente para que el contenido no se salga por la derecha. */
  .hero { flex-direction: column; min-height: auto; }
  .hero-left-stack {
    position: static; width: 100%; gap: 24px;
    align-items: stretch;
    padding: 0 24px 40px;
  }
  .hero-content {
    order: 1; min-height: auto;
    padding: 110px 24px 32px;
  }
  .hero-left-stack { order: 2; }
  .hero-title { max-width: 100%; text-align: center; align-items: center; margin: 4px 0; }
  .hero-bottom { justify-content: center; padding-right: 0; padding-top: 36px; }
  .hero-odometer { width: 100%; max-width: 460px; margin: 0 auto; }
  .hero-cta-rail .hero-cta { flex-direction: row; flex-wrap: wrap; }
  .hero-cta-rail .hero-cta .btn { width: auto; }
}
@media (max-width: 640px) {
  /* El hero apilado medía 816px en una pantalla de 844: título 195, odómetro
     199 y bloque de CTA 235. Todo junto tapaba la foto por completo y obligaba
     a hacer scroll para ver el primer botón. Aquí se comprime cada pieza. */
  .hero-content { padding: 88px 18px 20px; gap: 10px; }
  /* padding-bottom generoso: el .scroll-indicator es absolute con bottom:14px
     respecto al .hero completo, así que sin este colchón el bloque de CTA queda
     bajo el caption "Desliza para explorar" y ambos se superponen. */
  .hero-left-stack { padding: 0 18px 72px; gap: 14px; }
  /* A 360px el caption se partía en dos líneas y pisaba el botón "Buscar
     repuesto". Con menos interletraje entra en una sola. */
  .scroll-indicator { font-size: 10px; letter-spacing: 0.14em; gap: 4px; white-space: nowrap; }
  .scroll-indicator .arrow-down { width: 12px; height: 16px; }

  /* 11vw daba 42,9px a 390px de ancho: tres líneas y un cuarto de pantalla. */
  .hero-title { font-size: clamp(25px, 8.4vw, 36px); padding: 4px 0; margin: 0; }
  .hero-title .line-2 { margin-top: 8px; }
  .hero-top { gap: 10px; }
  .hero-bottom { padding-top: 18px; }

  /* Odómetro compacto: mismas cuatro cifras, la mitad de aire. */
  .hero-odometer { padding: 11px 13px 12px; gap: 7px; border-radius: 9px; }
  .odo-label { font-size: 9px; letter-spacing: 0.14em; }
  .odo-bar { margin: 3px 0 15px; }
  .odo-marker::after { font-size: 9px; letter-spacing: 0.1em; }
  .odo-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 9px 10px; padding-top: 10px; margin-top: 3px;
  }
  .odo-stats b { font-size: 17px; }
  .odo-stats em { font-size: 9px; letter-spacing: 0.1em; }

  .hero-cta-rail .hero-sub { font-size: 15px; line-height: 1.45; }
  .hero-cta-rail .hero-cta { flex-direction: column; }
  .hero-cta-rail .hero-cta .btn { width: 100%; white-space: normal; }
  /* Los textos nowrap de los botones propagaban su min-content hacia arriba y
     el bloque medía ~415px dentro de un viewport de 375: nada debe impedir
     encoger. El hero además recorta cualquier resto decorativo. */
  .hero { overflow-x: clip; }
  .hero-left-stack, .hero-cta-block, .hero-cta-rail,
  .hero-cta-rail .hero-cta, .hero-content { max-width: 100%; min-width: 0; }
}
.hero-grid {
  position: relative;
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px;
  align-items: center; width: 100%;
}
.hero-left { max-width: 560px; }
.location-badge {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 20px 10px 12px;
  background: rgba(232,82,10,0.16);
  border: 1px solid rgba(232,82,10,0.45);
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace; font-size: 14px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #FFB58A;
  font-weight: 600;
  margin-bottom: 32px;
}
.location-badge .dot {
  width: 9px; height: 9px; background: var(--orange); border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(232,82,10,0.25);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232,82,10,0.5); }
  50% { box-shadow: 0 0 0 6px rgba(232,82,10,0); }
}

.hero-meta {
  margin-top: 56px;
  display: flex; gap: 32px; padding-top: 28px;
  border-top: 1px solid var(--line);
}
.hero-meta-item { display: flex; flex-direction: column; gap: 4px; }
.hero-meta-item .num { font-family: 'Archivo Black', sans-serif; font-size: 28px; color: var(--text); }
.hero-meta-item .lbl { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-mute); letter-spacing: 0.15em; text-transform: uppercase; }

/* Hero bike */
.hero-stage {
  position: relative;
  aspect-ratio: 1.1 / 1;
  display: grid; place-items: center;
}
.hero-stage::before {
  content: ""; position: absolute; inset: 10% -10% 10% -10%;
  background: radial-gradient(ellipse at center, rgba(232,82,10,0.25), transparent 65%);
  filter: blur(20px);
}
.bike-disc {
  position: absolute; width: 92%; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.06);
  background:
    radial-gradient(ellipse at 70% 40%, rgba(232,82,10,0.18), transparent 50%),
    conic-gradient(from 200deg, transparent 0%, rgba(255,255,255,0.04) 30%, transparent 60%);
}
.bike-disc.d2 { width: 78%; border-color: rgba(255,255,255,0.04); animation: rotate 60s linear infinite; }
.bike-disc.d3 { width: 64%; border: 1px dashed rgba(232,82,10,0.18); animation: rotate 40s linear infinite reverse; }
@keyframes rotate { to { transform: rotate(360deg); } }

.bike-art {
  position: relative; width: 78%; z-index: 2;
  filter: drop-shadow(0 20px 40px rgba(232,82,10,0.25)) drop-shadow(0 0 60px rgba(232,82,10,0.15));
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bike-photo {
  position: relative; z-index: 3;
  width: 110%; max-width: 110%;
  object-fit: contain;
  filter:
    drop-shadow(0 30px 60px rgba(232,82,10,0.35))
    drop-shadow(0 0 80px rgba(232,82,10,0.18))
    contrast(1.08) saturate(0.92);
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  mix-blend-mode: normal;
}
.bike-photo-glow {
  position: absolute; inset: 20% -15% -5% -15%;
  background: radial-gradient(ellipse at 50% 60%, rgba(232,82,10,0.5), transparent 55%);
  filter: blur(40px);
  z-index: 1;
  pointer-events: none;
}
.bike-coords {
  position: absolute; font-family: 'JetBrains Mono', monospace; font-size: 10px;
  color: var(--text-mute); letter-spacing: 0.1em; z-index: 3;
}
.bike-coords.tl { top: 8%; left: 4%; }
.bike-coords.tr { top: 8%; right: 4%; text-align: right; }
.bike-coords.bl { bottom: 8%; left: 4%; }
.bike-coords.br { bottom: 8%; right: 4%; text-align: right; }
.bike-coords .v { color: var(--orange); }

.dust {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: rgba(232,82,10,0.6); pointer-events: none;
  animation: drift 8s linear infinite;
}
.dust.s2 { width: 2px; height: 2px; background: rgba(255,255,255,0.4); }
.dust.s3 { width: 3px; height: 3px; background: rgba(232,82,10,0.4); }
@keyframes drift {
  0% { transform: translate(0, 0); opacity: 0; }
  10%, 90% { opacity: 1; }
  100% { transform: translate(60px, -120px); opacity: 0; }
}

.scroll-indicator {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-mute);
  font-weight: 500;
}
.scroll-indicator .arrow-down {
  width: 14px; height: 20px;
  animation: bob 2s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50% { transform: translateY(6px); opacity: 1; }
}

/* ---------- TRUST STRIP — static off-road tech panel ---------- */
.trust-strip {
  /* PROPUESTA · fondo Ruta (base), muy sutil */
  background:
    linear-gradient(rgba(11,11,11,0.68), rgba(11,11,11,0.78)),
    url('assets/fondos/ruta.jpg') center / cover no-repeat,
    linear-gradient(180deg, #0c0c0c 0%, #0a0807 100%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 0;
  position: relative;
}
.trust-strip::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 119px, rgba(255,255,255,0.04) 119px 120px),
    var(--tread);   /* huella de neumático superpuesta */
  pointer-events: none;
}
.trust-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  position: relative;
}
.trust-cell {
  padding: 34px 36px;
  display: flex; flex-direction: column; gap: 6px;
  border-right: 1px solid var(--line);
  position: relative;
}
.trust-cell:last-child { border-right: none; }
.trust-cell::before {
  content: ""; position: absolute; top: 28px; left: 32px;
  width: 6px; height: 6px; background: var(--orange);
}
.trust-cell .trust-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: var(--orange);
  letter-spacing: 0.2em; text-transform: uppercase;
  padding-left: 14px;
}
.trust-cell .trust-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: var(--text-mute);
  letter-spacing: 0.2em; text-transform: uppercase;
  margin-top: 8px;
}
/* PROPUESTA · Trust A "panel de instrumentos" — valores en naranja y con más
   presencia sobre las celdas N°01-04 existentes. */
.trust-cell .trust-value {
  font-family: 'Archivo Black', sans-serif;
  font-size: 21px; color: var(--orange);
  text-transform: uppercase; letter-spacing: 0.02em;
  margin-top: 6px;
  text-shadow: 0 0 30px rgba(232,82,10,0.30);
}
@media (max-width: 1024px) {
  .trust-grid { grid-template-columns: 1fr 1fr; }
  .trust-cell:nth-child(2) { border-right: none; }
  .trust-cell:nth-child(1), .trust-cell:nth-child(2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 640px) {
  /* Antes esto colapsaba a 1 columna — un retroceso respecto a la rejilla 2x2
     de la media query anterior (1024px), que ya funcionaba bien. Se mantienen
     las 2 columnas y solo se ajusta el espaciado interno para el ancho menor. */
  .trust-cell { padding: 22px 18px; }
  .trust-cell .trust-value { font-size: 17px; }
}

/* ---------- SECTION COMMON ---------- */
.section { padding: 140px 0; position: relative; }
.section-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 64px; gap: 40px;
}
.section-head-left { max-width: 720px; }
.section-title { font-size: clamp(40px, 5.5vw, 80px); }
.section-title .accent { color: var(--orange); }
.section-intro { color: var(--text-dim); font-size: 15px; margin-top: 18px; max-width: 480px; }

/* Acento motero unificado: barra naranja que se "dibuja" de izq→der al revelarse
   la sección. Pseudo-elemento → aplica a TODAS las section-head sin tocar el HTML.
   Atado al estado .visible del reveal (scroll-triggered), no @keyframes on-load. */
.section-head-left::before {
  content: ""; display: block;
  width: 48px; height: 3px; background: var(--orange);
  margin-bottom: 18px; border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform .6s .1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.section-head.visible .section-head-left::before { transform: scaleX(1); }

.section-tag {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 12px; border: 1px solid var(--line-2);
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-dim);
  margin-bottom: 20px;
}
.section-tag .num { color: var(--orange); font-family: 'Archivo Black', sans-serif; }

/* Route line divider */
.route-divider {
  height: 80px; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.route-divider svg { width: 100%; height: 100%; }
.route-path {
  fill: none; stroke: var(--orange);
  stroke-width: 1.5; stroke-dasharray: 6 6;
  stroke-dashoffset: 0;
  animation: dash 30s linear infinite;
}
@keyframes dash { to { stroke-dashoffset: -1000; } }

/* ---------- SERVICES — Bento layout (Desarme grande + 3 mini) ---------- */
/* PROPUESTA · fondo Ruta (base) en Servicios */
#services {
  background:
    linear-gradient(rgba(12,12,12,0.60), rgba(12,12,12,0.72)),
    url('assets/fondos/ruta.jpg') center / cover no-repeat,
    var(--black);
}
.services-bento {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 20px;
  align-items: stretch;
}

/* HERO card — Desarmaduría */
.service-hero {
  position: relative;
  display: flex; flex-direction: column;   /* la card toma la altura natural de su
                                              contenido; el grid la respeta (block +
                                              content height:100% creaba dependencia
                                              circular y cortaba el CTA) */
  border-radius: 28px;
  /* Sin overflow:hidden en la card: con el grid `align-items:stretch`, clipear
     aquí impedía que creciera con su contenido y cortaba el CTA del fondo. El
     recorte redondeado se hace ahora en las capas de fondo (bg/overlay). */
  text-decoration: none;
  color: inherit;
  min-height: 640px;
  border: 1px solid rgba(232,82,10,0.3);
  isolation: isolate;
  transition: transform .4s ease, border-color .3s, box-shadow .4s;
}
.service-hero:hover {
  transform: translateY(-4px);
  border-color: var(--orange);
  box-shadow: 0 30px 80px -20px rgba(232,82,10,0.45), 0 0 0 1px rgba(232,82,10,0.4);
}
.service-hero-bg {
  position: absolute; inset: 0; z-index: 0;
  border-radius: 28px;   /* recorta la foto a las esquinas redondeadas de la card */
  /* Foto local real de una de las BMW GS del taller (servida desde assets/,
     sin depender de servicios externos como Unsplash). */
  background:
    url('assets/motos/bmw-r1250gs-adv.jpg') center/cover,
    var(--black-2);
  filter: contrast(1.1) saturate(0.85);
}
.service-hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  border-radius: 28px;   /* recorta el degradado a las esquinas redondeadas */
  background:
    linear-gradient(180deg, rgba(10,10,10,0.4) 0%, rgba(10,10,10,0.75) 60%, rgba(10,10,10,0.95) 100%),
    radial-gradient(circle at 80% 20%, rgba(232,82,10,0.35), transparent 55%);
}
.service-hero-content {
  position: relative; z-index: 2;
  padding: 44px 44px 40px;
  flex: 1;            /* llena la card (flex column); margin-top:auto del CTA lo
                         empuja al fondo. Crece con el contenido sin cortarlo. */
  display: flex; flex-direction: column;
}
/* Se quitaron .service-priority (la píldora "PRIORIDAD · 01") y .service-hero-icon
   (el icono-sol): falsos títulos naranjas que competían con el título real. Queda
   solo el rótulo "SERVICIO PRINCIPAL", alineado a la izquierda como el resto. */
.service-hero-top {
  display: flex; align-items: center;
  margin-bottom: 22px;
}
.service-pulse {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.2em;
  color: rgba(255,255,255,0.92); text-transform: uppercase;
  /* Cae sobre la zona más clara de la foto, donde el overlay solo lleva 0.4 de
     negro: sin la sombra no se lee. */
  text-shadow: 0 1px 10px rgba(0,0,0,0.85), 0 0 3px rgba(0,0,0,0.7);
  white-space: nowrap;
}
.service-pulse > span {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 0 rgba(232,82,10,0.7);
  animation: mdPulse 1.6s ease-out infinite;
}
.service-hero-title {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 0.96;
  text-transform: uppercase;
  /* `margin-top:auto` se lleva el aire sobrante ARRIBA del título, no entre los
     puntos y el CTA: el rótulo queda arriba y todo el bloque de texto baja al pie
     de la card, que es donde el degradado del overlay llega a 0.95 de negro y el
     texto se lee mejor. Se ajusta solo, sin numero magico, aunque la card cambie
     de alto. */
  margin: auto 0 18px;
  color: #fff;
}
.service-hero-title span { color: var(--orange); font-style: italic; }
.service-hero-desc {
  color: var(--text-dim);
  font-size: 16px; line-height: 1.6;
  margin: 0 0 22px;
  max-width: 540px;
}
.service-hero-desc strong { color: var(--text); }
.service-hero-points {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
  margin: 0 0 32px;
}
.service-hero-points li {
  display: flex; align-items: center; gap: 12px;
  font-size: 14px; color: var(--text-dim);
}
.service-hero-points .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--orange);
  flex-shrink: 0;
}
/* CTA de la card 01 (inventario). Estaba en 15px/600 con la tipografía de texto y
   padding 14/26: quedaba 51px de alto y ~255px de ancho, un bloque naranja mucho
   más pesado que el resto de CTAs de la sección y desalineado del sistema (los
   demás son mono, mayúsculas, con tracking). Ahora habla el mismo idioma que
   .service-mini-cta pero un punto más grande, que es lo que marca la jerarquía —
   no el tamaño de la mancha de color. */
.service-hero-cta {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px;
  background: var(--orange); color: #fff;
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  line-height: 1;
  transition: gap .3s, background .3s;
}
.service-hero-cta svg { width: 15px; height: 15px; flex-shrink: 0; }
.service-hero:hover .service-hero-cta { gap: 14px; background: #ff6e1f; }

/* MINI cards */
/* Servicios — columna derecha: 02 "Búsqueda" DESTACADA arriba (cuadrada, con
   foto adventure de fondo, eco de la card hero 01 en menor escala) + 03/04
   compactas lado a lado abajo. La 02 es la prioridad comercial que sigue a la
   Desarmaduría, por eso hereda el tratamiento fotográfico. */
.services-stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  gap: 20px;
}
.services-stack .service-mini--feature {
  grid-column: 1 / -1;          /* todo el ancho de la columna */
  aspect-ratio: 1.05 / 1;       /* "cuadrada como la 01 pero más pequeña" */
}
.service-mini {
  flex: 1;
  position: relative;
  display: flex;
  background: linear-gradient(135deg, var(--black-3), var(--black-2));
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 24px;
  text-decoration: none; color: inherit;
  transition: all .35s cubic-bezier(.2,.8,.2,1);
  overflow: hidden;
  min-height: 200px;
}
.service-mini::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--orange);
  transform: scaleY(0); transform-origin: top;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.service-mini:hover {
  transform: translateX(4px);
  border-color: rgba(232,82,10,0.35);
  box-shadow: 0 18px 40px -16px rgba(232,82,10,0.25);
}
.service-mini:hover::before { transform: scaleY(1); }
/* Sin .service-mini-num (el numerote al 18% de opacidad, el "falso título") ni
   .service-mini-icon (el icono en caja naranja): mismo par que se quitó de la 01. */
.service-mini-body {
  flex: 1;
  display: flex; gap: 18px; align-items: flex-start;
}
.service-mini-text { flex: 1; min-width: 0; }
.service-mini-text h4 {
  font-family: 'Archivo Black', sans-serif;
  font-size: 19px; text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0 0 8px;
  color: #fff;
}
.service-mini-text p {
  font-size: 13.5px; line-height: 1.55;
  color: var(--text-dim);
  margin: 0 0 12px;
}
.service-mini-text p strong { color: var(--text); }
.service-mini-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
  font-weight: 500;
  transition: color .3s, gap .3s;
}
.service-mini:hover .service-mini-cta { color: var(--orange); gap: 12px; }

/* PROPUESTA · 02 "Búsqueda" — acento naranja sutil (prioridad siguiente),
   sin foto para no competir con la card hero de Desarmaduría. */
.service-mini--accent {
  background: linear-gradient(135deg, rgba(232,82,10,0.12), var(--black-2));
  border-color: rgba(232,82,10,0.30);
}

/* ── 02 DESTACADA — foto BMW GS Adventure de fondo + overlay ── */
.service-mini--feature {
  min-height: 0;
  isolation: isolate;
  padding: 32px 34px;
  align-items: flex-end;
  border-color: rgba(232,82,10,0.32);
}
.service-mini--feature::before { display: none; } /* sin barra lateral en la destacada */
.service-mini--feature:hover { transform: translateY(-4px); }
.service-mini--feature .service-mini-bg {
  position: absolute; inset: -8% 0; z-index: 0;   /* colchón para el parallax --par-y */
  /* Foto adventure generada con Higgsfield (soul_cinematic): rider BMW GS a
     contraluz en cresta andina al atardecer — paleta negro/naranja de la casa.
     Sujeto arriba-derecha; el overlay oscurece izquierda/abajo para el texto. */
  background: url('assets/motos/bmw-gs-adventure-higgsfield.jpg') center 30% / cover no-repeat;
  filter: contrast(1.06) saturate(0.98);
  /* parallax (--par-y, escrito por el RAF único) compuesto con el scale del hover */
  transform: translate3d(0, var(--par-y, 0), 0);
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.service-mini--feature:hover .service-mini-bg { transform: translate3d(0, var(--par-y, 0), 0) scale(1.04); }
.service-mini--feature .service-mini-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(115deg, rgba(8,8,8,0.94) 0%, rgba(8,8,8,0.72) 38%, rgba(8,8,8,0.30) 72%, rgba(8,8,8,0.12) 100%),
    linear-gradient(0deg, rgba(8,8,8,0.88) 0%, rgba(8,8,8,0) 55%),
    radial-gradient(circle at 88% 16%, rgba(232,82,10,0.30), transparent 60%);
}
/* z-index:2 mantiene el texto por encima del overlay de la foto. */
.service-mini--feature .service-mini-body { position: relative; z-index: 2; align-items: flex-end; }
.service-mini--feature .service-mini-text h4 {
  font-size: 27px;
  margin-bottom: 10px;
  text-shadow: 0 2px 18px rgba(0,0,0,0.6);
}
.service-mini--feature .service-mini-text p {
  font-size: 15px; line-height: 1.6;
  color: rgba(255,255,255,0.88);
  max-width: 430px;
  margin-bottom: 16px;
  text-shadow: 0 1px 10px rgba(0,0,0,0.5);
}
.service-mini--feature .service-mini-cta {
  color: #fff;
  padding: 11px 20px;
  background: var(--orange);
  border-radius: 999px;
}
.service-mini--feature:hover .service-mini-cta { color: #fff; background: #ff6e1f; gap: 12px; }

/* ── 03 / 04 COMPACTAS — mitad de tamaño, apiladas en columna ── */
.service-mini--small {
  flex-direction: column;
  min-height: 0;
  padding: 22px;
}
.service-mini--small .service-mini-body {
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.service-mini--small .service-mini-text h4 { font-size: 16px; margin-bottom: 0; }
.service-mini--small .service-mini-text p { display: none; } /* se omite en la versión compacta */
.service-mini--small .service-mini-cta { margin-top: 4px; }

@media (max-width: 1100px) {
  .services-bento { grid-template-columns: 1fr; }
  .service-hero { min-height: 520px; }
  .service-hero-points { grid-template-columns: 1fr; }
  .service-mini--feature { min-height: 300px; }
}
@media (max-width: 720px) {
  .service-hero-content { padding: 24px 20px; }
  .service-pulse { letter-spacing: 0.14em; gap: 7px; }
  /* "Desarmaduría" (Archivo Black) a 36px mide ~390px y NO quiebra: era lo que
     ensanchaba TODO el layout móvil a 418px. El clamp la hace caber siempre. */
  .service-hero-title { font-size: clamp(22px, 7.2vw, 36px); }
  .service-mini { padding: 20px; min-width: 0; }
  .service-mini-body { flex-direction: column; gap: 12px; }
  /* En móvil: la 02 (con foto) sigue a todo el ancho, pero 03 y 04 pasan a ir
     LADO A LADO en vez de apiladas. Ya son tarjetas compactas — icono, título
     de una línea y CTA, sin párrafo (.service-mini--small oculta el <p>) — así
     que caben perfectamente en dos columnas y el bloque de servicios deja de
     ser cuatro rectángulos idénticos uno tras otro. */
  .services-stack { grid-template-columns: 1fr 1fr; grid-template-rows: none; gap: 14px; }
  .services-stack .service-mini[data-priority="2"] { grid-column: 1 / -1; }
  .services-stack .service-mini[data-priority="3"],
  .services-stack .service-mini[data-priority="4"] { grid-column: span 1; grid-row: auto; }
  /* OJO: soltar el aspect-ratio cuadrado de la 02 — en pantallas angostas su
     contenido fijaba la ALTURA y el ratio convertía eso en un ANCHO mínimo de
     ~390px, ensanchando TODO el layout móvil a 418px. */
  .services-stack .service-mini--feature {
    aspect-ratio: auto; min-height: 300px;
    flex-direction: column;
    align-items: flex-start;
    padding: 26px 22px;
  }
  .services-stack .service-mini--feature .service-mini-body {
    align-items: flex-start;
    width: 100%;
  }
  .services-stack .service-mini--feature .service-mini-text h4 { font-size: clamp(20px, 6.5vw, 26px); }
  .services-stack .service-mini--feature .service-mini-text p { max-width: 100%; }
  .services-stack .service-mini--feature .service-mini-cta { align-self: flex-start; }

  /* 03/04 a ~173px de ancho: se les recorta el padding y el CTA ("Ver vendidas" /
     "Ver la historia" son texto suelto, no un <span> propio, así que se ajusta el
     tamaño en vez de intentar ocultarlo). */
  .service-mini--small { padding: 16px; }
  .service-mini--small .service-mini-text h4 { font-size: 14px; line-height: 1.25; }
  .service-mini--small .service-mini-cta { font-size: 11px; margin-top: 2px; gap: 5px; }
  .service-mini--small .service-mini-cta svg { width: 11px; height: 11px; flex-shrink: 0; }
  /* El párrafo sigue oculto (regla base .service-mini--small .service-mini-text
     p{display:none}): a 153px de ancho un párrafo entero desbordaba la tarjeta
     a 417px de alto. Antes había un display:block aquí porque 03/04 iban a
     todo el ancho; ya no es el caso. */
}

/* Legacy services-grid (mantener clase por si acaso) */
.services-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.service-card {
  position: relative;
  background: linear-gradient(135deg, var(--black-3), var(--black-2));
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 40px;
  min-height: 320px;
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  cursor: pointer;
}
.service-card::before {
  content: ""; position: absolute; inset: -1px; border-radius: 24px;
  padding: 1px;
  background: linear-gradient(135deg, var(--orange), transparent 50%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 0.4s;
  pointer-events: none;
}
.service-card:hover {
  transform: translateY(-6px);
  border-color: rgba(232,82,10,0.3);
  box-shadow: 0 30px 60px -20px rgba(232,82,10,0.25), 0 0 0 1px rgba(232,82,10,0.2);
}
.service-card:hover::before { opacity: 1; }

.service-num {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: var(--text-mute); letter-spacing: 0.15em;
}
.service-icon {
  width: 88px; height: 88px;
  background: var(--black-4);
  border: 1px solid var(--line);
  border-radius: 20px;
  display: grid; place-items: center;
  margin: 24px 0 32px;
  transition: all 0.4s;
  position: relative;
}
.service-icon::after {
  content: ""; position: absolute; inset: 0; border-radius: 20px;
  background: radial-gradient(circle at center, rgba(232,82,10,0.25), transparent 70%);
  opacity: 0; transition: opacity 0.4s;
}
.service-card:hover .service-icon { border-color: rgba(232,82,10,0.4); }
.service-card:hover .service-icon::after { opacity: 1; }
.service-icon svg { width: 44px; height: 44px; stroke: var(--orange); fill: none; stroke-width: 1.5; position: relative; z-index: 1; }
.service-card h3 { font-family: 'Archivo Black', sans-serif; font-size: 24px; text-transform: uppercase; letter-spacing: 0.01em; }
.service-card p { color: var(--text-dim); font-size: 14px; margin-top: 12px; line-height: 1.55; }
.service-card .footer-link {
  margin-top: 28px;
  display: flex; align-items: center; justify-content: space-between;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-dim);
  padding-top: 24px; border-top: 1px solid var(--line);
  transition: color 0.3s;
}
.service-card:hover .footer-link { color: var(--orange); }
.service-card .footer-link svg { width: 14px; height: 14px; transition: transform 0.3s; }
.service-card:hover .footer-link svg { transform: translateX(4px); }

/* ---------- DISMANTLE ---------- */
.dismantle {
  background: linear-gradient(180deg, var(--black) 0%, #0d0a08 50%, var(--black) 100%);
  position: relative;
  overflow: hidden;
}
.dismantle::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 79px, rgba(255,255,255,0.02) 79px 80px),
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(255,255,255,0.02) 79px 80px);
  pointer-events: none;
}

.dismantle-controls { display: flex; gap: 8px; }
.carousel-btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line-2);
  display: grid; place-items: center;
  transition: all 0.25s;
}
.carousel-btn:hover { background: var(--orange); border-color: var(--orange); transform: translateY(-2px); }
.carousel-btn svg { width: 16px; height: 16px; stroke: var(--text); }
.carousel-btn:hover svg { stroke: #fff; }

.dismantle-track-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  margin: 0 -48px;
  padding: 8px 48px 24px;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 48px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(232,82,10,0.5) rgba(255,255,255,0.05);
}
.dismantle-track-wrap::-webkit-scrollbar { height: 8px; }
.dismantle-track-wrap::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); border-radius: 4px; }
.dismantle-track-wrap::-webkit-scrollbar-thumb { background: rgba(232,82,10,0.5); border-radius: 4px; }
.dismantle-track-wrap::-webkit-scrollbar-thumb:hover { background: rgba(232,82,10,0.8); }
.dismantle-track {
  display: flex; gap: 24px;
  width: max-content;
  padding-right: 48px;
}
.dismantle-card { scroll-snap-align: start; cursor: pointer; }
.dismantle-card {
  flex: 0 0 380px;
  background: var(--black-2);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 0.3s, border-color 0.3s;
}
.dismantle-card:hover { border-color: rgba(232,82,10,0.4); transform: translateY(-4px); }
.dismantle-card-img {
  position: relative;
  aspect-ratio: 4/3;
  background-color: var(--black-3);
  background-size: cover;
  background-position: center;
  display: grid; place-items: center;
  overflow: hidden;
}
.dismantle-card-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 50%, rgba(10,10,10,0.85) 100%);
  pointer-events: none;
}
.dismantle-card-img .badge {
  position: absolute; top: 16px; left: 16px;
  padding: 6px 10px;
  background: var(--orange); color: #fff;
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.15em; text-transform: uppercase;
  border-radius: 4px;
}
.dismantle-card-img .stock {
  position: absolute; top: 16px; right: 16px;
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  color: var(--text-dim); letter-spacing: 0.15em;
}
.dismantle-card-img .placeholder-label {
  position: absolute; bottom: 16px; left: 16px;
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  color: var(--text-mute); letter-spacing: 0.1em;
}
.dismantle-card-content { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.dismantle-card h4 { font-family: 'Archivo Black', sans-serif; font-size: 22px; text-transform: uppercase; letter-spacing: 0.01em; }
.dismantle-card .submodel { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-mute); margin-top: 4px; letter-spacing: 0.1em; }
.parts-list { margin: 18px 0 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.parts-list span { font-size: 12px; color: var(--text-dim); display: flex; align-items: center; gap: 6px; }
.parts-list span::before { content: ""; width: 4px; height: 4px; background: var(--orange); border-radius: 50%; }
.dismantle-card-cta {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
  font-size: 12px; color: var(--text);
  font-weight: 600;
  transition: color 0.2s;
}
.dismantle-card-cta:hover { color: var(--orange); }
.dismantle-card-cta .wa-icon { width: 16px; height: 16px; fill: #25D366; }

.dismantle-foot {
  margin-top: 56px;
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 32px; border-top: 1px solid var(--line);
  flex-wrap: wrap; gap: 20px;
}
.dismantle-foot p { font-style: italic; color: var(--text-dim); max-width: 540px; }
.dismantle-foot p::before { content: "“ "; color: var(--orange); font-style: normal; }
.dismantle-foot p::after { content: " ”"; color: var(--orange); font-style: normal; }

/* ---------- GALLERY ---------- */
/* PROPUESTA · fondo Siluetas de motos en Vendidas */
#gallery {
  background:
    linear-gradient(rgba(12,12,12,0.74), rgba(12,12,12,0.84)),
    url('assets/fondos/siluetas.jpg') center / cover no-repeat,
    var(--black);
}
.gallery-grid {
  columns: 3; column-gap: 16px;
}
.gallery-item {
  break-inside: avoid; margin-bottom: 16px;
  border-radius: 16px; overflow: hidden;
  position: relative; cursor: pointer;
  border: 1px solid var(--line);
  transition: transform 0.3s, border-color 0.3s;
}
.gallery-item:hover { border-color: rgba(232,82,10,0.4); transform: translateY(-3px); box-shadow: 0 20px 50px -24px rgba(232,82,10,0.5); }
.gallery-photo {
  width: 100%;
  background-color: var(--black-3);
  background-size: cover;
  background-position: center;
  display: flex; align-items: flex-end;
  padding: 20px;
  position: relative;
  filter: contrast(1.05) saturate(0.9);
}
.gallery-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.85));
  pointer-events: none;
}
.gallery-photo .gallery-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(232,82,10,0.4), transparent 70%);
  opacity: 0; transition: opacity 0.3s;
}
.gallery-item:hover .gallery-overlay { opacity: 1; }
.gallery-info { position: relative; z-index: 2; width: 100%; }
.gallery-info .model { font-family: 'Archivo Black', sans-serif; font-size: 16px; text-transform: uppercase; }
.gallery-info .meta { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.gallery-info .meta .price { color: var(--orange); font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.1em; }
.gallery-info .meta .km { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-dim); letter-spacing: 0.1em; }
.gallery-info .placeholder-label { font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--text-mute); letter-spacing: 0.1em; margin-top: 8px; }

/* ---------- STATS ---------- */
.stats {
  background: var(--black);
  position: relative; overflow: hidden;
}
.stats::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(232,82,10,0.06), transparent 50%),
    var(--contour);   /* curvas de nivel / mapa — coherencia motera off-road */
  pointer-events: none;
}
.stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  position: relative; z-index: 1;
}
.stat {
  padding: 40px 0;
  border-top: 1px solid rgba(232,82,10,0.25);   /* borde naranja sutil */
  display: flex; flex-direction: column; gap: 12px;
}
.stat .num {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(56px, 7vw, 96px);
  line-height: 1; color: var(--text);
  display: flex; align-items: baseline; gap: 4px;
  text-shadow: 0 0 40px rgba(232,82,10,0.25);   /* glow naranja en los números */
}
.stat .num .suffix { color: var(--orange); font-size: 0.5em; }
.stat .num .prefix { color: var(--orange); font-size: 0.7em; }
.stat .label {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-dim);
}
.stat .desc { font-size: 13px; color: var(--text-mute); margin-top: 4px; }

/* ============================================================
   PROPUESTA · Stats B — tablero de gauges (velocímetros)
   Cada .stat pasa a card con un anillo SVG que se "dibuja" al revelarse.
   El número central lo sigue animando el contador de app.js.
   ============================================================ */
.stats-grid--gauges { gap: 22px; }
.stat--gauge {
  padding: 30px 16px 26px;
  border-top: 1px solid var(--line);      /* anula el borde naranja del ledger */
  background: linear-gradient(180deg, var(--black-2), var(--black-3));
  border: 1px solid var(--line);
  border-radius: 20px;
  align-items: center; text-align: center;
  gap: 16px;
}
.stat--gauge .gauge {
  position: relative;
  width: clamp(130px, 12vw, 168px);
  aspect-ratio: 1;
  margin: 0 auto;
}
.stat--gauge .gauge-svg {
  width: 100%; height: 100%;
  transform: rotate(-90deg);            /* el arco arranca arriba */
  overflow: visible;
}
.gauge-track { fill: none; stroke: var(--line-2); stroke-width: 6; }
.gauge-arc {
  fill: none; stroke: var(--orange); stroke-width: 6; stroke-linecap: round;
  --circ: 326.73;                        /* 2·π·52 */
  stroke-dasharray: var(--circ);
  stroke-dashoffset: var(--circ);        /* vacío por defecto */
  transition: stroke-dashoffset 1.3s cubic-bezier(.2, .8, .2, 1);
  filter: drop-shadow(0 0 8px rgba(232,82,10,0.55));
}
.stat--gauge.visible .gauge-arc {
  stroke-dashoffset: calc(var(--circ) * (1 - var(--sweep, .75)));
}
.stat--gauge .gauge-num {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 1px;
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(34px, 3.6vw, 48px);
  line-height: 1; color: var(--text);
  text-shadow: 0 0 30px rgba(232,82,10,0.30);
}
.stat--gauge .gauge-num .suffix {
  color: var(--orange); font-size: 0.5em;
  align-self: flex-start; margin-top: 0.45em;
}
.stat--gauge .label { margin-top: 2px; }
@media (prefers-reduced-motion: reduce) {
  .gauge-arc { transition: none; }
}

/* ---------- ABOUT ---------- */
.about { background: var(--black-2); position: relative; overflow: hidden; }
.about::before {
  content: ""; position: absolute; inset: 0;
  /* PROPUESTA · siluetas de motos (Proyectos) */
  background: url('assets/fondos/siluetas.jpg') center / cover no-repeat;
  opacity: 0.82; pointer-events: none;
}
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; position: relative; z-index: 1; }
.about-text h2 { font-size: clamp(36px, 4.5vw, 64px); }
.about-text h2 .accent { color: var(--orange); }
.about-text p { color: var(--text-dim); margin-top: 20px; font-size: 16px; line-height: 1.65; max-width: 480px; }
.about-text .signature {
  margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line);
  display: flex; gap: 32px;
}
.about-text .signature > div { display: flex; flex-direction: column; }
.about-text .signature .name { font-family: 'Archivo Black', sans-serif; font-size: 14px; text-transform: uppercase; color: var(--orange); }
.about-text .signature .role { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-mute); margin-top: 4px; letter-spacing: 0.1em; }

.about-image {
  position: relative; aspect-ratio: 4/5;
  border-radius: 20px;
  overflow: hidden;
  background-color: var(--black-3);
  border: 1px solid var(--line);
}
/* Capa interna de parallax: lleva la imagen y el filtro. inset negativo = colchón
   para que el translate3d(--par-y) nunca descubra el borde. El parallax escribe
   solo --par-y (lo gestiona el RAF único de scrollPolish). */
.about-image-bg {
  position: absolute; inset: -12% 0; z-index: 0;
  background: url('assets/team/equipo.jpg') center/cover, var(--black-3);
  filter: contrast(1.05) saturate(0.85);
  transform: translate3d(0, var(--par-y, 0), 0);
}
.about-image::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.55));
  pointer-events: none;
}
.about-image .corner {
  position: absolute; width: 24px; height: 24px; z-index: 2;
  border: 1px solid var(--orange);
}
.about-image .corner.tl { top: 16px; left: 16px; border-right: none; border-bottom: none; }
.about-image .corner.tr { top: 16px; right: 16px; border-left: none; border-bottom: none; }
.about-image .corner.bl { bottom: 16px; left: 16px; border-right: none; border-top: none; }
.about-image .corner.br { bottom: 16px; right: 16px; border-left: none; border-top: none; }

.about-stamp {
  position: absolute; top: -30px; right: -30px;
  width: 140px; height: 140px;
  background: var(--orange); border-radius: 50%;
  display: grid; place-items: center;
  font-family: 'Archivo Black', sans-serif; text-align: center;
  font-size: 11px; line-height: 1.2; text-transform: uppercase;
  color: var(--black); transform: rotate(-12deg);
}

/* ---------- CTA ---------- */
.cta-final {
  background: var(--orange);
  color: var(--black);
  padding: 120px 0;
  position: relative;
  overflow: hidden;
  border-top: 4px solid transparent;
  border-image: var(--m-tricolor) 1;   /* cierre de marca BMW M-Sport */
}
.cta-final::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(45deg, transparent 0 39px, rgba(0,0,0,0.06) 39px 40px);
  pointer-events: none;
}
/* Capa de parallax decorativa (gradiente CSS, cero coste de imagen): se cruza con
   el ::before estático para dar profundidad técnica al hacer scroll. */
.cta-parallax {
  position: absolute; inset: -20% 0; z-index: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(120deg, transparent 0 79px, rgba(0,0,0,0.05) 79px 81px);
  transform: translate3d(0, var(--par-y, 0), 0);
}
.cta-grid {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px;
  align-items: center; position: relative; z-index: 1;
}
.cta-final h2 { font-family: 'Archivo Black', sans-serif; font-size: clamp(48px, 6vw, 88px); text-transform: uppercase; line-height: 0.95; }
.cta-final h2 em { font-style: italic; font-weight: 400; }
.cta-final p { margin-top: 20px; font-size: 17px; max-width: 420px; opacity: 0.85; }
.cta-actions { display: flex; gap: 14px; margin-top: 40px; flex-wrap: wrap; }

.cta-contact {
  background: var(--black);
  color: var(--text);
  border-radius: 20px;
  padding: 32px;
}
.cta-contact h4 { font-family: 'Archivo Black', sans-serif; font-size: 14px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--orange); margin-bottom: 24px; }
.cta-contact .row { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); }
.cta-contact .row:first-of-type { border-top: none; padding-top: 0; }
.cta-contact .row svg { width: 18px; height: 18px; stroke: var(--orange); fill: none; flex-shrink: 0; }
.cta-contact .row .lbl { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-mute); letter-spacing: 0.15em; text-transform: uppercase; }
.cta-contact .row .val { font-size: 14px; margin-top: 2px; }
/* Encabezado de redes — invita a conocer la marca por sus redes */
.cta-socials-head {
  display: flex; align-items: baseline; gap: 10px;
  padding-top: 22px; border-top: 1px solid var(--line); margin-top: 18px;
}
.cta-socials-label {
  font-family: 'Archivo Black', sans-serif;
  font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text);
}
.cta-socials-handle {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; color: var(--orange); letter-spacing: 0.02em;
}
.cta-socials { display: flex; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.cta-socials a {
  width: 52px; height: 52px; border-radius: 16px;
  border: 1px solid var(--line-2);
  background: rgba(255,255,255,0.05);
  display: grid; place-items: center;
  transition: transform .25s cubic-bezier(0.2, 0.8, 0.2, 1), background .25s, border-color .25s, box-shadow .25s;
}
.cta-socials a:hover {
  background: var(--orange); border-color: var(--orange);
  transform: translateY(-3px);
  box-shadow: 0 12px 26px -10px rgba(232,82,10,0.7);
}
.cta-socials a svg { width: 24px; height: 24px; fill: var(--text); transition: fill .25s; }
.cta-socials a:hover svg { fill: #fff; }

/* ============================================================
   PROPUESTA · CTA v2 — Variante B (full-bleed cinematográfico)
   Foto a sangre completa + scrim oscuro, titular centrado, y franja
   de contacto (teléfono · email · taller · redes) al pie.
   ============================================================ */
.cta-final--v2 {
  background: var(--black);
  color: var(--text);
  padding: 0;
  border-image: none;
  border-top: 1px solid var(--line);
  min-height: 86svh;
  display: flex; align-items: stretch;
}
.cta-final--v2::before { display: none; }  /* fuera el rayado diagonal del CTA naranja */
.cta-final--v2 .cta-bg {
  position: absolute; inset: 0; z-index: 0;
  background: url('assets/motos/bmw-gs-lineup.jpg') center/cover no-repeat, var(--black-2);
  filter: contrast(1.06) saturate(0.9);
}
.cta-final--v2 .cta-parallax {
  inset: -20% 0; z-index: 1; opacity: 0.45;
  background-image: repeating-linear-gradient(120deg, transparent 0 79px, rgba(255,255,255,0.04) 79px 81px);
}
.cta-final--v2 .cta-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10,10,10,0.78) 0%, rgba(10,10,10,0.42) 38%, rgba(10,10,10,0.9) 100%),
    radial-gradient(ellipse 72% 60% at 50% 42%, transparent 0%, rgba(10,10,10,0.55) 100%);
}
.cta-final--v2 > .container {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: center;
  width: 100%;
  padding-top: 132px; padding-bottom: 44px;
}
.cta-final--v2 .cta-center {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 20px;
  max-width: 820px; margin: 0 auto;
}
.cta-final--v2 .cta-eyebrow {
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--orange);
}
.cta-final--v2 h2 {
  color: var(--text);
  text-shadow: 0 6px 44px rgba(0,0,0,0.65);
  margin: 0;
}
.cta-final--v2 h2 em { color: var(--orange); font-style: italic; font-weight: 400; }
.cta-final--v2 p {
  color: var(--text-dim); opacity: 1;
  font-size: 18px; max-width: 580px; margin: 0 auto;
}
.cta-final--v2 .cta-actions { justify-content: center; margin-top: 12px; }

/* Franja de contacto */
.cta-final--v2 .cta-strip {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  margin-top: 56px; padding-top: 28px;
  border-top: 1px solid var(--line);
  gap: 6px 0;
}
.cta-final--v2 .cta-strip-item {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 4px 30px; color: inherit; text-decoration: none;
  transition: color .25s;
}
.cta-final--v2 a.cta-strip-item:hover { color: var(--orange); }
.cta-final--v2 .cta-strip-item svg { width: 18px; height: 18px; stroke: var(--orange); fill: none; flex-shrink: 0; }
.cta-final--v2 .cta-strip-txt { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.cta-final--v2 .cta-strip-txt .lbl {
  font-family: 'JetBrains Mono', monospace; font-size: 9px;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-mute);
}
.cta-final--v2 .cta-strip-txt .val { font-size: 14px; color: var(--text); }
.cta-final--v2 a.cta-strip-item:hover .cta-strip-txt .val { color: var(--orange); }
.cta-final--v2 .cta-strip-sep { width: 1px; height: 36px; background: var(--line); flex-shrink: 0; }
.cta-final--v2 .cta-strip-socials { display: flex; gap: 10px; padding-left: 30px; }
.cta-final--v2 .cta-strip-socials a {
  width: 42px; height: 42px; border-radius: 12px;
  border: 1px solid var(--line-2); background: rgba(255,255,255,0.05);
  display: grid; place-items: center; transition: all .25s cubic-bezier(.2,.8,.2,1);
}
.cta-final--v2 .cta-strip-socials a svg { width: 20px; height: 20px; fill: var(--text); transition: fill .25s; }
.cta-final--v2 .cta-strip-socials a:hover { background: var(--orange); border-color: var(--orange); transform: translateY(-3px); }
.cta-final--v2 .cta-strip-socials a:hover svg { fill: #fff; }

@media (max-width: 640px) {
  /* .cta-final h2 no tenía NINGÚN override para móvil: clamp(48px, 6vw, 88px)
     nunca baja de 48px, y a 6 palabras largas ("¿BUSCAS UN REPUESTO O TU
     PRÓXIMA MOTO?") eso son seis líneas — la sección medía 1041px, más de
     una pantalla completa de teléfono solo para el titular. */
  .cta-final--v2 { min-height: 0; }
  .cta-final--v2 > .container { padding-top: 72px; padding-bottom: 32px; }
  .cta-final--v2 .cta-center { gap: 14px; }
  .cta-final--v2 h2 { font-size: clamp(30px, 9.5vw, 40px); line-height: 1.05; }
  .cta-final--v2 p { font-size: 15px; }
  .cta-final--v2 .cta-strip { margin-top: 36px; padding-top: 22px; }
}
@media (max-width: 860px) {
  .cta-final--v2 .cta-strip { flex-direction: column; gap: 20px; }
  .cta-final--v2 .cta-strip-sep { display: none; }
  .cta-final--v2 .cta-strip-socials { padding-left: 0; }
}

/* ---------- FOOTER ---------- */
.footer {
  /* PROPUESTA · fondo Ruta (base), muy sutil */
  background:
    linear-gradient(rgba(10,10,10,0.74), rgba(10,10,10,0.82)),
    url('assets/fondos/ruta.jpg') center / cover no-repeat,
    var(--black);
  padding: 80px 0 32px;
  border-top: 1px solid var(--line);
}
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--line);
}
.footer-brand .logo { margin-bottom: 20px; }
.footer-brand p { color: var(--text-dim); font-size: 13px; max-width: 320px; line-height: 1.6; }
.footer h5 { font-family: 'Archivo Black', sans-serif; font-size: 12px; text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 18px; }
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer ul a { color: var(--text-dim); font-size: 13px; transition: color 0.2s; }
.footer ul a:hover { color: var(--orange); }

.footer-bottom {
  margin-top: 32px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px;
}
.footer-bottom .tagline { color: var(--orange); font-style: italic; font-size: 14px; }
.footer-bottom .copyright { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-mute); letter-spacing: 0.1em; }

/* ============================================================
   PROPUESTA · Footer A — wordmark gigante
   Marca enorme a todo el ancho + tagline/ubicación, luego columnas.
   Reutiliza .footer h5 / .footer ul / .footer-bottom existentes.
   ============================================================ */
.footer--v2 { padding-top: 76px; }
.footer--v2 .footer-word {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 22px;
  padding-bottom: 38px; margin-bottom: 44px;
  border-bottom: 1px solid var(--line);
}
.footer--v2 .footer-word-mark {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(48px, 11.5vw, 156px);
  line-height: 0.86; letter-spacing: -0.03em;
  text-transform: uppercase; color: var(--text);
  text-decoration: none;
  transition: color .3s;
  text-shadow: 0 0 80px rgba(232,82,10,0.18);
}
.footer--v2 .footer-word-mark:hover { color: var(--orange); }
.footer--v2 .footer-word-side {
  display: flex; justify-content: space-between; align-items: flex-end;
  width: 100%; gap: 32px; flex-wrap: wrap;
}
.footer--v2 .footer-word-tag {
  color: var(--text-dim); font-size: 15px; line-height: 1.6; margin: 0;
  max-width: 560px;
}
.footer--v2 .footer-word-tag strong { color: var(--text); }
.footer--v2 .footer-loc {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-mute);
  white-space: nowrap;
}
.footer--v2 .footer-loc .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--orange);
  box-shadow: 0 0 8px var(--orange);
}
.footer--v2 .footer-cols {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
  padding-bottom: 40px; border-bottom: 1px solid var(--line);
}
@media (max-width: 720px) {
  .footer--v2 .footer-cols { grid-template-columns: 1fr 1fr; gap: 26px 20px; }
  /* A una sola columna los 15 enlaces medían más de 500px de alto: media
     pantalla de teléfono para el pie. En dos columnas caben de sobra — el
     enlace más largo ("Política de privacidad") parte en dos líneas y ya. */
  .footer--v2 .footer-word { gap: 14px; padding-bottom: 26px; margin-bottom: 30px; }
  .footer--v2 .footer-word-tag { font-size: 14px; line-height: 1.5; }
  .footer--v2 .footer-cols { padding-bottom: 28px; }
  .footer--v2 { padding-top: 52px; }
  /* Los enlaces medían 16px de alto: imposibles de acertar con el pulgar. Se
     les da cuerpo sin separar más las listas, quitando el gap del <ul> y
     pasándolo a padding del propio enlace, que es lo pulsable. */
  .footer ul { gap: 0; }
  .footer ul a { display: block; padding: 9px 0; font-size: 13.5px; }
}

/* ---------- FLOATING WHATSAPP ---------- */
/* El botón flotante va en el verde oficial de WhatsApp: se reconoce al instante
   y, al estar aislado sobre el fondo, no compite con el naranjo de la marca.
   Los botones "WhatsApp directo" del header y los CTA siguen naranjos con el
   glifo en blanco — verde sobre naranjo se ve sucio.
   Ojo: el naranjo estaba acoplado en TRES capas (fondo, box-shadow y los tres
   fotogramas de wa-pulse). Cambiar solo el fondo dejaba un halo naranjo
   latiendo alrededor de un botón verde. */
.wa-float {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--wa-verde); z-index: 90;
  display: grid; place-items: center;
  position: relative; flex-shrink: 0;
  box-shadow: 0 12px 40px -8px rgba(var(--wa-verde-rgb),0.6), 0 0 0 0 rgba(var(--wa-verde-rgb),0.5);
  animation: wa-pulse 2.5s infinite;
  transition: transform 0.25s;
  cursor: pointer; border: none;
}
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 32px; height: 32px; fill: #fff; }
.wa-float .badge {
  position: absolute; top: -2px; right: -2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; color: var(--wa-verde);
  display: grid; place-items: center;
  font-family: 'Archivo Black', sans-serif; font-size: 10px;
  border: 2px solid var(--wa-verde);
}
@keyframes wa-pulse {
  0% { box-shadow: 0 12px 40px -8px rgba(var(--wa-verde-rgb),0.6), 0 0 0 0 rgba(var(--wa-verde-rgb),0.5); }
  70% { box-shadow: 0 12px 40px -8px rgba(var(--wa-verde-rgb),0.6), 0 0 0 18px rgba(var(--wa-verde-rgb),0); }
  100% { box-shadow: 0 12px 40px -8px rgba(var(--wa-verde-rgb),0.6), 0 0 0 0 rgba(var(--wa-verde-rgb),0); }
}

/* ── WhatsApp popup wrapper ─────────────────────────────── */
.wa-wrap {
  position: fixed; bottom: 28px; right: 28px;
  z-index: 90;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}

/* Popup panel */
.wa-popup {
  background: var(--black-2, #161616);
  border: 1px solid var(--line, rgba(255,255,255,0.08));
  border-radius: 18px;
  padding: 14px 12px 10px;
  display: flex; flex-direction: column; gap: 6px;
  min-width: 210px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  /* hidden state */
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s cubic-bezier(0.2,1,0.4,1);
  transform-origin: bottom right;
}
.wa-popup.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.wa-popup-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute, #6B6864);
  padding: 0 6px 4px;
  border-bottom: 1px solid var(--line, rgba(255,255,255,0.08));
  margin-bottom: 2px;
}

/* Option buttons */
.wa-option {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px;
  border-radius: 11px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text, #F5F2EE);
  font-family: inherit; font-size: 14px; font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background .18s, border-color .18s, transform .15s;
}
.wa-option:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.12);
  transform: translateX(-2px);
}
.wa-option-icon { font-size: 18px; line-height: 1; flex-shrink: 0; }
.wa-option-text { font-size: 13.5px; line-height: 1.3; }

/* Close icon — hidden by default, shown when popup open */
.wa-float .wa-icon-close {
  width: 24px; height: 24px;
  position: absolute;
  opacity: 0; transform: rotate(-90deg) scale(0.4);
  transition: opacity .2s, transform .25s cubic-bezier(0.4,1.6,0.4,1);
  stroke: #fff;
}
.wa-float .wa-icon-wa {
  transition: opacity .2s, transform .25s cubic-bezier(0.4,1.6,0.4,1);
}
.wa-float.open .wa-icon-wa {
  opacity: 0; transform: rotate(90deg) scale(0.4);
}
.wa-float.open .wa-icon-close {
  opacity: 1; transform: rotate(0) scale(1);
}
/* Suppress pulse animation when popup is open */
.wa-float.open { animation: none; }

/* Light mode overrides */
@media (max-width: 480px) {
  .wa-wrap { bottom: 20px; right: 20px; }
  .wa-popup { min-width: 190px; }
}

/* Reveal on scroll — parametrizable via data-reveal-* (lógica en app.js).
   Variables con fallback: --rv-offset (24px), --rv-dur (.8s), --rv-delay (0s), --rv-scale (.92).
   La transición vive SOLO en nodos .reveal (acotado, hoy ~22), nunca permanente
   sobre todas las tarjetas — respeta la regla del truco theme-anim. Observer one-shot,
   por eso no se usa will-change permanente. */
.reveal {
  opacity: 0;
  transform: translateY(var(--rv-offset, 24px));
  transition: opacity var(--rv-dur, .8s) var(--rv-delay, 0s) cubic-bezier(0.2, 0.8, 0.2, 1),
              transform var(--rv-dur, .8s) var(--rv-delay, 0s) cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal[data-reveal-from="left"]  { transform: translateX(calc(-1 * var(--rv-offset, 32px))); }
.reveal[data-reveal-from="right"] { transform: translateX(var(--rv-offset, 32px)); }
.reveal[data-reveal-from="scale"] { transform: scale(var(--rv-scale, .92)); }
.reveal.visible { opacity: 1; transform: none; }

/* Hero entrance animations */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes heroFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes heroScale {
  from { opacity: 0; transform: scale(1.04); filter: blur(8px); }
  to { opacity: 1; transform: scale(1); filter: blur(0); }
}
.hero-bg { animation: heroScale 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.hero-top { animation: heroFadeUp 0.9s 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.hero-title .line-1 { animation: heroFadeUp 1s 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.hero-title .line-2 { animation: heroFadeUp 1s 0.65s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.hero-bottom { animation: heroFadeUp 1s 0.85s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.scroll-indicator { animation: heroFadeIn 1.2s 1.4s ease-out both; }

/* ---------- SECTION ENTRANCE ANIMATIONS (Enhanced) ---------- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-32px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(32px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes revealLine {
  from { transform: scaleX(0); transform-origin: left; opacity: 0; }
  to { transform: scaleX(1); opacity: 1; }
}
@keyframes glowPulse {
  0% { box-shadow: 0 0 0 0 rgba(232, 82, 10, 0.4); }
  70% { box-shadow: 0 0 0 12px rgba(232, 82, 10, 0); }
  100% { box-shadow: 0 0 0 0 rgba(232, 82, 10, 0); }
}

/* NOTA: la entrada de secciones (.section-head/.section-title/.section-intro) NO
   se anima con @keyframes on-load — eso disparaba al cargar la página en vez de
   al hacer scroll. La entrada la maneja la clase .reveal (scroll-triggered) que
   esos nodos ya llevan en el HTML. Los @keyframes fadeInUp/slideInLeft/slideInRight/
   scaleIn quedan definidos arriba para reutilizarse en otras unidades.
   .service-card no existe en el markup (la sección usa .service-hero/.service-mini);
   su bloque de estilos previo era código muerto y se eliminó. */

/* ---------- BRAND MARQUEE ---------- */
.brands {
  /* PROPUESTA · fondo Ruta (base), muy sutil */
  background:
    linear-gradient(rgba(11,10,9,0.68), rgba(11,10,9,0.80)),
    url('assets/fondos/ruta.jpg') center / cover no-repeat,
    linear-gradient(180deg, var(--black) 0%, #0c0a08 100%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 56px 0 64px;
  overflow: hidden;
  position: relative;
}
.brands-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 48px 28px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 36px;
  flex-wrap: wrap; gap: 16px;
}
.brands-head-left { display: flex; flex-direction: column; gap: 6px; }
.brands-head .label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.2em;
  color: var(--orange); text-transform: uppercase;
}
.brands-head .count {
  font-family: 'Archivo Black', sans-serif;
  font-size: 14px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text);
}
.brands-tools {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}

/* Search input */
.brands-search {
  position: relative;
  display: flex; align-items: center;
  background: var(--black-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 14px 0 14px;
  transition: border-color .2s, box-shadow .2s;
  min-width: 280px;
}
.brands-search:focus-within {
  border-color: rgba(232,82,10,0.6);
  box-shadow: 0 0 0 4px rgba(232,82,10,0.12);
}
.brands-search .search-icon {
  width: 16px; height: 16px; color: var(--text-mute); flex-shrink: 0;
}
.brands-search input {
  flex: 1;
  background: transparent; border: none; outline: none;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  padding: 12px 8px;
  min-width: 0;
  text-overflow: ellipsis;
}
.brands-search input::placeholder { color: var(--text-mute); }
.brands-search-clear {
  background: transparent; border: none; cursor: pointer;
  color: var(--text-mute);
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  transition: all .2s;
}
.brands-search-clear:hover { background: var(--line); color: var(--text); }
.brands-search-clear svg { width: 12px; height: 12px; }

/* Nav buttons */
.brands-nav { display: flex; gap: 8px; }
.brands-nav-btn {
  width: 44px; height: 44px;
  background: var(--black-2);
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  display: grid; place-items: center;
  color: var(--text);
  transition: all .25s;
}
.brands-nav-btn:hover {
  background: var(--orange); border-color: var(--orange); color: #fff;
  transform: scale(1.05);
}
.brands-nav-btn svg { width: 16px; height: 16px; }

/* Marquee track */
.brands-track-wrap {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  padding: 8px 0;
}
.brands-track {
  display: flex; gap: 20px;
  align-items: stretch;
  will-change: transform;
}

/* Brand card */
.brand-card {
  flex-shrink: 0;
  width: 220px;
  background: linear-gradient(180deg, #fafafa 0%, #ececec 100%);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s;
  position: relative;
  display: flex; flex-direction: column;
}
.brand-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.5),
              0 0 0 2px var(--brand-color, var(--orange));
}
.brand-card-strip {
  height: 4px;
  background: var(--brand-color, var(--orange));
}
.brand-card-logo {
  flex: 1;
  min-height: 110px;
  display: grid; place-items: center;
  padding: 18px 24px;
  background: #fff;
}
.brand-card-logo img {
  max-width: 100%; max-height: 70px;
  object-fit: contain;
  filter: contrast(1.05);
}
.brand-card-logo .text-logo {
  font-family: 'Archivo Black', sans-serif;
  font-size: 26px;
  text-transform: uppercase;
  color: var(--brand-color, #111);
  letter-spacing: -0.01em;
  text-align: center;
}
.brand-card-foot {
  background: #1a1a1a;
  padding: 12px 16px 14px;
  display: flex; flex-direction: column; gap: 4px;
  border-top: 2px solid var(--brand-color, var(--orange));
}
.brand-card-foot .name {
  font-family: 'Archivo Black', sans-serif;
  font-size: 13px; letter-spacing: 0.06em;
  text-transform: uppercase; color: #fff;
}
.brand-card-foot .tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.12em;
  color: var(--text-mute); text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Search-mode grid */
.brands-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  padding: 0 48px;
}
.brands-grid[hidden],
.brands-track-wrap[hidden],
.brands-empty[hidden] { display: none !important; }
.brands-grid .brand-card { width: 100%; }
.brands-grid .brand-card.hidden { display: none; }
.brands-empty {
  text-align: center;
  padding: 32px 48px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; letter-spacing: 0.12em;
  color: var(--text-mute); text-transform: uppercase;
}
.brands-empty span { color: var(--orange); }

@media (max-width: 1100px) {
  .brands-grid { grid-template-columns: repeat(3, 1fr); }
  .brands-search { min-width: 220px; }
}
@media (max-width: 720px) {
  .brands-grid { grid-template-columns: repeat(2, 1fr); }
  .brands-tools { width: 100%; }
  .brands-search { flex: 1; min-width: 0; }
  /* Menos aire vertical: en móvil la única tarjeta visible del carrusel quedaba
     flotando con mucho vacío arriba (bajo el buscador) y abajo (antes de stats). */
  .brands { padding: 32px 0 36px; }
  .brands-head { padding: 0 20px 20px; margin-bottom: 22px; }
}


/* Responsive */
@media (max-width: 1024px) {
  .container { padding: 0 32px; }
  .header { padding: 16px 32px; }
  .header.scrolled { padding: 10px 32px; }
  .hero-grid { grid-template-columns: 1fr; gap: 60px; }
  .hero-stage { max-width: 500px; margin: 0 auto; }
  .services-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid { columns: 2; }
  .about-grid { grid-template-columns: 1fr; gap: 60px; }
  .cta-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .lightbox-content { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .nav { display: none; }
}
@media (max-width: 640px) {
  .container { padding: 0 20px; }
  .header { padding: 14px 20px; }
  /* En teléfono el CTA de WhatsApp del header se desborda; el contacto
     queda cubierto por el botón flotante y el menú hamburguesa. */
  .header-actions .btn-orange { display: none; }
  /* El lockup 4:1 compite con la hamburguesa (46px) por el ancho disponible.
     A 32px de alto mide 128px y deja aire de sobra. */
  .logo-img, .header.scrolled .logo-img { height: 32px; }
  /* Ritmo vertical MÓVIL: el sitio está tuneado para desktop (140px por sección,
     64px bajo cada título) y en el celular eso genera huecos negros enormes que
     se ven "vacíos/aburridos". Se compacta sin tocar el desktop. */
  .section { padding: 56px 0; }
  .section-head { flex-direction: column; align-items: flex-start; margin-bottom: 28px; }
  .section-head-left { width: 100%; max-width: 100%; min-width: 0; }
  /* Título más chico y proporcionado al viewport: a 40px la palabra larga se
     partía con guion ("HACE-MOS"); ahora entra y quiebra por espacios. */
  .section-title, .section-head-left .display {
    font-size: clamp(27px, 8vw, 44px);
    overflow-wrap: break-word; word-break: normal; hyphens: manual;
  }
  .section-tag { font-size: 11px; }
  .section-intro { max-width: 100%; font-size: 14.5px; margin-top: 14px; }
  .stats-grid { grid-template-columns: 1fr; }
  /* Gauges: 2×2 compacto en vez de 4 gigantes apilados (uno por pantalla = vacío
     y aburrido). Anillo más chico, sin la descripción larga; el número + label
     ya cuentan la cifra. */
  .stats-grid--gauges { grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
  .stat--gauge { padding: 20px 8px 18px; gap: 10px; }
  .stat--gauge .gauge { width: 108px; }
  .stat--gauge .gauge-num { font-size: 30px; }
  .stat--gauge .label { font-size: 11px; }
  .stat--gauge .desc { display: none; }
  .gallery-grid { columns: 1; }
  /* Las fotos de galería llevan alturas variadas por JS (260–400px) para el
     masonry de 3 columnas del desktop; en móvil (1 columna) eso hace tarjetas
     muy verticales y mucho scroll. Se acotan a un alto tipo paisaje. */
  .gallery-photo { height: 240px !important; }
  .footer-grid { grid-template-columns: 1fr; }
  .dismantle-card { flex: 0 0 85%; }
  .wa-float { width: 56px; height: 56px; }
  .wa-wrap { bottom: 20px; right: 20px; }
}

/* ── Optimización de animaciones en móvil (Unidad 3) ──────────────────────────
   Viewport chico = menos distancia de scroll: la animación debe completar antes
   de la interacción. Se reduce TIEMPO y CARGA (capas de compositing infinitas),
   nunca la identidad visual (#E8520A, foto, glow estático se mantienen). Solo se
   reescriben duraciones/delays de selectores existentes — cero keyframes nuevos.
   Punto único de ajuste documentado: --anim-scale (ver :root). */
@media (max-width: 640px) {
  /* Cascada del hero más corta (~2.6s → ~1.5s) sin perder el ritmo cinemático */
  .hero-bg { animation-duration: 1.1s; }
  .hero-top { animation: heroFadeUp 0.6s 0.12s cubic-bezier(0.2,0.8,0.2,1) both; }
  .hero-title .line-1 { animation: heroFadeUp 0.65s 0.25s cubic-bezier(0.2,0.8,0.2,1) both; }
  .hero-title .line-2 { animation: heroFadeUp 0.65s 0.4s cubic-bezier(0.2,0.8,0.2,1) both; }
  .hero-bottom { animation: heroFadeUp 0.65s 0.55s cubic-bezier(0.2,0.8,0.2,1) both; }
  .scroll-indicator { animation: heroFadeIn 0.7s 0.85s ease-out both; }

  /* Pausar capas de compositing infinitas que aportan poco en pantalla chica y
     compiten por GPU durante el scroll. Se conservan la foto del hero, su glow
     estático y el bob del scroll-indicator (affordance útil y barata). */
  .bike-disc.d2, .bike-disc.d3 { animation: none; }
  .dust, .dust.s2, .dust.s3 { animation: none; }

  /* Reveals más reactivos al scroll táctil (más cortos, menos desplazamiento) */
  .reveal { --rv-dur: 0.5s; --rv-offset: 16px; }

  /* Abaratar zooms de imagen: quitar la transición de filter (CPU), dejar transform */
  .gallery-photo { transition: transform 0.4s cubic-bezier(0.2,0.8,0.2,1); }
  .dismantle-card-img { transition: transform 0.5s cubic-bezier(0.2,0.8,0.2,1); }
}

/* ---------- MODEL DETAIL OVERLAY ---------- */
.model-detail {
  position: fixed; inset: 0; z-index: 1200;
  background: var(--black);
  overflow-y: auto;
  display: none;
  scroll-behavior: smooth;
}
.model-detail.active { display: block; animation: mdFadeIn .35s ease both; }
@keyframes mdFadeIn { from { opacity: 0; } to { opacity: 1; } }

.md-close {
  position: fixed; top: 22px; right: 22px; z-index: 1010;
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(10,10,10,0.78);
  backdrop-filter: blur(10px);
  display: grid; place-items: center;
  cursor: pointer; color: var(--text);
  transition: all .25s;
}
.md-close:hover { background: var(--orange); color: #fff; border-color: var(--orange); transform: rotate(90deg); }

.md-back {
  position: fixed; top: 22px; left: 22px; z-index: 1010;
  padding: 10px 18px; border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(10,10,10,0.78);
  backdrop-filter: blur(10px);
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--text); cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: all .25s;
}
.md-back:hover { color: var(--orange); border-color: rgba(232,82,10,0.5); }

/* Hero */
.md-hero {
  position: relative;
  min-height: 92vh;
  background-size: cover; background-position: center;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 80px 48px 56px;
  isolation: isolate;
}
.md-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0) 30%, rgba(10,10,10,0.2) 60%, rgba(10,10,10,0.95) 100%);
}
.md-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse at 20% 100%, rgba(232,82,10,0.18), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 80px);
  mix-blend-mode: screen;
}
.md-hero-inner { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; width: 100%; }
.md-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.2em; color: var(--orange);
  text-transform: uppercase; margin-bottom: 18px;
}
.md-eyebrow .pulse {
  width: 8px; height: 8px; border-radius: 50%; background: var(--orange);
  box-shadow: 0 0 0 0 rgba(232,82,10,0.7);
  animation: mdPulse 1.6s ease-out infinite;
}
@keyframes mdPulse {
  0% { box-shadow: 0 0 0 0 rgba(232,82,10,0.7); }
  100% { box-shadow: 0 0 0 14px rgba(232,82,10,0); }
}
.md-title {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(48px, 8vw, 124px);
  line-height: 0.92;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin: 0 0 22px;
  color: #fff;
}
.md-title em { font-style: italic; color: var(--orange); font-family: 'Archivo Black', sans-serif; }
.md-tagline {
  max-width: 620px;
  font-size: 18px; line-height: 1.55; color: var(--text-dim);
  margin-bottom: 36px;
}
.md-hero-meta {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
}
.md-hero-meta > div { padding: 0 18px; border-right: 1px solid var(--line); }
.md-hero-meta > div:last-child { border-right: none; }
.md-hero-meta .lbl {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.2em; color: var(--text-mute);
  text-transform: uppercase; margin-bottom: 6px;
}
.md-hero-meta .val {
  font-family: 'Archivo Black', sans-serif; font-size: 22px;
  color: #fff; text-transform: uppercase;
}
.md-hero-meta .val.accent { color: var(--orange); }

/* Story */
.md-story { padding: 96px 48px; max-width: 1280px; margin: 0 auto; }
.md-story-grid {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px;
  align-items: center;
}
.md-story h2 {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(36px, 4.5vw, 64px);
  line-height: 1.02; text-transform: uppercase;
  margin: 0 0 28px;
}
.md-story h2 .accent { color: var(--orange); font-style: italic; }
.md-story p { color: var(--text-dim); font-size: 16.5px; line-height: 1.75; margin: 0 0 18px; }
.md-story p strong { color: var(--text); }
.md-story-img {
  position: relative;
  aspect-ratio: 4/5;
  background-size: cover; background-position: center;
  border-radius: 6px;
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.md-story-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.5) 100%);
}
.md-story-stamp {
  position: absolute; bottom: 18px; left: 18px;
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.2em; color: #fff; z-index: 2;
  text-transform: uppercase;
}
.md-story-stamp::before { content: "↳ "; color: var(--orange); }

/* Walkthrough */
.md-walk {
  background: var(--black-2);
  padding: 96px 48px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.md-walk-inner { max-width: 1280px; margin: 0 auto; }
.md-walk-head { margin-bottom: 56px; max-width: 720px; }
.md-walk-head .tag {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.2em; color: var(--orange);
  text-transform: uppercase; margin-bottom: 14px; display: block;
}
.md-walk-head h3 {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(30px, 3.5vw, 48px);
  line-height: 1.05; text-transform: uppercase;
  margin: 0 0 14px;
}
.md-walk-head p { color: var(--text-dim); font-size: 15.5px; line-height: 1.7; }

.md-walk-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}
.md-walk-tile {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  background-size: cover; background-position: center;
  border: 1px solid var(--line);
  min-height: 320px;
  isolation: isolate;
  transition: transform .4s ease, border-color .3s;
}
.md-walk-tile:hover { transform: translateY(-4px); border-color: rgba(232,82,10,0.45); }
.md-walk-tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.85) 100%);
}
.md-walk-tile .cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 2; padding: 22px 24px;
  color: #fff;
}
.md-walk-tile .cap .num {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.25em; color: var(--orange);
  text-transform: uppercase; display: block; margin-bottom: 6px;
}
.md-walk-tile .cap .ttl {
  font-family: 'Archivo Black', sans-serif; font-size: 19px;
  text-transform: uppercase; letter-spacing: 0.01em;
  margin-bottom: 6px;
}
.md-walk-tile .cap .desc {
  font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.8);
  max-width: 360px;
}
.md-walk-tile.t-1 { grid-column: span 7; min-height: 440px; }
.md-walk-tile.t-2 { grid-column: span 5; min-height: 440px; }
.md-walk-tile.t-3 { grid-column: span 5; }
.md-walk-tile.t-4 { grid-column: span 4; }
.md-walk-tile.t-5 { grid-column: span 3; }

/* Specs + CTA */
.md-end { padding: 96px 48px; max-width: 1280px; margin: 0 auto; }
.md-end-grid {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px;
  align-items: start;
}
.md-specs h3 {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(28px, 3vw, 40px);
  text-transform: uppercase; margin: 0 0 28px;
}
.md-specs h3 .accent { color: var(--orange); font-style: italic; }
.md-specs-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.md-specs-list .row {
  padding: 18px 4px;
  border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px;
}
.md-specs-list .row .k {
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: 0.2em; color: var(--text-mute);
  text-transform: uppercase;
}
.md-specs-list .row .v {
  font-family: 'Archivo Black', sans-serif; font-size: 17px;
  color: var(--text); text-transform: uppercase;
}
.md-cta-card {
  background: linear-gradient(160deg, rgba(232,82,10,0.18), rgba(232,82,10,0.02));
  border: 1px solid rgba(232,82,10,0.35);
  border-radius: 6px;
  padding: 36px;
  position: relative;
  overflow: hidden;
}
.md-cta-card::before {
  content: ""; position: absolute; right: -40px; top: -40px;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(232,82,10,0.35), transparent 70%);
}
.md-stock-note {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--orange);
  border: 1px solid color-mix(in srgb, var(--orange) 45%, transparent);
  background: color-mix(in srgb, var(--orange) 12%, transparent);
  padding: 5px 12px; border-radius: 999px;
  margin: 0 0 14px;
}
.md-cta-card h4 {
  font-family: 'Archivo Black', sans-serif;
  font-size: 28px; text-transform: uppercase;
  margin: 0 0 12px; line-height: 1.05; position: relative;
}
.md-cta-card p { color: var(--text-dim); margin: 0 0 24px; line-height: 1.6; position: relative; }
.md-cta-card .actions { display: flex; flex-direction: column; gap: 10px; position: relative; }
.md-cta-card .actions .btn { justify-content: center; }

@media (max-width: 960px) {
  .md-hero { padding: 90px 22px 40px; min-height: 80vh; }
  .md-hero-meta { grid-template-columns: repeat(2, 1fr); }
  .md-hero-meta > div { padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .md-hero-meta > div:nth-child(2) { border-right: none; }
  .md-hero-meta > div:nth-child(3), .md-hero-meta > div:nth-child(4) { border-bottom: none; }
  .md-story, .md-walk, .md-end { padding: 64px 22px; }
  .md-story-grid, .md-end-grid { grid-template-columns: 1fr; gap: 36px; }
  .md-story-img { aspect-ratio: 4/3; }
  .md-walk-grid { grid-template-columns: 1fr; }
  .md-walk-tile, .md-walk-tile.t-1, .md-walk-tile.t-2, .md-walk-tile.t-3, .md-walk-tile.t-4, .md-walk-tile.t-5 {
    grid-column: 1 / -1; min-height: 280px;
  }
  .md-specs-list { grid-template-columns: 1fr; }
}

/* ---------- DISMANTLE: brand tag on cards ---------- */
.dismantle-card .brand-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 6px; display: block;
}

/* ---------- GALLERY: brand sections ---------- */
.gallery-grid { columns: unset; column-gap: unset; display: flex; flex-direction: column; gap: 56px; }
.gallery-brand { display: block; }
.gallery-brand-head {
  display: flex; align-items: center; gap: 24px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.gallery-brand-head .gbh-line {
  width: 64px; height: 4px; flex-shrink: 0;
  background: var(--brand-color);
  box-shadow: 0 0 16px color-mix(in srgb, var(--brand-color) 60%, transparent);
}
.gallery-brand-head .gbh-info { display: flex; flex-direction: column; gap: 4px; }
.gallery-brand-head .gbh-name {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(28px, 3.2vw, 44px);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: #fff;
  line-height: 1;
}
.gallery-brand-head .gbh-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-mute);
}
.gallery-brand-head .gbh-slogan {
  font-style: italic; font-size: 14px;
  color: var(--text-dim);
  margin-top: 2px;
}
.gallery-brand-grid { columns: 3; column-gap: 16px; }
.gallery-brand-grid .gallery-item { break-inside: avoid; margin-bottom: 16px; }

.gallery-rank {
  position: absolute; top: 14px; left: 14px; z-index: 3;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.2em;
  color: #fff;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.15);
  padding: 5px 9px; border-radius: 999px;
}
.gallery-brandtag {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: #fff;
  padding: 5px 10px; border-radius: 4px;
  font-weight: 600;
}

/* ---------- MODEL DETAIL: brand strip + features list ---------- */
.md-brand-strip {
  position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 3;
}
.md-features {
  list-style: none; padding: 0; margin: 24px 0 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px;
}
.md-features li {
  position: relative;
  padding-left: 22px;
  font-size: 14px; line-height: 1.5;
  color: var(--text-dim);
}
.md-features li::before {
  content: ""; position: absolute;
  left: 0; top: 9px;
  width: 8px; height: 2px;
  background: var(--orange);
}

@media (max-width: 1024px) {
  .gallery-brand-grid { columns: 2; }
}
@media (max-width: 720px) {
  /* Se mantienen 2 columnas también aquí: a 1 columna, una marca con 6+ motos
     vendidas quedaba en fotos de hasta 400px de alto apiladas una tras otra. */
  .gallery-brand-grid { columns: 2; column-gap: 10px; }
  .gallery-brand-grid .gallery-item { margin-bottom: 10px; }
  .gallery-brand-head { gap: 16px; }
  .gallery-brand-head .gbh-line { width: 36px; height: 3px; }
  .md-features { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  /* Las alturas de foto (260-400px, asignadas por JS para el masonry) fueron
     pensadas para columnas de ~250px+; a menos de 480px cada columna mide
     ~170px y esas alturas se ven desproporcionadamente altas y angostas. */
  .gallery-brand-grid .gallery-photo { height: 190px !important; padding: 12px; }
  .gallery-info .model { font-size: 13px; }
  .gallery-info .meta .price, .gallery-info .meta .km { font-size: 10px; }
  .gallery-brandtag { top: 10px; right: 10px; font-size: 9px; }
}

/* ---------- BRAND DETAIL OVERLAY ---------- */
.brand-detail {
  position: fixed; inset: 0; z-index: 1100;
  background: var(--black);
  overflow-y: auto;
  display: none;
}
.brand-detail.active { display: block; animation: mdFadeIn .35s ease both; }

.bd-hero {
  position: relative;
  padding: 100px 48px 56px;
  background:
    linear-gradient(180deg, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.85) 100%),
    radial-gradient(circle at 80% 0%, color-mix(in srgb, var(--brand-color) 25%, transparent) 0%, transparent 50%);
  border-bottom: 1px solid var(--line);
}
.bd-hero-strip {
  position: absolute; left: 0; right: 0; top: 0; height: 4px;
  background: var(--brand-color);
}
.bd-hero-inner {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 280px 1fr; gap: 48px;
  align-items: center;
}
.bd-hero-logo {
  background: #fff;
  border-radius: 18px;
  padding: 32px;
  display: grid; place-items: center;
  aspect-ratio: 1 / 1;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.08);
}
.bd-hero-logo img { max-width: 100%; max-height: 70%; object-fit: contain; }
.bd-text-logo {
  font-family: 'Archivo Black', sans-serif;
  font-size: 36px;
  text-transform: uppercase;
  color: var(--brand-color, #111);
  text-align: center;
}
.bd-hero-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.22em;
  color: var(--brand-color); text-transform: uppercase;
  margin-bottom: 14px; display: block;
}
.bd-hero-title {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(48px, 6vw, 88px);
  text-transform: uppercase;
  line-height: 0.95;
  margin: 0 0 14px;
  color: #fff;
}
.bd-hero-slogan {
  font-style: italic;
  font-size: 18px;
  color: var(--text-dim);
  margin: 0 0 28px;
}
.bd-hero-meta {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
}
.bd-hero-meta > div { padding: 0 18px; border-right: 1px solid var(--line); }
.bd-hero-meta > div:first-child { padding-left: 0; }
.bd-hero-meta > div:last-child { border-right: none; }
.bd-hero-meta .lbl {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.2em;
  color: var(--text-mute); text-transform: uppercase;
  margin-bottom: 6px;
}
.bd-hero-meta .val {
  font-family: 'Archivo Black', sans-serif;
  font-size: 22px; color: #fff;
  text-transform: uppercase;
}
.bd-hero-meta .val.accent { color: var(--orange); }

/* Tools (search + intro) */
.bd-tools {
  max-width: 1280px; margin: 0 auto;
  padding: 32px 48px 24px;
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 32px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.bd-search {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  background: var(--black-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 18px;
  transition: border-color .25s, box-shadow .25s;
}
.bd-search:focus-within {
  border-color: rgba(232,82,10,0.55);
  box-shadow: 0 0 0 4px rgba(232,82,10,0.12);
}
.bd-search .search-icon { width: 16px; height: 16px; color: var(--text-mute); flex-shrink: 0; }
.bd-search input {
  flex: 1;
  background: transparent; border: none; outline: none;
  color: var(--text);
  font-size: 14px;
  padding: 14px 0;
}
.bd-search input::placeholder { color: var(--text-mute); }
.bd-tools-info { color: var(--text-dim); font-size: 14px; line-height: 1.6; }

/* Layout: sidebar + main grid */
.bd-layout {
  max-width: 1280px; margin: 0 auto;
  padding: 36px 48px 96px;
  display: grid; grid-template-columns: 240px 1fr;
  gap: 32px;
  align-items: start;
}
.bd-sidebar {
  position: sticky; top: 28px;
  background: var(--black-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  max-height: calc(100vh - 56px);
  display: flex; flex-direction: column;
}
.bd-sidebar-head {
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
}
.bd-sidebar-head .lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.18em;
  color: var(--text-mute); text-transform: uppercase;
}
.bd-sidebar-head .cnt {
  font-family: 'Archivo Black', sans-serif;
  font-size: 14px; color: var(--orange);
}
.bd-side-list {
  flex: 1; overflow-y: auto;
  padding: 8px;
  scrollbar-width: thin;
}
.bd-side-list::-webkit-scrollbar { width: 6px; }
.bd-side-list::-webkit-scrollbar-thumb { background: rgba(232,82,10,0.4); border-radius: 3px; }
.bd-side-item {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 12px;
  background: transparent; border: none;
  cursor: pointer;
  border-radius: 10px;
  text-align: left;
  color: var(--text-dim);
  font-family: inherit; font-size: 13px;
  transition: all .2s;
}
.bd-side-item:hover { background: rgba(255,255,255,0.04); color: var(--text); }
.bd-side-item.active { background: rgba(232,82,10,0.12); color: var(--orange); }
.bd-side-item svg { margin-left: auto; color: var(--text-mute); transition: transform .2s, color .2s; }
.bd-side-item:hover svg { color: var(--orange); transform: translateX(2px); }
.bd-side-rank {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.1em;
  color: var(--orange);
  background: rgba(232,82,10,0.12);
  padding: 3px 6px; border-radius: 4px;
  flex-shrink: 0;
}
.bd-side-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-side-empty {
  padding: 24px 18px;
  font-size: 12px; color: var(--text-mute);
  text-align: center; line-height: 1.5;
}

/* Main */
.bd-main-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--brand-color, var(--orange));
  margin-bottom: 24px;
}
.bd-main-title {
  font-family: 'Archivo Black', sans-serif;
  font-size: 24px; text-transform: uppercase;
  color: var(--brand-color, var(--orange));
  margin: 0;
  letter-spacing: 0.02em;
}
.bd-main-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.18em;
  color: var(--text-mute); text-transform: uppercase;
}

.bd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}
.bd-grid-card {
  background: var(--black-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: all .3s;
  display: flex; flex-direction: column;
}
.bd-grid-card:hover {
  transform: translateY(-4px);
  border-color: rgba(232,82,10,0.45);
  box-shadow: 0 18px 40px -16px rgba(232,82,10,0.3);
}
.bd-grid-img {
  aspect-ratio: 4/3;
  background-color: #f4f4f4;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--line);
  filter: contrast(1.05);
}
.bd-grid-info { padding: 14px 16px 16px; }
.bd-grid-cat {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 0.18em;
  color: var(--text-mute); text-transform: uppercase;
  margin-bottom: 6px;
}
.bd-grid-name {
  font-family: 'Archivo Black', sans-serif;
  font-size: 15px;
  text-transform: uppercase;
  margin: 0 0 10px;
  color: #fff;
  line-height: 1.15;
}
.bd-grid-specs {
  display: flex; gap: 10px; flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.1em;
  color: var(--text-dim);
}
.bd-grid-specs span {
  padding: 3px 8px;
  background: rgba(255,255,255,0.04);
  border-radius: 4px;
}
.bd-grid-empty {
  text-align: center; padding: 64px 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; letter-spacing: 0.1em;
  color: var(--text-mute); text-transform: uppercase;
}
.bd-empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 80px 32px;
  background: var(--black-2);
  border: 1px dashed var(--line);
  border-radius: 18px;
}
.bd-empty-state h4 {
  font-family: 'Archivo Black', sans-serif;
  font-size: 24px; text-transform: uppercase;
  margin: 0 0 14px;
}
.bd-empty-state p {
  color: var(--text-dim);
  max-width: 500px; margin: 0 auto 24px;
  line-height: 1.6;
}

@media (max-width: 1024px) {
  .bd-hero-inner { grid-template-columns: 200px 1fr; gap: 28px; }
  .bd-hero-meta { grid-template-columns: repeat(2, 1fr); }
  .bd-hero-meta > div { padding: 12px 14px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); }
  .bd-hero-meta > div:nth-child(2n) { border-right: none; }
  .bd-tools { grid-template-columns: 1fr; gap: 18px; }
  .bd-layout { grid-template-columns: 1fr; }
  .bd-sidebar { position: static; max-height: none; }
  .bd-side-list { max-height: 280px; }
}
@media (max-width: 720px) {
  .bd-hero { padding: 90px 22px 36px; }
  .bd-tools, .bd-layout { padding-left: 22px; padding-right: 22px; }
  .bd-hero-inner { grid-template-columns: 1fr; }
  .bd-hero-logo { max-width: 200px; aspect-ratio: 1; }
}

/* ---------- HAMBURGER BUTTON ---------- */
/* Píldora "≡ MENÚ" en naranja de marca. Va tintada (no rellena) para no competir
   con el botón sólido de WhatsApp, que sigue visible entre 641 y 860px. */
.hamburger {
  display: none;
  flex-direction: row; align-items: center; gap: 10px;
  height: 46px; padding: 0 17px 0 14px;
  border-radius: 999px;
  background: rgba(232,82,10,0.16);
  border: 1.5px solid rgba(232,82,10,0.55);
  box-shadow: 0 0 0 4px rgba(232,82,10,0.07);
  cursor: pointer; z-index: 101; flex-shrink: 0;
  transition: background .25s, border-color .25s, box-shadow .25s;
}
.hamburger:hover,
.hamburger:focus-visible {
  background: rgba(232,82,10,0.30);
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(232,82,10,0.14);
}
.hamburger-bars {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; width: 18px;
}
.hamburger-bars span {
  display: block; width: 100%; height: 2px; border-radius: 1px;
  background: var(--orange);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s, width .25s;
}
.hamburger-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; line-height: 1;
  color: var(--orange);
}
.hamburger.open .hamburger-bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open .hamburger-bars span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open .hamburger-bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 860px) { .hamburger { display: flex; } }
/* En pantallas muy angostas (≤360px) el lockup del logo + la píldora se aprietan:
   se recorta el aire, nunca la palabra. */
@media (max-width: 360px) {
  .hamburger { gap: 8px; padding: 0 13px 0 11px; }
  .hamburger-label { font-size: 11px; letter-spacing: 0.12em; }
}

/* ---------- MOBILE MENU OVERLAY ---------- */
.mobile-menu {
  position: fixed; inset: 0; z-index: 150;
  background: transparent;
  display: flex; flex-direction: column;
  padding: 96px 40px 48px;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .3s cubic-bezier(.2,.8,.2,1), transform .3s cubic-bezier(.2,.8,.2,1), visibility 0s linear .3s;
}
.mobile-menu.open {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
  background: rgba(8,8,8,0.97);
  backdrop-filter: blur(32px) saturate(140%);
  -webkit-backdrop-filter: blur(32px) saturate(140%);
  transition: opacity .3s cubic-bezier(.2,.8,.2,1), transform .3s cubic-bezier(.2,.8,.2,1), visibility 0s linear 0s;
}
.mobile-menu::before {
  content: ""; position: absolute; right: -80px; top: -80px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(232,82,10,0.12), transparent 60%);
  pointer-events: none;
}
.mobile-menu-close {
  position: absolute; top: 22px; right: 22px;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,0.06); border: 1px solid var(--line);
  display: grid; place-items: center;
  cursor: pointer; color: var(--text);
  transition: all .25s;
}
.mobile-menu-close:hover { background: var(--orange); border-color: var(--orange); transform: rotate(90deg); }
.mobile-nav {
  display: flex; flex-direction: column; gap: 0;
  flex: 1; justify-content: center;
}
.mobile-nav-link {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(28px, 7vw, 52px);
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  transition: color .2s, padding-left .2s;
  line-height: 1;
  letter-spacing: -0.01em;
}
.mobile-nav-link::after {
  content: "→";
  font-size: 0.45em; color: var(--orange);
  opacity: 0; transform: translateX(-8px);
  transition: opacity .2s, transform .2s;
}
.mobile-nav-link:hover { color: var(--text); padding-left: 10px; }
.mobile-nav-link:hover::after { opacity: 1; transform: translateX(0); }
.mobile-nav-link:first-child { border-top: 1px solid var(--line); }
/* La sección en la que estás, marcada igual que en el nav de escritorio: sin
   esto el menú móvil no daba ninguna pista de ubicación. */
.mobile-nav-link.active { color: var(--text); }
.mobile-nav-link.active::after { opacity: 1; transform: translateX(0); }
.mobile-menu-footer {
  display: flex; flex-direction: column; gap: 14px;
  padding-top: 32px; margin-top: 24px;
  border-top: 1px solid var(--line);
}

/* ---------- HERO CTA-RAIL ENTRANCE ---------- */
.hero-cta-rail { animation: heroFadeUp 1s 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) both; }

/* ---------- GALLERY FILTER BAR ---------- */
.gallery-filter {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-bottom: 40px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}
.gf-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--black-2);
  border: 1px solid var(--line);
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; font-weight: 500;
  cursor: pointer;
  transition: all .25s cubic-bezier(.2,.8,.2,1);
}
.gf-btn::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand-color, rgba(255,255,255,0.2));
  flex-shrink: 0;
  transition: box-shadow .25s;
}
.gf-btn[data-brand="all"]::before { background: var(--orange); }
.gf-btn:hover {
  color: var(--text);
  border-color: rgba(232,82,10,0.35);
  background: rgba(232,82,10,0.06);
  transform: translateY(-1px);
}
.gf-btn.active {
  background: rgba(232,82,10,0.12);
  border-color: rgba(232,82,10,0.55);
  color: var(--text);
  box-shadow: 0 0 0 1px rgba(232,82,10,0.2);
}
.gf-btn.active::before { box-shadow: 0 0 0 3px rgba(232,82,10,0.2); }

/* ============================================================
   SCROLL POLISH — animations, parallax, progress
   ============================================================ */

/* Smooth scroll for the whole page (CSS-side easing) */
html { scroll-padding-top: 96px; }

/* Scroll progress bar — fixed at top */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--orange) 0%, var(--orange-soft) 100%);
  z-index: 99;
  pointer-events: none;
  box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.5);
  transition: opacity .3s ease;
  opacity: 0;
}
.scroll-progress.visible { opacity: 1; }
/* Stagger children animation */
[data-stagger] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}
[data-stagger].visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hero parallax — let JS control bg transform smoothly */
.hero-bg { will-change: transform; transform: translate3d(0,0,0); }

/* 3D tilt setup.
   `will-change: transform` permanente sobre decenas de tarjetas (marquee +
   galería de 90+ modelos) mantenía demasiadas capas de composición en memoria
   y contribuía al congelamiento. El tilt en JS (attachTilt) ya activa/desactiva
   will-change solo durante la interacción, así que aquí no se deja fijo. */
.dismantle-card, .service-mini {
  transform-style: preserve-3d;
}

/* Image zoom on gallery hover */
.gallery-photo {
  background-size: cover;
  transition: transform 1s cubic-bezier(.2,.8,.2,1), filter 1s ease;
}
.gallery-item:hover .gallery-photo {
  transform: scale(1.05);
}
.dismantle-card-img {
  background-size: cover;
  transition: transform 1.2s cubic-bezier(.2,.8,.2,1), filter 1s ease;
}
.dismantle-card:hover .dismantle-card-img {
  transform: scale(1.06);
}

/* Sticky section header float-in */
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* Subtle hero motion */
@keyframes heroBgFloat {
  0%, 100% { transform: scale(1) translate3d(0,0,0); }
  50% { transform: scale(1.015) translate3d(0,0,0); }
}

/* Card lift on enter (used by JS) */
.card-enter {
  opacity: 0;
  transform: translateY(40px) scale(0.97);
  transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1);
}
.card-enter.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Smooth tilt hover */
.brand-card { transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .3s, border-color .3s; }
.dismantle-card { transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s; }
.service-mini { transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .35s, box-shadow .35s; }
.gallery-item { transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .3s; }

/* Scroll-snap for desktop dismantle */
@media (min-width: 1100px) {
  .dismantle-card { scroll-snap-align: start; }
}

/* Section pop-in effect */
.section { position: relative; }
.section-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--black) 0%, transparent 25%);
  pointer-events: none;
  opacity: 0.6;
  z-index: 1;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.05ms !important;
    scroll-behavior: auto !important;
  }
  .hero-bg, .gallery-photo, .dismantle-card-img { transform: none !important; }
  /* Capas de parallax inmóviles (fallback CSS; el JS además no las registra). */
  .about-image-bg, .service-mini--feature .service-mini-bg, .cta-parallax { transform: none !important; }
  .scroll-progress { display: none; }
  /* Garantiza que ningún nodo .reveal (incluidas direcciones left/right/scale)
     quede invisible si el observer tardara: aparecen de inmediato, sin movimiento. */
  .reveal, [data-stagger] { opacity: 1 !important; transform: none !important; }
  /* La barra de acento motera se muestra completa (sin animar el trazo). */
  .section-head-left::before { transform: none !important; }
  /* Defensa explícita: capas decorativas infinitas del hero quietas. */
  .bike-disc.d2, .bike-disc.d3, .dust { animation: none !important; }
}

/* ============================================================
   PARTS CATALOG (repuestos) — Brand → Model → Parts by category
   ============================================================ */

.parts-section {
  /* PROPUESTA · fondo Blueprint técnico (muy sutil, scrim para legibilidad) */
  background:
    linear-gradient(rgba(13,11,9,0.58), rgba(13,11,9,0.70)),
    url('assets/fondos/blueprint.jpg') center / cover no-repeat,
    linear-gradient(180deg, var(--black) 0%, #0d0a08 50%, var(--black) 100%);
  /* El padding lo pone .section, que el elemento ya lleva. Declararlo aquí lo
     rompía en móvil: esta regla va DESPUÉS de la media query que compacta
     .section a 56px y, con la misma especificidad, ganaba por orden. */
  position: relative;
  overflow: hidden;
}
/* ============================================================
   BÚSQUEDA A PEDIDO (Solicitud de repuestos)
   ============================================================ */
.busqueda-section {
  /* PROPUESTA · fondo Radar/sonar (rastreo de la pieza) */
  background:
    linear-gradient(rgba(11,11,13,0.54), rgba(11,11,13,0.68)),
    url('assets/fondos/radar.jpg') center / cover no-repeat,
    linear-gradient(180deg, var(--black) 0%, #0a0a0d 50%, var(--black) 100%);
  /* Mismo caso que .parts-section: el padding lo pone .section. */
  position: relative; overflow: hidden;
}
.busqueda-section::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(var(--accent-rgb),0.06), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(var(--accent-rgb),0.04), transparent 50%);
  pointer-events: none;
}

.busqueda-meta {
  display: flex; gap: 16px;
}
.bm-stat {
  padding: 16px 22px;
  background: var(--black-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  display: flex; flex-direction: column; gap: 4px;
  min-width: 130px;
}
.bm-stat .bm-num {
  font-family: 'Archivo Black', sans-serif;
  font-size: 26px; color: var(--orange);
  letter-spacing: 0.01em; line-height: 1;
}
.bm-stat .bm-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.15em;
  color: var(--text-mute); text-transform: uppercase;
}
/* Timeline cómo funciona */
.bus-timeline {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  gap: 16px;
  align-items: stretch;
  margin-bottom: 56px;
  padding: 28px 24px;
  background: var(--black-2);
  border: 1px solid var(--line);
  border-radius: 18px;
  position: relative; z-index: 1;
}
.bus-step {
  display: flex; flex-direction: column; gap: 10px;
  padding: 8px;
}
.bus-step .bs-num {
  font-family: 'Archivo Black', sans-serif;
  font-size: 28px;
  color: var(--orange);
  letter-spacing: 0.01em; line-height: 1;
}
.bus-step .bs-body h4 {
  font-family: 'Archivo Black', sans-serif;
  font-size: 14px;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 4px;
  letter-spacing: 0.02em;
}
.bus-step .bs-body p {
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.45;
  margin: 0;
}
.bus-step-sep {
  align-self: center;
  width: 40px; height: 1px;
  background: var(--line-2);
  position: relative;
}
.bus-step-sep span {
  position: absolute; top: 50%; right: -4px;
  transform: translate(0, -50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 8px rgba(var(--accent-rgb),0.6);
}

/* Form */
.bus-form {
  background: var(--black-2);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 36px 36px 28px;
  position: relative; z-index: 1;
}
/* PROPUESTA · Búsqueda B — el formulario como card centrada y destacada
   (tinte naranja + acento superior) tras el stepper horizontal existente. */
.busqueda-section .bus-form {
  max-width: 1060px; margin: 0 auto;
  background: linear-gradient(180deg, rgba(232,82,10,0.08) 0%, var(--black-2) 55%);
  border-color: rgba(232,82,10,0.24);
  padding-top: 40px;
  overflow: hidden;
}
.busqueda-section .bus-form::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--orange), rgba(232,82,10,0) 72%);
}
.bus-form-head { margin-bottom: 28px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.bus-form-head .bfh-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.2em;
  color: var(--orange); text-transform: uppercase;
}
.bus-form-head h3 {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(22px, 2.6vw, 32px);
  text-transform: uppercase;
  color: var(--text);
  margin: 6px 0 0;
  letter-spacing: 0.01em;
}
.bus-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 22px;
  align-items: start;   /* cada tarjeta abraza su contenido (sin hueco vacío abajo) */
}
.bus-fieldset {
  box-sizing: border-box;
  min-width: 0;         /* evita que un select/placeholder ancho fuerce el desborde */
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 20px 18px;
  display: flex; flex-direction: column; gap: 14px;
  position: relative;
  margin: 0;
}
.bus-legend {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.18em;
  color: var(--text-dim); text-transform: uppercase;
}
.bus-legend .leg-num {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--orange); color: #fff;
  font-family: 'Archivo Black', sans-serif;
  font-size: 11px;
}
.bus-field { display: flex; flex-direction: column; gap: 7px; }
.bus-field.full { grid-column: 1 / -1; }
.bus-field label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.12em;
  color: var(--text-dim); text-transform: uppercase;
  font-weight: 500;
}
.bus-field label em { color: var(--orange); font-style: normal; }
.bus-field input,
.bus-field select,
.bus-field textarea {
  box-sizing: border-box;   /* el padding+borde van DENTRO del 100% → no se desbordan */
  width: 100%;
  min-width: 0;             /* permite encoger dentro de columnas angostas (grid/flex) */
  max-width: 100%;
  background: var(--black-3);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--text);
  font-family: inherit; font-size: 14px;
  outline: none;
  text-overflow: ellipsis;   /* placeholders largos (ej. "¿Qué pieza necesitas?") cortan con "…" en vez de un corte seco en móvil */
  transition: border-color 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
              background-color 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.bus-field input:hover,
.bus-field select:hover,
.bus-field textarea:hover {
  border-color: rgba(var(--accent-rgb), 0.3);
}
.bus-field input:focus,
.bus-field select:focus,
.bus-field textarea:focus {
  border-color: var(--orange);
  background-color: var(--black-4);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.16),
              0 0 20px rgba(232, 82, 10, 0.1);
}
.bus-field select:disabled {
  opacity: 0.5; cursor: not-allowed;
}
.bus-field textarea { resize: vertical; min-height: 60px; font-family: inherit; }

/* ── Validación animada (Unidad 5) — solo transform/opacity, transiciones
   puntuales (clases .shake/.enabling que el JS quita en animationend/timeout). */
@keyframes busShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}
.bus-field.is-invalid input,
.bus-field.is-invalid select,
.bus-field.is-invalid textarea {
  border-color: var(--bmw-red);
  box-shadow: 0 0 0 4px rgba(226, 39, 24, 0.16);
}
.bus-field.shake input,
.bus-field.shake select,
.bus-field.shake textarea {
  animation: busShake .4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.bus-field.is-valid input,
.bus-field.is-valid select { border-color: rgba(var(--accent-rgb), 0.45); }
/* Mensaje de error: hueco reservado con min-height (no animar height → sin reflow). */
.bus-field-msg {
  color: var(--bmw-red);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.04em;
  min-height: 14px;
  opacity: 0; transform: translateY(-4px);
  transition: opacity .2s, transform .2s;
  pointer-events: none;
}
.bus-field.is-invalid .bus-field-msg { opacity: 1; transform: translateY(0); }
/* Habilitación suave del select encadenado (patrón theme-anim: clase temporal). */
.bus-field.enabling select { transition: opacity .25s cubic-bezier(0.2, 0.8, 0.2, 1); }
.bus-field input::placeholder,
.bus-field textarea::placeholder { color: var(--text-mute); }

.bus-radios {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.bus-radio {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  background: var(--black-3);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-dim);
  transition: all .25s;
}
.bus-radio input { display: none; }
.bus-radio:has(input:checked) {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.55);
  color: var(--orange);
}
.bus-radio.urgent:has(input:checked) {
  background: rgba(226, 39, 24, 0.15);
  border-color: rgba(226, 39, 24, 0.55);
  color: var(--bmw-red);
}

.bus-form-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  gap: 20px; flex-wrap: wrap;
}
.bus-disclaimer {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
  font-size: 13px; color: var(--text-dim);
  margin: 0;
}
.bus-disclaimer svg { color: var(--orange); flex-shrink: 0; }
.bus-disclaimer strong { color: var(--text); }
/* En celular el pie del formulario se apila y el botón ocupa todo el ancho,
   evitando que "Enviar solicitud por WhatsApp" se salga por la derecha. */
@media (max-width: 640px) {
  .bus-form-foot { flex-direction: column; align-items: stretch; }
  .bus-form-foot #busSubmit { width: 100%; justify-content: center; }
}

/* Success state — acotado como .bus-form (si no, ocupa TODO el ancho del
   container: ~1233px vacíos alrededor de un ícono y un ticket) y con un poco
   de transparencia + blur tipo vidrio (más notorio en el overlay 02, donde
   deja adivinarse la foto del muro de piezas detrás). */
/* `display:flex` de abajo gana sobre la regla [hidden]{display:none} del
   navegador (autor > user-agent) — sin esto, el panel de "solicitud enviada"
   con un número de ticket de mentira quedaba SIEMPRE visible junto al
   formulario, para cualquier visitante, sin haber enviado nada. Mismo bug de
   fondo que ya se corrigió una vez en .vender-modal. */
.bus-success[hidden] { display: none; }
.bus-success {
  box-sizing: border-box;
  max-width: 640px;
  margin: 0 auto;
  background: rgb(17 17 17 / 74%);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  border-radius: 20px;
  padding: 40px 36px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  position: relative; overflow: hidden;
}
.bus-success::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(var(--accent-rgb), 0.12), transparent 60%);
  pointer-events: none;
}
.bs-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--orange);
  display: grid; place-items: center;
  color: #fff;
  position: relative; z-index: 1;
  animation: bsCheck .5s cubic-bezier(.2, 1.4, .4, 1) both;
  box-shadow: 0 0 0 6px rgba(var(--accent-rgb), 0.15);
}
.bs-icon svg { width: 28px; height: 28px; }
@keyframes bsCheck {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
/* Entrada del panel de éxito: fade+translateY del contenedor y cascada de los
   hijos (desde nth-child 2 para no pisar el bsCheck del icono). Solo opacity/transform. */
@keyframes bsPanelIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bsChildIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.bus-success.bs-enter { animation: bsPanelIn .4s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.bus-success.bs-enter > *:nth-child(n+2) { animation: bsChildIn .35s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.bus-success.bs-enter > *:nth-child(2) { animation-delay: .08s; }
.bus-success.bs-enter > *:nth-child(3) { animation-delay: .16s; }
.bus-success.bs-enter > *:nth-child(4) { animation-delay: .24s; }
.bus-success.bs-enter > *:nth-child(5) { animation-delay: .32s; }
.bus-success.bs-enter > *:nth-child(6) { animation-delay: .40s; }
.bus-success h3 {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(22px, 2.6vw, 28px);
  text-transform: uppercase;
  color: var(--text);
  margin: 0;
  position: relative; z-index: 1;
}
.bus-success > p {
  color: var(--text-dim); font-size: 14px; max-width: 420px;
  margin: 0; position: relative; z-index: 1;
}
.bs-ticket {
  display: flex; flex-direction: column; gap: 5px; align-items: center;
  padding: 14px 26px;
  background: rgba(var(--accent-rgb), 0.10);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: 14px;
  margin: 6px 0;
  position: relative; z-index: 1;
}
.bs-ticket-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.2em;
  color: var(--text-mute); text-transform: uppercase;
}
.bs-ticket-id {
  font-family: 'Archivo Black', sans-serif;
  font-size: 22px;
  color: var(--orange);
  letter-spacing: 0.04em;
}
.bs-info { font-size: 12px; color: var(--text-mute); position: relative; z-index: 1; }
.bs-actions {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  position: relative; z-index: 1;
  margin-top: 4px;
}

@media (max-width: 1100px) {
  .bus-form-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .bus-form-grid { grid-template-columns: 1fr; }
  .bus-timeline {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .bus-step-sep { width: 1px; height: 20px; justify-self: center; }
  .bus-step-sep span { top: auto; right: 50%; bottom: -3px; transform: translate(50%, 0); }
}
@media (max-width: 720px) {
  .bus-form { padding: 24px 18px 20px; }
  .bus-fieldset { padding: 18px 14px 14px; }
  .bus-success { padding: 32px 22px; }
  .busqueda-meta { width: 100%; }
  .bm-stat { flex: 1; min-width: 0; }
}

/* Dismantle meta in section head */
.dismantle-meta {
  display: flex; gap: 20px; align-items: stretch;
}
.dm-stat {
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 24px;
  background: var(--black-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  min-width: 140px;
}
.dm-stat .dm-num {
  font-family: 'Archivo Black', sans-serif;
  font-size: 28px;
  color: var(--orange);
  letter-spacing: 0.01em; line-height: 1;
}
.dm-stat .dm-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.15em;
  color: var(--text-mute);
  text-transform: uppercase;
}
@media (max-width: 720px) {
  .dismantle-meta { width: 100%; }
  .dm-stat { flex: 1; min-width: 0; padding: 12px 16px; }
  .dm-stat .dm-num { font-size: 22px; }
}

.parts-section::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 99px, rgba(var(--accent-rgb),0.04) 99px 100px),
    repeating-linear-gradient(90deg, transparent 0 99px, rgba(var(--accent-rgb),0.04) 99px 100px);
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
}

.parts-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 48px; gap: 40px;
  position: relative; z-index: 2;
}
.parts-head .section-intro { max-width: 540px; }

/* Stepper */
.parts-stepper {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 36px;
  padding: 14px 20px;
  background: var(--black-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  position: relative; z-index: 2;
  /* Dentro del overlay, la .sp-bar es sticky y mide 56px: el scrollIntoView al
     elegir modelo dejaba el stepper justo debajo, 100% tapado — y el stepper es
     el único control para volver atrás. El `scroll-padding-top` del <html> no
     aplica aquí porque el contenedor tiene scroll propio. */
  scroll-margin-top: 68px;
}
.parts-step {
  display: flex; align-items: center; gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mute);
  transition: color .3s;
  cursor: pointer;
}
.parts-step.active { color: var(--orange); }
.parts-step.done { color: var(--text-dim); }
.parts-step.done:hover { color: var(--orange); }
.parts-step .num {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  display: grid; place-items: center;
  font-family: 'Archivo Black', sans-serif;
  font-size: 11px;
}
.parts-step.active .num {
  background: var(--orange); color: #fff; border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.15);
}
.parts-step-sep {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
  margin: 0 4px;
}
.parts-step-sep.active { background: linear-gradient(90deg, var(--orange), var(--line)); }

.parts-tools {
  display: flex; gap: 14px; align-items: center;
  margin-bottom: 32px;
  flex-wrap: wrap;
  position: relative; z-index: 2;
}
.parts-search {
  position: relative;
  display: flex; align-items: center;
  background: var(--black-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 18px;
  flex: 1; min-width: 320px;
  transition: border-color .2s, box-shadow .2s;
}
.parts-search:focus-within {
  border-color: rgba(var(--accent-rgb), 0.55);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.12);
}
.parts-search .search-icon { width: 16px; height: 16px; color: var(--text-mute); flex-shrink: 0; }
.parts-search input {
  flex: 1;
  background: transparent; border: none; outline: none;
  color: var(--text);
  font-family: inherit; font-size: 14px;
  padding: 14px 12px;
  min-width: 0;
}
.parts-search input::placeholder { color: var(--text-mute); }

.parts-active-filter {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: rgba(var(--accent-rgb), 0.10);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--orange);
}
.parts-active-filter button {
  background: none; border: none; color: inherit;
  cursor: pointer; display: grid; place-items: center;
  padding: 2px;
}
.parts-active-filter svg { width: 12px; height: 12px; }

/* Brand picker grid */
/* PROPUESTA · Desarmaduría A — grid de marcas "showroom": auto-fit para que
   las 7 marcas queden en una fila balanceada (antes 5 fijas → 5+2 desparejo)
   y se reacomoden solas al achicar. */
.parts-brands {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px;
  margin-bottom: 32px;
  position: relative; z-index: 2;
}
.parts-brand-pill {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 20px 14px;
  background: linear-gradient(165deg, var(--black-2), var(--black-3));
  border: 1px solid var(--line);
  border-radius: 16px;
  cursor: pointer;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s cubic-bezier(.2,.8,.2,1);
  position: relative;
  overflow: hidden;
}
.parts-brand-pill::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--brand-color, var(--orange));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.parts-brand-pill:hover {
  transform: translateY(-4px);
  border-color: var(--brand-color, rgba(var(--accent-rgb),0.4));
  box-shadow: 0 14px 32px rgba(0,0,0,0.3);
}
.parts-brand-pill:hover::before { transform: scaleX(1); }
.parts-brand-pill.active {
  border-color: var(--brand-color, var(--orange));
  background: var(--black-3);
  box-shadow: 0 0 0 1px var(--brand-color), 0 14px 32px rgba(0,0,0,0.35);
}
.parts-brand-pill.active::before { transform: scaleX(1); }
.parts-brand-pill .logo-box {
  width: 60px; height: 60px; border-radius: 12px;
  background: #fff;
  display: grid; place-items: center;
  padding: 8px;
  flex-shrink: 0;
}
.parts-brand-pill .logo-box img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Las marcas sin archivo de logo (Euromot, Lifan, o las nuevas que cree el
   panel) muestran su nombre dentro de la placa blanca. "Euromot" en Archivo
   Black mide 64px y la placa son 60px con 8px de padding — 44px útiles — así
   que se salía por ambos lados. Los logos SVG no tenían el problema porque
   llevan max-width. La placa crece a lo que mida el nombre en vez de
   recortarlo, y sigue siendo un cuadrado de 60px cuando el nombre es corto. */
.parts-brand-pill .logo-box:has(.logo-fallback) {
  width: auto;
  min-width: 60px;
  max-width: 100%;
  padding: 8px 14px;
}
.parts-brand-pill .logo-box .logo-fallback {
  font-family: 'Archivo Black', sans-serif;
  font-size: 14px;
  letter-spacing: -0.01em;
  text-align: center;
  line-height: 1;
  white-space: nowrap;
}
.parts-brand-pill .b-name {
  font-family: 'Archivo Black', sans-serif;
  font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text);
  text-align: center;
}
.parts-brand-pill .b-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.12em;
  color: var(--text-mute);
  text-transform: uppercase;
}

/* Badge "Próximamente" para marcas sin inventario de piezas todavía */
.parts-brand-pill .b-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #C8971F;
  background: rgba(200, 151, 31, 0.10);
  border: 1px solid rgba(200, 151, 31, 0.35);
  padding: 3px 7px;
  border-radius: 100px;
  line-height: 1;
  pointer-events: none;
}
.parts-brand-pill--soon .logo-box { opacity: 0.78; }
.parts-brand-pill--soon .b-name { color: var(--text-dim); }
.parts-brand-pill--soon .b-count { color: rgba(200, 151, 31, 0.65); }
.parts-brand-pill--soon::before { background: #C8971F; }
.parts-brand-pill--soon:hover { border-color: rgba(200, 151, 31, 0.4); }
.parts-brand-pill--soon.active {
  border-color: #C8971F;
  box-shadow: 0 0 0 1px rgba(200, 151, 31, 0.4), 0 14px 32px rgba(0,0,0,0.35);
}

/* Light mode: ajustes del badge para fondo crema */
/* Modo enfocado: una marca elegida → solo se ve esa + botón "ver todas".
   Cambiamos la grilla de 5 columnas por una fila compacta. */
.parts-brands.is-focused {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 14px;
}
.parts-brands.is-focused .parts-brand-pill {
  flex: 0 0 auto;
  min-width: 160px;
}
.parts-brand-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 22px;
  background: var(--black-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  color: var(--text);
  font-family: 'Archivo Black', sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s cubic-bezier(.2,.8,.2,1), color .3s;
}
.parts-brand-back svg { width: 18px; height: 18px; flex-shrink: 0; }
.parts-brand-back:hover {
  transform: translateY(-4px);
  border-color: var(--orange);
  color: var(--orange);
  box-shadow: 0 14px 32px rgba(0,0,0,0.3);
}
@media (max-width: 560px) {
  .parts-brands.is-focused { flex-direction: column; }
  .parts-brands.is-focused .parts-brand-pill,
  .parts-brand-back { width: 100%; }
  .parts-brand-back { padding: 16px 22px; justify-content: center; }
}

/* Model picker */
.parts-models {
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
  position: relative; z-index: 2;
}
.parts-models.visible { display: grid; }
/* ── ROSTER de modelos (estilo selector de personajes): la moto recortada se
   "para" sobre una tarima con halo naranja; al pasar el mouse pega el salto. ── */
.parts-model-card {
  display: flex; flex-direction: column;
  padding: 0 16px 16px;
  background:
    radial-gradient(120% 68% at 50% 0%, rgba(255,255,255,0.05), transparent 62%),
    linear-gradient(180deg, var(--black-3) 0%, var(--black-2) 100%);
  border: 1px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .35s;
  position: relative;
  overflow: hidden;
}
.parts-model-card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--accent-rgb), 0.45);
  box-shadow: 0 18px 40px rgba(0,0,0,0.4);
}
.parts-model-card.active {
  border-color: var(--orange);
  box-shadow: 0 0 0 1px var(--orange), 0 18px 42px rgba(var(--accent-rgb), 0.22);
}

/* Tarima donde se posa la moto */
.mc-stage {
  position: relative;
  height: 158px;
  margin: 0 -16px 12px;
  display: flex; align-items: flex-end; justify-content: center;
}
/* Halo/elipse de luz al pie — solo con recorte flotante */
.parts-model-card.is-moto .mc-stage::after {
  content: ""; position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  width: 72%; height: 20px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(var(--accent-rgb),0.42), rgba(var(--accent-rgb),0) 70%);
  filter: blur(3px);
  transition: width .35s cubic-bezier(.2,.8,.2,1), background .3s;
  z-index: 0; pointer-events: none;
}
.mc-img--moto {
  position: relative; z-index: 1;
  width: 92%; height: 100%;
  background-color: transparent !important;
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
  filter: drop-shadow(0 9px 9px rgba(0,0,0,0.5));
  transform-origin: center bottom;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), filter .35s;
}
.parts-model-card.is-moto:hover .mc-img--moto {
  transform: scale(1.06) translateY(-2px);
  filter: drop-shadow(0 16px 14px rgba(0,0,0,0.55));
}
.parts-model-card.is-moto:hover .mc-stage::after { width: 86%; }
.parts-model-card.is-moto.active .mc-stage::after {
  width: 86%;
  background: radial-gradient(ellipse at center, rgba(var(--accent-rgb),0.55), rgba(var(--accent-rgb),0) 70%);
}

/* Fallback: modelos SIN recorte todavía → foto recuadrada (como antes) */
.parts-model-card:not(.is-moto) .mc-stage { height: 132px; margin: 14px 0 12px; }
.parts-model-card:not(.is-moto) .mc-img {
  width: 100%; height: 100%;
  background-color: var(--black-4);
  background-size: cover; background-position: center;
  border-radius: 8px;
}
.mc-img.bg-empty {   /* placeholder neutro (modelo sin foto): honesto, no inventa */
  background: repeating-linear-gradient(45deg, var(--black-3) 0 10px, var(--black-4) 10px 20px);
}

.parts-model-card .mc-cat {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 0.15em;
  color: var(--text-mute);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.parts-model-card .mc-name {
  font-family: 'Archivo Black', sans-serif;
  font-size: 15px;
  color: var(--text);
  text-transform: uppercase;
  margin-bottom: 10px;
  line-height: 1.12;
}
.parts-model-card .mc-stock {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px;
  background: rgba(var(--accent-rgb), 0.12);
  border: 1px solid rgba(var(--accent-rgb), 0.28);
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--orange);
  align-self: flex-start;
  margin-top: auto;
  transition: gap .25s, background .25s;
}
.parts-model-card:hover .mc-stock { gap: 11px; background: rgba(var(--accent-rgb), 0.18); }
.mc-arrow { width: 12px; height: 12px; }

@media (max-width: 640px) {
  /* El roster no tenía NINGÚN override móvil: minmax(240px,1fr) fuerza una sola
     columna bajo ~530px de contenedor, así que una marca con 15 modelos (Yamaha)
     quedaba en ~3980px de tarjetas apiladas — casi 5 pantallas de teléfono para
     un solo roster. Bajando el mínimo a 140px caben dos columnas en cualquier
     teléfono (incluso a 360px de ancho), y el roster se reduce a una rejilla. */
  .parts-models { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
  .parts-model-card { padding: 0 10px 12px; border-radius: 12px; }
  .mc-stage { height: 104px; margin: 0 -10px 8px; }
  .parts-model-card:not(.is-moto) .mc-stage { height: 92px; margin: 10px 0 8px; }
  .parts-model-card .mc-cat { font-size: 8px; letter-spacing: 0.1em; margin-bottom: 3px; }
  .parts-model-card .mc-name { font-size: 12.5px; margin-bottom: 8px; }
  .parts-model-card .mc-stock { font-size: 9px; padding: 4px 9px; gap: 5px; }
  .mc-arrow { width: 9px; height: 9px; }
}

/* Categories sidebar + parts grid */
.parts-browse {
  display: none;
  grid-template-columns: 240px 1fr;
  gap: 28px;
  align-items: start;
  position: relative; z-index: 2;
}
.parts-browse.visible { display: grid; }

.parts-categories {
  background: var(--black-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
  position: sticky; top: 100px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.parts-categories::-webkit-scrollbar { width: 6px; }
.parts-categories::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb), 0.3); border-radius: 3px; }
.parts-cat-head {
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}
.parts-cat-head .lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.18em;
  color: var(--text-mute);
  text-transform: uppercase;
}
.parts-cat-head .count {
  font-family: 'Archivo Black', sans-serif;
  font-size: 22px;
  color: var(--text);
  margin-top: 4px;
}
.parts-cat-head .count em {
  color: var(--orange);
  font-style: normal;
}
.parts-cat-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .2s, color .2s;
  color: var(--text-dim);
  font-size: 13px;
  border: none; background: transparent;
  width: 100%;
  text-align: left;
  font-family: inherit;
}
.parts-cat-item:hover { background: rgba(255,255,255,0.04); color: var(--text); }
.parts-cat-item.active {
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--orange);
}
.parts-cat-item.active .pc-icon { background: var(--orange); color: #fff; }
.parts-cat-item .pc-icon {
  width: 28px; height: 28px;
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: background .25s, color .25s;
  color: var(--text);
}
.parts-cat-item .pc-icon svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.parts-cat-item .pc-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.parts-cat-item .pc-cnt {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-mute);
  background: rgba(255,255,255,0.04);
  padding: 2px 7px;
  border-radius: 999px;
  flex-shrink: 0;
}
.parts-cat-item.active .pc-cnt { background: rgba(255,255,255,0.18); color: #fff; }
.parts-cat-item.all { font-weight: 600; }

/* Parts grid */
.parts-grid-wrap { display: flex; flex-direction: column; gap: 32px; }
.parts-cat-group h3 {
  font-family: 'Archivo Black', sans-serif;
  font-size: 18px; text-transform: uppercase;
  color: var(--text);
  margin: 0 0 14px;
  letter-spacing: 0.01em;
  display: flex; align-items: center; gap: 12px;
}
.parts-cat-group h3 .pc-icon {
  width: 32px; height: 32px;
  background: var(--orange);
  color: #fff;
  border-radius: 9px;
  display: grid; place-items: center;
}
.parts-cat-group h3 .pc-icon svg { width: 17px; height: 17px; }
.parts-cat-group h3 .cnt {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.15em;
  color: var(--text-mute);
  text-transform: uppercase;
  font-weight: 400;
}

.parts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.part-card {
  background: var(--black-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  transition: all .3s cubic-bezier(.2,.8,.2,1);
  position: relative;
}
.part-card:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--accent-rgb), 0.4);
  box-shadow: 0 14px 32px rgba(0,0,0,0.3);
}
.part-card .pt-row {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 10px;
}
.part-card .pt-cat {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 0.15em;
  color: var(--text-mute);
  text-transform: uppercase;
}
.part-card .pt-cat::before {
  content: ""; width: 6px; height: 6px; border-radius: 2px;
  background: var(--cat-color, var(--orange));
}
.part-card .pt-status {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 0.1em;
  padding: 3px 8px;
  border-radius: 999px;
  text-transform: uppercase;
}
.part-card .pt-status.stock { background: rgba(34, 197, 94, 0.12); color: #4ade80; }
.part-card .pt-status.low   { background: rgba(232, 82, 10, 0.12); color: var(--orange); }
.part-card .pt-status.sold  { background: rgba(255,255,255,0.06); color: var(--text-mute); text-decoration: line-through; }
.part-card .pt-status.order { background: rgba(96, 165, 250, 0.12); color: #60a5fa; }
.part-card .pt-name {
  font-family: 'Archivo Black', sans-serif;
  font-size: 15px;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 1.2;
}
.part-card .pt-desc {
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.45;
}
.part-card .pt-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  margin-top: auto;
}
.part-card .pt-price {
  font-family: 'Archivo Black', sans-serif;
  font-size: 15px;
  color: var(--orange);
}
.part-card .pt-price.consult {
  font-size: 12px; color: var(--text-mute);
}
.part-card .pt-wa {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 6px 10px;
  cursor: pointer;
  transition: all .25s;
}
.part-card .pt-wa:hover {
  background: var(--orange); color: #fff; border-color: var(--orange);
}
.part-card .pt-wa svg { width: 12px; height: 12px; fill: currentColor; }

.parts-empty {
  text-align: center; padding: 64px 24px;
  background: var(--black-2);
  border: 1px dashed var(--line-2);
  border-radius: 16px;
  color: var(--text-mute);
}
.parts-empty h4 {
  font-family: 'Archivo Black', sans-serif;
  font-size: 18px;
  color: var(--text);
  margin-bottom: 10px;
  text-transform: uppercase;
}
.parts-empty p { font-size: 13.5px; max-width: 460px; margin: 0 auto; line-height: 1.5; }
.parts-empty .btn { margin-top: 18px; }
.parts-empty-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.parts-empty-actions .btn { margin-top: 0; }
.parts-empty-eyebrow {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 12px;
}

/* Tarjetas de pieza publicada (Fase B — stock real desde el panel) */
.parts-grid-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.parts-grid-head .pg-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.08em;
  color: var(--text-mute); text-transform: uppercase;
}
.parts-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 18px;
}
.pcard {
  display: flex; flex-direction: column;
  background: var(--black-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none; color: inherit;
  position: relative;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), border-color .25s, box-shadow .25s;
}
.pcard:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--accent-rgb), 0.45);
  box-shadow: 0 16px 38px rgba(0,0,0,0.34);
}
.pcard-img { height: 168px; background-color: var(--black-3); background-size: cover; background-position: center; }
.pcard-img--none {
  display: grid; place-items: center;
  color: var(--text-mute);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  background: repeating-linear-gradient(45deg, var(--black-3) 0 10px, var(--black-2) 10px 20px);
}
.pcard-badge {
  position: absolute; top: 12px; left: 12px;
  padding: 4px 10px; border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.05em; font-weight: 600;
  backdrop-filter: blur(6px);
}
.pcard-badge.cond-perfecto_estado { background: rgba(34,197,94,0.18); color: #4ade80; }
.pcard-badge.cond-buen_estado { background: rgba(96,165,250,0.18); color: #60a5fa; }
.pcard-badge.cond-presenta_detalle { background: rgba(232,82,10,0.2); color: var(--orange-soft); }
.pcard-body { display: flex; flex-direction: column; gap: 6px; padding: 14px; flex: 1; }
.pcard-cat {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-mute);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pcard-name {
  font-family: 'Archivo Black', sans-serif;
  font-size: 14px; line-height: 1.2; text-transform: uppercase;
  color: var(--text); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; }
.pcard-price { font-family: 'Archivo Black', sans-serif; font-size: 16px; color: var(--orange); }
.pcard-warranty { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.06em; color: var(--text-mute); text-align: right; }

/* Light mode for parts */
/* Responsive */
@media (max-width: 1100px) {
  .parts-brands { grid-template-columns: repeat(3, 1fr); }
  .parts-browse { grid-template-columns: 1fr; }
  .parts-categories { position: static; max-height: none; }
}
@media (max-width: 720px) {
  .parts-brands { grid-template-columns: repeat(2, 1fr); }
  .parts-stepper { padding: 12px 14px; gap: 8px; }
  .parts-step { font-size: 10px; }
  .parts-step .num { width: 22px; height: 22px; font-size: 10px; }
}

/* ============================================================
   THEME TOGGLE BUTTON (sol / luna)
   ============================================================ */
/* ============================================================
   LIGHT MODE — BMW MOTORRAD
   ============================================================ */

/* ---------- BASE ---------- */
/* La base crema vive en :root (html) para que el lienzo decorativo
   .day-canvas (z-index:-1, hijo de body) se pinte POR ENCIMA de ella y
   asome a través de las secciones transparentes. Si la crema viviera en
   <body>, taparía el lienzo y la atmósfera nunca se vería. */
/* ---------- HEADER ---------- */
/* ---------- HERO ---------- */
/* Hero permanece dramático con la foto, pero los acentos suben a BMW blue */
/* ---------- BRANDS ---------- */
/* ---------- TRUST STRIP — oscuro BMW navy para contraste ---------- */
/* ---------- SERVICES ---------- */
/* 02 destacada: conserva texto claro sobre la foto, también en tema claro */
/* ---------- DISMANTLE ---------- */
/* ---------- GALLERY ---------- */
/* ---------- STATS ---------- */
/* ---------- ABOUT ---------- */
/* ---------- CTA FINAL ---------- */
/* ---------- FOOTER ---------- */
/* ---------- ROUTE DIVIDER (light mode tricolor) ---------- */
/* ---------- FLOATING WHATSAPP ---------- */
@keyframes wa-pulse-light {
  0% { box-shadow: 0 12px 40px -8px rgba(37,211,102,0.55), 0 0 0 0 rgba(37,211,102,0.45); }
  70% { box-shadow: 0 12px 40px -8px rgba(37,211,102,0.55), 0 0 0 18px rgba(37,211,102,0); }
  100% { box-shadow: 0 12px 40px -8px rgba(37,211,102,0.55), 0 0 0 0 rgba(37,211,102,0); }
}

/* Smooth filter swap on photos */
.gallery-photo, .about-image, .hero-bg, .dismantle-card-img {
  transition: filter .5s ease;
}
/* .about-image es además un nodo .reveal: la regla de arriba (más tardía en la
   cascada) pisaba la transición de opacity/transform del reveal y lo hacía
   aparecer de golpe. Combinamos las tres para que entre suave Y conserve el
   swap de filtro del lazy-bg. */
.about-image.reveal {
  transition: opacity var(--rv-dur, .8s) var(--rv-delay, 0s) cubic-bezier(0.2, 0.8, 0.2, 1),
              transform var(--rv-dur, .8s) var(--rv-delay, 0s) cubic-bezier(0.2, 0.8, 0.2, 1),
              filter .5s ease;
}

/* ── Skeleton shimmer (lazy-bg loading placeholder) ─────── */
@keyframes skeleton-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}
.skeleton-bg {
  background-image: linear-gradient(
    90deg,
    rgba(255,255,255,.03) 0%,
    rgba(255,255,255,.10) 40%,
    rgba(255,255,255,.15) 50%,
    rgba(255,255,255,.10) 60%,
    rgba(255,255,255,.03) 100%
  ) !important;
  background-size: 600px 100% !important;
  background-repeat: no-repeat !important;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
}
.bg-loaded { animation: none !important; }

/* Sin imagen real (pieza/modelo sin foto aún, o carga fallida): placeholder
   estático con la misma trama diagonal que ".pcard-img--none". Nunca dejamos el
   skeleton latiendo para siempre (bug histórico). Respeta "solo lo real":
   mostramos honestamente que no hay foto en vez de inventar una. */
.bg-empty,
.bg-error {
  animation: none !important;
  background-image: repeating-linear-gradient(
    45deg, var(--black-3) 0 10px, var(--black-2) 10px 20px
  ) !important;
  background-size: auto !important;
}

/* ── Brand pill loading state ───────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
.parts-brand-pill.loading {
  opacity: 0.55;
  pointer-events: none;
  position: relative;
}
.parts-brand-pill.loading::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid transparent;
  border-top-color: var(--orange);
  animation: spin .7s linear infinite;
}

/* ── Gallery hidden items (before "Ver más") ────────────── */
.gallery-hidden { display: none !important; }

/* ── Gallery "Ver más" button ───────────────────────────── */
.gallery-more-btn {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  margin: .5rem 0 1rem;
  padding: .75rem 1.5rem;
  background: transparent;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 6px;
  color: var(--text-muted);
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.gallery-more-btn:hover {
  border-color: var(--orange);
  color: var(--orange);
}
/* ══════════════════════════════════════════════════════════════
   SERVICE PAGES — Full-screen overlay pages
   ══════════════════════════════════════════════════════════════ */

.service-page {
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: var(--black);
  transform: translateX(100%);
  transition: transform 0.55s cubic-bezier(0.77, 0, 0.18, 1);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  -webkit-overflow-scrolling: touch;
}
.service-page.sp-open { transform: translateX(0); }

body.sp-lock {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

/* ── SP Bar ────────────────────────────────────────────────── */
.sp-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 56px;
  padding: 0 32px;
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(10, 10, 10, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.sp-bar--proyectos {
  background: rgba(14, 8, 0, 0.92);
  border-bottom-color: rgba(200, 151, 31, 0.15);
}

.sp-back {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 0.2s;
  padding: 8px 12px 8px 0;
  flex-shrink: 0;
}
.sp-back:hover { color: var(--text); }
.sp-back--proyectos { color: rgba(200, 151, 31, 0.6); }
.sp-back--proyectos:hover { color: #C8971F; }

.sp-bar-label {
  flex: 1;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.sp-bar-num { color: var(--orange); margin-right: 8px; }
.sp-bar-num--gold { color: #C8971F; }

.sp-close-btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--text-dim);
  border-radius: 8px;
  transition: color 0.2s, background 0.2s, transform 0.25s;
  flex-shrink: 0;
}
.sp-close-btn:hover { color: var(--text); background: var(--black-4); transform: rotate(90deg); }
.sp-close-btn--proyectos { color: rgba(200, 151, 31, 0.6); }
.sp-close-btn--proyectos:hover { color: #C8971F; background: rgba(200, 151, 31, 0.08); }

/* ── SP Content ────────────────────────────────────────────── */
.sp-content { flex: 1; }
.sp-content > .section { padding-top: 60px; }

/* ── SP Hero base ──────────────────────────────────────────── */
.sp-hero {
  position: relative;
  min-height: 58vh;
  padding: 80px 64px 72px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  flex-shrink: 0;
}
.sp-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 700px;
}
.sp-eyebrow {
  display: inline-flex;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
  padding: 5px 14px;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: 100px;
  margin-bottom: 28px;
}
.sp-title {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(44px, 7vw, 88px);
  line-height: 0.93;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 22px;
}
.sp-title em { font-style: italic; color: var(--orange); }
.sp-lead {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-dim);
  margin: 0 0 40px;
  max-width: 460px;
}
.sp-stats { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.sp-stat { display: flex; flex-direction: column; gap: 5px; }
.sp-stat-n {
  font-family: 'Archivo Black', sans-serif;
  font-size: 30px;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1;
}
.sp-stat-l {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.sp-stat-sep { width: 1px; height: 36px; background: var(--line); flex-shrink: 0; }

/* ── DISMANTLE hero ────────────────────────────────────────── */
.sp-hero--dismantle {
  background: linear-gradient(160deg, #090909 0%, #0F0F0F 50%, #080808 100%);
}
.sp-hero--dismantle::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(232,82,10,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,82,10,0.05) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(ellipse 90% 90% at 60% 50%, black 0%, transparent 80%);
}
.sp-hero-deco--dismantle {
  position: absolute;
  right: 8%;
  top: 50%;
  transform: translateY(-50%);
  width: 500px;
  height: 500px;
  pointer-events: none;
}
.sp-hero-deco--dismantle::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,82,10,0.07) 0%, transparent 65%);
}
.sp-hero-deco--dismantle::after {
  content: '';
  position: absolute;
  inset: 40px;
  border-radius: 50%;
  border: 1px solid rgba(232,82,10,0.1);
  box-shadow:
    0 0 0 40px rgba(232,82,10,0.03),
    0 0 0 80px rgba(232,82,10,0.015);
}

/* ── DISMANTLE · portada del overlay ───────────────────────────
   El mosaico de piezas ocupaba la mitad de esta portada y era lo primero que veía
   quien pulsaba "Ver inventario": seis fotos grandes con etiqueta naranja que
   parecen botones y son inertes. Se bajó al pie (.sp-parts-showcase) y la portada
   quedó a una sola columna y compacta, para que el selector de MARCAS entre en la
   primera pantalla — que es lo que la gente viene a usar. */
.sp-hero--dismantle {
  min-height: 0;
  padding: 56px 64px 40px;
}
.sp-hero--dismantle .sp-hero-inner { max-width: 780px; min-width: 0; }
.sp-hero--dismantle .sp-eyebrow { font-size: 11px; padding: 6px 16px; margin-bottom: 22px; }
.sp-hero--dismantle .sp-title { font-size: clamp(38px, 4.6vw, 64px); margin-bottom: 18px; }
.sp-hero--dismantle .sp-lead { font-size: 17px; line-height: 1.6; max-width: 620px; margin-bottom: 28px; }
.sp-hero--dismantle .sp-stats { gap: 30px; }
.sp-hero--dismantle .sp-stat-n { font-size: 40px; }
.sp-hero--dismantle .sp-stat-l { font-size: 11px; }
.sp-hero--dismantle .sp-stat-sep { height: 44px; }
/* ── Titulares duplicados dentro de los overlays ────────────────
   Cada overlay tiene su portada (.sp-hero) Y ADEMÁS recibe la sección completa
   del sitio, que trae su propia cabecera diciendo casi lo mismo. El visitante
   veía dos veces seguidas "¿No estaba en stock?" o "Ya encontraron su
   compañera". Todo esto va SCOPEADO a .service-page a propósito: al cerrar el
   overlay la sección vuelve al body, y allí su cabecera sí debe verse. */
.service-page .sp-content .section-head-left { display: none; }
/* Donde el resto de la cabecera también repite la portada, se va entera.
   En Búsqueda no: ahí sobrevive .busqueda-meta (24h · +8 proveedores), que son
   datos que la portada no muestra. */
#sp-dismantle .sp-content .section-head,
#sp-gallery   .sp-content .section-head { display: none; }
/* Los cuatro pasos salían dos veces: como resumen en la portada y otra vez
   abajo con su descripción. Se deja la versión detallada, que es la que informa. */
#sp-busqueda .sp-mini-steps { display: none; }
/* Sin cabecera, el padding superior de .section (140px escritorio / 56px móvil)
   queda como un hueco negro bajo la portada. */
.service-page .sp-content .section { padding-top: 16px; }

/* ── Muestra de piezas, al pie del overlay ─────────────────── */
.sp-parts-showcase { padding: 8px 64px 72px; }
.sp-parts-showcase-title {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(20px, 2.4vw, 28px);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 10px;
}
.sp-parts-showcase-lead {
  font-size: 14.5px; line-height: 1.6;
  color: var(--text-dim);
  max-width: 620px;
  margin: 0 0 26px;
}
.sp-parts-mosaic {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: 16px;
  width: 100%;
}
.sp-part {
  position: relative; margin: 0;
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line);
  background: var(--black-3);
  aspect-ratio: 4 / 3;
  transition: border-color .3s, transform .3s;
}
.sp-part img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: contrast(1.05) saturate(0.9);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.sp-part::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 40%, rgba(8,8,8,0.7));
}
/* Sin `translateY` ni borde naranja al pasar por encima: estas fotos NO son
   pulsables, y ese efecto las disfrazaba de botón. En táctil era peor todavía,
   porque sin `@media (hover:hover)` el estado se quedaba pegado tras el toque.
   Se deja solo el zoom suave de la imagen, que se lee como vida, no como acción. */
@media (hover: hover) {
  .sp-part:hover img { transform: scale(1.04); }
}
.sp-part-tag {
  position: absolute; left: 12px; top: 11px; z-index: 2;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--orange);
  text-shadow: 0 1px 6px rgba(0,0,0,0.85);
}
@media (max-width: 900px) {
  .sp-hero--dismantle { padding: 44px 24px 32px; }
  .sp-hero--dismantle .sp-hero-inner { max-width: 100%; }
  .sp-parts-showcase { padding: 8px 24px 56px; }
}
@media (max-width: 560px) {
  .sp-parts-mosaic { grid-template-columns: 1fr 1fr; }
  /* En pantallas chicas bajamos la escala para que no apriete. */
  .sp-hero--dismantle .sp-title { font-size: clamp(30px, 8.4vw, 46px); }
  .sp-hero--dismantle .sp-lead { font-size: 15px; margin-bottom: 22px; }
  .sp-hero--dismantle .sp-stats { gap: 18px; }
  .sp-hero--dismantle .sp-stat-n { font-size: 32px; }
  .sp-hero--dismantle .sp-stat-sep { height: 36px; }
}

/* ── BÚSQUEDA hero ─────────────────────────────────────────── */
.sp-hero--busqueda {
  background: linear-gradient(160deg, #020810 0%, #030D1C 50%, #01060E 100%);
  min-height: 52vh;
}
.sp-radar-dot {
  position: absolute;
  right: 15%;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #1c69d4;
  box-shadow: 0 0 40px 16px rgba(28,105,212,0.25);
  pointer-events: none;
  z-index: 1;
}
.sp-radar-dot::before,
.sp-radar-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  border: 1px solid rgba(28,105,212,0.3);
  transform: translate(-50%, -50%);
  animation: sp-radar 3s ease-out infinite;
}
.sp-radar-dot::after { animation-delay: 1.5s; }
@keyframes sp-radar {
  0% { transform: translate(-50%, -50%) scale(0.08); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

.sp-mini-steps { display: flex; align-items: center; gap: 0; }
.sp-ms { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sp-ms-n {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(28,105,212,0.4);
  background: rgba(28,105,212,0.08);
  display: grid;
  place-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: #5BA3F5;
  letter-spacing: 0.04em;
}
.sp-ms-l {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.sp-ms-line {
  flex: 1;
  min-width: 40px;
  height: 1px;
  background: linear-gradient(90deg, rgba(28,105,212,0.5), rgba(28,105,212,0.2));
  margin: 0 6px 20px;
}

/* ── BÚSQUEDA · fondo FIJO (muro de piezas) + contenido deslizante ───────────
   .service-page tiene transform (slide-in), así que position:fixed scrollearía
   con el contenido. Se usa sticky + margen negativo: la capa se ancla al tope del
   panel (top:0, alto de viewport) y su margen negativo hace que no ocupe espacio,
   de modo que el hero + el formulario se deslizan POR ENCIMA de la foto estática. */
#sp-busqueda .sp-bg {
  position: sticky;
  top: 0;
  align-self: stretch;        /* ancho completo dentro del flex column */
  flex-shrink: 0;
  height: 100vh;
  margin-bottom: -100vh;      /* no ocupa espacio: el contenido se le superpone */
  z-index: 0;
  background: url('assets/motos/muro-piezas-busqueda.jpg') center 42% / cover no-repeat;
  pointer-events: none;
}
@supports (height: 100dvh) {
  #sp-busqueda .sp-bg { height: 100dvh; margin-bottom: -100dvh; }
}
/* Scrim para que el texto y el formulario se lean sobre la foto (más oscuro abajo,
   donde cae el formulario; toque naranja arriba-derecha, sello de la casa). */
#sp-busqueda .sp-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(9,8,7,0.52) 0%, rgba(9,8,7,0.72) 46%, rgba(9,8,7,0.90) 100%),
    radial-gradient(circle at 80% 16%, rgba(232,82,10,0.16), transparent 55%);
}
/* Hero y formulario por ENCIMA de la foto fija (la sp-bar ya es sticky z-10). */
#sp-busqueda .sp-hero,
#sp-busqueda .sp-content { position: relative; z-index: 1; }
/* El hero y la sección clonada del formulario dejan de pintar su propio fondo
   (azul/radar) para que se vea la foto; conservan su contenido. */
#sp-busqueda .sp-hero--busqueda { background: transparent; }
#sp-busqueda .busqueda-section { background: transparent !important; }
#sp-busqueda .busqueda-section::before { display: none; }
/* Acentos del stepper del hero: de azul (radar) a naranja, para armonizar. */
#sp-busqueda .sp-ms-n {
  border-color: rgba(232,82,10,0.45);
  background: rgba(232,82,10,0.10);
  color: #ff8a4c;
}
#sp-busqueda .sp-ms-line {
  background: linear-gradient(90deg, rgba(232,82,10,0.5), rgba(232,82,10,0.2));
}

/* ── GALLERY hero ──────────────────────────────────────────── */
.sp-hero--gallery {
  background: #060606;
  min-height: 48vh;
}
.sp-hero--gallery::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0, transparent 28px,
    rgba(255,255,255,0.013) 28px,
    rgba(255,255,255,0.013) 29px
  );
}
.sp-hero--gallery::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 50%;
  background: radial-gradient(ellipse 70% 80% at 80% 50%, rgba(28,105,212,0.07) 0%, transparent 65%);
}

/* ══════════════════════════════════════════════════════════════
   PROYECTOS PAGE — Gas Monkey / Vintage Restorage
   ══════════════════════════════════════════════════════════════ */
.sp-page--proyectos { background: #0E0800; }

.sp-proy-hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  padding: 100px 64px 80px;
  overflow: hidden;
  flex-shrink: 0;
}
.sp-proy-hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, #0E0800 0%, #1C0F00 45%, #110A00 100%);
}
.sp-proy-hero-bg::after {
  content: '';
  position: absolute;
  right: -80px;
  top: 5%;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(200,151,31,0.065) 0%, transparent 60%);
  pointer-events: none;
}
.sp-proy-scratches {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(85deg, transparent 0, transparent 60px, rgba(200,151,31,0.018) 60px, rgba(200,151,31,0.018) 61px),
    repeating-linear-gradient(175deg, transparent 0, transparent 120px, rgba(200,151,31,0.01) 120px, rgba(200,151,31,0.01) 121px);
}
.sp-proy-hero-content {
  position: relative;
  z-index: 2;
  max-width: 700px;
}
.sp-proy-coming-tag {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #C8971F;
  margin-bottom: 36px;
}
.sp-proy-ct-line { display: block; width: 36px; height: 1px; background: #C8971F; opacity: 0.5; }

.sp-proy-title {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(52px, 8vw, 104px);
  line-height: 0.88;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: #FFF4E0;
  margin: 0 0 32px;
}
.sp-proy-title em { font-style: italic; color: #C8971F; }
.sp-proy-desc {
  font-size: 16px;
  line-height: 1.72;
  color: rgba(255, 244, 224, 0.45);
  max-width: 500px;
}
.sp-proy-hero-scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(200,151,31,0.4);
  animation: sp-bounce-proy 2.5s ease-in-out infinite;
}
@keyframes sp-bounce-proy {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}

/* Service type grid */
.sp-proy-types {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(200,151,31,0.12);
  background: #0A0600;
}
.sp-proy-type {
  padding: 64px 48px;
  border-right: 1px solid rgba(200,151,31,0.1);
}
.sp-proy-type:last-child { border-right: none; }

.sp-proy-type-num {
  font-family: 'Archivo Black', sans-serif;
  font-size: 72px;
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: rgba(200,151,31,0.06);
  margin-bottom: -20px;
  display: block;
}
.sp-proy-type-icon {
  width: 52px;
  height: 52px;
  border: 1px solid rgba(200,151,31,0.2);
  border-radius: 12px;
  display: grid;
  place-items: center;
  margin-bottom: 24px;
  color: #C8971F;
  background: rgba(200,151,31,0.04);
}
.sp-proy-type-icon svg { width: 30px; height: 30px; }
.sp-proy-type h3 {
  font-family: 'Archivo Black', sans-serif;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: #FFF4E0;
  margin: 0 0 12px;
  text-transform: uppercase;
}
.sp-proy-type p {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255,244,224,0.4);
}

/* Workshop CTA */
.sp-proy-workshop {
  padding: 100px 64px;
  border-top: 1px solid rgba(200,151,31,0.1);
  background: #080400;
  display: flex;
  justify-content: center;
}
.sp-proy-ws-inner { text-align: center; max-width: 520px; }
.sp-proy-ws-icon { width: 80px; height: 60px; margin: 0 auto 36px; color: rgba(200,151,31,0.3); }
.sp-proy-ws-title {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(28px, 3.5vw, 44px);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: #FFF4E0;
  margin: 0 0 16px;
  line-height: 1;
}
.sp-proy-ws-text {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255,244,224,0.4);
  margin: 0 0 36px;
}
.sp-proy-ws-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Teaser strip */
.sp-proy-teaser {
  display: flex;
  align-items: center;
  padding: 28px 64px;
  border-top: 1px solid rgba(200,151,31,0.1);
  background: #060300;
}
.sp-proy-ti {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 32px;
}
.sp-proy-ti:first-child { padding-left: 0; }
.sp-proy-ti-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(200,151,31,0.5);
}
.sp-proy-ti-val {
  font-family: 'Archivo Black', sans-serif;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #FFF4E0;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sp-proy-ti-val--live { color: #D4C09A; }
.sp-proy-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22C55E;
  flex-shrink: 0;
  animation: sp-pulse-live 1.8s ease-in-out infinite;
}
@keyframes sp-pulse-live {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34,197,94,0.5); }
  50% { opacity: 0.7; box-shadow: 0 0 0 4px rgba(34,197,94,0); }
}
.sp-proy-td { width: 1px; height: 40px; background: rgba(200,151,31,0.12); flex-shrink: 0; }

/* ── Light mode ────────────────────────────────────────────── */
/* ── Mobile ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sp-bar { padding: 0 20px; }
  .sp-hero { padding: 60px 24px 56px; min-height: auto; padding-top: 72px; }
  /* Títulos grandes: bajar el piso del clamp y permitir que palabras largas
     (p.ej. "CONSEGUIMOS") se ajusten en pantallas chicas sin cortarse. */
  .sp-title { font-size: clamp(32px, 8.5vw, 56px); overflow-wrap: break-word; word-break: break-word; hyphens: auto; }
  .sp-lead { max-width: 100%; }
  .sp-proy-hero { padding: 80px 24px 64px; min-height: 80vh; }
  .sp-proy-types { grid-template-columns: 1fr; }
  .sp-proy-type { padding: 40px 24px; border-right: none; border-bottom: 1px solid rgba(200,151,31,0.1); }
  .sp-proy-type:last-child { border-bottom: none; }
  .sp-proy-workshop { padding: 60px 24px; }
  .sp-proy-teaser { flex-direction: column; align-items: flex-start; gap: 20px; padding: 32px 24px; }
  .sp-proy-ti { padding: 0; }
  .sp-proy-td { width: 32px; height: 1px; }
  .sp-mini-steps { flex-wrap: wrap; gap: 12px; }
  .sp-ms-line { display: none; }
  .sp-stats { gap: 16px; }
}

/* ═══════════════════════════════════════════════════════════
   POPUP DE BIENVENIDA · COMPRAMOS TU MOTO
   Único modal CENTRADO con velo del sitio: los otros cuatro overlays
   (.service-page, .brand-detail, .model-detail, .mobile-menu) son páginas
   opacas a pantalla completa. Un mensaje de bienvenida no debe tapar el sitio
   entero, así que aquí sí corresponde el patrón de diálogo.
   z-index 1150: sobre .brand-detail (1100) y bajo .model-detail (1200).
   Las animaciones heredan gratis el bloque de prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════ */
/* `display: grid` en .vender-modal gana sobre la regla [hidden]{display:none}
   de la hoja del navegador (autor > user-agent), así que sin esto el atributo
   hidden no hacía nada: el diálogo quedaba montado y anunciable por lectores de
   pantalla, invisible sólo por opacity. */
.vender-modal[hidden],
.vender-scrim[hidden] { display: none; }

.vender-scrim {
  position: fixed; inset: 0; z-index: 1149;
  background: rgba(4, 4, 5, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .35s ease;
}
.vender-scrim.abierto { opacity: 1; }

.vender-modal {
  position: fixed; z-index: 1150;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  width: min(920px, calc(100vw - 40px));
  max-height: calc(100vh - 40px);
  display: grid; grid-template-columns: 0.85fr 1fr;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid var(--line-2);
  background: var(--black-2);
  box-shadow: 0 40px 100px -30px rgba(0,0,0,0.9), 0 0 0 1px rgba(var(--accent-rgb), 0.12);
  opacity: 0; pointer-events: none;
  transition: opacity .38s ease, transform .38s cubic-bezier(0.2, 1, 0.3, 1);
}
.vender-modal.abierto { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }
/* La línea naranja del header, repetida arriba del diálogo: ata la pieza a la
   identidad sin tener que meter el logotipo dentro. */
.vender-modal::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--orange) 30%, var(--orange) 70%, transparent 100%);
  z-index: 2;
}

.vender-cerrar {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(10,10,10,0.6); border: 1px solid var(--line);
  color: var(--text-dim); cursor: pointer;
  backdrop-filter: blur(8px);
  transition: color .2s, border-color .2s, transform .3s;
}
.vender-cerrar svg { width: 15px; height: 15px; }
.vender-cerrar:hover { color: var(--text); border-color: var(--line-2); transform: rotate(90deg); }

/* El muro de piezas, no una moto entera: el aviso ofrece comprar motos rotas,
   así que una moto impecable contradecía el mensaje. Además ya está fotografiado
   sobre fondo oscuro y funde con el panel sin pelear con el degradado. */
.vender-foto {
  position: relative; min-height: 320px;
  background: var(--black-3) url('assets/motos/muro-piezas-busqueda.jpg') center / cover no-repeat;
}
/* Degradado sólo hacia el borde que toca el cuerpo del diálogo. Es suave porque
   la foto ya es oscura: con el degradado fuerte que pedía la foto a pleno sol,
   esta se apagaba entera. */
.vender-foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(17,17,17,0.35) 72%, var(--black-2) 100%);
}
.vender-foto-pie {
  position: absolute; left: 18px; bottom: 16px; z-index: 1;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.72);
}

.vender-cuerpo { padding: 40px 40px 36px; }
.vender-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--orange); display: block; margin-bottom: 16px;
}
.vender-titulo {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(26px, 3.2vw, 34px); line-height: 1.05;
  text-transform: uppercase; color: var(--text);
  margin-bottom: 16px;
}
.vender-titulo em { font-style: normal; color: var(--orange); }
.vender-texto { font-size: 14.5px; line-height: 1.6; color: var(--text-dim); margin-bottom: 22px; }

.vender-puntos { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 10px; }
.vender-puntos li {
  position: relative; padding-left: 26px;
  font-size: 13.5px; color: var(--text); line-height: 1.4;
}
.vender-puntos li::before {
  content: ""; position: absolute; left: 0; top: 5px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.16);
}

.vender-acciones { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.vender-descartar {
  background: none; border: none; cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  /* --text-mute (#6B6864) sobre --black-2 da 3,3:1 y no llega al mínimo AA
     para texto pequeño; --text-dim sube a ~7:1 sin dejar de ser secundario. */
  color: var(--text-dim); padding: 6px 2px;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.vender-descartar:hover { color: var(--text); border-bottom-color: var(--line-2); }

@media (max-width: 720px) {
  /* En teléfono la foto se lleva media pantalla y empuja el botón fuera de
     vista: se convierte en una franja y el diálogo pasa a una columna.
     El ancho se fija con left/right en vez de calc(100vw - x) y el centrado
     horizontal deja de depender de translate(-50%): con 100vw el diálogo se
     desbordaba por la derecha y cortaba el texto. */
  .vender-modal {
    grid-template-columns: 1fr;
    left: 14px; right: 14px; width: auto;
    max-height: calc(100vh - 28px);
    max-height: calc(100dvh - 28px);   /* barra dinámica del navegador móvil */
    overflow-y: auto;
    transform: translateY(-50%) scale(0.97);
  }
  .vender-modal.abierto { transform: translateY(-50%) scale(1); }
  .vender-foto { min-height: 128px; }
  .vender-foto::after {
    background:
      linear-gradient(180deg, rgba(10,10,10,0.3) 0%, rgba(17,17,17,0.6) 60%, var(--black-2) 100%);
  }
  .vender-cuerpo { padding: 26px 24px 30px; }
  .vender-puntos { margin-bottom: 22px; }
  .vender-acciones { gap: 14px; }
  .vender-acciones .btn { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════
   PESTAÑA LATERAL · HAZTE CLIENTE
   Placa industrial pegada al borde izquierdo, como una etiqueta de inventario
   atornillada a la pantalla. En reposo solo asoma el tirador; al pulsarlo el
   panel se desliza desde fuera. No bloquea el scroll, no oscurece la página y
   no atrapa el foco: es deliberadamente NO invasiva.
   z-index 95: sobre el botón flotante de WhatsApp (90) y bajo todo overlay.
   ═══════════════════════════════════════════════════════════ */
.cliente-lateral[hidden] { display: none; }
.cliente-lateral {
  --panel-w: 336px;
  position: fixed; left: 0; top: 50%; z-index: 95;
  display: flex; align-items: stretch;
  /* Tres posiciones con un mismo transform:
     sin clase  → fuera de pantalla del todo (aún no ha aparecido, o descartada)
     .presente  → solo asoma el tirador
     .abierta   → el panel entero a la vista */
  transform: translate(-100%, -50%);
  transition: transform .55s cubic-bezier(0.2, 1, 0.3, 1);
}
.cliente-lateral.presente { transform: translate(calc(-1 * var(--panel-w)), -50%); }
.cliente-lateral.presente.abierta { transform: translate(0, -50%); }

/* ── el panel ─────────────────────────────────────────────── */
.cliente-panel {
  position: relative; overflow: hidden;
  width: var(--panel-w);
  padding: 30px 28px 26px;
  border: 1px solid var(--line-2);
  border-left: none;
  border-radius: 0 4px 4px 0;
  /* Cuatro capas: rayado diagonal de taller, resplandor que entra desde el
     riel, retícula de plano y la placa de fondo. */
  background:
    var(--tread),
    radial-gradient(120% 90% at 0% 50%, rgba(var(--accent-rgb), 0.16) 0%, transparent 58%),
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(255,255,255,0.022) 27px 28px),
    linear-gradient(150deg, #17161a 0%, var(--black-2) 55%, #0d0d0f 100%);
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb), 0.14),
    28px 0 70px -30px rgba(var(--accent-rgb), 0.5),
    0 30px 80px -30px rgba(0,0,0,0.9);
}
/* Escuadras de encuadre en las dos esquinas del lado abierto. */
.cliente-panel::before,
.cliente-panel::after {
  content: ""; position: absolute; right: 14px;
  width: 16px; height: 16px;
  border: 1px solid rgba(var(--accent-rgb), 0.55);
  pointer-events: none;
}
.cliente-panel::before { top: 14px; border-left: none; border-bottom: none; }
.cliente-panel::after { bottom: 14px; border-left: none; border-top: none; }

/* Número fantasma: el mismo recurso que usan las páginas de servicio. Va
   contorneado, no relleno, para que se lea como un troquel de la placa. */
.cliente-cifra {
  /* Muy abajo a propósito: solo asoma el borde superior del troquel. Centrado
     cruzaba el botón y el pie, y ahí dejaba de ser textura para ser estorbo. */
  position: absolute; right: -8px; bottom: -74px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 138px; line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(var(--accent-rgb), 0.13);
  letter-spacing: -0.04em;
  pointer-events: none; user-select: none;
}
/* Remaches: la placa está "atornillada" al borde. */
.cliente-remache {
  position: absolute; left: 10px;
  width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #8b8580, #1c1c1f 72%);
  box-shadow:
    inset 0 -1px 2px rgba(0,0,0,0.9),
    0 0 0 2px rgba(255,255,255,0.035),
    0 1px 2px rgba(255,255,255,0.09);
}
.cliente-remache--a { top: 15px; }
.cliente-remache--b { bottom: 15px; }

/* Franja diagonal de peligro, como la de las cajas de herramientas. Ancla la
   pieza al mundo del taller y da un segundo punto de color. */
.cliente-panel > .cliente-eyebrow::after {
  content: ""; position: absolute; right: 0; top: 0;
  width: 92px; height: 5px;
  background: repeating-linear-gradient(
    -45deg,
    var(--orange) 0 6px,
    transparent 6px 12px
  );
  opacity: 0.85;
}

.cliente-eyebrow {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--orange-soft);
  text-shadow: 0 0 14px rgba(var(--accent-rgb), 0.6);
  margin-bottom: 18px; padding-top: 14px;
}
.cliente-eyebrow i {
  width: 6px; height: 6px; background: var(--orange); flex-shrink: 0;
  box-shadow: 0 0 10px 1px rgba(var(--accent-rgb), 0.9);
}

.cliente-titulo {
  font-family: 'Archivo Black', sans-serif;
  font-size: 25px; line-height: 1.08;
  text-transform: uppercase; color: var(--text);
  margin-bottom: 12px;
  position: relative;
}
/* La palabra encendida: el gesto de marca del sitio, aquí con neón. */
.cliente-titulo em {
  font-style: normal;
  color: var(--orange-soft);
  text-shadow: 0 0 6px rgba(var(--accent-rgb), 0.55), 0 0 24px rgba(var(--accent-rgb), 0.35);
}

.cliente-texto {
  font-size: 13.5px; line-height: 1.55; color: var(--text-dim);
  margin-bottom: 22px;
  padding-left: 12px;
  border-left: 2px solid rgba(var(--accent-rgb), 0.35);
}

.cliente-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%;
  padding: 14px 18px;
  border-radius: 100px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 13px; letter-spacing: 0.02em;
  color: #fff; text-decoration: none;
  background: linear-gradient(135deg, var(--orange-soft), var(--orange) 55%, var(--orange-deep));
  box-shadow: var(--orange-glow);
  transition: transform .25s, box-shadow .25s, filter .25s;
}
.cliente-cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.7), 0 18px 46px -14px rgba(var(--accent-rgb), 0.85);
}
.cliente-pie {
  display: block; margin-top: 12px; text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-mute);
}

/* ── el tirador ───────────────────────────────────────────── */
.cliente-tirador {
  display: flex; flex-direction: column; align-items: stretch;
  align-self: center;
}
.cliente-abrir {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 20px 9px 16px;
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  border-left: none;
  border-radius: 0 12px 12px 0;
  background: linear-gradient(180deg, #191819, #101011);
  color: var(--text);
  cursor: pointer;
  /* El tubo encendido del borde: el neón vive aquí. */
  box-shadow:
    inset 2px 0 0 var(--orange),
    inset 6px 0 14px -6px rgba(var(--accent-rgb), 0.9),
    14px 0 34px -16px rgba(var(--accent-rgb), 0.75);
  transition: box-shadow .3s, background .3s;
}
.cliente-abrir:hover {
  background: linear-gradient(180deg, #201d1c, #131212);
  box-shadow:
    inset 2px 0 0 var(--orange-soft),
    inset 8px 0 18px -6px rgba(var(--accent-rgb), 1),
    18px 0 46px -14px rgba(var(--accent-rgb), 0.95);
}
.cliente-abrir-txt {
  writing-mode: vertical-rl;
  font-family: 'Archivo Black', sans-serif;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.45);
}
.cliente-abrir-flecha {
  width: 14px; height: 14px; color: var(--orange-soft);
  transition: transform .4s cubic-bezier(0.2, 1, 0.3, 1);
}
.cliente-lateral.abierta .cliente-abrir-flecha { transform: rotate(180deg); }

/* La X descarta del todo; el tirador solo repliega. Se separan visualmente
   para que no se confundan: la X va arriba, apagada, y solo se enciende al
   apuntarla. */
/* Alineada al ancho del tirador y pegada encima: así se lee como parte de la
   pestaña y no como un botón suelto flotando en la costura del panel. */
.cliente-descartar {
  align-self: stretch;
  height: 26px; margin-bottom: 4px;
  display: grid; place-items: center;
  border: 1px solid var(--line-2);
  border-left: none;
  border-radius: 0 8px 8px 0;
  background: var(--black-2);
  color: var(--text-dim);
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.cliente-descartar svg { width: 11px; height: 11px; }
.cliente-descartar:hover {
  color: #fff;
  background: var(--orange-deep);
  border-color: var(--orange);
}

.cliente-abrir:focus-visible,
.cliente-descartar:focus-visible,
.cliente-cta:focus-visible {
  outline: 2px solid var(--orange-soft);
  outline-offset: 2px;
}

@media (max-width: 720px) {
  /* En teléfono el panel ocupa casi todo el ancho y el tirador se acorta para
     no convertirse en una columna de borde a borde. */
  .cliente-lateral { --panel-w: min(300px, calc(100vw - 62px)); }
  .cliente-panel { padding: 24px 20px 20px; }
  .cliente-titulo { font-size: 21px; }
  .cliente-cifra { font-size: 104px; }
  .cliente-abrir { padding: 14px 7px 12px; }
  .cliente-abrir-txt { font-size: 11px; letter-spacing: 0.12em; }
}

/* Fin de la hoja. El modo claro completo (LIGHT MODE · POLISH PASS y todas las
   reglas :root[data-theme="light"]) se eliminó al fijar el sitio en modo oscuro
   único; vive en el historial git (tag checkpoint-baseline) si algún día vuelve. */