@import url('/styles/fuel-tokens.css');

/* Situaciones · sobre el lienzo claro, como Mobius (Juanma 21/10; antes lima). El titular entra desordenado y se arma con el scroll; el cierre aparece palabra por palabra. */
.s-fuel-situaciones { overflow: clip; padding: var(--s64) var(--page-pad) 160px; }
.s-fuel-situaciones__volanta { margin: 0; }
/* Espacio vacío antes del titular, como Mobius (800 px allá): ahí flotan las palabras todavía sueltas. */
.s-fuel-situaciones__frase { max-width: 1240px; margin: 45vh 0 0; text-wrap: balance; }
.s-fuel-situaciones__palabras span { display: inline-block; translate: calc(var(--dx) * (1 - var(--p, 1))) calc(var(--dy) * (1 - var(--p, 1))); }
.s-fuel-situaciones__cierre { display: flex; flex-direction: column; gap: var(--s16); margin: 128px 0 0 calc((100% + var(--s24)) / 12 * 7); }
.s-fuel-situaciones__cierre p { margin: 0; }
/* "¿Te suena?": un paso más chico que display-m (56 → 48; 40 → 32 en móvil) y en el gris de apoyo del DS (Juanma 22/10). */
.s-fuel-situaciones__cierre .t-display-m { font-size: var(--h1); color: var(--muted); }

/* Revelado de Mobius: cada palabra sube desde adentro de su propia máscara, 600 ms, una tras otra. */
.s-fuel-situaciones .m { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.s-fuel-situaciones .m > span { display: inline-block; translate: 0 140%; transition: translate .6s cubic-bezier(.4, 1, .4, 1) var(--d, 0ms); }
.s-fuel-situaciones .is-in .m > span { translate: 0 0; }

/* PRUEBA ?situaciones=desarma (scripts/fuel-situaciones.js): pista de 260vh con la frase pegada en pantalla; las palabras
   que caen se recortan en el borde de la pantalla y "¿Te suena?" toma el lugar de la segunda oración. */
.s-fuel-situaciones.is-desarma { height: 260vh; padding: 0; overflow: visible; }
.s-fuel-situaciones__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; padding: calc(2 * var(--s64)) var(--page-pad) 0; } /* 128: debajo de la nav */
.is-desarma .s-fuel-situaciones__frase { margin-top: 14vh; }
.is-desarma .s-fuel-situaciones__palabras span { will-change: transform; }
.is-desarma .s-fuel-situaciones__cierre { position: absolute; top: var(--top, 50%); left: var(--page-pad); margin: var(--s24) 0 0; }

@media (max-width: 1199px) {
  .s-fuel-situaciones { padding-block: var(--s48); }
  .s-fuel-situaciones__frase { margin-top: 32vh; }
  .s-fuel-situaciones__cierre { margin-top: var(--s64); margin-left: 50%; }
  .s-fuel-situaciones__pin { padding-top: 112px; height: 100svh; }
  .s-fuel-situaciones.is-desarma .s-fuel-situaciones__frase { margin-top: var(--s48); }
}
@media (max-width: 809px) {
  .s-fuel-situaciones__frase { font-size: 48px; line-height: 1.08; text-wrap: normal; }
  .s-fuel-situaciones__cierre { margin: var(--s48) 0 0; }
  .s-fuel-situaciones__cierre .t-display-m { font-size: var(--h2); }
  .s-fuel-situaciones.is-desarma .s-fuel-situaciones__frase { font-size: clamp(32px, 10.25vw, 48px); margin-top: var(--s32); }
  .s-fuel-situaciones.is-desarma .s-fuel-situaciones__cierre { margin-top: var(--s24); }
}
@media (max-width: 1199px) {
  @media (prefers-reduced-motion: reduce) {
    .s-fuel-situaciones__frase { margin-top: var(--s48); }
  }
}

@media (max-width: 809px) and (prefers-reduced-motion: reduce) {
  .s-fuel-situaciones .s-fuel-situaciones__frase { font-size: clamp(32px, 10.25vw, 48px); }
}