/* =============================================================
   NexoMotors — styles.css
   Rediseño de la home aplicando la skill "crear-web-como-servicio":
   archetype Cinematográfico/Premium adaptado (sin volver al tema
   oscuro que el cliente ya descartó — ver nota de criterio abajo)
   + fichas más grandes con lenguaje visual de pills/specs.
   Paleta y tipografía "Plata & Granate" SIN TOCAR (decisión de
   marca ya validada por el cliente): titanio claro + granate,
   Playfair Display + Lora + Inter.
   ============================================================= */

/* =============================================================
   1. Tokens (idénticos a los del sitio en producción)
   ============================================================= */
:root {
  --bg: #868686;
  --bg-2: #969696;
  --bg-3: #a6a6a6;
  --card: linear-gradient(135deg, #b7b0a2 0%, #cbc4b5 25%, #e2dbcb 50%, #cbc4b5 75%, #b7b0a2 100%);
  --card-hover: linear-gradient(135deg, #c2bbac 0%, #d6cfc0 25%, #ede6d6 50%, #d6cfc0 75%, #c2bbac 100%);
  --ink: #211d17;
  --ink-soft: #3c362e;
  /* --mute/--mute-2/--accent-2 oscurecidos respecto al valor de
     producción: contra --bg (#938e84) los originales daban 2.4:1, 1.7:1
     y 3.3:1 (fallan WCAG AA 4.5:1) — 90 instancias del sitio entero según
     el detector de impeccable. Mismo matiz/tono, solo más oscuros; ahora
     ~4.5-4.9:1 contra las 3 superficies del sitio (--bg/--bg-2/--bg-3). */
  --mute: #2a2722;
  --mute-2: #282725;
  --accent: #9c2636;
  --accent-2: #460b12;
  --accent-dim: #3a0c12;
  --line: rgba(28, 24, 19, 0.14);
  --line-strong: rgba(28, 24, 19, 0.26);
  --on-accent: #f5ece7;

  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Playfair Display", Georgia, "Times New Roman", serif;
  --body: "Lora", Georgia, "Times New Roman", serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Fluido, no un ancho fijo — en monitores grandes (>1400px) el sitio
     usaba solo ~1240px y dejaba franjas vacías enormes a los costados
     en TODAS las secciones (.container es la clase compartida de casi
     todo el sitio). min(92vw, 1600px) aprovecha la pantalla real sin
     volverse una columna de texto absurdamente ancha. */
  --container: min(92vw, 1600px);
  --radius: 18px;
  --radius-sm: 10px;
  /* --nav-h-base es el piso fijo de .nav (una sola línea de logo+nav);
     --nav-h es el alto real, sincronizado en vivo por syncNavHeight()
     en main.js vía ResizeObserver — lo usa el resto del sitio (padding-
     top de secciones, sticky, .mobile-menu). Van separados a propósito:
     si .nav usara min-height:var(--nav-h) (la misma variable que mide
     y escribe el JS), al achicarse la ventana después de haber crecido
     a dos líneas, --nav-h queda "pegado" en el valor alto y nunca deja
     que .nav vuelva a su alto natural (ratchet/trinquete). Con la base
     fija, .nav siempre puede volver a 1 línea cuando el nav-links wrap
     deja de hacer falta. */
  --nav-h-base: 76px;
  --nav-h: 76px;
}

/* Isotipo satinado (idéntico al de producción) */
@keyframes logoSheen {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.site-logo { position: relative; display: inline-block; aspect-ratio: 794 / 252; flex-shrink: 0; }
.site-logo-nav { width: 132px; }
.site-logo-hero { width: min(820px, 50vw); max-width: 100%; position: relative; z-index: 2; }
.site-logo-layer {
  position: absolute; inset: 0;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-position: left center; mask-position: left center;
  background-size: 230% 230%;
  animation: logoSheen 10s ease-in-out infinite;
}
.site-logo-text {
  -webkit-mask-image: url("assets/img/logos/mask-texto-nexo.png");
  mask-image: url("assets/img/logos/mask-texto-nexo.png");
  /* Piso subido — antes tocaba gris muy oscuro fuera del barrido del
     brillo, así que la mayor parte del tiempo el logo se veía apagado.
     Ahora el brillo sigue barriendo, pero el color de reposo ya es un
     gris claro/plata en vez de casi negro. */
  background-image: linear-gradient(100deg,
    #8b8e93 0%, #a3a6ab 10%, #bfc2c6 21%, #dcdee0 32%, #f4f5f7 41%,
    #ffffff 46%, #f4f5f7 51%, #dcdee0 61%, #bfc2c6 72%, #a3a6ab 83%,
    #8b8e93 93%, #94979c 100%);
  filter: drop-shadow(0 2px 3px rgba(20,17,12,0.4)) drop-shadow(0 0 7px rgba(20,17,12,0.22));
}
.site-logo-icon {
  -webkit-mask-image: url("assets/img/logos/mask-icono-nexo.png");
  mask-image: url("assets/img/logos/mask-icono-nexo.png");
  /* Mismo criterio: piso en granate real, no negro. */
  background-image: linear-gradient(100deg,
    #6b1620 0%, #7c1c27 10%, #932230 21%, #a12836 32%, #ad2f3f 41%,
    #b8384a 46%, #ad2f3f 51%, #a12836 61%, #932230 72%, #7c1c27 83%,
    #6b1620 93%, #711a24 100%);
  filter: drop-shadow(0 3px 4px rgba(20,17,12,0.45)) drop-shadow(0 0 6px rgba(20,17,12,0.2));
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; tab-size: 2; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  position: relative;
  background-color: var(--bg);
  background-image: linear-gradient(120deg, #7e7e7e 0%, #929292 22%, #a1a1a1 42%, #b0b0b0 50%, #a1a1a1 58%, #929292 78%, #7e7e7e 100%);
  background-size: 180% 180%;
  background-attachment: fixed;
  animation: bgSheen 60s ease-in-out infinite alternate;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}
@keyframes bgSheen { 0% { background-position: 20% 40%; } 100% { background-position: 75% 60%; } }

/* Cursor de marca, calcado del mecanismo de rolls-roycemotorcars.com:
   no es una imagen de cursor estática — es un círculo real (DOM, ver
   initBrandCursor en main.js) que sigue al mouse con inercia (lerp,
   mismo criterio que initMouseGradient) y crece al pasar sobre algo
   clickeable. El anillo usa mix-blend-mode:difference (como en RR) para
   verse bien sobre cualquier fondo sin necesitar una versión clara y
   otra oscura; el "8" va aparte, sin blend, para que se mantenga rojo
   de marca siempre. Solo en dispositivos con mouse real (fineHover) —
   en touch, la flecha nativa ni se usa, así que no hace falta nada. */
html.brand-cursor-active, html.brand-cursor-active * { cursor: none !important; }
.brand-cursor { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; will-change: transform; }
.brand-cursor-ring {
  position: absolute; top: 0; left: 0; width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border: 1.5px solid #fff; border-radius: 50%; mix-blend-mode: difference;
  transition: width .25s var(--ease-out), height .25s var(--ease-out), margin .25s var(--ease-out), opacity .2s ease;
}
.brand-cursor.is-hover .brand-cursor-ring { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
.brand-cursor-dot {
  position: absolute; top: 0; left: 0; width: 20px; height: 20px; margin: -10px 0 0 -10px;
  display: grid; place-items: center;
  font-family: var(--sans); font-weight: 800; font-size: 13px; color: var(--accent);
  text-shadow: 0 0 3px rgba(255,255,255,0.9), 0 0 1px rgba(255,255,255,0.9);
  transition: opacity .2s ease;
}
.brand-cursor.is-hidden { opacity: 0; }

/* Profundidad ambiente: dos manchas de luz/sombra grandes y difusas,
   fijas al viewport — el gris de fondo deja de leerse como una placa
   lisa sin que se note "un efecto", como si hubiera una fuente de luz
   fuera de cuadro. Detrás de todo el contenido (z-index -1). */
body::before {
  content: ""; position: fixed; inset: -15%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 18% 15%, rgba(255,255,255,0.12), transparent 42%),
    radial-gradient(circle at 85% 80%, rgba(0,0,0,0.16), transparent 48%);
}

/* Cinta diagonal de fondo: no es una imagen fija — es un <path> SVG real
   (inyectado por initBgRibbonLine en main.js) que se "dibuja" a medida
   que se scrollea, vía stroke-dasharray/dashoffset scrubbeado contra el
   scroll de toda la página. Mismo gradiente granate que .wipe-divider. */
.bg-ribbon-line { position: absolute; top: 0; left: 0; z-index: -1; pointer-events: none; overflow: visible; }
.bg-ribbon-line path { fill: none; stroke-width: 64; opacity: 0.88; }
@media (prefers-reduced-motion: reduce) {
  .bg-ribbon-line { display: none; }
}

/* El atributo hidden debe ganarle siempre a cualquier display:flex/grid
   de un componente (.stock-empty, .vehicle-notfound, etc.) — si no, el
   elemento queda "hidden" pero ocupando y mostrando su lugar igual. */
[hidden] { display: none !important; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; font-family: var(--body); }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.05; letter-spacing: -0.02em; font-family: var(--display); color: var(--ink); }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* =============================================================
   3. Utilities
   ============================================================= */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 1.25rem; }
@media (min-width: 720px) { .container { padding-inline: 2rem; } }

.skip-link { position: fixed; top: -100px; left: 1rem; padding: 0.6rem 1rem; background: var(--ink); color: var(--on-accent); z-index: 9999; border-radius: 8px; font-weight: 600; }
.skip-link:focus { top: 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.section { position: relative; padding-block: clamp(4.5rem, 9vw, 8rem); scroll-margin-top: calc(var(--nav-h) + 1rem); }
.section-head { max-width: 640px; margin-bottom: clamp(2.5rem, 5vw, 4rem); position: relative; z-index: 1; }
.section-head.center { margin-inline: auto; text-align: center; }

/* Micro-etiqueta de sección: todo mayúsculas, tracking ancho — el
   "kicker" de home/hero se sacó a pedido del cliente en el rebrand;
   esta SÍ se mantiene porque solo marca secciones internas, no repite
   ese patrón removido. */
.section-kicker {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--sans); font-weight: 700; font-size: 0.76rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--accent-2); margin-bottom: 1rem;
}
.section-kicker::before { content: ""; width: 22px; height: 1.5px; background: var(--accent); }

.section-title { font-size: clamp(1.9rem, 4vw, 2.9rem); margin-bottom: 0.85rem; }
.section-sub { color: var(--mute); font-size: clamp(1rem, 1.4vw, 1.15rem); max-width: 56ch; }
.section-head.center .section-sub { margin-inline: auto; }
em { font-style: normal; color: var(--accent-2); }

/* --- Secciones con foto de fondo (Ventajas, Asesor IA, Estudio, Contacto):
   mismo criterio que .vehicle-hero-bg — capa de foto + degradado oscuro
   detrás de todo, texto suelto (no en .card, que ya es vidrio oscuro
   propio) pasa a blanco/gris claro. --- */
.has-bg-photo { position: relative; isolation: isolate; }
.section-bg-photo { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; }
/* Franjas más oscuras pegadas al borde superior/inferior de CADA foto
   (no solo un tinte parejo): varias secciones con foto van una pegada
   a la otra sin nada plano en el medio, y el corte entre una foto y la
   siguiente se notaba como una costura (cada una con su propio brillo).
   Oscureciendo fuerte justo en el borde de las dos, el empalme queda
   parejo sin importar qué tan clara sea cada foto — no es una franja
   nueva separada, se suma al mismo tinte de siempre con más stops. */
.section-bg-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(11,10,9,0.97) 0%,
    rgba(11,10,9,0.84) 11%,
    rgba(11,10,9,0.86) 89%,
    rgba(11,10,9,0.97) 100%
  );
}
.has-bg-photo .section-title, .has-bg-photo h1, .has-bg-photo h2, .has-bg-photo h3, .has-bg-photo h4 { color: #fff; }
.has-bg-photo .section-sub { color: rgba(255,255,255,0.82); }
.has-bg-photo .compat-step { color: rgba(255,255,255,0.82); }
.has-bg-photo .compat-disclaimer-strong { color: rgba(255,255,255,0.65); }
.has-bg-photo .chip { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.25); color: rgba(255,255,255,0.85); }
.has-bg-photo .chip:hover, .has-bg-photo .chip.is-active { border-color: var(--accent); background: rgba(156,38,54,0.35); }
.has-bg-photo .contact-info-item { background: rgba(17,15,13,0.4); border-color: rgba(255,255,255,0.14); }
.has-bg-photo .contact-info-item strong { color: #fff; }
.has-bg-photo .contact-info-item span:not(.contact-info-icon) { color: rgba(255,255,255,0.7); }
.has-bg-photo .contact-info-icon { background: rgba(255,255,255,0.12); color: #fff; }
.has-bg-photo .faq-item { background: rgba(17,15,13,0.4); border-color: rgba(255,255,255,0.14); }
.has-bg-photo .faq-q { color: #fff; }
.has-bg-photo .faq-q .plus::before, .has-bg-photo .faq-q .plus::after { background: #fff; }
.has-bg-photo .faq-a-inner { color: rgba(255,255,255,0.75); }
.has-bg-photo .step-scene-n { -webkit-text-stroke-color: rgba(255,255,255,0.22); }
.has-bg-photo .step-scene.is-active .step-scene-n { -webkit-text-stroke-color: rgba(224,86,106,0.55); }
.has-bg-photo .step-scene-body p { color: rgba(255,255,255,0.78); }
.has-bg-photo .step-scene { border-inline-end-color: rgba(255,255,255,0.14); }
/* Concesionarias adheridas: la foto va solo en la franja de intro
   (kicker/título/buscador/filtros), nunca detrás de la grilla de
   agencias — por eso es su propia caja con esquinas redondeadas y
   overflow:hidden, en vez de cubrir toda la sección como el resto de
   los .has-bg-photo. */
.conce-head-bg {
  border-radius: var(--radius); overflow: hidden;
  padding: clamp(2rem, 5vw, 3.2rem) clamp(1.3rem, 4vw, 2.4rem);
  margin-bottom: 2.2rem;
}
.conce-head-bg .filter-label { color: rgba(255,255,255,0.7); }
@supports (backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px)) {
  .has-bg-photo .faq-item { backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); }
}
@supports (backdrop-filter: blur(16px)) or (-webkit-backdrop-filter: blur(16px)) {
  .has-bg-photo .contact-info-item { backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); }
}
.mw-strong { font-weight: 700; color: var(--ink); }

/* =============================================================
   4. Componentes
   ============================================================= */

/* --- Botones --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  padding: 0.95rem 1.6rem; border-radius: 999px; font-weight: 600; font-size: 0.98rem;
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out), background-color 0.3s var(--ease-out), border-color .3s var(--ease-out);
  white-space: nowrap;
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-2); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); }
.btn-ghost:hover { border-color: var(--accent-2); color: var(--accent-2); background: rgba(28,24,19,0.03); }

/* Botón magnético: el transform lo maneja JS a cada frame (rAF), así que
   se saca del transition general para que no compita con el lerp — el
   resto de las transiciones (sombra, color) se mantienen. */
.btn-magnetic { transition: box-shadow 0.45s var(--ease-out), background-color 0.3s var(--ease-out), border-color .3s var(--ease-out); will-change: transform; }
.btn-magnetic:hover { transform: none; }
.btn-sm { padding: 0.7rem 1.15rem; font-size: 0.88rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none !important; }

/* --- Nav --- */
/* Liquid glass fijo: siempre transparente + blureado, nunca se solidifica
   al scrollear — es el look que se veía apenas se entraba a la página,
   ahora permanente en todos lados. */
.nav {
  position: fixed; inset-inline: 0; top: 0; z-index: 500;
  /* min-height en vez de height fijo: con los 11-12 links sueltos del
     nav (ver .nav-links más abajo) la barra puede necesitar una segunda
     línea en anchos intermedios, y necesita poder crecer sin recortar
     contenido. syncNavHeight() en main.js (dentro de initNav) mide el
     alto real con ResizeObserver y actualiza --nav-h en vivo, así que
     todo lo que depende de esa variable (padding-top de secciones,
     sticky, el inset de .mobile-menu) se mantiene alineado solo. */
  min-height: var(--nav-h-base);
  display: flex; align-items: center;
  background: linear-gradient(to bottom, rgba(245, 240, 230, 0.55), rgba(245, 240, 230, 0.08));
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* Texto blanco en las páginas con foto/video de marca arriba de todo
   (vende-con-nexo.html, informacion-sector.html): el nav nunca se
   solidifica, así que sin esto el texto oscuro de siempre quedaría
   ilegible sobre esa foto. */
.nav.nav-on-photo .nav-links a,
.nav.nav-on-photo .nav-dropdown-trigger { color: rgba(255,255,255,0.92); }
.nav.nav-on-photo .nav-links a::after { background: #fff; }
.nav.nav-on-photo .nav-links a:hover,
.nav.nav-on-photo .nav-dropdown-trigger:hover,
.nav.nav-on-photo .nav-dropdown:hover .nav-dropdown-trigger { color: #fff; }
.nav.nav-on-photo .nav-burger { border-color: rgba(255,255,255,0.5); }
.nav.nav-on-photo .nav-burger span,
.nav.nav-on-photo .nav-burger span::before,
.nav.nav-on-photo .nav-burger span::after { background: #fff; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; }
.brand { display: flex; align-items: center; gap: 0.6rem; }
/* Isotipo de la Cámara de Comercio Automotor de Córdoba, agrupado con el
   isotipo de NexoMotors para que los dos se muevan como una sola unidad
   dentro del space-between del nav (si no, quedan separados por todo el
   ancho disponible en vez de pegados). */
.nav-brand-group { display: flex; align-items: center; gap: 0.7rem; flex-shrink: 0; margin-left: -0.4rem; }
.nav-camara-logo { height: 48px; width: auto; }
.nav-links { display: none; align-items: center; gap: 0.4rem; flex-wrap: nowrap; }
.nav-links a { font-size: inherit; color: var(--mute); position: relative; padding-block: 4px; white-space: nowrap; }

.nav-dropdown { position: relative; }
.nav-dropdown-trigger { background: none; border: 0; font: inherit; font-size: inherit; color: var(--mute); cursor: pointer; display: inline-flex; align-items: center; gap: 0.3em; padding-block: 4px; white-space: nowrap; }
.nav-dropdown-trigger:hover, .nav-dropdown:hover .nav-dropdown-trigger, .nav-dropdown:focus-within .nav-dropdown-trigger { color: var(--ink); }
.nav-dropdown-caret { font-size: 0.7em; transition: transform .2s var(--ease-out); }
.nav-dropdown:hover .nav-dropdown-caret, .nav-dropdown:focus-within .nav-dropdown-caret { transform: rotate(180deg); }
.nav-dropdown-menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px);
  /* borde + sombra ancha juntos: mismo combo que ya se evitó a
     propósito en .chat-panel — nos quedamos solo con la sombra. */
  background: var(--card); border-radius: var(--radius-sm);
  padding: 0.5rem; display: flex; flex-direction: column; gap: 0.2rem; min-width: 180px;
  opacity: 0; pointer-events: none; transition: opacity .18s var(--ease-out), transform .18s var(--ease-out);
  box-shadow: 0 18px 40px -12px rgba(33,29,23,0.35);
}
.nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown:focus-within .nav-dropdown-menu { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(2px); }
.nav-dropdown-menu a { padding: 0.5rem 0.7rem; border-radius: 8px; font-size: 0.86rem; }
.nav-dropdown-menu a:hover { background: rgba(28,24,19,0.06); color: var(--ink); }
.nav-dropdown-menu a::after { display: none; }

.nav-links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--accent-2); transition: right 0.35s var(--ease-out); }
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { right: 0; }
@media (min-width: 1360px) {
  .nav-links { display: flex; }
  /* .container tiene flex:1 1 auto dentro de .nav — su borde derecho
     coincide exactamente con donde arrancan "Ingresar" y "Nexo
     Experience" (viven fuera de .container, pegados al borde real de la
     ventana). Antes los links quedaban pegados al logo con gap fijo, y en
     monitores anchos el hueco vacío quedaba todo del lado derecho, como
     descuadrado. Ahora .nav-links pasa a ocupar todo ese espacio sobrante
     (flex:1) y centra su propio contenido adentro — quedan centrados
     entre el logo y "Ingresar", no pegados a ninguno de los dos lados. */
  .nav-inner { justify-content: flex-start; gap: 0.9rem; flex-wrap: wrap; row-gap: 0.3rem; }
  /* OJO al tocar estos valores: el límite real no es "Nexo Experience"
     sino el widget "Ingresar" (.nav-account, insertado por JS pegado a
     nx-edge — ver initAuthUI en main.js), que se mide aparte de .container
     y achica el espacio real disponible mucho más de lo que parece a
     simple vista. Medir siempre con getBoundingClientRect() contra
     .nav-account, nunca contra .nav-nx-edge ni asumir que .container
     define el límite.
     Oportunidades Nexo, Plan Nexo y Ventajas quedaron sueltos en la
     barra; Contacto, Asesor IA (solo index.html) y Preguntas volvieron
     a vivir adentro de un dropdown "Más" al final (mismo componente
     .nav-dropdown de siempre). Con 9-10 ítems entra en una sola línea
     con una letra razonable en casi todos los anchos de escritorio; el
     flex-wrap que queda en .nav-inner/.nav-links es solo red de
     seguridad para el caso borde (p.ej. una ventana angosta en modo
     ventana, no pantalla completa) — si llegara a hacer falta una
     segunda línea, .nav sigue en min-height (no height fijo) y
     syncNavHeight() en main.js mantiene --nav-h al día vía
     ResizeObserver, así que el resto del sitio (padding-top de
     secciones, sticky, .mobile-menu) no se desalinea. */
  .nav-links { flex: 1 1 auto; justify-content: center; flex-wrap: wrap; row-gap: 0.35rem; gap: clamp(0.5rem, -1.2rem + 2.2vw, 0.85rem); font-size: clamp(0.78rem, 0.4rem + 0.35vw, 0.94rem); padding-block: 0.35rem; }
}

/* --- Nexo Experience: botón negro/dorado, paleta propia adrede
   distinta al resto del sitio (VIP, tarjeta física real) --- */
:root {
  --nx-black: #0b0a09; --nx-black-2: #17140f; --nx-gold: #d4af6a;
  /* nx-gold-dim aclarado: el borde del degradé del monograma daba
     4.2:1 contra --nx-black (falla el 4.5:1 de AA para texto chico). */
  --nx-gold-bright: #f0d9a8; --nx-gold-dim: #937a4a;
}
.btn-nx {
  position: relative; display: none; align-items: center; gap: 0.55em;
  padding: 0.7rem 1.15rem 0.7rem 0.6rem; border-radius: 999px; font-size: 0.86rem; font-weight: 600;
  background: linear-gradient(135deg, var(--nx-black) 0%, var(--nx-black-2) 50%, var(--nx-black) 100%);
  color: var(--nx-gold-bright); border: 1px solid rgba(212,175,106,0.45);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 8px 20px -10px rgba(0,0,0,0.6);
  overflow: hidden; white-space: nowrap;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease-out);
}
@media (min-width: 900px) { .btn-nx { display: inline-flex; } }
.btn-nx::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(212,175,106,0.35) 45%, transparent 70%);
  background-size: 220% 100%; animation: nxSheen 4.5s ease-in-out infinite;
}
@keyframes nxSheen { 0% { background-position: 130% 0; } 100% { background-position: -30% 0; } }
.btn-nx:hover { transform: translateY(-2px); border-color: rgba(212,175,106,0.75); box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 14px 28px -12px rgba(0,0,0,0.7); }
.btn-nx-mark {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; font-family: var(--display); font-style: italic; font-weight: 700;
  background: radial-gradient(circle at 35% 30%, var(--nx-gold-bright), var(--nx-gold) 55%, var(--nx-gold-dim) 100%);
  color: var(--nx-black); font-size: 0.78rem;
}
.btn-nx span:last-child, .btn-nx { position: relative; }
.btn-nx > :not(.btn-nx-mark) { position: relative; z-index: 1; }

/* Nexo Experience como franja de borde: ya no es un botón más adentro
   del nav, es su propio ítem flex al lado de .container — al no tener
   padding-inline propio ni el .nav, queda pegado al borde real de la
   ventana, y align-self:stretch lo hace ocupar todo el alto de la
   barra (el resto del nav sigue centrado con align-items:center).
   max-width:none pisa el tope de 1600px de .container (pensado para el
   contenido de las secciones, no para el nav): sin esto, en monitores
   anchos (>1700px aprox) .container se queda achicado en su propio
   techo y el espacio de más queda sin repartir entre el borde del
   container y "Ingresar"/"Nexo Experience" — ahí es donde .nav-links
   (centrado adentro de .container vía flex:1+justify-content:center)
   se veía pegado al logo en vez de centrado en toda la barra. */
.nav > .container { flex: 1 1 auto; min-width: 0; max-width: none; }
.nav-nx-edge {
  position: relative; display: none; align-items: center; justify-content: center; gap: 0.55em;
  align-self: center; padding: 0.7rem 1.15rem; font-size: 0.88rem; font-weight: 600; white-space: nowrap;
  background: linear-gradient(135deg, var(--nx-black) 0%, var(--nx-black-2) 50%, var(--nx-black) 100%);
  color: var(--nx-gold-bright); border: 1px solid rgba(212,175,106,0.45); border-right: 0;
  border-radius: 999px 0 0 999px;
  overflow: hidden; transition: border-color .3s var(--ease-out);
}
@media (min-width: 900px) { .nav-nx-edge { display: inline-flex; } }
.nav-nx-edge::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(212,175,106,0.35) 45%, transparent 70%);
  background-size: 220% 100%; animation: nxSheen 4.5s ease-in-out infinite;
}
.nav-nx-edge:hover { border-left-color: rgba(212,175,106,0.75); }
.nav-nx-edge > * { position: relative; z-index: 1; }
.mobile-nx-link {
  display: flex; align-items: center; gap: 0.6em; margin-bottom: 0.6rem; padding: 0.9rem 1rem !important;
  border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--nx-black), var(--nx-black-2));
  color: var(--nx-gold-bright) !important; border: 1px solid rgba(212,175,106,0.4); font-size: 1.1rem !important;
}
@media (min-width: 1360px) { .mobile-nx-link { display: none; } }

/* --- Transición "story": círculo dorado→negro que crece desde el
   botón y tapa toda la pantalla antes de navegar. Se gatea desde JS
   (initNexoExperienceTransition); sin JS el link navega directo, sin
   drama — nunca depende de la animación para funcionar. */
.nx-portal-overlay {
  position: fixed; width: 24px; height: 24px; border-radius: 50%;
  background: radial-gradient(circle, var(--nx-gold) 0%, var(--nx-black-2) 55%, var(--nx-black) 100%);
  transform: translate(-50%, -50%) scale(1);
  z-index: 99999; pointer-events: none;
  transition: transform .7s cubic-bezier(0.5, 0, 0.25, 1);
}
.nx-portal-overlay.is-expanding { transform: translate(-50%, -50%) scale(var(--nx-scale, 90)); }

.nav-burger { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--line-strong); }
@media (min-width: 1360px) { .nav-burger { display: none; } }
.nav-burger span { display: block; width: 18px; height: 1.5px; background: var(--ink); position: relative; }
.nav-burger span::before, .nav-burger span::after { content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: var(--ink); transition: transform .3s var(--ease-out); }
.nav-burger span::before { top: -6px; }
.nav-burger span::after { top: 6px; }

.mobile-menu {
  position: fixed; inset: var(--nav-h) 0 0 0; z-index: 480;
  /* Opacidad 100% (antes 98%): ese 2% dejaba pasar un fantasma del
     texto del hero detrás de los links al abrir el menú. */
  background: rgb(226, 219, 203);
  padding: 2rem 1.5rem;
  transform: translateY(-8px); opacity: 0; pointer-events: none;
  transition: opacity .35s var(--ease-out), transform .35s var(--ease-out);
}
.mobile-menu.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.mobile-menu a { display: block; font-family: var(--display); font-size: 1.6rem; padding-block: 0.7rem; border-bottom: 1px solid var(--line); color: var(--ink); }
@media (min-width: 1360px) { .mobile-menu { display: none; } }

/* --- Cards: liquid glass (vidrio esmerilado oscuro + texto blanco),
   mismo lenguaje que .glass-panel/.hero-stats-panel/.venta-slogan-panel
   pero con un velo OSCURO en vez de claro — así funciona igual de bien
   flotando sobre las fotos nuevas (Ventajas, Estudio, Contacto) que
   sobre el fondo plata liso del resto del sitio, sin depender de qué
   haya detrás. Filete superior en granate al pasar el mouse, mismo
   lenguaje de acento que el resto del sitio. */
.card {
  background: rgba(17, 15, 13, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-top: 2px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius);
  padding: 1.9rem;
  color: #fff;
  transition: transform 0.5s var(--ease-out), border-color 0.4s var(--ease-out), background-color 0.4s var(--ease-out);
  position: relative;
}
@supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) {
  .card { backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); }
}
.card h1, .card h2, .card h3, .card h4 { color: #fff; }
.card:hover { border-color: rgba(255, 255, 255, 0.22); border-top-color: var(--accent); background: rgba(17, 15, 13, 0.52); }
.card.tilt-target { will-change: transform; }

/* --- Pills de atributo (patrón "fichas") --- */
.pill-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pill {
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.4rem 0.85rem; border-radius: 999px;
  background: rgba(28,24,19,0.05); border: 1px solid var(--line);
  font-size: 0.78rem; font-weight: 600; color: var(--mute);
  letter-spacing: 0.01em;
}
.pill-accent { background: rgba(156,38,54,0.1); border-color: rgba(156,38,54,0.28); color: var(--accent-2); }

/* --- Tilt on cards --- */
.card.tilt-target {
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.35s var(--ease-out), border-color 0.4s var(--ease-out), background-color 0.4s var(--ease-out);
}

/* --- Reveal --- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-split] { opacity: 1; transform: none; }

/* --- Hero-reveal: base SIEMPRE visible (sin depender de JS/IO);
   GSAP, si está disponible, hace un gsap.from() más prolijo por
   encima. Ver initHeroTimeline en main.js. --- */
.hero-reveal { opacity: 1; transform: none; }

/* --- Frosted-glass panel (con fallback sólido — B.12). Radio chico,
   sin sombra: el blur ya lo diferencia de una tarjeta plana, no hace
   falta además redondearlo como si fuera una píldora. --- */
.glass-panel {
  background: rgba(226, 219, 203, 0.78);
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 2px;
  border-top: 2px solid var(--accent-2);
}
@supports (backdrop-filter: blur(20px)) {
  .glass-panel {
    background: rgba(226, 219, 203, 0.55);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
  }
}

/* =============================================================
   5. Secciones
   ============================================================= */

/* --- Splash --- */
.splash {
  position: fixed; inset: 0; z-index: 9998;
  display: grid; place-items: center;
  background: var(--bg-2);
  animation: splashSafety .01s 2.5s forwards;
}
.splash-mark { width: 120px; height: auto; animation: splashPulse 1.1s ease-in-out infinite; }
@keyframes splashPulse { 0%, 100% { opacity: 0.55; transform: scale(0.97); } 50% { opacity: 1; transform: scale(1); } }
@keyframes splashSafety { to { opacity: 0; pointer-events: none; clip-path: inset(0 0 100% 0); } }
.splash.is-out { opacity: 0; pointer-events: none; transition: opacity .5s var(--ease-out); clip-path: inset(0 0 100% 0); }

/* --- Hero --- */
.hero {
  position: relative; z-index: 0; isolation: isolate;
  min-height: 100svh;
  display: flex; align-items: center;
  padding-top: calc(var(--nav-h) + 1.4rem);
  padding-bottom: 2rem;
  overflow: clip;
}
.hero-gradient {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(circle 620px at var(--mx, 30%) var(--my, 20%), rgba(238,236,230,0.45) 0%, transparent 60%),
    radial-gradient(circle 720px at calc(var(--mx, 30%) + 25%) calc(var(--my, 20%) + 35%), rgba(210,208,200,0.24) 0%, transparent 62%);
  transition: background 0.6s ease;
}
/* Grilla decorativa retirada: un fondo de líneas tipo blueprint/dashboard
   no tiene motivo funcional en el header de una concesionaria (no es un
   canvas, mapa ni superficie de medición) — el elemento queda en el
   markup de cada página pero ya no pinta nada; el mouse-gradient y el
   ghost-type de abajo ya le dan textura al hero. */
.hero-grid-lines { display: none; }

/* Ghost-type: palabra gigante de bajo contraste detrás del isotipo —
   reemplaza la foto de fondo que el cliente sacó del hero a propósito;
   da personalidad sin volver a meter una foto ni un color oscuro. */
.hero-ghost {
  position: absolute; z-index: 1; inset: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; pointer-events: none;
  font-family: var(--display); font-style: italic; font-weight: 700;
  font-size: clamp(6rem, 18vw, 15rem);
  color: transparent;
  -webkit-text-stroke: 1px rgba(28, 24, 19, 0.09);
  white-space: nowrap;
  user-select: none;
}
/* Piso de 6rem pensado para desktop: en una pantalla de ~375px eso deja
   ver solo un fragmento de letra a cada lado, que lee como texto roto
   en vez de textura de fondo. Bajamos el piso solo en mobile. */
@media (max-width: 560px) { .hero-ghost { font-size: clamp(2.6rem, 16vw, 4rem); } }

/* Hero apilado tipo Lando Norris: el isotipo domina arriba, centrado y
   grande; abajo, en una fila, el mensaje a la izquierda y los CTA a la
   derecha — ya no es un split 50/50 de toda la sección. Esto es lo que
   se ve en la slide 0 (degradado); las fotos (slide 1/2) pisan estas
   reglas más abajo, con .hero-carousel.is-slide-1/2. */
.hero-inner { position: relative; z-index: 5; display: flex; flex-direction: column; gap: clamp(0.8rem, 2vw, 1.3rem); width: 100%; }

/* align-items:center (no flex-end): los botones quedan a la altura de
   la mitad del bloque de texto, no pegados a su base. */
.hero-bottom-row { display: flex; flex-direction: column; gap: 1.4rem; }
@media (min-width: 860px) { .hero-bottom-row { flex-direction: row; align-items: center; justify-content: space-between; gap: 2.5rem; } }

.hero-copy { max-width: 46ch; }

.hero-title { font-size: clamp(1.8rem, 3.6vw, 2.8rem); line-height: 1.05; max-width: 15ch; margin-bottom: 0.8rem; transition-delay: .05s; }
/* Cortina: cada línea vive en una máscara con overflow:hidden. Estado
   base = ya visible (translateY 0) para que sin GSAP se lea perfecto;
   GSAP anima .line-inner desde yPercent(110) — nunca al revés. */
.hero-title .line-mask { display: block; overflow: hidden; }
.hero-title .line-inner { display: block; }
.hero-sub { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--mute); max-width: 46ch; margin-bottom: 0; transition-delay: .16s; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 0; transition-delay: .26s; flex-shrink: 0; }

/* Panel frosted-glass envolviendo las estadísticas — único por
   pantalla, tal como pide el catálogo de efectos. */
.hero-stats-panel {
  display: inline-flex; padding: 1.4rem 1.6rem; transition-delay: .34s;
}
.hero-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.3rem 2.2rem; }
@media (min-width: 540px) { .hero-stats { grid-template-columns: repeat(4, 1fr); } }
.hero-stat-value { font-family: var(--display); font-weight: 700; font-size: clamp(1.4rem, 2.4vw, 1.95rem); color: var(--ink); display: flex; align-items: baseline; gap: 2px; letter-spacing: -0.01em; }
.hero-stat-label { font-size: 0.8rem; color: var(--mute-2); margin-top: 0.2rem; }

.hero-visual {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 170px; transition-delay: .1s;
  transition: opacity 0.6s var(--ease-out);
}
@media (min-width: 640px) { .hero-visual { min-height: 230px; } }

/* Fondos rotativos del hero (data-hero-slide="1" y "2"): puro fondo
   ambiental detrás del contenido fijo del hero — object-fit:cover llena
   la pantalla, y el scrim (fuerte a la izquierda, donde va el texto, y
   abajo, para tapar el textito chico que traen las fotos) deja el
   título/botones siempre legibles sin importar qué foto esté activa.
   Cada una es un link a su propia sección (como antes de que el hero
   pasara a tener contenido fijo) — clickeable en toda la foto, salvo
   donde se superpone el contenido fijo (z-index más alto). */
.hero-bg-slide-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; animation: nx-kenburns 26s ease-in-out infinite; }
[data-hero-slide="2"] .hero-bg-slide-photo { animation-duration: 32s; animation-delay: -8s; }
[data-hero-slide="3"] .hero-bg-slide-photo { animation-duration: 22s; animation-delay: -4s; }
[data-hero-slide="4"] .hero-bg-slide-photo { animation-duration: 29s; animation-delay: -13s; }
/* Slide "Partners oficiales": no hay una sola foto que represente a 4
   instituciones distintas, así que en vez de forzar una, todo el fondo
   es blanco. Título + bajada van arriba a la izquierda (mismo lugar que
   cualquier otra slide) y los logos corren en una cartelera infinita
   (dos copias del mismo tramo, animadas de 0 a -50% de su propio ancho
   — igual técnica que .modelo-bg-section .hero-ghost) para que, cuando
   se sumen más partners, la fila siga leyéndose igual sin rediseñar
   nada. Por ahora son pocos, por eso cada copia repite el set 3 veces
   (así la cartelera no se queda corta en pantallas anchas). */
.hero-bg-slide-brands-bg { position: absolute; inset: 0; background: #fff; }
/* Con fondo blanco, título/cartelito no pueden ser blancos como en las
   demás (se perderían) — acá van en tinta oscura, mismo criterio que la
   slide 0 (degradado, sin foto). */
/* Sin kicker (se sacó de home/hero en el rebrand, ver .section-kicker) —
   acá el título suma presencia con tamaño propio más grande, la última
   palabra en acento y un filete corto debajo (mismo lenguaje de "línea
   de acento fina" que ya usan las cards y el kicker, solo que como
   remate en vez de etiqueta arriba). */
.hero-bg-slide-brands .hero-bg-slide-title {
  color: var(--ink); text-shadow: none;
  font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1.08; max-width: 13ch;
}
.hero-bg-slide-brands-title-accent { color: var(--accent-2); }
.hero-bg-slide-brands .hero-bg-slide-title::after {
  content: ""; display: block; width: 58px; height: 3px; margin-top: 1rem;
  background: var(--accent); border-radius: 2px;
}
.hero-bg-slide-brands .hero-bg-slide-hint { background: rgba(28,24,19,0.06); color: var(--ink); backdrop-filter: none; -webkit-backdrop-filter: none; }
.hero-bg-slide-brands:hover .hero-bg-slide-hint { background: rgba(28,24,19,0.1); }
.hero-bg-slide-brands-sub {
  position: absolute; z-index: 1;
  left: clamp(1.2rem, 4vw, 3rem); right: clamp(1.2rem, 4vw, 3rem);
  top: clamp(11.6rem, 24vw, 15.6rem);
  max-width: 46ch; margin: 0;
  font-size: clamp(0.95rem, 1.6vw, 1.1rem); color: var(--mute);
}
.hero-bg-slide-brands-marquee {
  position: absolute; z-index: 1; left: 0; right: 0; top: 64%; transform: translateY(-50%);
  overflow: hidden;
}
.hero-bg-slide-brands-track { display: flex; align-items: center; width: max-content; animation: brandsMarquee 30s linear infinite; }
.hero-bg-slide-brands-track img {
  height: clamp(104px, 14vw, 172px); width: auto; max-width: 480px; object-fit: contain;
  padding-inline: clamp(2rem, 5vw, 3.2rem); flex-shrink: 0;
}
.hero-bg-slide-brands-track img + img { border-left: 1px solid rgba(28,24,19,0.16); }
@keyframes brandsMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) { .hero-bg-slide-brands-track { animation: none; } }
@media (max-width: 560px) {
  .hero-bg-slide-brands-track img { height: 92px; max-width: 300px; padding-inline: 1.6rem; }
}
.hero-bg-slide-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(105deg, rgba(10,9,7,0.86) 0%, rgba(10,9,7,0.58) 42%, rgba(10,9,7,0.22) 72%),
    linear-gradient(to top, rgba(10,9,7,0.85) 0%, rgba(10,9,7,0.78) 22%, transparent 48%);
}
/* Aviso de que la foto es clickeable — arriba a la derecha, lejos del
   título/botones fijos (izquierda/abajo) para no amontonar todo junto. */
.hero-bg-slide-hint {
  position: absolute; z-index: 1; top: clamp(5.6rem, 12vw, 7.2rem); right: clamp(1.2rem, 4vw, 3rem);
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 1.1rem; border-radius: 999px;
  background: rgba(10,9,7,0.4); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #fff; font-weight: 700; font-size: 0.86rem;
  transition: background-color .25s var(--ease-out), transform .25s var(--ease-out);
}
.hero-bg-slide:hover .hero-bg-slide-hint { background: rgba(10,9,7,0.62); transform: translateY(-2px); }
/* Título grande de la propia tarjeta (no el del hero, que se oculta para
   estas slides) — sin esto la única pista de qué es cada foto era el
   cartelito chico de arriba a la derecha, que con fotos menos obvias
   (ej. Vende con Nexo) no alcanzaba para entender de qué se trataba. */
.hero-bg-slide-title {
  position: absolute; z-index: 1; left: clamp(1.2rem, 4vw, 3rem); right: clamp(1.2rem, 4vw, 3rem);
  top: clamp(5.6rem, 12vw, 7.2rem);
  font-family: var(--display); font-style: normal; font-weight: 700;
  font-size: clamp(1.5rem, 3.2vw, 2.3rem); line-height: 1.15; max-width: 16ch;
  color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,0.4); margin: 0;
}

/* Slide "Oportunidades Nexo": la foto/título/link general viven en
   .hero-bg-slide-linkarea (mismo contenido que antes, solo que ahora
   en un <a> propio en vez de ser toda la slide) para poder poner las
   3 fichas-ejemplo como siblings — si vivieran adentro del mismo <a>
   serían un <a> dentro de otro <a> (inválido) y no se podrían tocar
   por separado. */
.hero-bg-slide-linkarea { position: absolute; inset: 0; display: block; }
.oportu-teaser-row {
  position: absolute; z-index: 2;
  left: clamp(1.2rem, 4vw, 3rem); right: clamp(1.2rem, 4vw, 3rem);
  bottom: clamp(7.3rem, 16vw, 10rem);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.6rem, 1.8vw, 1rem);
}
@media (max-width: 760px) {
  .oportu-teaser-row { grid-template-columns: 1fr; gap: 0.55rem; bottom: clamp(5.8rem, 18vw, 7.5rem); }
}
/* Liquid glass — misma receta que .venta-slogan-panel (nav/Vende con
   Nexo): degradé claro translúcido + blur, para que quede como un
   mismo sistema visual en vez de inventar un glass distinto acá. */
.oportu-teaser {
  position: relative; display: flex; flex-direction: column; gap: 0.3rem;
  padding: 0.85rem 1rem; border-radius: var(--radius-sm);
  background: linear-gradient(160deg, rgba(245,240,230,0.34), rgba(226,219,203,0.18));
  backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.38);
  box-shadow: 0 16px 34px -18px rgba(10,9,7,0.55);
  color: #fff; text-decoration: none;
  transition: transform 0.35s var(--ease-out), background-color 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}
.oportu-teaser:hover { transform: translateY(-4px); border-color: rgba(255,255,255,0.6); background: linear-gradient(160deg, rgba(245,240,230,0.46), rgba(226,219,203,0.28)); }
.oportu-teaser-example {
  position: absolute; top: 0.6rem; right: 0.65rem;
  background: rgba(156,38,54,0.8); color: #fff; font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.08em; padding: 0.22em 0.6em; border-radius: 999px;
}
.oportu-teaser-motivo { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: rgba(255,255,255,0.86); padding-right: 3.6rem; }
.oportu-teaser-title { font-family: var(--display); font-style: normal; font-weight: 700; font-size: clamp(0.92rem, 1.6vw, 1.05rem); }
.oportu-teaser-price { font-family: var(--display); font-weight: 700; font-size: 0.92rem; color: #fff; }

/* Slide "Financiaciones exclusivas": mismo remate de título que
   "Quiénes nos acompañan" (palabra en acento + filete), y debajo tres
   fichas de las financiadoras — mismo patrón liquid glass que las de
   Oportunidades, pero con logo + nombre en vez de motivo/precio. */
.hero-bg-slide-financ-title-accent { color: var(--accent); }
.hero-bg-slide-financ .hero-bg-slide-title::after {
  content: ""; display: block; width: 58px; height: 3px; margin-top: 0.8rem;
  background: var(--accent); border-radius: 2px;
}
.financ-teaser-row {
  position: absolute; z-index: 2;
  left: clamp(1.2rem, 4vw, 3rem); right: clamp(1.2rem, 4vw, 3rem);
  bottom: clamp(7.3rem, 16vw, 10rem);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.6rem, 1.8vw, 1rem);
}
@media (max-width: 760px) {
  .financ-teaser-row { grid-template-columns: 1fr; gap: 0.55rem; bottom: clamp(5.8rem, 18vw, 7.5rem); }
}
.financ-teaser {
  display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 0.9rem;
  padding: 0.95rem 1.1rem; border-radius: var(--radius-sm);
  background: linear-gradient(160deg, rgba(245,240,230,0.5), rgba(226,219,203,0.32));
  backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow: 0 16px 34px -18px rgba(10,9,7,0.55);
  text-decoration: none;
  transition: transform 0.35s var(--ease-out), background-color 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}
.financ-teaser:hover { transform: translateY(-4px); border-color: rgba(255,255,255,0.65); }
.financ-teaser-logo { height: 40px; width: auto; max-width: 55%; object-fit: contain; flex-shrink: 0; }
/* DeCréditos es un wordmark muy ancho y bajo (167x34) — a la misma
   altura que los otros dos logos (más altos que anchos) queda mucho
   más angosto; se le sube el tope de ancho aparte, mismo criterio que
   .partner-mark img[src*="decreditos"] en partners-oficiales.html. */
.financ-teaser-logo[src*="decreditos"] { max-width: 70%; }
/* Centro Prendario es gris medio + rosa sobre fondo transparente — con
   tan poco contraste contra el vidrio claro se pierde; una sombra
   oscura chica le da el borde que le falta sin tocar los colores
   propios del logo. */
.financ-teaser-logo[src*="centro-prendario"] { filter: drop-shadow(0 1px 2px rgba(10,9,7,0.55)) drop-shadow(0 0 5px rgba(10,9,7,0.3)); }
.financ-teaser-label {
  font-family: var(--sans); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: #fff; background: var(--accent); padding: 0.35em 0.95em; border-radius: 999px;
}

/* Con una foto atrás, el texto/botones fijos del hero pasan a claro —
   el mismo negro de siempre se pierde contra la foto y el scrim. */
.hero-carousel.is-slide-1 .hero-actions .btn-ghost,
.hero-carousel.is-slide-2 .hero-actions .btn-ghost,
.hero-carousel.is-slide-3 .hero-actions .btn-ghost,
.hero-carousel.is-slide-4 .hero-actions .btn-ghost {
  color: #fff; border-color: rgba(255,255,255,0.55); background: rgba(10,9,7,0.25);
}
.hero-carousel.is-slide-1 .hero-actions .btn-ghost:hover,
.hero-carousel.is-slide-2 .hero-actions .btn-ghost:hover,
.hero-carousel.is-slide-3 .hero-actions .btn-ghost:hover,
.hero-carousel.is-slide-4 .hero-actions .btn-ghost:hover {
  color: #fff; border-color: #fff; background: rgba(255,255,255,0.12);
}
/* Slide 0: a pedido, el texto y los botones bajan de "centrado a media
   pantalla" a la altura de los botones flotantes (WhatsApp/chat) en vez
   de dejar todo ese espacio vacío abajo — mismo mecanismo que usan las
   demás slides (hero-inner estirado + space-between), solo que con
   menos padding-bottom porque acá el logo sí se ve (en las otras
   slides es invisible, así que no importa si queda pegado arriba). */
.hero-carousel.is-slide-0 .hero { padding-bottom: clamp(2.6rem, 6vw, 4rem); }
.hero-carousel.is-slide-0 .hero-inner { align-self: stretch; justify-content: space-between; }
/* El isotipo quedaba pegado arriba, con todo el espacio vacío abajo
   suyo — baja un poco más al medio de ese hueco (a pedido). */
.hero-carousel.is-slide-0 .hero-visual { margin-top: clamp(3.5rem, 16vh, 10rem); }

/* Con una foto activa (no en la slide 0, que ahora tiene su propia
   regla arriba): se saca el título/bajada de encima de la foto y los
   botones se empujan al fondo del hero en vez de quedar a mitad de
   pantalla — con más padding abajo para no pisar los dots/flechas del
   carrusel. */
.hero-carousel.is-slide-1 .hero,
.hero-carousel.is-slide-2 .hero,
.hero-carousel.is-slide-3 .hero,
.hero-carousel.is-slide-4 .hero,
.hero-carousel.is-slide-5 .hero {
  /* A pedido: baja hasta quedar a la altura del botón de chat flotante
     (el rojo, abajo del de WhatsApp) en vez del padding más generoso de
     antes — con el nuevo data-financ-template por slide tiene más
     sentido como atajo directo a "preguntale al asesor sobre esto". */
  padding-bottom: clamp(1.5rem, 4vw, 2.1rem);
}
.hero-carousel.is-slide-1 .hero-inner,
.hero-carousel.is-slide-2 .hero-inner,
.hero-carousel.is-slide-3 .hero-inner,
.hero-carousel.is-slide-4 .hero-inner,
.hero-carousel.is-slide-5 .hero-inner {
  align-self: stretch; justify-content: space-between;
}
.hero-carousel.is-slide-1 .hero-copy,
.hero-carousel.is-slide-2 .hero-copy,
.hero-carousel.is-slide-3 .hero-copy,
.hero-carousel.is-slide-4 .hero-copy,
.hero-carousel.is-slide-5 .hero-copy {
  display: none;
}
.hero-carousel.is-slide-1 .hero-bottom-row,
.hero-carousel.is-slide-2 .hero-bottom-row,
.hero-carousel.is-slide-3 .hero-bottom-row,
.hero-carousel.is-slide-4 .hero-bottom-row,
.hero-carousel.is-slide-5 .hero-bottom-row {
  justify-content: center;
}
/* Tarjetas 1 a 5 (Oportunidades Nexo, financiación Bancor, Vende con
   Nexo, Información del sector, Partners oficiales): son fotos
   promocionales de OTRA cosa, no del asesor IA — a pedido, se saca el
   botón "Ver concesionarias adheridas" (no aplica a estas fotos) y el de
   "Hablar con el asesor IA" queda como un botón chico corrido a un
   costado, no como CTA principal compitiendo con el título/foto de la
   tarjeta. La única que queda con el layout grande de siempre es la
   tarjeta 0 (el degradado con el isotipo de Nexo). */
.hero-carousel.is-slide-1 .hero-actions .btn-ghost,
.hero-carousel.is-slide-2 .hero-actions .btn-ghost,
.hero-carousel.is-slide-3 .hero-actions .btn-ghost,
.hero-carousel.is-slide-4 .hero-actions .btn-ghost,
.hero-carousel.is-slide-5 .hero-actions .btn-ghost {
  display: none;
}
.hero-carousel.is-slide-1 .hero-bottom-row,
.hero-carousel.is-slide-2 .hero-bottom-row,
.hero-carousel.is-slide-3 .hero-bottom-row,
.hero-carousel.is-slide-4 .hero-bottom-row,
.hero-carousel.is-slide-5 .hero-bottom-row {
  justify-content: flex-end; align-items: flex-end;
  /* El botón ahora vive a la altura de WhatsApp/chat (fixed, siempre en
     la esquina) — sin este margen quedaba tapado por esos círculos en
     mobile, donde no hay tanto ancho de sobra como en desktop. */
  padding-right: clamp(4.8rem, 19vw, 5.8rem);
}
.hero-carousel.is-slide-1 .hero-actions .btn-primary,
.hero-carousel.is-slide-2 .hero-actions .btn-primary,
.hero-carousel.is-slide-3 .hero-actions .btn-primary,
.hero-carousel.is-slide-4 .hero-actions .btn-primary,
.hero-carousel.is-slide-5 .hero-actions .btn-primary {
  padding: 0.55rem 1.1rem; font-size: 0.82rem;
}

/* --- Hero carousel: slide 0 es el hero original (queda intacto —
   misma coreografía GSAP apuntando a .hero); 1-3 son overlays nuevos,
   más simples, que se turnan encima. Ver initHeroCarousel en main.js. --- */
.hero-carousel { position: relative; min-height: 100svh; isolation: isolate; }
/* Los 4 slides (el .hero original incluido) comparten la misma mecánica
   de posición/fade por atributo. El slide 0 ya nace con .is-active en
   el HTML (arranca visible sin depender de que JS cargue); de ahí en
   más .is-active es la única fuente de verdad, la mueve initHeroCarousel. */
.hero-carousel > [data-hero-slide] {
  position: absolute; inset: 0; z-index: 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 1s var(--ease-out);
  overflow: hidden; /* recorta el zoom del Ken Burns de la foto de fondo */
}
.hero-carousel > [data-hero-slide].is-active {
  opacity: 1; visibility: visible; z-index: 1; pointer-events: auto;
}
/* El contenido real del hero ya no es uno de los fondos que rota — es
   un sibling fijo que se queda arriba de los 3 (z-index 3), así el
   asesor IA/eslogan/logo se ven siempre, cambie el fondo que cambie. */
/* pointer-events:none en el section entero: es un overlay que cubre
   TODO el carrusel, y sin esto bloquearía los clicks a la foto de fondo
   (z-index más bajo) hasta en el espacio "vacío" alrededor del texto.
   Se reactiva solo donde hace falta (los dos botones reales). */
.hero-carousel > .hero { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hero-carousel > .hero .hero-actions { pointer-events: auto; }
.hero-slide { display: flex; align-items: flex-end; padding-bottom: clamp(4.5rem, 10vw, 7rem); }
.hero-slide-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.hero-slide-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,9,7,0.82) 0%, rgba(10,9,7,0.42) 48%, rgba(10,9,7,0.1) 78%, transparent 100%);
}
.hero-slide-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 1.6rem; }
.hero-slide-tag {
  font-family: var(--display); font-style: italic; font-weight: 700;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.25; max-width: 22ch;
  color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,0.35); margin: 0;
}

.hero-car-controls {
  position: absolute; z-index: 4; left: 50%; bottom: clamp(1.1rem, 3vw, 1.8rem); transform: translateX(-50%);
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.45rem 0.6rem; border-radius: 999px;
  background: rgba(10,9,7,0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.hero-car-arrow, .hero-car-pause {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  color: #fff; transition: background-color .25s var(--ease-out);
}
.hero-car-arrow:hover, .hero-car-pause:hover { background: rgba(255,255,255,0.16); }
.hero-car-dots { display: flex; align-items: center; gap: 0.5rem; padding-inline: 0.2rem; }
.hero-car-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.4); transition: background-color .25s var(--ease-out), transform .25s var(--ease-out); }
.hero-car-dot.is-active { background: #fff; transform: scale(1.35); }
@media (prefers-reduced-motion: reduce) { .hero-slide { transition: none; } }

/* Slide "0KM" del carrusel: en vez de una foto de un solo modelo (que
   sugiere una sola marca), muestra la marca-blanco propia con las
   marcas 0km que se manejan — mismo gradiente granate que el resto
   de la identidad, sin foto de por medio. */
.hero-slide-brands-bg { position: absolute; inset: 0; background: linear-gradient(115deg, var(--accent-2) 0%, var(--accent) 55%, var(--accent-2) 100%); }
.hero-slide-brand-card {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.4rem 2.2rem;
  background: rgba(245,236,231,0.96); border-radius: 6px;
  padding: 1.6rem 2.2rem;
}
.hero-slide-brand-card img { height: 46px; width: auto; max-width: 130px; object-fit: contain; }
@media (max-width: 640px) { .hero-slide-brand-card { justify-content: center; } .hero-slide-brand-card img { height: 36px; } }

.num-upright { font-style: normal; color: var(--accent); }

/* Tarjeta "Usados por concesionaria": grupo de avatares apilados (patrón
   típico de "N personas/lugares") — Scaramuzza real + 2 concesionarias
   de ejemplo. Las de ejemplo son iniciales sobre color, nunca una foto
   inventada haciéndose pasar por un lugar real (mismo criterio "honesto"
   que ya usa el sitio para otros placeholders). */
.explore-dealer-avatars { display: flex; margin-bottom: 0.9rem; position: relative; z-index: 1; }
.hero-slide-brand-card .explore-dealer-avatar {
  position: static; inset: auto;
  width: 40px; height: 40px; border-radius: 50%; border: 2px solid #1a1712;
  display: grid; place-items: center; object-fit: cover;
  margin-left: -12px; font-family: var(--sans); font-weight: 700; font-size: 0.78rem; color: var(--on-accent);
}
.explore-dealer-avatar:first-child { margin-left: 0; }
.explore-dealer-avatar--example { background: linear-gradient(135deg, var(--accent-2), var(--accent)); }

/* Slide "Usados" del carrusel: mismo tratamiento que el slide "0KM"
   (gradiente granate, sin foto de un auto/concesionaria puntual) — acá
   en vez del logo de marcas, el grupo de avatares de concesionarias,
   para no dar a entender que "Usados" es solo Scaramuzza. */
.hero-slide-dealer-card { display: flex; align-items: center; gap: 1rem; }
.hero-slide-dealer-card .explore-dealer-avatars { margin-bottom: 0; }
.hero-slide-dealer-label { font-family: var(--sans); font-weight: 700; font-size: 0.95rem; color: var(--ink); }

/* Título con más presencia (mismo lenguaje que el de "Quiénes nos
   acompañan": última palabra en acento + filete corto abajo) — acá
   centrado porque todo .section-head.center lo está. Sin <span> propio:
   initSectionTitleReveal (main.js) reemplaza el innerHTML del título por
   sus propios spans "palabra por palabra" en cuanto entra en pantalla
   (textContent plano, pisa cualquier span que pongamos acá), así que el
   acento apunta al ÚLTIMO .section-title-word que esa función genera. */
.dealers-title .section-title-word:last-child { color: var(--accent); }
.dealers-title::after {
  content: ""; display: block; width: 58px; height: 3px; margin: 1rem auto 0;
  background: var(--accent); border-radius: 2px;
}
/* El botón vive directo sobre la foto (no adentro de una card clara),
   así que el ghost de siempre (tinta oscura, borde oscuro) quedaba
   invisible — plata/translúcido en reposo, se "llena" de granate al
   hover en vez del tinte casi imperceptible de antes. */
.dealers-cta {
  color: rgba(255,255,255,0.92); border-color: rgba(255,255,255,0.55); background: rgba(255,255,255,0.06);
}
.dealers-cta:hover { color: #fff; border-color: var(--accent); background: var(--accent); }

/* --- Concesionarias adheridas: cinta doble en sentidos opuestos, CSS
   puro (sin GSAP/scroll-jacking) — reemplaza al viejo showcase pinneado
   de stock. Scaramuzza es la única carga real; el resto son "Ejemplo"
   (mismo criterio que concesionarias-page.js) para mostrar la red completa. --- */
.dealers-marquee {
  display: flex; flex-direction: column; gap: 1rem; margin-top: 2.8rem; position: relative; z-index: 1;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.dealers-row { overflow: hidden; }
.dealers-track { display: flex; gap: 1rem; width: max-content; animation: dealersScrollLeft 38s linear infinite; }
.dealers-row-ltr .dealers-track { animation-name: dealersScrollRight; animation-duration: 34s; }
.dealers-row:hover .dealers-track { animation-play-state: paused; }
@keyframes dealersScrollLeft { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes dealersScrollRight { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .dealers-track { animation: none; } }
.dealer-card { display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 1.4rem 0.9rem 0.9rem; white-space: nowrap; flex: none; }
.dealer-mark { width: 46px; height: 46px; border-radius: 50%; flex: none; overflow: hidden; display: grid; place-items: center; background: #fff; }
.dealer-mark img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.dealer-mark-avatar { background: var(--ink); color: var(--on-accent); font-weight: 700; font-size: 0.85rem; }
.dealer-info { display: flex; flex-direction: column; gap: 0.15rem; text-align: left; }
.dealer-name { font-weight: 700; font-size: 0.95rem; color: #fff; }
.dealer-loc { font-size: 0.8rem; color: rgba(255,255,255,0.6); }

/* --- Wipe divider (transición diagonal entre secciones) — el estado
   por defecto (sin JS/reduced-motion) YA está completamente visible;
   GSAP solo agrega el barrido de entrada. Ver initWipeTransition. --- */
.wipe-divider { position: relative; height: clamp(52px, 8vw, 96px); overflow: hidden; z-index: 2; }
/* En la ficha de vehículo el divisor vive dentro de .container y quedaba
   corto de los dos bordes — acá lo hacemos sangrar de punta a punta. */
.vehicle-hero-inner .wipe-divider { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.wipe-divider::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, var(--accent-2), var(--accent) 55%, var(--accent-2));
  clip-path: polygon(0 38%, 100% 0%, 100% 62%, 0% 100%);
  transform: scaleX(1); transform-origin: left center;
  opacity: 0.92;
}

/* --- Ventajas: label pinneado (sticky, sin JS) + track real --- */
.adv-layout { display: grid; gap: 2.5rem; position: relative; z-index: 1; }
@media (min-width: 960px) { .adv-layout { grid-template-columns: 0.62fr 1fr; gap: 3.5rem; } }
.adv-label-col { position: relative; }
@media (min-width: 960px) { .adv-label-col { position: sticky; top: calc(var(--nav-h) + 2.5rem); align-self: start; height: fit-content; } }
.adv-track { display: grid; gap: 1.1rem; }
.adv-card { display: flex; flex-direction: column; gap: 1rem; }
.adv-icon {
  width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #5c141d 0%, #7c1c27 30%, #a12836 55%, #7c1c27 80%, #5c141d 100%);
  background-size: 220% 220%; animation: cardSheen 18s ease-in-out infinite alternate;
  color: var(--on-accent); border: 1px solid rgba(28,24,19,0.25);
  box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 6px 14px -8px rgba(33,29,23,0.45);
}
.adv-card h3 { font-size: 1.12rem; }
.adv-card p { color: rgba(255,255,255,0.78); font-size: 0.94rem; }
/* Ventajas (.adv-track): ícono al lado del título en vez de apilado
   arriba — el "ícono en tile + título + texto" es la plantilla que
   cualquier generador saca por default; escopeado a .adv-track para
   no tocar el reuso de .adv-card en Aspectos destacados (xt-highlights). */
.adv-track .adv-head { display: flex; align-items: center; gap: 0.9rem; }
.adv-track .adv-icon { width: 40px; height: 40px; flex-shrink: 0; }
.adv-track .adv-card h3 { margin: 0; }
/* Spotlight: la tarjeta que está cruzando el centro de la pantalla se
   realza (GSAP ScrollTrigger.toggleClass) — sin GSAP queda en el
   estado base, que ya es 100% legible. */
/* Especificidad reforzada (.adv-track + 2 clases) a propósito: .card.tilt-target
   y .reveal.is-visible también fijan `transform` con 2 clases cada una —
   sin este empate resuelto a mano, cualquiera de esas puede terminar
   ganando según el motor. */
.adv-track .adv-card.is-active { transform: scale(1.015); border-color: var(--accent-2); border-top-width: 3px; background: rgba(17, 15, 13, 0.58); }
.adv-track .adv-card.is-active .adv-icon { box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 0 0 3px rgba(156,38,54,0.18), 0 6px 14px -8px rgba(33,29,23,0.45); }

/* --- Cómo funciona: filmstrip horizontal con scroll-snap nativo ---
   Reestructurado desde una grilla estática de 4 columnas: ahora cada
   paso es una "escena" con un número gigante ghost-type (mismo
   lenguaje del hero) detrás del texto. Scroll-snap puro — funciona
   igual con o sin JS, en cualquier dispositivo (mouse, trackpad,
   dedo). El wipe-divider que sigue ya no hace falta acá porque la
   sección misma ya es su propia transición de "avanza vos". */
/* padding-bottom simétrico al top (antes era 0): con la foto de fondo
   que se sumó después, un bottom seco cortaba la foto en seco justo
   donde terminan las tarjetas — quedaba "petiso" y asimétrico contra
   el resto de las secciones, que sí respiran igual arriba y abajo. */
.steps-scenes {
  display: flex; overflow-x: auto; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch; gap: 0; margin-top: clamp(1rem, 3vw, 2rem);
  scrollbar-width: thin; cursor: grab;
}
.step-scene {
  flex: 0 0 82%; scroll-snap-align: center; position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: clamp(360px, 46vw, 480px); padding: 2rem 1.5rem;
  border-inline-end: 1px solid var(--line);
}
@media (min-width: 640px) { .step-scene { flex-basis: 46%; } }
@media (min-width: 1024px) { .step-scene { flex-basis: 25%; } }
.step-scene-n {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-style: italic; font-weight: 700;
  font-size: clamp(6rem, 14vw, 9rem); color: transparent;
  -webkit-text-stroke: 1px rgba(28, 24, 19, 0.12); pointer-events: none; user-select: none;
}
.step-scene-body { position: relative; z-index: 1; max-width: 280px; text-align: center; }
.step-scene-body h3 { font-size: 1.15rem; margin-bottom: 0.6rem; }
.step-scene-body p { color: var(--mute); font-size: 0.92rem; }
.step-scene-spacer { flex: 0 0 1px; }
@media (min-width: 1024px) { .step-scene-spacer { display: none; } }
.step-scene-n { transition: -webkit-text-stroke-color .4s var(--ease-out), color .4s var(--ease-out); }
.step-scene.is-active .step-scene-n { -webkit-text-stroke-color: rgba(156, 38, 54, 0.35); }

/* --- Asesor IA --- */
.ai-section { position: relative; }
.ai-panel { display: grid; gap: 2.5rem; align-items: center; position: relative; z-index: 1; }
@media (min-width: 900px) { .ai-panel { grid-template-columns: 1fr 1fr; } }
.ai-panel > * { min-width: 0; }
.ai-copy p { overflow-wrap: break-word; }
.ai-suggested { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.3rem 0 1.5rem; }
.chip {
  padding: 0.55rem 1rem; border-radius: 999px; background: rgba(28,24,19,0.05);
  border: 1px solid var(--line); font-size: 0.82rem; color: var(--ink-soft);
  transition: border-color .25s var(--ease-out), background-color .25s var(--ease-out);
}
.chip:hover, .chip.is-active { border-color: var(--accent-2); background: rgba(156,38,54,0.08); }
.chip.is-muted { color: var(--mute-2); }

.chat-mock {
  background: rgba(17, 15, 13, 0.4); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius);
  padding: 1.4rem; display: flex; flex-direction: column; gap: 0.8rem;
  box-shadow: 0 20px 50px -24px rgba(11,10,9,0.55);
}
@supports (backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px)) {
  .chat-mock { backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); }
}
.chat-mock-head { display: flex; align-items: center; gap: 0.7rem; padding-bottom: 0.8rem; border-bottom: 1px solid rgba(255,255,255,0.14); margin-bottom: 0.2rem; }
.chat-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
/* .chat-mock-name/.chat-msg-* se comparten entre el mock estático de
   Asesor IA (fondo glass oscuro, texto blanco) y el widget de chat
   real .chat-panel (fondo claro de --card, ver más abajo) — el default
   acá es el de .chat-panel, que es el que de verdad usan los
   visitantes; .chat-mock pisa estos mismos colores a blanco justo
   después para mantener su propio fondo oscuro legible. */
.chat-mock-name { font-weight: 700; font-size: 0.92rem; color: var(--ink); }
.chat-mock-status { font-size: 0.76rem; color: #2f9e52; }
.chat-mock-status.is-preview { color: var(--mute-2); }
/* Transcripción, no burbujas: cada turno es una fila con etiqueta de
   hablante + una regla de color al costado — mismo lenguaje que los
   kickers/labels del resto del sitio, nada de globos redondeados. */
.chat-msg { padding: 0.7rem 0 0.7rem 0.95rem; border-left: 2px solid var(--line); }
.chat-msg.is-user { border-left-color: var(--accent); }
.chat-msg-tag { display: block; font-family: var(--sans); font-weight: 700; font-size: 0.64rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--mute); margin-bottom: 0.3rem; }
.chat-msg.is-user .chat-msg-tag { color: var(--accent); }
.chat-msg-text { font-size: 0.9rem; line-height: 1.55; color: var(--ink-soft); }
.chat-msg-text strong { color: var(--ink); }
.chat-mock .chat-mock-name { color: #fff; }
.chat-mock .chat-mock-status { color: #5fcf78; }
.chat-mock .chat-mock-status.is-preview { color: rgba(255,255,255,0.55); }
.chat-mock .chat-msg { border-left-color: rgba(255,255,255,0.22); }
.chat-mock .chat-msg-tag { color: rgba(255,255,255,0.55); }
.chat-mock .chat-msg.is-user .chat-msg-tag { color: var(--accent); }
.chat-mock .chat-msg-text { color: rgba(255,255,255,0.88); }
.chat-mock .chat-msg-text strong { color: #fff; }

/* --- Estudio de tasación --- */
.compat-card { position: relative; z-index: 1; }
.compat-steps { display: flex; gap: 1.3rem; margin: 1.4rem 0 1.6rem; flex-wrap: wrap; }
.compat-step { display: flex; align-items: center; gap: 0.5em; font-size: 0.88rem; color: var(--mute); }
.compat-step .num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(156,38,54,0.12); color: var(--accent-2); font-size: 0.74rem; font-weight: 700; }
/* Sobre la foto, el circulito oscuro-sobre-oscuro de siempre se perdía
   — reborde plata + relleno translúcido para que se note el número. */
.has-bg-photo .compat-step .num { border: 1px solid rgba(255,255,255,0.6); background: rgba(255,255,255,0.1); color: #fff; }
.compat-disclaimer-strong { display: flex; gap: 0.6em; align-items: flex-start; margin-top: 1.2rem; font-size: 0.82rem; color: var(--mute-2); }
.compat-disclaimer-strong svg { flex-shrink: 0; margin-top: 2px; color: var(--accent-2); }
/* El kicker de esta sección vive sobre la foto: color base (--accent-2,
   pensado para fondo claro) se perdía contra la rayita de al lado, que
   sí usa --accent (más vivo) — mismo tono para los dos. */
.compat-kicker { color: var(--accent); }

/* --- Testimonios --- */
.testi-notice { font-size: 0.85rem; color: var(--mute-2); margin-bottom: 2rem; padding: 0.7rem 1rem; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); max-width: fit-content; }
.testi-grid { display: grid; gap: 1.1rem; position: relative; z-index: 1; }
@media (min-width: 720px) { .testi-grid { grid-template-columns: repeat(3, 1fr); } }
.testi-stars { color: #e0566a; letter-spacing: 2px; margin-bottom: 0.9rem; }
.testi-quote { font-family: var(--body); font-style: italic; color: rgba(255,255,255,0.85); margin-bottom: 1.3rem; }
.testi-who { display: flex; align-items: center; gap: 0.8rem; }
.testi-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: var(--on-accent); border: 1px solid rgba(255,255,255,0.24); display: grid; place-items: center; font-size: 0.78rem; font-weight: 700; flex-shrink: 0; }
.testi-name { font-weight: 700; font-size: 0.92rem; color: #fff; }
.testi-demo-tag { font-size: 0.68rem; font-weight: 600; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 0.05em; margin-left: 0.4em; }
.testi-role { font-size: 0.8rem; color: rgba(255,255,255,0.65); }

/* --- FAQ --- */
.faq-list { display: grid; gap: 0.7rem; max-width: 780px; margin-inline: auto; position: relative; z-index: 1; }
.faq-item { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: rgba(226,219,203,0.35); }
.faq-q { width: 100%; text-align: left; padding: 1.1rem 1.3rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-weight: 600; font-size: 0.98rem; }
.faq-q .plus { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.faq-q .plus::before, .faq-q .plus::after { content: ""; position: absolute; background: var(--ink); transition: transform .3s var(--ease-out); }
.faq-q .plus::before { top: 50%; left: 0; width: 16px; height: 1.5px; transform: translateY(-50%); }
.faq-q .plus::after { left: 50%; top: 0; height: 16px; width: 1.5px; transform: translateX(-50%); }
.faq-item.is-open .plus::after { transform: translateX(-50%) rotate(90deg); opacity: 0; }
/* Probado el truco grid-template-rows 0fr→1fr para evitar animar
   max-height (motivo: el detector marca max-height como layout thrash) —
   en la prueba real, según dónde va el overflow:hidden, o corta la
   respuesta a mitad de texto o nunca colapsa del todo. Se prioriza que
   la respuesta se vea completa: max-height con un tope generoso. */
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease-out); }
.faq-item.is-open .faq-a { max-height: 240px; }
.faq-a-inner { padding: 0 1.3rem 1.2rem; color: var(--mute); font-size: 0.92rem; }

/* --- Cierre-espejo (bookend) antes de Contacto --- */
/* FAQ (arriba) y cierre comparten una sola foto de fondo (pedido
   explícito) — por eso el padding entre ambas se achica bastante: con
   el padding-bottom de .section (FAQ) + el padding-top de acá sumados,
   el título del cierre quedaba mucho más abajo de lo necesario, pidiendo
   scrollear de más para verlo completo. */
.bookend { position: relative; padding-top: clamp(1.5rem, 3vw, 2.5rem); padding-bottom: clamp(4rem, 8vw, 6.5rem); overflow: clip; }
#faq { padding-bottom: clamp(2rem, 4vw, 3rem); }
.bookend-frame {
  display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; text-align: center;
  position: relative; z-index: 1;
}
@media (min-width: 860px) { .bookend-frame { grid-template-columns: 1fr auto 1fr; text-align: left; } }
.bookend-panel { display: none; }
.bookend-copy { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; }
@media (min-width: 860px) { .bookend-copy { align-items: flex-start; } }
.bookend-copy h2 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); max-width: 16ch; }

/* Foto de fondo solo en la franja del título de "Información del
   sector" — no en toda la página, por eso vive en su propia sección
   separada del feed de novedades (ver informacion-sector.html). */
/* Más alto que el .section-head original a propósito (pedido: que la
   foto se extienda más, como en vende-con-nexo) + zoom lento tipo Ken
   Burns en vez de una imagen estática — con transform en un ::before
   propio, no en el fondo del section directo, para poder animarlo sin
   que se le note el borde al hacer scale(). */
/* min-height en vez de solo padding: con clamp+padding a veces el
   contenido (3 líneas cortas) no llegaba a estirar la sección tanto
   como para tapar toda la pantalla — en una ventana ancha/baja se veía
   el corte a la sección sólida de abajo dentro del primer scroll
   (reportado con captura real). display:flex + align-items centra el
   texto verticalmente dentro de esa altura mínima. */
.sector-hero { position: relative; overflow: hidden; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; padding-block: clamp(3rem, 8vw, 5rem); }
.sector-hero::before {
  content: ""; position: absolute; inset: -6%; z-index: 0;
  background: url("assets/img/misc/sector-hero-bg.jpg") center/cover no-repeat;
  animation: sectorHeroZoom 24s ease-in-out infinite alternate;
}
.sector-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(to right, rgba(10,9,7,0.8), rgba(10,9,7,0.5) 60%, rgba(10,9,7,0.25));
}
.sector-hero > .container { position: relative; z-index: 1; }
@keyframes sectorHeroZoom { from { transform: scale(1); } to { transform: scale(1.09); } }
@media (prefers-reduced-motion: reduce) { .sector-hero::before { animation: none; } }
.sector-hero .section-kicker,
.sector-hero .section-title,
.sector-hero .section-sub { color: #fff; }
.sector-hero .section-kicker::before { background: var(--accent); }
.sector-hero .section-sub { color: rgba(255,255,255,0.85); }
/* Máscara para el reveal palabra-por-palabra del título (JS en
   informacion-sector-page.js): el span exterior recorta, el interior
   es al que GSAP le anima el yPercent — así la palabra entra
   deslizándose desde abajo en vez de aparecer de golpe. */
/* Palabra por palabra: usado por initSectionTitleReveal (main.js) en
   TODOS los .section-title del sitio, no solo el de este hero. */
.section-title-word { display: inline-block; overflow: hidden; vertical-align: top; }
.section-title-word span { display: inline-block; }

/* --- Contacto --- */
/* Es la última sección con foto antes del footer (fondo plata liso) —
   sin esto el corte foto-oscura → plata era seco, una línea dura en vez
   de una transición. Degradé propio pegado a la base de la sección,
   entre la foto (z-index -2) y el contenido (z-index 1). */
#contacto::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: -1; pointer-events: none;
  height: clamp(140px, 24vw, 260px);
  background: linear-gradient(to bottom, transparent, var(--bg));
}
.contact-grid { display: grid; gap: 1.6rem 3rem; position: relative; z-index: 1; }
@media (min-width: 960px) {
  /* Ubicación explícita en vez de dejar que el auto-flow de grid las
     ponga una tras otra: así "Nombre/Email" arranca a la misma altura
     que la primera card ("nexomotorsgroup@gmail.com"), no a la altura
     del título "Contacto" — el título ocupa su propia fila, sola,
     arriba de las dos columnas. */
  .contact-grid { grid-template-columns: 0.85fr 1fr; }
  .contact-heading { grid-column: 1; grid-row: 1; }
  .contact-lists { grid-column: 1; grid-row: 2; }
  .contact-form { grid-column: 2; grid-row: 2; }
}
.contact-info-list { display: grid; gap: 0.9rem; }
.contact-map { margin-top: 1.2rem; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16/10; filter: grayscale(0.25) contrast(1.05); }
.contact-map iframe { width: 100%; height: 100%; border: 0; }
.contact-info-item { display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 1rem; border-radius: var(--radius-sm); background: rgba(226,219,203,0.35); border: 1px solid var(--line); }
.contact-info-link { transition: border-color .25s var(--ease-out), transform .25s var(--ease-out); }
.contact-info-link:hover { border-color: var(--accent-2); transform: translateY(-2px); }
.contact-info-icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(156,38,54,0.1); color: var(--accent-2); flex-shrink: 0; }
.contact-info-icon svg { display: block; }
.contact-info-item strong { display: block; font-size: 0.94rem; }
/* :not(.contact-info-icon) es necesario: sin él, este selector (pensado
   para el subtítulo gris de cada card) también matchea el <span> del
   ícono por ser descendiente de .contact-info-item, y con más
   especificidad que ".contact-info-icon" le pisaba el display:grid —
   eso rompía el centrado del ícono (quedaba en flujo normal, pegado
   arriba) y de paso le cambiaba el color al gris mute. */
.contact-info-item span:not(.contact-info-icon) { display: block; font-size: 0.8rem; color: var(--mute); }

/* display:flex (no grid): un grid item que a su vez es display:grid y
   contiene MÁS grids adentro (.form-row) — anidado dentro de
   .contact-grid, que también es grid con columnas en fr — le hacía
   duplicar la altura "auto" de cada fila (bug de Chromium con grids
   anidados a 3 niveles con columnas fr). Con flex-column se ve
   exactamente igual pero mide bien: probado a mano pisando el display
   en vivo antes de aplicar este cambio. */
.contact-form { display: flex; flex-direction: column; gap: 0.85rem; padding: 1.3rem; }
.contact-form .form-row { gap: 0.35rem; }
.contact-form .form-row-2 { gap: 0.85rem; }
.contact-form .form-row input, .contact-form .form-row select, .contact-form .form-row textarea { padding: 0.6rem 0.85rem; }
.contact-form .form-row textarea { min-height: 80px; }
.contact-form .form-row label { color: rgba(255,255,255,0.85); }
@media (min-width: 960px) {
  .contact-form {
    margin-right: calc(-1 * ((100vw - var(--container)) / 2 + 2rem));
    padding-right: calc((100vw - var(--container)) / 2 + 2rem + 1.3rem);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}
.form-row-2 { display: grid; gap: 1.1rem; min-width: 0; }
@media (min-width: 560px) { .form-row-2 { grid-template-columns: 1fr 1fr; } }
.form-row { display: grid; gap: 0.45rem; min-width: 0; }
.form-row label { font-size: 0.84rem; font-weight: 600; color: var(--ink-soft); }
.form-row input, .form-row select, .form-row textarea {
  font: inherit; padding: 0.8rem 1rem; border-radius: 10px; border: 1px solid var(--line-strong);
  background: rgba(255,255,255,0.4); color: var(--ink);
  width: 100%; box-sizing: border-box;
}
.form-row textarea { min-height: 100px; resize: vertical; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus { outline: none; border-color: var(--accent-2); background: rgba(255,255,255,0.65); }
.form-note { font-size: 0.78rem; color: var(--mute-2); }
.contact-form .form-note { color: rgba(255,255,255,0.6); }
.form-success { display: none; padding: 0.9rem 1rem; border-radius: var(--radius-sm); background: rgba(58,120,74,0.12); color: #2e5a38; font-weight: 600; font-size: 0.9rem; }
.form-success.is-visible { display: block; }
.form-error { display: none; padding: 0.9rem 1rem; border-radius: var(--radius-sm); background: rgba(156,38,54,0.1); color: var(--accent-2); font-weight: 600; font-size: 0.9rem; }
.form-error.is-visible { display: block; }

/* --- Cuenta (ingresar/crear cuenta) — modal inyectado por main.js --- */
.account-form { display: flex; flex-direction: column; gap: 0.9rem; }
/* Acá el <label> envuelve el <input> (en vez de ser hermanos con
   for/id, como en .contact-form) para no arrastrar ids duplicados entre
   los 3 formularios (login/registrar/verificar) — por default un label
   inline pondría el texto y el input en la misma línea, así que se
   fuerza el stack vertical de siempre. */
.account-form .form-row label { display: block; }
.account-form .form-row input { margin-top: 0.45rem; }
.account-switch { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--accent-2); cursor: pointer; }
.account-switch:hover { text-decoration: underline; }
.nav-account .nav-dropdown-trigger { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; }

/* El control de cuenta se inyecta (ver main.js) pegado a "Nexo Experience"
   en vez de adentro de .nav-links — un poco más de peso visual que un link
   de texto plano (para que no se pierda tan cerca del botón dorado), pero
   bien por debajo del tratamiento de Nexo Experience: sin degradé ni brillo,
   solo una píldora con borde que se resalta al pasar el mouse. */
.nav > .nav-account { display: none; flex-shrink: 0; margin-right: 0.85rem; }
@media (min-width: 900px) { .nav > .nav-account { display: inline-flex; } }
.nav > .nav-account .nav-dropdown-trigger {
  padding: 0.5rem 1.05rem; border-radius: 999px; border: 1px solid var(--line-strong);
  transition: border-color .3s var(--ease-out), color .3s var(--ease-out), background-color .3s var(--ease-out);
}
.nav > .nav-account .nav-dropdown-trigger:hover,
.nav > .nav-account.nav-dropdown:hover .nav-dropdown-trigger,
.nav > .nav-account.nav-dropdown:focus-within .nav-dropdown-trigger {
  border-color: var(--accent-2); color: var(--accent-2); background: rgba(28,24,19,0.03);
}
.nav.nav-on-photo .nav-account .nav-dropdown-trigger { border-color: rgba(255,255,255,0.5); }
.nav.nav-on-photo .nav-account .nav-dropdown-trigger:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,0.08); }

/* --- Corazón de favorito: chico y superpuesto sobre una foto de tarjeta
   (fav-btn), o con texto en línea en la ficha del vehículo (fav-btn-pill) --- */
.fav-btn-mount { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 4; }
.fav-btn {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  background: rgba(255,255,255,0.92); color: var(--ink); box-shadow: 0 4px 12px rgba(20,17,13,0.25);
  transition: transform .2s var(--ease-out), background-color .2s var(--ease-out), color .2s var(--ease-out);
}
.fav-btn:hover { transform: scale(1.08); }
.fav-btn svg { width: 17px; height: 17px; transition: fill .2s var(--ease-out); }
.fav-btn.is-active { color: var(--accent-2); }
.fav-btn.is-active svg { fill: var(--accent-2); }
.fav-btn-pill {
  width: auto; height: auto; border-radius: 999px; display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.65rem 1.1rem; background: transparent; border: 1px solid var(--line-strong); color: var(--ink);
  font-weight: 700; font-size: 0.9rem;
}
.fav-btn-pill:hover { border-color: var(--accent-2); transform: none; }
.fav-btn-pill.is-active { border-color: var(--accent-2); background: rgba(156,38,54,0.08); }
.form-error a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* --- Footer --- */
.footer { position: relative; padding-block: 4rem 2.5rem; border-top: 1px solid var(--line); }
.footer-top { display: grid; gap: 2.5rem; margin-bottom: 2.5rem; }
@media (min-width: 780px) { .footer-top { grid-template-columns: 1fr auto; } }
.footer-brand { max-width: 340px; display: grid; gap: 1rem; }
.footer-brand p { color: var(--mute); font-size: 0.88rem; }
.footer-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem; }
.footer-col { display: grid; gap: 0.6rem; }
.footer-col h3 { font-family: var(--sans); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--mute-2); margin-bottom: 0.3rem; }
.footer-col a, .footer-col span { font-size: 0.88rem; color: var(--mute); }
.footer-col a:hover { color: var(--accent-2); }
.footer-bottom { padding-top: 1.6rem; border-top: 1px solid var(--line); font-size: 0.78rem; color: var(--mute-2); }

/* --- Botones flotantes (Chat IA + WhatsApp) --- */
/* gap > 0.8rem: el anillo .ping del chat se agranda hasta scale(1.5)
   (~20px más allá del botón) — con menos separación toca el botón de
   WhatsApp de abajo. */
.float-actions { position: fixed; right: 1.3rem; bottom: 1.3rem; z-index: 460; display: flex; flex-direction: column; gap: 1.5rem; align-items: flex-end; }
.chat-widget-btn, .whatsapp-float-btn {
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  box-shadow: 0 14px 34px -12px rgba(33,29,23,0.5);
  transition: transform .3s var(--ease-out);
}
.chat-widget-btn { background: var(--accent); color: var(--on-accent); position: relative; }
.chat-widget-btn:hover, .whatsapp-float-btn:hover { transform: translateY(-3px) scale(1.04); }
.whatsapp-float-btn { background: #2e7d4f; color: #fff; }
.ping { position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--accent); animation: pingPulse 2.4s ease-out infinite; }
@keyframes pingPulse { 0% { transform: scale(0.9); opacity: 0.8; } 100% { transform: scale(1.5); opacity: 0; } }

/* --- Chat panel --- */
.chat-panel {
  position: fixed; right: 1.3rem; bottom: 1.3rem; z-index: 470;
  width: min(380px, calc(100vw - 2rem)); max-height: min(600px, calc(100vh - 2rem));
  /* Borde + sombra ancha juntos son la firma típica de panel de chat
     genérico — nos quedamos solo con la sombra (elevación blanda), sin
     el borde fino redundante. */
  background: var(--card); border-radius: var(--radius);
  box-shadow: 0 30px 70px -20px rgba(33,29,23,0.55);
  display: flex; flex-direction: column;
  transform: translateY(16px) scale(0.98); opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.chat-panel.is-open { opacity: 1; transform: none; pointer-events: auto; }
.chat-panel-head { display: flex; align-items: center; gap: 0.7rem; padding: 1.1rem 1.2rem; border-bottom: 1px solid var(--line); }
.chat-panel-head > div:nth-child(2) { flex: 1; }
.chat-panel-close { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--mute); }
.chat-panel-close:hover { background: rgba(28,24,19,0.06); }
.chat-body { flex: 1; overflow-y: auto; padding: 1rem 1.2rem; display: flex; flex-direction: column; min-height: 220px; }
.chat-typing { display: inline-flex; gap: 4px; }
.chat-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--mute-2); animation: typingBounce 1.1s ease-in-out infinite; }
.chat-typing span:nth-child(2) { animation-delay: .15s; }
.chat-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes typingBounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.chat-suggested-row { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0 1.2rem 0.8rem; }
.chat-suggested-row[hidden] { display: none; }
.chat-handoff-row { padding: 0 1.2rem 0.8rem; }
.chat-handoff-btn { display: flex; align-items: center; gap: 0.6em; padding: 0.7rem 0.9rem; border-radius: var(--radius-sm); background: rgba(46,125,79,0.1); color: #2e5a38; font-size: 0.84rem; font-weight: 600; border: 1px solid rgba(46,125,79,0.25); transition: background-color .3s var(--ease-out); }
.chat-handoff-btn.is-highlighted { background: rgba(46,125,79,0.22); }
.chat-handoff-btn.is-loading { opacity: 0.7; pointer-events: none; }
.chat-form { display: flex; gap: 0.6rem; padding: 1rem 1.2rem; border-top: 1px solid var(--line); }
.chat-input { flex: 1; font: inherit; padding: 0.75rem 1rem; border-radius: 999px; border: 1px solid var(--line-strong); background: rgba(255,255,255,0.5); }
.chat-input:focus { outline: none; border-color: var(--accent-2); }
.chat-send { width: 42px; height: 42px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; flex-shrink: 0; }

/* --- Modal: estudio de tasación --- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 900; display: grid; place-items: center;
  background: rgba(33,29,23,0.45); backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none; transition: opacity .3s var(--ease-out); padding: 1.2rem;
}
.modal-overlay.is-open { opacity: 1; pointer-events: auto; }
.modal-box {
  width: min(520px, 100%); max-height: 90vh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.8rem; transform: translateY(12px) scale(0.98); transition: transform .3s var(--ease-out);
}
.modal-overlay.is-open .modal-box { transform: none; }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.2rem; }
.modal-close { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--mute); }
.modal-close:hover { background: rgba(28,24,19,0.06); }
.modal-progress { display: flex; gap: 0.5rem; margin-bottom: 1.6rem; }
.modal-progress span { flex: 1; height: 3px; border-radius: 2px; background: var(--line); }
.modal-progress span.is-active, .modal-progress span.is-done { background: var(--accent); }
.modal-step { display: none; flex-direction: column; gap: 1rem; }
.modal-step.is-active { display: flex; }
.modal-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 0.5rem; }
.version-live { display: grid; gap: 0.5rem; }
.version-live[hidden] { display: none; }
.version-live-label { font-size: 0.82rem; font-weight: 600; color: var(--mute); }
.chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.result-box { background: rgba(28,24,19,0.04); border-radius: var(--radius-sm); padding: 1rem; }
.result-row--stacked { display: flex; flex-direction: column; gap: 0.3rem; }
.result-row--stacked span { font-size: 0.82rem; color: var(--mute); }
.result-row--stacked strong { font-size: 1.4rem; font-family: var(--display); color: var(--ink); }

/* =============================================================
   5b. Listado con filtro (fichas) — concesionaria-stock.html
   Los data-* que usa concesionaria-stock-page.js NO se tocan; acá
   solo se define el aspecto visual. .stock-toolbar y .filter-group
   se mantienen como clases literales porque el JS las consulta por
   nombre de clase, no por data-attribute.
   ============================================================= */
/* Hero cinematográfico de la página de stock: mismo lenguaje que el
   hero principal (ghost-type + wipe-divider), a menor escala — banda
   corta, no full-viewport, porque acá el protagonista es la grilla. */
.stock-hero {
  position: relative; z-index: 0; isolation: isolate; overflow: clip;
  padding-top: calc(var(--nav-h) + 3rem);
  padding-bottom: 2.6rem;
}
.stock-hero .hero-ghost { font-size: clamp(4rem, 12vw, 9rem); }
.stock-hero-inner { position: relative; z-index: 5; }
.stock-page-body { padding-top: 0; }

.vehicle-back { display: inline-flex; align-items: center; gap: 0.4em; color: var(--mute); font-size: 0.88rem; margin-bottom: 1.4rem; }
.vehicle-back:hover { color: var(--accent-2); }

/* Bifurcación Usados / 0KM: misma paleta y tratamiento para las dos
   tarjetas — el negro/dorado queda reservado para Nexo Experience. */
.stock-choice { display: grid; gap: 1.2rem; margin-top: 1.8rem; }
@media (min-width: 640px) { .stock-choice { grid-template-columns: repeat(2, 1fr); } }
.stock-choice-card {
  display: flex; flex-direction: column; gap: 0.3rem;
  padding: 1.8rem 2rem; border-radius: 4px;
  background: rgba(255,255,255,0.45); border: 1px solid var(--line-strong);
  text-decoration: none; color: inherit;
  transition: border-color .3s var(--ease-out), background-color .3s var(--ease-out), transform .3s var(--ease-out);
}
.stock-choice-card:hover { transform: translateY(-3px); border-color: var(--accent-2); background: rgba(255,255,255,0.7); }
.stock-choice-kicker { font-family: var(--sans); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute-2); }
.stock-choice-title { font-family: var(--display); font-weight: 700; font-size: clamp(1.8rem, 3.4vw, 2.3rem); color: var(--ink); }
.stock-choice-sub { color: var(--mute); font-size: 0.9rem; }

/* Banner con el logo real de la concesionaria — genérico a propósito
   (funciona igual para cualquier concesionaria que se sume después,
   no solo Scaramuzza): el logo sale del campo `logo` que ya trae
   concesionarias-publico.php, pasado como query param por
   concesionarias-page.js. Sin logo, el layout ya se ve bien igual. */
.conce-stock-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 1.3rem 2rem; padding: 1.7rem 1.9rem; position: relative; overflow: hidden; }
.conce-stock-logo { width: 64px; height: 64px; border-radius: 14px; object-fit: contain; background: #fff; border: 1px solid var(--line); padding: 0.5rem; flex-shrink: 0; }
.conce-stock-banner > div:not(.stock-hero-stat) { flex: 1 1 260px; }

/* Variante con foto de la fachada de la concesionaria: la foto queda de
   fondo con un scrim oscuro para legibilidad (mismo patrón que
   .explore-card), en vez del vidrio esmerilado por defecto. */
.conce-stock-banner-photo { position: absolute; inset: 0; z-index: 0; }
.conce-stock-banner-photo img { width: 100%; height: 100%; object-fit: cover; }
.conce-stock-banner.has-photo { background: rgba(15,13,10,0.5); backdrop-filter: none; -webkit-backdrop-filter: none; border-top-color: var(--accent-2); }
.conce-stock-banner.has-photo::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to right, rgba(10,9,7,0.75), rgba(10,9,7,0.4) 55%, rgba(10,9,7,0.18));
}
.conce-stock-banner.has-photo > *:not(.conce-stock-banner-photo) { position: relative; z-index: 2; }
.conce-stock-banner.has-photo .section-kicker,
.conce-stock-banner.has-photo .section-title,
.conce-stock-banner.has-photo .section-sub,
.conce-stock-banner.has-photo .stock-hero-stat-value,
.conce-stock-banner.has-photo .stock-hero-stat-label { color: #fff; }
.conce-stock-banner.has-photo .section-kicker::before { background: var(--accent); }
.conce-stock-banner.has-photo .section-sub { color: rgba(255,255,255,0.85); }
.conce-stock-banner.has-photo .stock-hero-stat-label { color: rgba(255,255,255,0.75); }
.conce-stock-banner.has-photo .stock-hero-stat { border-left-color: rgba(255,255,255,0.3); }
.conce-stock-banner.has-photo .conce-stock-logo { background: rgba(255,255,255,0.92); }

/* Stat grande: cantidad de vehículos, en vivo — data-stock-count-big lo
   llena concesionaria-stock-page.js (mismo dato que el contador chico
   de la toolbar, solo que acá se destaca como número hero). */
.stock-hero-stat { margin-left: auto; padding-left: 1.8rem; border-left: 1px solid var(--line-strong); text-align: right; }
.stock-hero-stat-value { font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 4vw, 2.7rem); color: var(--accent-2); line-height: 1; display: block; }
.stock-hero-stat-label { font-size: 0.78rem; color: var(--mute-2); margin-top: 0.3rem; display: block; }
@media (max-width: 640px) {
  .stock-hero-stat { margin-left: 0; padding-left: 0; border-left: 0; text-align: left; }
}

.stock-notice {
  display: flex; align-items: center; gap: 0.6em;
  font-size: 0.86rem; color: var(--mute-2);
  border: 1px dashed var(--line-strong); border-radius: var(--radius-sm);
  padding: 0.8rem 1.1rem; margin-bottom: 2rem; position: relative; z-index: 1;
}
.stock-notice svg { flex-shrink: 0; color: var(--accent-2); }
.stock-notice a { color: var(--accent-2); font-weight: 600; }

/* Panel de filtros: vidrio esmerilado (glass-panel), como estaba
   originalmente. Ya no es sticky: se queda en su lugar del documento
   para no ocupar espacio de pantalla al bajar (pedido explícito).
   La opacidad-0 permanente que tenía antes era un bug de la animación
   de entrada en JS (initStockHeroEntrance ya no anima este panel), no
   de este estilo. */
.stock-filters {
  display: grid; gap: 1.2rem; margin: 0 0 2rem;
  position: static; z-index: 4;
  padding: 1.3rem 1.5rem;
}
.filter-row { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }
.filter-row.is-disabled { opacity: 0.4; pointer-events: none; }
.filter-search {
  flex: 1 1 260px; display: flex; align-items: center; gap: 0.6em;
  padding: 0.75rem 1rem; border-radius: 999px; border: 1px solid var(--line-strong);
  background: rgba(255,255,255,0.4); color: var(--mute);
}
.filter-search input { flex: 1; font: inherit; background: none; border: 0; color: var(--ink); }
.filter-search input:focus { outline: none; }
.filter-search input::placeholder { color: var(--mute-2); }

/* Todos / Usados / 0KM — el toggle más usado del filtro: más grande y
   con más peso visual que el resto de los controles a propósito, para
   que se lea de un vistazo qué condición está activa. */
.filter-condicion { display: inline-flex; background: rgba(28,24,19,0.06); border: 1px solid var(--line); border-radius: 999px; padding: 5px; }
.filter-condicion button {
  padding: 0.8rem 1.5rem; border-radius: 999px;
  font-size: 1.02rem; font-weight: 700; letter-spacing: 0.01em; color: var(--mute);
  transition: background-color .25s var(--ease-out), color .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.filter-condicion button.is-active { background: var(--accent); color: var(--on-accent); box-shadow: 0 10px 22px -10px rgba(156,38,54,0.55); }
@media (max-width: 480px) {
  .filter-condicion { width: 100%; }
  .filter-condicion button { flex: 1; text-align: center; padding-inline: 0.8rem; }
}

.filter-sort {
  font: inherit; padding: 0.7rem 1.1rem; border-radius: 999px; border: 1px solid var(--line-strong);
  background: rgba(255,255,255,0.4); color: var(--ink);
}

.filter-row-chips { align-items: flex-start; }
.filter-group { display: flex; flex-direction: column; gap: 0.55rem; flex: 1 1 220px; }
.filter-label { font-family: var(--sans); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute-2); }
.filter-label strong { color: var(--accent-2); font-family: var(--sans); text-transform: none; letter-spacing: 0; font-weight: 700; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.45rem 0.85rem; border-radius: 999px;
  background: rgba(255,250,244,0.55); border: 1px solid var(--line-strong);
  font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); transition: border-color .2s var(--ease-out), background-color .2s var(--ease-out), color .2s var(--ease-out);
}
.filter-chip:hover { border-color: var(--accent-2); color: var(--ink); background: rgba(255,250,244,0.8); }
.filter-chip.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.filter-chip-count { opacity: 0.75; font-size: 0.85em; }

.filter-row-ranges { align-items: center; }
.filter-range { flex: 1 1 220px; display: flex; flex-direction: column; gap: 0.45rem; }
.filter-range input[type="range"] { width: 100%; accent-color: var(--accent); }
.filter-clear { flex: 0 0 auto; }

.stock-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.2rem; color: var(--mute); font-size: 0.88rem; position: relative; z-index: 1; }

/* --- Ficha de vehículo: foto entera, grande, con el texto apoyado
   directo sobre la imagen (degradé arriba para el nombre, degradé
   abajo para pills/precio/flecha) — el mismo lenguaje que ya usa el
   showcase del home, ahora en el listado de stock. Auditado contra
   Porsche (fichas grandes de modelo: nombre en cursiva arriba, pills +
   descripción + flecha circular abajo, sin caja aparte, la foto ES la
   ficha). Menos fichas por fila a propósito — grandes, no un grid de
   miniaturas. */
.stock-grid { display: grid; gap: 1.6rem; position: relative; z-index: 1; }
@media (min-width: 720px) { .stock-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1400px) { .stock-grid { grid-template-columns: repeat(3, 1fr); } }

a.stock-card { text-decoration: none; color: inherit; display: block; position: relative; }
a.stock-card.tilt-target { transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .35s var(--ease-out); }
.stock-visual {
  aspect-ratio: 4/3; border-radius: 20px; overflow: hidden; position: relative;
  background: linear-gradient(160deg, var(--bg-3), var(--bg-2));
  box-shadow: 0 26px 54px -28px rgba(20,17,13,0.55);
  transition: box-shadow .4s var(--ease-out);
}
a.stock-card:hover .stock-visual { box-shadow: 0 34px 64px -24px rgba(20,17,13,0.65); }
.stock-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
a.stock-card:hover .stock-visual img { transform: scale(1.06); }
.stock-tag { position: absolute; top: 1rem; left: 1rem; z-index: 3; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: rgba(156,38,54,0.94); color: var(--on-accent); padding: 0.3rem 0.7rem; border-radius: 999px; }

/* Nombre arriba, en cursiva, sobre un velo apenas oscuro para que se
   lea encima de cualquier foto. */
.stock-card-top {
  position: absolute; inset: 0 0 auto 0; z-index: 2; padding: 1.5rem 1.6rem 3.5rem;
  background: linear-gradient(to bottom, rgba(10,9,7,0.5) 0%, transparent 100%);
}
.stock-card-name { font-family: var(--display); font-style: normal; font-weight: 600; font-size: clamp(1.4rem, 2.8vw, 1.9rem); color: #fff; text-align: center; text-shadow: 0 2px 14px rgba(0,0,0,0.4); }

/* Pills + specs + flecha abajo, sobre un degradé más marcado. */
.stock-card-bottom {
  position: absolute; inset: auto 0 0 0; z-index: 2; padding: 1.6rem 4.2rem 1.5rem 1.6rem;
  background: linear-gradient(to top, rgba(10,9,7,0.9) 0%, rgba(10,9,7,0.55) 55%, transparent 100%);
  display: flex; flex-direction: column; gap: 0.7rem;
}
.stock-card-bottom .pill-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.stock-card-bottom .pill { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.28); color: #f5ece7; backdrop-filter: blur(6px); }
.stock-card-bottom .pill-accent { background: rgba(156,38,54,0.6); border-color: rgba(156,38,54,0.75); color: #fff; }
.stock-card-specs { display: flex; align-items: baseline; gap: 1.2rem; flex-wrap: wrap; }
.stock-card-spec { font-family: var(--sans); font-size: 0.84rem; color: rgba(245,236,231,0.85); font-weight: 600; }
.stock-card-spec.is-price { font-family: var(--display); font-weight: 700; font-size: 1.25rem; color: #fff; }

.stock-card-arrow {
  position: absolute; right: 1.4rem; bottom: 1.4rem; z-index: 3;
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,0.45); color: #fff;
  transition: background-color .3s var(--ease-out), border-color .3s var(--ease-out), transform .3s var(--ease-out);
}
a.stock-card:hover .stock-card-arrow { background: var(--accent-2); border-color: var(--accent-2); transform: translateX(3px); }

/* Sheen: brillo que sigue el mouse sobre la foto — solo con hover fino
   (initCardSheen en main.js gatea por el mismo `fineHover` que el tilt). */
.stock-visual::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(circle 320px at var(--sx, 50%) var(--sy, 50%), rgba(255,255,255,0.3), transparent 62%);
  opacity: 0; transition: opacity .3s var(--ease-out);
}
a.stock-card.is-sheen-active .stock-visual::after { opacity: 1; }

.stock-empty { text-align: center; padding: 3.5rem 1rem; color: var(--mute); display: flex; flex-direction: column; gap: 1.1rem; align-items: center; position: relative; z-index: 1; }
.stock-sentinel { text-align: center; padding: 2.5rem 0 1rem; color: var(--mute-2); font-size: 0.84rem; }

/* =============================================================
   5c. Ficha individual de vehículo — vehiculo.html
   El visor de fotos/video (galería + lightbox) se deja deliberadamente
   oscuro sobre el resto del sitio claro — mismo criterio que ya
   trae producción: da más contraste a la foto del auto. No es una
   inconsistencia, es la excepción documentada.
   ============================================================= */
.vehicle-hero {
  position: relative; z-index: 0; isolation: isolate; overflow: clip;
  padding-top: calc(var(--nav-h) + 3rem);
  padding-bottom: 2.5rem;
}
.vehicle-hero .hero-ghost { font-size: clamp(3.5rem, 11vw, 8.5rem); }
.vehicle-hero-inner { position: relative; z-index: 5; }

/* Primera foto del auto, grande y difuminada de fondo del hero — se
   activa recién cuando vehiculo-page.js/vender-vehiculo-page.js
   confirman que hay al menos una foto (.has-bg-photo), así en un auto
   sin fotos el hero se queda como estaba antes, sin este fondo. Mismo
   truco que .modelo-bg-photo (configurador Nissan), pero con su propia
   clase para no heredar el resto de las reglas de esa (como la
   tarjeta blanca de la galería, pensada para fotos de estudio, no
   para fotos reales de stock). */
.vehicle-hero-bg {
  position: absolute; inset: -5%; z-index: 0; background-size: cover; background-position: center;
  filter: blur(3px) saturate(1.05); transform: scale(1.02);
}
.vehicle-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,10,9,0.88), rgba(11,10,9,0.94)); }
/* OJO: acá el ghost NO pasa a color:#fff sólido — con letras tan
   grandes eso lo convertía en un bloque de texto blanco encima de la
   descripción real, ilegible donde se cruzaban (pasaba con "ONIX" y
   otros nombres cortos, se enganchaba justo a la altura del párrafo).
   Se mantiene la misma técnica de contorno transparente que ya usa
   .hero-ghost por defecto, solo que en un tono claro para que se note
   sobre la foto oscura en vez del original pensado para fondo claro. */
.vehicle-hero.has-bg-photo .hero-ghost { color: transparent; -webkit-text-stroke-color: rgba(255,255,255,0.16); }
.vehicle-hero.has-bg-photo .vehicle-title { color: #fff; }
.vehicle-hero.has-bg-photo .vehicle-tagline,
.vehicle-hero.has-bg-photo .vehicle-desc,
.vehicle-hero.has-bg-photo .vehicle-back { color: rgba(255,255,255,0.78); }
.vehicle-hero.has-bg-photo .vehicle-back:hover { color: #fff; }
.vehicle-hero.has-bg-photo .section-kicker { color: var(--nx-gold-bright, #f0d9a8); }
.vehicle-hero.has-bg-photo .section-kicker::before { background: var(--nx-gold, #d4af6a); }
.vehicle-loading, .vehicle-notfound { text-align: center; padding: 4rem 1rem; color: var(--mute); position: relative; z-index: 1; }
.vehicle-notfound { display: flex; flex-direction: column; gap: 1.2rem; align-items: center; }

.vehicle-content { position: relative; }
.vehicle-hero-grid { display: grid; gap: 2.6rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .vehicle-hero-grid { grid-template-columns: 0.85fr 1.15fr; gap: 3.2rem; } }

/* La copia se queda a mano mientras se scrollea la galería en desktop —
   mismo criterio que el panel de compra de una config de auto real. */
.vehicle-hero-copy { position: relative; z-index: 1; }
@media (min-width: 900px) { .vehicle-hero-copy { position: sticky; top: calc(var(--nav-h) + 2rem); } }

/* Fórmula repetida tipo "Thrill. Driven." de Aston Martin — dos frases
   cortas siempre con la misma estructura, una por segmento. */
.vehicle-tagline { font-family: var(--display); font-style: normal; font-weight: 700; font-size: clamp(1.3rem, 2.4vw, 1.7rem); color: var(--accent-2); margin: 0.3rem 0 1.6rem; }

.vehicle-price-panel {
  display: inline-flex; flex-direction: column; gap: 0.25rem;
  padding: 1rem 1.4rem; margin-bottom: 1.6rem;
  /* El fondo del panel sangra hasta el borde izquierdo de la pantalla; el
     padding-left extra compensa para que el texto quede donde estaba. */
  margin-left: calc(50% - 50vw);
  padding-left: calc(50vw - 50% + 1.4rem);
}
.vehicle-price-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mute-2); font-weight: 700; }
.vehicle-price { font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 1.9rem); color: var(--accent-2); }

.vehicle-gallery-main {
  aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden; position: relative;
  display: grid; place-items: center;
  background: linear-gradient(160deg, #2a2622, #1a1712);
  box-shadow: 0 30px 60px -28px rgba(20,17,13,0.5);
}
@media (min-width: 900px) { .vehicle-gallery-main { aspect-ratio: 5/4; } }
.vehicle-gallery-main img, .vehicle-gallery-main video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: inherit; }
.vehicle-gallery-main img { cursor: zoom-in; user-select: none; -webkit-user-drag: none; }
.vehicle-tag { position: absolute; top: 0.8rem; left: 0.8rem; z-index: 2; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; background: rgba(156,38,54,0.94); color: var(--on-accent); padding: 0.35rem 0.75rem; border-radius: 999px; }
.vehicle-gallery-expand {
  position: absolute; right: 0.8rem; bottom: 0.8rem; z-index: 2; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 10px; background: rgba(10,10,11,0.6); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.18); color: var(--on-accent); transition: background .25s var(--ease-out), border-color .25s var(--ease-out);
}
.vehicle-gallery-expand:hover { background: var(--accent); border-color: var(--accent); }
.vehicle-photo-pending { color: rgba(245,236,231,0.6); font-size: 0.85rem; text-align: center; padding: 2rem; max-width: 30ch; }

/* Filmstrip de miniaturas — más grandes y con más aire que antes. */
.vehicle-gallery-thumbs { display: flex; gap: 0.7rem; margin-top: 1rem; overflow-x: auto; padding-bottom: 0.3rem; scrollbar-width: thin; }
.vehicle-thumb {
  flex: 0 0 auto; width: 92px; height: 68px; border-radius: var(--radius-sm); overflow: hidden; border: 2px solid transparent;
  padding: 0; opacity: 0.6; transition: border-color .25s var(--ease-out), opacity .25s var(--ease-out), transform .25s var(--ease-out); position: relative;
  background: #1a1712;
}
.vehicle-thumb:hover { opacity: 1; transform: translateY(-2px); }
.vehicle-thumb.is-active { border-color: var(--accent-2); opacity: 1; }
.vehicle-thumb img, .vehicle-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.vehicle-thumb-play { position: absolute; inset: 0; display: grid; place-items: center; color: var(--on-accent); font-size: 0.9rem; background: rgba(0,0,0,0.3); pointer-events: none; }

/* --- Lightbox --- */
.lightbox { position: fixed; inset: 0; z-index: 900; background: rgba(6,6,8,0.95); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: clamp(1rem, 3vw, 2.4rem); gap: 1rem; }
.lightbox[hidden] { display: none; }
.lightbox-stage { position: relative; flex: 1 1 auto; width: 100%; max-width: 1200px; min-height: 0; overflow: auto; text-align: center; white-space: nowrap; border-radius: var(--radius-sm); touch-action: pan-x pan-y; }
.lightbox-stage::before { content: ""; display: inline-block; height: 100%; vertical-align: middle; }
.lightbox-stage.is-dragging { cursor: grabbing; }
.lightbox-stage img, .lightbox-stage video { display: inline-block; vertical-align: middle; white-space: normal; max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.lightbox-stage img { cursor: zoom-in; }
.lightbox-stage img.is-zoomed { cursor: grab; }
.lightbox-close, .lightbox-nav { position: absolute; display: grid; place-items: center; border-radius: 999px; border: 1px solid rgba(255,255,255,0.2); background: rgba(18,19,25,0.7); color: var(--on-accent); transition: background .25s var(--ease-out), border-color .25s var(--ease-out); z-index: 5; }
.lightbox-close:hover, .lightbox-nav:hover { background: var(--accent); border-color: var(--accent); }
.lightbox-close { top: 1rem; right: 1rem; width: 42px; height: 42px; font-size: 1.4rem; }
.lightbox-nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 1.6rem; }
.lightbox-prev { left: 0.5rem; }
.lightbox-next { right: 0.5rem; }
.lightbox-thumbs { display: flex; align-items: center; gap: 0.5rem; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; max-width: 100%; padding: 0.2rem; }
.lightbox-thumb { flex: 0 0 auto; width: 64px; height: 46px; border-radius: 8px; overflow: hidden; border: 2px solid transparent; padding: 0; opacity: 0.6; transition: border-color .2s, opacity .2s; position: relative; background: #1a1712; }
.lightbox-thumb img, .lightbox-thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.lightbox-thumb:hover { opacity: 0.9; }
.lightbox-thumb.is-active { border-color: var(--accent); opacity: 1; }
.lightbox-hint { color: rgba(245,236,231,0.55); font-size: 0.78rem; text-align: center; }
@media (max-width: 640px) { .lightbox-nav { width: 40px; height: 40px; font-size: 1.3rem; } .lightbox-hint { display: none; } }

/* --- Título + descripción --- */
.vehicle-title { font-size: clamp(1.9rem, 3.8vw, 2.7rem); margin: 0.5rem 0 0.4rem; }
.vehicle-desc { color: var(--mute); font-size: 1.02rem; line-height: 1.7; margin-bottom: 1.8rem; max-width: 46ch; }
.modelo-motor { font-family: var(--mono); font-size: 0.82rem; letter-spacing: 0.03em; color: var(--accent-2); font-weight: 600; margin: -0.8rem 0 1.4rem; }

/* --- Versiones + colores por modelo (nissan-modelo.html): mismo criterio
   del configurador de la e-POWER (fotos reales que se intercambian), pero
   con selector de versión arriba porque acá cada versión tiene su propia
   paleta de colores real. La foto de fondo es la misma que se está
   mostrando en el configurador — nunca una imagen inventada — y se repite
   en cada sección de la página (hero, versiones, "por qué comprarlo acá"
   y cierre) para que el auto quede de fondo en toda la página, no sólo en
   una franja. Cada sección con .modelo-bg-section trae su propia capa
   .modelo-bg-photo; el JS actualiza todas a la vez al cambiar de color o
   versión, con una view-transition para que el cambio se vea (no un corte
   seco). --- */
.modelo-bg-section { position: relative; overflow: hidden; }
.modelo-bg-photo {
  position: absolute; inset: -5%; z-index: 0; background-size: cover; background-position: center;
  filter: blur(3px) saturate(1.05); transform: scale(1.02);
}
.modelo-bg-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,10,9,0.88), rgba(11,10,9,0.94)); }
.modelo-bg-section > .container,
.modelo-bg-section > .hero-ghost { position: relative; z-index: 1; }
.modelo-bg-section .section-title,
.modelo-bg-section .section-kicker { color: #fff; }
.modelo-bg-section .section-kicker::before { background: var(--accent); }

/* Título gigante tipo cartel/marquesina: se desliza de izquierda a
   derecha en loop infinito, en vez de quedarse fijo — el texto ya viene
   duplicado ("NOMBRE · NOMBRE ·") desde nissan-modelo.js, así que
   correrlo -50% de su propio ancho encadena perfecto con el arranque,
   sin costura visible. */
.modelo-bg-section .hero-ghost {
  justify-content: flex-start;
  animation: modeloGhostMarquee 22s linear infinite;
}
@keyframes modeloGhostMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .modelo-bg-section .hero-ghost { animation: none; justify-content: center; }
}

.vehicle-hero.modelo-bg-section .vehicle-title,
.vehicle-hero.modelo-bg-section .hero-ghost { color: #fff; }
.vehicle-hero.modelo-bg-section .vehicle-desc,
.vehicle-hero.modelo-bg-section .vehicle-back { color: rgba(255,255,255,0.78); }
.vehicle-hero.modelo-bg-section .vehicle-back:hover { color: #fff; }
.vehicle-hero.modelo-bg-section .modelo-motor { color: var(--accent); }

/* Misma foto de fondo también en la página dedicada de la e-POWER (su
   propio configurador, sin selector de versión — un solo modelo, un solo
   auto) para que la experiencia sea igual a la del resto de los modelos
   Nissan. */
.xt-hero.modelo-bg-section .xt-hero-title,
.xt-hero.modelo-bg-section .hero-ghost { color: #fff; }
.xt-hero.modelo-bg-section .vehicle-back { color: rgba(255,255,255,0.78); }
.xt-hero.modelo-bg-section .vehicle-back:hover { color: #fff; }
.xt-hero.modelo-bg-section .hero-ghost { font-size: clamp(2.2rem, 6vw, 4.6rem); opacity: 0.5; }
.modelo-bg-section .xt-specs-note { color: rgba(255,255,255,0.6); }
/* La foto de estudio (fondo blanco real) flotaba directo sobre la página
   clara de antes; ahora que atrás hay una foto oscura de fondo, necesita
   su propia tarjeta blanca redondeada — mismo criterio que las fotos de
   nissan-modelo.html. */
.xt-hero.modelo-bg-section .xt-hero-visual { background: #fff; border-radius: 22px; padding: 1.6rem; box-sizing: border-box; box-shadow: 0 30px 60px -28px rgba(20,17,13,0.5); }
.xt-hero.modelo-bg-section .xt-hero-visual img { filter: none; }
/* El ghost gigante (marca de agua tipográfica) queda demasiado dominante
   arriba de una foto real de fondo — acá va bastante más chico que en el
   resto del sitio, donde flota sobre un fondo liso. */
.vehicle-hero.modelo-bg-section .hero-ghost { font-size: clamp(2.2rem, 6vw, 4.6rem); opacity: 0.5; }

/* Las fotos de estudio de Nissan son sobre fondo blanco real — el marco
   oscuro genérico de .vehicle-gallery-main (pensado para fotos "flotando"
   tipo render) se ve como dos franjas negras arriba/abajo cuando la
   imagen no llena el recuadro. Acá el recuadro es blanco liso y bien
   redondeado, para que la foto se integre sin bordes visibles. */
.modelo-bg-section .vehicle-gallery-main,
.modelo-config-visual {
  background: #fff; border-radius: 22px;
}
.modelo-bg-section .vehicle-gallery-main img { padding: 1.2rem; box-sizing: border-box; }
.modelo-config-visual { aspect-ratio: 5/4; overflow: hidden; position: relative; box-shadow: 0 30px 60px -28px rgba(20,17,13,0.5); }
.modelo-config-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 1.2rem; box-sizing: border-box; }

/* --- Grid de configurador: la foto queda al lado de los controles para
   que el cambio de color/versión se vea en el momento, sin tener que
   scrollear de vuelta al hero. --- */
.modelo-config-grid { display: grid; gap: 1.6rem; grid-template-columns: 1fr; align-items: start; margin-top: 1.6rem; }
@media (min-width: 900px) { .modelo-config-grid { grid-template-columns: 0.9fr 1.1fr; gap: 2.4rem; } }
@media (min-width: 900px) { .modelo-config-visual { position: sticky; top: calc(var(--nav-h) + 2rem); } }

.modelo-version-tabs { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 1.8rem; }
.modelo-version-tabs .chip { cursor: pointer; background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.25); color: #fff; }
.modelo-version-tabs .chip:hover, .modelo-version-tabs .chip.is-active { border-color: var(--accent); background: rgba(156,38,54,0.35); }

.modelo-version-panel { padding: 1.8rem 2rem; }
.modelo-version-specs { list-style: none; display: grid; gap: 0.6rem; margin: 0 0 1.6rem; padding: 0; }
.modelo-version-specs li { position: relative; padding-left: 1.3rem; color: var(--ink-soft); font-size: 0.96rem; line-height: 1.5; }
.modelo-version-specs li::before { content: "—"; position: absolute; left: 0; color: var(--accent-2); }
.modelo-bg-section .xt-configurator { padding: 0; margin: 0; align-items: flex-start; }

/* --- Ficha técnica por versión: lista de datos reales (motor, transmisión,
   dimensiones...) tomados de las fichas técnicas oficiales de Nissan —
   mismo criterio de "nunca inventar" que el resto del sitio. --- */
.modelo-ficha { margin-top: 1.8rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.modelo-ficha-label { display: block; font-family: var(--sans); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute-2); margin-bottom: 0.9rem; }
.modelo-ficha-grid { display: grid; grid-template-columns: 1fr; gap: 0.55rem 1.5rem; margin: 0; }
@media (min-width: 620px) { .modelo-ficha-grid { grid-template-columns: 1fr 1fr; } }
.modelo-ficha-grid > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0; border-bottom: 1px dashed var(--line); font-size: 0.88rem; }
.modelo-ficha-grid dt { color: var(--mute-2); }
.modelo-ficha-grid dd { margin: 0; color: var(--ink); font-weight: 600; text-align: right; }
.vehicle-desc .mw-strong { color: var(--ink); }
.vehicle-cta { display: flex; flex-direction: column; gap: 0.8rem; }
.btn-whatsapp-agency { background: #2e7d4f; color: #fff; display: flex; align-items: center; justify-content: center; gap: 0.55em; }
.btn-whatsapp-agency:hover { background: #256a42; }

/* --- Ficha técnica: franja de tiles grandes en vidrio, no una tabla
   chica — mismo lenguaje que el hero-stats-panel del home. --- */
.vehicle-specs-band { padding-top: clamp(2rem, 4vw, 3rem); position: relative; z-index: 1; }
.vehicle-specs-label { display: block; font-family: var(--sans); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute-2); margin-bottom: 1.1rem; }
.vehicle-specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media (min-width: 720px) { .vehicle-specs { grid-template-columns: repeat(4, 1fr); } }
.vehicle-spec {
  background: rgba(226,219,203,0.55); border: 1px solid var(--line); border-radius: 2px; border-top: 2px solid var(--line-strong);
  padding: 1.3rem 1.4rem; display: flex; flex-direction: column; gap: 0.4rem;
  opacity: 0; transform: translateY(18px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), border-color .3s var(--ease-out);
}
@supports (backdrop-filter: blur(16px)) {
  .vehicle-spec { background: rgba(226,219,203,0.4); backdrop-filter: blur(14px) saturate(150%); -webkit-backdrop-filter: blur(14px) saturate(150%); }
}
.vehicle-spec:hover { border-top-color: var(--accent-2); }
.vehicle-spec.is-visible { opacity: 1; transform: none; }
.vehicle-spec:hover { border-color: var(--accent-2); }
.vehicle-spec span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mute-2); font-weight: 600; }
.vehicle-spec strong { font-family: var(--display); color: var(--ink); font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 700; }
/* En vender-vehiculo.html la descripción se mudó de la copy de arriba
   a acá, junto a la ficha (Año/Km/Color/Estado/Ubicación) — el
   max-width angosto pensado para la columna de al lado de la galería
   no aplica en esta banda de ancho completo. */
.vehicle-specs-band .vehicle-desc { max-width: none; margin: 1.6rem 0 0; }

/* --- Cierre: franja simple con CTA antes del footer, en vez de
   terminar de golpe en los botones del panel de compra. --- */
.vehicle-closer { padding-block: clamp(3.5rem, 7vw, 6rem); position: relative; z-index: 1; }
.vehicle-closer-inner { display: flex; justify-content: center; }
.vehicle-closer-panel {
  width: 100%; max-width: 720px; text-align: center;
  padding: clamp(2.2rem, 5vw, 3.2rem); border-radius: var(--radius);
  background: linear-gradient(160deg, var(--bg-3), var(--bg-2)); border: 1px solid var(--line);
}
.vehicle-closer-eyebrow { font-family: var(--sans); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 0.6rem; }
.vehicle-closer-title { font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: 1.6rem; }
.vehicle-closer-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* =============================================================
   5c-bis. Ficha destacada 0KM (configurador) — xtrail-e-power.html
   Página aparte para vehículos 0km con fotos oficiales de estudio:
   mismo lenguaje visual del sitio (ghost-type, glass-panel, wipe,
   .adv-card) más dos piezas nuevas — el selector de color y la escena
   de specs con foto anclada — inspiradas en cómo Porsche arma la ficha
   de un modelo (sin copiar su contenido ni sus imágenes).
   ============================================================= */
.xt-hero {
  position: relative; z-index: 0; isolation: isolate; overflow: clip;
  padding-top: calc(var(--nav-h) + 3rem);
  padding-bottom: 3rem;
  text-align: center;
}
.xt-hero .hero-ghost { font-size: clamp(4rem, 13vw, 10rem); }
.xt-hero-inner { position: relative; z-index: 5; display: flex; flex-direction: column; align-items: center; }
.xt-hero-inner .vehicle-back { align-self: flex-start; }
.xt-hero-inner .section-kicker { margin-top: 1rem; }
.xt-hero-title { font-size: clamp(2.2rem, 4.6vw, 3.2rem); margin: 0.4rem 0 0.3rem; }
.xt-hero-inner .vehicle-tagline { margin-bottom: 0; }

.xt-hero-visual { width: 100%; max-width: 900px; margin: 2rem 0; }
.xt-hero-visual img { width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(20,17,13,0.28)); }

/* --- Configurador de color: fotos reales que se intercambian, sin 3D --- */
.xt-configurator { display: inline-flex; flex-direction: column; align-items: center; gap: 0.9rem; padding: 1.5rem 2rem; margin-bottom: 2rem; }
.xt-configurator-label { font-family: var(--sans); font-weight: 700; font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute-2); }
.xt-color-row { display: flex; gap: 0.7rem; }
.xt-color-swatch {
  width: 34px; height: 34px; border-radius: 50%; background: var(--sw, #ccc);
  border: 2px solid var(--line-strong); box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset;
  transition: transform .2s var(--ease-out), border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
  cursor: pointer;
}
.xt-color-swatch:hover { transform: translateY(-2px); }
.xt-color-swatch.is-active { border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(156,38,54,0.18), 0 1px 0 rgba(255,255,255,0.4) inset; }
.xt-color-current { font-size: 0.86rem; color: var(--mute); font-weight: 600; }

.xt-hero-cta { max-width: 420px; width: 100%; }

/* --- Escena de specs: foto anclada mientras la lista se lee al lado
   (mismo criterio que el panel de compra sticky de vehiculo.html, acá
   aplicado a una lista de números en vez de un CTA). --- */
.xt-stats-scene { padding-block: clamp(3rem, 6vw, 5rem); position: relative; z-index: 1; }
.xt-stats-inner { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 860px) { .xt-stats-inner { grid-template-columns: 0.9fr 1.1fr; gap: 3rem; } }
.xt-stats-list { display: flex; flex-direction: column; gap: 2.2rem; }
@media (min-width: 860px) { .xt-stats-list { position: sticky; top: calc(var(--nav-h) + 3rem); } }
.xt-stat-value { display: block; font-family: var(--display); font-weight: 700; font-size: clamp(2.2rem, 5vw, 3.4rem); color: var(--ink); line-height: 1; }
.xt-stat-label { display: block; color: var(--mute); font-size: 0.92rem; margin-top: 0.4rem; max-width: 26ch; }
.xt-stats-photo { border-radius: var(--radius); overflow: hidden; box-shadow: 0 30px 60px -28px rgba(20,17,13,0.4); }
.xt-stats-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- Propulsión --- */
.xt-propulsion-sub { color: var(--mute); max-width: 60ch; margin: 0.6rem 0 2.2rem; font-size: 1.02rem; }
.xt-propulsion-grid { display: grid; gap: 1.2rem; position: relative; z-index: 1; }
@media (min-width: 780px) { .xt-propulsion-grid { grid-template-columns: repeat(3, 1fr); } }
.xt-prop-card h3 { font-size: 1.1rem; margin-bottom: 0.6rem; }
.xt-prop-card p { color: rgba(255,255,255,0.78); font-size: 0.94rem; line-height: 1.6; }

/* --- Aspectos destacados: reusa .adv-card (spotlight + entrada 3D ya
   registradas globalmente en main.js) sumándole una foto arriba. --- */
.xt-highlights-grid { display: grid; gap: 1.2rem; position: relative; z-index: 1; }
@media (min-width: 640px) { .xt-highlights-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .xt-highlights-grid { grid-template-columns: repeat(3, 1fr); } }
.xt-highlight-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius-sm); background: #f2f1ee; }
.xt-highlight-card h3 { font-size: 1.02rem; }
.xt-highlight-card p { color: var(--mute); font-size: 0.9rem; line-height: 1.55; }

/* --- Interior: mosaico de fotos reales, una destacada más ancha --- */
.xt-interior-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); position: relative; z-index: 1; }
@media (min-width: 780px) { .xt-interior-grid { grid-template-columns: repeat(4, 1fr); } }
.xt-interior-photo { position: relative; border-radius: var(--radius-sm); overflow: hidden; }
.xt-interior-photo-wide { grid-column: 1 / -1; }
@media (min-width: 780px) { .xt-interior-photo-wide { grid-column: span 2; } }
.xt-interior-photo img { width: 100%; height: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; transition: transform .6s var(--ease-out); }
.xt-interior-photo-wide img { aspect-ratio: 16/10; }
.xt-interior-photo:hover img { transform: scale(1.05); }
.xt-interior-photo figcaption {
  position: absolute; inset: auto 0 0 0; padding: 0.8rem 1rem;
  background: linear-gradient(to top, rgba(10,9,7,0.75), transparent);
  color: #f5ece7; font-size: 0.8rem; font-weight: 600;
}

.xt-specs-note { color: var(--mute-2); font-size: 0.82rem; margin-top: 1.4rem; }

/* =============================================================
   5c-tris. Selector de marca 0km de una concesionaria —
   concesionaria-0km.html. Sigue en la paleta clara del sitio, pero
   las fichas de marca toman el negro/dorado del botón "0KM" de la
   bifurcación anterior — continuidad visual de "entraste al recorrido
   premium", sin ser una sub-marca aparte como Nexo Experience.
   ============================================================= */
.km0-hero {
  position: relative; z-index: 0; isolation: isolate; overflow: clip;
  padding-top: calc(var(--nav-h) + 3rem); padding-bottom: 2.5rem;
}
.km0-hero .hero-ghost { font-size: clamp(4rem, 13vw, 10rem); }
.km0-hero-inner { position: relative; z-index: 5; }

.km0-empty { text-align: center; padding: 3rem 1rem; color: var(--mute); display: flex; flex-direction: column; gap: 1.2rem; align-items: center; }

.km0-brand-grid { display: grid; gap: 1.4rem; position: relative; z-index: 1; }
@media (min-width: 640px) { .km0-brand-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .km0-brand-grid { grid-template-columns: repeat(3, 1fr); } }

.km0-brand-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem;
  padding: 2rem; border-radius: 4px; text-decoration: none;
  background: linear-gradient(135deg, var(--nx-black) 0%, var(--nx-black-2) 100%);
  border: 1px solid rgba(212,175,106,0.35);
  transition: border-color .3s var(--ease-out), transform .3s var(--ease-out);
}
.km0-brand-card:hover { border-color: rgba(212,175,106,0.75); transform: translateY(-4px); }
.km0-brand-logo { width: 68px; height: 68px; border-radius: 10px; background: #fff; display: grid; place-items: center; padding: 0.7rem; margin-bottom: 0.4rem; }
.km0-brand-logo img { width: 100%; height: 100%; object-fit: contain; }
.km0-brand-name { font-family: var(--display); font-weight: 700; font-size: 1.4rem; color: var(--nx-gold-bright); }
.km0-brand-count { font-size: 0.82rem; color: rgba(245,236,231,0.65); }
.km0-brand-cta { display: inline-flex; align-items: center; gap: 0.4em; margin-top: 0.6rem; font-size: 0.86rem; font-weight: 700; color: rgba(245,236,231,0.9); }
.km0-brand-card:hover .km0-brand-cta { color: var(--nx-gold-bright); }

/* =============================================================
   5c-quater. Mini hub de una marca 0km — concesionaria-0km-marca.html
   Menú overlay a pantalla completa (paleta negro/dorado) con dos
   paneles: menú principal y selector de modelos con foto grande que
   cambia — calcado del patrón "Models" de Rolls-Royce.
   ============================================================= */
.km0m-hero {
  position: relative; z-index: 0; isolation: isolate; overflow: clip;
  padding-top: calc(var(--nav-h) + 3rem); padding-bottom: 5rem;
}
.km0m-hero .hero-ghost { font-size: clamp(4rem, 13vw, 10rem); }
.km0m-hero-inner { position: relative; z-index: 5; }

/* Fondo ambientado por marca: el isotipo de la marca, grande y
   difuminado en los bordes (mask radial), asomando detrás del auto
   insignia — que a su vez se funde en el fondo de la página en vez
   de cortar en seco. Ambos elementos son opcionales: si la marca
   todavía no tiene assets cargados, .km0m-hero-bg queda vacío/oculto
   y el hero se ve como antes (solo texto). */
.km0m-hero-bg { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.km0m-hero-bg[hidden] { display: none; }
.km0m-hero-bg-badge {
  position: absolute; z-index: 1; top: 58%; left: 41%; width: clamp(260px, 32vw, 440px); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background-repeat: no-repeat; background-position: center; background-size: contain;
  opacity: 0.85; filter: grayscale(1) brightness(0.28);
  -webkit-mask-image: radial-gradient(circle at center, #000 46%, transparent 78%);
  mask-image: radial-gradient(circle at center, #000 46%, transparent 78%);
}
.km0m-hero-bg-photo {
  position: absolute; z-index: 2; right: -2%; bottom: -8%; width: 66%; height: 126%;
  object-fit: cover; object-position: center 42%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 22%), radial-gradient(ellipse 80% 84% at 62% 48%, #000 55%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, #000 22%), radial-gradient(ellipse 80% 84% at 62% 48%, #000 55%, transparent 100%);
  mask-composite: intersect;
}
@media (max-width: 720px) {
  .km0m-hero-bg-badge { left: 50%; top: 32%; width: min(60vw, 300px); opacity: 0.35; }
  .km0m-hero-bg-photo { width: 96%; right: -8%; bottom: -14%; opacity: 0.9; }
}
.km0m-brand-row { display: flex; align-items: center; gap: 1.1rem; margin: 1.2rem 0 2rem; }
.km0m-brand-logo { width: 60px; height: 60px; border-radius: 10px; background: #fff; object-fit: contain; padding: 0.5rem; border: 1px solid var(--line); flex-shrink: 0; }

.km0m-menu-trigger {
  display: inline-flex; align-items: center; gap: 0.8em;
  padding: 1.5rem 2.6rem; border-radius: 999px;
  background: linear-gradient(135deg, var(--nx-black) 0%, var(--nx-black-2) 100%);
  color: var(--nx-gold-bright); border: 1px solid rgba(212,175,106,0.4);
  font-weight: 700; font-size: 1.15rem;
  /* Más abajo, lejos del título — usa el espacio vacío que deja el hero
     antes de que arranque la primera historia. */
  margin-top: 4rem;
  transition: border-color .3s var(--ease-out), transform .3s var(--ease-out);
}
.km0m-menu-trigger:hover { border-color: rgba(212,175,106,0.8); transform: translateY(-2px); }
.km0m-menu-trigger-lines { display: flex; flex-direction: column; gap: 4px; }
.km0m-menu-trigger-lines span { width: 20px; height: 2px; background: var(--nx-gold-bright); display: block; border-radius: 1px; }

/* --- Financiación (sección normal de la página, no del overlay) --- */
.km0m-financing { padding-block: clamp(3rem, 6vw, 5rem); }
.km0m-financing-content { max-width: 60ch; color: var(--mute); font-size: 1rem; line-height: 1.7; margin: 1.2rem 0 1.8rem; }
.km0m-financing-cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.8rem; }

/* --- Overlay a pantalla completa --- */
.km0m-overlay {
  position: fixed; inset: 0; z-index: 900;
  background: linear-gradient(165deg, var(--nx-black) 0%, var(--nx-black-2) 100%);
  color: var(--on-accent);
  opacity: 0; pointer-events: none; transform: translateY(14px);
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out);
  display: flex; flex-direction: column;
}
.km0m-overlay.is-open { opacity: 1; pointer-events: auto; transform: none; }
.km0m-overlay-close {
  position: absolute; top: 1.6rem; left: 1.6rem; z-index: 3;
  display: inline-flex; align-items: center; gap: 0.5em;
  color: rgba(245,236,231,0.85); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase;
}
.km0m-overlay-close:hover { color: #fff; }

.km0m-panel { flex: 1; min-height: 0; }
.km0m-panel[hidden] { display: none; }

.km0m-panel-menu { display: flex; align-items: center; justify-content: center; padding: 5rem 1.5rem 2rem; }
.km0m-menu-list { display: flex; flex-direction: column; gap: 1.8rem; text-align: center; }
.km0m-menu-list button, .km0m-menu-list a {
  font-family: var(--sans); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  font-size: clamp(1.15rem, 2.6vw, 1.7rem); color: rgba(245,236,231,0.72);
  transition: color .25s var(--ease-out);
}
.km0m-menu-list button:hover, .km0m-menu-list a:hover { color: var(--nx-gold-bright); }

/* Con 7 modelos la lista puede ser más alta que la pantalla — el panel
   scrollea internamente (nunca deja el botón "Descubrir" inalcanzable). */
.km0m-panel-models { display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; }
@media (min-width: 860px) { .km0m-panel-models { flex-direction: row; } }
.km0m-models-side { padding: 5rem 1.5rem 2rem; flex: 0 0 auto; }
@media (min-width: 860px) { .km0m-models-side { flex: 0 0 320px; padding: 6.5rem 2rem 2rem 3rem; border-right: 1px solid rgba(255,255,255,0.1); } }
.km0m-back-to-menu { display: inline-flex; align-items: center; gap: 0.4em; color: rgba(245,236,231,0.55); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 2.2rem; }
.km0m-back-to-menu:hover { color: #fff; }
.km0m-model-list { list-style: none; display: flex; flex-direction: column; gap: 1.5rem; }
.km0m-model-list button {
  font-family: var(--sans); font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  font-size: 1.15rem; color: rgba(245,236,231,0.5); text-align: left;
  transition: color .25s var(--ease-out);
}
.km0m-model-list button.is-active, .km0m-model-list button:hover { color: #fff; }
.km0m-model-sub { display: block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; color: var(--nx-gold-bright); margin-top: 0.2rem; text-transform: none; }

.km0m-models-visual { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 2rem 1.5rem; min-height: 320px; }
.km0m-models-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 2.5rem; transition: opacity .3s var(--ease-out); }
/* Placeholder honesto mientras no haya foto oficial del modelo — nunca
   se inventa una imagen, se avisa que es de ejemplo. */
.km0m-models-placeholder {
  position: absolute; inset: 2rem; border: 1px dashed rgba(245,236,231,0.3); border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem;
  text-align: center; padding: 2rem;
}
.km0m-models-placeholder span { font-family: var(--display); font-style: normal; font-size: 1.3rem; color: rgba(245,236,231,0.55); }
.km0m-models-placeholder p { font-size: 0.82rem; color: rgba(245,236,231,0.4); max-width: 32ch; }
.km0m-models-caption { position: relative; z-index: 1; text-align: center; margin-bottom: 1.4rem; color: rgba(245,236,231,0.75); font-style: normal; font-family: var(--display); font-size: 1.15rem; }
.km0m-discover-btn { position: relative; z-index: 1; }

/* --- Recorrido de marca (scrollytelling) — paneles alternados
   foto/texto a pantalla completa, calcado del patrón "Your Motor Car"
   de Rolls-Royce: mucho aire, una foto real por panel, un corte
   "statement" en negro/dorado en el medio. Nada de tarjetas con
   borde — cada panel es su propio bloque a ancho completo. */
.km0m-story { position: relative; }
.km0m-story-panel {
  display: grid; grid-template-columns: 1fr; min-height: 60vh;
}
@media (min-width: 860px) { .km0m-story-panel { grid-template-columns: 1fr 1fr; min-height: 78vh; } }
.km0m-story-panel.is-reverse .km0m-story-text { order: 2; }
.km0m-story-panel.is-reverse .km0m-story-photo { order: 1; }

.km0m-story-text {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 6vw, 5rem);
}
.km0m-story-text .section-kicker { margin-bottom: 0.6rem; }
.km0m-story-text h3 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom: 1rem; }
.km0m-story-text p { color: var(--mute); font-size: 1rem; line-height: 1.7; max-width: 42ch; }
.km0m-story-link { display: inline-flex; align-items: center; gap: 0.4em; margin-top: 1.4rem; font-weight: 700; font-size: 0.88rem; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; transition: color .2s var(--ease-out); }
.km0m-story-link:hover { color: var(--accent-2); }

.km0m-story-photo { position: relative; overflow: hidden; min-height: 320px; }
.km0m-story-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Fotos de estudio (fondo blanco) o isotipos de marca — nunca se recortan
   con "cover" como una foto ambiente del showroom: quedan contenidas y
   centradas sobre un fondo blanco liso, mismo criterio que las fotos de
   nissan-modelo.html. */
.km0m-story-photo.is-contain { background: #fff; }
.km0m-story-photo.is-contain img { object-fit: contain; padding: clamp(2rem, 6vw, 4rem); box-sizing: border-box; }
/* Placeholder honesto — mismo lenguaje que .km0m-models-placeholder:
   nunca se inventa una foto, se avisa que es de ejemplo. */
.km0m-story-placeholder {
  position: absolute; inset: 1.4rem; border: 1px dashed var(--line-strong); border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem;
  text-align: center; padding: 2rem; background: rgba(0,0,0,0.02);
}
.km0m-story-placeholder span { font-family: var(--display); font-style: normal; font-size: 1.25rem; color: var(--mute); }
.km0m-story-placeholder p { font-size: 0.8rem; color: var(--mute-2); max-width: 30ch; }

/* Corte "statement" — pantalla completa negro/dorado, como el bloque
   morado de Rolls-Royce entre paneles de foto/texto. */
.km0m-story-break {
  position: relative; isolation: isolate; overflow: clip;
  --diag-x: 0px; --diag-y: 0px;
  min-height: 183vh; display: flex; align-items: center; justify-content: center;
  padding: clamp(4rem, 10vw, 7rem) 1.5rem; text-align: center;
  background: linear-gradient(165deg, var(--nx-black) 0%, var(--nx-black-2) 100%);
  color: rgba(245,236,231,0.92);
}
/* Las líneas se mueven con transform (no background-position): animar el
   background-position de un repeating-linear-gradient por scrub deja
   costuras/segmentos cortados en el repintado frame a frame — con
   transform el navegador solo desplaza la capa ya pintada, sin costuras.
   El inset generoso (-60%) es el colchón para que el desplazamiento
   grande nunca revele un borde. */
.km0m-story-break::before {
  content: ""; position: absolute; inset: -60%; z-index: 0; pointer-events: none;
  background-image: repeating-linear-gradient(115deg, rgba(212,175,106,0.07) 0px, rgba(212,175,106,0.07) 1px, transparent 1px, transparent 64px);
  transform: translate(var(--diag-x), var(--diag-y));
  will-change: transform;
}
@media (max-width: 720px) { .km0m-story-break { min-height: 140vh; } }
.km0m-story-break-inner { position: relative; z-index: 1; max-width: 46ch; margin: 0 auto; }
.km0m-story-break h3 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); color: #fff; margin-bottom: 1rem; }
.km0m-story-break p { color: rgba(245,236,231,0.72); font-size: 1.02rem; line-height: 1.7; margin-bottom: 1.8rem; }

/* =============================================================
   5d. Concesionarias adheridas — concesionarias.html
   Ficha expandible: logo/nombre/ubicación siempre visibles, la
   descripción + link al stock se despliegan al tocar la tarjeta.
   ============================================================= */
.conce-grid { display: grid; gap: 1.2rem; position: relative; z-index: 1; }
@media (min-width: 780px) { .conce-grid { grid-template-columns: repeat(2, 1fr); align-items: start; } }
.conce-card { padding: 0; overflow: hidden; }
@media (min-width: 780px) { .conce-card.has-cover .conce-toggle { padding-top: 1.1rem; } }
/* Foto de portada opcional — franja ancha arriba de la ficha, con el
   logo "flotando" superpuesto en la esquina para que se lea como una
   sola pieza (mismo lenguaje que el showcase de stock). */
.conce-cover { position: relative; aspect-ratio: 4/3; max-height: 200px; overflow: hidden; }
.conce-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.conce-card:hover .conce-cover img { transform: scale(1.04); }
.conce-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,9,7,0.55), transparent 55%); }
.has-cover .conce-toggle { padding-top: 1.1rem; }
.has-cover .conce-logo { width: 52px; height: 52px; margin-top: -2.6rem; border: 2px solid var(--card-hover, #fff); box-shadow: 0 6px 16px -6px rgba(0,0,0,0.4); position: relative; z-index: 1; }
.conce-toggle {
  width: 100%; display: flex; align-items: center; gap: 1rem;
  padding: 1.3rem 1.5rem; text-align: left;
}
.conce-logo { width: 44px; height: 44px; border-radius: 10px; object-fit: contain; background: rgba(255,255,255,0.4); flex-shrink: 0; }
.conce-name { font-family: var(--display); font-weight: 700; font-size: 1.08rem; color: var(--ink); flex: 1; }
.conce-loc { font-size: 0.82rem; color: var(--mute); padding: 0.35rem 0.8rem; border-radius: 999px; background: rgba(28,24,19,0.05); }
.conce-arrow { font-size: 1.3rem; color: var(--accent-2); transition: transform .3s var(--ease-out); flex-shrink: 0; }
[data-conce-item].is-open .conce-arrow { transform: rotate(45deg); }
.conce-desc { max-height: 0; overflow: hidden; transition: max-height .35s var(--ease-out); color: var(--mute); font-size: 0.94rem; line-height: 1.6; }
[data-conce-item].is-open .conce-desc { max-height: 320px; padding: 0 1.5rem 1.4rem; }
.conce-stock-link { display: inline-block; margin-top: 0.9rem; color: var(--accent-2); font-weight: 700; font-size: 0.88rem; }
.conce-stock-link:hover { text-decoration: underline; }

/* =============================================================
   5e. Financiación — bloque propio de cada concesionaria dentro de
   concesionaria-stock.html (hoy, solo Scaramuzza tiene financiaciones
   confirmadas: CrediNissan, Bancor y Centro Prendario).
   ============================================================= */
.financ-grid { display: grid; gap: 1.2rem; position: relative; z-index: 1; }
@media (min-width: 720px) { .financ-grid { grid-template-columns: repeat(3, 1fr); } }
/* Si algún día vuelve a haber un solo socio con condiciones reales
   cargadas, centrar esa única tarjeta en vez de dejarla perdida a la
   izquierda de un grid de 3. */
@media (min-width: 720px) { .financ-grid--single { grid-template-columns: minmax(0, 380px); justify-content: center; } }
.financ-card { display: flex; flex-direction: column; gap: 0.9rem; }
.financ-badge { align-self: flex-start; }
.financ-logo { height: 56px; display: flex; align-items: center; padding: 0.5rem 0.9rem; border-radius: var(--radius-sm); background: #fff; align-self: flex-start; }
.financ-logo img { max-height: 100%; max-width: 140px; object-fit: contain; object-position: left center; }
.financ-name { font-size: 1.15rem; }
.financ-desc { color: var(--mute); font-size: 0.92rem; flex: 1; }

/* --- Selector de financiación (financiacion-page.js: __nexoRenderFinancPicker) ---
   Simple primero: elegís una opción, ves una explicación en criollo, y solo
   si pedís "info más técnica" se deriva al chat. "No sé" arma una
   comparación breve de todas, sin obligar a leer 3 tarjetas de entrada. */
.financ-picker-prompt { font-weight: 600; color: var(--ink); margin: 0 0 0.9rem; }
.chip-unsure { font-style: italic; }
.financ-picker-result { margin-top: 1.3rem; max-width: 480px; }
.financ-picker-result .financ-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1.3rem; }
.financ-note { font-size: 0.8rem; color: var(--mute-2); margin: -0.3rem 0 0; }
.financ-compare { display: grid; gap: 1rem; margin-bottom: 1.1rem; }
.financ-compare-row { display: flex; gap: 0.9rem; align-items: flex-start; }
.financ-compare-logo { width: 44px; height: 44px; object-fit: contain; background: #fff; border-radius: var(--radius-sm); padding: 0.35rem; flex: none; }
.financ-compare-row div { display: flex; flex-direction: column; gap: 0.2rem; }
.financ-compare-row strong { font-size: 0.94rem; }

/* --- Partners oficiales (partners-oficiales.html) ---
   Cada institución tiene un logo con su propia proporción y color (una
   marca bancaria, un isotipo circular, una marca de crédito) — meterlos
   en cajas blancas uniformes los achicaba y los igualaba de una manera
   que no correspondía. En cambio: filas grandes con el logo bien grande
   y suelto (sin caja ni marco), alternando de lado en lado para que la
   página respire, con una sola línea fina entre una y otra en vez de
   repetir el divisor grueso de las secciones. */
.partners-intro { max-width: 62ch; }
.partners-list { display: flex; flex-direction: column; margin-top: 1rem; }
.partner-row {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 2rem; padding: 3rem 0; border-bottom: 1px solid var(--line);
}
.partner-row:last-child { border-bottom: 0; padding-bottom: 0.5rem; }
@media (min-width: 860px) {
  .partner-row { flex-direction: row; text-align: left; gap: 3.5rem; padding: 3.6rem 0; }
  .partner-row:nth-child(even) { flex-direction: row-reverse; }
}
.partner-mark {
  position: relative; flex: none; width: clamp(240px, 32vw, 340px); aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
}
.partner-mark img {
  width: 100%; height: 100%; max-width: 96%; max-height: 88%; object-fit: contain;
  transition: transform .4s var(--ease-out);
}
.partner-row:hover .partner-mark img { transform: scale(1.04); }
/* DeCréditos es un wordmark muy ancho y bajo (167x34) — dentro de la
   misma caja cuadrada que los demás logos, el límite de ancho lo deja
   mucho más chico en altura que el resto. Se le sube el tope aparte
   para que tenga un peso visual parecido, dejando que se salga un poco
   de la caja (.partner-mark no clipea). */
.partner-mark img[src*="decreditos"] { max-width: 150%; max-height: 90%; }
/* Pared de marcas (partners-oficiales.html y concesionarias.html):
   logos monocromos oscuros en celdas parejas, con el nombre abajo. */
.brand-wall-block { display: flex; flex-direction: column; gap: 0.9rem; padding-top: 3.2rem; }
.partners-list + .brand-wall-block { border-top: 1px solid var(--line); margin-top: 1rem; }
.brand-wall-block .partner-title, .brand-wall-block .partner-text { margin: 0; }
.brand-wall-block .partner-text { max-width: 62ch; }
.brand-wall { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.brand-wall-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.8rem;
  padding: 1.5rem 1rem 1.1rem; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: rgba(255,255,255,0.28);
  transition: transform .3s var(--ease-out), border-color .3s var(--ease-out);
}
.brand-wall-item:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.brand-wall-item img { height: 56px; width: auto; max-width: 100%; object-fit: contain; }
.brand-wall-item img[src*="nissan"] { filter: brightness(0.15); }
.brand-wall-item span { font-size: 0.78rem; letter-spacing: 0.04em; color: var(--mute-2); text-align: center; }
.conce-brands-section { padding-top: 0; }
.partner-copy { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }
@media (min-width: 860px) { .partner-copy { align-items: flex-start; } }
.partner-title { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 0; }
.partner-text { color: var(--mute); font-size: 0.98rem; max-width: 46ch; margin: 0; }
.partner-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem 1rem; margin-top: 0.3rem; justify-content: center; }
@media (min-width: 860px) { .partner-actions { justify-content: flex-start; } }
/* Bancor: sin el botón "Sitio oficial" (solo podemos usar su logo, no
   presentarnos como vinculados a su sitio), .partner-tag queda como la
   única acción de la fila — un poco más grande que el tamaño "chip
   secundario" original para que pese como un CTA real. */
.partner-tag {
  font-size: 0.95rem; font-weight: 700; color: var(--accent-2); padding: 0.65rem 1.3rem;
  border: 1px solid var(--line-strong); border-radius: 999px; transition: border-color .3s var(--ease-out), background-color .3s var(--ease-out);
}
.partner-tag:hover { border-color: var(--accent-2); background: rgba(156,38,54,0.06); }
.financ-compare-row span { font-size: 0.86rem; color: var(--mute); }

/* =============================================================
   5f. Nosotros — ritmo "claim en negrita + párrafo" repetido
   ============================================================= */
/* Foto real del local — banner ancho con caption, leve zoom Ken-Burns
   al entrar en pantalla (initNosotrosBanner). Estado base = 100%
   visible y sin zoom, así sin JS/reduced-motion se ve perfecto igual. */
/* Selector de pestañas (Nosotros / Misión / Valores): mismo look del
   toggle "0km/usados" de concesionaria-stock (fondo hundido + pill
   activa en acento) para no inventar un componente nuevo. */
.nosotros-tabs { display: inline-flex; background: rgba(28,24,19,0.06); border: 1px solid var(--line); border-radius: 999px; padding: 5px; gap: 2px; margin-bottom: clamp(2rem, 4vw, 3rem); position: relative; z-index: 1; }
.nosotros-tab-btn { padding: 0.75rem 1.5rem; border-radius: 999px; font-size: 0.92rem; font-weight: 700; color: var(--mute); transition: background-color .25s var(--ease-out), color .25s var(--ease-out), box-shadow .25s var(--ease-out); }
.nosotros-tab-btn:hover { color: var(--ink); }
.nosotros-tab-btn.is-active { background: var(--accent); color: var(--on-accent); box-shadow: 0 10px 22px -10px rgba(156,38,54,0.55); }
@media (max-width: 480px) { .nosotros-tabs { width: 100%; } .nosotros-tab-btn { flex: 1; text-align: center; padding-inline: 0.6rem; } }

.nosotros-tab-panel { display: none; }
.nosotros-tab-panel.is-active { display: block; animation: nosotrosTabIn .5s var(--ease-out); }
@keyframes nosotrosTabIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.nosotros-placeholder-note { color: var(--mute-2); font-size: 0.8rem; font-style: italic; max-width: 66ch; margin: -0.8rem auto 2rem; text-align: center; }

.nosotros-banner { position: relative; border-radius: var(--radius); overflow: hidden; margin-bottom: clamp(2.5rem, 5vw, 4rem); z-index: 1; }
.nosotros-banner img { width: 100%; aspect-ratio: 16/9; object-fit: cover; transform: scale(1); transition: transform 1.2s var(--ease-out); }
@media (min-width: 860px) { .nosotros-banner img { aspect-ratio: 21/9; } }
.nosotros-banner.is-zoomed img { transform: scale(1.06); }
.nosotros-banner figcaption {
  position: absolute; inset: auto 0 0 0; padding: 1.2rem 1.4rem;
  background: linear-gradient(to top, rgba(10,9,7,0.75), transparent);
  color: #f5ece7; font-size: 0.85rem; font-weight: 600;
}
/* Franja de números reales — mismos datos que el hero del home, nunca
   inventados de nuevo acá. */
.nosotros-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem 1rem; max-width: 640px; margin: 0 auto clamp(2.5rem, 5vw, 4rem); text-align: center; position: relative; z-index: 1; }
@media (min-width: 640px) { .nosotros-stats { grid-template-columns: repeat(4, 1fr); } }
.nosotros-tagline {
  text-align: center; font-family: var(--display); font-style: normal;
  font-size: clamp(1.5rem, 3.2vw, 2.1rem); color: var(--ink);
  max-width: 26ch; margin: 0 auto clamp(2.5rem, 5vw, 4rem); position: relative; z-index: 1;
}
/* Cursor parpadeante mientras nosotros-page.js va tipeando el texto
   letra por letra — solo mientras dura la animación (.is-typing),
   para que no quede un "|" fijo pegado al final del texto ya escrito. */
.nosotros-tagline.is-typing::after,
.nosotros-lead.is-typing::after {
  content: "|"; margin-left: 2px; animation: nosotrosCaret 0.8s step-end infinite;
}
@keyframes nosotrosCaret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .nosotros-tagline.is-typing::after, .nosotros-lead.is-typing::after { display: none; }
}
.nosotros-stat-value { font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 2.8vw, 2.1rem); color: var(--accent-2); }
.nosotros-stat-label { font-size: 0.8rem; color: var(--mute); margin-top: 0.2rem; }
.nosotros-story { max-width: 66ch; margin-inline: auto; position: relative; z-index: 1; }
.nosotros-lead { font-family: var(--display); font-style: normal; font-size: clamp(1.3rem, 2.6vw, 1.7rem); color: #fff; margin-bottom: 2rem; }
.nosotros-story p { color: rgba(255,255,255,0.78); font-size: 1.02rem; line-height: 1.75; margin-bottom: 1.4rem; }
.nosotros-emphasis { font-weight: 700; color: var(--ink); font-size: 1.1rem; line-height: 1.6; padding-block: 0.4rem; }
.nosotros-signoff { margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 0.3rem; }
.nosotros-signoff strong { font-family: var(--display); letter-spacing: 0.04em; font-size: 1.1rem; }
.nosotros-signoff span { color: var(--mute-2); font-size: 0.9rem; }

/* =============================================================
   5g. Motion cinemático — ronda 2 (ver main.js)
   ============================================================= */

/* Transición entre páginas — View Transitions API nativa, sin
   librería. Fallback automático: si el navegador no la soporta,
   la navegación es instantánea como siempre (no rompe nada). */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: nexoViewOut .45s var(--ease-out) both; }
::view-transition-new(root) { animation: nexoViewIn .45s var(--ease-out) both; }
@keyframes nexoViewOut { to { opacity: 0; transform: translateY(-10px); } }
@keyframes nexoViewIn { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* Foto de auto "volando" entre páginas: cualquier ficha (stock, showcase
   del home) marca su foto con view-transition-name="vehicle-photo-<id>",
   y vehiculo.html pone el mismo nombre en la foto principal — mismo id,
   mismo nombre, así el navegador arma el morph solo (geometría y todo),
   sin JS. `*` matchea cualquier grupo nombrado (nunca "root"), así que
   esto no afecta la transición general de página. */
::view-transition-group(*) { animation-duration: 0.55s; animation-timing-function: var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*) { animation: none; }
}

/* Perspectiva para las entradas 3D (Ventajas, Asesor IA, Testimonios) —
   el estado base sigue siendo el de .reveal (visible sin JS); GSAP
   solo agrega la entrada con volumen cuando carga. */
.adv-track, .testi-grid, .ai-panel { perspective: 1100px; }

/* Foco de formulario: glow del acento en vez del outline plano */
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  box-shadow: 0 0 0 4px rgba(156,38,54,0.14);
}

/* =============================================================
   5h. Detalles — ronda 3 (sin depender de imágenes nuevas)
   ============================================================= */

/* Nav: link activo mientras se scrollea el home (ScrollSpy) */
.nav-links a.is-current { color: var(--ink); }
.nav-links a.is-current::after { right: 0; }

/* Logo del hero: tilt del mouse (--hvrx/--hvry) + parallax de scroll
   (--hvy/--hvscale) COMPUESTOS en un solo transform vía custom
   properties — ningún sistema pisa el transform inline del otro
   (mismo criterio que resolvió el choque de Ventajas). Cada JS trae
   su propio suavizado (rAF lerp / scrub de GSAP), por eso sin
   transition acá: una transition compitiendo con un scrub se siente
   con retraso. */
.hero-visual {
  --hvrx: 0deg; --hvry: 0deg; --hvy: 0%; --hvscale: 1;
  transform: perspective(900px) rotateX(var(--hvrx)) rotateY(var(--hvry)) translateY(var(--hvy)) scale(var(--hvscale));
}

/* Testimonios: las estrellas aparecen una por una (JS agrega el span
   por letra; sin JS, el ★★★★★ de siempre queda intacto). */
.testi-stars .star { display: inline-block; opacity: 0; transform: scale(0.4); }
.testi-stars.is-filled .star { animation: starPop .35s var(--ease-bounce) forwards; }
.testi-stars.is-filled .star:nth-child(1) { animation-delay: 0s; }
.testi-stars.is-filled .star:nth-child(2) { animation-delay: .08s; }
.testi-stars.is-filled .star:nth-child(3) { animation-delay: .16s; }
.testi-stars.is-filled .star:nth-child(4) { animation-delay: .24s; }
.testi-stars.is-filled .star:nth-child(5) { animation-delay: .32s; }
@keyframes starPop { to { opacity: 1; transform: scale(1); } }

/* Concesionarias: logo listo para cuando lleguen los reales — hoy sin
   logo no se nota nada, pero el hover ya queda preparado. */
.conce-logo { filter: grayscale(1) opacity(0.7); transition: filter .3s var(--ease-out), transform .3s var(--ease-out); }
.conce-card:hover .conce-logo { filter: grayscale(0) opacity(1); transform: scale(1.05); }
.conce-toggle { transition: background-color .25s var(--ease-out); }
.conce-toggle:hover { background: rgba(28,24,19,0.03); }

/* Footer: subrayado que barre al pasar el mouse */
.footer-col a { position: relative; }
.footer-col a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1px; background: var(--accent-2); transition: right .3s var(--ease-out); }
.footer-col a:hover::after { right: 0; }

/* Formulario: el mensaje de éxito entra con un pop, no solo aparece */
.form-success { transform: scale(0.92) translateY(6px); opacity: 0; transition: transform .4s var(--ease-bounce), opacity .3s var(--ease-out); }
.form-success.is-visible { transform: scale(1) translateY(0); opacity: 1; }
.form-error { transform: translateY(6px); opacity: 0; transition: transform .3s var(--ease-out), opacity .3s var(--ease-out); }
.form-error.is-visible { transform: translateY(0); opacity: 1; }

/* Ficha de vehículo: specs y galería entran con más carácter */
.vehicle-spec { opacity: 0; transform: translateY(14px); }
.vehicle-spec.is-visible { opacity: 1; transform: none; transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.vehicle-thumb, .lightbox-thumb { transition: transform .25s var(--ease-out), border-color .25s var(--ease-out), opacity .25s var(--ease-out); }
.vehicle-thumb:hover, .lightbox-thumb:hover { transform: translateY(-3px) scale(1.04); }

/* =============================================================
   5.5 "Vende con Nexo" / "Oportunidades Nexo" / "Información del
   sector" — tres apartados nuevos, mismo lenguaje visual que el resto
   (.card, .pill, .stock-notice, .modal-overlay) para no inventar un
   sistema aparte.
   ============================================================= */
.venta-hero-top { margin-bottom: 1.6rem; }
.venta-cta-btn { display: inline-flex; }

/* Foto de fondo solo en el hero de "Vende con Nexo" — título + botón +
   el cartel de "nos encargamos del papeleo" van sobre la foto; la
   grilla de autos, en su propia sección aparte, se queda con el fondo
   sólido de siempre (ver vende-con-nexo.html). Mismo criterio que
   .sector-hero en informacion-sector.html. */
.venta-hero {
  position: relative; overflow: hidden;
  background:
    linear-gradient(180deg, rgba(10,9,7,0.72), rgba(10,9,7,0.82)),
    url("assets/img/misc/venta-hero-bg.jpg") center 30%/cover no-repeat;
}
.venta-hero .section-kicker,
.venta-hero .section-title,
.venta-hero .section-sub { color: #fff; }
.venta-hero .section-sub { color: rgba(255,255,255,0.85); }
/* La sección siguiente no tiene título propio (arranca directo en el
   aviso + grilla de autos), así que el padding-top genérico de .section
   dejaba un bloque gris vacío pegado abajo de la foto del hero — se
   saca para que el contenido arranque justo donde termina la foto. */
.venta-hero + .section { padding-top: 0; }

/* Banner "nos encargamos del papeleo" — mismo patrón de panel centrado
   que .vehicle-closer-panel (ficha de vehículo), con su propio nombre
   de clase para no atar esta página a algo pensado para otra. Liquid
   glass, mismo criterio que el nav: velo claro translúcido + blur en
   vez de una tarjeta sólida, para que la foto del hero siga respirando
   detrás en lugar de taparse con un panel opaco. */
.venta-slogan-inner { display: flex; justify-content: center; margin-top: clamp(2rem, 5vw, 3.5rem); position: relative; z-index: 1; }
.venta-slogan-panel {
  width: 100%; max-width: 720px; text-align: center;
  padding: clamp(2.2rem, 5vw, 3.2rem); border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(245,240,230,0.4), rgba(226,219,203,0.24));
  backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.4);
  box-shadow: 0 24px 50px -24px rgba(10,9,7,0.5);
}
.venta-slogan-eyebrow { font-family: var(--sans); font-weight: 700; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 0.8rem; display: block; }
.venta-slogan-title { font-family: var(--display); font-style: normal; font-size: clamp(1.6rem, 3.6vw, 2.4rem); line-height: 1.2; margin-bottom: 1rem; color: #fff; }
.venta-slogan-sub { color: rgba(255,255,255,0.82); font-size: 1rem; max-width: 52ch; margin: 0 auto 1.4rem; }
.venta-slogan-points { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }
/* El panel es liquid glass sobre foto oscura — los .pill de siempre
   (pensados para fondo claro) se ilegibles acá, mismo motivo que el
   texto de arriba. Van en la variante clara, igual que el nav en esta
   misma página (.nav-on-photo). */
.venta-slogan-points .pill { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.4); color: #fff; }

/* Grilla de autos publicados por particulares (vende-con-nexo.html) y
   de oportunidades (oportunidades.html): comparten la misma estructura
   de tarjeta (foto + cuerpo), por eso .venta-card cubre ambas — las
   oportunidades solo agregan .oportu-* encima para precio/motivo. */
.venta-grid, .oportu-grid { display: grid; gap: 1.3rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.venta-card { position: relative; padding: 0; overflow: clip; display: flex; flex-direction: column; }
a.venta-card { text-decoration: none; color: inherit; }
.venta-card-example {
  position: absolute; top: 0.9rem; right: 0.9rem; z-index: 1;
  background: rgba(28,24,19,0.72); color: #fff; font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.08em; padding: 0.3em 0.7em; border-radius: 999px; backdrop-filter: blur(4px);
}
.venta-card-photo { aspect-ratio: 16/10; overflow: clip; }
.venta-card-photo img { width: 100%; height: 100%; object-fit: cover; }
.venta-card-body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: 0.7rem; flex: 1; }
.venta-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem; }
.venta-card-head h3 { font-size: 1.05rem; }
.venta-card-price { font-family: var(--display); font-weight: 700; color: var(--accent-2); white-space: nowrap; }
.venta-card-detalle { font-size: 0.86rem; color: var(--mute); flex: 1; }

/* Oportunidades: en vez de una grilla de tarjetas todas iguales, la
   primera oportunidad se destaca como "spotlight" (foto grande al
   lado del texto) y el resto entra como una lista de filas más
   compactas — le da jerarquía y ritmo en vez de "una al lado de la
   otra, todo igual". .oportu-motivo/.oportu-precios se comparten
   entre el spotlight y las filas. */
.oportu-kicker { color: var(--accent-2); }
.oportu-card-example { background: rgba(156,38,54,0.85); }
.oportu-motivo { align-self: flex-start; }
.oportu-precios { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; }
.oportu-precio-antes { text-decoration: line-through; color: var(--mute-2); font-size: 0.88rem; }
.oportu-precio-ahora { font-family: var(--display); font-weight: 700; font-size: 1.2rem; color: var(--accent-2); }

.oportu-feed { display: flex; flex-direction: column; gap: 0; }
.oportu-spotlight {
  display: grid; grid-template-columns: 1.1fr 1fr; position: relative; padding: 0; overflow: clip;
  margin-bottom: 1.6rem;
}
@media (max-width: 780px) { .oportu-spotlight { grid-template-columns: 1fr; } }
.oportu-spotlight-photo { aspect-ratio: 16/11; }
.oportu-spotlight-photo img { width: 100%; height: 100%; object-fit: cover; }
.oportu-spotlight-body { padding: 1.9rem 2.1rem; display: flex; flex-direction: column; gap: 0.9rem; justify-content: center; }
.oportu-spotlight-body h3 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); }
.oportu-spotlight-body p { font-size: 0.94rem; color: var(--mute); }

.oportu-list { display: flex; flex-direction: column; }
.oportu-row {
  display: grid; grid-template-columns: 150px 1fr auto; gap: 1.3rem; align-items: center;
  padding: 1.3rem 0; border-bottom: 1px solid var(--line);
}
.oportu-row:first-child { border-top: 1px solid var(--line); }
@media (max-width: 680px) {
  .oportu-row { grid-template-columns: 92px 1fr; }
  .oportu-row-cta { grid-column: 1 / -1; }
}
.oportu-row-photo { width: 150px; height: 106px; object-fit: cover; border-radius: var(--radius-sm); }
@media (max-width: 680px) { .oportu-row-photo { width: 92px; height: 68px; } }
.oportu-row-body { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.oportu-row-body .oportu-card-example { align-self: flex-start; }
.oportu-row-body h3 { font-size: 1rem; }
.oportu-row-body p { font-size: 0.84rem; color: var(--mute); }
.oportu-row .oportu-card-example { position: static; display: inline-block; margin-bottom: 0.3rem; }

/* Información del sector: una nota destacada (la más reciente/la que
   más importa) + el resto como una lista editorial con separadores,
   en vez de tarjetas repetidas. */
.sector-feed { display: flex; flex-direction: column; }
.sector-feature {
  display: block; width: 100%; text-align: left;
  background: var(--bg-3); border: 1px solid var(--line); border-top: 2px solid var(--accent-2);
  border-radius: 2px; padding: 1.9rem 2.1rem; margin-bottom: 1.6rem; position: relative;
  transition: transform .3s var(--ease-out), border-color .3s var(--ease-out), background-color .3s var(--ease-out);
}
.sector-feature:hover { transform: translateY(-3px); border-color: var(--accent-2); background: var(--bg-2); }
.sector-feature:active { transform: translateY(-1px) scale(0.995); }
.sector-feature h2 { font-size: clamp(1.25rem, 2.4vw, 1.55rem); margin: 0.7rem 0 0.8rem; }
.sector-feature p { font-size: 0.98rem; color: var(--mute); max-width: 62ch; }
.sector-list { display: flex; flex-direction: column; }
.sector-row {
  display: grid; width: 100%; text-align: left; grid-template-columns: 190px 1fr; gap: 1.4rem; align-items: baseline;
  padding: 1.3rem 0; border-bottom: 1px solid var(--line);
  transition: transform .25s var(--ease-out), background-color .25s var(--ease-out), padding-left .25s var(--ease-out);
}
.sector-row:first-child { border-top: 1px solid var(--line); }
.sector-row:hover { background: rgba(28,24,19,0.03); padding-left: 0.6rem; }
.sector-row:active { transform: scale(0.998); }
@media (max-width: 640px) { .sector-row { grid-template-columns: 1fr; gap: 0.5rem; } }
.sector-row-label { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.sector-row h3 { font-size: 1.02rem; margin-bottom: 0.35rem; }
.sector-row p { font-size: 0.88rem; color: var(--mute); }
.sector-date { display: block; font-size: 0.76rem; color: var(--mute-2); margin-top: 0.8rem; }
.sector-row .sector-date { margin-top: 0; }
.sector-more { display: inline-flex; align-items: center; gap: 0.3em; margin-top: 0.5rem; font-size: 0.82rem; font-weight: 700; color: var(--accent-2); transition: transform .25s var(--ease-out); }
.sector-feature:hover .sector-more, .sector-row:hover .sector-more { transform: translateX(5px); }
.sector-row:hover { box-shadow: inset 3px 0 0 var(--accent-2); }
.sector-feature { will-change: clip-path, opacity, transform; }

/* Formulario "Quiero vender": mismo modal-box genérico, un poco más
   ancho porque tiene más campos que el de tasación. */
.venta-modal-box { max-width: 620px; overflow-x: hidden; }
.venta-form { display: grid; gap: 1.1rem; }
/* Términos y condiciones del formulario "Quiero vender mi auto": el
   checkbox es required, así que form.reportValidity() (ya usado en el
   submit) frena el envío hasta que lo tildan — no hace falta lógica
   extra en JS para bloquear el botón. */
.venta-tyc-label { display: block; font-size: 0.84rem; font-weight: 600; color: var(--ink-soft); margin-bottom: 0.45rem; }
.venta-tyc-box {
  max-height: 140px; overflow-y: auto; padding: 0.9rem 1rem;
  border: 1px solid var(--line-strong); border-radius: 10px;
  background: rgba(255,255,255,0.4); font-size: 0.82rem; color: var(--mute); line-height: 1.6;
}
.venta-tyc-box p { margin-bottom: 0.6rem; }
.venta-tyc-box p:last-child { margin-bottom: 0; }
.venta-tyc-check { display: flex; align-items: flex-start; gap: 0.6rem; margin-top: 0.7rem; font-size: 0.86rem; cursor: pointer; }
.venta-tyc-check input { margin-top: 0.2rem; flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--accent-2); cursor: pointer; }

.venta-photo-previews { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.2rem; }
.venta-photo-thumb { position: relative; width: 76px; height: 76px; border-radius: var(--radius-sm); overflow: clip; border: 1px solid var(--line-strong); }
.venta-photo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.venta-photo-remove {
  position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(28,24,19,0.75); color: #fff; font-size: 0.9rem; line-height: 1; display: grid; place-items: center;
}
.venta-photo-remove:hover { background: var(--accent-2); }

/* Popup rojo flotante "Oportunidades Nexo" (solo en index.html) — mismo
   radio/sombra que whatsapp-float-btn/chat-widget-btn, pero es una
   píldora con texto (no un ícono solo) para que se entienda de un
   vistazo que es un link, no otro botón de contacto. */
.oportunidades-float {
  position: fixed; left: 1.3rem; bottom: 1.3rem; z-index: 460;
  display: inline-flex; align-items: center; gap: 0.55em;
  background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 0.86rem;
  padding: 0.75rem 1.1rem; border-radius: 999px; box-shadow: 0 14px 34px -12px rgba(156,38,54,0.55);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
  animation: oportuGlow 2.6s ease-in-out infinite;
}
.oportunidades-float:hover { transform: translateY(-3px) scale(1.03); }
/* Se apaga antes de llegar al footer (initOportunidadesFloatFade en
   main.js) para no tapar el texto de abajo — frena antes en vez de
   superponerse. */
.oportunidades-float.is-footer-near { opacity: 0; transform: translateY(12px); pointer-events: none; }
.oportunidades-float-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; flex: none; }
@keyframes oportuGlow {
  0%, 100% { box-shadow: 0 14px 34px -12px rgba(156,38,54,0.55); }
  50% { box-shadow: 0 14px 34px -12px rgba(156,38,54,0.55), 0 0 0 7px rgba(156,38,54,0.14); }
}
@media (max-width: 640px) { .oportunidades-float { left: 0.8rem; bottom: 0.8rem; padding: 0.65rem 0.95rem; font-size: 0.8rem; } }
@media (prefers-reduced-motion: reduce) { .oportunidades-float { animation: none; } }

/* Aviso flotante en vende-con-nexo.html: mismo lugar (abajo a la
   izquierda) que .oportunidades-float, en verde WhatsApp. Queda fijo
   como un círculo (mismo look que .whatsapp-float-btn) para no
   molestar todo el tiempo ocupando espacio con el texto abierto — cada
   9s se abre solo, muestra el mensaje un rato y se vuelve a cerrar al
   círculo. overflow:hidden + max-width animado (truco típico de
   "search bar que se expande"): el texto NO se achica con flex-shrink,
   solo queda tapado por el contenedor cuando está cerrado. */
.vendido-float {
  /* min() con 100vw: sin esto, en una pantalla angosta el ancho
     "abierto" fijo podía pasarse del borde derecho y cortar el texto a
     mitad de palabra (pasó en un celular real). Se resta el offset
     izquierdo (left) x2 a modo de margen de seguridad simétrico. */
  --vendido-size: 58px; --vendido-open: min(320px, calc(100vw - 2.6rem));
  position: fixed; left: 1.3rem; bottom: 1.3rem; z-index: 460;
  display: inline-flex; align-items: center;
  background: #2e7d4f; color: #fff; font-weight: 600; font-size: 0.82rem;
  border-radius: 999px; box-shadow: 0 14px 34px -12px rgba(28,24,19,0.5);
  line-height: 1.25; overflow: hidden; white-space: nowrap;
  height: var(--vendido-size); max-width: var(--vendido-size); padding: 0;
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
  animation: vendidoBloom 9s ease-in-out infinite;
}
.vendido-float:hover { transform: translateY(-3px) scale(1.03); animation-play-state: paused; }
.vendido-float-icon { flex: none; width: var(--vendido-size); height: var(--vendido-size); display: grid; place-items: center; }
.vendido-float-text { flex: none; display: inline-block; padding-right: 1.15rem; }
@keyframes vendidoBloom {
  0%, 46% { max-width: var(--vendido-size); }
  58%, 88% { max-width: var(--vendido-open); }
  100% { max-width: var(--vendido-size); }
}
@media (max-width: 640px) {
  .vendido-float { left: 0.8rem; bottom: 0.8rem; --vendido-size: 52px; --vendido-open: min(260px, calc(100vw - 1.6rem)); }
  .vendido-float-text { font-size: 0.76rem; padding-right: 0.9rem; }
}
@media (prefers-reduced-motion: reduce) { .vendido-float { animation: none; max-width: var(--vendido-open); } }

/* =============================================================
   5z. Plan Nexo (plan-nexo.html) — plan de ahorro Nissan
   ============================================================= */
.plan-hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.8rem; }

.plan-intro-grid { display: grid; gap: 1.2rem; max-width: 72ch; }
.plan-disclaimer-card {
  display: flex; gap: 0.7em; align-items: flex-start; margin-top: 1.6rem;
  font-size: 0.86rem; max-width: 72ch;
}
.plan-disclaimer-card svg { flex-shrink: 0; margin-top: 2px; color: var(--accent); }

.plan-steps-grid { display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .plan-steps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .plan-steps-grid { grid-template-columns: repeat(4, 1fr); } }
.plan-step-card { text-align: left; }
.plan-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%; margin-bottom: 0.9rem;
  background: linear-gradient(135deg, #5c141d 0%, #7c1c27 30%, #a12836 55%, #7c1c27 80%, #5c141d 100%);
  color: var(--on-accent); font-family: var(--display); font-weight: 700; font-size: 1.1rem;
  border: 1px solid rgba(28,24,19,0.25);
  box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 6px 14px -8px rgba(33,29,23,0.45);
}
.plan-step-card h3 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.plan-step-card p { font-size: 0.92rem; color: rgba(255,255,255,0.78); }

.plan-adv-grid { display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .plan-adv-grid { grid-template-columns: repeat(2, 1fr); } }

.plan-models-grid { display: grid; gap: 1.2rem; }
@media (min-width: 640px) { .plan-models-grid { grid-template-columns: repeat(3, 1fr); } }
.plan-model-card { text-align: center; }
.plan-model-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: 1rem; }
.plan-model-card h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.plan-model-card p { font-size: 0.9rem; color: rgba(255,255,255,0.78); }

/* Servicio personalizado + tarjeta de venta de Federico */
.plan-personal-grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .plan-personal-grid { grid-template-columns: 1.1fr 0.9fr; gap: 3.5rem; } }
.plan-personal-list { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: 1rem; max-width: 60ch; }
.plan-personal-list li { display: flex; gap: 0.8rem; align-items: flex-start; font-size: 0.98rem; color: var(--ink-soft); }
.plan-personal-list strong { color: var(--ink); }
.plan-check {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; margin-top: 1px;
  display: grid; place-items: center; color: var(--on-accent);
  background: linear-gradient(135deg, #5c141d 0%, #7c1c27 30%, #a12836 55%, #7c1c27 80%, #5c141d 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 4px 10px -6px rgba(33,29,23,0.45);
}
.plan-seller-card { display: flex; flex-direction: column; gap: 1.1rem; padding: clamp(1.4rem, 3vw, 2rem); }
.plan-seller-top { display: flex; align-items: center; gap: 1rem; }
.plan-seller-avatar {
  flex-shrink: 0; width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center; color: var(--on-accent);
  font-family: var(--display); font-weight: 700; font-size: 1.4rem; letter-spacing: 0.02em;
  background: linear-gradient(135deg, #5c141d 0%, #7c1c27 30%, #a12836 55%, #7c1c27 80%, #5c141d 100%);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 8px 18px -10px rgba(0,0,0,0.6);
}
.plan-seller-name { font-size: clamp(1.35rem, 2.4vw, 1.6rem); line-height: 1.1; color: #fff; margin: 0; }
.plan-seller-role { margin: 0.25rem 0 0; font-size: 0.88rem; color: rgba(255,255,255,0.72); }
.plan-seller-badge {
  align-self: flex-start; padding: 0.4rem 0.85rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff; background: rgba(156,38,54,0.55); border: 1px solid rgba(255,255,255,0.22);
}
.plan-seller-text { margin: 0; font-size: 0.95rem; line-height: 1.6; color: rgba(255,255,255,0.82); }
.plan-seller-phone {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.85rem 1.1rem; border-radius: 14px;
  font-size: 1.25rem; font-weight: 700; letter-spacing: 0.01em; color: #fff;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2);
  transition: border-color .25s var(--ease-out), background-color .25s var(--ease-out);
}
.plan-seller-phone svg { flex-shrink: 0; color: #5fcf78; }
.plan-seller-phone:hover { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.14); }
.plan-seller-card .btn { justify-content: center; }

/* ¿Tenés un usado? */
.plan-used-card { display: grid; gap: 1.2rem; align-items: center; padding: clamp(1.4rem, 3vw, 2rem); }
@media (min-width: 860px) { .plan-used-card { grid-template-columns: auto 1fr auto; gap: 1.8rem; } }
.plan-used-copy h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); color: #fff; margin: 0 0 0.5rem; }
.plan-used-copy p { margin: 0; font-size: 0.95rem; line-height: 1.6; color: rgba(255,255,255,0.8); max-width: 62ch; }
.plan-used-actions { display: flex; flex-direction: column; gap: 0.8rem; align-items: flex-start; }
@media (min-width: 860px) { .plan-used-actions { align-items: stretch; text-align: center; } }
.plan-used-link { font-size: 0.9rem; font-weight: 600; color: rgba(255,255,255,0.85); text-decoration: underline; text-underline-offset: 3px; }
.plan-used-link:hover { color: #fff; }

.plan-bookend-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* =============================================================
   6. Reduced-motion — solo lo intrusivo
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .site-logo-layer { animation: none; }
  .card { animation: none; }
  .adv-icon { animation: none; }
  body { animation: none; }
  .ping { animation: none; }
  .splash-mark { animation: none; }
}