/* ═══════════════════════════════════════════════════════════════
   ROMAC Autosales Venezuela — hoja de estilo única
   Negro obsidiana · cereza premium · blanco cálido
   ═══════════════════════════════════════════════════════════════ */

:root {
  --romac-black: #050506;
  --romac-surface: #0b0b0d;
  --romac-card: #101012;
  --romac-cherry: #cf2445;
  --romac-cherry-hover: #e02b50;
  --romac-white: #f7f5f4;
  --romac-muted: #b4afb0;
  --romac-border: rgba(207, 36, 69, 0.48);

  --hilo: rgba(255, 255, 255, 0.07);   /* separadores neutros */
  --cereza-tenue: rgba(207, 36, 69, 0.16);
  --display: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --texto: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --ancho: 1340px;
  --transicion: 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* La cabecera es fija: al saltar a /#preguntas, /#inventario o
   /#contacto el navegador dejaba el título del bloque escondido
   detrás del menú. Una regla lo arregla para todos los anclajes. */
[id] { scroll-margin-top: 96px; }

body {
  margin: 0;
  background: var(--romac-black);
  color: var(--romac-white);
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { margin: 0; font-family: var(--display); text-transform: uppercase; }

a { color: inherit; text-decoration: none; }

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

.contenedor {
  width: min(92%, var(--ancho));
  margin-inline: auto;
}

.cereza { color: var(--romac-cherry); }

.salto-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--romac-cherry);
  color: #fff;
  padding: 10px 18px;
  font-size: 13px;
}
.salto-contenido:focus { left: 16px; top: 16px; }

/* ── Iconos lineales ──────────────────────────────────────── */
.ico {
  width: 17px;
  height: 17px;
  flex: none;
  fill: none;
  stroke: var(--romac-cherry);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Botones ──────────────────────────────────────────────── */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 clamp(18px, 2vw, 28px);
  font-family: var(--display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
  /* reset para cuando .boton cae en un <button> nativo: sin esto el
     navegador pinta su gris de fábrica encima y el texto blanco queda
     ilegible — pasaba en "COMPARTIR TARJETA". Un <a> no lo necesitaba,
     por eso no se había visto hasta ahora. */
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
  transition: background var(--transicion), border-color var(--transicion),
              color var(--transicion), transform var(--transicion);
}
.boton--solido {
  background: var(--romac-cherry);
  color: #fff;
}
.boton--solido:hover { background: var(--romac-cherry-hover); }
.boton--borde {
  border-color: var(--romac-border);
  color: var(--romac-white);
}
.boton--borde:hover {
  border-color: var(--romac-cherry-hover);
  color: var(--romac-cherry-hover);
}
.boton--grande { height: 52px; padding: 0 clamp(24px, 2.8vw, 40px); font-size: 13px; }
.boton:active { transform: translateY(1px); }

/* ══ CABECERA ══════════════════════════════════════════════ */
.cabecera {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  padding: 20px 0;
  transition: background var(--transicion), padding var(--transicion),
              border-color var(--transicion);
  border-bottom: 1px solid transparent;
}
/* La cabecera fija va OPACA a propósito.
   Antes era rgba(...,0.82) con blur(14px), y todo lo que le pasaba por
   debajo se transparentaba: el texto de las tarjetas se leía a través
   del menú, y las fotos (los carros sobre fondo rojo, la foto del
   puerto) dejaban un manchón cálido fijo al lado del logo. El blur no
   lo tapaba, solo lo convertía en mancha en vez de en texto.
   En un sitio casi negro un blur no se percibe, así que además nos
   ahorra un filtro que la GPU recalculaba en cada fotograma.
   Sin scroll la cabecera sigue transparente, que ahí sí interesa: el
   hero se ve por debajo. */
.cabecera.es-fija {
  background: var(--romac-black);
  border-bottom-color: var(--hilo);
  padding: 12px 0;
}
.cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.cabecera__logo img { width: clamp(140px, 14.5vw, 212px); height: auto; }

.menu {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 52px);
}
.menu__lista {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.6vw, 44px);
}
.menu__enlace {
  position: relative;
  display: inline-block;
  padding: 6px 0;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--romac-white);
  transition: color var(--transicion);
}
.menu__enlace:hover { color: var(--romac-cherry-hover); }
.menu__enlace.es-activo::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: var(--romac-cherry);
}

.hamburguesa {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 1px solid var(--hilo);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.hamburguesa span {
  width: 20px;
  height: 1.5px;
  background: var(--romac-white);
  transition: transform var(--transicion), opacity var(--transicion);
}
.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ══ HERO ══════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: clamp(560px, 48vw, 760px);
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--hilo);
}

.hero__fondo {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.hero__fondo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 34%;
}

/* Banderas + vehículos comparten caja: nunca se despegan */
.escena {
  position: absolute;
  right: 1.5%;
  bottom: -3%;
  width: clamp(520px, 61%, 1060px);
  aspect-ratio: 1672 / 941;
  z-index: 2;
}
.escena__vehiculos {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
}
.escena__vehiculos img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 26px 34px rgba(0, 0, 0, 0.55));
  /* apenas un velo abajo para que los cauchos se fundan con el asfalto */
  -webkit-mask-image: linear-gradient(to bottom, #000 0 90%, rgba(0,0,0,0.75) 95%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0 90%, rgba(0,0,0,0.75) 95%, transparent 100%);
}
.escena__bandera {
  position: absolute;
  z-index: 2;
  display: block;
  opacity: 0.88;
}
.escena__bandera img { width: 100%; height: auto; }
.escena__bandera--usa  { left: 10.6%; top: 3.5%; width: 7.9%; }
.escena__bandera--vzla { left: 77%;   top: 7%;   width: 9%; }

.hero__velo {
  position: absolute;
  inset: 0;
  z-index: 4;
  background:
    linear-gradient(90deg, rgba(5,5,6,0.97) 0%, rgba(5,5,6,0.9) 24%, rgba(5,5,6,0.55) 42%, rgba(5,5,6,0) 60%),
    linear-gradient(180deg, rgba(5,5,6,0.72) 0%, rgba(5,5,6,0) 26%, rgba(5,5,6,0) 62%, rgba(5,5,6,0.85) 100%);
}

.hero__contenido {
  position: relative;
  z-index: 5;
  padding-top: 88px;
  padding-bottom: 96px;
  max-width: 100%;
}
.hero__antetitulo {
  margin: 0 0 18px;
  font-family: var(--display);
  font-size: clamp(11px, 0.85vw, 13px);
  font-weight: 700;
  letter-spacing: 0.36em;
  color: var(--romac-cherry);
}
.hero__titulo {
  margin: 0;
  font-size: clamp(42px, 5.3vw, 92px);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: -0.015em;
  text-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
}
.hero__bajada {
  margin: 26px 0 0;
  max-width: 26em;
  font-size: clamp(14px, 1.05vw, 17px);
  color: var(--romac-white);
  opacity: 0.86;
}
.hero__botones {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 34px;
}

/* ── Franja de confianza ──────────────────────────────────── */
.confianza {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  padding: 18px 0;
  border-top: 1px solid var(--hilo);
  background: linear-gradient(180deg, rgba(5,5,6,0) 0%, rgba(5,5,6,0.72) 45%);
}
.confianza__fila {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px clamp(16px, 2.4vw, 40px);
}
.confianza__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-size: clamp(10px, 0.78vw, 12px);
  font-weight: 700;
  letter-spacing: 0.13em;
  color: var(--romac-white);
}
.confianza__punto {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--romac-cherry);
  opacity: 0.75;
}

/* ══ SECCIONES ═════════════════════════════════════════════ */
.seccion { padding: clamp(34px, 3vw, 52px) 0; }
.seccion--cta { padding-top: 0; }

.titulo-seccion {
  margin: 0 0 clamp(16px, 1.6vw, 26px);
  font-size: clamp(20px, 1.9vw, 30px);
  font-weight: 800;
  letter-spacing: 0.005em;
  position: relative;
  padding-bottom: 12px;
}
.titulo-seccion::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 54px;
  height: 3px;
  background: var(--romac-cherry);
}

/* ── Rejilla de inventario ────────────────────────────────── */
.rejilla {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(14px, 1.4vw, 22px);
}

.tarjeta {
  display: block;
  background: var(--romac-card);
  border: 1px solid var(--cereza-tenue);
  border-top: 2px solid var(--romac-cherry);
  overflow: hidden;
  transition: transform var(--transicion), border-color var(--transicion),
              box-shadow var(--transicion);
}
.tarjeta:hover {
  transform: translateY(-4px);
  border-color: var(--romac-border);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.55);
}
.tarjeta__marco {
  position: relative;
  overflow: hidden;
  aspect-ratio: 760 / 598;      /* la caja manda; la foto la llena */
}
.tarjeta__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #08080a;
  transition: transform var(--transicion);
}
.tarjeta:hover .tarjeta__foto { transform: scale(1.03); }

/* insignia de versión (TRD Pro): detalle, nunca protagonista */
.tarjeta__sello {
  position: absolute;
  left: 12px;
  bottom: 11px;
  width: 38%;
  max-width: 104px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.8));
  opacity: 0.95;
  pointer-events: none;
}
.tarjeta__sello img { width: 100%; height: auto; }
.tarjeta__cuerpo { padding: 14px 16px 16px; }
.tarjeta__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.tarjeta__nombre {
  font-size: clamp(10.5px, 0.8vw, 12px);
  font-weight: 700;
  letter-spacing: 0.005em;
  line-height: 1.3;
  min-height: 2.6em;            /* dos líneas: alinea los datos de todas las tarjetas */
  display: flex;
  align-items: center;
}
.tarjeta__etiqueta {
  flex: none;
  padding: 4px 9px;
  border: 1px solid var(--romac-border);
  border-radius: 999px;
  font-family: var(--display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--romac-cherry);
}
.tarjeta__meta {
  margin: 8px 0 0;
  font-size: clamp(10px, 0.72vw, 11.5px);
  color: var(--romac-muted);
}
.tarjeta__meta span { margin: 0 9px; opacity: 0.4; }

/* ── Pasos del proceso ────────────────────────────────────── */
.pasos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.4vw, 22px);
}
.paso {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 22px 24px;
  background: var(--romac-surface);
  border: 1px solid var(--cereza-tenue);
}
.paso__num {
  font-family: var(--display);
  font-size: clamp(28px, 2.4vw, 38px);
  font-weight: 800;
  line-height: 1;
  color: var(--romac-cherry);
}
.paso .ico--paso { width: 26px; height: 26px; margin-top: 2px; stroke-width: 1.3; }
.paso__titulo {
  margin: 0 0 6px;
  font-size: clamp(12px, 0.95vw, 14px);
  font-weight: 700;
  letter-spacing: 0.05em;
}
.paso__texto {
  margin: 0;
  font-size: clamp(11.5px, 0.85vw, 13.5px);
  color: var(--romac-muted);
  line-height: 1.55;
}

/* ── CTA final ────────────────────────────────────────────── */
.cta {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 34px);
  padding: clamp(22px, 2.4vw, 34px) clamp(22px, 3vw, 48px);
  border: 1px solid var(--romac-border);
  background: linear-gradient(90deg, rgba(207,36,69,0.06), rgba(207,36,69,0));
}
.cta .ico--cta { width: 46px; height: 46px; stroke-width: 1.1; opacity: 0.9; margin-left: auto; }
.cta__texto { flex: 0 1 auto; }
.cta .boton { margin-left: auto; }
.cta__titulo {
  margin: 0 0 6px;
  font-size: clamp(17px, 1.65vw, 27px);
  font-weight: 800;
}
.cta__bajada {
  margin: 0;
  font-size: clamp(12.5px, 0.9vw, 14.5px);
  color: var(--romac-muted);
}

/* ── Pie ──────────────────────────────────────────────────── */
.pie {
  border-top: 1px solid var(--hilo);
  padding: 26px 0;
  background: var(--romac-surface);
}
.pie__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.pie__fila { align-items: flex-end; }
.pie__logo { width: 132px; height: auto; opacity: 0.9; margin-bottom: 12px; }
.pie__nota {
  margin: 0;
  font-size: 12.5px;
  color: var(--romac-muted);
  max-width: 46ch;
}
.pie__respaldo {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--romac-muted);
  opacity: 0.75;
}
.pie__respaldo a {
  color: var(--romac-white);
  border-bottom: 1px solid var(--romac-border);
}
.pie__respaldo a:hover { color: var(--romac-cherry-hover); }

.pie__contacto {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}
.pie__wa {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  border: 1px solid var(--romac-border);
  font-family: var(--display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--romac-white);
  transition: border-color var(--transicion), color var(--transicion),
              background var(--transicion);
}
.pie__wa:hover {
  border-color: var(--romac-cherry-hover);
  background: rgba(207, 36, 69, 0.09);
}
.ico--wa { width: 19px; height: 19px; }

.pie__redes { display: flex; gap: 10px; }
.pie__red {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--hilo);
  color: var(--romac-muted);
  transition: color var(--transicion), border-color var(--transicion);
}
.pie__red svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pie__red:hover { color: var(--romac-cherry-hover); border-color: var(--romac-border); }

/* ══ MOVIMIENTO ════════════════════════════════════════════ */
@keyframes entra {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes flota {
  50% { transform: translateY(-10px); }
}
.hero__antetitulo,
.hero__titulo,
.hero__bajada,
.hero__botones { animation: entra 700ms cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.hero__titulo   { animation-delay: 90ms; }
.hero__bajada   { animation-delay: 170ms; }
.hero__botones  { animation-delay: 240ms; }
.escena__vehiculos img { animation: flota 7s ease-in-out 1s infinite; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 1ms !important;
  }
}

/* ══ TABLET ════════════════════════════════════════════════ */
@media (max-width: 1080px) {
  .rejilla { grid-template-columns: repeat(3, 1fr); }
  .pasos { grid-template-columns: repeat(2, 1fr); }
  .escena { width: 58%; right: 0; bottom: 6%; }
  .confianza__punto { display: none; }
  .confianza__fila { gap: 12px clamp(18px, 3vw, 34px); }
  .hero__velo {
    background:
      linear-gradient(90deg, rgba(5,5,6,0.97) 0%, rgba(5,5,6,0.92) 32%, rgba(5,5,6,0.6) 52%, rgba(5,5,6,0.1) 74%),
      linear-gradient(180deg, rgba(5,5,6,0.7) 0%, rgba(5,5,6,0) 30%, rgba(5,5,6,0.9) 100%);
  }
  .cta { flex-wrap: wrap; }
  .cta__texto { flex: 1 1 260px; }
}

@media (max-width: 900px) {
  .hamburguesa { display: inline-flex; order: 3; }
  .menu {
    order: 4;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 max(4vw, 16px);
    /* opaco: al 96% se transparentaba el hero por detras del menu
       abierto, y el blur en un fondo casi negro no se percibe */
    background: var(--romac-black);
    border-bottom: 1px solid var(--hilo);
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height var(--transicion), padding var(--transicion), visibility 0s linear 220ms;
  }
  .menu.es-abierto {
    max-height: 70vh;
    padding: 10px max(4vw, 16px) 22px;
    visibility: visible;
    transition: max-height var(--transicion), padding var(--transicion), visibility 0s;
  }
  .menu__lista { flex-direction: column; align-items: stretch; gap: 0; }
  .menu__enlace {
    display: block;
    padding: 15px 2px;
    border-bottom: 1px solid var(--hilo);
    font-size: 13px;
  }
  .menu__enlace.es-activo::after { bottom: -1px; width: 34px; right: auto; }
  .cabecera__cta { width: 100%; margin-top: 16px; flex: none; }
}

/* ══ TABLET VERTICAL Y MÓVIL ═══════════════════════════════ */
@media (max-width: 900px) {
  .hero {
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding-bottom: 0;
  }
  .hero__fondo { z-index: 0; }
  .hero__fondo img { object-position: 66% 30%; }
  .hero__velo { z-index: 1; }          /* debajo de los vehículos, no encima */
  .hero__contenido { order: 1; }
  .escena { order: 2; }
  .confianza { order: 3; }
  .hero__contenido {
    padding-top: 104px;
    padding-bottom: 22px;
  }
  .hero__titulo { font-size: clamp(36px, 9vw, 62px); }
  .hero__bajada { max-width: none; }
  .hero__bajada br { display: none; }
  .hero__botones { gap: 14px; }

  /* el grupo de vehículos pasa a estar debajo del texto, con las
     banderas todavía detrás de ellos (misma caja .escena) */
  .escena {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    margin: 8px 0 0;
  }
  .hero__velo {
    background:
      linear-gradient(180deg, rgba(5,5,6,0.86) 0%, rgba(5,5,6,0.55) 40%, rgba(5,5,6,0.35) 62%, rgba(5,5,6,0.92) 100%);
  }
  .confianza {
    position: relative;
    padding: 16px 0 4px;
    background: none;
  }
  .confianza__fila { justify-content: flex-start; gap: 12px 18px; }
  .confianza__punto { display: none; }
  .confianza__item { flex: 1 1 44%; font-size: 10.5px; }

  .rejilla { grid-template-columns: repeat(2, 1fr); }
  .cta { flex-direction: column; align-items: flex-start; }
  .cta__texto { flex: 0 1 auto; }
  .cta .ico--cta { margin-left: 0; }
  .pie__fila { flex-direction: column; align-items: flex-start; }
}

/* ══ MÓVIL ═════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .pasos { grid-template-columns: 1fr; }
  .hero__botones { flex-direction: column; align-items: stretch; gap: 12px; }
  .hero__botones .boton { width: 100%; }
  .cta .boton { width: 100%; }

  /* carrusel horizontal: una tarjeta a la vez */
  .rejilla {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 10px;
    scrollbar-width: thin;
  }
  .tarjeta { scroll-snap-align: start; }
}


/* ══ BANDA EDITORIAL ═══════════════════════════════════════ */
.banda {
  padding: clamp(56px, 6vw, 104px) 0;
  border-block: 1px solid var(--hilo);
  background:
    radial-gradient(120% 140% at 80% 50%, rgba(207,36,69,0.10), transparent 60%),
    var(--romac-surface);
}
.banda__frase {
  margin: 0;
  max-width: 20ch;
  font-family: var(--display);
  font-size: clamp(24px, 3.1vw, 50px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

/* ══ CALCULADORA ═══════════════════════════════════════════ */
.seccion__entrada {
  margin: -6px 0 clamp(20px, 2vw, 30px);
  max-width: 62ch;
  font-size: clamp(13px, 1vw, 15px);
  color: var(--romac-muted);
}

.calc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.4vw, 40px);
  align-items: center;
  padding: clamp(24px, 2.6vw, 40px);
  border: 1px solid var(--cereza-tenue);
  background: linear-gradient(120deg, rgba(207,36,69,0.05), transparent 55%), var(--romac-surface);
}
.campo { display: block; }
.campo__etiqueta {
  display: block;
  margin-bottom: 10px;
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--romac-muted);
}
.campo__caja {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  border: 1px solid var(--romac-border);
  background: rgba(0, 0, 0, 0.35);
}
.campo__simbolo {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  color: var(--romac-cherry);
}
.campo__input {
  flex: 1;
  min-width: 0;
  height: 62px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--romac-white);
  font-family: var(--display);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 700;
  letter-spacing: 0.01em;
}
.campo__input:focus { outline: none; }
.campo__caja:focus-within { border-color: var(--romac-cherry-hover); }
.calc__ayuda {
  margin: 12px 0 0;
  font-size: 12.5px;
  color: var(--romac-muted);
}

.calc__resultado {
  padding-left: clamp(0px, 2vw, 34px);
  border-left: 1px solid var(--hilo);
}
.calc__etiqueta {
  margin: 0 0 6px;
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--romac-muted);
}
.calc__cifra {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(24px, 2.5vw, 40px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--romac-white);
}
.calc__a {
  font-size: 0.5em;
  font-weight: 600;
  color: var(--romac-muted);
  margin: 0 4px;
}
.calc__nota {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--romac-muted);
  opacity: 0.85;
}
.calc__cta { margin-top: 20px; }

/* ══ RAZONES PARA CONFIAR ══════════════════════════════════ */
.razones {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(14px, 1.5vw, 22px);
}
.razon {
  padding: clamp(22px, 2.2vw, 32px);
  border: 1px solid var(--cereza-tenue);
  background: var(--romac-surface);
}
.ico--razon {
  width: 30px;
  height: 30px;
  stroke-width: 1.25;
  margin-bottom: 16px;
}
.razon__titulo {
  margin: 0 0 10px;
  font-size: clamp(13px, 1.05vw, 15.5px);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.razon__texto {
  margin: 0;
  font-size: clamp(13px, 0.95vw, 14.5px);
  line-height: 1.65;
  color: var(--romac-muted);
}
.razon__texto strong { color: var(--romac-white); font-weight: 600; }
.razon__enlace {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--romac-cherry-hover);
}
.razon__enlace:hover { color: var(--romac-white); }

/* ══ VENDER O CONSIGNAR ════════════════════════════════════ */
.vender {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(24px, 3vw, 56px);
  align-items: center;
  padding: clamp(26px, 3vw, 48px);
  border: 1px solid var(--hilo);
  background: var(--romac-card);
}
.vender__antetitulo {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: var(--romac-cherry);
}
.vender__titulo {
  margin: 0 0 16px;
  font-size: clamp(20px, 2.1vw, 34px);
  font-weight: 800;
  line-height: 1.1;
}
.vender__bajada {
  margin: 0 0 24px;
  max-width: 44ch;
  font-size: clamp(13px, 0.98vw, 15px);
  color: var(--romac-muted);
}
.vender__pasos { display: grid; gap: 12px; }
.vender__pasos li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  border: 1px solid var(--hilo);
  font-size: clamp(12.5px, 0.92vw, 14px);
  color: var(--romac-white);
}
.vender__pasos span {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--romac-cherry);
  color: #fff;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 1080px) {
  .calc, .razones, .vender { grid-template-columns: 1fr; }
  .calc__resultado { padding-left: 0; border-left: 0; border-top: 1px solid var(--hilo); padding-top: 22px; }
}

/* ══ FICHA DE VEHÍCULO ═════════════════════════════════════ */
.es-ficha .seccion--ficha { padding-top: clamp(104px, 9vw, 132px); }

.miga {
  margin-bottom: clamp(18px, 2vw, 28px);
  font-size: 12.5px;
  color: var(--romac-muted);
}
.miga a:hover { color: var(--romac-cherry-hover); }
.miga span { margin: 0 8px; opacity: 0.4; }
.miga em { font-style: normal; color: var(--romac-white); }

.ficha {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(24px, 3vw, 52px);
  align-items: start;
}
.ficha__foto {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--cereza-tenue);
  border-top: 2px solid var(--romac-cherry);
  background: var(--romac-card);
}
.ficha__foto img { width: 100%; height: auto; display: block; }
.ficha__sello {
  position: absolute;
  left: 22px;
  bottom: 20px;
  width: 26%;
  max-width: 190px;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.8));
}
.ficha__sello img { width: 100%; height: auto; }

.ficha__info .tarjeta__etiqueta { display: inline-block; }
.ficha__titulo {
  margin: 14px 0 0;
  font-size: clamp(24px, 2.6vw, 42px);
  font-weight: 800;
  line-height: 1.05;
}
.ficha__resumen {
  margin: 12px 0 0;
  font-size: clamp(13px, 1vw, 15px);
  color: var(--romac-muted);
}
.ficha__resumen span { margin: 0 8px; opacity: 0.5; }
.ficha__precio {
  margin: 20px 0 0;
  font-family: var(--display);
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 800;
  color: var(--romac-cherry);
}

.ficha__datos {
  margin: 26px 0 0;
  border-top: 1px solid var(--hilo);
}
.dato {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 2px;
  border-bottom: 1px solid var(--hilo);
  font-size: clamp(12.5px, 0.92vw, 14px);
}
.dato dt {
  color: var(--romac-muted);
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  align-self: center;
}
.dato dd { margin: 0; text-align: right; }

.ficha__cta { margin-top: 26px; width: 100%; }
.ficha__compartir { margin-top: 14px; width: 100%; }
.ficha__compartir:disabled { opacity: 0.55; cursor: default; }
.ficha__compartir:disabled:hover { border-color: var(--romac-border); color: var(--romac-white); }
.ficha__letra {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--romac-muted);
}

.rejilla--otros { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1080px) {
  .ficha { grid-template-columns: 1fr; }
  .rejilla--otros { grid-template-columns: repeat(2, 1fr); }
}

/* ── Cotizador: desglose ─────────────────────────────────── */
.calc__desglose {
  margin: 18px 0 0;
  border-top: 1px solid var(--hilo);
}
.calc__desglose div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hilo);
  font-size: clamp(12px, 0.88vw, 13.5px);
}
.calc__desglose dt { color: var(--romac-muted); }
.calc__desglose dd { margin: 0; font-weight: 600; }

.calc__condiciones { margin-top: 16px; display: grid; gap: 8px; }
.calc__condiciones p {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: clamp(12px, 0.88vw, 13.5px);
  color: var(--romac-muted);
}
.calc__condiciones strong { color: var(--romac-cherry); font-size: 1.15em; }
.calc__condiciones em { font-style: normal; opacity: 0.7; }

/* ── Etiqueta de disponibilidad ──────────────────────────── */
.tarjeta__etiqueta.es-stock {
  background: var(--romac-cherry);
  border-color: var(--romac-cherry);
  color: #fff;
}
.tarjeta__etiqueta.es-encargo {
  border-color: var(--hilo);
  color: var(--romac-muted);
}

/* ── Enlaces legales del pie ─────────────────────────────── */
.pie__enlaces {
  margin: 14px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  font-size: 12px;
}
.pie__enlaces a { color: var(--romac-muted); }
.pie__enlaces a:hover { color: var(--romac-cherry-hover); }

/* documentos legales */
.legal { padding: clamp(104px, 9vw, 132px) 0 clamp(48px, 5vw, 80px); }
.legal__cuerpo { max-width: 74ch; }
.legal h1 { font-size: clamp(24px, 2.6vw, 40px); font-weight: 800; margin-bottom: 10px; }
.legal__fecha { margin: 0 0 34px; font-size: 12.5px; color: var(--romac-muted); }
.legal h2 {
  margin: 34px 0 12px;
  font-size: clamp(14px, 1.15vw, 17px);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--romac-white);
}
.legal h2 span { color: var(--romac-cherry); margin-right: 8px; }
.legal p, .legal li {
  font-size: clamp(13px, 0.95vw, 14.5px);
  line-height: 1.75;
  color: var(--romac-muted);
}
.legal p { margin: 0 0 12px; }
.legal ul { margin: 0 0 12px; padding-left: 20px; list-style: disc; }
.legal li { margin-bottom: 7px; }
.legal strong { color: var(--romac-white); font-weight: 600; }
.legal__aviso {
  margin: 0 0 30px;
  padding: 18px 22px;
  border: 1px solid var(--romac-border);
  background: rgba(207, 36, 69, 0.06);
}
.legal__aviso p { margin: 0; color: var(--romac-white); }

/* la disponibilidad va sobre la foto, no compitiendo con el nombre */
.tarjeta__disponibilidad {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.tarjeta__disponibilidad.es-encargo {
  background: rgba(5, 5, 6, 0.72);
  color: var(--romac-white);
}
.tarjeta__nombre { min-height: 2.6em; }

/* ══ CATÁLOGO ══════════════════════════════════════════════ */
.es-catalogo .seccion--catalogo { padding-top: clamp(104px, 9vw, 136px); }

.filtros {
  margin-bottom: clamp(20px, 2.2vw, 32px);
  padding: clamp(16px, 1.8vw, 24px);
  border: 1px solid var(--cereza-tenue);
  background: var(--romac-surface);
}
.filtros__fila {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 14px 16px;
}
.filtro { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.filtro > span {
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--romac-muted);
}
.filtro select,
.filtro input {
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--hilo);
  background: rgba(0, 0, 0, 0.4);
  color: var(--romac-white);
  font-family: var(--texto);
  font-size: 13.5px;
  transition: border-color var(--transicion);
}
.filtro select { cursor: pointer; }
.filtro select:focus,
.filtro input:focus { outline: none; border-color: var(--romac-cherry); }
.filtro option { background: var(--romac-card); }
.filtro--busca { grid-column: span 2; }

.filtros__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--hilo);
}
.filtros__contador {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--romac-white);
}
.filtros__limpiar {
  padding: 0;
  border: 0;
  background: none;
  color: var(--romac-muted);
  font-family: var(--texto);
  font-size: 12.5px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.filtros__limpiar:hover { color: var(--romac-cherry-hover); }

.rejilla--catalogo { grid-template-columns: repeat(4, 1fr); }

.tarjeta__precio { margin: 8px 0 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.precio {
  font-family: var(--display);
  font-size: clamp(14px, 1.1vw, 17px);
  font-weight: 800;
  color: var(--romac-white);
}
.precio--consultar {
  font-size: clamp(11.5px, 0.85vw, 13px);
  font-weight: 700;
  color: var(--romac-cherry);
  letter-spacing: 0.04em;
}
.precio__bs { font-size: 11.5px; color: var(--romac-muted); }

.sin-resultados {
  padding: clamp(40px, 5vw, 72px) 20px;
  border: 1px dashed var(--hilo);
  text-align: center;
}
.sin-resultados p { margin: 0 0 8px; font-size: clamp(14px, 1.1vw, 17px); }
.sin-resultados__ayuda { color: var(--romac-muted); font-size: 13.5px !important; margin-bottom: 22px !important; }

@media (max-width: 1080px) {
  .rejilla--catalogo { grid-template-columns: repeat(2, 1fr); }
  .filtro--busca { grid-column: span 2; }
}

/* ── Ficha: galería y precio en Bs ───────────────────────── */
.ficha__miniaturas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.miniatura {
  padding: 0;
  border: 1px solid var(--hilo);
  background: var(--romac-card);
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  transition: border-color var(--transicion), opacity var(--transicion);
  opacity: 0.65;
}
.miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.miniatura:hover { opacity: 1; }
.miniatura.es-activa { border-color: var(--romac-cherry); opacity: 1; }
.ficha__precio-bs {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--romac-muted);
}
.ficha__foto .tarjeta__disponibilidad { top: 14px; right: 14px; }

/* Accesos rápidos sobre la foto: WhatsApp y compartir tarjeta, en la
   esquina de abajo — sin competir con la insignia de arriba. */
.ficha__foto-acciones {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 3;
  display: flex;
  gap: 8px;
}
.foto-accion {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--romac-border);
  background: rgba(5, 5, 6, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--romac-white);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color var(--transicion), color var(--transicion), transform var(--transicion);
}
.foto-accion svg { width: 19px; height: 19px; }
.foto-accion:hover { border-color: var(--romac-cherry-hover); color: var(--romac-cherry-hover); }
.foto-accion:active { transform: translateY(1px); }
.foto-accion:disabled { opacity: 0.5; cursor: default; }

.ficha__galeria { min-width: 0; }

/* ══ ¿CALIFICA PARA CRÉDITO? ═══════════════════════════════ */
.credito {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(20px, 2.4vw, 40px);
  align-items: start;
  padding: clamp(22px, 2.4vw, 36px);
  border: 1px solid var(--cereza-tenue);
  background: var(--romac-surface);
}
.credito__form { display: grid; gap: 16px; align-content: start; }
.credito__form .filtro > span { color: var(--romac-muted); }

.credito__resultado { min-width: 0; }
.credito__titular {
  margin: 0 0 18px;
  font-family: var(--display);
  font-size: clamp(14px, 1.15vw, 18px);
  font-weight: 700;
  color: var(--romac-white);
}
.credito__titular strong { color: var(--romac-cherry); font-size: 1.35em; }

.banco {
  padding: 16px 18px;
  margin-bottom: 10px;
  border: 1px solid var(--hilo);
  border-left: 3px solid var(--romac-cherry);
  background: var(--romac-card);
}
.banco__cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.banco h3 {
  margin: 0;
  font-size: clamp(12.5px, 1vw, 15px);
  font-weight: 700;
  text-transform: none;
}
.banco__pct {
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--romac-cherry);
}
.banco__cifras {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--romac-muted);
}
.banco__cifras strong { color: var(--romac-white); font-weight: 600; }
.banco__nota {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--romac-muted);
  opacity: 0.85;
}

.credito__fuera { margin: 14px 0 0; }
.credito__fuera summary {
  cursor: pointer;
  font-size: 12.5px;
  color: var(--romac-muted);
  text-underline-offset: 3px;
}
.credito__fuera summary:hover { color: var(--romac-cherry-hover); }
.credito__fuera p {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--romac-muted);
}
.credito__fuera strong { color: var(--romac-white); font-weight: 600; }

.credito__pie {
  margin: 16px 0 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--romac-muted);
  opacity: 0.8;
}
.credito__cta { margin-top: 18px; }

.credito__aviso {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 16px;
  padding: 16px 20px;
  border: 1px solid var(--romac-border);
  background: rgba(207, 36, 69, 0.06);
}
.credito__aviso .ico { width: 22px; height: 22px; margin-top: 2px; }
.credito__aviso p {
  margin: 0;
  font-size: clamp(12px, 0.9vw, 13.5px);
  line-height: 1.6;
  color: var(--romac-muted);
}
.credito__aviso strong { color: var(--romac-white); font-weight: 600; }

/* aviso de imagen referencial */
.ficha__referencial {
  margin: 8px 0 0;
  font-size: 11.5px;
  color: var(--romac-muted);
  opacity: 0.8;
}

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

/* display:flex se impone sobre [hidden]; hay que decirlo explícito */
.filtro[hidden] { display: none; }

/* ══ PÁGINA DE IMPORTACIÓN ═════════════════════════════════ */
.es-importacion .seccion--importacion { padding-top: clamp(104px, 9vw, 136px); }
.titulo-seccion--suelto { margin-top: clamp(40px, 4vw, 64px); }

.proceso { display: grid; gap: 12px; }
.etapa {
  display: flex;
  gap: clamp(16px, 1.8vw, 28px);
  padding: clamp(18px, 2vw, 26px) clamp(18px, 2.2vw, 30px);
  border: 1px solid var(--cereza-tenue);
  background: var(--romac-surface);
}
.etapa__num {
  flex: none;
  font-family: var(--display);
  font-size: clamp(26px, 2.4vw, 38px);
  font-weight: 800;
  line-height: 1;
  color: var(--romac-cherry);
  opacity: 0.85;
}
.etapa h2 {
  margin: 0 0 4px;
  font-size: clamp(14px, 1.15vw, 18px);
  font-weight: 700;
  letter-spacing: 0.01em;
}
.etapa__tiempo {
  margin: 0 0 10px !important;
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--romac-cherry);
}
.etapa p {
  margin: 0;
  font-size: clamp(13px, 0.95vw, 14.5px);
  line-height: 1.7;
  color: var(--romac-muted);
}
.etapa strong { color: var(--romac-white); font-weight: 600; }

.numeros {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.4vw, 20px);
}
.numero {
  padding: clamp(20px, 2.2vw, 30px);
  border: 1px solid var(--hilo);
  background: var(--romac-card);
}
.numero__cifra {
  display: block;
  margin-bottom: 12px;
  font-family: var(--display);
  font-size: clamp(28px, 3vw, 46px);
  font-weight: 800;
  line-height: 1;
  color: var(--romac-cherry);
}
.numero p {
  margin: 0;
  font-size: clamp(12px, 0.9vw, 13.5px);
  line-height: 1.6;
  color: var(--romac-muted);
}
.numero strong { color: var(--romac-white); font-weight: 600; }

.alcance {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 1.6vw, 24px);
  margin-top: clamp(28px, 3vw, 44px);
}
.alcance__bloque {
  padding: clamp(20px, 2.2vw, 30px);
  border: 1px solid var(--hilo);
  background: var(--romac-surface);
}
.alcance__bloque h3 {
  margin: 0 0 16px;
  font-size: clamp(13px, 1.05vw, 16px);
  font-weight: 700;
}
.alcance ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.alcance li {
  position: relative;
  padding-left: 26px;
  font-size: clamp(12.5px, 0.92vw, 14px);
  line-height: 1.55;
  color: var(--romac-muted);
}
.alcance li::before {
  position: absolute;
  left: 0;
  top: -1px;
  font-weight: 700;
}
.alcance__si li::before { content: '✓'; color: var(--romac-cherry); }
.alcance__no li::before { content: '×'; color: var(--romac-muted); font-size: 1.25em; line-height: 1; }
.cta--importacion { margin-top: clamp(28px, 3vw, 44px); }

@media (max-width: 1080px) {
  .numeros { grid-template-columns: repeat(2, 1fr); }
  .alcance { grid-template-columns: 1fr; }
}


/* ══ QUÉ REVISAMOS ═════════════════════════════════════════ */
.revision {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.4vw, 20px);
}
.revision__paso {
  padding: clamp(20px, 2.1vw, 28px);
  border: 1px solid var(--cereza-tenue);
  border-top: 2px solid var(--romac-cherry);
  background: var(--romac-surface);
}
.revision__num {
  display: block;
  margin-bottom: 12px;
  font-family: var(--display);
  font-size: clamp(20px, 1.9vw, 28px);
  font-weight: 800;
  line-height: 1;
  color: var(--romac-cherry);
}
.revision__paso h3 {
  margin: 0 0 8px;
  font-size: clamp(12.5px, 1vw, 14.5px);
  font-weight: 700;
  letter-spacing: 0.03em;
}
.revision__paso p {
  margin: 0;
  font-size: clamp(12px, 0.9vw, 13.5px);
  line-height: 1.65;
  color: var(--romac-muted);
}

.revision__limite {
  margin-top: clamp(14px, 1.6vw, 22px);
  padding: clamp(18px, 2vw, 26px);
  border: 1px solid var(--hilo);
  background: var(--romac-card);
}
.revision__limite h3 {
  margin: 0 0 12px;
  font-size: clamp(12.5px, 1vw, 14.5px);
  font-weight: 700;
  color: var(--romac-white);
}
.revision__limite ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.revision__limite li {
  position: relative;
  padding-left: 22px;
  font-size: clamp(12px, 0.9vw, 13.5px);
  line-height: 1.55;
  color: var(--romac-muted);
}
.revision__limite li::before {
  content: '×';
  position: absolute;
  left: 0;
  top: -2px;
  font-size: 1.3em;
  color: var(--romac-muted);
  opacity: 0.7;
}

/* ══ TESTIMONIOS ═══════════════════════════════════════════ */
.testimonios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(14px, 1.5vw, 22px);
}
.testimonio {
  margin: 0;
  padding: clamp(22px, 2.2vw, 32px);
  border: 1px solid var(--cereza-tenue);
  background: var(--romac-surface);
}
.testimonio blockquote {
  margin: 0 0 18px;
  font-family: var(--display);
  font-size: clamp(14px, 1.15vw, 18px);
  font-weight: 600;
  line-height: 1.5;
  color: var(--romac-white);
}
.testimonio blockquote::before { content: '\201C'; color: var(--romac-cherry); margin-right: 2px; }
.testimonio blockquote::after { content: '\201D'; color: var(--romac-cherry); }
.testimonio figcaption { display: grid; gap: 3px; }
.testimonio strong { font-size: 13px; font-weight: 600; }
.testimonio span { font-size: 12px; color: var(--romac-muted); }

@media (max-width: 1080px) {
  .revision { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════
   PASE DE MÓVIL — 17-ago-2026
   Una sola pasada, como se acordó: primero se cerró el escritorio.
   ═══════════════════════════════════════════════════════════════ */

/* El enlace de salto ya no se va a -9999px: eso ensancha el documento.
   Se esconde recortándolo, que es la forma que no toca el ancho. */
.salto-contenido {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.salto-contenido:focus {
  width: auto;
  height: auto;
  clip-path: none;
  left: 16px;
  top: 16px;
  padding: 12px 20px;
}

@media (max-width: 900px) {
  /* Botones: en una pantalla estrecha el texto largo se parte,
     no desborda. Era lo que empujaba la página a lo ancho. */
  .boton {
    white-space: normal;
    text-align: center;
    line-height: 1.3;
    height: auto;
    min-height: 48px;
    padding-block: 12px;
  }

  /* Zonas de toque: nada por debajo de 44 px */
  .cabecera__logo { display: inline-flex; align-items: center; min-height: 44px; }
  .razon__enlace,
  .pie__enlaces a,
  .pie__wa,
  .miga a,
  .filtros__limpiar {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .filtros__limpiar { padding: 0 4px; }

  /* Texto: nada por debajo de 11 px en pantalla pequeña */
  .tarjeta__etiqueta { font-size: 11px; padding: 5px 11px; }
  .tarjeta__meta,
  .confianza__item,
  .numero p,
  .revision__paso p,
  .banco__nota,
  .credito__pie { font-size: 12px; }
  .tarjeta__meta span { font-size: inherit; }

  /* Rejillas a una columna */
  .revision,
  .numeros,
  .alcance,
  .testimonios,
  .rejilla--otros { grid-template-columns: 1fr; }

  /* Filtros del catálogo: uno debajo del otro, cómodos de tocar */
  .filtros__fila { grid-template-columns: 1fr; }
  .filtro--busca { grid-column: auto; }
  .filtro select,
  .filtro input { height: 48px; font-size: 16px; }  /* 16px evita el zoom de iOS */
  .campo__input { height: 56px; font-size: 24px; }
  .filtros__pie { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* Etapas del proceso */
  .etapa { flex-direction: column; gap: 8px; }
  .etapa__num { font-size: 26px; }

  /* Cotizador y crédito: el resultado debajo, no al lado */
  .calc__resultado { padding-left: 0; }
  .credito__form { gap: 14px; }
  .banco__cifras { flex-direction: column; gap: 4px; }

  /* Ficha: miniaturas más grandes para el dedo */
  .ficha__miniaturas { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .dato { flex-wrap: wrap; gap: 2px 18px; }

  /* Pie */
  .pie__enlaces { flex-direction: column; gap: 0; }
  .pie__contacto { align-items: flex-start; width: 100%; }
  .pie__wa { width: 100%; justify-content: center; }
}

@media (max-width: 600px) {
  /* El catálogo NO es carrusel: es una lista vertical, que es como
     se navega un inventario en el teléfono. El carrusel se queda
     solo para los destacados de la portada. */
  .rejilla--catalogo,
  .rejilla--otros {
    grid-template-columns: 1fr !important;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    overflow: visible !important;
  }

  .titulo-seccion { font-size: clamp(19px, 6vw, 26px); }
  .banda__frase { font-size: clamp(22px, 7.5vw, 34px); }
  .legal h1 { font-size: clamp(22px, 7vw, 30px); }
  .ficha__titulo { font-size: clamp(21px, 6.5vw, 30px); }

  /* En móvil el sello TRD Pro compite con la foto: se achica */
  .tarjeta__sello { width: 32%; left: 10px; bottom: 9px; }
  .ficha__sello { width: 34%; left: 14px; bottom: 14px; }

  .credito__aviso { flex-direction: column; gap: 10px; }
  .revision__limite li { padding-left: 20px; }
}

@media (max-width: 900px) {
  .filtro > span,
  .banco__pct,
  .campo__etiqueta,
  .calc__etiqueta { font-size: 11px; }
}


/* el contenedor #resultados solo existe como destino del salto de teclado;
   la rejilla de verdad es su hijo */
.rejilla--catalogo { display: block; }
.rejilla__interior {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.4vw, 22px);
}
@media (max-width: 1080px) { .rejilla__interior { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .rejilla__interior { grid-template-columns: 1fr; } }

/* ── Barra deslizante del menú ───────────────────────────── */
.menu__lista { position: relative; }
.menu__barra {
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: var(--romac-cherry);
  opacity: 0;
  pointer-events: none;
  transform: translateX(0);
  transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
              width 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity 180ms linear;
  box-shadow: 0 0 12px rgba(207, 36, 69, 0.55);
}
.menu__barra.sin-animar { transition: none; }

/* la rayita fija del enlace activo se retira: la sustituye la barra */
.menu__enlace.es-activo::after { display: none; }
.menu__enlace.es-activo { color: var(--romac-white); }

@media (prefers-reduced-motion: reduce) {
  .menu__barra { transition: none; }
}

/* En el menú móvil (columna) no hay barra: vuelve la rayita bajo el activo */
@media (max-width: 900px) {
  .menu__barra { display: none; }
  .menu__enlace.es-activo::after {
    display: block;
    bottom: -1px;
    width: 34px;
    right: auto;
  }
}

/* La rayita tenue por enlace se retiró: ahora la barra roja sigue al
   ratón (app.js), así que dos rayitas a la vez se veían sucias. */

/* La barra se desliza de un enlace a otro siguiendo al ratón. 280ms:
   con los 420ms de antes se sentía perezosa persiguiendo el cursor. */
.menu__barra {
  transition: transform 280ms cubic-bezier(0.33, 1, 0.68, 1),
              width 280ms cubic-bezier(0.33, 1, 0.68, 1),
              opacity 200ms linear;
}

/* ══ LECTOR DE VIN ═════════════════════════════════════════ */
.es-vin .seccion--vin { padding-top: clamp(104px, 9vw, 136px); }

.vin {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  padding: clamp(20px, 2.2vw, 32px);
  border: 1px solid var(--cereza-tenue);
  background: linear-gradient(120deg, rgba(207,36,69,0.05), transparent 55%), var(--romac-surface);
}
.campo--vin { flex: 1 1 420px; position: relative; }
.campo__input--vin {
  font-family: var(--display);
  font-size: clamp(18px, 1.7vw, 26px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.vin__contador {
  position: absolute;
  right: 14px;
  bottom: 14px;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--romac-muted);
}
.vin__contador.es-completo { color: var(--romac-cherry); }
.vin .calc__ayuda { flex: 1 1 100%; margin: 0; }

.vin__salida { margin-top: clamp(16px, 1.8vw, 26px); }
.vin__cargando {
  padding: 26px;
  border: 1px dashed var(--hilo);
  text-align: center;
  color: var(--romac-muted);
  font-size: 13.5px;
}
.vin__aviso { padding: 22px 26px; border: 1px solid var(--romac-border); background: rgba(207,36,69,0.06); }
.vin__error { margin: 0 0 6px; font-weight: 600; color: var(--romac-white); }

.vin__ficha { padding: clamp(22px, 2.4vw, 34px); border: 1px solid var(--cereza-tenue); border-top: 2px solid var(--romac-cherry); background: var(--romac-card); }
.vin__cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-wrap: wrap; margin-bottom: 18px; }
.vin__etiqueta {
  margin: 0 0 6px;
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--romac-cherry);
}
.vin__titulo { margin: 0; font-size: clamp(20px, 2.2vw, 34px); font-weight: 800; line-height: 1.05; }
.vin__version { margin: 6px 0 0; font-size: 13.5px; color: var(--romac-muted); }
.vin__codigo {
  padding: 8px 12px;
  border: 1px solid var(--hilo);
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  color: var(--romac-muted);
}
.vin__alerta {
  margin: 16px 0 0;
  padding: 14px 18px;
  border-left: 3px solid var(--romac-cherry);
  background: rgba(207,36,69,0.08);
  font-size: 13px;
  line-height: 1.6;
  color: var(--romac-white);
}

.vin__llamados { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--hilo); }
.vin__llamados h3 { margin: 0 0 12px; font-size: clamp(13px, 1.05vw, 15px); font-weight: 700; }
.vin__conteo { margin: 0 0 12px; font-size: 13.5px; color: var(--romac-cherry); font-weight: 600; }
.vin__ok { margin: 0; font-size: 13.5px; color: var(--romac-muted); }
.vin__llamado { border: 1px solid var(--hilo); padding: 12px 16px; margin-bottom: 8px; }
.vin__llamado summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--romac-white); }
.vin__llamado p { margin: 10px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--romac-muted); }
.vin__llamado strong { color: var(--romac-white); }
.vin__limite { margin-top: clamp(16px, 1.8vw, 26px); }

/* herramienta interna */
.herramienta__sello {
  font-family: var(--display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  padding: 7px 14px;
  border: 1px solid var(--romac-border);
  color: var(--romac-cherry);
}
.herramienta { margin-top: clamp(20px, 2.4vw, 36px); }
.herramienta__salida {
  margin: 0 0 16px;
  padding: 20px 22px;
  border: 1px solid var(--cereza-tenue);
  background: #08080a;
  color: var(--romac-white);
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.65;
  white-space: pre;
  overflow-x: auto;
}

@media (max-width: 900px) {
  .vin { flex-direction: column; align-items: stretch; }
  .campo--vin { flex: 1 1 auto; }
  .campo__input--vin { font-size: 18px; letter-spacing: 0.08em; }
}

.cta--vin { margin-top: clamp(14px, 1.6vw, 22px); }
.cta--vin .cta__titulo { font-size: clamp(15px, 1.4vw, 22px); }

/* ══ BLOQUE DE HERRAMIENTAS (portada) ══════════════════════ */
.herramientas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(14px, 1.5vw, 22px);
}
.herramienta__tarjeta {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.3vw, 34px);
  border: 1px solid var(--cereza-tenue);
  border-top: 2px solid var(--romac-cherry);
  background: var(--romac-surface);
  transition: transform var(--transicion), border-color var(--transicion),
              box-shadow var(--transicion);
}
.herramienta__tarjeta:hover {
  transform: translateY(-4px);
  border-color: var(--romac-border);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.5);
}
.herramienta__tarjeta h3 {
  margin: 14px 0 10px;
  font-size: clamp(14px, 1.15vw, 17px);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.herramienta__tarjeta p {
  margin: 0 0 18px;
  font-size: clamp(12.5px, 0.92vw, 14px);
  line-height: 1.65;
  color: var(--romac-muted);
}
.herramienta__ir {
  margin-top: auto;
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--romac-cherry-hover);
}

/* ══ PÁGINAS DE MÓDULO ═════════════════════════════════════ */
.es-modulo .seccion--modulo { padding-top: clamp(104px, 9vw, 136px); }
.modulo {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(20px, 2.4vw, 40px);
  align-items: start;
  padding: clamp(22px, 2.4vw, 36px);
  border: 1px solid var(--cereza-tenue);
  background: linear-gradient(120deg, rgba(207,36,69,0.05), transparent 55%), var(--romac-surface);
  margin-bottom: clamp(20px, 2.2vw, 32px);
}
.modulo__form { display: grid; gap: 16px; align-content: start; }
.modulo__form .calc__ayuda { margin: -6px 0 0; }
.modulo__salida { min-width: 0; }
.cot__ficha { padding: clamp(18px, 2vw, 26px); border: 1px solid var(--hilo); background: var(--romac-card); }
.cot__total {
  margin: 4px 0 0;
  font-family: var(--display);
  font-size: clamp(26px, 2.8vw, 44px);
  font-weight: 800;
  line-height: 1.05;
  color: var(--romac-white);
}
.cot__cta { margin-top: 20px; width: 100%; }

@media (max-width: 1080px) {
  .herramientas { grid-template-columns: 1fr; }
  .modulo { grid-template-columns: 1fr; }
}

/* Los hijos de una rejilla tienen min-width:auto y no se dejan
   encoger: eso desbordaba el formulario de financiamiento en móvil. */
.modulo, .modulo__form, .modulo__salida { min-width: 0; }
.modulo__form .filtro, .modulo__form .campo { min-width: 0; }
.modulo__form select, .modulo__form input { max-width: 100%; }

@media (max-width: 900px) {
  .vin__etiqueta { font-size: 11px; }
}

/* ══ SIGUE TU VEHÍCULO ═════════════════════════════════════ */
.seg__ficha { padding: clamp(18px, 2vw, 26px); border: 1px solid var(--hilo); background: var(--romac-card); }
.seg__numero {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 16px;
  flex-wrap: wrap;
}
.seg__numero code {
  flex: 1;
  min-width: 0;
  padding: 12px 16px;
  border: 1px solid var(--romac-border);
  background: rgba(0, 0, 0, 0.35);
  font-family: ui-monospace, Consolas, monospace;
  font-size: clamp(14px, 1.3vw, 19px);
  letter-spacing: 0.1em;
  color: var(--romac-white);
  overflow-x: auto;
}
.seg__copiar {
  flex: none;
  padding: 12px 18px;
  border: 1px solid var(--hilo);
  background: none;
  color: var(--romac-muted);
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--transicion), border-color var(--transicion);
}
.seg__copiar:hover { color: var(--romac-cherry-hover); border-color: var(--romac-border); }
.seg__paso { margin: 0 0 16px; font-size: clamp(12.5px, 0.95vw, 14px); line-height: 1.6; color: var(--romac-muted); }
.seg__ir { width: 100%; }
.seg__wa { width: 100%; margin-top: 12px; }

.portal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(18px, 2.4vw, 40px);
  flex-wrap: wrap;
  margin-top: clamp(16px, 1.8vw, 26px);
  padding: clamp(22px, 2.4vw, 34px);
  border: 1px solid var(--romac-border);
  background: linear-gradient(90deg, rgba(207,36,69,0.07), rgba(207,36,69,0));
}
.portal__forma { display: flex; gap: 10px; flex-wrap: wrap; }
.portal__forma input {
  height: 48px;
  padding: 0 16px;
  border: 1px solid var(--hilo);
  background: rgba(0, 0, 0, 0.4);
  color: var(--romac-white);
  font-family: var(--texto);
  font-size: 15px;
}
.portal__forma input:focus { outline: none; border-color: var(--romac-cherry); }

.etapas-seg { display: grid; gap: 10px; counter-reset: etapa; }
.etapa-seg {
  display: flex;
  gap: clamp(14px, 1.6vw, 22px);
  align-items: flex-start;
  padding: clamp(16px, 1.8vw, 24px) clamp(16px, 2vw, 26px);
  border: 1px solid var(--cereza-tenue);
  background: var(--romac-surface);
}
.etapa-seg__punto {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--romac-border);
  border-radius: 50%;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 800;
  color: var(--romac-cherry);
}
.etapa-seg h3 { margin: 0 0 5px; font-size: clamp(13px, 1.05vw, 15.5px); font-weight: 700; }
.etapa-seg p { margin: 0; font-size: clamp(12.5px, 0.92vw, 14px); line-height: 1.6; color: var(--romac-muted); }

.herramienta__tarjeta--destacada { position: relative; border-top-color: var(--romac-cherry-hover); }
.herramienta__sello-nuevo {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 4px 10px;
  border: 1px solid var(--romac-border);
  border-radius: 999px;
  font-family: var(--display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--romac-cherry);
}

@media (max-width: 900px) {
  .portal { flex-direction: column; align-items: stretch; }
  .portal__forma { flex-direction: column; }
  .portal__forma input, .portal__forma .boton { width: 100%; }
  .herramienta__sello-nuevo { font-size: 10px; }
}

/* display:flex vuelve a ganarle a [hidden]; hay que decirlo */
.portal[hidden] { display: none; }

@media (max-width: 900px) { .herramienta__sello-nuevo { font-size: 11px; } }

/* ══ LA TRAVESÍA (mapa de ruta estimada) ═══════════════════ */
.travesia__form { max-width: 420px; margin-bottom: clamp(14px, 1.6vw, 22px); }
.travesia__form input {
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--hilo);
  background: rgba(0, 0, 0, 0.4);
  color: var(--romac-white);
  font-family: var(--texto);
  font-size: 15px;
  color-scheme: dark;
}
.travesia__form input:focus { outline: none; border-color: var(--romac-cherry); }

.travesia {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(16px, 2vw, 30px);
  align-items: start;
  padding: clamp(16px, 1.8vw, 26px);
  border: 1px solid var(--cereza-tenue);
  background: var(--romac-surface);
}
.travesia__mapa svg {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--hilo);
}
.travesia__aviso {
  margin: 10px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--romac-muted);
}
.travesia__aviso strong { color: var(--romac-cherry); }

.travesia__datos { min-width: 0; }
.travesia__titular {
  margin: 2px 0 16px;
  font-family: var(--display);
  font-size: clamp(19px, 1.9vw, 28px);
  font-weight: 800;
  line-height: 1.1;
}
.travesia__barra {
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.travesia__barra span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--romac-cherry), var(--romac-cherry-hover));
  transition: width 600ms cubic-bezier(0.33, 1, 0.68, 1);
}
.travesia__pct { margin: 8px 0 4px; font-size: 12px; color: var(--romac-muted); }
.travesia__wa { width: 100%; margin-top: 18px; }

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

/* ══ CABECERA CON VIDEO ════════════════════════════════════
   La usan "Sigue tu vehículo" e "Importación". Lo único que cambia
   entre las dos es el activo, así que va en una variable en vez de
   duplicar el bloque. */
.cabecera-travesia {
  --fondo: url('assets/travesia-tarjeta.jpg');
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(380px, 42vw, 560px);
  padding: clamp(104px, 9vw, 130px) 0 clamp(32px, 4vw, 60px);
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--hilo);
}
.travesia-fondo {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.cabecera-travesia__velo {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(5,5,6,0.95) 0%, rgba(5,5,6,0.82) 34%, rgba(5,5,6,0.35) 62%, rgba(5,5,6,0.1) 100%),
    linear-gradient(180deg, rgba(5,5,6,0.8) 0%, rgba(5,5,6,0) 34%, rgba(5,5,6,0.55) 100%);
}
.cabecera-travesia__texto { position: relative; z-index: 3; max-width: 100%; }
.cabecera-travesia .seccion__entrada { max-width: 54ch; }
.cabecera-travesia .titulo-seccion { margin-bottom: 18px; }

.cabecera-travesia--importacion {
  --fondo: url('assets/importacion-poster.jpg');
  align-items: center;
}
/* El titular vive en el hueco negro que la imagen deja a la izquierda.
   Se limita CADA línea, no el contenedor: el `.contenedor` lleva
   margin-inline:auto, así que estrecharlo lo centraba y el texto
   terminaba justo encima de la camioneta. */
.cabecera-travesia--importacion .miga,
.cabecera-travesia--importacion .hero__antetitulo,
.cabecera-travesia--importacion .titulo-seccion { max-width: 44ch; }
.cabecera-travesia--importacion .seccion__entrada { max-width: 46ch; }
.cabecera-travesia--importacion .hero__botones { margin-top: 26px; }

/* Velo más largo que el de seguimiento: aquí el sujeto está más al
   centro, así que la sombra tiene que llegar más a la derecha para que
   el texto siempre caiga sobre negro, con cualquier fotograma. */
.cabecera-travesia--importacion .cabecera-travesia__velo {
  background:
    linear-gradient(90deg, rgba(5,5,6,0.97) 0%, rgba(5,5,6,0.93) 30%, rgba(5,5,6,0.62) 50%, rgba(5,5,6,0.12) 78%, rgba(5,5,6,0.3) 100%),
    linear-gradient(180deg, rgba(5,5,6,0.86) 0%, rgba(5,5,6,0) 38%, rgba(5,5,6,0.6) 100%);
}

/* A quien pidió menos movimiento en su teléfono se le deja el fotograma.
   Esto vale para las dos páginas, como antes. */
@media (prefers-reduced-motion: reduce) {
  .travesia-fondo { display: none; }
  .cabecera-travesia {
    background-image: var(--fondo);
    background-size: cover;
    background-position: center 40%;
  }
}

/* En móvil, SOLO en importación: los <source> de esa página llevan `media`,
   así que el navegador no descarga el video y el <video> quedaría como una
   caja negra — hay que taparlo con el fotograma. Seguimiento no lleva
   `media` en sus <source>, así que aquí no se toca. */
@media (max-width: 900px) {
  .cabecera-travesia--importacion {
    --fondo: url('assets/importacion-poster-movil.jpg');
    background-image: var(--fondo);
    background-size: cover;
    background-position: center 42%;
  }
  .cabecera-travesia--importacion .travesia-fondo { display: none; }
}

/* el movimiento de profundidad necesita que las capas se muevan solas */
.hero__fondo, .escena__bandera, .escena__vehiculos { will-change: transform; }
/* el margen extra solo hace falta donde hay movimiento de capas */
@media (min-width: 901px) {
  .hero__fondo img { transform: scale(1.04); }
}

/* ══ COMPARADOR ════════════════════════════════════════════ */
.tarjeta__comparar {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border: 1px solid var(--hilo);
  background: rgba(5, 5, 6, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--romac-muted);
  font-family: var(--display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--transicion), border-color var(--transicion), background var(--transicion);
}
.tarjeta__comparar svg {
  width: 14px; height: 14px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.tarjeta__comparar:hover { color: var(--romac-white); border-color: var(--romac-border); }
.tarjeta__comparar.es-marcado {
  background: var(--romac-cherry);
  border-color: var(--romac-cherry);
  color: #fff;
}
.tarjeta__comparar.es-tope { animation: negar 420ms ease; border-color: var(--romac-cherry); }
@keyframes negar {
  25% { transform: translateX(-4px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); }
}

.comparar-barra {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  padding: 14px 0;
  /* opaca por la misma razon que la cabecera: es fija, y al 94% las
     fotos de las tarjetas se transparentaban al pasar por debajo */
  background: var(--romac-black);
  border-top: 1px solid var(--romac-border);
  animation: subir 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes subir { from { transform: translateY(100%); } to { transform: none; } }
.comparar-barra[hidden] { display: none; }
.comparar-barra__fila {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.comparar-barra__lista { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--romac-muted); }
.comparar-barra__lista strong { color: var(--romac-cherry); font-size: 15px; }
.comparar-barra__chip {
  padding: 5px 10px; border: 1px solid var(--hilo);
  font-family: var(--display); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.06em; color: var(--romac-white);
}
.comparar-barra__acciones { display: flex; align-items: center; gap: 14px; }
.comparar-barra__limpiar {
  padding: 0; border: 0; background: none; color: var(--romac-muted);
  font-size: 12.5px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.comparar-barra__limpiar:hover { color: var(--romac-cherry-hover); }
.comparar-barra [aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

.cmp__marco { overflow-x: auto; border: 1px solid var(--cereza-tenue); }
.cmp { width: 100%; border-collapse: collapse; min-width: 620px; }
.cmp th, .cmp td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--hilo); vertical-align: middle; }
.cmp thead td, .cmp thead th { border-bottom: 1px solid var(--romac-border); vertical-align: top; }
.cmp__esquina { width: 150px; background: var(--romac-surface); }
.cmp tbody th, .cmp tfoot th {
  width: 150px; background: var(--romac-surface);
  font-family: var(--display); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--romac-muted);
}
.cmp thead h2 { margin: 12px 0 4px; font-size: clamp(12.5px, 1vw, 15px); font-weight: 700; }
.cmp__foto { display: block; overflow: hidden; background: var(--romac-card); }
.cmp__foto img { width: 100%; height: auto; display: block; aspect-ratio: 760/598; object-fit: cover; }
.cmp__ver { font-size: 11.5px; color: var(--romac-cherry-hover); }
.cmp td { font-size: clamp(12.5px, 0.95vw, 14.5px); color: var(--romac-white); }
.cmp__vacio { color: var(--romac-muted); opacity: 0.5; }
.cmp__mejor { color: var(--romac-white); font-weight: 600; background: rgba(207, 36, 69, 0.09); }
.cmp__sello {
  display: inline-block; margin-left: 8px; padding: 2px 7px;
  border: 1px solid var(--romac-border); border-radius: 999px;
  font-family: var(--display); font-size: 8.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--romac-cherry);
}
.cmp tfoot .boton { width: 100%; }

@media (max-width: 900px) {
  .comparar-barra__fila { flex-direction: column; align-items: stretch; }
  .comparar-barra__acciones { flex-direction: column-reverse; align-items: stretch; }
  .comparar-barra .boton { width: 100%; }
  .tarjeta__comparar { font-size: 11px; }
  .cmp__esquina, .cmp tbody th, .cmp tfoot th { width: 110px; }
}

/* ══ PEDIR UN MODELO QUE NO ESTÁ ═══════════════════════════ */
.pedido {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 52px);
  align-items: center;
  margin-top: clamp(24px, 3vw, 44px);
  padding: clamp(24px, 3vw, 44px);
  border: 1px solid var(--cereza-tenue);
  background: linear-gradient(120deg, rgba(207,36,69,0.06), transparent 60%), var(--romac-surface);
}
.pedido__titulo {
  margin: 0 0 14px;
  font-family: var(--display);
  font-size: clamp(20px, 2.1vw, 32px);
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
}
.pedido__bajada { margin: 0; max-width: 44ch; font-size: clamp(13px, 0.98vw, 15px); line-height: 1.65; color: var(--romac-muted); }
.pedido__form { display: grid; gap: 14px; }
.pedido__par { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pedido__form input, .pedido__form select {
  height: 48px; padding: 0 14px;
  border: 1px solid var(--hilo); background: rgba(0,0,0,0.4);
  color: var(--romac-white); font-family: var(--texto); font-size: 15px;
}
.pedido__form input:focus, .pedido__form select:focus { outline: none; border-color: var(--romac-cherry); }
.pedido__form .calc__ayuda { margin: 0; }

@media (max-width: 900px) {
  .pedido { grid-template-columns: 1fr; }
  .pedido__par { grid-template-columns: 1fr; }
}

/* La tarjeta de "Sigue tu vehículo" muestra el barco: desde la portada
   ya se entiende de qué va antes de entrar. */
.herramienta__tarjeta--destacada {
  position: relative;
  background-image:
    linear-gradient(180deg, rgba(11,11,13,0.90) 0%, rgba(11,11,13,0.80) 45%, rgba(11,11,13,0.97) 100%),
    url('assets/travesia-tarjeta.jpg');
  background-size: cover;
  background-position: center 42%;
}
.herramienta__tarjeta--destacada:hover {
  background-image:
    linear-gradient(180deg, rgba(11,11,13,0.84) 0%, rgba(11,11,13,0.72) 45%, rgba(11,11,13,0.95) 100%),
    url('assets/travesia-tarjeta.jpg');
}

/* ══ WHATSAPP SIEMPRE A LA MANO ════════════════════════════
   En el catálogo el primer botón de WhatsApp quedaba a 4.352 px
   de scroll: cinco pantallas para encontrar cómo escribir. */
.wa-flotante {
  position: fixed;
  right: clamp(16px, 2vw, 28px);
  bottom: clamp(16px, 2vw, 28px);
  z-index: 55;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-radius: 999px;
  background: var(--romac-cherry);
  color: #fff;
  font-family: var(--display);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  transition: transform var(--transicion), background var(--transicion);
}
.wa-flotante svg {
  width: 22px; height: 22px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.wa-flotante:hover { background: var(--romac-cherry-hover); transform: translateY(-2px); }
.wa-flotante:active { transform: translateY(0); }

/* si está la barra del comparador, el botón se sube exactamente su
   altura — que en móvil es mayor porque la barra se apila */
.wa-flotante {
  bottom: calc(clamp(16px, 2vw, 28px) + var(--barra-comparar, 0px));
}

@media (max-width: 600px) {
  .wa-flotante { padding: 14px; }
  .wa-flotante span { display: none; }   /* solo el ícono, no estorba */
}
@media print { .wa-flotante { display: none; } }

/* ══ ESTADO DE LA UNIDAD Y SELLO DE VIDEO ══════════════════
   La disponibilidad (stock / encargo) ocupa la esquina derecha desde
   antes; el estado va a la IZQUIERDA para que nunca se pisen, y el
   sello de video abajo, donde no tapa la chapa del carro.          */
.tarjeta__estado {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.tarjeta__estado.es-ultima {
  background: var(--romac-cherry);
  border-color: var(--romac-cherry);
  color: #fff;
}
.tarjeta__estado.es-reservado,
.tarjeta__estado.es-vendido {
  background: rgba(5, 5, 6, 0.82);
  border-color: rgba(255, 255, 255, 0.34);
  color: var(--romac-white);
}

/* "ÚLTIMA UNIDAD" late despacio. Es el único elemento del sitio que
   se mueve solo: si algo más lo hiciera, este dejaría de significar. */
@media (prefers-reduced-motion: no-preference) {
  .tarjeta__estado.es-ultima { animation: latido 2.6s ease-in-out infinite; }
}
@keyframes latido {
  0%, 100% { box-shadow: 0 0 0 0 rgba(207, 36, 69, 0.55); }
  55%      { box-shadow: 0 0 0 7px rgba(207, 36, 69, 0); }
}

/* abajo a la DERECHA: la esquina de abajo-izquierda ya la ocupan el
   sello del modelo y el botón "Comparar" del catálogo. */
.tarjeta__video {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px 4px 6px;
  border-radius: 999px;
  background: rgba(5, 5, 6, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--display);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--romac-white);
}
.tarjeta__video svg {
  width: 13px;
  height: 13px;
  fill: var(--romac-cherry);
}

/* Un carro reservado o vendido no puede anunciarse "EN STOCK": leído
   seguido decía "VENDIDO · EN STOCK · VENEZUELA". Cuando la unidad
   está fuera, el estado es el único dato que importa. */
.tarjeta--fuera .tarjeta__disponibilidad,
.ficha__foto:has(.es-reservado, .es-vendido) .tarjeta__disponibilidad { display: none; }

/* Reservado y vendido: a TODO COLOR, por decisión de Henry
   (17-ago-2026). El apagado en gris les quitaba el carisma a la
   página; el sello VENDIDO ya dice todo lo que hay que decir.
   Siguen cayendo al final del catálogo y su ficha sigue ofreciendo
   "pedir uno parecido" — solo se quitó el filtro de color. */

.ficha__aviso-estado {
  margin: 0 0 16px;
  padding: 13px 16px;
  border: 1px solid var(--hilo);
  border-left: 3px solid var(--romac-cherry);
  background: rgba(255, 255, 255, 0.03);
  font-size: clamp(12.5px, 0.92vw, 14px);
  line-height: 1.65;
  color: var(--romac-muted);
}
.ficha__aviso-estado strong { color: var(--romac-white); text-transform: uppercase; }

/* ══ VIDEO DE LA UNIDAD (ficha) ════════════════════════════
   Carátula en vez de iframe: incrustar YouTube de una vez pesa cerca
   de 900 KB y abre tres conexiones nuevas aunque nadie le dé play.
   Aquí baja una imagen (~15 KB) y el reproductor llega al primer clic. */
.ficha__video { margin-top: clamp(30px, 3.2vw, 48px); }
.ficha__video-titulo {
  margin-bottom: 14px;
  font-size: clamp(15px, 1.5vw, 22px);
  font-weight: 800;
  letter-spacing: 0.01em;
}
.video-caratula,
.ficha__iframe {
  display: block;
  width: 100%;
  max-width: 940px;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--hilo);
  border-radius: 4px;
  background: #000;
}
.video-caratula {
  position: relative;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  transition: border-color var(--transicion);
}
.video-caratula:hover { border-color: var(--romac-border); }
.video-caratula img {
  width: 100%;
  height: 100%;
  /* la miniatura de YouTube viene en 4:3 con bandas negras: se recorta
     al centro para que llene el 16:9 sin deformar el carro */
  object-fit: cover;
  opacity: 0.88;
  transition: opacity var(--transicion), transform var(--transicion);
}
.video-caratula:hover img { opacity: 1; transform: scale(1.02); }
.video-caratula__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--romac-cherry);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5);
  transition: transform var(--transicion), background var(--transicion);
}
.video-caratula:hover .video-caratula__play {
  background: var(--romac-cherry-hover);
  transform: scale(1.07);
}
.video-caratula__play svg { width: 34px; height: 34px; fill: #fff; }
.video-caratula__pie {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 18px 13px;
  background: linear-gradient(transparent, rgba(5, 5, 6, 0.9));
  font-family: var(--display);
  font-size: clamp(10px, 0.8vw, 12px);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  color: var(--romac-white);
}
.ficha__iframe { border: 0; }

@media (max-width: 600px) {
  .video-caratula__play { width: 58px; height: 58px; }
  .video-caratula__play svg { width: 27px; height: 27px; }
}

/* ══ PREGUNTAS FRECUENTES ══════════════════════════════════
   <details> nativo: abre y cierra sin JavaScript, se encuentra con
   Ctrl+F y el lector de pantalla ya lo entiende. Cero librerías. */
.faq {
  max-width: 84ch;
  border-top: 1px solid var(--hilo);
}
.faq__item { border-bottom: 1px solid var(--hilo); }
.faq__pregunta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 2px;
  cursor: pointer;
  list-style: none;                       /* Firefox */
  font-family: var(--display);
  font-size: clamp(13px, 1.02vw, 15.5px);
  font-weight: 700;
  line-height: 1.45;
  color: var(--romac-white);
  transition: color var(--transicion);
}
.faq__pregunta::-webkit-details-marker { display: none; }
.faq__pregunta:hover { color: var(--romac-cherry-hover); }

/* el signo se dibuja con dos rayas: una desaparece al abrir */
.faq__mas {
  position: relative;
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 3px;
}
.faq__mas::before,
.faq__mas::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  background: var(--romac-cherry);
}
.faq__mas::before { width: 15px; height: 2px; }
.faq__mas::after  { width: 2px; height: 15px; transition: transform var(--transicion); }
.faq__item[open] .faq__mas::after { transform: scaleY(0); }

.faq__respuesta { padding: 0 44px 20px 2px; }
.faq__respuesta p {
  margin: 0;
  font-size: clamp(13px, 0.95vw, 14.5px);
  line-height: 1.75;
  color: var(--romac-muted);
}
.faq__respuesta strong { color: var(--romac-white); font-weight: 600; }
.faq__respuesta a {
  color: var(--romac-cherry);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.faq__respuesta a:hover { color: var(--romac-cherry-hover); }

.faq__pie {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 22px;
  margin-top: clamp(22px, 2.2vw, 32px);
}
.faq__pie p {
  margin: 0;
  font-size: clamp(13px, 0.95vw, 14.5px);
  color: var(--romac-muted);
}

@media (max-width: 600px) {
  .faq__respuesta { padding-right: 8px; }
}

/* ══ TARJETA DEL COTIZADOR CON FONDO ═══════════════════════
   Mismo patrón que la tarjeta de "Sigue tu vehículo": era la única de
   las cuatro con foto, y por eso las otras tres se veían flojas al
   lado. La puerta de dinero —el cotizador— ahora también la tiene. */
.herramienta__tarjeta--importacion {
  --fondo-tarjeta: url('assets/importacion-tarjeta.jpg');
  position: relative;
  /* Velo en diagonal, no plano: oscuro donde va el texto (arriba a la
     izquierda) y transparente abajo a la derecha, que es donde caen la
     camioneta y los reflejos rojos. Con un velo parejo la foto se veía
     como una manchita marrón y no se entendía qué era. */
  background-image:
    linear-gradient(112deg, rgba(11,11,13,0.97) 0%, rgba(11,11,13,0.94) 34%, rgba(11,11,13,0.62) 68%, rgba(11,11,13,0.34) 100%),
    var(--fondo-tarjeta);
  background-size: cover;
  background-position: 62% 62%;
}
.herramienta__tarjeta--importacion:hover {
  background-image:
    linear-gradient(112deg, rgba(11,11,13,0.94) 0%, rgba(11,11,13,0.88) 34%, rgba(11,11,13,0.48) 68%, rgba(11,11,13,0.18) 100%),
    var(--fondo-tarjeta);
}

/* ══ QUÉ NECESITAS A MANO (Sigue tu vehículo) ═══════════════
   Tres tarjetas entre la cabecera y el formulario. Detalles que
   las hacen caras sin añadir peso: numeral gigante desbordado,
   filo de cereza que crece al pasar el ratón, y un brillo que
   recorre las tres en cadena — siempre hay algo moviéndose muy
   despacio, que es lo que separa "bonito" de "premium". */
.seccion--previo { padding-top: clamp(38px, 4vw, 60px); }

.requisitos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.5vw, 24px);
  margin-top: clamp(22px, 2.4vw, 34px);
}

.requisito {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(24px, 2.4vw, 34px) clamp(20px, 2.2vw, 30px) clamp(18px, 2vw, 26px);
  border: 1px solid var(--cereza-tenue);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(207, 36, 69, 0.10), transparent 62%),
    var(--romac-surface);
  transition: transform var(--transicion), border-color var(--transicion),
              box-shadow var(--transicion);
}

/* el filo de arriba: nace corto y se estira al acercarse */
.requisito::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 34px;
  height: 2px;
  background: linear-gradient(90deg, var(--romac-cherry), rgba(207, 36, 69, 0));
  transition: width 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.requisito:hover {
  transform: translateY(-3px);
  border-color: var(--romac-border);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}
.requisito:hover::before { width: 100%; }

/* el brillo que va pasando — en cadena, una tarjeta tras otra */
.requisito::after {
  content: '';
  position: absolute;
  inset: -40% -60%;
  z-index: -1;
  background: linear-gradient(104deg,
    transparent 42%, rgba(255, 255, 255, 0.055) 50%, transparent 58%);
  transform: translateX(-38%);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .requisito::after {
    animation: destello 9s ease-in-out infinite;
    animation-delay: calc(var(--turno, 0) * 1.1s);
  }
}
@keyframes destello {
  0%, 62%, 100% { transform: translateX(-38%); }
  30%           { transform: translateX(38%); }
}

/* el numeral: grande, hueco y desbordando la esquina */
.requisito__num {
  position: absolute;
  top: -14px;
  right: 6px;
  font-family: var(--display);
  font-size: clamp(58px, 6vw, 88px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(207, 36, 69, 0.30);
  user-select: none;
}

.ico--requisito {
  width: 30px;
  height: 30px;
  stroke-width: 1.25;
  margin-bottom: 16px;
}
.requisito__titulo {
  font-size: clamp(13px, 1.05vw, 15.5px);
  font-weight: 700;
  letter-spacing: 0.01em;
  margin-bottom: 10px;
}
.requisito__texto {
  margin: 0;
  font-size: clamp(12.5px, 0.92vw, 14px);
  line-height: 1.7;
  color: var(--romac-muted);
}
.requisito__texto code {
  padding: 1px 6px;
  border: 1px solid var(--cereza-tenue);
  border-radius: 3px;
  background: rgba(207, 36, 69, 0.08);
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 0.92em;
  letter-spacing: 0.04em;
  color: var(--romac-white);
  white-space: nowrap;
}
.requisito__texto em { font-style: italic; color: var(--romac-white); }

/* "dónde lo encuentro": separado por un hilo, con su etiquetita */
.requisito__donde {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--hilo);
  font-size: clamp(11.5px, 0.85vw, 13px);
  line-height: 1.65;
  color: var(--romac-muted);
}
.requisito__donde span {
  display: block;
  margin-bottom: 5px;
  font-family: var(--display);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--romac-cherry);
}

@media (max-width: 1000px) { .requisitos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .requisitos { grid-template-columns: 1fr; } }

/* El relleno grande de .seccion--modulo existe para que en el cotizador,
   el financiamiento y el VIN el módulo no se meta debajo de la cabecera
   fija: allí es lo primero de la página. En seguimiento ya no lo es —
   van las tarjetas antes — así que ahí sobra y dejaba un hueco negro.
   Se corrige por hermano adyacente para no tocar las otras páginas. */
.seccion--previo + .seccion--modulo { padding-top: clamp(6px, 0.8vw, 14px); }

/* descripción del vehículo en su ficha */
.ficha__descripcion {
  margin: 0 0 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--hilo);
  font-size: clamp(13px, 0.95vw, 14.5px);
  line-height: 1.75;
  color: var(--romac-muted);
}
.ficha__descripcion strong { color: var(--romac-white); font-weight: 600; }

/* ── Flechas de la galería de la ficha ─────────────────────
   Pasar las fotos sin cazar las miniaturas. Mismo lenguaje que
   los botones flotantes de la foto: circulares, vidrio oscuro. */
.galeria-flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(5, 5, 6, 0.55);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background var(--transicion), border-color var(--transicion);
}
.galeria-flecha svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.galeria-flecha:hover { background: var(--romac-cherry); border-color: var(--romac-cherry); }
.galeria-flecha--ant { left: 12px; }
.galeria-flecha--sig { right: 12px; }
@media (max-width: 600px) { .galeria-flecha { width: 36px; height: 36px; } }