@import url('/styles/fuel-tokens.css');
.s-fuel-cierre { padding: var(--s64) var(--page-pad); background: var(--bg-dark); color: var(--ink-on-dark); overflow: hidden; }
.s-fuel-cierre :is(h2,p) { margin: 0; }
.s-fuel-cierre .s-fuel-cierre__meta { display: flex; gap: var(--s24); margin-bottom: var(--s32); }
.s-fuel-cierre .s-fuel-cierre__meta > span { color: var(--brand); }
.s-fuel-cierre .s-fuel-cierre__diptych { position: relative; display: grid; grid-template-columns: 1fr 1fr; }
.s-fuel-cierre .s-fuel-cierre__diptych > .photo { height: 480px; }
.s-fuel-cierre .s-fuel-cierre__mesa { border-radius: 8px 0 0 8px; }
.s-fuel-cierre .s-fuel-cierre__meta-photo { border-radius: 0 8px 8px 0; }
.s-fuel-cierre .s-fuel-cierre__meta-photo img { object-position: center 65%; }
/* El titular cruza 40 px el borde inferior del díptico (como la grilla rota): sobre el plato claro el blanco no se leía
   (1,08:1), así casi toda la letra queda sobre noche. "mesa" sigue del lado de la mesa y "meta" del de la meta. */
.s-fuel-cierre .s-fuel-cierre__diptych { margin-bottom: 104px; }
.s-fuel-cierre h2 { position: absolute; top: calc(100% - 40px); left: calc(-1 * var(--s32)); width: 100%; text-align: center; white-space: nowrap; }
.s-fuel-cierre .s-fuel-cierre__copy { display: flex; flex-direction: column; align-items: center; gap: var(--s24); margin-top: var(--s48); text-align: center; }
.s-fuel-cierre .s-fuel-cierre__copy p { max-width: 720px; }
@media (prefers-reduced-motion: no-preference) {
 .s-fuel-cierre.is-animated .s-fuel-cierre__mesa { transform: translateX(-64px); }
 .s-fuel-cierre.is-animated .s-fuel-cierre__meta-photo { transform: translateX(64px); }
 .s-fuel-cierre.is-animated .photo { transition: transform 1.2s var(--ease); }
 .s-fuel-cierre.is-animated h2 { opacity: 0; transition: opacity .8s var(--ease) .8s; }
 .s-fuel-cierre.is-animated.is-in .photo { transform: none; }
 .s-fuel-cierre.is-animated.is-in h2 { opacity: 1; }
}

@media (max-width: 1199px) {
  .s-fuel-cierre { padding-block: var(--s48); }
  .s-fuel-cierre .s-fuel-cierre__diptych { margin-bottom: 0; }
  .s-fuel-cierre h2 { position: relative; grid-column: 1 / -1; top: auto; left: auto; margin-top: -40px; white-space: normal; background: var(--bg-dark); }
  .s-fuel-cierre .s-fuel-cierre__copy a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
  .s-fuel-cierre :is(a, button):focus-visible { outline-color: var(--ink-on-dark); }
}
@media (max-width: 809px) {
  .s-fuel-cierre .s-fuel-cierre__diptych > .photo { height: 240px; }
  .s-fuel-cierre h2 { font-size: 56px; line-height: 1.08; }
  .s-fuel-cierre .s-fuel-cierre__copy { margin-top: var(--s32); }
  .s-fuel-cierre.is-animated .s-fuel-cierre__mesa { transform: translateX(-24px); }
  .s-fuel-cierre.is-animated .s-fuel-cierre__meta-photo { transform: translateX(24px); }
  .s-fuel-cierre.is-animated.is-in .photo { transform: none; }
}
@media (max-width: 1199px) and (prefers-reduced-motion: reduce) {
  .s-fuel-cierre.is-animated .photo { transform: none; transition: none; }
  .s-fuel-cierre.is-animated h2 { opacity: 1; transition: none; }
}
@media (max-width: 809px) {
  /* El plato claro no permite texto blanco: respaldo noche sólido en el cruce de 40 px. */
  .s-fuel-cierre h2 { text-wrap: balance; }
}