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

/* Hero "platos sobre la mesa" · del hero de Mobius queda la entrada, la salida y el titular gigante; las cuatro tarjetas
   se reparten de izquierda a derecha como cartas sobre una mesa (Juanma 21/10), 15 % más chicas que en Mobius
   (42,5vh × 56,67vh, 3:4), para que se vea que son comidas distintas y se lea el titular. */
.s-fuel-hero {
  --ink-out: cubic-bezier(.7, 0, 1, .6);   /* salida medida en Mobius: 770 ms */
  --ink-in: cubic-bezier(.3, .8, .3, 1);   /* entrada: 1,1 s */
  --w: 42.5vh; --paso: calc((100% - var(--w)) / 3);
  position: relative; overflow: clip;
  min-height: calc(100vh - 40px);
  padding: 128px var(--page-pad) var(--s32);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 1fr auto; column-gap: var(--s24);
}
.s-fuel-hero__intro { grid-column: 1 / span 3; grid-row: 1; position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s16); }
.s-fuel-hero__intro p { margin: 0; }
.s-fuel-hero__lede { font: 400 var(--body-lg)/1.45 var(--font-body); text-wrap: pretty; }
.s-fuel-hero__accion { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s16); margin-top: var(--s16); }
.s-fuel-hero__link { font: 500 var(--body-sm)/1 var(--font-body); text-underline-offset: 4px; }

/* Titular: Zondaya a tamaño de marca, como la palabra gigante de Mobius. El DS fija 104; esto es una excepción para el hero. */
/* Va por encima de los platos para que el titular se lea entero (Juanma 21/10); no toma los clics de los platos. */
.s-fuel-hero__titulo { grid-column: 1 / -1; grid-row: 2; position: relative; z-index: 2; pointer-events: none; margin: 0; font: 400 184px/.9 "Zondaya", Georgia, serif; letter-spacing: -.02em; white-space: nowrap; }
/* El bloque del resalte toma el alto de la línea y no el de la fuente (Zondaya trae ascendente y descendente muy altos). */
.s-fuel-hero__titulo .highlight { display: inline-block; padding: .04em .06em 0; line-height: .78; }

/* Mesa: de la columna 4 al borde derecho. Cada plato se mueve con translate (entrar, salir) y gira con rotate. */
.s-fuel-hero__mesa { grid-column: 4 / -1; grid-row: 1; position: relative; z-index: 1; height: calc(56.67vh + 40px); margin: -8px var(--s24) 0 var(--s48); }
.s-fuel-hero__plato {
  position: absolute; top: var(--top); left: calc(var(--i) * var(--paso)); width: var(--w); aspect-ratio: 3 / 4;
  translate: 0 var(--y, 0); rotate: var(--r); color: var(--ink); text-decoration: none;
  transition: translate var(--dur, 0s) var(--curve, linear) var(--delay, 0s), rotate .7s cubic-bezier(.3, .7, .2, 1), scale .7s cubic-bezier(.3, .7, .2, 1);
}
.s-fuel-hero__plato:nth-child(1) { --i: 0; --r: -6deg; --top: 24px; --orden: 0ms; }
.s-fuel-hero__plato:nth-child(2) { --i: 1; --r: 3deg;  --top: 0px;  --orden: 100ms; }
.s-fuel-hero__plato:nth-child(3) { --i: 2; --r: -3deg; --top: 40px; --orden: 200ms; }
.s-fuel-hero__plato:nth-child(4) { --i: 3; --r: 5deg;  --top: 12px; --orden: 300ms; }
/* Al pasar el mouse o con foco, el plato se endereza y se levanta sobre los otros. */
.s-fuel-hero__plato:is(:hover, :focus-visible) { z-index: 5; rotate: 0deg; scale: 1.04; }
.s-fuel-hero__plato:focus-visible { outline-offset: 4px; }
.s-fuel-hero__rotulo { position: absolute; left: var(--s12); bottom: var(--s12); padding: var(--s4) var(--s8); border-radius: var(--r-control); background: var(--paper); }

/* Estados que pone scripts/fuel-hero.js (sin JS o con movimiento reducido quedan servidos y quietos). */
.s-fuel-hero[data-platos="abajo"] .s-fuel-hero__plato { --y: 100vh; --dur: 0s; }
.s-fuel-hero[data-platos="servidos"] .s-fuel-hero__plato { --y: 0; --dur: 1.1s; --curve: var(--ink-in); --delay: calc(var(--orden) + var(--espera, 0ms)); }
.s-fuel-hero[data-platos="fuera"] .s-fuel-hero__plato { --y: -100vh; --dur: .77s; --curve: var(--ink-out); --delay: var(--orden); }
@media (prefers-reduced-motion: reduce) { .s-fuel-hero__plato:is(:hover, :focus-visible) { rotate: var(--r); scale: none; } }

@media (max-width: 1199px) {
  .s-fuel-hero { --w: 25vw; min-height: 0; padding-top: 128px; row-gap: var(--s32); }
  .s-fuel-hero__intro { grid-column: 1 / span 4; }
  .s-fuel-hero__mesa { grid-column: 5 / -1; height: 40vw; margin: 0 var(--s16); }
  .s-fuel-hero__titulo { font-size: clamp(80px, 12vw, 144px); }
  .s-fuel-hero__link { display: inline-flex; align-items: center; min-height: 44px; line-height: 1.4; }
  .s-fuel-hero__rotulo { left: var(--s8); right: var(--s8); bottom: var(--s8); width: fit-content; }
  .s-fuel-hero a:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
}
@media (max-width: 809px) {
  .s-fuel-hero { display: flex; flex-direction: column; gap: var(--s24); padding: 112px var(--page-pad) var(--s48); }
  .s-fuel-hero__intro { gap: var(--s12); }
  .s-fuel-hero__lede { max-width: 32ch; font-size: 18px; }
  .s-fuel-hero__accion { margin-top: 0; }
  .s-fuel-hero__mesa { --w: 42%; width: 100%; height: auto; aspect-ratio: 1 / 1.2; margin: 0; flex: none; }
  .s-fuel-hero__plato:nth-child(1) { left: 4%; --top: 0px; }
  .s-fuel-hero__plato:nth-child(2) { left: 53%; --top: 8px; }
  .s-fuel-hero__plato:nth-child(3) { left: 5%; --top: 54%; }
  .s-fuel-hero__plato:nth-child(4) { left: 52%; --top: 56%; }
  .s-fuel-hero__rotulo { font-size: 12px; letter-spacing: .04em; padding: var(--s4); }
  .s-fuel-hero__titulo { font-size: clamp(48px, 16vw, 96px); white-space: normal; line-height: 1; }
}
@media (max-width: 1199px) {
  /* El rótulo más largo queda completo en la zona descubierta de la segunda carta. */
  .s-fuel-hero__plato:nth-child(2) { z-index: 2; }
  .s-fuel-hero__plato:nth-child(4) { z-index: 3; }
  .s-fuel-hero__plato:nth-child(2) .s-fuel-hero__rotulo { max-width: 120px; }
  .s-fuel-hero__plato:is(:hover, :focus-visible) { z-index: 5; }
}

@media (max-width: 809px) {
  /* Una sola mesa en abanico deja el mensaje completo en la primera pantalla. */
  .s-fuel-hero { gap: var(--s16); padding-top: 96px; padding-bottom: var(--s24); }
  .s-fuel-hero__mesa { --w: 34%; height: calc((100vw - 48px) * .454 + 32px); aspect-ratio: auto; }
  .s-fuel-hero__plato:nth-child(1) { left: 2%; --top: 16px; }
  .s-fuel-hero__plato:nth-child(2) { left: 23%; --top: 0px; }
  .s-fuel-hero__plato:nth-child(3) { left: 44%; --top: 24px; z-index: 3; }
  .s-fuel-hero__plato:nth-child(4) { left: 64%; --top: 8px; z-index: 4; }
  .s-fuel-hero__plato:is(:hover, :focus-visible) { z-index: 5; }
  .s-fuel-hero__rotulo { left: var(--s4); right: var(--s4); font-size: 12px; letter-spacing: 0; }
  .s-fuel-hero__titulo { font-size: clamp(44px, 12vw, 96px); }
}
@media (max-width: 809px) and (max-height: 740px) {
  .s-fuel-hero { gap: var(--s12); }
  .s-fuel-hero__mesa { --w: 32%; height: calc((100vw - 48px) * .427 + 24px); }
}