/* =========================================================================
   MOTOBOX — Capa de animaciones (motion.css)
   Intro de marca, hero con profundidad, cinta de marcas en movimiento,
   escenario 3D del sorteo, revelados ligados al scroll y botones magnéticos.
   Todo usa transform / opacity / clip-path y se apaga con prefers-reduced-motion.
   ========================================================================= */

:root {
  --mx-expo-out: cubic-bezier(0.16, 1, 0.3, 1);
  --mx-expo-in-out: cubic-bezier(0.87, 0, 0.13, 1);
  --mx-red: #e02e24;
  --mx-ink: #08090c;
}

/* ── 1. Intro de marca ─────────────────────────────────────────────────── */
/* Mientras motion.js arma la intro, una cortina tapa la página (evita el destello). */
html.mx-intro-on::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--mx-ink);
}
html.mx-intro-built::after { content: none; }
html.mx-intro-on .mx-word { animation-play-state: paused; }

.mx-intro {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: grid;
  place-items: center;
  background: var(--mx-ink);
  color: #fff;
  clip-path: inset(0 0 0 0);
  cursor: pointer;
  overflow: hidden;
}
.mx-intro.is-leaving {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.85s var(--mx-expo-in-out);
}
.mx-intro-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  perspective: 700px;
}
.mx-intro.is-leaving .mx-intro-inner {
  transform: translateY(-14vh);
  opacity: 0;
  transition: transform 0.85s var(--mx-expo-in-out), opacity 0.5s ease 0.15s;
}
.mx-intro-word {
  display: flex;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(2.8rem, 12vw, 7.5rem);
  letter-spacing: -0.04em;
  line-height: 1;
  overflow: hidden;
  padding: 0.08em 0.04em;
}
.mx-intro-char {
  display: inline-block;
  transform-origin: 50% 100%;
  animation: mxIntroChar 0.9s var(--mx-expo-out) backwards;
  animation-delay: calc(120ms + var(--i) * 45ms);
}
.mx-intro-char--red { color: var(--mx-red); }
@keyframes mxIntroChar {
  from { transform: translateY(105%) rotateX(-70deg); opacity: 0; }
}
.mx-intro-line {
  width: min(260px, 50vw);
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--mx-red) 30%, #ff6a3d 70%, transparent);
  transform-origin: 0 50%;
  animation: mxIntroLine 1.1s var(--mx-expo-out) 0.45s backwards;
}
@keyframes mxIntroLine {
  from { transform: scaleX(0); opacity: 0; }
}
.mx-intro-sub {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.55);
  animation: mxFadeUp 0.8s var(--mx-expo-out) 0.75s backwards;
}
@keyframes mxFadeUp {
  from { transform: translateY(12px); opacity: 0; }
}

/* ── 2. Hero con profundidad ──────────────────────────────────────────── */
/* La foto pasa a una capa propia (motion.js la mueve con un resorte) y respira (Ken Burns). */
[data-page="home"] .simple-hero { isolation: isolate; }
.mx-hero-bg {
  position: absolute;
  inset: -8%;
  z-index: 0;
  background: inherit;
  will-change: transform;
  pointer-events: none;
}
.simple-hero.mx-hero-live .mx-hero-bg {
  animation: mxKenBurns 24s ease-in-out infinite alternate;
}
@keyframes mxKenBurns {
  from { scale: 1; }
  to   { scale: 1.08; }
}

/* Luz roja que acompaña al puntero (solo con mouse). */
.mx-hero-glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(520px circle at 50% 40%, rgba(224, 46, 36, 0.24), rgba(224, 46, 36, 0.08) 40%, transparent 70%);
  opacity: 0;
  transition: opacity 0.6s ease;
  will-change: transform;
}
.simple-hero:hover .mx-hero-glow { opacity: 1; }

/* Indicador de scroll */
.mx-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 2;
  width: 22px;
  height: 36px;
  margin-left: -11px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 12px;
  opacity: calc(1 - var(--hero-p, 0) * 3);
  pointer-events: none;
}
.mx-scroll-cue::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 7px;
  width: 4px;
  height: 7px;
  margin-left: -2px;
  border-radius: 2px;
  background: #fff;
  animation: mxCue 1.8s var(--mx-expo-out) infinite;
}
@keyframes mxCue {
  0%   { transform: translateY(0); opacity: 0; }
  20%  { opacity: 1; }
  80%  { transform: translateY(12px); opacity: 0; }
  100% { opacity: 0; }
}

/* ── 3. Cinta de marcas ───────────────────────────────────────────────── */
.mx-marquee {
  position: relative;
  overflow: hidden;
  padding: 1.6rem 0;
  background: var(--mx-ink);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.mx-marquee::before,
.mx-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 12vw;
  z-index: 2;
  pointer-events: none;
}
.mx-marquee::before { left: 0; background: linear-gradient(90deg, var(--mx-ink), transparent); }
.mx-marquee::after  { right: 0; background: linear-gradient(-90deg, var(--mx-ink), transparent); }
.mx-marquee-row {
  display: flex;
  width: max-content;
  will-change: transform;
}
.mx-marquee-row + .mx-marquee-row { margin-top: 0.35rem; }
.mx-marquee-track {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.mx-marquee-item {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.8rem, 5vw, 3.6rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  white-space: nowrap;
  padding: 0 0.55em;
  color: #fff;
}
.mx-marquee-row--outline .mx-marquee-item {
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(255, 255, 255, 0.4);
}
.mx-marquee-item i {
  display: inline-block;
  width: 0.28em;
  height: 0.28em;
  margin-left: 1.1em;
  vertical-align: middle;
  border-radius: 50%;
  background: var(--mx-red);
}
.mx-marquee-row--outline .mx-marquee-item i { background: rgba(255, 255, 255, 0.25); }

/* ── 4. Escenario 3D del sorteo (portada) ─────────────────────────────── */
.mx-sorteo {
  position: relative;
  padding: 5rem 0 5.5rem;
  background:
    radial-gradient(80% 60% at 70% 40%, rgba(224, 46, 36, 0.22), transparent 70%),
    var(--mx-ink);
  color: #fff;
  overflow: hidden;
}
.mx-sorteo--compact {
  margin: 1.8rem 0 2rem;
  padding: 1.5rem 1rem;
  border-radius: 24px;
}
.mx-sorteo--compact .mx-stage { height: clamp(260px, 60vw, 360px); }
.mx-sorteo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 900px) {
  .mx-sorteo-grid { grid-template-columns: 0.9fr 1.1fr; gap: 3rem; }
}
.mx-sorteo-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #ffb4ae;
  margin-bottom: 1rem;
}
.mx-sorteo-kicker::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mx-red);
}
/* Pulso del punto rojo: un aro aparte con escala y opacidad (sin repintar sombras) */
.mx-sorteo-kicker { position: relative; }
.mx-sorteo-kicker::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--mx-red);
  animation: mxPing 2s ease-out infinite;
}
@keyframes mxPing {
  0% { transform: scale(1); opacity: 0.7; }
  70%, 100% { transform: scale(3); opacity: 0; }
}
.mx-sorteo-title {
  font-family: var(--font-heading);
  font-size: clamp(2.3rem, 6vw, 4.2rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  margin: 0 0 1.1rem;
}
.mx-sorteo-title .mx-line { display: block; overflow: hidden; padding-bottom: 0.06em; }
.mx-sorteo-title .mx-line > span { display: block; }
.mx-sorteo-text {
  font-size: 1.02rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.68);
  max-width: 44ch;
  margin: 0 0 1.6rem;
}
.mx-sorteo-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}
.mx-sorteo-facts li {
  font-size: 0.82rem;
  padding: 0.45rem 0.85rem;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
}
.mx-sorteo-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; }
.mx-sorteo-actions .btn-hero-red { padding: 0.95rem 2.1rem; font-size: 0.95rem; }
.mx-sorteo-link {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.mx-sorteo-link:hover { color: #fff; }

/* Escenario: dos tarjetas que flotan en 3D y siguen al puntero */
.mx-stage {
  position: relative;
  height: clamp(300px, 46vw, 440px);
  perspective: 1200px;
}
.mx-stage-rig {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.mx-prize {
  position: absolute;
  top: 50%;
  width: min(58%, 300px);
  aspect-ratio: 3 / 4;
  transform-style: preserve-3d;
}
.mx-prize--1 { left: 6%; transform: translateY(-50%) translateZ(-60px) rotateY(18deg) rotateZ(-6deg); }
.mx-prize--2 { right: 6%; transform: translateY(-46%) translateZ(40px) rotateY(-16deg) rotateZ(5deg); }
.mx-prize-body {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(160deg, #26262b, #121216);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 28px 44px -18px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(0, 0, 0, 0.4);
  animation: mxFloatA 6s ease-in-out infinite;
}
.mx-prize--2 .mx-prize-body { animation: mxFloatB 7s ease-in-out infinite; }
@keyframes mxFloatA { 50% { transform: translateY(-14px); } }
@keyframes mxFloatB { 50% { transform: translateY(12px); } }
.mx-prize img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mx-prize-ph {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: rgba(255, 255, 255, 0.35);
  background:
    radial-gradient(70% 50% at 50% 30%, rgba(224, 46, 36, 0.35), transparent 70%),
    linear-gradient(160deg, #2a2a30, #131317);
}
.mx-prize-ph svg { width: 42%; height: auto; }
.mx-prize-name {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2.2rem 1rem 1rem;
  font-weight: 700;
  font-size: 1.05rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
}
.mx-prize-name small {
  display: block;
  font-weight: 500;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 0.15rem;
}
/* Brillo que barre la tarjeta y reflejo que sigue al puntero */
.mx-prize-body::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.22) 48%, transparent 60%);
  transform: translateX(-120%);
  animation: mxSheen 5.5s var(--mx-expo-in-out) infinite;
  pointer-events: none;
}
.mx-prize--2 .mx-prize-body::after { animation-delay: 2.4s; }
@keyframes mxSheen {
  0%, 55% { transform: translateX(-120%); }
  85%, 100% { transform: translateX(120%); }
}
.mx-stage-floor {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 2%;
  height: 30px;
  border-radius: 50%;
  /* Degradado ya suave en vez de filtro: el escenario gira y el filtro se recalculaba */
  background: radial-gradient(closest-side, rgba(224, 46, 36, 0.32), rgba(224, 46, 36, 0.12) 55%, transparent);
}
.mx-spark {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
  animation: mxSpark var(--dur, 3s) ease-in-out var(--del, 0s) infinite;
  pointer-events: none;
}
@keyframes mxSpark {
  0%, 100% { opacity: 0; transform: scale(0.4); }
  50% { opacity: 0.9; transform: scale(1); }
}

/* Entrada del escenario cuando aparece en pantalla */
.mx-sorteo.mx-pre .mx-line > span { transform: translateY(110%); }
.mx-sorteo.mx-pre .mx-sorteo-kicker,
.mx-sorteo.mx-pre .mx-sorteo-text,
.mx-sorteo.mx-pre .mx-sorteo-facts,
.mx-sorteo.mx-pre .mx-sorteo-actions { opacity: 0; transform: translateY(18px); }
.mx-sorteo.mx-pre .mx-prize { opacity: 0; }
.mx-sorteo.mx-pre .mx-prize--1 { translate: -40px 80px; }
.mx-sorteo.mx-pre .mx-prize--2 { translate: 40px 100px; }
.mx-sorteo .mx-line > span,
.mx-sorteo .mx-sorteo-kicker,
.mx-sorteo .mx-sorteo-text,
.mx-sorteo .mx-sorteo-facts,
.mx-sorteo .mx-sorteo-actions {
  transition: transform 0.9s var(--mx-expo-out), opacity 0.7s ease;
}
.mx-sorteo .mx-line:nth-child(2) > span { transition-delay: 80ms; }
.mx-sorteo .mx-sorteo-text { transition-delay: 160ms; }
.mx-sorteo .mx-sorteo-facts { transition-delay: 220ms; }
.mx-sorteo .mx-sorteo-actions { transition-delay: 280ms; }
.mx-sorteo .mx-prize { transition: opacity 0.8s ease, translate 1.1s var(--mx-expo-out); }
.mx-sorteo .mx-prize--2 { transition-delay: 120ms; }

/* ── 5. Revelados ligados al scroll ───────────────────────────────────── */

/* Títulos de sección que suben desde una máscara */
.mx-mask {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1s var(--mx-expo-out), transform 1s var(--mx-expo-out), opacity 0.6s ease;
}
.mx-mask.mx-pre {
  clip-path: inset(0 0 100% 0);
  transform: translateY(0.6em);
  opacity: 0;
}

/* Tarjetas de motos: entrada en 3D cuando llegan a la pantalla */
.moto-card-modern.mx-card-wait { animation-play-state: paused; }

/* ── 6. Barra de progreso de lectura ──────────────────────────────────── */
.mx-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 1001;
  background: linear-gradient(90deg, var(--mx-red), #ff6a3d);
  transform-origin: 0 50%;
  transform: scaleX(0);
  pointer-events: none;
}

/* ── 7. Entrada orquestada de cada página ─────────────────────────────── */
.mx-enter {
  animation: mxEnter 0.7s cubic-bezier(0.23, 1, 0.32, 1) backwards;
  animation-delay: var(--mx-d, 0ms);
}
@keyframes mxEnter {
  from { opacity: 0; transform: translateY(14px); filter: blur(4px); }
}

/* ── 8. Respuesta al toque y tarjetas con inclinación ─────────────────── */
.btn-primary-hero,
.btn-secondary-hero,
.btn-promo-catalog,
.mx-sorteo-link { transition-property: transform, opacity, background-color, border-color, color, box-shadow; }
.btn-primary-hero:active,
.btn-secondary-hero:active,
.btn-promo-catalog:active { transform: scale(0.97); transition-duration: 120ms; }
.about-pillar-card.mx-tilt:not(.mx-reveal) {
  transition: box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
  will-change: transform;
}

/* ── 9. Ruta nocturna 3D del hero (canvas) ────────────────────────────── */
.mx-ride {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.mx-ride.is-on { opacity: 1; }
.simple-hero.has-ride .mx-scroll-cue { display: none; }
/* En desktop la portada ocupa la pantalla y el texto sube para dejar la ruta abajo. */
@media (min-width: 900px) {
  [data-page="home"] .simple-hero { min-height: clamp(580px, calc(100svh - var(--header-height, 64px)), 940px); }
  [data-page="home"] .simple-hero-content { padding-bottom: 16vh; }
}

/* ── 11. Marca gigante del pie ────────────────────────────────────────── */
.mx-footer-word {
  overflow: hidden;
  text-align: center;
  line-height: 0.8;
  padding-top: 2rem;
  margin-bottom: -0.06em;
  user-select: none;
}
.mx-footer-word span {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(4rem, 19vw, 17rem);
  letter-spacing: -0.06em;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 10%, rgba(224, 46, 36, 0.55) 120%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transform-origin: 50% 100%;
  will-change: transform;
}

/* ── 12. Título del hero: cada palabra gira en 3D al entrar ───────────── */
.mx-word {
  transform-origin: 50% 100%;
  animation-name: mxWord3d;
  animation-duration: 0.9s;
  animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}
@keyframes mxWord3d {
  from { opacity: 0; transform: perspective(600px) translateY(0.45em) rotateX(-80deg); filter: blur(6px); }
}

/* ── 13. Tarjetas: reflejo de luz que sigue la inclinación ────────────── */
@media (hover: hover) and (pointer: fine) {
  .moto-card-modern { position: relative; }
  .moto-card-modern::after,
  .promo-poster-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 55%);
    mix-blend-mode: soft-light;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .moto-card-modern.is-tilting::after,
  .promo-poster-card.is-tilting::after { opacity: calc(var(--lift, 0) * 1); }
}

/* ── 14. Cambio de página: la anterior se hunde, la nueva sube con un recorte ── */
::view-transition-old(root) {
  animation: mxVtOut 280ms cubic-bezier(0.77, 0, 0.175, 1) both;
}
::view-transition-new(root) {
  animation: mxVtIn 640ms cubic-bezier(0.77, 0, 0.175, 1) both;
}
@keyframes mxVtOut {
  to { opacity: 0.35; transform: scale(0.95); filter: blur(3px); }
}
@keyframes mxVtIn {
  from { clip-path: inset(100% 0 0 0 round 40px); transform: translateY(8%); }
  to   { clip-path: inset(0 0 0 0 round 0); transform: none; }
}

/* ── 15. Showroom 360° ─────────────────────────────────────────────────── */
.mx-showroom {
  position: relative;
  padding: 4.5rem 0 4rem;
  background:
    radial-gradient(60% 50% at 50% 38%, rgba(224, 46, 36, 0.16), transparent 70%),
    linear-gradient(180deg, var(--mx-ink) 0%, #0d0e12 100%);
  color: #fff;
  overflow: hidden;
}
.mx-sr-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.6rem 2rem;
}
.mx-sr-title {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 7vw, 5.2rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.95;
  margin: 0;
}
.mx-sr-hint { color: rgba(255, 255, 255, 0.55); font-size: 0.95rem; margin: 0 0 0.5rem; }
.mx-sr-stage {
  position: relative;
  height: calc(var(--sr-h, 234px) * 2.05);
  margin-top: 1.5rem;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  outline: none;
}
.mx-sr-stage.is-dragging { cursor: grabbing; }
.mx-sr-stage:focus-visible { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5); border-radius: 24px; }
.mx-sr-spot {
  position: absolute;
  left: 50%;
  top: -10%;
  width: min(900px, 120vw);
  height: 120%;
  transform: translateX(-50%);
  background: conic-gradient(from 180deg at 50% 0%, transparent 160deg, rgba(255, 255, 255, 0.07) 175deg, rgba(255, 255, 255, 0.1) 180deg, rgba(255, 255, 255, 0.07) 185deg, transparent 200deg);
  pointer-events: none;
}
.mx-sr-tilt {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
}
.mx-sr-ring {
  position: absolute;
  transform-style: preserve-3d;
  will-change: transform;
}
.mx-sr-item {
  position: absolute;
  left: calc(var(--sr-w) / -2);
  top: calc(var(--sr-h) / -2);
  width: var(--sr-w);
  height: var(--sr-h);
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.mx-sr-card {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #eceef1 100%);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.8);
  transition: box-shadow 0.3s ease, transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
/* Sombra de apoyo en el piso (antes era un reflejo espejado, que se redibujaba entero) */
.mx-sr-item::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -26px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.25) 60%, transparent);
  pointer-events: none;
}
.mx-sr-item.is-front::after {
  background: radial-gradient(closest-side, rgba(224, 46, 36, 0.45), rgba(0, 0, 0, 0.3) 60%, transparent);
}
/* La moto de adelante se adelanta en profundidad y crece un poco */
.mx-sr-item.is-front .mx-sr-card { transform: translateZ(44px) scale(1.05); }
.mx-sr-item.is-front .mx-sr-card {
  box-shadow: 0 40px 80px -24px rgba(0, 0, 0, 0.9), 0 0 0 2px rgba(224, 46, 36, 0.9), 0 0 60px rgba(224, 46, 36, 0.35);
}
.mx-sr-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 8% 6% 14%;
  pointer-events: none;
}
.mx-sr-tag {
  position: absolute;
  left: 12px;
  bottom: 10px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #1d1d1f;
}
/* Plataforma giratoria: un disco plano con anillos y marcas que gira con las motos */
.mx-sr-disc {
  position: absolute;
  left: calc(var(--sr-d, 900px) / -2);
  top: calc(var(--sr-d, 900px) / -2);
  width: var(--sr-d, 900px);
  height: var(--sr-d, 900px);
  border-radius: 50%;
  transform: translateY(calc(var(--sr-h) / 2 + 26px)) rotateX(90deg);
  background:
    repeating-conic-gradient(rgba(255, 255, 255, 0.07) 0deg 0.6deg, transparent 0.6deg 7.5deg),
    radial-gradient(circle, rgba(224, 46, 36, 0.28) 0%, rgba(224, 46, 36, 0.06) 45%, transparent 46%, transparent 49%, rgba(255, 255, 255, 0.06) 49.4%, transparent 50%),
    radial-gradient(circle, #15161b 0%, #0b0c10 70%);
  -webkit-mask: radial-gradient(circle, #000 60%, transparent 71%);
  mask: radial-gradient(circle, #000 60%, transparent 71%);
  pointer-events: none;
}
.mx-sr-info {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: end;
  margin-top: 0.5rem;
}
@media (min-width: 900px) {
  .mx-sr-info { grid-template-columns: 1fr auto; }
}
.mx-sr-brand { color: #ff8a80; font-size: 0.95rem; font-weight: 600; margin: 0 0 0.3rem; }
.mx-sr-model {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  margin: 0 0 0.9rem;
}
.mx-sr-specs { display: flex; flex-wrap: wrap; gap: 0.45rem; list-style: none; margin: 0; padding: 0; }
.mx-sr-specs li {
  font-size: 0.82rem;
  padding: 0.4rem 0.8rem;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.8);
}
.mx-sr-side { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
@media (min-width: 900px) { .mx-sr-side { align-items: flex-end; } }
.mx-sr-ctrl { display: flex; align-items: center; gap: 0.9rem; }
.mx-sr-count { font-variant-numeric: tabular-nums; font-weight: 600; color: rgba(255, 255, 255, 0.7); min-width: 4.5em; text-align: center; }
.mx-sr-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  cursor: pointer;
  transition: transform 160ms ease-out, background-color 0.2s ease, border-color 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .mx-sr-btn:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.3); }
}
.mx-sr-btn:active { transform: scale(0.94); }
.mx-sr-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.mx-sr-cta { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }
.mx-sr-link { color: rgba(255, 255, 255, 0.75); text-decoration: underline; text-underline-offset: 4px; font-size: 0.92rem; }
.mx-sr-link:hover { color: #fff; }

/* ── 16. Velocímetro con scroll ────────────────────────────────────────── */
.mx-story {
  position: relative;
  height: 320vh;
  background: #0a0b0e;
  color: #fff;
}
.mx-story-sticky {
  position: sticky;
  top: var(--header-height, 54px);
  height: calc(100vh - var(--header-height, 54px));
  height: calc(100svh - var(--header-height, 54px));
  display: flex;
  align-items: center;
  overflow: hidden;
  background: radial-gradient(60% 60% at 70% 50%, rgba(224, 46, 36, 0.14), transparent 70%);
}
.mx-story-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  align-items: center;
  width: 100%;
}
@media (min-width: 900px) {
  .mx-story-grid { grid-template-columns: 1fr 1fr; gap: 3rem; }
}
.mx-story-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5.5vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 0 0 1.4rem;
}
.mx-story-steps { position: relative; min-height: 9.5rem; }
.mx-step {
  position: absolute;
  inset: 0 0 auto 0;
  opacity: 0;
  transform: translateY(24px);
  filter: blur(6px);
  transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), filter 0.35s ease;
  pointer-events: none;
}
.mx-step.is-on { opacity: 1; transform: none; filter: none; transition-delay: 0.08s; pointer-events: auto; }
.mx-step-n { font-variant-numeric: tabular-nums; font-weight: 700; color: #ff8a80; font-size: 0.9rem; }
.mx-step h3 { font-size: clamp(1.4rem, 3.4vw, 2.1rem); font-weight: 800; letter-spacing: -0.025em; margin: 0.35rem 0 0.5rem; }
.mx-step p { color: rgba(255, 255, 255, 0.68); font-size: 1.02rem; line-height: 1.6; max-width: 40ch; margin: 0; }
.mx-story-bar { display: flex; gap: 6px; margin-top: 1.4rem; max-width: 320px; }
.mx-story-bar i {
  position: relative;
  flex: 1;
  height: 3px;
  border-radius: 3px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
}
.mx-story-bar i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #e02e24, #ff7a45);
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
}
.mx-gauge-wrap { perspective: 1100px; display: grid; place-items: center; }
.mx-gauge {
  position: relative;
  width: min(440px, 78vw);
  aspect-ratio: 1;
  transform-style: preserve-3d;
  transform: rotateX(10deg) rotateY(-16deg);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #17181d 0%, #0c0d10 62%, transparent 63%),
    radial-gradient(circle at 50% 50%, transparent 64%, rgba(255, 255, 255, 0.08) 64.5%, transparent 66%);
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}
@media (max-width: 899px) {
  /* La barra de abajo ocupa su lugar: la sección fija se centra en el espacio que queda. */
  .mx-story-sticky {
    height: calc(100vh - var(--header-height, 54px) - var(--bottom-bar-height, 56px) - env(safe-area-inset-bottom, 0px));
    height: calc(100svh - var(--header-height, 54px) - var(--bottom-bar-height, 56px) - env(safe-area-inset-bottom, 0px));
  }
  .mx-gauge { width: min(330px, 80vw); }
  .mx-story-steps { min-height: 8.5rem; }
  .mx-g-read { top: 51%; }
  .mx-g-read b { font-size: 2.1rem; }
  .mx-g-read span { font-size: 0.7rem; }
  .mx-g-odo { bottom: 5%; font-size: 0.66rem; padding: 0.2rem 0.5rem; }
}
.mx-gauge svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mx-g-track { fill: none; stroke: rgba(255, 255, 255, 0.08); stroke-width: 12; stroke-linecap: round; }
.mx-g-fill {
  fill: none;
  stroke: url(#mxGArc);
  stroke-width: 12;
  stroke-linecap: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}
/* Brillo del arco: un trazo ancho y transparente debajo (sin filtros que recalcular) */
.mx-g-glow {
  fill: none;
  stroke: #e02e24;
  stroke-width: 28;
  stroke-linecap: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  opacity: 0.16;
}
.mx-g-major { stroke: rgba(255, 255, 255, 0.85); stroke-width: 3; stroke-linecap: round; }
.mx-g-minor { stroke: rgba(255, 255, 255, 0.35); stroke-width: 1.6; stroke-linecap: round; }
.mx-g-red { stroke: #e02e24; stroke-width: 3; stroke-linecap: round; }
.mx-g-labels text { fill: rgba(255, 255, 255, 0.75); font-size: 15px; font-weight: 600; text-anchor: middle; font-family: var(--font-heading); }
.mx-g-labels .mx-g-red-t { fill: #ff6a5c; }
.mx-g-needle { transform-origin: 200px 205px; transform: rotate(-120deg); }
.mx-g-needle path { fill: #ff3b2f; }
.mx-g-needle .mx-g-needle-glow { fill: rgba(255, 59, 47, 0.28); }
.mx-g-needle circle { fill: #222328; stroke: rgba(255, 255, 255, 0.2); stroke-width: 1.5; }
.mx-g-needle .mx-g-hub { fill: #ff3b2f; stroke: none; }
.mx-g-read {
  position: absolute;
  left: 0;
  right: 0;
  top: 60%;
  text-align: center;
  transform: translateZ(30px);
}
.mx-g-read b {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 7vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.mx-g-read span { font-size: 0.8rem; color: rgba(255, 255, 255, 0.55); }
.mx-g-odo {
  position: absolute;
  left: 50%;
  bottom: 13%;
  transform: translateX(-50%) translateZ(20px);
  padding: 0.3rem 0.7rem;
  border-radius: 8px;
  background: #050507;
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}
.mx-g-odo span { font-variant-numeric: tabular-nums; letter-spacing: 0.18em; color: #fff; font-weight: 700; }
/* Sin movimiento: la sección deja de ser fija y muestra los tres motivos juntos */
.mx-story.is-static { height: auto; }
.mx-story.is-static .mx-story-sticky { position: relative; top: 0; height: auto; padding: 4rem 0; }
.mx-story.is-static .mx-story-steps { min-height: 0; display: grid; gap: 1.4rem; }
.mx-story.is-static .mx-step { position: static; opacity: 1; transform: none; filter: none; }
.mx-story.is-static .mx-story-bar { display: none; }

/* ── 17. Títulos letra por letra ──────────────────────────────────────── */
.mx-chars .mx-cw { display: inline-block; white-space: nowrap; }
.mx-chars .mx-ch {
  display: inline-block;
  transform-origin: 50% 100%;
  transition: transform 0.9s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.5s ease;
  transition-delay: calc(var(--i, 0) * 16ms);
}
.mx-chars.mx-pre .mx-ch {
  opacity: 0;
  transform: perspective(500px) translateY(0.45em) rotateX(-95deg);
}

/* ── 18. Scroll suave (Lenis) ─────────────────────────────────────────── */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }

/* ── 19. Celular: tarjetas en 3D ligadas al scroll ─────────────────────── */
.mx-touch3d .moto-card-modern { animation: none; }
.mx-touch3d .mx-s3d {
  transition: box-shadow 0.3s ease, border-color 0.25s ease, background-color 0.25s ease;
  backface-visibility: hidden;
}
/* Capa propia solo mientras está en pantalla: muchas capas juntas agotan la memoria del teléfono */
.mx-touch3d .mx-s3d.is-live3d { will-change: transform, opacity; }

/* ── 20. Velocímetro: líneas de velocidad ──────────────────────────────── */
.mx-story-streaks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
}
.mx-story-streaks i {
  position: absolute;
  left: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55) 60%, rgba(255, 110, 80, 0.9));
  animation: mxStreak 1s linear infinite;
  will-change: transform;
}
/* A baja velocidad las líneas no se ven: se frenan en vez de animarse invisibles */
.mx-story-streaks.is-idle i { animation-play-state: paused; }
@keyframes mxStreak {
  from { transform: translateX(110vw); }
  to   { transform: translateX(-40vw); }
}
.mx-story-grid { position: relative; z-index: 1; }

/* ── 21. Hero y Nosotros: volumen 3D ──────────────────────────────────── */
[data-page="home"] .simple-hero-title { will-change: transform; }
.mx-about-3d {
  overflow: hidden;
  border-radius: 20px;
  will-change: transform;
}
.mx-about-3d img { scale: 1.08; }

/* Celulares bajos: el velocímetro se achica para que entre con el texto */
@media (max-width: 899px) and (max-height: 720px) {
  .mx-gauge { width: min(250px, 64vw); }
  .mx-story-title { font-size: 1.8rem; margin-bottom: 0.8rem; }
  .mx-story-steps { min-height: 7.6rem; }
  .mx-step p { font-size: 0.92rem; }
  .mx-g-read { top: 58%; }
  .mx-g-read b { font-size: 1.8rem; }
  .mx-g-odo { bottom: 3%; }
}
/* Tablets: el velocímetro aprovecha el ancho */
@media (min-width: 600px) and (max-width: 899px) {
  .mx-gauge { width: min(430px, 58vw); }
  .mx-g-read { top: 56%; }
  .mx-g-read b { font-size: 3rem; }
  .mx-g-odo { bottom: 9%; font-size: 0.78rem; }
}

/* ── 22. Fluidez: pausas y capas baratas ──────────────────────────────── */
/* Animaciones infinitas en pausa fuera de pantalla (.mx-off) o con el popup/ficha abiertos (.mx-paused) */
.mx-off .mx-hero-bg,
.mx-off .btn-hero-red::after,
.mx-off .mx-prize-body,
.mx-off .mx-prize-body::after,
.mx-off .mx-spark,
.mx-off .mx-sorteo-kicker::after,
.mx-off .mx-story-streaks i,
.mx-paused .mx-hero-bg,
.mx-paused .btn-hero-red::after,
.mx-paused .mx-prize-body,
.mx-paused .mx-prize-body::after,
.mx-paused .mx-spark,
.mx-paused .mx-sorteo-kicker::after,
.mx-paused .mx-story-streaks i,
.mx-paused .floating-fab-desktop::before,
.mx-paused .mx-scroll-cue::after {
  animation-play-state: paused;
}
/* La foto del hero ya se mueve sola: el desenfoque va en su propia capa (se dibuja una vez)
   y no como desenfoque del fondo, que se recalculaba en cada cuadro. */
.simple-hero.has-mx-bg .simple-hero-overlay {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
@media (min-width: 769px) {
  /* En compu la foto llevaba desenfoque. Un filtro sobre una capa que se mueve se
     recalcula en cada cuadro, así que la foto se pide ya desenfocada a Cloudinary.
     Si esa versión no cargara, queda visible la foto normal del hero de abajo. */
  .mx-hero-bg {
    background-image: url('https://res.cloudinary.com/di9j6zwyz/image/upload/e_blur:250,q_auto,f_auto/v1789083192/WhatsApp_Image_2026-09-10_at_8.31.32_PM_d0pzl7.jpg');
  }
}
/* Bloques que se abren una vez al entrar (compu) */
.mx-rise {
  opacity: 0;
  transform: translateY(48px) scale(0.96);
}
.mx-rise .promo-poster-img { transform: scale(1.14); }
.mx-rise.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease, transform 1s cubic-bezier(0.23, 1, 0.32, 1);
}
.mx-rise.is-in .promo-poster-img {
  transform: none;
  transition: transform 1.4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* En celular las motos del sorteo ya se mueven con el scroll y el giroscopio:
   sin flotado ni brillo continuo, que sumaban trabajo en cada cuadro. */
@media (max-width: 899px) {
  .mx-prize-body { animation: none; }
  .mx-prize-body::after { animation: none; display: none; }
}

/* ── Accesibilidad: sin movimiento si el usuario lo pide ──────────────── */
@media (prefers-reduced-motion: reduce) {
  html.mx-intro-on::after { content: none; }
  .mx-intro { display: none; }
  .mx-hero-glow, .mx-scroll-cue, .mx-progress, .mx-stage-floor, .mx-spark { display: none; }
  .mx-prize-body, .mx-prize-body::after, .mx-sorteo-kicker::after { animation: none !important; }
  .mx-sorteo { clip-path: none; }
  .mx-ride, .mx-story-streaks { display: none; }
  .mx-sr-ring, .mx-sr-tilt { transition: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  /* Menos movimiento no es cero: las entradas quedan como fundidos cortos. */
  .mx-enter { animation: mxFade 0.4s ease backwards; animation-delay: var(--mx-d, 0ms); }
}
@keyframes mxFade { from { opacity: 0; } }

/* =========================================================================
   23. Hero de la portada — entrada nueva
   Etiqueta que se abre desde el centro, palabras que se levantan en 3D desde su base,
   subtítulo que sube y botones que aparecen con un rebote corto. Durante la intro todo
   queda en pausa y arranca cuando se levanta el telón (antes terminaba escondido detrás).
   ========================================================================= */
html.mx-intro-on [data-page="home"] .simple-hero-tag,
html.mx-intro-on [data-page="home"] .simple-hero-subtitle,
html.mx-intro-on [data-page="home"] .simple-hero-btns > *,
html.mx-intro-on [data-page="home"] .simple-hero-title .mx-word { animation-play-state: paused; }

[data-page="home"] .simple-hero-tag {
  opacity: 1;
  transform: none;
  animation: mxTagIn 1.1s var(--mx-expo-out) 0.1s backwards;
}
@keyframes mxTagIn {
  from { clip-path: inset(0 50% 0 50%); opacity: 0; }
  to   { clip-path: inset(0 0 0 0); opacity: 1; }
}
[data-page="home"] .simple-hero-title.mx-split { perspective: 700px; }
[data-page="home"] .simple-hero-title .mx-word {
  display: inline-block;
  transform-origin: 50% 100%;
  animation: mxWordRise 1.05s var(--mx-expo-out) backwards;
  animation-delay: var(--mx-d, 0ms);
}
@keyframes mxWordRise {
  from { opacity: 0; transform: translate3d(0, 0.6em, 0) rotateX(-80deg); }
}
[data-page="home"] .simple-hero-subtitle {
  opacity: 1;
  transform: none;
  animation: mxHeroUp 0.9s var(--mx-expo-out) 0.8s backwards;
}
@keyframes mxHeroUp { from { opacity: 0; transform: translate3d(0, 16px, 0); } }
[data-page="home"] .simple-hero-btns { opacity: 1; transform: none; animation: none; }
[data-page="home"] .simple-hero-btns > * { animation: mxBtnIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.95s backwards; }
[data-page="home"] .simple-hero-btns > *:nth-child(2) { animation-delay: 1.07s; }
@keyframes mxBtnIn { from { opacity: 0; transform: translate3d(0, 14px, 0) scale(0.9); } }

/* Celular sin giroscopio: el título se balancea en 3D con CSS (lo resuelve la placa de video).
   Si el giroscopio arranca, motion.js saca .mx-sway y el título sigue al teléfono. */
.simple-hero.mx-sway .simple-hero-content { perspective: 900px; }
.simple-hero.mx-sway .simple-hero-title { animation: mxTitleSway 9s ease-in-out infinite alternate; }
@keyframes mxTitleSway {
  0%   { transform: rotateX(3deg) rotateY(-9deg); }
  50%  { transform: rotateX(-2deg) rotateY(1deg); }
  100% { transform: rotateX(2.5deg) rotateY(9deg); }
}
html.mx-intro-on .simple-hero.mx-sway .simple-hero-title,
.mx-off.mx-sway .simple-hero-title,
.mx-paused .simple-hero.mx-sway .simple-hero-title { animation-play-state: paused; }

/* =========================================================================
   24. Efectos ligados al scroll hechos por el navegador (html.mx-sd)
   Sin JS en cada cuadro; en Chrome corren fuera del hilo principal.
   ========================================================================= */
@supports (animation-timeline: view()) {
  /* Al bajar, el texto del hero sube y se apaga, y la foto baja más lento (profundidad). */
  html.mx-sd [data-page="home"] .simple-hero-content {
    animation: mxHeroExit linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 85vh;
  }
  @keyframes mxHeroExit { to { transform: translate3d(0, -48px, 0); opacity: 0.15; } }
  html.mx-sd .simple-hero .mx-hero-bg {
    animation: mxBgParallax linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 100vh;
  }
  html.mx-sd .simple-hero.mx-hero-live .mx-hero-bg {
    animation: mxKenBurns 24s ease-in-out infinite alternate, mxBgParallax linear both;
    animation-timeline: auto, scroll(root block);
    animation-range: normal, 0 100vh;
  }
  @keyframes mxBgParallax { to { translate: 0 70px; } }

  /* Foto del banner: se desplaza apenas dentro de su marco mientras pasa por la pantalla. */
  html.mx-sd .promo-poster-img {
    animation: mxPosterParallax linear both;
    animation-timeline: view();
  }
  @keyframes mxPosterParallax {
    from { translate: 0 -5%; scale: 1.12; }
    to   { translate: 0 5%; scale: 1.04; }
  }

  /* Celular: tarjetas que se levantan en 3D al entrar (las de cada columna se abren hacia afuera). */
  html.mx-touch3d-css .catalog-cards-grid:not(.mx-carousel) .moto-card-modern,
  html.mx-touch3d-css .promo-poster-card,
  html.mx-touch3d-css .cta-strip-inner {
    animation: mxRise3d linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 42%;
    transition: scale 0.16s var(--mx-expo-out), box-shadow 0.3s ease;
  }
  html.mx-touch3d-css .catalog-cards-grid:not(.mx-carousel) .moto-card-modern:nth-child(odd) { --mx-ry: 16deg; }
  html.mx-touch3d-css .catalog-cards-grid:not(.mx-carousel) .moto-card-modern:nth-child(even) { --mx-ry: -16deg; }
  @keyframes mxRise3d {
    from { opacity: 0.35; transform: perspective(1000px) translate3d(0, 50px, -80px) rotateX(34deg) rotateY(var(--mx-ry, 0deg)) scale(0.9); }
    to   { opacity: 1; transform: none; }
  }
  /* Al tocar se hunde (scale se suma al transform de la animación sin pisarlo). */
  html.mx-touch3d-css .moto-card-modern:active,
  html.mx-touch3d-css .promo-poster-card:active { scale: 0.97; }
}

/* =========================================================================
   25. Cinta de marcas en celular: animación CSS continua (sin JS por cuadro)
   ========================================================================= */
.mx-marquee--css .mx-marquee-row { animation: mxMarquee 38s linear infinite; }
.mx-marquee--css .mx-marquee-row + .mx-marquee-row { animation-duration: 46s; animation-direction: reverse; }
@keyframes mxMarquee { to { transform: translate3d(-50%, 0, 0); } }
.mx-off.mx-marquee--css .mx-marquee-row,
.mx-paused .mx-marquee--css .mx-marquee-row { animation-play-state: paused; }

/* =========================================================================
   26. Portada en celular: las motos en un carrusel como el de una app
   Una tarjeta grande por vez que frena en el centro; las de los costados se ven
   giradas y más chicas. El giro lo hace el navegador con el scroll del carrusel.
   ========================================================================= */
@media (max-width: 640px) {
  [data-page="home"] #home-catalog-grid {
    position: relative;
    display: flex;
    gap: 14px;
    margin: 0 -0.85rem;
    padding: 10px 11vw 26px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  [data-page="home"] #home-catalog-grid::-webkit-scrollbar { display: none; }
  [data-page="home"] #home-catalog-grid > * {
    flex: 0 0 78vw;
    max-width: 340px;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
  [data-page="home"] #home-catalog-grid > .moto-card-modern {
    animation: none;
    transform-origin: 50% 60%;
    box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.04);
  }
  /* Tarjetas grandes = textos legibles (en la grilla de 2 columnas eran diminutos) */
  [data-page="home"] #home-catalog-grid .moto-card-body { padding: 0.95rem 1rem 1rem; }
  [data-page="home"] #home-catalog-grid .moto-brand-label,
  [data-page="home"] #home-catalog-grid .moto-category-label { font-size: 0.7rem; }
  [data-page="home"] #home-catalog-grid .moto-title-h3 { font-size: 1.2rem; white-space: normal; margin: 0.15rem 0 0.25rem; }
  [data-page="home"] #home-catalog-grid .moto-tagline { font-size: 0.84rem; -webkit-line-clamp: 2; margin-bottom: 0.7rem; }
  [data-page="home"] #home-catalog-grid .moto-specs-strip { padding: 0.5rem 0.6rem; margin-bottom: 0.8rem; border-radius: 10px; }
  [data-page="home"] #home-catalog-grid .spec-k { font-size: 0.6rem; margin-bottom: 0.18rem; }
  [data-page="home"] #home-catalog-grid .spec-v { font-size: 0.82rem; }
  [data-page="home"] #home-catalog-grid .moto-card-actions { padding-top: 0.75rem; }
  [data-page="home"] #home-catalog-grid .btn-card-whatsapp { font-size: 0.92rem; padding: 0.8rem 0.6rem; }
  [data-page="home"] #home-catalog-grid .moto-badge-tag { top: 0.7rem; left: 0.7rem; font-size: 0.64rem; padding: 0.28rem 0.55rem; border-radius: 6px; }

  /* Lo que se asoma a los costados (la entrada desde la derecha, las tarjetas giradas) no debe
     ensanchar la página: si no, el celular se puede mover de costado. clip no rompe el
     encabezado fijo (hidden sí). */
  [data-page="home"] .simple-catalog { overflow-x: clip; }

  /* Entrada: el carrusel llega deslizándose desde la derecha */
  .mx-carousel.mx-car-pre { opacity: 0; transform: translate3d(30%, 0, 0); }
  .mx-carousel.mx-car-in { animation: mxCarIn 1.05s var(--mx-expo-out) both; }
  @keyframes mxCarIn { from { opacity: 0; transform: translate3d(30%, 0, 0); } }

  /* Puntos: el actual se estira y se pone rojo */
  .mx-car-dots { display: flex; justify-content: center; gap: 6px; margin: -10px 0 8px; }
  .mx-car-dots i {
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.16);
    transition: width 0.4s var(--mx-expo-out), background-color 0.3s ease;
  }
  .mx-car-dots i.is-on { width: 22px; background: var(--mx-red); }
}
@supports (animation-timeline: view()) {
  @media (max-width: 640px) {
    html.mx-sd [data-page="home"] #home-catalog-grid > .moto-card-modern {
      animation: mxCarCard linear both;
      animation-timeline: view(inline);
    }
    @keyframes mxCarCard {
      0%   { transform: perspective(900px) rotateY(-20deg) scale(0.88); opacity: 0.5; }
      50%  { transform: none; opacity: 1; }
      100% { transform: perspective(900px) rotateY(20deg) scale(0.88); opacity: 0.5; }
    }
    html.mx-sd [data-page="home"] #home-catalog-grid > .moto-card-modern:active { scale: 0.97; }
  }
}

/* =========================================================================
   27. Esqueletos mientras cargan las motos (sin saltos cuando llegan)
   ========================================================================= */
.moto-skel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg, 16px);
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding-bottom: 0.9rem;
}
.moto-skel i { display: block; background: #eceef1; }
.moto-skel-img { aspect-ratio: 4 / 3; }
.moto-skel-line { height: 12px; margin: 0.8rem 0.8rem 0; border-radius: 6px; }
.moto-skel-line--short { width: 55%; }
.moto-skel-btn { height: 34px; margin: 0.9rem 0.8rem 0; border-radius: 17px; }
.moto-skel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.7) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: mxSkel 1.3s ease-in-out infinite;
}
@keyframes mxSkel { to { transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
  .moto-skel::after, .simple-hero.mx-sway .simple-hero-title, .mx-marquee--css .mx-marquee-row { animation: none !important; }
  .mx-carousel.mx-car-pre { opacity: 1; transform: none; }
}

/* =========================================================================
   28. Bloques de más abajo: el navegador no los calcula ni dibuja hasta que te acercás
   (antes, al armar la portada, se calculaba el diseño de toda la página de una).
   El tamaño estimado evita que la barra de scroll salte.
   ========================================================================= */
[data-page="home"] .mx-showroom,
[data-page="home"] .mx-sorteo,
[data-page="home"] .promo-poster-section,
[data-page="home"] .simple-footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}
[data-page="home"] .simple-footer { contain-intrinsic-size: auto 420px; }