/* =======================================================================
   ARRENDADORA ABM — Hero con historia ligada al scroll (motion.js)
   ======================================================================= */
.hero.hero--motion{
  display:block;
  height:720vh;
  min-height:0;
  padding:0;
  overflow:visible;            /* overflow:hidden rompe el sticky */
  background:#0b1311;
}
.mx-sticky{
  position:sticky;
  top:0;
  height:100vh;
  height:100svh;
  overflow:hidden;
  isolation:isolate;
}

/* Escenario: video + tinte */
.mx-stage{
  --dim:0;
  position:absolute;
  inset:0;
  z-index:0;
}
#mxCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.mx-stage::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(8,14,12,.78) 0%,rgba(8,14,12,.35) 42%,rgba(8,14,12,0) 70%),
    linear-gradient(180deg,rgba(8,14,12,.45) 0%,rgba(8,14,12,0) 22%,rgba(8,14,12,0) 70%,rgba(8,14,12,.8) 100%),
    rgba(8,14,12,var(--dim));
  pointer-events:none;
}

/* ---- Rótulos: se editan en el HTML ---- */
.mx-label{
  position:absolute;
  z-index:3;
  left:max(24px,calc((100vw - var(--container)) / 2 + 24px));
  bottom:clamp(110px,18vh,200px);
  max-width:min(700px,calc(100vw - 48px));
  color:#fff;
  pointer-events:none;
}
.mx-label > *{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .75s var(--ease-out),transform .75s var(--ease-out);
}
.mx-label.is-on > *{opacity:1;transform:none}
.mx-label.is-on > *:nth-child(1){transition-delay:.10s}
.mx-label.is-on > *:nth-child(2){transition-delay:.22s}
.mx-label.is-on > *:nth-child(3){transition-delay:.34s}
.mx-label__tag{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:22px;
  color:#6ff0b0;
  font-family:var(--ff-head);
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.mx-label__tag::before{
  content:"";
  width:28px;height:1px;
  background:currentColor;
  box-shadow:0 0 10px currentColor;
}
.mx-label__title{
  display:block;
  font-family:var(--ff-head);
  font-size:clamp(2.2rem,5.4vw,5.2rem);
  font-weight:800;
  line-height:1.02;
  letter-spacing:-.045em;
  text-wrap:balance;
}
.mx-label__text{
  display:block;
  margin-top:22px;
  max-width:540px;
  font-size:clamp(1rem,1.35vw,1.25rem);
  line-height:1.6;
  color:rgba(255,255,255,.8);
}

/* Rótulos de la vuelta 360: a la izquierda, en forma de etiqueta técnica */
.mx-label--spec{bottom:auto;top:50%;margin-top:-40px}
.mx-label--spec .mx-label__title{font-size:clamp(2rem,4.4vw,4.2rem)}

/* Rótulo de la flotilla: arriba, para no pisar las unidades */
.mx-label--top{bottom:auto;top:calc(var(--header-h) + 5vh)}
.mx-label--fleet{max-width:min(860px,calc(100vw - 48px))}
.mx-label--fleet .mx-label__title{font-size:clamp(2.1rem,4.6vw,4.4rem)}

/* ---- Flotilla ---- */
.mx-fleet{
  --line:0;
  position:absolute;
  z-index:2;
  left:50%;
  bottom:clamp(70px,13vh,140px);
  width:min(1180px,92vw);
  aspect-ratio:1700/370;
  transform:translateX(-50%);
  pointer-events:none;
  visibility:hidden;
  transition:transform 1s var(--ease-out),opacity 1s var(--ease-out);
}
.mx-fleet.is-on{visibility:visible}
.mx-fleet.is-back{opacity:.22;transform:translateX(-50%) translateY(18%) scale(.88)}
.mx-unit{
  position:absolute;
  top:0;
  height:100%;
  opacity:0;
  will-change:transform,opacity;
}
.mx-unit img{
  width:100%;height:100%;
  object-fit:contain;
  object-position:bottom center;
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.55));
}
.mx-fleet__floor{
  position:absolute;
  left:0;right:0;
  bottom:-9%;
  height:2px;
  background:linear-gradient(90deg,transparent,#3ee89a 20%,#3ee89a 80%,transparent);
  box-shadow:0 0 14px #3ee89a,0 0 34px rgba(62,232,154,.5);
  transform:scaleX(var(--line));
  transform-origin:center;
}
.mx-fleet__glow{
  position:absolute;
  left:5%;right:5%;
  bottom:-22%;
  height:44%;
  background:radial-gradient(ellipse at center,rgba(49,154,100,.35),transparent 70%);
  opacity:var(--line);
}

/* ---- Cierre: hero final ---- */
.mx-final.hero__content{
  position:absolute;
  z-index:4;
  top:50%;
  left:50%;
  width:min(100%,var(--container));
  transform:translate(-50%,-58%);
  opacity:1;
  pointer-events:none;
}
.mx-final.is-ready{pointer-events:auto}
.mx-final > .hero__badge,
.mx-final > .hero__sub,
.mx-final > .hero__actions{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .75s var(--ease-out),transform .75s var(--ease-out);
}
.mx-final.is-ready > .hero__badge{opacity:1;transform:none;transition-delay:.10s}
.mx-final.is-ready > .hero__sub{opacity:1;transform:none;transition-delay:.34s}
.mx-final.is-ready > .hero__actions{opacity:1;transform:none;transition-delay:.46s}
.mx-final:not(.is-ready) .hero__title .line{opacity:0;transform:translateY(42px);transition-delay:0s}
.mx-final.is-ready .hero__title .line:nth-child(1){transition-delay:.22s}
.mx-final.is-ready .hero__title .line:nth-child(2){transition-delay:.30s}
.mx-final .hero__title{font-size:clamp(2.7rem,7.4vw,6.2rem)}

/* ---- Barra de avance ---- */
.mx-progress{
  position:absolute;
  z-index:5;
  left:50%;
  bottom:28px;
  width:min(220px,50vw);
  height:2px;
  transform:translateX(-50%);
  background:rgba(255,255,255,.16);
  border-radius:2px;
  overflow:hidden;
}
.mx-progress span{
  display:block;
  height:100%;
  background:#3ee89a;
  box-shadow:0 0 8px #3ee89a;
  transform:scaleX(0);
  transform-origin:left;
}
.mx-hint{
  position:absolute;
  z-index:5;
  left:50%;
  bottom:42px;
  transform:translateX(-50%);
  color:rgba(255,255,255,.6);
  font-family:var(--ff-head);
  font-size:.66rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  transition:opacity .5s ease;
}
.hero--motion.is-live .mx-hint{opacity:1}

/* ---- Móvil ---- */
@media (max-width:760px){
  .hero.hero--motion{height:620vh}
  .mx-stage::after{
    background:
      linear-gradient(180deg,rgba(8,14,12,.35) 0%,rgba(8,14,12,0) 16%,rgba(8,14,12,0) 50%,rgba(8,14,12,.78) 70%,rgba(8,14,12,.9) 100%),
      rgba(8,14,12,var(--dim));
  }
  .mx-label{left:24px;right:24px;bottom:112px}
  .mx-label--spec{top:auto;bottom:112px;margin-top:0}
  .mx-label--top{top:auto;bottom:112px}
  .mx-label--fleet{top:calc(34% + 21vw + 44px);bottom:auto}
  .mx-label__tag{margin-bottom:18px;font-size:.74rem}
  .mx-label__title{font-size:clamp(2rem,9vw,2.6rem);line-height:1.1;letter-spacing:-.035em}
  .mx-label--spec .mx-label__title{font-size:clamp(2rem,9vw,2.6rem)}
  .mx-label__text{margin-top:16px;font-size:1rem;line-height:1.6}
  .mx-fleet{width:96vw;top:34%;bottom:auto}
  .mx-fleet__floor{bottom:-16%}
  .mx-final.hero__content{top:auto;bottom:84px;transform:translateX(-50%)}
  .mx-final .hero__badge{margin-bottom:22px}
  .mx-final .hero__title{margin-bottom:20px;font-size:clamp(2.4rem,11vw,3.4rem);line-height:1.04}
  .mx-final .hero__sub{margin-bottom:30px;line-height:1.65}
  .mx-final .hero__actions{gap:12px}
}

/* ---- Movimiento reducido: hero de una pantalla, todo visible ---- */
.hero--motion.is-static{height:100svh}
@media (prefers-reduced-motion:reduce){
  .mx-label > *,.mx-final > *,.mx-final .hero__title .line,.mx-unit{transition:none!important}
  .mx-label{display:none}
}

/* Móvil: recortar el desborde horizontal de las secciones del sitio
   (tarjetas y escenas con transform ensanchaban el documento y aparecía
   una franja a la derecha). Nunca en html ni en el hero: rompe el sticky. */
main > section:not(.hero--motion),
.footer{overflow-x:clip}

/* =======================================================================
   COREOGRAFÍA (choreo.js)
   ======================================================================= */
.choreo .unit,.choreo .benefit{transform-origin:center bottom}
.choreo .about__media-img{will-change:clip-path}

/* Footer: se arma al aparecer — primero la línea, luego cada bloque */
.footer{position:relative}
.footer::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--green) 20%,#6ff0b0 50%,var(--green) 80%,transparent);
  box-shadow:0 0 18px rgba(62,232,154,.55);
  transform:scaleX(0);
  transition:transform 1.3s var(--ease-out);
}
.footer::after{
  content:"";
  position:absolute;
  top:0;left:50%;
  width:min(900px,90vw);height:260px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at top,rgba(49,154,100,.22),transparent 70%);
  opacity:0;
  transition:opacity 1.6s ease .3s;
  pointer-events:none;
}
.choreo .footer.is-in::before{transform:scaleX(1)}
.choreo .footer.is-in::after{opacity:1}
.choreo .footer .fx{
  opacity:0;
  transform:translateY(34px);
  filter:blur(6px);
  transition:opacity .9s var(--ease-out) var(--fx-d,0ms),transform .9s var(--ease-out) var(--fx-d,0ms),filter .9s var(--ease-out) var(--fx-d,0ms);
}
.choreo .footer .footer__social-link.fx{transform:translateY(18px) scale(.5)}
.choreo .footer.is-in .fx{opacity:1;transform:none;filter:none}
.choreo .video-embed{will-change:clip-path}
.footer > *{position:relative;z-index:1}

/* Header sobre el hero oscuro: cristal oscuro en vez de barra blanca */
.header.on-dark.is-scrolled{
  background:rgba(8,14,12,.5);
  border-bottom-color:rgba(255,255,255,.06);
  box-shadow:0 8px 28px rgba(0,0,0,.25);
}
.header.on-dark.is-scrolled .header__logo img{filter:brightness(0) invert(1)}
.header.on-dark.is-scrolled .nav__link{color:var(--white)}
.header.on-dark.is-scrolled .burger span{background:var(--white)}