/* GSXR SPORT 24 · maqueta de diseño v0.2
   Sistema: blanco + carbono (tinta del logo GSX) + rojo GSX como firma.
   Tipografía: Saira cursiva expandida (titulares, parecida a GFT Yamaha Motor Bold Italic) y Archivo (texto e interfaz).
   Paletas de marca (solo dentro de su sección): Yamaha = rojo, gris claro, gris medio y negro del manual;
   Kawasaki = rojo del logo y línea "Green Horizon" #69BE28 (solo esa línea). */

@property --split { syntax: "<percentage>"; inherits: true; initial-value: 50%; }

:root {
  /* color */
  --blanco: #ffffff;
  --humo: #f2f2f2;
  --niebla: #dcdcdc;
  --grafito: #595959;
  --carbono: #1a1a1a;
  --rojo: #ff0000;

  /* Yamaha (manual de marca: gris claro, gris medio, negro; el rojo vive dentro del logo) */
  --y-gris-claro: #c7c8ca;
  --y-gris-medio: #939598;
  --y-negro: #1e1e1e;
  /* Kawasaki: Lime Green solo para la línea Green Horizon bajo el logo */
  --k-verde: #69be28;

  /* layout */
  --gutter: 16px;
  --max: 1360px;
  --header-h: 64px;
  --ease: cubic-bezier(.2, .7, .2, 1);   /* salida rápida y frenado suave: la usan todas las animaciones */
  --spring: cubic-bezier(.3, 1.5, .5, 1); /* un solo rebote leve (~7 %), solo para las tarjetas de moto */
  --dur-fast: 300ms;
  --dur-base: 500ms;
  --dur-slow: 700ms;
  --stagger: 90ms;

  --f:"Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-display: "Saira", "Archivo", "Helvetica Neue", Arial, sans-serif;
}
@media (min-width: 768px)  { :root { --gutter: 32px; } }
@media (min-width: 1200px) { :root { --gutter: 48px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--f);
  font-size: 17px;
  line-height: 1.55;
  font-stretch: 100%;
  color: var(--carbono);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--rojo); outline-offset: 3px; }
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

.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; }
.skip { position: absolute; left: 16px; top: -80px; z-index: 200; background: var(--carbono); color: #fff; padding: 12px 18px; text-decoration: none; font-weight: 650; }
.skip:focus { top: 12px; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }

/* ---------- tipografía ---------- */
.display, .h1, .h2, .name { font-family: var(--f-display); font-style: italic; }
.display { font-stretch: 125%; font-weight: 800; line-height: .94; letter-spacing: -.01em; font-size: clamp(44px, 9vw, 148px); }
.h1 { font-stretch: 122%; font-weight: 800; line-height: 1.04; letter-spacing: -.005em; font-size: clamp(32px, 5vw, 72px); }
.h2 { font-stretch: 118%; font-weight: 700; line-height: 1.08; font-size: clamp(28px, 3.5vw, 50px); }
.h3 { font-stretch: 100%; font-weight: 650; line-height: 1.2; font-size: clamp(18px, 1.6vw, 22px); }
.lead { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; max-width: 46ch; }
.small { font-size: 14px; line-height: 1.45; }
.meta { font-size: 13px; font-stretch: 92%; font-weight: 500; color: var(--grafito); line-height: 1.4; }
.muted { color: var(--grafito); }
.num { font-variant-numeric: tabular-nums; }
.name { font-stretch: 125%; font-weight: 800; line-height: 1; letter-spacing: -.01em; font-size: clamp(34px, 4.4vw, 68px); }
.maqueta-only { display: none; }
[data-maqueta] .maqueta-only { display: block; }

/* ---------- controles ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px;
  background: var(--carbono); color: #fff;
  border: 2px solid var(--carbono);
  font-weight: 650; font-stretch: 104%; font-size: 16px; line-height: 1.1; text-decoration: none; text-align: center;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover { background: #000; box-shadow: inset 0 -4px 0 var(--rojo); }
.btn--ghost { background: transparent; color: var(--carbono); }
.btn--ghost:hover { background: var(--carbono); color: #fff; }
.btn--inv { background: #fff; color: var(--carbono); border-color: #fff; }
.btn--inv:hover { background: #fff; box-shadow: inset 0 -4px 0 var(--rojo); }
.btn--inv-ghost { background: transparent; color: #fff; border-color: #fff; }
.btn--inv-ghost:hover { background: #fff; color: var(--carbono); }
.btn--sm { min-height: 44px; padding: 0 20px; font-size: 15px; }
.btn--block { width: 100%; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

.link {
  text-decoration: none; font-weight: 600; font-stretch: 102%;
  background: linear-gradient(currentColor, currentColor) left 100% / 100% 2px no-repeat;
  padding-bottom: 3px;
  transition: background-size .25s var(--ease);
}
.link:hover { background-size: 100% 4px; }

/* ---------- aviso de maqueta ---------- */
.maqueta-bar {
  background: var(--carbono); color: #fff; font-size: 13px; font-stretch: 92%; line-height: 1.35;
  display: flex; align-items: center; justify-content: center; gap: 16px; padding: 8px var(--gutter); text-align: center;
}
.maqueta-bar button { background: none; border: 0; color: #fff; text-decoration: underline; cursor: pointer; padding: 4px; font-size: 13px; }
.maqueta-bar[hidden] { display: none; }
.ejemplo {
  display: none; position: absolute; top: 10px; right: 10px; z-index: 3;
  background: #fff; color: var(--carbono); border: 1px solid var(--carbono);
  font-size: 12px; font-weight: 650; font-stretch: 92%; line-height: 1; padding: 5px 7px;
}
[data-maqueta] .ejemplo { display: block; }

/* ---------- cabecera ---------- */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 60; background: var(--blanco); border-bottom: 1px solid var(--niebla); }
.site-header__in { height: var(--header-h); display: flex; align-items: center; gap: 24px; }
.brand { display: block; flex: none; }
.brand img { height: 26px; width: auto; }
.nav { display: none; margin-left: auto; }
.nav ul { display: flex; align-items: center; gap: 28px; }
.nav a { text-decoration: none; font-size: 15px; font-weight: 550; font-stretch: 100%; padding: 8px 0; position: relative; white-space: nowrap; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 3px; background: var(--rojo); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.tag-soon { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 650; font-stretch: 90%; border: 1px solid currentColor; padding: 2px 5px; line-height: 1.1; vertical-align: 2px; }
.site-header .btn { display: none; }
.menu-btn { margin-left: auto; background: none; border: 0; font-weight: 650; font-stretch: 105%; font-size: 15px; padding: 10px 0 10px 12px; cursor: pointer; }
@media (min-width: 1100px) {
  .nav { display: block; }
  .site-header .btn { display: inline-flex; }
  .menu-btn { display: none; }
  .nav ul { gap: 26px; }
}
@media (min-width: 1100px) and (max-width: 1279px) { .nav ul { gap: 20px; } .tag-soon { display: none; } }

.menu {
  position: fixed; inset: 0; z-index: 90; background: var(--blanco); padding: 0 var(--gutter) 32px; overflow-y: auto;
  display: flex; flex-direction: column;
}
.menu[hidden] { display: none; }
.menu__top { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--niebla); margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
.menu ul { margin: 12px 0 24px; }
.menu li a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 14px 0; text-decoration: none; font-family: var(--f-display); font-style: italic; font-stretch: 122%; font-weight: 800; font-size: clamp(26px, 8vw, 40px); line-height: 1.1; border-bottom: 1px solid var(--niebla); }
.menu .tag-soon { font-size: 12px; font-stretch: 90%; font-weight: 650; }
.menu .btn { margin-top: auto; }

/* ---------- hero: dos marcas, un corte ---------- */
.hero {
  --split: 50%;
  --cut: 6.5vw;     /* mitad de la inclinación horizontal */
  --band: 12px;     /* grosor de la franja roja */
  --gap: 11px;      /* blanco a cada lado, como en las calles del logo */
  position: relative; overflow: hidden; isolation: isolate; background: var(--blanco);
  height: clamp(520px, calc(100svh - 150px), 840px);
  transition: --split .7s var(--ease);
}
.hero:has(.pane--yamaha:hover), .hero:has(.pane--yamaha:focus-visible) { --split: 57%; }
.hero:has(.pane--kawasaki:hover), .hero:has(.pane--kawasaki:focus-visible) { --split: 43%; }

.pane { position: absolute; top: 0; bottom: 0; display: block; color: #fff; text-decoration: none; background: var(--carbono); }
.pane > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pane::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0) 46%); pointer-events: none; }
.pane--yamaha {
  left: 0; width: calc(var(--split) + var(--cut));
  clip-path: polygon(0 0, calc(100% - var(--band) / 2 - var(--gap)) 0, calc(100% - 2 * var(--cut) - var(--band) / 2 - var(--gap)) 100%, 0 100%);
}
.pane--yamaha > img { object-position: 54% 62%; }
.pane--kawasaki {
  right: 0; width: calc(100% - var(--split) + var(--cut));
  clip-path: polygon(calc(2 * var(--cut) + var(--band) / 2 + var(--gap)) 0, 100% 0, 100% 100%, calc(var(--band) / 2 + var(--gap)) 100%);
}
.pane--kawasaki > img { object-position: 86% 58%; }

/* El nombre de cada marca es su logotipo oficial, flotando sobre la foto, sin placa (pedido del usuario, 2026-10-05).
   Yamaha: lockup con la línea y el nombre de la tienda en blanco (el logo sigue en su rojo). Kawasaki: logo con lema para fondo oscuro
   (rojo y lema blanco, archivo oficial "Red over Black"). No se recolorean ni se animan. El logo ocupa el hueco que tenía la palabra:
   su borde inferior queda donde quedaba el de la palabra y crece hacia arriba, así el modelo y el enlace no se mueven
   (solo bajan si arriba no hay sitio). */
.pane { --bf: clamp(40px, 6.4vw, 112px); --ct: clamp(28px, 4.4vw, 60px); --ctmin: 14px; }  /* --bf: cuerpo de letra que tenía el nombre */
.pane--yamaha { --mw: clamp(150px, 17vw, 300px); --lh: calc(var(--mw) * .364); --lg: calc(var(--mw) * .065); }   /* lockup: 373,7 × 136; con el hueco del texto, aire de 0,1 del ancho bajo el logo (el mínimo del manual es 0,106) */
.pane--kawasaki { --mw: clamp(150px, 18vw, 320px); --lh: calc(var(--mw) * .268); --lg: calc(var(--mw) * .05); }  /* logo con lema: 566,9 × 152 */

.pane__copy { position: absolute; z-index: 2; top: max(var(--ctmin), calc(var(--ct) - var(--lh) - var(--lg) + var(--bf) * .95)); display: grid; gap: 6px; }
.pane--yamaha .pane__copy { left: var(--gutter); min-width: calc(var(--bf) * 3.74); }  /* conserva el ancho de columna que daba la palabra (largo del subrayado) */
.pane--kawasaki .pane__copy { right: var(--gutter); text-align: right; justify-items: end; }
.pane__logo { display: block; margin-bottom: var(--lg); }
.pane__logo svg, .pane__logo img { display: block; width: var(--mw); height: auto; }
.pane__logo .lockup-yamaha line { stroke: #fff; }
.pane__logo .lockup-yamaha text { fill: #fff; }
.pane__model { font-size: clamp(15px, 1.4vw, 19px); font-weight: 550; font-stretch: 105%; }
@media (max-width: 359px) { .pane__model { font-size: 13px; } }  /* v0.4: una línea de hasta 41 caracteres (por ejemplo "KLR650 2026 y Brute Force 750 SE EPS 2026") cabe a 320 px; a 15 px necesita 360 px, así que de 340 a 359 también baja a 13 px (v0.4.9) */
.pane__go { margin-top: 8px; font-weight: 650; font-stretch: 104%; font-size: 16px; padding-bottom: 4px; background: linear-gradient(#fff, #fff) left 100% / 36% 2px no-repeat; transition: background-size .3s var(--ease); }
.pane:hover .pane__go, .pane:focus-visible .pane__go { background-size: 100% 4px; }
.pane:focus-visible { outline: none; }
.pane:focus-visible .pane__go { outline: 3px solid #fff; outline-offset: 6px; }

.hero__slash { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hero__slash i {
  position: absolute; inset: 0; background: var(--rojo);
  clip-path: polygon(calc(var(--split) + var(--cut) - var(--band) / 2) 0, calc(var(--split) + var(--cut) + var(--band) / 2) 0, calc(var(--split) - var(--cut) + var(--band) / 2) 100%, calc(var(--split) - var(--cut) - var(--band) / 2) 100%);
}

@media (prefers-reduced-motion: no-preference) {
  .hero__slash { animation: slash-in var(--dur-slow) var(--ease) .1s both; }
  .pane > img { animation: pane-in var(--dur-slow) var(--ease) both; }
  .pane--kawasaki > img { animation-delay: .12s; }
  /* los modelos suben desde una máscara justo después de que pasa la franja; los logos de la marca no se animan */
  .pane__model .mask__in { animation: rise var(--dur-slow) var(--ease) .4s both; }
  .pane__go { animation: fade-in var(--dur-base) var(--ease) .65s both; }
  .pane--kawasaki .pane__model .mask__in { animation-delay: .52s; }
  .pane--kawasaki .pane__go { animation-delay: .77s; }
}
@keyframes slash-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes pane-in { from { opacity: 0; transform: scale(1.05); } to { opacity: 1; transform: none; } }
@keyframes rise { from { transform: translateY(110%); } to { transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* al pasar el cursor por una mitad, la otra se atenúa (solo opacidad) */
@media (hover: hover) {
  .pane::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, .34); opacity: 0; transition: opacity var(--dur-fast) var(--ease); pointer-events: none; }
  .hero:has(.pane--yamaha:hover) .pane--kawasaki::before,
  .hero:has(.pane--yamaha:focus-visible) .pane--kawasaki::before,
  .hero:has(.pane--kawasaki:hover) .pane--yamaha::before,
  .hero:has(.pane--kawasaki:focus-visible) .pane--yamaha::before { opacity: 1; }
}

@media (max-width: 759px), (max-aspect-ratio: 11/10) {
  .hero { --cutv: 20px; --bandv: 10px; --gapv: 8px; --split: 50%; height: clamp(520px, calc(100svh - 200px), 700px); transition: none; }
  .hero:has(.pane--yamaha:hover), .hero:has(.pane--kawasaki:hover) { --split: 50%; }
  .pane { left: 0; right: 0; width: auto; }
  .pane--yamaha {
    top: 0; bottom: auto; height: calc(var(--split) + var(--cutv));
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2 * var(--cutv) - var(--bandv) / 2 - var(--gapv)), 0 calc(100% - var(--bandv) / 2 - var(--gapv)));
  }
  .pane--kawasaki {
    top: auto; bottom: 0; height: calc(100% - var(--split) + var(--cutv));
    clip-path: polygon(0 calc(2 * var(--cutv) + var(--bandv) / 2 + var(--gapv)), 100% calc(var(--bandv) / 2 + var(--gapv)), 100% 100%, 0 100%);
  }
  .pane--yamaha > img { object-position: 52% 64%; }
  .pane--kawasaki > img { object-position: 62% 60%; }
  .pane--yamaha::after { background: linear-gradient(to bottom, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 45%); }
  .pane { --bf: clamp(34px, 11.5vw, 60px); }
  .pane--yamaha { --mw: clamp(140px, 40vw, 220px); --ct: 22px; }
  .pane--kawasaki { --mw: clamp(130px, 38vw, 240px); --ct: calc(2 * var(--cutv) + var(--bandv) / 2 + var(--gapv) + 14px); --ctmin: calc(2 * var(--cutv) + var(--bandv) / 2 + var(--gapv) + 4px); }
  .pane--yamaha .pane__copy { bottom: auto; left: var(--gutter); }
  .pane--kawasaki .pane__copy { right: auto; left: var(--gutter); bottom: auto; text-align: left; justify-items: start; }
  .pane--kawasaki::after { background: linear-gradient(to bottom, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 52%); }
  .hero__slash i {
    clip-path: polygon(0 calc(var(--split) + var(--cutv) - var(--bandv) / 2), 100% calc(var(--split) - var(--cutv) - var(--bandv) / 2), 100% calc(var(--split) - var(--cutv) + var(--bandv) / 2), 0 calc(var(--split) + var(--cutv) + var(--bandv) / 2));
  }
  @keyframes slash-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
}

/* ---------- bloques de página ---------- */
.section { padding-block: clamp(64px, 9vw, 140px); }
.section--tight { padding-block: clamp(40px, 6vw, 88px); }
.section--humo { background: var(--humo); }
.section--carbono { background: var(--carbono); color: #fff; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; margin-bottom: clamp(28px, 4vw, 56px); }

.dealer { display: grid; gap: 40px; padding-block: clamp(56px, 8vw, 120px); }
.dealer__text { display: grid; gap: 28px; justify-items: start; }
.dealer__text .h1 { max-width: 16ch; }
.dealer__marks { display: grid; gap: 22px; align-content: start; }
.dealer__marks .logos { display: grid; gap: 0; border-top: 1px solid var(--niebla); }
.logo-cell { display: flex; align-items: center; min-height: 104px; border-bottom: 1px solid var(--niebla); padding-block: 22px; }
.logo-cell img { height: auto; }
.logo-cell--yamaha img { width: 168px; }
.logo-cell--kawasaki img { width: 190px; }
@media (min-width: 900px) {
  .dealer { grid-template-columns: 7fr 4fr; gap: 8vw; align-items: end; }
}

/* destacado por marca */
.feature { display: grid; gap: 32px; align-items: center; }
.feature__media { position: relative; background: var(--blanco); aspect-ratio: 1.22; display: grid; place-items: center; }
.section--humo .feature__media { background: transparent; }
.feature__media img { width: 100%; height: 100%; object-fit: contain; transition: opacity .25s var(--ease); }
.section--humo .feature__media img { mix-blend-mode: multiply; }
.feature__media img.is-swapping { opacity: 0; }
.feature__body { display: grid; gap: 22px; justify-items: start; }
.feature__brand { font-size: 15px; font-weight: 650; font-stretch: 104%; }
.feature__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; }
.feature__year { font-family: var(--f-display); font-style: italic; font-stretch: 110%; font-weight: 500; font-size: clamp(20px, 2vw, 28px); color: var(--grafito); }
.feature__more { font-size: 15px; }
.feature__more a { font-weight: 600; }
@media (min-width: 900px) {
  .feature { grid-template-columns: 8fr 4fr; gap: 6vw; }
  .feature--flip { grid-template-columns: 4fr 8fr; }
  .feature--flip .feature__media { order: 2; }
}

.facts { display: grid; grid-template-columns: repeat(3, auto); gap: 0 clamp(20px, 3vw, 40px); justify-content: start; }
.facts div { display: grid; gap: 2px; }
.facts dt { font-size: 13px; font-stretch: 92%; font-weight: 500; color: var(--grafito); order: 2; }
.facts dd { font-family: var(--f-display); font-style: italic; font-stretch: 112%; font-weight: 700; font-size: clamp(18px, 1.7vw, 24px); line-height: 1.15; }

.swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.swatches__label { font-size: 14px; font-weight: 600; margin-right: 4px; }
.swatch { width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .25); background: var(--c); cursor: pointer; padding: 0; position: relative; }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--carbono); }
.swatch:focus-visible { outline-offset: 5px; }

/* estados de disponibilidad: la diferencia no depende del color */
.estado { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 650; font-stretch: 100%; line-height: 1; background: #fff; border: 1px solid var(--carbono); padding: 7px 10px 7px 8px; }
.estado i { width: 10px; height: 10px; border: 2px solid var(--carbono); background: var(--carbono); flex: none; }
.estado--reservada i { background: transparent; }
.estado--vendida { color: var(--grafito); border-color: var(--grafito); text-decoration: line-through; text-decoration-thickness: 1px; }
.estado--vendida i { background: transparent; border-color: var(--grafito); transform: rotate(45deg); }
.estado--proximamente { border-style: dashed; }
.estado--proximamente i { background: transparent; border-style: dotted; }
.estado--transito i { background: linear-gradient(90deg, var(--carbono) 50%, transparent 50%); }

/* motos usadas */
.rail { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); -webkit-overflow-scrolling: touch; }
.rail > * { flex: 0 0 min(78%, 320px); scroll-snap-align: start; }
.grid-moto { display: grid; gap: 36px 24px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid-moto { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid-moto { grid-template-columns: repeat(3, 1fr); } .grid-moto--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 760px) {
  .rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 36px 24px; overflow: visible; margin-inline: 0; padding: 0; }
  .rail > * { flex: none; }
}
@media (min-width: 760px) and (max-width: 1099px) { .rail { grid-template-columns: repeat(2, 1fr); } }

.moto { position: relative; }
.moto__link { display: grid; gap: 14px; text-decoration: none; }
.moto__media { position: relative; aspect-ratio: 4 / 3; background: var(--humo); overflow: hidden; display: grid; place-items: center; }
.moto__media img { width: 92%; height: 92%; object-fit: contain; mix-blend-mode: multiply; }
.moto__link:hover .h3 { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.moto__media .estado { position: absolute; left: 10px; top: 10px; z-index: 2; }
.moto--vendida .moto__media img { filter: grayscale(1); opacity: .6; }
.moto__media--pending { align-content: center; gap: 6px; padding: 18px; }
.moto__media--pending b { font-family: var(--f-display); font-style: italic; font-stretch: 125%; font-weight: 800; font-size: clamp(30px, 4.2vw, 52px); line-height: .95; color: #cfcfcf; letter-spacing: -.01em; text-align: center; word-break: break-word; }
.moto__media--pending .pending-note { font-size: 12px; font-weight: 600; font-stretch: 92%; color: var(--grafito); text-align: center; }
.moto__title { display: grid; gap: 2px; }
.moto__price { font-stretch: 108%; font-weight: 700; font-size: 18px; }
.moto__price.is-placeholder { color: var(--grafito); }
.moto .facts { gap: 0 22px; }
.facts--inline { display: flex; gap: 0 14px; }
.moto .facts dd { font-size: 16px; font-stretch: 105%; font-weight: 650; }
.moto .facts dt { font-size: 12px; }

/* índice tipográfico (accesorios) */
.index { border-top: 1px solid var(--carbono); }
.index li { border-bottom: 1px solid var(--niebla); }
.index a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: clamp(14px, 1.8vw, 22px) 0; text-decoration: none; position: relative; }
.index a::before { content: ""; position: absolute; left: 0; top: 50%; width: 10px; height: 60%; background: var(--rojo); transform: translateY(-50%) skewX(-24deg) scaleX(0); transform-origin: left center; transition: transform .3s var(--ease); }
.index a:hover::before, .index a:focus-visible::before { transform: translateY(-50%) skewX(-24deg) scaleX(1); }
.index__name { font-family: var(--f-display); font-style: italic; font-stretch: 118%; font-weight: 700; font-size: clamp(20px, 3.6vw, 46px); line-height: 1.1; letter-spacing: -.005em; overflow-wrap: anywhere; transition: transform .3s var(--ease); }
.index a:hover .index__name, .index a:focus-visible .index__name { transform: translateX(26px); }
.index__go { font-size: 15px; font-weight: 600; white-space: nowrap; color: var(--grafito); }
@media (max-width: 559px) { .index__go { display: none; } }

/* banda oscura: próximamente */
.soon { display: grid; gap: clamp(20px, 3vw, 36px); justify-items: start; }
.soon__word { font-family: var(--f-display); font-style: italic; font-stretch: 125%; font-weight: 800; letter-spacing: -.01em; line-height: .95; font-size: clamp(32px, 8vw, 132px); white-space: nowrap; }
.soon__foot { display: grid; gap: 24px; justify-items: start; width: 100%; }
.soon__foot p { max-width: 44ch; color: #d6d6d6; }
@media (min-width: 900px) { .soon__foot { grid-template-columns: 1fr auto; align-items: end; } }

/* franja de promociones */
.promo { display: grid; gap: 18px; align-items: center; padding-block: clamp(28px, 4vw, 48px); }
@media (min-width: 760px) { .promo { grid-template-columns: 1fr 2fr auto; gap: 40px; } }

/* cotización */
.quote { display: grid; gap: 40px; }
.steps { display: grid; gap: 0; counter-reset: paso; margin-top: 28px; }
.steps li { counter-increment: paso; display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 18px 0; border-top: 1px solid var(--niebla); }
.steps li::before { content: counter(paso); font-family: var(--f-display); font-style: italic; font-stretch: 125%; font-weight: 800; font-size: 30px; line-height: 1; }
.steps li:last-child { border-bottom: 1px solid var(--niebla); }
.steps b { display: block; font-weight: 650; font-stretch: 105%; }
.steps span { color: var(--grafito); font-size: 15px; }
@media (min-width: 900px) { .quote { grid-template-columns: 5fr 6fr; gap: 8vw; align-items: start; } }

.form { display: grid; gap: 16px; background: var(--humo); padding: clamp(20px, 3vw, 36px); }
.form--plain { background: transparent; padding: 0; }
.form__row { display: grid; gap: 16px; }
@media (min-width: 560px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 6px; }
.field label { font-size: 14px; font-weight: 600; }
.field label small { font-weight: 400; color: var(--grafito); }
.field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: 12px 14px; background: #fff; border: 1px solid #b9b9b9; border-radius: 0; font-size: 16px; }
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--rojo); outline-offset: 0; border-color: var(--carbono); }
.check { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 14px; line-height: 1.4; }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--carbono); }
.pending-copy { color: var(--grafito); font-style: normal; border-bottom: 1px dashed var(--grafito); }

/* pie */
.site-footer { background: var(--blanco); border-top: 1px solid var(--carbono); padding-block: clamp(48px, 6vw, 88px) 32px; }
.footer-grid { display: grid; gap: 40px; }
.footer-brand { display: grid; gap: 18px; align-content: start; }
.footer-brand img.gsx { height: 44px; width: auto; }
.footer-marks { display: grid; border-top: 1px solid var(--niebla); max-width: 320px; }
.footer-marks > a { display: block; padding-block: 22px; border-bottom: 1px solid var(--niebla); }
.footer-marks img, .footer-marks svg { height: auto; }
.footer-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
.footer-title { font-size: 14px; font-weight: 650; font-stretch: 104%; line-height: 1.3; margin-bottom: 12px; }
.footer-cols li { margin-bottom: 8px; font-size: 15px; }
.footer-cols a { text-decoration: none; }
.footer-cols a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* datos de la tienda: etiqueta arriba y dato debajo; los enlaces llevan subrayado para que se reconozcan dentro del texto gris */
.footer-contact li { margin-bottom: 14px; line-height: 1.45; }
.footer-contact b { display: block; margin-bottom: 2px; color: var(--carbono); font-weight: 600; }
.footer-cols .footer-contact a { color: var(--carbono); text-decoration: underline; text-underline-offset: 3px; }
.footer-legal { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--niebla); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
@media (max-width: 599px) { .footer-cols > div:last-child { grid-column: 1 / -1; } } /* en el teléfono los datos de la tienda ocupan todo el ancho */
@media (min-width: 900px) { .footer-grid { grid-template-columns: 4fr 8fr; gap: 6vw; } }
@media (min-width: 1200px) { .footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.8fr); } }

/* ---------- páginas interiores ---------- */
.crumbs { padding-block: 18px; font-size: 14px; color: var(--grafito); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.crumbs li + li::before { content: "/"; margin-right: 10px; color: #a0a0a0; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

.page-head { padding-block: clamp(40px, 6vw, 96px) clamp(32px, 4vw, 56px); display: grid; gap: 24px; }
.page-head__row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px; }
.page-head .logo-brand { width: 170px; }
.page-head .logo-brand--kawasaki { width: 190px; }
.cover { position: relative; width: 100%; height: clamp(300px, 46vw, 660px); overflow: hidden; background: var(--carbono); }
.cover img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 759px) { .cover { height: 78vw; } }

.tiles { display: grid; gap: 40px 24px; }
@media (min-width: 700px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
.tile { display: grid; gap: 18px; align-content: start; }
.tile__media { display: block; position: relative; aspect-ratio: 1.22; background: var(--blanco); }
.tile__media img { width: 100%; height: 100%; object-fit: contain; }
.section--humo .tile__media { background: transparent; }
.tile__body { display: grid; gap: 14px; }
.tile__title { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 16px; }  /* el año se queda en la primera línea aunque el nombre ocupe dos */
.tile__title .h2 { font-size: clamp(26px, 2.6vw, 38px); }

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; }
.filter { background: transparent; border: 1px solid var(--carbono); padding: 9px 16px; font-size: 14px; font-weight: 600; cursor: pointer; min-height: 40px; }
.filter[aria-pressed="true"] { background: var(--carbono); color: #fff; }
.filter:hover { box-shadow: inset 0 -3px 0 var(--rojo); }
.empty { padding: 32px 0; color: var(--grafito); }

/* ficha */
.ficha { display: grid; gap: 32px; padding-bottom: clamp(48px, 6vw, 96px); }
.ficha__gallery { display: grid; gap: 12px; align-content: start; }
.viewer { position: relative; aspect-ratio: 1.22; background: var(--blanco); display: grid; place-items: center; border: 1px solid var(--niebla); overflow: hidden; }
.viewer img { width: 100%; height: 100%; object-fit: contain; }
.viewer img.is-scene { object-fit: cover; }
.viewer--pending { background: var(--humo); }
.viewer .ref-tag { position: absolute; left: 10px; bottom: 10px; z-index: 3; background: var(--carbono); color: #fff; font-size: 12px; font-weight: 600; padding: 5px 8px; font-stretch: 92%; }
.thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.thumb { padding: 0; border: 1px solid var(--niebla); background: #fff; cursor: pointer; aspect-ratio: 16 / 10; overflow: hidden; position: relative; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb--studio img { object-fit: contain; }
.thumb[aria-current="true"] { outline: 2px solid var(--carbono); outline-offset: -2px; }
.thumb--pending { background: var(--humo); display: grid; place-items: center; font-size: 11px; color: var(--grafito); font-weight: 600; text-align: center; padding: 4px; }
.ficha__info { display: grid; gap: 24px; align-content: start; }
.ficha__info .feature__title { gap: 2px 16px; }
.price { display: grid; gap: 2px; }
.price b { font-family: var(--f-display); font-style: italic; font-stretch: 115%; font-weight: 750; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.1; }
.price span { font-size: 13px; color: var(--grafito); }
.buy { display: grid; gap: 10px; }
.buy .btn { width: 100%; }
@media (min-width: 960px) {
  .ficha { grid-template-columns: 7fr 5fr; gap: 5vw; }
  .ficha__info { position: sticky; top: calc(var(--header-h) + 24px); }
}

.spec-table { display: grid; border-top: 1px solid var(--carbono); }
.spec-table div { display: grid; gap: 4px 24px; padding: 14px 0; border-bottom: 1px solid var(--niebla); }
.spec-table dt { font-weight: 600; font-stretch: 100%; }
.spec-table dd { color: #333; }
.spec-table dd.is-pending { color: var(--grafito); }
@media (min-width: 640px) { .spec-table div { grid-template-columns: 1fr 2fr; } }
.two-col { display: grid; gap: 32px; }
@media (min-width: 900px) { .two-col { grid-template-columns: 4fr 8fr; gap: 6vw; } }

.gallery-strip { display: grid; gap: 12px; grid-template-columns: 1fr; }
.gallery-strip img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.gallery-strip .rvm { aspect-ratio: 16 / 10; }
.gallery-strip .rvm img { height: 100%; aspect-ratio: auto; }
@media (min-width: 700px) {
  .gallery-strip { grid-template-columns: repeat(3, 1fr); }
  .gallery-strip .wide { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
}

/* fotos reales de la unidad: se apilan en el teléfono; desde 700 px van en una fila con la misma altura, cada una con el ancho de su forma (--ar = ancho / alto) */
.unit-photos { display: flex; flex-direction: column; gap: 12px; }
.unit-photos .rvm { aspect-ratio: var(--ar); background: var(--humo); }
.unit-photos .rvm img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 700px) {
  .unit-photos { flex-direction: row; }
  .unit-photos .rvm { flex: var(--ar) 1 0%; min-width: 0; }
}

.mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: var(--blanco); border-top: 1px solid var(--carbono); padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mobile-bar .btn { min-height: 48px; padding: 0 8px; font-size: 14px; }
@media (min-width: 960px) { .mobile-bar { display: none; } }
@media (max-width: 959px) { body.has-mobile-bar { padding-bottom: 76px; } }

/* próximamente (página completa) */
.soon-page { min-height: calc(100svh - var(--header-h) - 40px); display: grid; align-content: center; gap: 28px; padding-block: 72px; }
.soon-page .soon__word { font-size: clamp(32px, 9.4vw, 150px); }

/* diálogo del lead */
dialog.lead { width: min(720px, calc(100% - 32px)); max-height: calc(100svh - 32px); border: 0; padding: 0; background: #fff; color: var(--carbono); }
dialog.lead::backdrop { background: rgba(0, 0, 0, .6); }
.lead__in { padding: clamp(20px, 3vw, 32px); display: grid; gap: 16px; }
.lead__in pre { margin: 0; background: var(--humo); padding: 16px; overflow: auto; font-size: 13px; line-height: 1.5; max-height: 46svh; white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.lead__head { display: flex; align-items: start; justify-content: space-between; gap: 16px; }

/* ---------- v0.2: barras de marca ---------- */
/* Los logos de Yamaha y Kawasaki van siempre sobre blanco, enteros, fuera de las fotos y cada uno en su barra. */
.brandbar { background: #fff; border-bottom: 4px solid var(--line, var(--niebla)); }
.brandbar--yamaha { --line: var(--y-gris-medio); }
.brandbar--kawasaki { --line: var(--k-verde); }  /* Green Horizon: línea de 4 px bajo el logo, como en el encabezado web del manual */
.brandbar__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; padding-block: clamp(28px, 3.2vw, 38px); }
.brandbar__logo { display: block; }
.brandbar__logo img, .brandbar__logo svg { width: var(--lw, 200px); max-width: 100%; height: auto; }
.brandbar__aside { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 28px; }
.brandbar__aside h2 { font-size: 18px; }

.lockup-yamaha { display: block; height: auto; }
.lockup-yamaha text { font-family: var(--f-display); font-style: italic; font-weight: 300; font-stretch: 112%; fill: var(--y-negro); }

.brandsec { --tile-bg: #fff; }
.brandsec--yamaha { --tile-bg: var(--y-gris-claro); }
.brandsec--kawasaki { --tile-bg: var(--humo); }
.brandsec__body { padding-block: clamp(36px, 5vw, 72px) clamp(56px, 8vw, 112px); }

.tile__media { background: var(--tile-bg, #fff); }
.tile__media img { padding: 4%; }
.tile .swatches { margin-top: -2px; }
.tiles.tiles--2 { grid-template-columns: 1fr; }
@media (min-width: 700px) { .tiles.tiles--2 { grid-template-columns: repeat(2, 1fr); } }
.tile__title .name { font-size: clamp(30px, 3.2vw, 46px); }
.tile__cta { display: flex; flex-wrap: wrap; gap: 10px; }

/* v0.4: precio sugerido en las tarjetas y motos "próximamente" (tarjeta sin ficha, con foto referencial) */
.tile__price { display: grid; gap: 2px; }
.tile__price b { font-family: var(--f-display); font-style: italic; font-stretch: 115%; font-weight: 750; font-size: clamp(22px, 2vw, 28px); line-height: 1.1; }
.tile__price span { font-size: 13px; color: var(--grafito); }
.tile__media .ref-tag { position: absolute; left: 10px; bottom: 10px; z-index: 3; background: var(--carbono); color: #fff; font-size: 12px; font-weight: 600; font-stretch: 92%; padding: 5px 8px; line-height: 1.2; }
/* en las cuadrículas de tres columnas con tarjetas "Próximamente", todos los nombres llevan el mismo tamaño (los nombres largos no parten el año) */
.tiles:has(.tile--soon):not(.tiles--2) .tile__title .name { font-size: clamp(26px, 2.6vw, 38px); }
.tiles > .tile { min-width: 0; }  /* una tarjeta con texto largo nunca ensancha la columna */
/* Tarjetas de una misma fila: el título, los datos y los botones quedan a la misma altura aunque un nombre largo ocupe más líneas.
   Usa subgrid (cada tarjeta ocupa 4 filas de la cuadrícula: foto, título, datos y botones); sin soporte, cada tarjeta fluye por su cuenta. */
.tile__head, .tile__data { display: grid; gap: 14px; align-content: start; }
@supports (grid-template-rows: subgrid) {
  .tiles > .tile { grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
  .tiles > .tile > .tile__body { display: contents; }
  .tiles > .tile > .tile__media { margin-bottom: 18px; }
  .tiles > .tile .tile__head, .tiles > .tile .tile__data { margin-bottom: 14px; }
}
.tile__media--pending { display: grid; place-content: center; gap: 8px; text-align: center; padding: 16px; overflow: hidden; contain: size; }  /* sin contain: size, el nombre largo hace crecer la caja y, por su proporción, también el ancho */
.tile__media--pending b { font-family: var(--f-display); font-style: italic; font-stretch: 125%; font-weight: 800; font-size: clamp(26px, 3.2vw, 44px); line-height: .98; color: #c4c6c9; letter-spacing: -.01em; overflow-wrap: anywhere; }
.tile__media--pending span { font-size: 12px; font-weight: 600; font-stretch: 92%; color: var(--grafito); }
.soon-note { margin-top: clamp(28px, 4vw, 48px); max-width: 82ch; }

/* banda del concesionario */
.dealer__side { display: grid; gap: 24px; justify-items: start; align-content: end; }

/* motos usadas */
.moto__media--photo, .moto__media--brands { aspect-ratio: 4 / 5; }
.moto__media--photo { background: var(--humo); }
.moto__media--photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 64%; mix-blend-mode: normal; }
.moto__media--brands { background: #fff; border: 1px dashed #a9a9a9; align-content: center; gap: 10px; padding: 22px; }
.moto__media--brands p { font-family: var(--f-display); font-style: italic; font-stretch: 118%; font-weight: 700; font-size: clamp(18px, 1.9vw, 26px); line-height: 1.25; text-align: center; }
.moto__media--brands span { font-size: 13px; color: var(--grafito); text-align: center; }
.moto--brands { display: grid; gap: 14px; align-content: start; }
.moto--brands .h3 { color: var(--grafito); }

.grid-moto.grid-moto--2 { grid-template-columns: 1fr; gap: 28px 20px; }
@media (min-width: 560px) { .grid-moto.grid-moto--2 { grid-template-columns: repeat(2, 1fr); } }

/* ficha */
.ficha__brand { display: block; margin-bottom: 6px; }
.ficha__brand svg, .ficha__brand img { width: var(--lw, 200px); max-width: 100%; height: auto; }
.viewer--portrait { aspect-ratio: 4 / 5; background: var(--humo); }
.viewer--portrait img { object-fit: cover; object-position: 50% 0; } /* la foto se alinea arriba, como se veía en v0.2 (el 62 % no tenía efecto) */
.foto-nota { font-size: 13px; line-height: 1.4; color: var(--grafito); }

/* respaldo Motobros */
.respaldo { background: var(--carbono); color: #fff; }
.respaldo__in { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; padding-block: 26px; }
.respaldo__in span { font-size: 14px; font-weight: 500; color: #d6d6d6; }
.respaldo__in img { width: 112px; height: auto; }
.panel-dark { background: var(--carbono); color: #fff; padding: clamp(28px, 4vw, 56px); display: grid; gap: 22px; align-content: center; }
.panel-dark img { width: clamp(120px, 14vw, 180px); height: auto; }
.panel-dark p { color: #d6d6d6; max-width: 52ch; }

/* ---------- v0.3: movimiento ---------- */
/* Reglas: solo transform y opacity, de 300 a 700 ms, curva --ease. Lo que se esconde lo esconde el JS (clase .rv); sin JS todo se lee. */

/* máscara de texto: la palabra sube desde una línea recortada (relleno y margen negativo evitan cortar astas y cursivas) */
.mask { display: inline-block; vertical-align: top; overflow: hidden; padding: .12em .3em .18em .12em; margin: -.12em -.3em -.18em -.12em; }
.mask__in { display: block; }
/* al entrar en pantalla (las que ya están a la vista al cargar no se esconden) */
[data-mask].rv { opacity: 1; transform: none; }
[data-mask].rv .mask__in { transform: translateY(110%); }
[data-mask].rv.is-in .mask__in { transform: none; transition: transform var(--dur-base) var(--ease) var(--d, 0ms); }
@media (prefers-reduced-motion: no-preference) {
  /* al cargar (página de Financiamiento, donde la palabra ya está a la vista) */
  [data-mask="load"] .mask__in { animation: rise var(--dur-base) var(--ease) .15s both; }
  /* portada de marca: una cortina del color de la página se pliega hacia abajo y la foto se asienta */
  .cover::after { content: ""; position: absolute; inset: 0; background: var(--blanco); transform-origin: 50% 100%; pointer-events: none; animation: curtain var(--dur-slow) var(--ease) .1s both; }
  .cover img { animation: settle var(--dur-slow) var(--ease) .1s both; }
}
@keyframes curtain { from { transform: scaleY(1); } to { transform: scaleY(0); } }
@keyframes settle { from { transform: scale(1.06); } to { transform: none; } }

/* cortina que se abre en las fotos de la galería (solo transform): la capa se pliega y la foto se asienta */
.rvm { position: relative; overflow: hidden; }
.rvm::after { content: ""; position: absolute; inset: 0; background: var(--mask-bg, var(--blanco)); transform: scaleY(0); transform-origin: 50% 100%; pointer-events: none; }
.rvm.rv { opacity: 1; transform: none; }
.rvm.rv::after { transform: scaleY(1); }
.rvm.rv img { transform: scale(1.06); }
.rvm.rv.is-in::after { transform: scaleY(0); transition: transform var(--dur-slow) var(--ease) var(--delay); }
.rvm.rv.is-in img { transform: none; transition: transform var(--dur-slow) var(--ease) var(--delay); }

/* fundido cruzado: la foto nueva se funde sobre la anterior (dos capas apiladas, solo opacidad), sin corte ni parpadeo.
   En las tarjetas el multiply vive en el contenedor (.xf) para que la mezcla de las dos fotos no oscurezca. */
.xf { position: absolute; inset: 0; display: block; }
.tile__media .xf { mix-blend-mode: multiply; }
.xf img, .viewer img { position: absolute; inset: 0; width: 100%; height: 100%; }
.xf img.xf-new, .viewer img.xf-new { opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
.xf img.xf-new.is-in, .viewer img.xf-new.is-in { opacity: 1; }

/* elemento compartido: la foto de la tarjeta viaja a la de la ficha (y al volver) con las transiciones de vista del navegador.
   Solo viaja la foto de la moto que se abre (el JS le pone nombre a esa y a su pareja en la otra página, y al listado de usadas al filtrar);
   el resto de la página cambia al instante. Si el navegador no las soporta, se navega como siempre. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: var(--dur-base); animation-timing-function: var(--ease); }
::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; }
/* una foto sin pareja en la otra página ni se desvanece sobre la página nueva ni aparece con fundido */
::view-transition-old(*):only-child { animation: none; display: none; }
::view-transition-new(*):only-child { animation: none; }

/* revelar al entrar en pantalla (una sola vez): tarjetas, filas del índice y pasos llegan en cascada.
   El estado oculto (.rv) lo pone el JS solo en lo que está bajo el pliegue; sin JS no existe. */
.rv { opacity: 0; transform: translateY(22px); }
.rv.is-in { --delay: calc(min(var(--i, 0), 5) * var(--stagger)); opacity: 1; transform: none; transition: opacity var(--dur-base) var(--ease) var(--delay), transform var(--dur-base) var(--ease) var(--delay); }
/* las tarjetas de moto llegan con un rebote leve, como si pesaran */
.tiles > .rv.is-in, .grid-moto > .rv.is-in { transition: opacity var(--dur-base) var(--ease) var(--delay), transform var(--dur-slow) var(--spring) var(--delay); }
@media print { .rv { opacity: 1 !important; transform: none !important; } }

/* tarjeta de cotización rápida: el botón se expande hasta ella. La caja (.qc__box) crece con transform, el rótulo del botón se desvanece
   y el contenido aparece al final; el resto de la página se atenúa con la opacidad del fondo (sin desenfoque). */
dialog.qc { position: fixed; inset: auto; margin: 0; padding: 0; border: 0; background: transparent; color: var(--carbono); overflow: visible; max-width: none; max-height: none; width: min(420px, calc(100vw - 2 * var(--gutter))); }
dialog.qc::backdrop { background: rgba(26, 26, 26, .5); opacity: 0; transition: opacity var(--dur-base) var(--ease); }
dialog.qc.is-open::backdrop { opacity: 1; }
.qc__box { position: absolute; inset: 0; background: var(--carbono); transform-origin: 0 0; transition: transform 420ms var(--ease) 60ms; }
.qc.is-open .qc__box { transition: transform var(--dur-base) var(--ease); }
.qc__box::after { content: ""; position: absolute; inset: 0; background: var(--blanco); opacity: 0; transition: opacity 240ms var(--ease) .12s; }
.qc.is-open .qc__box::after { opacity: 1; transition: opacity 300ms var(--ease) .06s; }
.qc__label { position: absolute; display: flex; align-items: center; justify-content: center; box-sizing: border-box; font-weight: 650; font-stretch: 104%; line-height: 1.1; text-align: center; white-space: nowrap; pointer-events: none; opacity: 1; transition: opacity 240ms var(--ease) .2s; }
.qc.is-open .qc__label { opacity: 0; transition: opacity 160ms var(--ease); }
.qc__scroll { position: relative; display: grid; gap: 16px; max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; padding: clamp(20px, 3vw, 28px); opacity: 0; transition: opacity 140ms var(--ease); }
.qc.is-open .qc__scroll { opacity: 1; transition: opacity 300ms var(--ease) .2s; }
.qc__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.qc__head .h3 { outline-offset: 4px; }
@media (max-width: 959px) {
  /* en el celular se ancla arriba: el teclado nunca la tapa */
  dialog.qc { top: calc(env(safe-area-inset-top, 0px) + 12px); left: 0; right: 0; margin-inline: auto; width: min(560px, calc(100vw - 2 * var(--gutter))); }
  .qc__scroll { max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after, ::backdrop { transition-duration: .01ms !important; transition-delay: 0s !important; animation-duration: .01ms !important; animation-delay: 0s !important; }
}