/* Las fuentes NO se cargan con @import.
   Un @import a un dominio externo deja la hoja en estado "pendiente", y
   mientras una hoja está pendiente el navegador no ejecuta los <script>
   que vengan después: se retrasa DOMContentLoaded y con él TODO el JS de
   la página (menú, salto a #anclas, animaciones). Ahora cada página las
   pide con <link rel=preconnect> + <link rel=stylesheet> en su <head>. */

:root {
  /* Rojo de marca ÚNICO en todo el sitio: el mismo que usan el header
     global (site-header.css) y el Home. Antes esta hoja usaba #E10600, que
     al lado del #CC0000 del header se leía anaranjado. */
  --rojo: #CC0000;
  --rojo-oscuro: #A30000;
  --negro: #0A0A0A;
  --negro2: #141414;
  --gris: #1c1c1c;
  --gris-borde: #2a2a2a;
  --gris-claro: #f5f5f6;
  --gris-texto: #6b6b6b;
  --blanco: #ffffff;
  --dorado: #C9A227;
  --radius: 16px;
  --shadow-sm: 0 4px 16px rgba(0,0,0,.06);
  --shadow-md: 0 16px 40px rgba(0,0,0,.12);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.35);
  --ease: cubic-bezier(.22,1,.36,1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* overflow-x: clip (no 'hidden') → recorta el desbordamiento horizontal SIN
   convertir html/body en contenedor de scroll (hidden fuerza overflow-y:auto y
   eso rompe el position:sticky del showcase). */
html { scroll-behavior: smooth; background: var(--blanco); overflow-x: clip; }

body {
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  background: var(--blanco);
  color: var(--negro);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* clip (no hidden): evita scroll horizontal / bordes blancos sin romper el
     position:sticky del showcase (hidden forzaría overflow-y:auto). */
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
}

/* Páginas de tema oscuro (inversiones): fondo oscuro de raíz para que no se
   asomen laterales blancos alrededor de las secciones oscuras ni en overscroll. */
body.dark-page, html:has(body.dark-page) { background: var(--negro); }

h1, h2, h3, .font-display {
  font-family: 'Poppins', 'Inter', sans-serif;
}

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

/* ===== reveal-on-scroll (estilo Apple: escala + blur) ===== */
.reveal {
  opacity: 0;
  transform: translateY(36px) scale(.97);
  filter: blur(6px);
  transition: opacity 1s var(--ease), transform 1s var(--ease), filter 1s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }

/* ===== HEADER =====
   El header dejó de vivir aquí: ahora es el componente global .rm-header
   (site-header.css + site-header.js), idéntico en las 6 páginas del sitio.
   No añadir reglas `header`, `nav ul` ni `nav a` en este archivo: chocarían
   con el componente global en todas las páginas que cargan styles.css. */

.logo { flex-shrink: 0; display: flex; align-items: center; }
.logo img { height: 50px; width: auto; max-width: none; display: block; }


/* ===== HERO ===== */
.hero {
  /* Full-bleed: la regla genérica `section{max-width:1240px}` dejaba 100px de
     body blanco a cada lado del hero oscuro (bordes blancos en motos.html). */
  max-width: none;
  width: 100%;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(225,6,0,.18), transparent 60%),
    linear-gradient(180deg, var(--negro) 0%, var(--negro2) 100%);
  color: var(--blanco);
  /* Header compacto: el header es sticky (ya ocupa su espacio), así que este
     padding es aire puro → se reduce para que el hero no sobre tanto espacio. */
  padding: 60px 24px 56px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
@media (max-width: 768px) { .hero { padding: 44px 20px 44px; } }

.hero::before {
  content: '';
  position: absolute;
  inset: -10% -10% -10% -10%;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, black, transparent 75%);
  pointer-events: none;
  transform: translateY(var(--parallax-y, 0px));
  will-change: transform;
}

.hero-kicker, .hero h1, .hero p, .hero-cta, .hero-tag { will-change: transform, opacity; }

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(225,6,0,.12);
  border: 1px solid rgba(225,6,0,.3);
  color: #ff5d52;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 30px;
  margin-bottom: 26px;
  position: relative;
  z-index: 1;
}

.hero h1 {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 14px;
  letter-spacing: -.5px;
  position: relative;
  z-index: 1;
}

.hero h1 span { color: var(--rojo); }

.hero p {
  font-size: 19px;
  margin-bottom: 34px;
  color: #b8b8b8;
  position: relative;
  z-index: 1;
}

.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--rojo);
  color: var(--blanco);
  padding: 17px 38px;
  border-radius: 10px;
  font-size: 17px;
  font-weight: 600;
  transition: transform .2s var(--ease), box-shadow .2s;
  box-shadow: 0 10px 30px rgba(225,6,0,.4);
  position: relative;
  z-index: 1;
}

.hero-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(225,6,0,.5);
}

.hero-tag {
  margin-top: 26px;
  font-size: 13px;
  color: #777;
  letter-spacing: .3px;
  position: relative;
  z-index: 1;
}

/* ===== SECTIONS ===== */
section { padding: 90px 24px; max-width: 1240px; margin: 0 auto; }

.eyebrow {
  text-align: center;
  display: block;
  color: var(--rojo);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.section-title {
  text-align: center;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -.3px;
  margin-bottom: 10px;
}

.section-title span { color: var(--rojo); }

.section-subtitle {
  text-align: center;
  color: var(--gris-texto);
  margin-bottom: 50px;
  font-size: 17px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* ===== SHOWCASE estilo Apple (imagen fija + specs en scroll) ===== */
.showcase {
  background: var(--negro);
  color: var(--blanco);
  padding: 0;
  max-width: none;
}

.showcase-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  padding: 0 24px;
}

.showcase-visual {
  position: relative;
}

.showcase-visual-inner {
  position: sticky;
  top: calc(var(--rm-header-h, 116px) + 14px);
  /* Marco apaisado (4:3) en vez de un alto fijo en vh: las fotos de moto
     son horizontales, así que este encuadre las muestra completas y a
     buen tamaño en lugar de dejar franjas vacías arriba y abajo. */
  aspect-ratio: 4 / 3;
  height: auto;
  max-height: 74vh;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background: radial-gradient(ellipse 70% 70% at 50% 50%, rgba(225,6,0,.14), transparent 70%), linear-gradient(160deg, #141414, #0a0a0a);
  border: 1px solid #232323;
  overflow: hidden;
}

/* Las fotos del showcase vienen con proporciones muy distintas (1:1 de
   estudio, 1.43, y panorámicas de 2.67 como la TVS RTR 200). Con
   object-fit:cover las más anchas se recortaban y quedaban ruedas fuera
   del encuadre, así que se muestran completas y el panel hace de marco. */
.showcase-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  /* El hueco inferior deja libre la banda donde van el nombre del modelo y
     la marca: antes se encimaban sobre las fotos de fondo blanco. */
  padding: 20px 20px 62px;
  transition: transform .6s var(--ease), opacity .6s var(--ease);
}

.showcase-visual-inner::after {
  content: attr(data-active);
  display: none;
}

.showcase-model-name {
  position: absolute;
  bottom: 28px;
  left: 28px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 20px;
}

.showcase-model-price {
  position: absolute;
  bottom: 28px;
  right: 28px;
  font-weight: 700;
  color: var(--rojo);
  font-size: 16px;
}

.showcase-frames {
  padding: 14vh 0;
}

.showcase-frame {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: .4;
  transition: opacity .4s;
}

.showcase-frame.is-active { opacity: 1; }
/* Texto del frame activo: más brillante y legible (no opaco ni difuminado). */
.showcase-frame.is-active h3 { color: #ffffff; }
.showcase-frame.is-active p { color: #e6e6e6; }
.showcase-frame.is-active .showcase-price { color: #ffffff; }

.showcase-frame .showcase-tag {
  color: var(--rojo);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.showcase-frame h3 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 14px;
  letter-spacing: -.3px;
}

.showcase-frame p {
  color: #cfcfcf;
  font-size: 16px;
  margin-bottom: 18px;
  max-width: 380px;
}

.showcase-frame .showcase-price {
  font-family: 'Poppins', sans-serif;
  font-size: 26px;
  font-weight: 800;
}

.showcase-frame .showcase-price span {
  font-size: 13px;
  font-weight: 400;
  color: #888;
}

@media (max-width: 900px) {
  .showcase-inner { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  /* Sin min-width:0 las columnas del grid crecen hasta el contenido más
     ancho (min-width:auto) y la sección se salía del viewport en móvil. */
  .showcase-visual, .showcase-frames { min-width: 0; }
  .showcase-visual-inner {
    position: relative;
    top: 0;
    height: auto;          /* el marco 4:3 manda también en móvil */
    max-height: 46vh;
  }
  .showcase-img { padding: 14px 14px 52px; }
  .showcase-frame { min-height: auto; padding: 40px 0; }
  .showcase-frame p { max-width: none; }
  .showcase-frames { padding: 4vh 0; }
}

/* ===== CATALOGO ===== */
.filtros {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.filtro-btn {
  background: var(--blanco);
  border: 1px solid #e2e2e2;
  padding: 9px 20px;
  border-radius: 30px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  transition: all .2s var(--ease);
}

.filtro-btn.active, .filtro-btn:hover {
  background: var(--negro);
  color: var(--blanco);
  border-color: var(--negro);
}

.grid-motos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 28px;
}

.moto-card {
  border: 1px solid #ededed;
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  background: var(--blanco);
}

.moto-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

.moto-img {
  height: 190px;
  background: linear-gradient(135deg, #f0f0f0, #fafafa);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #bbb;
  font-size: 13px;
  position: relative;
}

.moto-marca-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--negro);
  color: var(--blanco);
  font-size: 10.5px;
  letter-spacing: .5px;
  padding: 5px 11px;
  border-radius: 5px;
  font-weight: 700;
}

.moto-info { padding: 20px; }

.moto-info h3 { font-size: 19px; font-weight: 600; margin-bottom: 4px; }

.moto-marca { color: #999; font-size: 13px; margin-bottom: 14px; }

.moto-precio {
  font-size: 25px;
  font-weight: 800;
  color: var(--negro);
  font-family: 'Poppins', sans-serif;
}

.moto-precio small {
  font-size: 13px;
  font-weight: 400;
  color: #999;
}

.moto-semanal {
  color: var(--rojo);
  font-weight: 700;
  font-size: 14.5px;
  margin: 6px 0 16px;
}

.btn-moto {
  display: block;
  text-align: center;
  background: var(--negro);
  color: var(--blanco);
  padding: 11px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  transition: background .2s;
}

.btn-moto:hover { background: var(--rojo); }

/* ===== DOLOR / PAIN POINT ===== */
.pain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 26px;
}

.pain-card {
  background: var(--gris-claro);
  border-radius: var(--radius);
  padding: 30px 26px;
  text-align: center;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}

.pain-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); }

.pain-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(225,6,0,.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}

.pain-icon svg { width: 26px; height: 26px; stroke: var(--rojo); }

.pain-card h3 { font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.pain-card p { font-size: 14px; color: #777; }

/* ===== 3 PASOS ===== */
.steps-section {
  background: var(--negro);
  color: var(--blanco);
  border-radius: var(--radius);
  max-width: 1240px;
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 30px;
  position: relative;
}

.step-card {
  text-align: center;
  padding: 10px;
  position: relative;
}

.step-num {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--rojo);
  color: var(--blanco);
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  box-shadow: 0 8px 24px rgba(225,6,0,.4);
}

.step-card h3 { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.step-card p { font-size: 14px; color: #999; }

/* ===== DIFERENCIADORES ===== */
.pilares-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}

.pilar-card {
  text-align: center;
  padding: 28px 20px;
  border: 1px solid #ececec;
  border-radius: var(--radius);
  transition: border-color .25s, transform .25s var(--ease), box-shadow .25s;
}

.pilar-card:hover {
  border-color: var(--rojo);
  transform: translateY(-4px);
  box-shadow: var(--shadow-sm);
}

.pilar-icon {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  background: var(--negro);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}

.pilar-icon svg { width: 26px; height: 26px; stroke: var(--rojo); }

.pilar-card h3 { font-size: 16.5px; font-weight: 600; margin-bottom: 8px; }
.pilar-card p { font-size: 13.5px; color: #777; }

/* ===== PRUEBA SOCIAL ===== */
.social-section { background: #fafafa; border-radius: var(--radius); }

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.testimonial-card {
  background: var(--blanco);
  border-radius: var(--radius);
  padding: 28px;
  border: 1px solid #eee;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}

.testimonial-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); }

.testimonial-quote {
  font-size: 14.5px;
  color: #333;
  margin-bottom: 20px;
  line-height: 1.6;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.testimonial-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--negro);
  color: var(--blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}

.testimonial-author strong { display: block; font-size: 14px; }
.testimonial-author span { font-size: 12.5px; color: #999; }

/* ===== CATÁLOGO POR MARCA (tabs + paneles) ===== */
.marca-tabs { margin-bottom: 30px; }

.marca-panels { max-width: 980px; margin: 0 auto; }

.marca-panel {
  display: none;
  animation: fadeInPanel .4s var(--ease);
}

.marca-panel.is-active { display: block; }

@keyframes fadeInPanel {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.categoria-block { margin-bottom: 26px; }

.categoria-block h4 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--rojo);
  margin-bottom: 12px;
}

.modelo-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.modelo-chip {
  background: var(--gris-claro);
  border: 1px solid #e8e8e8;
  padding: 7px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  color: #333;
  transition: background .2s, border-color .2s;
}

.modelo-chip:hover {
  background: var(--negro);
  color: var(--blanco);
  border-color: var(--negro);
}

.marca-cta {
  display: inline-flex;
  margin-top: 10px;
  padding: 13px 28px;
  width: auto;
}

/* ===== AGENCIAS ===== */
.grid-agencias {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}

.agencia-card {
  background: var(--gris-claro);
  border-radius: var(--radius);
  padding: 28px;
  border-left: 4px solid var(--rojo);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  /* Columna: alto consistente y botón alineado al fondo entre tarjetas. */
  display: flex;
  flex-direction: column;
  height: 100%;
}

.agencia-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-sm);
}

.agencia-card.proxima {
  border-left-color: #bbb;
  opacity: .85;
}

.agencia-card h3 {
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 12px;
}

.badge-proxima {
  display: inline-block;
  background: #aaa;
  color: var(--blanco);
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 4px;
  margin-left: 8px;
  vertical-align: middle;
}

.agencia-card p {
  font-size: 14px;
  color: #555;
  margin-bottom: 6px;
}

.agencia-card p strong { color: var(--negro); }

/* ===== INVERSIONES ===== */
.inversiones-bg {
  background: var(--negro);
  color: var(--blanco);
  position: relative;
}

/* franja de confianza */
.trust-bar {
  background: var(--negro2);
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: 0;
}

.trust-bar .trust-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 46px 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 30px;
  text-align: center;
}

.trust-stat .num {
  font-family: 'Poppins', sans-serif;
  font-size: 34px;
  font-weight: 800;
  color: var(--blanco);
}

.trust-stat .num span { color: var(--rojo); }

.trust-stat .label {
  color: #999;
  font-size: 13px;
  margin-top: 6px;
  letter-spacing: .3px;
}

.trust-badges {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 54px;
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  padding: 10px 18px;
  border-radius: 30px;
  font-size: 13px;
  color: #ddd;
  font-weight: 500;
}

.trust-badge svg { width: 16px; height: 16px; stroke: var(--dorado); flex-shrink: 0; }

.grid-inversion {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 26px;
}

.grid-inversion { align-items: stretch; }

.modelo-card {
  background: linear-gradient(160deg, #161616, #101010);
  border-radius: var(--radius);
  padding: 40px 32px 32px;
  text-align: center;
  border: 1px solid #262626;
  transition: border-color .25s, transform .25s var(--ease), box-shadow .25s;
  position: relative;
  /* Layout de columna para alinear título, cuerpo y CTA entre tarjetas */
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* La lista crece y empuja el CTA al fondo → todos los botones alineados */
.modelo-card ul { flex: 1 1 auto; }
.modelo-card .modelo-cta { align-self: center; margin-top: 22px; }
/* Tarjeta destacada: más aire arriba para alojar el badge sin encimarse */
.modelo-card.destacado { padding-top: 58px; }

.modelo-card:hover {
  border-color: var(--rojo);
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(225,6,0,.18);
}

.modelo-card.destacado {
  border-color: var(--dorado);
}

.modelo-badge {
  position: absolute;
  /* Dentro de la tarjeta (la card tiene overflow:hidden por el glow del cursor,
     por eso el badge no puede sobresalir hacia arriba o se corta). */
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--dorado);
  color: var(--negro);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 20px;
  white-space: nowrap;
  max-width: calc(100% - 28px);
  z-index: 2;
  line-height: 1;
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
}

.modelo-letra {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--rojo);
  color: var(--blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  font-family: 'Poppins', sans-serif;
  margin: 0 auto 18px;
}

.modelo-card h3 { font-size: 19px; font-weight: 600; margin-bottom: 10px; }

.modelo-rendimiento {
  font-size: 30px;
  font-weight: 800;
  color: var(--rojo);
  margin-bottom: 10px;
  font-family: 'Poppins', sans-serif;
}

.modelo-card > p { color: #999; font-size: 14px; }

.modelo-card ul {
  list-style: none;
  text-align: left;
  font-size: 13.5px;
  color: #ccc;
  margin-top: 18px;
  border-top: 1px solid #262626;
  padding-top: 18px;
}

.modelo-card ul li { padding: 5px 0; }

.modelo-card ul li::before { content: "✓ "; color: var(--rojo); font-weight: 700; }

.inversion-disclaimer {
  text-align: center;
  font-size: 12px;
  color: #666;
  margin-top: 36px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* ===== FORMULARIO CREDITO / INVERSION ===== */
.credito-bg { background: var(--gris-claro); }

.form-credito {
  max-width: 600px;
  margin: 0 auto;
  background: var(--blanco);
  padding: 40px;
  border-radius: 20px;
  box-shadow: var(--shadow-md);
}

.form-credito label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: #888;
  margin: 16px 0 7px;
}

.form-credito input, .form-credito select {
  width: 100%;
  padding: 13px 14px;
  border: 1.5px solid #e3e3e3;
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  transition: border-color .2s;
}

.form-credito input:focus, .form-credito select:focus {
  outline: none;
  border-color: var(--rojo);
}

.form-credito button {
  width: 100%;
  margin-top: 28px;
  background: var(--rojo);
  color: var(--blanco);
  border: none;
  padding: 17px;
  font-size: 16.5px;
  font-weight: 700;
  border-radius: 10px;
  cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s;
  box-shadow: 0 10px 26px rgba(225,6,0,.3);
}

.form-credito button:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(225,6,0,.4); }

.form-confirm {
  display: none;
  text-align: center;
  padding: 50px 20px;
}

.form-confirm h3 { color: var(--rojo); margin-bottom: 10px; font-size: 24px; }

/* FOOTER — ahora es el componente global .rm-footer (site-footer.css). No añadir reglas `footer` aquí. */



.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #25D366;
  color: var(--blanco);
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
  z-index: 200;
  transition: transform .2s var(--ease);
}
.whatsapp-float:hover { transform: scale(1.08); }
.whatsapp-float svg { width: 28px; height: 28px; }

/* El menú hamburguesa forma parte del header global (site-header.css). */

@media (max-width: 768px) {
  .hero h1 { font-size: 32px; }
  .hero p { font-size: 16px; }
  section { padding: 64px 20px; }
}

/* ===== PATHS — switcher moto/inversión como sección (no toda la home) ===== */
.paths-section { background: var(--negro); color: var(--blanco); border-radius: var(--radius); max-width: 1240px; }

.paths-section .section-subtitle { color: #999; }

.paths-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.path-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 36px 34px;
  border-radius: var(--radius);
  border: 1px solid #232323;
  transition: transform .25s var(--ease), border-color .25s, box-shadow .25s;
  position: relative;
  overflow: hidden;
}

.path-card--moto {
  background: radial-gradient(ellipse 90% 70% at 20% 0%, rgba(225,6,0,.14), transparent 60%), #121212;
}

.path-card--inversion {
  background: radial-gradient(ellipse 90% 70% at 80% 0%, rgba(201,162,39,.12), transparent 60%), #121212;
}

.path-card:hover { transform: translateY(-5px); }
.path-card--moto:hover { border-color: var(--rojo); box-shadow: 0 16px 40px rgba(225,6,0,.18); }
.path-card--inversion:hover { border-color: var(--dorado); box-shadow: 0 16px 40px rgba(201,162,39,.15); }

.path-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}

.path-card--moto .path-icon svg { width: 26px; height: 26px; stroke: var(--rojo); }
.path-card--inversion .path-icon svg { width: 26px; height: 26px; stroke: var(--dorado); }

.path-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.path-card--moto .path-kicker { color: #ff5d52; }
.path-card--inversion .path-kicker { color: var(--dorado); }

.path-card h3 { font-size: 24px; font-weight: 700; margin-bottom: 10px; }
.path-card p { color: #999; font-size: 14.5px; margin-bottom: 22px; }

.path-cta { font-weight: 600; font-size: 14.5px; }
.path-card--moto .path-cta { color: var(--rojo); }
.path-card--inversion .path-cta { color: var(--dorado); }

@media (max-width: 768px) {
  .paths-grid { grid-template-columns: 1fr; }
}

/* =====================================================
   GATEWAY — split screen pro (legado, ya no usado en la home)
   ===================================================== */
.gateway-body {
  background: var(--negro);
  min-height: 100vh;
  overflow-x: hidden;
}

.gateway-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: center;
  padding: 30px 0 0;
  z-index: 5;
}

.gateway-top img { height: 46px; }

.gateway-split {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
}

.gateway-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 140px 50px 60px;
  color: var(--blanco);
  overflow: hidden;
  transition: flex-grow .45s var(--ease);
  isolation: isolate;
}

.gateway-panel--moto {
  background:
    radial-gradient(ellipse 90% 70% at 30% 20%, rgba(225,6,0,.16), transparent 60%),
    linear-gradient(160deg, #0c0c0c, #1a1a1a);
  border-right: 1px solid rgba(255,255,255,.07);
}

.gateway-panel--inversion {
  background:
    radial-gradient(ellipse 90% 70% at 70% 20%, rgba(201,162,39,.14), transparent 60%),
    linear-gradient(200deg, #0c0c0c, #161412);
}

.gateway-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 38px 38px;
  z-index: -1;
}

.gateway-panel:hover { background-position: center; }

.gateway-icon-wrap {
  width: 78px;
  height: 78px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}

.gateway-panel--moto .gateway-icon-wrap svg { stroke: var(--rojo); }
.gateway-panel--inversion .gateway-icon-wrap svg { stroke: var(--dorado); }
.gateway-icon-wrap svg { width: 34px; height: 34px; }

.gateway-panel-kicker {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.gateway-panel--moto .gateway-panel-kicker { color: #ff5d52; }
.gateway-panel--inversion .gateway-panel-kicker { color: var(--dorado); }

.gateway-panel h2 {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 14px;
  letter-spacing: -.3px;
}

.gateway-panel p {
  color: #aaa;
  font-size: 15px;
  max-width: 360px;
  margin-bottom: 30px;
}

.gateway-panel-stats {
  display: flex;
  gap: 26px;
  margin-bottom: 34px;
}

.gateway-panel-stats div { text-align: center; }

.gateway-panel-stats .n {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 20px;
  display: block;
}

.gateway-panel--moto .gateway-panel-stats .n { color: var(--rojo); }
.gateway-panel--inversion .gateway-panel-stats .n { color: var(--dorado); }

.gateway-panel-stats .l { font-size: 11px; color: #888; }

.gateway-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 32px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 15px;
  transition: transform .2s var(--ease), box-shadow .2s;
}

.gateway-panel--moto .gateway-cta-btn {
  background: var(--rojo);
  color: var(--blanco);
  box-shadow: 0 10px 28px rgba(225,6,0,.4);
}

.gateway-panel--inversion .gateway-cta-btn {
  background: var(--dorado);
  color: var(--negro);
  box-shadow: 0 10px 28px rgba(201,162,39,.35);
}

.gateway-cta-btn:hover { transform: translateY(-3px) translateX(0); }

.gateway-divider {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  background: var(--negro);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: #888;
  letter-spacing: .5px;
  z-index: 6;
}

.gateway-bottom {
  position: absolute;
  bottom: 22px; left: 0; right: 0;
  text-align: center;
  color: #555;
  font-size: 12.5px;
  z-index: 5;
}

@media (max-width: 860px) {
  .gateway-split { grid-template-columns: 1fr; }
  .gateway-panel--moto { border-right: none; border-bottom: 1px solid rgba(255,255,255,.07); }
  .gateway-panel { padding: 90px 30px 60px; min-height: 60vh; }
  .gateway-top { padding-top: 22px; }
  .gateway-divider { display: none; }
}

/* =====================================================
   FORTALECIMIENTO VISUAL — sensación 2026 (glow, glass, profundidad)
   ===================================================== */

/* Barra de progreso de scroll */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--rojo), #ff7a52, var(--dorado));
  z-index: 9999;
  box-shadow: 0 0 12px rgba(225,6,0,.6);
  transition: width .1s linear;
}

/* Textura de grano sutil sobre toda la página (sensación premium/film) */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: .025;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Acento de los títulos clave: rojo de marca SÓLIDO.
   Antes llevaban un degradado animado que pasaba por #ff7a52; a media
   animación "a crédito" o "te den vueltas" se leían anaranjados y no
   coincidían con el rojo del resto del sitio. Un solo tono, sin
   degradado ni animación. */
.hero h1 span,
.section-title span,
.gateway-title span {
  color: var(--rojo);
}

/* Orbes de luz flotantes en fondos oscuros */
.hero, .steps-section, .inversiones-bg, .showcase, .paths-section, .gateway-panel, .gateway-split {
  isolation: isolate;
}

/* Contiene el sangrado horizontal de los orbes decorativos (right:-120px).
   OJO: el showcase NO se incluye aquí — overflow/clip en su contenedor rompe el
   position:sticky de la imagen; en su lugar se le quita el orbe (abajo). */
.steps-section, .paths-section, .inversiones-bg { position: relative; overflow-x: clip; }

/* El showcase no lleva orbe (evita desbordamiento sin tocar su sticky). */
.showcase::after { content: none !important; }

.hero::after, .steps-section::after, .inversiones-bg::after, .paths-section::after {
  content: '';
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(225,6,0,.16), transparent 70%);
  filter: blur(10px);
  top: -120px;
  right: -120px;
  z-index: -1;
  pointer-events: none;
  animation: floatOrb 14s ease-in-out infinite;
}

@keyframes floatOrb {
  0%, 100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(-40px, 50px) scale(1.15); }
}

/* Botones: barrido de brillo al hover (sensación táctil/futurista) */
.hero-cta, .btn-credito-nav, .gateway-cta-btn, .path-cta, .form-credito button, .btn-moto, .marca-cta {
  position: relative;
  overflow: hidden;
}

.hero-cta::before, .btn-credito-nav::before, .form-credito button::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  /* Animar transform (compositor) en vez de `left` → barrido fluido, sin trabarse. */
  transform: translateX(-180%) skewX(-20deg);
  transition: transform .6s var(--ease);
  will-change: transform;
  pointer-events: none;
}

.hero-cta:hover::before, .btn-credito-nav:hover::before, .form-credito button:hover::before {
  transform: translateX(320%) skewX(-20deg);
}

/* CTA principal con pulso de glow */
.hero-cta {
  animation: pulseGlow 3.5s ease-in-out infinite;
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 10px 30px rgba(225,6,0,.4); }
  50% { box-shadow: 0 10px 44px rgba(225,6,0,.65), 0 0 0 6px rgba(225,6,0,.08); }
}

/* Glass cards: profundidad real en tarjetas sobre fondo oscuro */
.modelo-card, .step-card, .path-card, .showcase-frame.is-active {
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}

.step-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius);
  padding: 32px 22px;
  transition: transform .3s var(--ease), border-color .3s, background .3s;
}

.step-card:hover {
  transform: translateY(-6px);
  border-color: rgba(225,6,0,.4);
  background: rgba(255,255,255,.05);
}

/* Glow interactivo que sigue al cursor (vía JS, variables --mx/--my) */
.pilar-card, .pain-card, .agencia-card, .testimonial-card, .moto-card, .path-card, .modelo-card {
  position: relative;
  overflow: hidden;
}

.pilar-card::before, .pain-card::before, .agencia-card::before, .testimonial-card::before, .moto-card::before, .path-card::before, .modelo-card::before {
  content: '';
  position: absolute;
  top: var(--my, 50%);
  left: var(--mx, 50%);
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(225,6,0,.10), transparent 70%);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
  z-index: 0;
}

.pilar-card:hover::before, .pain-card:hover::before, .agencia-card:hover::before, .testimonial-card:hover::before, .moto-card:hover::before, .path-card:hover::before, .modelo-card:hover::before {
  opacity: 1;
}

.path-card::before, .modelo-card::before {
  background: radial-gradient(circle, rgba(255,255,255,.06), transparent 70%);
}

/* Chips y tabs de marca: hover con glow en vez de plano */
.modelo-chip:hover, .filtro-btn:hover {
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

.marca-tabs .filtro-btn.active {
  background: linear-gradient(135deg, var(--negro), #2a2a2a);
  box-shadow: 0 6px 18px rgba(0,0,0,.3);
}

/* Header: línea inferior con glow rojo sutil al hacer scroll */
/* El estado is-scrolled del header lo define site-header.css. */

/* Stats con número grande: leve glow para que se sientan "vivos" */
.trust-stat .num, .gateway-panel-stats .n, .path-card .n {
  text-shadow: 0 0 24px currentColor;
}

@media (max-width: 768px) {
  .hero::after, .steps-section::after, .inversiones-bg::after, .showcase::after, .paths-section::after {
    width: 280px; height: 280px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ACTUALIZACIÓN INTEGRAL · componentes nuevos
   (modelos de inversión, calculadora CTA, agencias Maps, formularios GHL)
   ═══════════════════════════════════════════════════════════════ */

/* nota "rendimiento estimado" bajo el % de cada modelo */
.modelo-rend-nota {
  font-size: 12px;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--dorado);
  margin: -4px 0 12px;
}

/* ── CTA Calculadora de inversión (continúa la sección de modelos) ── */
.calc-cta {
  max-width: 1100px;
  margin: 40px auto 0;
}
.calc-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(201,162,39,.14), transparent 55%),
    linear-gradient(150deg, #17130a 0%, #121212 60%, var(--negro) 100%);
  border: 1px solid rgba(201,162,39,.28);
  border-radius: var(--radius);
  padding: 32px 34px;
}
.calc-cta-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dorado);
  margin-bottom: 8px;
}
.calc-cta-text h3 {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(20px, 3vw, 27px);
  font-weight: 800;
  color: var(--blanco);
  line-height: 1.15;
  margin-bottom: 8px;
}
.calc-cta-text p {
  color: #b9b9b9;
  font-size: 14.5px;
  max-width: 560px;
  line-height: 1.6;
}
.calc-cta-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(90deg, var(--dorado), #e0b93f);
  color: var(--negro);
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  padding: 15px 28px;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(201,162,39,.28);
  transition: transform .2s var(--ease), box-shadow .2s;
  white-space: nowrap;
}
.calc-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(201,162,39,.4); }

/* ── Agencias: acciones (Google Maps + Tour 360 próximamente) ── */
.agencia-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: auto;   /* empuja el botón al fondo → alineado entre tarjetas */
  padding-top: 16px;
}
.agencia-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 15px;
  border-radius: 8px;
  text-decoration: none;
  transition: transform .2s var(--ease), background .2s, box-shadow .2s;
}
.agencia-btn-maps {
  background: var(--rojo);
  color: var(--blanco);
  box-shadow: 0 6px 18px rgba(225,6,0,.22);
}
.agencia-btn-maps:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(225,6,0,.34); }
.agencia-btn-360.is-soon {
  background: transparent;
  color: #9a9a9a;
  border: 1px dashed #cfcfcf;
  cursor: not-allowed;
}

/* ── Contenedor de formularios GoHighLevel embebidos ── */
.ghl-form-wrap {
  max-width: 620px;
  margin: 0 auto;
  background: var(--blanco);
  border-radius: 20px;
  box-shadow: var(--shadow-md);
  padding: 14px;
  overflow: hidden;
}
.ghl-form { display: block; width: 100%; }

/* Responsive de los componentes nuevos */
@media (max-width: 720px) {
  .calc-cta-inner { flex-direction: column; align-items: flex-start; text-align: left; padding: 26px 22px; }
  .calc-cta-btn { width: 100%; justify-content: center; }
  .agencia-actions { flex-direction: column; }
  .agencia-btn { justify-content: center; width: 100%; }
  .ghl-form-wrap { padding: 8px; border-radius: 14px; }
}

/* Nota bajo el formulario de crédito. El detalle de requisitos, proceso y
   tiempos vive en la sección #financiamiento de motos.html. */
.credito-faq-note {
  margin-top: 22px;
  text-align: center;
  color: rgba(255,255,255,.55);
  font-size: 13.5px;
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════════════
   AGENCIAS · sistema alineado y homologado al Home
   ───────────────────────────────────────────────────────────────────────
   Antes era una sección clara (#fafafa) con tarjetas cuyos datos no
   alineaban entre sí (las direcciones ocupan 1, 2 o 3 líneas). Ahora usa
   el mismo tratamiento oscuro del Home y una rejilla interna que alinea
   etiqueta y valor, con el CTA siempre al fondo de la tarjeta.
   ═══════════════════════════════════════════════════════════════════════ */
.agencias-section {
  max-width: none;
  width: 100%;
  background: var(--negro);
  color: var(--blanco);
  border-top: 1px solid #2C2C2C;
  border-bottom: 1px solid #2C2C2C;
  padding: clamp(3.5rem, 7vw, 5.5rem) 0;
}
.agencias-inner { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.agencias-section .eyebrow { color: var(--rojo); }
.agencias-section .section-title { color: var(--blanco); }
.agencias-section .section-subtitle {
  color: #a8a8a8;
  max-width: 720px;
}
.agencias-section .section-subtitle strong { color: var(--blanco); }

.agencias-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 18px;
  align-items: stretch;
}

.ag-card {
  display: flex;
  flex-direction: column;
  background: #0f0f0f;
  border: 1px solid #262626;
  border-left: 4px solid var(--rojo);
  border-radius: 14px;
  padding: 26px 24px;
  transition: transform .25s var(--ease), border-color .25s, box-shadow .25s;
}
.ag-card:hover {
  transform: translateY(-4px);
  border-color: #3a3a3a;
  border-left-color: var(--rojo);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
}
/* Sucursal sin dirección confirmada: se distingue sin parecer un error. */
.ag-card--pendiente { border-left-color: #6a6a6a; }

.ag-card-zona {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--rojo);
  margin-bottom: 8px;
}
.ag-card--pendiente .ag-card-zona { color: #8a8a8a; }

.ag-card h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--blanco);
  line-height: 1.25;
  margin-bottom: 16px;
  /* Dos líneas reservadas: los nombres largos (CEDA) no desalinean el resto. */
  min-height: 2.5em;
}

/* Rejilla etiqueta/valor: alinea Dirección · Horario · Tel entre tarjetas. */
.ag-datos { display: grid; gap: 10px; margin: 0 0 18px; }
.ag-datos > div {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 10px;
  align-items: start;
}
.ag-datos dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #7d7d7d;
  padding-top: 2px;
}
.ag-datos dd {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: #c9c9c9;
}
.ag-datos dd a { color: #c9c9c9; }
.ag-datos dd a:hover { color: var(--rojo); }
.ag-datos .ag-pendiente { color: #8a8a8a; font-style: italic; }

.ag-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: auto;          /* CTA siempre al fondo → misma base visual */
  padding-top: 16px;
  border-top: 1px solid #212121;
}
.ag-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;          /* target táctil cómodo */
  padding: 10px 15px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .2s var(--ease), background .2s, box-shadow .2s, border-color .2s;
}
.ag-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.ag-btn--maps {
  background: var(--rojo);
  color: var(--blanco);
  box-shadow: 0 6px 18px rgba(225, 6, 0, .24);
}
.ag-btn--maps:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(225, 6, 0, .36); }
.ag-btn--ghost {
  background: transparent;
  color: #d0d0d0;
  border: 1px solid #333;
}
.ag-btn--ghost:hover { border-color: var(--rojo); color: var(--blanco); }
/* Reservado para el tour 360: al tener la URL, cambiar el <span> por un <a>. */
.ag-btn--soon {
  background: transparent;
  color: #6e6e6e;
  border: 1px dashed #3a3a3a;
  cursor: default;
}
.ag-btn:focus-visible { outline: 2px solid var(--rojo); outline-offset: 3px; }

.agencias-foot {
  margin-top: 26px;
  text-align: center;
  color: #8f8f8f;
  font-size: 14px;
}
.agencias-foot a { color: #ff5d52; font-weight: 600; }
.agencias-foot a:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .agencias-inner { padding: 0 18px; }
  .ag-card h3 { min-height: 0; }
  .ag-datos > div { grid-template-columns: 66px 1fr; }
  .ag-btn { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   FINANCIAMIENTO · escaneable, sin paredes de texto
   Pasos numerados + condiciones reales en tarjetas, antes del formulario.
   ═══════════════════════════════════════════════════════════════════════ */
.fin-section {
  max-width: none;
  width: 100%;
  background: linear-gradient(180deg, #0c0c0c 0%, var(--negro) 100%);
  color: var(--blanco);
  border-bottom: 1px solid #2C2C2C;
  padding: clamp(3.5rem, 7vw, 5.5rem) 0;
}
.fin-inner { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.fin-section .eyebrow { color: var(--rojo); }
.fin-section .section-title { color: var(--blanco); }
.fin-section .section-subtitle { color: #a8a8a8; max-width: 700px; }
.fin-section .section-subtitle strong { color: var(--blanco); }

/* Pasos con conector: el proceso se lee de un vistazo. */
.fin-pasos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0;
  margin-bottom: 46px;
}
.fin-paso { position: relative; padding: 0 16px; text-align: center; }
.fin-paso:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 27px;
  right: -12px;
  width: 24px;
  height: 2px;
  background: linear-gradient(90deg, rgba(225, 6, 0, .7), rgba(225, 6, 0, .15));
}
.fin-paso-num {
  width: 54px;
  height: 54px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: 'Poppins', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--blanco);
  background: linear-gradient(135deg, var(--rojo), #ff4632);
  box-shadow: 0 10px 24px rgba(225, 6, 0, .3);
}
.fin-paso h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--blanco);
  margin-bottom: 7px;
}
.fin-paso p { font-size: 13.5px; line-height: 1.6; color: #9d9d9d; }

/* Condiciones reales del financiamiento. */
.fin-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 16px;
}
.fin-card {
  background: #101010;
  border: 1px solid #262626;
  border-radius: 14px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  transition: transform .25s var(--ease), border-color .25s;
}
.fin-card:hover { transform: translateY(-3px); border-color: #3a3a3a; }
.fin-card-dato {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(24px, 3.4vw, 32px);
  font-weight: 800;
  line-height: 1;
  color: var(--blanco);
  margin-bottom: 8px;
}
.fin-card-dato span { color: var(--rojo); }
.fin-card h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .4px;
  color: #e6e6e6;
  margin-bottom: 7px;
}
.fin-card p { font-size: 13.5px; line-height: 1.6; color: #9d9d9d; }
.fin-nota {
  margin-top: 24px;
  font-size: 13px;
  line-height: 1.7;
  color: #8a8a8a;
  text-align: center;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.fin-nota a { color: #ff5d52; font-weight: 600; }
.fin-cta-row { margin-top: 30px; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

@media (max-width: 700px) {
  .fin-inner { padding: 0 18px; }
  .fin-pasos { grid-template-columns: 1fr; gap: 26px; }
  .fin-paso { padding: 0; }
  .fin-paso:not(:last-child)::after {
    top: auto; right: auto; left: 50%; bottom: -15px;
    width: 2px; height: 16px; transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(225, 6, 0, .7), rgba(225, 6, 0, .15));
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   TEMA OSCURO DE PÁGINA (.dark-page)
   ───────────────────────────────────────────────────────────────────────
   motos.html era un mosaico: hero, showcase, agencias y financiamiento en
   oscuro, pero "¿Cansado de que te den vueltas?", "Por qué RiderMex",
   "Elige tu marca", los testimonios y el formulario en blanco. Ese salto
   de fondo blanco en medio de un sitio oscuro era el quiebre de identidad
   más visible de la revisión de diseño.

   Aquí van SOLO las variantes oscuras de los componentes claros. No se
   cambia ni un tamaño, ni un espaciado, ni la estructura: únicamente el
   color de fondo, el borde y el color de texto.
   ═══════════════════════════════════════════════════════════════════════ */

.dark-page { color: var(--blanco); }

/* Títulos y subtítulos de sección heredaban el negro del body. */
.dark-page .section-title { color: var(--blanco); }
.dark-page .section-subtitle { color: #a8a8a8; }
.dark-page .section-subtitle strong { color: var(--blanco); }

/* Tarjetas "Trámites eternos / Mil documentos / Rechazos sin razón":
   de gris claro a tarjeta oscura con borde rojo, como el resto del sitio. */
.dark-page .pain-card {
  background: linear-gradient(180deg, #161616, #0d0d0d);
  border: 1px solid var(--gris-borde);
  border-left: 4px solid var(--rojo);
}
.dark-page .pain-card:hover { box-shadow: var(--shadow-lg); border-color: rgba(204, 0, 0, .55); }
.dark-page .pain-card h3 { color: var(--blanco); }
.dark-page .pain-card p { color: #a8a8a8; }
.dark-page .pain-icon { background: rgba(204, 0, 0, .16); }

/* Tarjetas "Por qué RiderMex". */
.dark-page .pilar-card {
  background: linear-gradient(180deg, #161616, #0d0d0d);
  border-color: var(--gris-borde);
}
.dark-page .pilar-card:hover { border-color: var(--rojo); box-shadow: var(--shadow-lg); }
.dark-page .pilar-card h3 { color: var(--blanco); }
.dark-page .pilar-card p { color: #a8a8a8; }

/* Testimonios. */
.dark-page .social-section { background: #0d0d0d; border: 1px solid var(--gris-borde); }
.dark-page .testimonial-card {
  background: linear-gradient(180deg, #161616, #0d0d0d);
  border-color: var(--gris-borde);
}
.dark-page .testimonial-card:hover { border-color: rgba(204, 0, 0, .55); box-shadow: var(--shadow-lg); }
.dark-page .testimonial-card p { color: #c8c8c8; }
.dark-page .testimonial-author strong { color: var(--blanco); }
.dark-page .testimonial-author span { color: #8f8f8f; }

/* Sección del formulario de crédito. */
.dark-page .credito-bg { background: #0d0d0d; }
.dark-page .credito-faq-note { color: #a8a8a8; }
.dark-page .ghl-form-wrap { background: var(--blanco); border-radius: 12px; overflow: hidden; }

/* Notas y textos sueltos que quedaban en gris de tema claro. */
.dark-page .inversion-disclaimer,
.dark-page .fin-nota,
.dark-page .ag-card-zona { color: #9a9a9a; }
