/* =========================================================================
   milano.css — sistema de diseño de la tienda nueva (shell v2)
   Miami Import · relanzamiento oct-2026 · dueño: agente FRONT-SHELL

   La decisión fuerte: el "pase de abordar" MXP → EZE. Una etiqueta de
   equipaje con borde punteado que se repite como sello (marquesina, header,
   dorso de las cartas, ficha, footer, 404). Todo lo demás es silencio:
   papel, arena y tinta, una sola tipografía (Geist), la mono para los datos
   y la Instrument Serif itálica SOLO en una palabra de acento.

   Reglas de la casa que este archivo respeta (no "mejorar" sin leerlas):
   · Mobile-first: lo base es el celu; las media queries son min-width.
   · Ancho completo: el contenedor es la pantalla entera con margen lateral
     var(--mx-gutter). Sólo los textos largos van en .mx-lectura (68ch).
   · Sin banderas de importancia. Sin fondos fijos al scroll. Sin mix-blend.
   · 3D sólo DENTRO de cada carta. Nunca overflow:hidden en el elemento con
     preserve-3d (lo aplana). Backface hidden con prefijo -webkit-.
   · Nada se pre-oculta acá: lo que espera al motor de movimiento vive en
     milano-motion.css, colgado de html.mx-motion (con rescate a los 3 s).
   · El scroll suave nativo de CSS NO va: el scroll suave lo hace Lenis, y los dos
     juntos fueron lo que "trababa la ruedita" en la web vieja.

   Escala de capas (z-index): contenido 1 · gusano 2 · header 40 ·
   barra fija de la ficha 44 · Mia 45 · aviso 50 · drawer/modales 60.

   Índice
     1. Tokens            9. Footer               17. Banners (mecánica)
     2. Reset             10. Mia                 18. Ficha de producto
     3. Tipografía        11. Tarjeta (.mx-card)  19. Modal propio
     4. Utilidades        12. Precio y talles     20. Aviso (toast)
     5. Botones y links   13. Listado y filtros   21. Buscador y 404
     6. Pase de abordar   14. Grilla              22. Formularios
     7. Marquesina        15. Carrusel            23. Movimiento reducido
     8. Header y menú     16. Cinta
   ========================================================================= */

/* 1. TOKENS ================================================================ */
:root{
  --mx-arena:#ECE5D8;      /* fondo arena del mentor: banners, bodegón, bloques alternos */
  --mx-arena-2:#E3DACA;    /* arena un tono más profundo (bordes de bloques, hover) */
  --mx-papel:#FAF8F4;      /* fondo base de la página */
  --mx-blanco:#FFFFFF;     /* sólo superficies de tarjeta/fotos de producto */
  --mx-tinta:#141210;      /* texto, botones negros redondeados, footer */
  --mx-tinta-2:#3A3631;    /* texto secundario fuerte */
  --mx-gris:#77716A;       /* secundario (4,6:1 sobre papel; sobre arena usar tinta-2) */
  --mx-linea:rgba(20,18,16,.12);  /* hairlines 1px */
  --mx-noche:#151311;      /* footer oscuro */
  --mx-sale:#C42A1F;       /* SOLO Sale, precio de oferta y "Última unidad" */
  --mx-ok:#2E9B57;         /* sólo el punto "en línea" de Mia */
  --mx-gutter:clamp(16px,2.8vw,40px);
  --mx-radio:14px;  --mx-radio-lg:22px;  --mx-pill:999px;
  --mx-ease:cubic-bezier(.16,1,.3,1);   /* expo out */
  --mx-header-h:60px;      /* celu; 76px en compu (ver más abajo) */
  --mx-adbar-h:34px;
  --mx-bottom-bar:0px;     /* la ficha en celu lo sube a la altura de su barra fija; Mia lo usa */
  --f-sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --f-mono:"Geist Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --f-serif:"Instrument Serif","Times New Roman",serif;  /* SOLO itálica de acento en una palabra */

  /* Derivados (no son decisiones nuevas: son las de arriba en otra intensidad) */
  --mx-linea-2:rgba(20,18,16,.22);
  --mx-linea-clara:rgba(250,248,244,.16);
  --mx-tinta-velo:rgba(20,18,16,.42);
  --mx-ease-rebote:cubic-bezier(.3,1.25,.4,1);   /* el giro de la carta (Achalay) */
  --mx-ease-io:cubic-bezier(.65,0,.35,1);
  --mx-sombra:0 1px 0 rgba(20,18,16,.04),0 18px 40px -24px rgba(20,18,16,.32);
  --mx-sombra-alta:0 2px 6px rgba(20,18,16,.05),0 40px 90px -40px rgba(20,18,16,.45);
}
@media (min-width:768px){ :root{ --mx-adbar-h:36px; } }
@media (min-width:1200px){ :root{ --mx-header-h:76px; } }

/* 2. RESET ================================================================= */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  /* Red de seguridad contra el desborde horizontal: `clip` (no `hidden`)
     porque no crea contenedor de scroll y no rompe el sticky del header.
     La maqueta igual tiene que dar 0 px de desborde sin esto. */
  overflow-x:clip;
  scroll-padding-top:calc(var(--mx-header-h) + 16px);
  -webkit-tap-highlight-color:transparent;
}
/* El fondo va en el body, NUNCA en html: una capa con z-index negativo (el
   gusano, un lienzo) queda tapada por el fondo de html. */
body{
  margin:0;min-height:100svh;overflow-x:clip;
  background:var(--mx-papel);color:var(--mx-tinta);
  font-family:var(--f-sans);font-size:16px;line-height:1.55;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:"ss01" on,"cv11" on;
  padding-bottom:var(--mx-bottom-bar);
}
img,svg,video,canvas,picture{display:block;max-width:100%}
img,video{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;
  -webkit-appearance:none;appearance:none;text-align:inherit}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0}
h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.1;letter-spacing:-.02em}
strong,b{font-weight:600}
summary{cursor:pointer}
dialog{color:inherit}
::selection{background:var(--mx-tinta);color:var(--mx-papel)}

/* Foco visible en todo lo que se toca con teclado (nunca se saca sin reemplazo) */
:focus-visible{outline:2px solid var(--mx-tinta);outline-offset:3px;border-radius:6px}

/* Bloqueo del fondo cuando hay un drawer/Mia/modal abierto.
   🔴 iOS Safari ignora overflow:hidden en el body: el fondo se sigue moviendo
   con el dedo. La única forma que anda es sacarlo del flujo con
   position:fixed, guardando y devolviendo el scroll (lo hace milano.js). En
   compu alcanza con cortar el overflow de html (sin salto de la barra: el JS
   compensa el ancho del scrollbar). */
html.mx-sin-scroll{overflow:hidden}
body.mx-bloqueado{position:fixed;left:0;right:0;width:100%;overflow:hidden}
html.mia-lock body{overflow:hidden}
/* Lenis (lo arranca milano-motion.js, colgado del ticker de GSAP). Las reglas
   base van acá para que valgan en cualquier página, cargue o no milano-motion.css. */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth iframe{pointer-events:none}
[data-lenis-prevent]{overscroll-behavior:contain}

/* 3. TIPOGRAFÍA ============================================================ */
.mx-h1{font-weight:800;font-size:clamp(36px,5.6vw,88px);line-height:.96;letter-spacing:-.04em}
.mx-h2{font-weight:800;font-size:clamp(30px,4vw,60px);line-height:1;letter-spacing:-.035em}
.mx-h3{font-weight:700;font-size:clamp(20px,1.7vw,26px);line-height:1.15;letter-spacing:-.02em}
/* La palabra de acento: Instrument Serif itálica. Un toque más grande porque
   su ojo medio es más bajo que el de Geist; sin negrita (no la tiene). */
.mx-acento{font-family:var(--f-serif);font-style:italic;font-weight:400;
  letter-spacing:-.01em;font-size:1.08em;line-height:inherit}
.mx-mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.mx-eyebrow{font-family:var(--f-mono);font-size:11.5px;font-weight:500;line-height:1.3;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mx-gris);font-variant-numeric:tabular-nums}
.mx-cuerpo{font-size:16px;line-height:1.7;color:var(--mx-tinta-2)}
.mx-cuerpo p+p{margin-top:.9em}
.mx-num{font-variant-numeric:tabular-nums}

/* 4. UTILIDADES ============================================================ */
.mx-contenedor{width:100%;padding-inline:var(--mx-gutter)}
.mx-lectura{max-width:68ch}
.mx-bloque{padding-block:clamp(56px,8vw,128px)}
.mx-fondo-papel{background:var(--mx-papel)}
.mx-fondo-arena{background:var(--mx-arena)}
.mx-fondo-noche{background:var(--mx-noche);color:var(--mx-papel)}
.mx-main{position:relative;display:block}
.mx-main:focus{outline:none}
.mx-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.mx-ico{width:20px;height:20px;flex:none}
.mx-lista-limpia{list-style:none;margin:0;padding:0}

/* Encabezado de bloque con su "Ver todo" a la derecha (lo usan home y ficha) */
.mx-cabecera{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 24px;
  flex-wrap:wrap;padding-inline:var(--mx-gutter);margin-bottom:clamp(20px,2.6vw,40px)}
.mx-cabecera__textos{display:grid;gap:10px;min-width:0}

/* Saltar al contenido: el primer Tab de la página */
.mx-saltar{position:absolute;left:var(--mx-gutter);top:-80px;z-index:70;
  background:var(--mx-tinta);color:var(--mx-papel);padding:12px 18px;border-radius:var(--mx-pill);
  font-weight:600;font-size:14px;transition:top .25s var(--mx-ease)}
.mx-saltar:focus{top:10px}

/* Migas: dónde estás (Inicio / Hombre / Remeras) */
.mx-migas{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;margin:0;padding:0;
  list-style:none;font-size:13px;line-height:1.4;color:var(--mx-gris)}
.mx-migas li{display:inline-flex;align-items:center;min-width:0}
.mx-migas li+li::before{content:"/";margin:0 8px;color:var(--mx-linea-2)}
.mx-migas a{transition:color .2s}
.mx-migas a:hover{color:var(--mx-tinta)}
.mx-migas [aria-current]{color:var(--mx-tinta-2);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;max-width:46ch}

/* 5. BOTONES Y LINKS ======================================================= */
.mx-btn{
  --btn-bg:var(--mx-tinta);--btn-fg:var(--mx-papel);--btn-borde:var(--mx-tinta);--btn-relleno:var(--mx-tinta-2);
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:52px;padding:0 26px;border-radius:var(--mx-pill);
  background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-borde);
  font-family:var(--f-sans);font-weight:600;font-size:15px;line-height:1;letter-spacing:-.005em;
  white-space:nowrap;text-decoration:none;cursor:pointer;user-select:none;
  transition:color .4s var(--mx-ease),border-color .4s var(--mx-ease),transform .35s var(--mx-ease),opacity .25s;
}
/* El relleno que barre de izquierda a derecha al pasar el mouse */
.mx-btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--btn-relleno);
  transform:scaleX(0);transform-origin:right center;transition:transform .6s var(--mx-ease)}
.mx-btn__flecha{width:18px;height:18px;flex:none;transition:transform .5s var(--mx-ease)}
.mx-btn:active{transform:scale(.98)}
.mx-btn:disabled,.mx-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;transform:none}
.mx-btn--claro{--btn-bg:var(--mx-papel);--btn-fg:var(--mx-tinta);--btn-borde:var(--mx-linea-2);--btn-relleno:var(--mx-arena)}
.mx-btn--blanco{--btn-bg:var(--mx-papel);--btn-fg:var(--mx-tinta);--btn-borde:var(--mx-papel);--btn-relleno:var(--mx-arena)}
.mx-btn--bloque{display:flex;width:100%}
.mx-btn--chico{min-height:42px;padding:0 18px;font-size:14px}
.mx-btn--grande{min-height:60px;font-size:14px;letter-spacing:.12em;text-transform:uppercase}
@media (hover:hover) and (pointer:fine){
  .mx-btn:hover::before{transform:scaleX(1);transform-origin:left center}
  .mx-btn:hover .mx-btn__flecha{transform:translateX(4px)}
  .mx-btn:disabled:hover::before{transform:scaleX(0)}
}
@media (min-width:1000px){ .mx-btn{min-height:48px} .mx-btn--grande{min-height:58px} }

/* Link con flecha: subrayado de 1px que se retira al pasar el mouse */
.mx-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;
  padding-bottom:3px;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;
  transition:background-size .5s var(--mx-ease),background-position 0s .5s}
.mx-link .mx-ico{width:16px;height:16px;transition:transform .5s var(--mx-ease)}
@media (hover:hover){
  .mx-link:hover{background-size:0 1px;background-position:100% 100%;transition:background-size .5s var(--mx-ease)}
  .mx-link:hover .mx-ico{transform:translateX(4px)}
}

/* 6. PASE DE ABORDAR ====================================================== */
/* El sello de la marca: MXP → EZE | AUTENTICIDAD GARANTIZADA. Borde punteado
   de 1px y dos celdas separadas por un corte también punteado, con los
   troqueles (las mordidas) del ticket arriba y abajo del corte. --pase-fondo
   tiene que ser el color de lo que hay detrás para que la mordida se vea. */
.mx-pase{
  --pase-tinta:var(--mx-tinta);--pase-fondo:var(--mx-papel);
  display:inline-flex;align-items:stretch;max-width:100%;
  margin:0;font-family:var(--f-mono);font-size:12px;font-weight:500;line-height:1;
  letter-spacing:.14em;text-transform:uppercase;color:var(--pase-tinta);
  border:1px dotted var(--pase-tinta);border-radius:6px;font-variant-numeric:tabular-nums;
}
.mx-pase__celda{position:relative;display:inline-flex;align-items:center;gap:8px;
  padding:10px 13px;white-space:nowrap;min-width:0}
.mx-pase__celda+.mx-pase__celda{border-left:1px dotted var(--pase-tinta)}
.mx-pase__celda+.mx-pase__celda::before,
.mx-pase__celda+.mx-pase__celda::after{content:"";position:absolute;left:-5px;width:9px;height:9px;
  border-radius:50%;background:var(--pase-fondo)}
.mx-pase__celda+.mx-pase__celda::before{top:-5px}
.mx-pase__celda+.mx-pase__celda::after{bottom:-5px}
.mx-pase__avion{width:14px;height:14px}
.mx-pase__flecha{display:inline-block;font-family:var(--f-sans);letter-spacing:0;opacity:.8}
.mx-pase--claro{--pase-tinta:var(--mx-papel);--pase-fondo:var(--mx-noche)}
.mx-pase--arena{--pase-fondo:var(--mx-arena)}
.mx-pase--blanco{--pase-fondo:var(--mx-blanco)}
/* En celu una celda larga se corta con puntos suspensivos antes que desbordar */
@media (max-width:420px){
  .mx-pase{font-size:11px;letter-spacing:.1em}
  .mx-pase__celda{padding:9px 10px}
  .mx-pase__celda:last-child{overflow:hidden;text-overflow:ellipsis;display:block;line-height:1}
}

/* 7. MARQUESINA (barra de anuncios) ======================================== */
.mx-adbar{position:relative;z-index:41;display:flex;align-items:center;
  height:var(--mx-adbar-h);overflow:hidden;background:var(--mx-tinta);color:var(--mx-papel);
  font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  user-select:none;-webkit-user-select:none;cursor:default}
.mx-adbar__pista{display:flex;flex:none;width:max-content;will-change:transform;
  animation:mx-marquesina var(--mx-adbar-dur,64s) linear infinite}
.mx-adbar__grupo{display:flex;align-items:center;flex:none;margin:0;padding:0;list-style:none}
/* El espacio va ADENTRO de cada ítem (no `gap`): así la mitad exacta de la
   pista es un período y el loop no da un saltito. */
.mx-adbar__item{display:inline-flex;align-items:center;white-space:nowrap}
.mx-adbar__item::after{content:"";flex:none;width:4px;height:4px;margin:0 20px;border-radius:50%;
  background:currentColor;opacity:.45}
.mx-adbar__item a{text-decoration:underline;text-decoration-color:rgba(250,248,244,.35);
  text-underline-offset:4px;transition:text-decoration-color .25s}
.mx-adbar__item a:hover{text-decoration-color:currentColor}
/* La promo entra primera, en rojo: pastilla roja con texto papel (5,5:1). */
.mx-adbar__item--promo span,.mx-adbar__item--promo a{display:inline-flex;align-items:center;
  height:22px;padding:0 10px;border-radius:var(--mx-pill);background:var(--mx-sale);color:var(--mx-blanco);
  font-weight:600;text-decoration:none}
.mx-adbar__pausa{position:absolute;right:0;top:0;bottom:0;z-index:1;display:flex;align-items:center;
  justify-content:center;width:40px;background:var(--mx-tinta);color:var(--mx-papel);opacity:.75;
  box-shadow:-14px 0 14px -4px var(--mx-tinta)}
.mx-adbar__pausa .mx-ico{width:14px;height:14px}
.mx-adbar__pausa:hover{opacity:1}
.mx-adbar__pausa .mx-ico--play{display:none}
.mx-adbar.is-pausada .mx-adbar__pausa .mx-ico--pausa{display:none}
.mx-adbar.is-pausada .mx-adbar__pausa .mx-ico--play{display:block}
.mx-adbar.is-pausada .mx-adbar__pista{animation-play-state:paused}
@media (hover:hover){ .mx-adbar:hover .mx-adbar__pista{animation-play-state:paused} }
@media (min-width:768px){ .mx-adbar{font-size:11.5px} .mx-adbar__item::after{margin:0 26px} }
@keyframes mx-marquesina{to{transform:translate3d(-50%,0,0)}}

/* 8. HEADER Y MENÚ ========================================================= */
/* El header ocupa SIEMPRE su alto en el flujo (no salta el contenido ni se
   corren los disparadores de ScrollTrigger). Al compactarse sólo se achica la
   barra de adentro; la franja que queda debajo es transparente y no toma
   clicks. */
.mx-header{position:sticky;top:0;z-index:40;height:var(--mx-header-h);pointer-events:none}
.mx-header__barra{position:relative;pointer-events:auto;display:flex;align-items:center;gap:8px;
  height:var(--mx-header-h);padding-inline:var(--mx-gutter);
  background:rgba(250,248,244,.9);border-bottom:1px solid var(--mx-linea);
  -webkit-backdrop-filter:saturate(160%) blur(16px);backdrop-filter:saturate(160%) blur(16px);
  transition:height .5s var(--mx-ease),background-color .3s,box-shadow .4s}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .mx-header__barra{background:var(--mx-papel)}
}
.mx-header.is-scrolleado .mx-header__barra{box-shadow:0 12px 30px -26px rgba(20,18,16,.5)}
.mx-header.is-menu-abierto .mx-header__barra{background:var(--mx-papel)}
/* El velo que apaga la página mientras un desplegable está abierto */
.mx-header__velo{position:fixed;inset:0;z-index:-1;pointer-events:none;background:rgba(20,18,16,.16);
  opacity:0;visibility:hidden;transition:opacity .35s var(--mx-ease),visibility 0s .35s}
.mx-header.is-menu-abierto .mx-header__velo{opacity:1;visibility:visible;transition-delay:0s}
@supports selector(:has(*)){
  @media (hover:hover) and (pointer:fine) and (min-width:1200px){
    .mx-header:has(.mx-menu__item[data-menu-item]:hover) .mx-header__velo{opacity:1;visibility:visible;transition-delay:.06s}
  }
}

.mx-header__burger{flex:none;margin-left:-10px}
.mx-logo{display:flex;align-items:center;flex:none;height:100%;margin-right:auto;min-width:0}
.mx-logo picture{display:block}
/* Celu: el wordmark. clamp para que a 320 px entre con la hamburguesa y la bolsa. */
.mx-logo img{height:clamp(26px,9vw,36px);width:auto;max-width:none}
@media (min-width:768px){ .mx-logo img{height:42px} }

/* Utilidades de la derecha: buscar · cuenta · carrito */
.mx-utiles{display:flex;align-items:center;gap:2px;flex:none;margin-left:8px}
.mx-util{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-width:44px;height:44px;padding:0 10px;border-radius:var(--mx-pill);
  font-size:14px;font-weight:500;letter-spacing:-.005em;color:var(--mx-tinta);white-space:nowrap;
  transition:background-color .25s,border-color .25s}
.mx-util .mx-ico{width:21px;height:21px}
@media (hover:hover){ .mx-util:hover{background:var(--mx-arena)} }
.mx-util--buscar,.mx-util--cuenta{display:none}
.mx-util__txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.mx-util__n{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;
  padding:0 5px;margin-left:-6px;border-radius:var(--mx-pill);background:var(--mx-tinta);color:var(--mx-papel);
  font-family:var(--f-mono);font-size:10.5px;font-weight:500;letter-spacing:0;font-variant-numeric:tabular-nums}
@media (min-width:768px){
  .mx-util--buscar{display:inline-flex;border:1px solid var(--mx-linea-2);padding:0 16px 0 13px;margin-right:6px}
  .mx-util--cuenta{display:inline-flex}
}
@media (min-width:1600px){
  .mx-util__txt{position:static;width:auto;height:auto;overflow:visible;clip:auto;clip-path:none}
  .mx-util__n{margin-left:0}
}

/* Menú de 7 secciones (compu). En celu va en el drawer. Medido con las
   métricas reales de Geist: a 1200 px entra en una línea con ~30 px de aire,
   y con la fuente de respaldo (Arial) también. */
.mx-menu{display:none}
@media (min-width:1200px){
  .mx-header__burger{display:none}
  .mx-logo{margin-right:0}
  .mx-logo img{height:clamp(40px,3.5vw,54px);transition:height .5s var(--mx-ease)}
  /* Sólo la barra se achica: la caja del header conserva sus 76 px (sin salto) */
  .mx-header.is-compacto .mx-header__barra{height:60px}
  .mx-header.is-compacto .mx-logo img{height:38px}
  .mx-header__barra{gap:clamp(16px,2vw,40px)}
  .mx-utiles{margin-left:0}

  .mx-menu{display:flex;flex:1 1 auto;align-self:stretch;justify-content:center;min-width:0}
  .mx-menu__lista{display:flex;align-items:stretch;margin:0;padding:0;list-style:none}
  /* static: así el desplegable se posiciona contra la barra entera (de borde a borde) */
  .mx-menu__item{position:static;display:flex;align-items:center}
  .mx-menu__link{position:relative;display:inline-flex;align-items:center;height:100%;
    padding:0 clamp(5px,.62vw,14px);font-weight:600;font-size:clamp(11.5px,.9vw,13px);
    letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;color:var(--mx-tinta)}
  .mx-menu__item[data-menu-item] .mx-menu__link{padding-right:2px}
  .mx-menu__link::after{content:"";position:absolute;left:clamp(5px,.62vw,14px);right:clamp(5px,.62vw,14px);
    bottom:calc(50% - 15px);height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:right center;
    transition:transform .5s var(--mx-ease)}
  .mx-menu__item[data-menu-item] .mx-menu__link::after{right:2px}
  .mx-menu__item:hover .mx-menu__link::after,.mx-menu__item.is-abierto .mx-menu__link::after,
  .mx-menu__item.is-actual .mx-menu__link::after{transform:scaleX(1);transform-origin:left center}
  .mx-menu__abrir{display:inline-flex;align-items:center;justify-content:center;width:22px;height:36px;
    margin-right:clamp(2px,.4vw,8px);border-radius:6px;color:var(--mx-tinta)}
  .mx-menu__abrir .mx-ico{width:13px;height:13px;transition:transform .4s var(--mx-ease)}
  .mx-menu__item.is-abierto .mx-menu__abrir .mx-ico{transform:rotate(180deg)}
  .mx-menu__item.es-sale .mx-menu__link,.mx-menu__item.es-sale .mx-menu__abrir{color:var(--mx-sale)}

  /* El desplegable: de borde a borde debajo de la barra (maqueta 04) */
  .mx-menu__panel{position:absolute;left:0;right:0;top:100%;z-index:1;
    display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,3fr);gap:24px clamp(32px,4vw,72px);
    padding:clamp(28px,2.6vw,44px) var(--mx-gutter) clamp(36px,3.2vw,56px);
    background:var(--mx-papel);border-bottom:1px solid var(--mx-linea);
    box-shadow:0 40px 60px -48px rgba(20,18,16,.4);
    opacity:0;visibility:hidden;transform:translate3d(0,-8px,0);pointer-events:none;
    transition:opacity .25s var(--mx-ease) .14s,transform .4s var(--mx-ease) .14s,visibility 0s .5s}
  .mx-menu__item.is-abierto>.mx-menu__panel{opacity:1;visibility:visible;transform:none;pointer-events:auto;
    z-index:2;transition-delay:0s}
  /* Sin JS, el teclado también abre (con JS lo maneja milano.js) */
  html:not(.mx-js) .mx-menu__item:focus-within>.mx-menu__panel{opacity:1;visibility:visible;transform:none;pointer-events:auto}
}
@media (min-width:1200px) and (hover:hover) and (pointer:fine){
  .mx-menu__item:hover>.mx-menu__panel{opacity:1;visibility:visible;transform:none;pointer-events:auto;
    z-index:2;transition-delay:.06s}
}
.mx-menu__intro{display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  padding-right:clamp(16px,2vw,40px);border-right:1px solid var(--mx-linea);min-width:0}
.mx-menu__titulo{font-weight:800;font-size:clamp(34px,3.2vw,56px);line-height:.92;letter-spacing:-.045em}
.mx-menu__total{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mx-gris)}
.mx-menu__sub{columns:3 180px;column-gap:clamp(24px,3vw,56px);margin:0;padding:0;list-style:none;align-self:start}
.mx-menu__sub--marcas{columns:4 160px}
.mx-menu__sub li{break-inside:avoid}
.mx-menu__sub a{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--mx-linea);font-size:17px;font-weight:500;letter-spacing:-.015em;
  transition:padding .45s var(--mx-ease),color .2s}
.mx-menu__sub a:hover{padding-left:8px}
.mx-menu__n{font-family:var(--f-mono);font-size:12px;font-weight:400;color:var(--mx-gris);font-variant-numeric:tabular-nums}

/* El buscador que baja debajo de la barra (tablet y compu) */
.mx-buscador{position:absolute;left:0;right:0;top:100%;z-index:3;display:grid;gap:18px;
  padding:clamp(22px,2.4vw,36px) var(--mx-gutter) clamp(26px,2.8vw,40px);
  background:var(--mx-papel);border-bottom:1px solid var(--mx-linea);box-shadow:0 40px 60px -48px rgba(20,18,16,.4);
  opacity:0;visibility:hidden;transform:translate3d(0,-8px,0);
  transition:opacity .25s var(--mx-ease),transform .4s var(--mx-ease),visibility 0s .4s}
.mx-buscador.is-abierto{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.mx-buscador__form{display:flex;align-items:center;gap:14px;border-bottom:1.5px solid var(--mx-tinta);padding-bottom:8px}
.mx-buscador__form .mx-ico{width:26px;height:26px;color:var(--mx-gris)}
.mx-buscador__input{flex:1;min-width:0;height:56px;border:0;background:transparent;outline:none;
  font-size:clamp(22px,2.4vw,38px);font-weight:600;letter-spacing:-.03em;-webkit-appearance:none;appearance:none}
.mx-buscador__input::placeholder{color:rgba(20,18,16,.32)}
.mx-buscador__input::-webkit-search-cancel-button{-webkit-appearance:none}
.mx-buscador__cerrar{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;flex:none}
.mx-buscador__cerrar:hover{background:var(--mx-arena)}
.mx-buscador__sug{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.mx-chips{display:flex;flex-wrap:wrap;gap:8px}
.mx-chip{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 15px;border:1px solid var(--mx-linea-2);
  border-radius:var(--mx-pill);font-size:14px;font-weight:500;background:var(--mx-papel);transition:background-color .25s,border-color .25s}
.mx-chip:hover{background:var(--mx-arena);border-color:var(--mx-tinta)}

/* Drawer (celu y tablet) =================================================== */
.mx-drawer{position:fixed;inset:0;z-index:60;visibility:hidden;pointer-events:none;transition:visibility 0s .55s}
.mx-drawer.is-abierto{visibility:visible;pointer-events:auto;transition-delay:0s}
.mx-drawer__fondo{position:absolute;inset:0;background:var(--mx-tinta-velo);opacity:0;transition:opacity .45s var(--mx-ease)}
.mx-drawer.is-abierto .mx-drawer__fondo{opacity:1}
.mx-drawer__hoja{position:absolute;top:0;bottom:0;left:0;display:flex;flex-direction:column;
  width:min(88vw,420px);background:var(--mx-papel);transform:translate3d(-102%,0,0);
  transition:transform .55s var(--mx-ease);box-shadow:30px 0 80px -40px rgba(20,18,16,.5)}
.mx-drawer.is-abierto .mx-drawer__hoja{transform:none}
.mx-drawer__cabeza{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none;
  height:60px;padding:0 8px 0 20px;border-bottom:1px solid var(--mx-linea)}
.mx-drawer__logo img{height:28px;width:auto}
.mx-drawer__cerrar{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%}
.mx-drawer__cerrar:hover{background:var(--mx-arena)}
.mx-drawer__cuerpo{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:16px 20px calc(32px + env(safe-area-inset-bottom))}
.mx-drawer__buscar{display:flex;align-items:center;gap:10px;height:50px;padding:0 16px;margin-bottom:10px;
  border:1px solid var(--mx-linea-2);border-radius:var(--mx-pill);background:var(--mx-blanco)}
.mx-drawer__buscar .mx-ico{color:var(--mx-gris);width:19px;height:19px}
.mx-drawer__buscar input{flex:1;min-width:0;height:100%;border:0;background:transparent;outline:none;
  font-size:16px;-webkit-appearance:none;appearance:none}
.mx-drawer__buscar input::-webkit-search-cancel-button{-webkit-appearance:none}
.mx-drawer__seccion,.mx-drawer__directo{border-bottom:1px solid var(--mx-linea)}
.mx-drawer__boton,.mx-drawer__directo{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  min-height:60px;font-size:24px;font-weight:700;letter-spacing:-.03em;text-align:left;color:var(--mx-tinta)}
.mx-drawer__boton .mx-ico{width:18px;height:18px;color:var(--mx-gris);transition:transform .45s var(--mx-ease)}
.mx-drawer__seccion.is-abierta .mx-drawer__boton .mx-ico{transform:rotate(180deg);color:var(--mx-tinta)}
.mx-drawer__seccion.es-sale .mx-drawer__boton,.mx-drawer__directo.es-sale{color:var(--mx-sale)}
.mx-drawer__nota{font-family:var(--f-mono);font-size:11px;font-weight:400;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mx-gris)}
/* Acordeón con la animación de alto que no necesita medir (grid 0fr → 1fr) */
.mx-drawer__sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--mx-ease)}
.mx-drawer__sub>div{min-height:0;overflow:hidden;visibility:hidden;transition:visibility 0s .5s}
.mx-drawer__seccion.is-abierta .mx-drawer__sub{grid-template-rows:1fr}
.mx-drawer__seccion.is-abierta .mx-drawer__sub>div{visibility:visible;transition-delay:0s}
.mx-drawer__todo{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;font-size:15px}
.mx-drawer__todo .mx-ico{width:16px;height:16px}
.mx-drawer__lista{margin:0 0 14px;padding:0;list-style:none}
.mx-drawer__lista a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:46px;
  padding:0 2px;font-size:17px;color:var(--mx-tinta-2);border-top:1px solid var(--mx-linea)}
.mx-drawer__n{font-family:var(--f-mono);font-size:12px;color:var(--mx-gris);font-variant-numeric:tabular-nums}
.mx-drawer__pie{display:grid;gap:22px;margin-top:28px}
.mx-drawer__extra{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px;margin:0;padding:0;list-style:none}
.mx-drawer__extra a{display:flex;align-items:center;min-height:44px;font-size:15px;color:var(--mx-tinta-2)}
@media (min-width:1200px){ .mx-drawer{display:none} }

/* 9. FOOTER ================================================================ */
.mx-pie{position:relative;z-index:1;background:var(--mx-noche);color:rgba(250,248,244,.86);
  padding:clamp(48px,6vw,96px) var(--mx-gutter) calc(96px + env(safe-area-inset-bottom))}
@media (min-width:768px){ .mx-pie{padding-bottom:36px} }
.mx-pie a{transition:color .25s}
.mx-pie :focus-visible{outline-color:var(--mx-papel)}
/* La ruta que cierra la página: MXP ··· ✈ ··· EZE, enorme */
.mx-pie__ruta{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:end;gap:clamp(12px,2vw,32px);
  padding-bottom:clamp(36px,4vw,64px);margin-bottom:clamp(36px,4vw,64px);border-bottom:1px solid var(--mx-linea-clara)}
.mx-pie__aeropuerto{display:grid;gap:10px;min-width:0}
.mx-pie__aeropuerto--eze{text-align:right;justify-items:end}
.mx-pie__codigo{font-weight:800;font-size:clamp(56px,13vw,220px);line-height:.78;letter-spacing:-.06em;color:var(--mx-papel)}
/* En celu la coordenada corta en dos renglones (en una sola, la de EZE
   desbordaba 390 px); desde tablet va en una línea. */
.mx-pie__coord{font-family:var(--f-mono);font-size:clamp(9.5px,.9vw,12px);letter-spacing:.12em;text-transform:uppercase;
  color:rgba(250,248,244,.52);font-variant-numeric:tabular-nums;max-width:15ch;line-height:1.45}
@media (min-width:768px){ .mx-pie__coord{white-space:nowrap;max-width:none;letter-spacing:.14em} }
.mx-pie__trayecto{position:relative;align-self:center;height:24px;margin-bottom:clamp(8px,1.4vw,24px);
  border-top:1.5px dotted rgba(250,248,244,.4);margin-top:12px}
.mx-pie__trayecto .mx-ico{position:absolute;top:-12px;left:0;width:22px;height:22px;color:var(--mx-papel);
  background:var(--mx-noche);padding:0 2px;box-sizing:content-box;
  animation:mx-vuelo-pie 14s var(--mx-ease-io) infinite alternate}
@keyframes mx-vuelo-pie{from{left:0}to{left:calc(100% - 26px)}}
.mx-pie__grilla{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 24px}
.mx-pie__marca{grid-column:1/-1;display:grid;gap:18px;align-content:start}
.mx-pie__marca img{height:40px;width:auto}
.mx-pie__lema{font-size:16px;line-height:1.6;color:rgba(250,248,244,.66);max-width:34ch}
.mx-pie__redes{display:flex;gap:8px}
.mx-pie__red{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--mx-linea-clara);color:var(--mx-papel);transition:background-color .25s,color .25s}
.mx-pie__red:hover{background:var(--mx-papel);color:var(--mx-noche)}
.mx-pie__titulo{margin-bottom:16px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(250,248,244,.5)}
.mx-pie__links{display:grid;gap:2px;margin:0;padding:0;list-style:none}
.mx-pie__links a{display:inline-flex;align-items:center;min-height:36px;font-size:16px;color:rgba(250,248,244,.86)}
.mx-pie__links a:hover{color:var(--mx-blanco);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.mx-pie__pagos{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:clamp(36px,4vw,56px);
  padding-top:clamp(24px,3vw,36px);border-top:1px solid var(--mx-linea-clara)}
.mx-pie__pagos .mx-pie__titulo{margin:0 8px 0 0}
.mx-pie__pago{display:inline-flex;align-items:center;min-height:32px;padding:0 13px;border:1px solid rgba(250,248,244,.28);
  border-radius:var(--mx-pill);font-size:13.5px;color:rgba(250,248,244,.86)}
.mx-pie__final{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;
  margin-top:clamp(28px,3vw,40px);font-size:13.5px;color:rgba(250,248,244,.6)}
.mx-pie__firma{font-size:12px;color:rgba(250,248,244,.42)}
.mx-pie__firma a:hover{color:rgba(250,248,244,.8)}
@media (min-width:768px){
  .mx-pie__grilla{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1000px){
  .mx-pie__grilla{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:40px}
  .mx-pie__marca{grid-column:auto}
}

/* 10. MIA ================================================================== */
/* El ÚNICO botón flotante. Siempre por encima de la barra fija de la ficha. */
.mx-mia{font-family:var(--f-sans)}
.mx-mia__pastilla{position:fixed;z-index:45;right:calc(14px + env(safe-area-inset-right));
  bottom:calc(16px + var(--mx-bottom-bar) + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:10px;padding:5px 16px 5px 5px;border-radius:var(--mx-pill);
  background:rgba(255,255,255,.95);color:var(--mx-tinta);border:1px solid var(--mx-linea-2);
  box-shadow:0 2px 6px rgba(20,18,16,.06),0 22px 44px -20px rgba(20,18,16,.5);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);text-align:left;
  transition:transform .5s var(--mx-ease),box-shadow .5s var(--mx-ease),bottom .5s var(--mx-ease)}
@media (hover:hover){ .mx-mia__pastilla:hover{transform:translate3d(0,-3px,0);box-shadow:0 2px 6px rgba(20,18,16,.06),0 30px 54px -22px rgba(20,18,16,.55)} }
.mx-mia__avatar{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;
  background:var(--mx-tinta);color:var(--mx-papel);font-family:var(--f-serif);font-style:italic;
  font-size:23px;line-height:1;padding-top:1px}
.mx-mia__textos{display:flex;flex-direction:column;gap:3px;line-height:1.15;min-width:0}
.mx-mia__nombre{display:flex;align-items:center;gap:7px;font-weight:600;font-size:15px;letter-spacing:-.01em;white-space:nowrap}
.mx-mia__punto{position:relative;flex:none;width:8px;height:8px;border-radius:50%;background:var(--mx-ok)}
.mx-mia__punto::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--mx-ok);
  opacity:0;animation:mx-latido 2.8s var(--mx-ease) infinite}
@keyframes mx-latido{0%{opacity:.7;transform:scale(.6)}70%,100%{opacity:0;transform:scale(1.5)}}
.mx-mia__rol,.mx-mia__bajada{display:none}
.mx-mia__bajada{font-size:13px;color:var(--mx-gris);white-space:nowrap}
@media (min-width:768px){
  .mx-mia__pastilla{right:22px;bottom:calc(22px + var(--mx-bottom-bar) + env(safe-area-inset-bottom));padding:6px 22px 6px 6px;gap:12px}
  .mx-mia__avatar{width:46px;height:46px;font-size:26px}
  .mx-mia__rol{display:inline}
  .mx-mia__bajada{display:block}
}
/* El chat */
.mx-mia__panel{position:fixed;z-index:60;display:none;flex-direction:column;overflow:hidden;
  left:0;right:0;bottom:0;width:100%;height:min(80dvh,640px);
  background:var(--mx-papel);border-top:1px solid var(--mx-linea-2);border-radius:22px 22px 0 0;
  box-shadow:0 -30px 80px -30px rgba(20,18,16,.45);padding-bottom:env(safe-area-inset-bottom)}
.mx-mia__panel.is-open{display:flex;animation:mx-mia-abrir .5s var(--mx-ease)}
@keyframes mx-mia-abrir{from{opacity:0;transform:translate3d(0,18px,0) scale(.985)}}
@media (min-width:768px){
  .mx-mia__panel{left:auto;right:22px;bottom:calc(22px + var(--mx-bottom-bar));width:400px;
    height:min(640px,calc(100dvh - 120px));border:1px solid var(--mx-linea-2);border-radius:var(--mx-radio-lg);
    box-shadow:var(--mx-sombra-alta);padding-bottom:0}
}
.mx-mia__cabeza{display:flex;align-items:center;gap:12px;flex:none;padding:14px 10px 14px 16px;
  border-bottom:1px solid var(--mx-linea);background:var(--mx-blanco)}
.mx-mia__meta{flex:1;min-width:0;display:grid;gap:3px}
.mx-mia__titulo{font-weight:700;font-size:16px;letter-spacing:-.01em}
.mx-mia__estado{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--mx-gris)}
.mx-mia__cerrar{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;flex:none}
.mx-mia__cerrar:hover{background:var(--mx-arena)}
.mx-mia__cuerpo{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;gap:10px;padding:18px 16px}
.mx-mia__msg{max-width:86%;padding:11px 15px;font-size:15px;line-height:1.55;white-space:pre-line;
  overflow-wrap:anywhere;word-break:normal}
.mx-mia__msg--bot{align-self:flex-start;background:var(--mx-blanco);color:var(--mx-tinta);
  border:1px solid var(--mx-linea);border-radius:4px 18px 18px 18px}
.mx-mia__msg--user{align-self:flex-end;background:var(--mx-tinta);color:var(--mx-papel);border-radius:18px 4px 18px 18px}
.mx-mia__msg a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;font-weight:600}
.mx-mia__escribiendo{display:flex;gap:5px;align-items:center;padding:15px 16px}
.mx-mia__escribiendo i{width:6px;height:6px;border-radius:50%;background:var(--mx-tinta-2);animation:mx-mia-punto 1.2s infinite}
.mx-mia__escribiendo i:nth-child(2){animation-delay:.2s}
.mx-mia__escribiendo i:nth-child(3){animation-delay:.4s}
@keyframes mx-mia-punto{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.mx-mia__pie{display:flex;gap:10px;flex:none;padding:12px 14px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid var(--mx-linea);background:var(--mx-blanco)}
@media (min-width:768px){ .mx-mia__pie{padding-bottom:12px} }
/* 16 px: con menos, iOS hace zoom en toda la página al enfocar */
.mx-mia__input{flex:1;min-width:0;height:46px;padding:0 18px;border:1px solid var(--mx-linea-2);border-radius:var(--mx-pill);
  background:var(--mx-papel);font-size:16px;outline:none;-webkit-appearance:none;appearance:none;transition:border-color .2s}
.mx-mia__input:focus{border-color:var(--mx-tinta)}
.mx-mia__input::placeholder{color:rgba(20,18,16,.42)}
.mx-mia__enviar{display:inline-flex;align-items:center;justify-content:center;flex:none;width:46px;height:46px;border-radius:50%;
  background:var(--mx-tinta);color:var(--mx-papel);transition:transform .3s var(--mx-ease),opacity .2s}
.mx-mia__enviar .mx-ico{width:19px;height:19px}
.mx-mia__enviar:hover{transform:scale(1.06)}
.mx-mia__enviar:disabled{opacity:.4;cursor:default;transform:none}

/* 11. TARJETA (.mx-card) =================================================== */
/* Estructura de carta (Achalay): la perspectiva vive en .mx-card__media, el
   preserve-3d en .mx-card__carta (SIN overflow:hidden: lo aplanaría) y el
   recorte con radio en cada cara. El 3D no sale nunca de la carta. */
.mx-card{position:relative;min-width:0}
.mx-card__link{display:flex;flex-direction:column;gap:14px;color:inherit;height:100%}
.mx-card__media{position:relative;aspect-ratio:4/5;perspective:1400px;border-radius:var(--mx-radio);
  container-type:inline-size}
.mx-card__carta{position:absolute;inset:0;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;
  transition:transform .9s var(--mx-ease-rebote)}
.mx-card__cara{position:absolute;inset:0;overflow:hidden;border-radius:var(--mx-radio);
  backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--mx-blanco)}
.mx-card__cara--dorso{transform:rotateY(180deg);background:var(--mx-arena)}
.mx-card__cara img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.mx-card__sinfoto{display:grid;place-items:center;height:100%;padding:16px;text-align:center;
  font-weight:800;font-size:clamp(18px,9cqi,30px);letter-spacing:-.04em;color:var(--mx-tinta-2);background:var(--mx-arena)}
/* La 2ª foto del dorso se pide recién cuando la grilla se acerca y sólo con
   hover real (milano.js). Sin src no se dibuja (ni el alt). */
.mx-card__dorso-foto{position:absolute;inset:0;z-index:2;opacity:0;transition:opacity .4s var(--mx-ease)}
.mx-card__dorso-foto.is-cargada{opacity:1}
.mx-card__dorso-foto:not([src]){visibility:hidden}
@media (hover:hover) and (pointer:fine){
  .mx-card[data-carta]:hover .mx-card__carta{transform:rotateY(180deg)}
}
/* El dorso pase-de-abordar (se ve en la entrada en cascada y cuando no hay 2ª foto) */
.mx-card__pase{position:absolute;inset:clamp(7px,3.2cqi,12px);display:flex;flex-direction:column;
  gap:clamp(6px,2.6cqi,12px);padding:clamp(10px,5cqi,18px);border:1px dotted var(--mx-tinta);
  border-radius:calc(var(--mx-radio) - 5px);font-family:var(--f-mono);font-size:clamp(8.5px,3.4cqi,11px);
  letter-spacing:.1em;text-transform:uppercase;color:var(--mx-tinta-2);font-variant-numeric:tabular-nums}
.mx-card__pase-cab{display:flex;justify-content:space-between;gap:8px}
.mx-card__ruta{display:flex;align-items:center;gap:8px;margin-top:auto;font-family:var(--f-sans);font-weight:800;
  font-size:clamp(22px,13cqi,48px);line-height:.9;letter-spacing:-.05em;color:var(--mx-tinta);text-transform:none}
.mx-card__vuelo{position:relative;flex:1;height:1px;border-top:1.5px dotted var(--mx-tinta);min-width:16px}
.mx-card__vuelo .mx-ico{position:absolute;left:50%;top:50%;width:clamp(14px,7cqi,22px);height:clamp(14px,7cqi,22px);
  transform:translate(-50%,-50%);background:var(--mx-arena);padding:0 3px;box-sizing:content-box}
.mx-card__ciudades{display:flex;justify-content:space-between;gap:8px}
.mx-card__datos{display:grid;gap:clamp(4px,1.8cqi,8px);padding-block:clamp(6px,3cqi,12px);
  border-block:1px dotted var(--mx-linea-2)}
.mx-card__datos div{display:flex;justify-content:space-between;gap:10px;min-width:0}
.mx-card__datos dt{color:var(--mx-tinta-2);opacity:.75;flex:none}
.mx-card__datos dd{color:var(--mx-tinta);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mx-card__pase-precio{display:flex;justify-content:space-between;gap:8px;color:var(--mx-tinta);font-weight:500}
.mx-card__codigo{display:block;height:clamp(16px,9cqi,30px);opacity:.85;
  background:repeating-linear-gradient(90deg,var(--mx-tinta) 0 1px,transparent 1px 3px,var(--mx-tinta) 3px 5px,
    transparent 5px 6px,var(--mx-tinta) 6px 7px,transparent 7px 10px,var(--mx-tinta) 10px 12px,transparent 12px 13px)}
@container (max-width:200px){
  .mx-card__ciudades,.mx-card__pase-cab span+span{display:none}
}
/* Etiquetas sobre la foto (Último viaje · Última unidad · Sale · Agotado) */
.mx-card__tags{position:absolute;top:10px;left:10px;right:10px;z-index:3;display:flex;flex-wrap:wrap;gap:6px;
  margin:0;padding:0;list-style:none;pointer-events:none}
.mx-etiqueta{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:var(--mx-pill);
  background:rgba(250,248,244,.94);color:var(--mx-tinta);border:1px solid var(--mx-linea-2);
  font-family:var(--f-mono);font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.mx-etiqueta .mx-ico{width:13px;height:13px}
.mx-etiqueta--ultima{color:var(--mx-sale);border-color:rgba(196,42,31,.45)}
.mx-etiqueta--sale{background:var(--mx-sale);border-color:var(--mx-sale);color:var(--mx-blanco)}
.mx-etiqueta--agotado{background:var(--mx-tinta);border-color:var(--mx-tinta);color:var(--mx-papel)}
.mx-card.is-agotada .mx-card__cara--frente img{filter:grayscale(.35);opacity:.78}
/* Texto de la tarjeta */
.mx-card__info{display:flex;flex-direction:column;gap:6px;min-width:0;padding:0 2px}
.mx-card__marca{font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--mx-gris)}
.mx-card__nombre{font-size:15px;line-height:1.35;font-weight:500;letter-spacing:-.01em;color:var(--mx-tinta);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
@media (hover:hover){
  .mx-card__link:hover .mx-card__nombre{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
}
@media (min-width:1100px){ .mx-card__nombre{font-size:16px} }

/* 12. PRECIO Y TALLES ====================================================== */
.mx-precio{display:flex;flex-direction:column;gap:2px;margin:0;font-variant-numeric:tabular-nums}
.mx-precio__usd{font-weight:700;font-size:16px;letter-spacing:-.01em;color:var(--mx-tinta)}
.mx-precio__antes{margin-right:6px;font-weight:400;font-size:.9em;color:var(--mx-gris);
  text-decoration:line-through;text-decoration-thickness:1px}
.mx-precio.es-sale .mx-precio__usd{color:var(--mx-sale)}
.mx-precio.es-sale .mx-precio__antes{color:var(--mx-gris)}
.mx-precio__ars{font-size:14px;color:var(--mx-gris)}
/* Talles chiquitos de la tarjeta: los que no hay, tachados */
.mx-talles{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0 0;padding:0;list-style:none}
.mx-talles li{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:24px;padding:0 6px;
  border:1px solid var(--mx-linea-2);border-radius:5px;font-family:var(--f-mono);font-size:11px;color:var(--mx-tinta)}
.mx-talles li.no-hay{color:var(--mx-gris);border-color:var(--mx-linea);text-decoration:line-through;opacity:.75}

/* 13. LISTADO Y FILTROS ==================================================== */
.mx-listado{padding:clamp(18px,2.4vw,32px) var(--mx-gutter) clamp(72px,9vw,140px)}
.mx-listado__cabeza{display:grid;gap:12px;padding:clamp(16px,2.2vw,28px) 0 clamp(18px,2vw,26px)}
.mx-listado__h1{font-weight:800;font-size:clamp(36px,6.2vw,96px);line-height:.94;letter-spacing:-.045em;overflow-wrap:anywhere}
.mx-listado__bajada{max-width:62ch;font-size:16px;line-height:1.65;color:var(--mx-tinta-2)}
.mx-listado__cuenta{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mx-gris);
  font-variant-numeric:tabular-nums}
/* Filtros: dos pastillas chicas a la izquierda; al tocar una se despliegan
   sus opciones debajo. Son <details> con links: andan sin JS. En celu el panel
   se ancla a la fila entera (no a la pastilla) para no desbordar. */
.mx-filtros{position:relative;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:14px 0;margin-bottom:clamp(24px,3vw,40px);border-block:1px solid var(--mx-linea)}
.mx-filtro{position:static}
.mx-filtro>summary{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;
  border:1px solid var(--mx-linea-2);border-radius:var(--mx-pill);background:var(--mx-papel);
  font-size:14.5px;font-weight:500;list-style:none;user-select:none;-webkit-user-select:none;
  transition:background-color .25s,color .25s,border-color .25s}
.mx-filtro>summary::-webkit-details-marker{display:none}
.mx-filtro>summary .mx-ico{width:14px;height:14px;transition:transform .35s var(--mx-ease)}
.mx-filtro[open]>summary .mx-ico{transform:rotate(180deg)}
.mx-filtro[open]>summary,.mx-filtro.tiene-activo>summary{background:var(--mx-tinta);border-color:var(--mx-tinta);color:var(--mx-papel)}
@media (hover:hover){ .mx-filtro>summary:hover{border-color:var(--mx-tinta)} }
.mx-filtro__panel{position:absolute;left:0;right:0;top:calc(100% - 4px);z-index:10;display:grid;gap:14px;
  padding:18px;background:var(--mx-blanco);border:1px solid var(--mx-linea-2);border-radius:var(--mx-radio);
  box-shadow:var(--mx-sombra-alta);animation:mx-subir .35s var(--mx-ease)}
.mx-filtro__titulo{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mx-gris)}
.mx-filtro__opciones{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.mx-opcion{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 15px;border:1px solid var(--mx-linea-2);
  border-radius:var(--mx-pill);font-size:14.5px;background:var(--mx-blanco);transition:background-color .2s,border-color .2s}
.mx-opcion--cuadrada{justify-content:center;min-width:48px;padding:0 10px;border-radius:10px;font-family:var(--f-mono);font-size:13.5px}
.mx-opcion small{font-family:var(--f-mono);font-size:11px;color:var(--mx-gris)}
.mx-opcion:hover{border-color:var(--mx-tinta)}
.mx-opcion.is-activa{background:var(--mx-tinta);border-color:var(--mx-tinta);color:var(--mx-papel)}
.mx-opcion.is-activa small{color:rgba(250,248,244,.7)}
.mx-filtros__limpiar{margin-left:auto;font-size:14px;font-weight:500;text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:1px;color:var(--mx-tinta-2)}
@media (min-width:768px){
  .mx-filtro{position:relative}
  .mx-filtro__panel{right:auto;top:calc(100% + 8px);width:max-content;min-width:280px;max-width:min(640px,calc(100vw - 2 * var(--mx-gutter)))}
}
@keyframes mx-subir{from{opacity:0;transform:translate3d(0,-6px,0)}}
/* Estado vacío, con la voz de la marca */
.mx-vacio{display:grid;justify-items:start;gap:18px;padding:clamp(32px,6vw,96px) 0;max-width:820px}
.mx-vacio p{max-width:56ch;font-size:16.5px;line-height:1.65;color:var(--mx-tinta-2)}
.mx-vacio__links{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
/* "Sobre la marca" debajo de la grilla (sólo cuando el backend trae texto) */
.mx-casa{display:grid;gap:clamp(20px,3vw,48px);margin-top:clamp(64px,8vw,120px);padding-top:clamp(32px,4vw,56px);
  border-top:1px solid var(--mx-linea)}
.mx-casa__legal{font-size:13.5px;line-height:1.6;color:var(--mx-gris)}
@media (min-width:1000px){ .mx-casa{grid-template-columns:minmax(0,1fr) minmax(0,2fr)} }

/* 14. GRILLA =============================================================== */
.mx-grilla{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 12px}
@media (min-width:768px){ .mx-grilla{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 18px} }
@media (min-width:1100px){ .mx-grilla{grid-template-columns:repeat(4,minmax(0,1fr));gap:60px 22px} }

/* 15. CARRUSEL [data-carrusel] ============================================= */
/* Pista con scroll-snap que sangra hasta el borde de la pantalla (el margen
   lateral va como padding), con el "peek" de la tarjeta siguiente para que
   se note que se desliza. --mx-rail-n = cuántas tarjetas entran a la vista. */
.mx-rail{--mx-rail-n:2.2;--mx-rail-gap:12px;position:relative}
.mx-rail__pista{display:flex;gap:var(--mx-rail-gap);overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:var(--mx-gutter);padding:4px var(--mx-gutter) 10px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.mx-rail__pista::-webkit-scrollbar{display:none}
.mx-rail__pista>*{flex:0 0 calc((100% - (var(--mx-rail-n) - 1) * var(--mx-rail-gap)) / var(--mx-rail-n));
  min-width:0;scroll-snap-align:start}
.mx-rail.is-arrastrando .mx-rail__pista{scroll-snap-type:none;cursor:grabbing;user-select:none;-webkit-user-select:none}
.mx-rail.is-arrastrando .mx-rail__pista a{pointer-events:none}
@media (min-width:768px){ .mx-rail{--mx-rail-n:3.25;--mx-rail-gap:18px} }
@media (min-width:1100px){ .mx-rail{--mx-rail-n:4.3;--mx-rail-gap:22px} }
@media (min-width:1700px){ .mx-rail{--mx-rail-n:5.3} }
@media (hover:hover) and (pointer:fine){ .mx-rail__pista{cursor:grab} }
/* Flechas ‹ › (compu): flotan a la altura de las fotos y se van en los extremos */
.mx-rail>[data-carrusel-prev],.mx-rail>[data-carrusel-next]{position:absolute;z-index:4;
  top:var(--mx-rail-flecha-top,38%);display:none;place-items:center;width:52px;height:52px;margin-top:-26px;
  border-radius:50%;background:rgba(250,248,244,.95);color:var(--mx-tinta);border:1px solid var(--mx-linea-2);
  box-shadow:var(--mx-sombra);transition:opacity .3s,transform .4s var(--mx-ease),background-color .25s,color .25s}
.mx-rail>[data-carrusel-prev]{left:calc(var(--mx-gutter) - 14px)}
.mx-rail>[data-carrusel-next]{right:calc(var(--mx-gutter) - 14px)}
.mx-rail>[data-carrusel-prev] .mx-ico,.mx-rail>[data-carrusel-next] .mx-ico{width:20px;height:20px}
.mx-rail>[data-carrusel-prev]:disabled,.mx-rail>[data-carrusel-next]:disabled{opacity:0;pointer-events:none}
@media (hover:hover) and (pointer:fine){
  .mx-rail.es-desplazable>[data-carrusel-prev],.mx-rail.es-desplazable>[data-carrusel-next]{display:grid}
  .mx-rail>[data-carrusel-prev]:hover,.mx-rail>[data-carrusel-next]:hover{background:var(--mx-tinta);color:var(--mx-papel);transform:scale(1.06)}
}

/* 16. CINTA [data-cinta] =================================================== */
/* Se mueve sola de derecha a izquierda (CSS), se frena con hover y se puede
   arrastrar. La pista lleva los ítems DOS veces (la segunda copia con
   aria-hidden="true"); el espacio va como margen de cada ítem. */
.mx-cinta{position:relative;overflow:hidden;touch-action:pan-y;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.mx-cinta__pista{display:flex;width:max-content;will-change:transform;
  animation:mx-cinta var(--mx-cinta-dur,52s) linear infinite}
.mx-cinta__pista>*{flex:none;margin-right:var(--mx-cinta-gap,16px)}
.mx-cinta.is-arrastrando .mx-cinta__pista{animation-play-state:paused;cursor:grabbing}
.mx-cinta.is-arrastrando a{pointer-events:none}
@media (hover:hover){ .mx-cinta:hover .mx-cinta__pista{animation-play-state:paused} }
@media (hover:hover) and (pointer:fine){ .mx-cinta{cursor:grab} }
@keyframes mx-cinta{to{transform:translate3d(-50%,0,0)}}

/* 17. BANNERS [data-banners] — mecánica ==================================== */
/* El aspecto lo pone FRONT-HOME (milano-home.css). Acá sólo lo que necesita
   milano.js: los banners apilados en la misma celda, el activo arriba, la
   cortina diagonal al entrar y el Ken Burns de [data-kenburns].
   El primer banner (LCP) NO se oculta ni se anima al cargar: lleva .is-activo
   desde el HTML. */
.mx-banners{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr);
  touch-action:pan-y;user-select:none;-webkit-user-select:none}
.mx-banners>[data-banner]{grid-area:1/1;min-width:0}
.mx-banners [data-banner]:not(.is-activo):not(.is-saliendo){visibility:hidden}
.mx-banners [data-banner].is-saliendo{z-index:1}
.mx-banners [data-banner].is-activo{z-index:2}
.mx-banners [data-banner].is-entrando{z-index:3;animation:mx-cortina-sig 1.05s var(--mx-ease-io) both}
.mx-banners.va-atras [data-banner].is-entrando{animation-name:mx-cortina-ant}
/* Ken Burns en un CONTENEDOR de la imagen, no en el <img> (si el <img> lleva
   data-parallax, el transform del parallax y el de la animación pelearían). */
.mx-banners [data-banner].is-activo [data-kenburns]{animation:mx-kenburns 9s var(--mx-ease) both}
.mx-banners.is-pausado [data-banner].is-activo [data-kenburns]{animation-play-state:paused}
@keyframes mx-cortina-sig{
  from{clip-path:polygon(118% 0,118% 0,100% 100%,100% 100%)}
  to{clip-path:polygon(0 0,118% 0,100% 100%,-18% 100%)}}
@keyframes mx-cortina-ant{
  from{clip-path:polygon(0 0,0 0,-18% 100%,-18% 100%)}
  to{clip-path:polygon(0 0,118% 0,100% 100%,-18% 100%)}}
@keyframes mx-kenburns{from{transform:scale(1.14) translate3d(0,1.5%,0)}to{transform:scale(1) translate3d(0,0,0)}}
/* Los puntos son barras finas que se llenan con el tiempo (sin números).
   milano.js escribe --mx-progreso (0 → 1) en el activo. */
.mx-banners [data-banners-ir]{position:relative;width:clamp(28px,4vw,56px);height:24px;color:inherit}
.mx-banners [data-banners-ir]::before,.mx-banners [data-banners-ir]::after{content:"";position:absolute;left:0;right:0;
  top:50%;height:2px;margin-top:-1px;border-radius:2px;background:currentColor}
.mx-banners [data-banners-ir]::before{opacity:.25}
.mx-banners [data-banners-ir]::after{transform:scaleX(var(--mx-progreso,0));transform-origin:left center}

/* 18. FICHA DE PRODUCTO ==================================================== */
.mx-ficha{padding:clamp(12px,1.6vw,24px) var(--mx-gutter) 0}
.mx-ficha__migas{margin-bottom:clamp(14px,1.8vw,26px)}
.mx-ficha__grid{display:grid;gap:clamp(22px,3vw,40px);align-items:start}
@media (min-width:1000px){
  .mx-ficha__grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(36px,4.4vw,88px)}
  .mx-ficha__info{position:sticky;top:calc(var(--mx-header-h) + 28px)}
}
/* Galería: celu = fotos a todo el ancho que se deslizan + barras;
   compu = miniaturas verticales + foto grande con zoom. */
.mx-galeria{display:grid;gap:12px;min-width:0;margin-inline:calc(-1 * var(--mx-gutter))}
.mx-galeria__visor{position:relative;min-width:0}
.mx-galeria__pista{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.mx-galeria__pista::-webkit-scrollbar{display:none}
.mx-galeria__foto{position:relative;flex:0 0 100%;margin:0;aspect-ratio:4/5;overflow:hidden;background:var(--mx-blanco);
  scroll-snap-align:center;scroll-snap-stop:always}
.mx-galeria__foto img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;
  transform-origin:var(--zx,50%) var(--zy,50%);transition:transform .6s var(--mx-ease)}
.mx-galeria__foto.is-zoom img{transform:scale(2.2);transition-duration:.35s}
.mx-galeria__barras{position:absolute;left:var(--mx-gutter);right:var(--mx-gutter);bottom:14px;z-index:2;
  display:flex;gap:4px;pointer-events:none}
.mx-galeria__barra{flex:1;height:2px;border-radius:2px;background:rgba(20,18,16,.18);transition:background-color .3s}
.mx-galeria__barra.is-activa{background:var(--mx-tinta)}
.mx-galeria__minis{display:none}
.mx-galeria__pista[data-una] + .mx-galeria__barras{display:none}
@media (min-width:1000px){
  .mx-galeria{grid-template-columns:clamp(68px,5.4vw,92px) minmax(0,1fr);gap:14px;margin-inline:0;align-items:start}
  .mx-galeria--una{grid-template-columns:minmax(0,1fr)}
  .mx-galeria__visor{border-radius:var(--mx-radio-lg);overflow:hidden}
  .mx-galeria__barras{display:none}
  .mx-galeria__minis{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;
    position:sticky;top:calc(var(--mx-header-h) + 28px)}
  .mx-galeria__mini{display:block;width:100%;aspect-ratio:4/5;overflow:hidden;border-radius:10px;
    border:1px solid var(--mx-linea);background:var(--mx-blanco);opacity:.62;transition:opacity .25s,border-color .25s}
  .mx-galeria__mini img{width:100%;height:100%;object-fit:cover}
  .mx-galeria__mini:hover{opacity:1}
  .mx-galeria__mini.is-activa{opacity:1;border-color:var(--mx-tinta);box-shadow:0 0 0 1px var(--mx-tinta)}
}
@media (hover:hover) and (pointer:fine){ .mx-galeria__foto{cursor:zoom-in} .mx-galeria__foto.is-zoom{cursor:zoom-out} }
.mx-galeria__vacia{display:grid;place-items:center;aspect-ratio:4/5;background:var(--mx-arena);font-weight:800;
  font-size:clamp(28px,4vw,56px);letter-spacing:-.04em;color:var(--mx-tinta-2)}

/* Columna de la info */
.mx-ficha__info{display:grid;gap:0;min-width:0}
.mx-ficha__marca{justify-self:start;font-family:var(--f-mono);font-size:12.5px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mx-tinta-2);transition:color .2s}
.mx-ficha__marca:hover{color:var(--mx-tinta);text-decoration:underline;text-underline-offset:4px}
.mx-ficha__h1{margin:12px 0 0;font-weight:700;font-size:clamp(28px,3vw,46px);line-height:1.04;letter-spacing:-.035em;overflow-wrap:anywhere}
.mx-ficha__etiquetas{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 0;padding:0;list-style:none}
.mx-ficha__precios{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-top:20px;
  padding-bottom:22px;border-bottom:1px solid var(--mx-linea)}
.mx-ficha__montos{display:grid;gap:4px;font-variant-numeric:tabular-nums;min-width:0}
.mx-ficha__usd{font-weight:600;font-size:clamp(26px,2.4vw,36px);line-height:1.05;letter-spacing:-.025em}
.mx-ficha__usd.es-sale{color:var(--mx-sale)}
.mx-ficha__antes{display:inline-block;margin-right:10px;font-weight:400;font-size:.62em;color:var(--mx-gris);
  text-decoration:line-through;text-decoration-thickness:1px;vertical-align:.18em}
.mx-ficha__ars{font-size:16px;color:var(--mx-gris)}
.mx-ficha__ahorro{margin-top:6px;font-size:13.5px;font-weight:500;color:var(--mx-sale)}
.mx-ficha__transfer{flex:none;max-width:17ch;text-align:right;font-size:13.5px;line-height:1.35;color:var(--mx-tinta-2)}
.mx-ficha__transfer strong{display:block;font-family:var(--f-mono);font-size:12px;font-weight:500;letter-spacing:.1em;color:var(--mx-tinta)}
.mx-ficha__talles{display:grid;gap:12px;margin-top:22px}
.mx-ficha__talles-cab{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mx-ficha__guia{display:inline-flex;align-items:center;gap:8px;min-height:36px;font-size:14.5px;font-weight:500;
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.mx-ficha__guia .mx-ico{width:18px;height:18px}
.mx-talles-ficha{display:flex;flex-wrap:wrap;gap:8px}
.mx-talle{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:54px;height:54px;padding:0 12px;
  border:1px solid var(--mx-linea-2);border-radius:10px;background:var(--mx-blanco);color:var(--mx-tinta);
  font-family:var(--f-mono);font-size:14px;letter-spacing:.04em;overflow:hidden;
  transition:border-color .2s,background-color .2s,color .2s,transform .2s}
.mx-talle:not(:disabled):hover{border-color:var(--mx-tinta)}
.mx-talle.is-sel{background:var(--mx-tinta);border-color:var(--mx-tinta);color:var(--mx-papel)}
/* El que no hay: tachado en diagonal, como la maqueta 16 */
.mx-talle:disabled{background:transparent;color:var(--mx-gris);border-color:var(--mx-linea);cursor:not-allowed}
.mx-talle:disabled::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top right,transparent calc(50% - .6px),var(--mx-linea-2) calc(50% - .6px),
    var(--mx-linea-2) calc(50% + .6px),transparent calc(50% + .6px))}
.mx-talles-ficha.is-falta .mx-talle:not(:disabled){animation:mx-temblor .5s var(--mx-ease)}
@keyframes mx-temblor{20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-2px)}80%{transform:translateX(2px)}}
.mx-ficha__aviso-talle{min-height:1.4em;font-size:13.5px;color:var(--mx-sale)}
.mx-ficha__agregar{margin-top:6px}
.mx-ficha__agregar .mx-ico{width:20px;height:20px}
.mx-ficha__agotada{display:grid;gap:14px;margin-top:22px;padding:20px;border:1px dotted var(--mx-tinta);border-radius:var(--mx-radio)}
.mx-ficha__agotada p{font-size:15.5px;line-height:1.6;color:var(--mx-tinta-2)}
/* Desplegables (H2 adentro del summary: válido y bueno para el SEO) */
.mx-desplegables{margin-top:28px;border-top:1px solid var(--mx-linea)}
.mx-desplegable{border-bottom:1px solid var(--mx-linea)}
.mx-desplegable>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:62px;list-style:none}
.mx-desplegable>summary::-webkit-details-marker{display:none}
.mx-desplegable__titulo{font-family:var(--f-mono);font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;line-height:1.2}
.mx-desplegable__icono{position:relative;flex:none;width:14px;height:14px}
.mx-desplegable__icono::before,.mx-desplegable__icono::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;
  margin-top:-.75px;background:currentColor;transition:transform .45s var(--mx-ease)}
.mx-desplegable__icono::after{transform:rotate(90deg)}
.mx-desplegable[open] .mx-desplegable__icono::after{transform:rotate(0deg)}
.mx-desplegable__cuerpo{padding:0 0 24px;font-size:15.5px;line-height:1.7;color:var(--mx-tinta-2)}
.mx-desplegable[open] .mx-desplegable__cuerpo{animation:mx-subir .45s var(--mx-ease)}
.mx-desplegable__cuerpo p+p,.mx-desplegable__cuerpo p+ul,.mx-desplegable__cuerpo ul+p{margin-top:.8em}
.mx-desplegable__cuerpo ul{padding-left:1.2em;margin:0}
.mx-desplegable__cuerpo a{text-decoration:underline;text-underline-offset:3px}
.mx-desplegable__cuerpo .mx-link{margin-top:14px;text-decoration:none}
.mx-ficha__sello{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:26px}
.mx-ficha__sello .mx-eyebrow{color:var(--mx-tinta-2)}
.mx-ficha__relac{padding-top:clamp(64px,8vw,128px);padding-bottom:clamp(64px,8vw,120px);margin-inline:calc(-1 * var(--mx-gutter))}
.mx-ficha__relac-h2{font-weight:800;font-size:clamp(28px,3.4vw,52px);line-height:1;letter-spacing:-.035em}
/* Barra fija de "Agregar al carrito" (celu). Setea --mx-bottom-bar para Mia. */
.mx-ficha-barra{position:fixed;left:0;right:0;bottom:0;z-index:44;display:flex;align-items:center;gap:12px;
  padding:10px var(--mx-gutter) calc(10px + env(safe-area-inset-bottom));
  background:rgba(250,248,244,.96);border-top:1px solid var(--mx-linea);
  -webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px)}
.mx-ficha-barra__info{flex:1;min-width:0;display:grid;gap:2px;line-height:1.2}
.mx-ficha-barra__talle{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mx-gris);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mx-ficha-barra__talle.is-elegido{color:var(--mx-tinta)}
.mx-ficha-barra__precio{font-weight:700;font-size:16px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mx-ficha-barra__precio small{font-weight:400;font-size:13px;color:var(--mx-gris);margin-left:4px}
.mx-ficha-barra .mx-btn{flex:none;min-height:50px;padding:0 20px}
@media (min-width:1000px){ .mx-ficha-barra{display:none} }

/* 19. MODAL PROPIO (<dialog>) ============================================== */
/* window.confirm/alert prohibidos: todo diálogo es éste. En celu es una hoja
   que sube desde abajo; en compu una tarjeta centrada. */
.mx-modal{width:100%;max-width:100%;max-height:92svh;margin:auto auto 0;padding:0;border:0;
  border-radius:22px 22px 0 0;background:var(--mx-papel);color:var(--mx-tinta);box-shadow:var(--mx-sombra-alta);overflow:hidden}
.mx-modal[open]{display:flex;flex-direction:column;animation:mx-modal-celu .5s var(--mx-ease)}
.mx-modal::backdrop{background:var(--mx-tinta-velo)}
.mx-modal__cabeza{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none;
  padding:12px 10px 12px 22px;border-bottom:1px solid var(--mx-linea)}
.mx-modal__titulo{font-weight:700;font-size:20px;letter-spacing:-.02em}
.mx-modal__cerrar{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;flex:none}
.mx-modal__cerrar:hover{background:var(--mx-arena)}
.mx-modal__cuerpo{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:22px 22px calc(28px + env(safe-area-inset-bottom))}
.mx-modal__cuerpo>*+*{margin-top:16px}
.mx-modal--video{background:var(--mx-noche);color:var(--mx-papel)}
@media (min-width:768px){
  .mx-modal{width:min(680px,calc(100vw - 2 * var(--mx-gutter)));max-height:min(86svh,860px);margin:auto;border-radius:var(--mx-radio-lg)}
  .mx-modal[open]{animation-name:mx-modal-compu}
  .mx-modal__cuerpo{padding:26px 28px 32px}
}
@keyframes mx-modal-celu{from{transform:translate3d(0,40px,0);opacity:.4}}
@keyframes mx-modal-compu{from{transform:translate3d(0,14px,0) scale(.985);opacity:0}}
.mx-guia{display:grid;gap:14px}
.mx-guia ol{margin:0;padding-left:1.2em;display:grid;gap:10px;font-size:15.5px;line-height:1.6;color:var(--mx-tinta-2)}
.mx-guia__acciones{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}

/* 20. AVISO (toast) ======================================================== */
.mx-aviso{position:fixed;z-index:50;left:var(--mx-gutter);right:var(--mx-gutter);top:calc(var(--mx-header-h) + 10px);
  display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 12px 12px 18px;
  border-radius:var(--mx-radio);background:var(--mx-tinta);color:var(--mx-papel);box-shadow:var(--mx-sombra-alta);
  font-size:14.5px;opacity:0;visibility:hidden;transform:translate3d(0,-10px,0);
  transition:opacity .35s var(--mx-ease),transform .5s var(--mx-ease),visibility 0s .5s}
.mx-aviso.is-visible{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.mx-aviso a{flex:none;display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:var(--mx-pill);
  background:var(--mx-papel);color:var(--mx-tinta);font-weight:600;font-size:14px}
@media (min-width:768px){ .mx-aviso{left:auto;width:420px} }

/* 21. BUSCADOR Y 404 ======================================================= */
.mx-busqueda{padding:clamp(28px,4vw,64px) var(--mx-gutter) clamp(72px,9vw,140px)}
.mx-busqueda__form{display:flex;align-items:center;gap:12px;margin:clamp(18px,2.4vw,32px) 0 clamp(28px,3vw,44px);
  padding-bottom:10px;border-bottom:1.5px solid var(--mx-tinta)}
.mx-busqueda__form>.mx-ico{width:26px;height:26px;color:var(--mx-gris)}
.mx-busqueda__input{flex:1;min-width:0;height:58px;border:0;background:transparent;outline:none;
  font-size:clamp(22px,3vw,44px);font-weight:600;letter-spacing:-.03em;-webkit-appearance:none;appearance:none}
.mx-busqueda__input::placeholder{color:rgba(20,18,16,.3)}
.mx-busqueda__input::-webkit-search-cancel-button{-webkit-appearance:none}
.mx-busqueda__btn{flex:none}
.mx-busqueda__cuenta{margin-bottom:clamp(20px,2.4vw,32px)}
.mx-busqueda__seguir{display:grid;gap:14px;margin-top:clamp(56px,6vw,96px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--mx-linea)}

.mx-404{position:relative;overflow:hidden;background:var(--mx-arena);padding:clamp(40px,7vw,120px) var(--mx-gutter) clamp(56px,8vw,140px)}
.mx-404__grid{display:grid;gap:clamp(32px,5vw,80px);align-items:center}
@media (min-width:1000px){ .mx-404__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)} }
.mx-404__textos{display:grid;gap:clamp(16px,2vw,24px);justify-items:start;min-width:0}
.mx-404__h1{font-weight:800;font-size:clamp(40px,6.4vw,104px);line-height:.94;letter-spacing:-.045em}
.mx-404__bajada{max-width:52ch;font-size:17px;line-height:1.6;color:var(--mx-tinta-2)}
.mx-404__form{display:flex;align-items:center;gap:10px;width:100%;max-width:560px;height:56px;padding:0 6px 0 18px;
  border:1px solid var(--mx-linea-2);border-radius:var(--mx-pill);background:var(--mx-papel)}
.mx-404__form .mx-ico{color:var(--mx-gris)}
.mx-404__form input{flex:1;min-width:0;height:100%;border:0;background:transparent;outline:none;font-size:16px;
  -webkit-appearance:none;appearance:none}
.mx-404__form .mx-btn{min-height:44px;padding:0 18px}
/* El pase "vuelo no encontrado" */
.mx-404__ticket{position:relative;display:grid;gap:18px;padding:clamp(20px,2.4vw,32px);border:1px dotted var(--mx-tinta);
  border-radius:var(--mx-radio-lg);background:var(--mx-papel);font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mx-tinta-2);box-shadow:var(--mx-sombra);min-width:0}
.mx-404__fila{display:flex;justify-content:space-between;gap:12px}
.mx-404__ruta{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;
  font-family:var(--f-sans);font-weight:800;font-size:clamp(40px,6vw,84px);line-height:.85;letter-spacing:-.05em;
  color:var(--mx-tinta);text-transform:none}
.mx-404__vuelo{position:relative;height:clamp(40px,5vw,64px)}
.mx-404__vuelo svg.mx-404__arco{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mx-404__avion{position:absolute;left:0;top:50%;width:24px;height:24px;margin-top:-12px;
  animation:mx-404-vuelo 3.6s var(--mx-ease-io) infinite}
@keyframes mx-404-vuelo{0%{left:0;opacity:0}12%{opacity:1}70%{left:calc(62% - 12px);opacity:1;transform:rotate(0)}
  82%{left:calc(66% - 12px);transform:rotate(22deg);opacity:.8}100%{left:calc(68% - 12px);transform:rotate(40deg);opacity:0}}
.mx-404__destino{color:var(--mx-gris)}
.mx-404__datos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding-top:16px;border-top:1px dotted var(--mx-linea-2)}
.mx-404__datos dt{opacity:.7;margin-bottom:6px}
.mx-404__datos dd{color:var(--mx-tinta);font-weight:500}
.mx-404__destinos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none;width:100%}
@media (min-width:768px){ .mx-404__destinos{grid-template-columns:repeat(4,minmax(0,1fr))} }
.mx-404__destinos a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:58px;padding:0 18px;
  border-radius:var(--mx-radio);background:var(--mx-papel);border:1px solid var(--mx-linea);font-weight:600;font-size:16px;
  transition:background-color .25s,border-color .25s,transform .4s var(--mx-ease)}
.mx-404__destinos a .mx-ico{width:18px;height:18px;transition:transform .45s var(--mx-ease)}
.mx-404__destinos a:hover{border-color:var(--mx-tinta);transform:translateY(-2px)}
.mx-404__destinos a:hover .mx-ico{transform:translateX(4px)}

/* 22. FORMULARIOS (base para checkout, cuenta, etc.) ======================= */
.mx-campo{display:grid;gap:7px;min-width:0}
.mx-campo>label,.mx-etiqueta-campo{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mx-tinta-2)}
.mx-input,.mx-select,.mx-textarea{width:100%;min-width:0;height:52px;padding:0 16px;border:1px solid var(--mx-linea-2);
  border-radius:12px;background:var(--mx-blanco);color:var(--mx-tinta);font-size:16px;outline:none;
  -webkit-appearance:none;appearance:none;transition:border-color .2s,box-shadow .2s}
.mx-textarea{height:auto;min-height:120px;padding:14px 16px;line-height:1.5;resize:vertical}
.mx-input:focus,.mx-select:focus,.mx-textarea:focus{border-color:var(--mx-tinta);box-shadow:0 0 0 3px rgba(20,18,16,.08)}
.mx-input::placeholder,.mx-textarea::placeholder{color:rgba(20,18,16,.4)}
.mx-input[aria-invalid="true"]{border-color:var(--mx-sale)}

/* 23. MOVIMIENTO REDUCIDO ================================================== */
/* Sin banderas de importancia: cada regla animada se apaga acá, después de definida y con
   la misma especificidad. La marquesina queda quieta y se desliza con el dedo. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms;animation-iteration-count:1;transition-duration:.01ms}
  .mx-adbar{overflow-x:auto;scrollbar-width:none}
  .mx-adbar::-webkit-scrollbar{display:none}
  .mx-adbar__pista{animation:none}
  .mx-adbar__grupo[aria-hidden="true"],.mx-adbar__pausa{display:none}
  .mx-cinta{overflow-x:auto;scrollbar-width:none}
  .mx-cinta__pista{animation:none}
  .mx-cinta__pista>[aria-hidden="true"]{display:none}
  .mx-btn,.mx-btn::before,.mx-btn__flecha,.mx-link,.mx-link .mx-ico,.mx-card__carta,.mx-card__dorso-foto,
  .mx-menu__panel,.mx-menu__link::after,.mx-menu__abrir .mx-ico,.mx-buscador,.mx-header__barra,.mx-header__velo,
  .mx-drawer,.mx-drawer__fondo,.mx-drawer__hoja,.mx-drawer__sub,.mx-drawer__boton .mx-ico,
  .mx-mia__pastilla,.mx-mia__enviar,.mx-galeria__foto img,.mx-aviso,.mx-talle,.mx-desplegable__icono::before,
  .mx-desplegable__icono::after,.mx-404__destinos a,.mx-404__destinos a .mx-ico,.mx-logo img,.mx-filtro>summary .mx-ico{transition:none}
  .mx-mia__panel.is-open,.mx-modal[open],.mx-filtro__panel,.mx-desplegable[open] .mx-desplegable__cuerpo,
  .mx-banners [data-banner].is-entrando,.mx-banners [data-banner].is-activo [data-kenburns],
  .mx-talles-ficha.is-falta .mx-talle:not(:disabled),.mx-mia__punto::after,.mx-mia__escribiendo i,
  .mx-pie__trayecto .mx-ico,.mx-404__avion{animation:none}
  .mx-404__avion{left:calc(50% - 12px)}
  .mx-pie__trayecto .mx-ico{left:calc(50% - 13px)}
}

/* `hidden` gana siempre, aunque la clase del elemento diga display:flex
   (va al final: misma especificidad que una clase, gana por orden). */
[hidden]{display:none}