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

/* Semana servida · el bloque queda fijo durante 175vh de scroll (25vh por día) mientras se sirven las filas.
   Sin JS o con movimiento reducido va en el flujo con la semana completa. */
.s-fuel-semana { padding: 0 var(--page-pad); }
.s-fuel-semana__pin { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s24); align-items: center; min-height: 100vh; padding: var(--s64) 0; }
@media (prefers-reduced-motion: no-preference) {
  .s-fuel-semana.is-armed .s-fuel-semana__pista { height: calc(100vh + 175vh); }
  .s-fuel-semana.is-armed .s-fuel-semana__pin { position: sticky; top: 0; height: 100vh; }
}
.s-fuel-semana__intro { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: var(--s24); }
.s-fuel-semana__intro p, .s-fuel-semana__titulo { margin: 0; }
.s-fuel-semana__lede { max-width: 440px; color: var(--muted); text-wrap: pretty; }

/* La tabla es el maestro Table de Fuel (.fuel-tabla en fuel-tokens.css); acá solo su lugar en la grilla y el punto. */
.s-fuel-semana__panel { grid-column: 7 / -1; }
.s-fuel-semana__punto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); vertical-align: 1px; }

/* Servir una fila: baja apenas y aparece, como un plato que se apoya en la mesa. */
.s-fuel-semana.is-armed tbody tr { opacity: 0; translate: 0 -12px; transition: opacity .4s var(--ease), translate .5s cubic-bezier(.3, .8, .3, 1); }
.s-fuel-semana.is-armed tbody tr.is-served { opacity: 1; translate: 0 0; }

/* Tu día, servido: cuatro platos en fila, las mismas fotos del hero. El que llega desde el hero queda marcado en rosa (selección). */
.s-fuel-semana__dia { display: flex; flex-direction: column; gap: var(--s24); padding: var(--s64) 0 128px; }
.s-fuel-semana__dia h3 { margin: 0; }
.s-fuel-semana__platos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s24); margin: 0; padding: 0; list-style: none; }
.s-fuel-semana__platos li { display: flex; flex-direction: column; gap: var(--s8); scroll-margin-top: 128px; }
.s-fuel-semana__platos figure { aspect-ratio: 3 / 4; margin: 0 0 var(--s8); outline: 2px solid transparent; outline-offset: 4px; transition: outline-color .4s var(--ease); }
.s-fuel-semana__platos li:target figure { outline-color: var(--rose); }
.s-fuel-semana__platos :is(p, h4) { margin: 0; }
.s-fuel-semana__platos p { color: var(--muted); }
.s-fuel-semana__nota { margin: 0; color: var(--muted); }

/* Una tabla que excede el alto disponible se lee en flujo: cada día se sirve al entrar. */
@media (max-width: 1199px) {
  .s-fuel-semana__pin { grid-template-columns: minmax(0, 1fr); gap: var(--s32); min-height: 0; padding-block: var(--s48); }
  .s-fuel-semana.is-armed .s-fuel-semana__pista { height: auto; }
  .s-fuel-semana.is-armed .s-fuel-semana__pin { position: static; height: auto; }
  .s-fuel-semana__intro, .s-fuel-semana__panel { grid-column: 1; }
  .s-fuel-semana__lede { max-width: 40ch; }
  .s-fuel-semana__platos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s32) var(--s24); }
  .s-fuel-semana__dia { padding-block: var(--s48); }
}
@media (max-width: 809px) {
  .s-fuel-semana__panel { padding: var(--s24); }
  .s-fuel-semana .fuel-tabla__head .t-fuel-table { line-height: 1.15; }
  .s-fuel-semana table, .s-fuel-semana tbody { display: block; }
  /* La cabecera sigue disponible para lectores de pantalla; cada celda repite su rótulo visual. */
  .s-fuel-semana thead { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
  .s-fuel-semana tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-block: var(--s16); border-bottom: 1px solid var(--t-line); }
  .s-fuel-semana tbody th { grid-column: 1 / -1; padding: 0 0 var(--s12); border: 0; }
  .s-fuel-semana td.fuel-tabla__valor { width: auto; padding: 0; border: 0; text-align: left; }
  .s-fuel-semana td::before { display: block; margin-bottom: var(--s8); font: 400 12px/1.33 var(--font-mono); text-transform: uppercase; color: var(--muted); }
  .s-fuel-semana td:nth-child(2)::before { content: 'Antes'; }
  .s-fuel-semana td:nth-child(3)::before { content: 'Durante'; }
  .s-fuel-semana td:nth-child(4)::before { content: 'Después'; }
  .s-fuel-semana__platos { grid-template-columns: minmax(0, 1fr); }
  .s-fuel-semana__platos figure { aspect-ratio: 4 / 3; }
  .s-fuel-semana__lede { font-size: 18px; }
}