/* =====================================================================================================================
   milano-motion.css · Miami Import v2 — la capa de movimiento («El viaje MXP → EZE»)
   Va con static/js/milano-motion.js. Contrato: CORECCION WEB/SPEC_RELANZAMIENTO.md §1-2.

   1. Lenis
   2. Pre-ocultado (SÓLO bajo html.mx-motion y sin movimiento reducido)
   3. Palabras (la máscara)
   4. La carta (mecánica 3D del giro; el aspecto es de milano.css)
   5. Expandir: el visor de mira
   6. Caer (bodegón)
   7. El gusano: capas, tramos, cabeza, estela, km y HUD
   8. Movimiento reducido: todo a la vista

   Sin !important. Los colores salen de los tokens de milano.css (con respaldo por si esta hoja carga sola).
   ===================================================================================================================== */

/* 1. Lenis ------------------------------------------------------------------------------------------------------------
   Con Lenis prendido no puede haber scroll-behavior:smooth (suaviza también los scrollTo de Lenis). */
html.lenis,
html.lenis body {
  height: auto;
}
html.lenis.lenis-smooth {
  scroll-behavior: auto;
}
html.lenis.lenis-smooth iframe {
  pointer-events: none;
}
html.lenis.lenis-stopped {
  overflow: clip;
}
html.lenis [data-lenis-prevent],
html.lenis [data-lenis-prevent-wheel],
html.lenis [data-lenis-prevent-touch] {
  overscroll-behavior: contain;
}

/* 2. Pre-ocultado ------------------------------------------------------------------------------------------------------
   html.mx-motion lo pone el <head> si NO hay movimiento reducido; si el motor no arranca en 3 s, el rescate la saca y
   se ve todo. El JS marca .mx-surgido lo que toma (o suelta), y desde ahí manda él con valores finales explícitos.
   Sólo opacidad / recorte: nunca un transform que pise el del propio elemento. Nada adentro de [data-sin-surge]
   (el primer banner, el LCP) se esconde. */
@media (prefers-reduced-motion: no-preference) {
  html.mx-motion [data-surge='subir']:not(.mx-surgido):not([data-sin-surge] *),
  html.mx-motion [data-surge='caer']:not(.mx-surgido):not([data-sin-surge] *),
  html.mx-motion [data-surge='cartas'] .mx-card:not(.mx-surgido):not([data-sin-surge] *) {
    opacity: 0;
  }
  html.mx-motion [data-surge='palabras']:not(.mx-partido):not([data-sin-surge] *) {
    visibility: hidden;
  }
  html.mx-motion [data-surge='palabras']:not(.mx-surgido):not([data-sin-surge] *) .mx-palabra__in {
    transform: translate3d(0, 112%, 0);
  }
  html.mx-motion [data-surge='foto']:not(.mx-surgido):not([data-sin-surge] *) {
    clip-path: inset(18% 14% 18% 14% round 32px);
  }
  html.mx-motion [data-surge='foto']:not(.mx-surgido):not([data-sin-surge] *) img:not([data-parallax]):not([data-parallax] *),
  html.mx-motion [data-surge='foto']:not(.mx-surgido):not([data-sin-surge] *) video:not([data-parallax]):not([data-parallax] *) {
    transform: scale(1.28);
  }
  html.mx-motion [data-surge='expandir']:not(.mx-surgido):not([data-sin-surge] *) {
    clip-path: inset(12% 22.5% 12% 22.5% round 28px);
  }
  html.mx-motion [data-surge='cartas'] .mx-card:not(.mx-surgido):not([data-sin-surge] *) .mx-card__carta {
    transform: rotateY(180deg);
  }
}

/* 3. Palabras ---------------------------------------------------------------------------------------------------------
   Cada palabra sube desde abajo de su máscara. El padding de abajo evita cortar las colas (g, j, p); el de la derecha,
   la inclinación de la itálica de Instrument Serif. */
.mx-palabra {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}
.mx-palabra--italica {
  padding-right: 0.14em;
  margin-right: -0.14em;
}
.mx-palabra__in {
  display: inline-block;
}
.mx-cifra {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* 4. La carta ---------------------------------------------------------------------------------------------------------
   El giro 3D va SÓLO dentro de cada carta (perspectiva en su contenedor), nunca entre cartas (Safari del iPhone).
   El overflow:hidden va en las caras, nunca en el elemento preserve-3d (lo aplana). Mientras el motor corre, el giro
   lo maneja GSAP: una transición CSS encima lo trabaría. */
.mx-card .mx-card__carta {
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  overflow: visible;
}
.mx-card__cara {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.mx-card__cara--dorso {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
}
.mx-card__cara--dorso img:not([src]) {
  visibility: hidden; /* la 2ª foto todavía en data-src: se ve el dorso de marca */
}
html.mx-motor .mx-card .mx-card__carta {
  transition: none;
}
/* con el motor andando, el giro por :hover de milano.css se apaga: lo hace GSAP por la posición del puntero, con
   rebote (si quedara el :hover, la carta saltaría a 180° antes del tween) */
@media (hover: hover) and (pointer: fine) {
  html.mx-motor .mx-card[data-carta]:hover .mx-card__carta {
    transform: none;
  }
}

/* data-magnetico: el transform lo mueve GSAP (quickTo) en cada cuadro. Si .mx-btn conserva su `transition: transform`
   (milano.css), el navegador interpola cada paso del tween y el botón queda gelatinoso. Con el motor andando, el
   botón y su flecha transicionan todo MENOS el transform. */
html.mx-motor [data-magnetico] {
  transition-property: color, border-color, opacity, background-color;
}
html.mx-motor [data-magnetico] svg {
  transition: none;
}

/* 5. Expandir: el visor de mira ---------------------------------------------------------------------------------------
   Cuatro esquinas que siguen al recorte mientras la foto se abre, y una línea de escaneo. Sólo en compu. */
.mx-visor {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.mx-visor__esq {
  position: absolute;
  width: 20px;
  height: 20px;
  will-change: transform;
}
.mx-visor__esq svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.mx-visor__esq--tl {
  left: 12px;
  top: 12px;
}
.mx-visor__esq--tr {
  right: 12px;
  top: 12px;
}
.mx-visor__esq--tr svg {
  transform: scaleX(-1);
}
.mx-visor__esq--bl {
  left: 12px;
  bottom: 12px;
}
.mx-visor__esq--bl svg {
  transform: scaleY(-1);
}
.mx-visor__esq--br {
  right: 12px;
  bottom: 12px;
}
.mx-visor__esq--br svg {
  transform: scale(-1, -1);
}
.mx-visor__fondo {
  fill: none;
  stroke: var(--mx-papel, #faf8f4);
  stroke-width: 3.6;
  stroke-linecap: square;
}
.mx-visor__linea {
  fill: none;
  stroke: var(--mx-tinta, #141210);
  stroke-width: 1.5;
  stroke-linecap: square;
}
.mx-visor__scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--mx-papel, #faf8f4);
  box-shadow:
    0 0 0 0.5px rgba(20, 18, 16, 0.35),
    0 -14px 28px 2px rgba(250, 248, 244, 0.32);
  opacity: 0;
  will-change: transform, opacity;
}

/* 6. Caer (bodegón) ---------------------------------------------------------------------------------------------------
   Las prendas caen sobre el mármol sin pisar su transform propio (la rotación de cada una): el motor anima estas
   variables, que se suman como translate/rotate/scale individuales. */
[data-surge='caer'] {
  translate: 0 var(--mx-caer-y, 0px);
  rotate: var(--mx-caer-r, 0deg);
  scale: var(--mx-caer-s, 1);
}

/* 7. El gusano --------------------------------------------------------------------------------------------------------
   Capas (milano-home.css): fondo del bloque < [data-gusano] z 2 (el trazo) < contenido del bloque z 3 (.mh-blq__in,
   rieles, banda de Diesel) < .mx-gusano-frente z 4 (cabeza, estela, km, HUD; la crea el JS) < header 40 < Mia 45 <
   drawer/modales 60. Las dos capas son absolutas sobre el <main> y scrollean con la página. */
.mx-gusano,
.mx-gusano-frente {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
  color: var(--mx-tinta, #141210);
}
.mx-gusano {
  z-index: 2;
}
.mx-gusano-frente {
  z-index: 4;
}
.mx-gusano--vacio {
  display: none;
}
.mx-gusano__lienzo {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  color: var(--mx-tinta, #141210);
}

/* la ruta de vuelo que falta: guiones finos al 25 % */
.mx-gusano .mx-gusano__futuro {
  fill: none;
  stroke: var(--mx-tinta, #141210);
  stroke-opacity: 0.38;
  stroke-width: 1.6;
  stroke-dasharray: 6 9;
}
/* el halo: un borde suave color papel (se lee sobre arena, sobre papel y sobre el fondo noche de Diesel) */
.mx-gusano .mx-gusano__halo {
  fill: none;
  stroke: var(--mx-papel, #faf8f4);
  stroke-opacity: 0.8;
  stroke-width: 16;
  stroke-linejoin: round;
}
/* el trazo recorrido: 6 px tinta (4 en el celu). Juani: «más excesivo, más futurista» — con 3 px pasaba desapercibido */
.mx-gusano .mx-gusano__trazo {
  fill: none;
  stroke: var(--mx-tinta, #141210);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* la estela: los últimos ~180 px se desvanecen hacia atrás (degradé a lo largo de la ruta) */
.mx-gusano__estela {
  fill: none;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mx-gusano__estela--glow {
  stroke-width: 38;
  stroke-opacity: 0.22;
}

/* la cabeza: una cápsula luminosa (núcleo papel con aro tinta) con un halo difuso arena; el punto adelante es el
   frente (va orientada por la tangente de la ruta). Por cuadro sólo cambia su transform. */
.mx-gusano__cabeza {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: 0;
  height: 0;
  will-change: transform;
}
.mx-gusano__cabeza::before {
  content: '';
  position: absolute;
  left: -64px;
  top: -64px;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(250, 248, 244, 0.96) 0%,
    rgba(236, 229, 216, 0.82) 32%,
    rgba(20, 18, 16, 0.12) 62%,
    rgba(20, 18, 16, 0) 100%
  );
}
.mx-gusano__cabeza::after {
  content: '';
  position: absolute;
  left: -22px;
  top: -22px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--mx-tinta, #141210);
  opacity: 0;
  animation: mx-gusano-pulso 1.9s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
.mx-gusano__nucleo {
  position: absolute;
  left: -21px;
  top: -10px;
  width: 42px;
  height: 20px;
  border-radius: 999px;
  background: var(--mx-papel, #faf8f4);
  box-shadow:
    0 0 0 1.5px var(--mx-tinta, #141210),
    0 0 0 4.5px rgba(250, 248, 244, 0.78),
    0 8px 18px -6px rgba(20, 18, 16, 0.5);
}
.mx-gusano__nucleo::after {
  content: '';
  position: absolute;
  right: 5px;
  top: 5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--mx-tinta, #141210);
}
@keyframes mx-gusano-pulso {
  0% {
    transform: scale(0.55);
    opacity: 0.5;
  }
  100% {
    transform: scale(2.3);
    opacity: 0;
  }
}

/* el contador de km: una etiqueta sobre la ruta, adelante de la cabeza (el JS la orienta por la tangente) */
.mx-gusano__km {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  min-width: 10ch;
  padding: 4px 7px 3px;
  border: 1px solid var(--mx-linea, rgba(20, 18, 16, 0.12));
  border-radius: 999px;
  background: rgba(250, 248, 244, 0.94);
  color: var(--mx-tinta, #141210);
  font: 500 10px/1 var(--f-mono, 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  transform-origin: 50% 50%;
  will-change: transform;
}

/* antes de salir de MXP no hay cabeza; al aterrizar en EZE se va el contador */
.mx-gusano--antes .mx-gusano__cabeza,
.mx-gusano--antes .mx-gusano__km,
.mx-gusano--antes .mx-gusano__estela,
.mx-gusano--quieto .mx-gusano__cabeza,
.mx-gusano--quieto .mx-gusano__km,
.mx-gusano--quieto .mx-gusano__estela,
.mx-gusano--llego .mx-gusano__km {
  display: none;
}

/* HUD: Geist Mono 11 px, mayúsculas espaciadas */
.mx-gusano__hud {
  position: absolute;
  inset: 0;
  font: 500 11px/1.25 var(--f-mono, 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--mx-tinta, #141210);
}
.mx-gusano__rotulo {
  display: inline-block;
  white-space: nowrap;
}
.mx-gusano__codigo {
  font-weight: 500;
  letter-spacing: 0.16em;
}
.mx-gusano__sub {
  display: block;
  margin-top: 4px;
  color: var(--mx-gris, #77716a);
  font-size: 10px;
}

/* puertos: MXP (salida) y EZE (aterrizaje) */
.mx-gusano__puerto {
  position: absolute;
  width: 0;
  height: 0;
}
.mx-gusano__aro {
  position: absolute;
  left: -6px;
  top: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid var(--mx-tinta, #141210);
  background: var(--mx-papel, #faf8f4);
  box-sizing: border-box;
}
.mx-gusano__aro::after {
  content: '';
  position: absolute;
  inset: 2.5px;
  border-radius: 50%;
  background: var(--mx-tinta, #141210);
}
.mx-gusano__puerto .mx-gusano__rotulo {
  position: absolute;
  left: 16px;
  top: -7px;
  padding: 5px 8px 4px;
  border: 1px dashed var(--mx-tinta, #141210);
  border-radius: 4px;
  background: rgba(250, 248, 244, 0.94);
}
.mx-gusano__puerto--der .mx-gusano__rotulo {
  left: auto;
  right: 16px;
  text-align: right;
}
/* EZE: el destino se ve desde el principio, apagado; al aterrizar se enciende */
.mx-gusano__puerto--eze {
  opacity: 0.42;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.mx-gusano__puerto--eze .mx-gusano__aro::after {
  transform: scale(0);
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mx-gusano__puerto--eze.is-visto {
  opacity: 1;
}
.mx-gusano__puerto--eze.is-visto .mx-gusano__aro::after {
  transform: scale(1);
}

/* marcadores de cruce «+ 02 / NUEVOS INGRESOS»: aparecen cuando pasa la cabeza */
.mx-gusano__marca {
  position: absolute;
  width: 0;
  height: 0;
}
.mx-gusano__cruz {
  position: absolute;
  left: -6px;
  top: -6px;
  width: 12px;
  height: 12px;
  opacity: 0;
  transform: scale(0.4) rotate(-45deg);
  transition:
    opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.mx-gusano__cruz::before,
.mx-gusano__cruz::after {
  content: '';
  position: absolute;
  background: var(--mx-tinta, #141210);
}
.mx-gusano__cruz::before {
  left: 5.5px;
  top: 0;
  width: 1px;
  height: 12px;
}
.mx-gusano__cruz::after {
  left: 0;
  top: 5.5px;
  width: 12px;
  height: 1px;
}
.mx-gusano__marca .mx-gusano__rotulo {
  position: absolute;
  left: 0;
  top: 12px;
  padding: 4px 8px 3px;
  border: 1px solid var(--mx-linea, rgba(20, 18, 16, 0.12));
  border-radius: 999px;
  background: rgba(250, 248, 244, 0.9);
  color: var(--mx-tinta-2, #3a3631);
  opacity: 0;
  transform: translate3d(-50%, 8px, 0);
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.mx-gusano__marca.is-visto .mx-gusano__cruz {
  opacity: 1;
  transform: none;
}
.mx-gusano__marca.is-visto .mx-gusano__rotulo {
  opacity: 1;
  transform: translate3d(-50%, 0, 0);
}

/* celu: trazo de 2 px, cabeza más chica, HUD más chico */
@media (max-width: 767px) {
  .mx-gusano .mx-gusano__trazo {
    stroke-width: 2;
  }
  .mx-gusano .mx-gusano__halo {
    stroke-width: 6;
  }
  .mx-gusano__estela {
    stroke-width: 3;
  }
  .mx-gusano__estela--glow {
    stroke-width: 11;
  }
  .mx-gusano__cabeza::before {
    left: -26px;
    top: -26px;
    width: 52px;
    height: 52px;
  }
  .mx-gusano__nucleo {
    left: -9px;
    top: -4.5px;
    width: 18px;
    height: 9px;
  }
  .mx-gusano__nucleo::after {
    right: 2px;
    top: 2px;
    width: 5px;
    height: 5px;
  }
  .mx-gusano__km {
    font-size: 9px;
    padding: 3px 6px 2px;
  }
  .mx-gusano__hud {
    font-size: 9.5px;
    letter-spacing: 0.1em;
  }
  .mx-gusano__sub {
    font-size: 9px;
  }
  .mx-gusano__marca .mx-gusano__rotulo {
    max-width: calc(100vw - 48px);
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* 8. Movimiento reducido ----------------------------------------------------------------------------------------------
   Nada se esconde (el pre-ocultado de arriba sólo existe sin reducido), la ruta queda dibujada entera, sin cabeza,
   sin pulso, sin visor; los marcadores y EZE a la vista. */
@media (prefers-reduced-motion: reduce) {
  .mx-gusano__cabeza,
  .mx-gusano__km,
  .mx-gusano__estela,
  .mx-gusano .mx-gusano__futuro,
  .mx-visor {
    display: none;
  }
  .mx-gusano__cabeza::after {
    animation: none;
  }
  .mx-gusano__cruz,
  .mx-gusano__marca .mx-gusano__rotulo,
  .mx-gusano__puerto--eze,
  .mx-gusano__puerto--eze .mx-gusano__aro::after {
    transition: none;
  }
  .mx-gusano__marca .mx-gusano__cruz {
    opacity: 1;
    transform: none;
  }
  .mx-gusano__marca .mx-gusano__rotulo {
    opacity: 1;
    transform: translate3d(-50%, 0, 0);
  }
  .mx-gusano__puerto--eze {
    opacity: 1;
  }
  .mx-gusano__puerto--eze .mx-gusano__aro::after {
    transform: none;
  }
  [data-surge='caer'] {
    translate: none;
    rotate: none;
    scale: none;
  }
  .mx-palabra__in {
    transform: none;
  }
}

/* celu: el gusano sigue siendo protagonista, un punto más fino */
@media (max-width: 767px) {
  .mx-gusano .mx-gusano__trazo { stroke-width: 4; }
  .mx-gusano .mx-gusano__halo { stroke-width: 11; }
  .mx-gusano__estela { stroke-width: 5; }
  .mx-gusano__estela--glow { stroke-width: 24; }
  .mx-gusano__cabeza::before { left: -46px; top: -46px; width: 92px; height: 92px; }
  .mx-gusano__nucleo { left: -16px; top: -8px; width: 32px; height: 16px; }
}