.m-entradas .rv{
  opacity: 0; transform: translateY(22px);
  transition: opacity var(--dur-3) var(--curva-salida), transform var(--dur-3) var(--curva-salida);
}
.m-entradas .rv.visible{ opacity: 1; transform: none; }

.m-carga [data-carga]{ opacity: 0; transform: translateY(16px); }
.m-carga [data-carga][data-desde="arriba"]{ transform: translateY(-12px); }
.m-carga.cargado [data-carga]{
  opacity: 1; transform: none;
  transition: opacity var(--dur-3) var(--curva-salida) var(--dc, 0ms), transform 1s var(--curva-salida) var(--dc, 0ms);
}

.m-reticula .fila::before{ transform: scaleY(0); transform-origin: 50% 0; transition: transform 1.2s var(--curva) var(--d, 0ms); }
.m-reticula .fila::after{ transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.2s var(--curva) var(--d, 0ms); }
.m-reticula .fila.trazada::before, .m-reticula .fila.trazada::after{ transform: none; }
.m-reticula .sec .franja .nodo{ transition: background-color .5s var(--curva) .4s, transform var(--dur-2) var(--curva-salida); }
.m-reticula .sec.recorrida .franja .nodo{ background: currentColor; }

.m-reticula .s-valor .pilar:nth-child(2){ --i: 1; }
.m-reticula .s-valor .pilar:nth-child(3){ --i: 2; }
.m-reticula .s-valor .pilar:nth-child(4){ --i: 3; }
.m-reticula .s-valor .pilar:not(:last-child)::after{ transform: scaleX(0); transform-origin: 0 50%; }
.m-reticula .s-valor .pilares.ruta-on .pilar:not(:last-child)::after{ transform: none; transition: transform .5s var(--curva) calc(.45s + var(--i, 0) * .55s); }

.m-reticula .s-valor .pilar:last-child::after{ transform: scaleX(0); transform-origin: 0 50%; }
.m-reticula .s-valor .pilares.ruta-on .pilar:last-child::after{ transform: none; transition: transform .9s var(--curva-salida) calc(.45s + 3 * .55s); }

.m-entradas.m-reticula .s-valor .pilar.rv{ opacity: 1; transform: none; }
@media (min-width: 768px){
  .m-reticula .s-valor .pilares:not(.ruta-on) .pilar .icono{ scale: 0; }
  .m-reticula .s-valor .pilares:not(.ruta-on) .pilar > div{ opacity: 0; }
  .m-reticula .s-valor .pilares.ruta-on .pilar .icono{ animation: pilar-icono .5s var(--curva-salida) calc(.2s + var(--i, 0) * .55s) backwards; }
  .m-reticula .s-valor .pilares.ruta-on .pilar > div{ animation: pilar-texto .9s var(--curva-salida) calc(.35s + var(--i, 0) * .55s) backwards; }
}
@keyframes pilar-icono{ from{ scale: 0; } }
@keyframes pilar-texto{ from{ opacity: 0; transform: translateY(14px); } }

.m-reticula .s-calidad .lc .icono{ opacity: .35; }
.m-reticula .s-calidad .lc.hito .icono{ opacity: 1; }

.m-entradas .s-cta .campos > *{ opacity: 0; transform: translateY(12px); transition: opacity .6s var(--curva-salida) calc(var(--k, 0) * 70ms + .2s), transform .7s var(--curva-salida) calc(var(--k, 0) * 70ms + .2s); }
.m-entradas .s-cta .campos.visible > *{ opacity: 1; transform: none; }

.m-titulos .t-display .linea, .m-titulos .t-h2 .linea{ overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.m-titulos .t-display .li, .m-titulos .t-h2 .li{
  display: inline-block; transform: translateY(112%);
  transition: transform 1.1s var(--curva-salida) var(--d, 0ms);
}
.m-titulos .titulo-visible .li{ transform: none; }

.m-imagenes .modulo img{ opacity: 0; transform: scale(1.12); transition: opacity 1.2s var(--curva-salida), transform 1.6s var(--curva-salida); }
.m-imagenes .modulo.revelada img{ opacity: 1; transform: none; }
.m-imagenes .modulo.revelada:hover img{ transform: scale(1.035); }
.m-imagenes .s-hero .foto{ opacity: 0; transition: opacity 1.4s var(--curva-salida); }
.m-imagenes .s-hero .foto.revelada{ opacity: 1; }
.m-imagenes .s-hero .foto img{ will-change: transform; }

.telon{ display: none; }
.m-imagenes .modulo.cortina .telon{ display: block; position: absolute; inset: 0; z-index: 4; pointer-events: none; background: var(--telon, var(--papel)); transform-origin: 50% 100%; }
.m-imagenes .modulo.cortina.revelada .telon{ transform: scaleY(0); transition: transform 1.15s var(--curva) var(--di, 0ms); }
.m-imagenes .modulo.cortina.rv{ opacity: 1; transform: none; }
.m-imagenes .modulo.cortina img{ opacity: 1; transform: scale(1.22); }
.m-imagenes .modulo.cortina.revelada img{ transform: none; transition: transform 1.8s var(--curva-salida) var(--di, 0ms); }
.m-imagenes .modulo.cortina.revelada:hover img{ transform: scale(1.035); transition: transform 1.2s var(--curva); }
.m-imagenes .modulo.cortina .sobre > h3{ opacity: 0; transform: translateY(16px); }
.m-imagenes .modulo.cortina.revelada .sobre > h3{
  opacity: 1; transform: none;
  transition: opacity .8s var(--curva-salida) calc(var(--di, 0ms) + .6s), transform .9s var(--curva-salida) calc(var(--di, 0ms) + .6s);
}

.cruce{
  position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--g05); opacity: 0;
  transition: opacity .4s var(--curva), transform .35s var(--curva-salida);
}
.cruce.sobre-oscuro{ background: var(--blanco); }
.cruce.activo{ opacity: .8; }

.recorrido{
  position: fixed; left: 18px; top: 50%; z-index: 45; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 14px; color: var(--blanco);
  transition: color var(--dur-2);
}
.recorrido::before{ content: ""; position: absolute; left: 4px; top: 4px; bottom: 4px; width: 1px; background: currentColor; opacity: .3; }
.recorrido.sobre-claro{ color: var(--turquesa-oscuro); }
.recorrido a{ position: relative; display: flex; align-items: center; color: inherit; text-decoration: none; }
.recorrido .punto{
  width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid currentColor; background: transparent;
  transition: background-color var(--dur-1), transform var(--dur-2) var(--curva-salida);
}
.recorrido a.pasado .punto{ background: currentColor; }
.recorrido a.actual .punto{ background: currentColor; transform: scale(1.5); }
.recorrido .rot{
  position: absolute; left: 20px; white-space: nowrap;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  opacity: 0; transform: translateX(-6px); transition: opacity var(--dur-1), transform var(--dur-1);
  pointer-events: none;
}
.recorrido a:hover .rot, .recorrido a:focus-visible .rot{ opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition-duration: 0s !important; animation: none !important; }
  .m-entradas .rv{ opacity: 1; transform: none; }

  .carrusel .pista{ flex-wrap: wrap; width: 100%; }
  .carrusel .logo-cliente[aria-hidden="true"]{ display: none; }
}