/* ==========================================================================
   PALA PIZZA × STACK BURGER — hoja de estilos base
   --------------------------------------------------------------------------
   Los estilos de composición (posiciones, tamaños, colores de cada escena)
   viven en el atributo style= de cada bloque en index.html, para que puedan
   ajustarse elemento por elemento sin buscar en este archivo.
   Aquí quedan: reset, tipografía, animaciones, estados :hover/:focus,
   utilidades de accesibilidad y el fallback sin JavaScript.
   ========================================================================== */

/* --- 1. Reset y base ---------------------------------------------------- */
* { box-sizing: border-box; }

html { scroll-behavior: auto; }

body {
  margin: 0;
  background: #000;
  color: #fff;
  font-family: Barlow, Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }

/* --- 2. Enlaces --------------------------------------------------------- */
a { color: #F4313E; text-decoration: none; }
a:hover { color: #fff; }
a:focus-visible,
button:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* Botón principal de la escena de cierre */
.cta { transition: transform .3s cubic-bezier(.22,.7,.2,1), background-color .3s ease; }
.cta:hover,
.cta:focus-visible { transform: translateY(-3px); color: #0B0B0B !important; background: #ff4552 !important; }

/* Botón del hero (paso 2): negro sobre el rojo, se invierte al pasar */
.cta-menu { background: #0B0B0B; }
.cta-menu:hover,
.cta-menu:focus-visible { background: #fff !important; color: #0B0B0B !important; }

/* Crédito del footer */
.link-credito:hover,
.link-credito:focus-visible { color: #fff; }

/* --- 3. Animaciones ----------------------------------------------------- */
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulse  { 0%, 100% { opacity: .72; } 50% { opacity: 1; } }

/* --- 4. Accesibilidad --------------------------------------------------- */

/* Texto sólo para lectores de pantalla */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Enlace "saltar al contenido": aparece al tabular */
.skip-link {
  position: absolute;
  left: 16px; top: -60px;
  z-index: 100;
  padding: 12px 20px;
  background: #F4313E;
  color: #0B0B0B;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: top .2s ease;
}
.skip-link:focus { top: 16px; color: #0B0B0B; }

/* Respeta la preferencia del sistema: sin movimiento.
   El motor JS también detecta esta preferencia y deja todo estático. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }
  [data-k="hint"] { display: none !important; }
}

/* --- 5. Fallback sin JavaScript ----------------------------------------
   Sin JS no hay animación de scroll: las escenas se muestran apiladas,
   con todos los textos visibles, para que el contenido siga siendo
   legible e indexable. */
.no-js [data-k="introTrack"],
.no-js [data-k="track"],
.no-js [data-k="s3track"],
.no-js [data-k="s4track"] {
  height: auto !important;
  margin-top: 0 !important;
}
.no-js [data-k="introTrack"] > section,
.no-js [data-k="track"] > div,
.no-js [data-k="s3track"] > section,
.no-js [data-k="s4track"] > section {
  position: relative !important;
  height: auto !important;
  min-height: 60vh;
  padding: 12vh 0;
  overflow: visible !important;
}
.no-js [data-k="b1"],
.no-js [data-k="b2"],
.no-js [data-k="s2h"],
.no-js [data-k="s2logos"],
.no-js [data-k="lockup"],
.no-js [data-k="s4copy"],
.no-js [data-reveal] {
  position: static !important;
  opacity: 1 !important;
  transform: none !important;
}
.no-js [data-k="copy"],
.no-js [data-k="s2txt"],
.no-js [data-k="s3grid"] {
  position: relative !important;
  inset: auto !important;
  height: auto !important;
  transform: none !important;
  padding: 0 6vw !important;
}
.no-js [data-k="disc"],
.no-js [data-k="glow"],
.no-js [data-k="veil"],
.no-js [data-k="hint"] { display: none !important; }
/* Sin JS la banda no se anima. Como ya es una grilla fija y no un riel, basta
   con sacarla del posicionamiento absoluto para que caiga en el flujo. */
.no-js [data-k="railWrap"] { position: relative !important; inset: auto !important; transform: none !important; }
.no-js [data-k="rail"] { transform: none !important; }
.no-js [data-k="stage"] { position: relative !important; inset: auto !important; transform: none !important; width: 70% !important; margin: 0 auto 6vh !important; }
.no-js [data-k="s2img"],
.no-js [data-k="s3photo"] { position: relative !important; inset: auto !important; height: 46vh !important; width: 100% !important; }
.no-js [data-k="s4img"] { position: relative !important; inset: auto !important; height: auto !important; max-width: 70% !important; margin: 0 auto 6vh !important; }
.no-js [data-k="footer"] { position: relative !important; transform: none !important; }

/* --- 6. Pantallas de poca altura ----------------------------------------
   Con el zoom al 200% (o en un movil chico) el texto de la escena 3 no entra
   en el hueco que deja la banda de ingredientes, y el sobrante se metia
   debajo de ella: "Seguir evolucionando juntos" no se leia nunca.
   Medido: a 720x450 faltaban 113px y a 320x568 faltaban 47px.
   La banda cede altura, que es lo unico prescindible de esa escena.
   WCAG 1.4.4 (Redimensionar texto) y 1.4.10 (Reflow).
   ------------------------------------------------------------------------ */
@media (max-height: 700px) {
  [data-k="s3grid"] { padding-top: 6svh !important; }
}
@media (max-height: 520px) {
  [data-k="s3grid"] { padding-top: 4svh !important; }
  [data-k="s3copy"] { gap: 6px !important; }
}

/* --- 7. Banda de ingredientes: grilla fija, no un riel -------------------
   Antes era una tira horizontal que el scroll barria. Ahora no se mueve:
   seis columnas en escritorio, tres por dos en movil, y entera en pantalla.
   El lado de la celda se toma del MENOR entre lo que permite el ancho y lo
   que permite el alto. Asi, en pantallas bajas (zoom 200%, movil apaisado)
   la grilla encoge en lugar de recortarse, que era lo que protegia el ajuste
   del bloque 6: WCAG 1.4.4 (Redimensionar texto) y 1.4.10 (Reflow).
   El hueco que deja debajo lo mide el script y se lo pasa al texto, en vez
   de reservar un valor fijo que sobraba o faltaba segun la pantalla.
   ------------------------------------------------------------------------ */
[data-k="railWrap"] {
  left: 0; right: 0;
  padding: 0 6vw max(14px, env(safe-area-inset-bottom, 0px));
}
[data-k="rail"] {
  --gap: clamp(6px, .9vw, 12px);
  --por-ancho: calc((100% - 2 * var(--gap)) / 3);
  --por-alto: calc((44svh - var(--gap)) / 2);
  display: grid;
  grid-template-columns: repeat(3, min(var(--por-ancho), var(--por-alto)));
  justify-content: center;
  gap: var(--gap);
}
/* Escritorio: la foto ocupa la mitad izquierda, asi que la grilla entra entera
   en la mitad derecha, debajo del texto, con el mismo esquema del telefono.
   El padding la deja entre 50vw y 94vw, que es exactamente la banda que ocupa
   la columna de texto de arriba: los dos quedan centrados sobre el mismo eje. */
@media (min-width: 900px) {
  [data-k="railWrap"] {
    left: 50%;
    padding: 0 6vw max(16px, env(safe-area-inset-bottom, 0px)) 0;
  }
  [data-k="rail"] { --por-alto: calc((46svh - var(--gap)) / 2); }
}

/* --- 8. Cuanto scroll retiene la escena de los ingredientes --------------
   El tramo media 340svh porque estaba dimensionado para el riel: el barrido
   horizontal consumia ese recorrido. Sin riel, lo unico que usa el avance es
   el paralaje de la foto, y en el telefono esa foto esta oculta, de modo que
   los 240svh de seccion fijada no animaban nada: se hacia scroll un buen rato
   y la pagina no avanzaba, que se siente como si estuviera trabada.
   Queda el reposo justo para que la escena se lea como una parada y no como
   un frenazo: 110svh en escritorio, donde el paralaje todavia tiene recorrido,
   y 50svh en el telefono, donde no hay nada que mover.
   ------------------------------------------------------------------------ */
[data-k="s3track"] { height: 210svh; }
@media (max-width: 899px) {
  [data-k="s3track"] { height: 150svh; }
}

/* --- 9. El canto de arriba de la foto de apertura -------------------------
   En telefono y tablet el script ancla esa foto por abajo y la deja mas alta
   que la pantalla, de modo que su borde superior cae dentro del encuadre y se
   ve como una linea recta cortando el negro. Se le pone una mascara que la
   desvanece en su primer tramo, asi entra en el fondo en vez de cortarse.
   En escritorio no hace falta: alli la foto arranca por encima del area
   visible y ese borde nunca llega a verse.
   ------------------------------------------------------------------------ */
@media (max-width: 899px) {
  [data-k="s2img"] {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%);
            mask-image: linear-gradient(180deg, transparent 0, #000 14%);
  }
}

/* --- 10. Sucursales del cierre -------------------------------------------
   Cada nombre lleva su propia vinneta, en vez de separarlos con un caracter
   entre uno y otro: al envolverse en varias lineas, un separador suelto
   quedaria colgando al final del renglon. Blanco sobre el negro del cierre,
   19,6:1. --------------------------------------------------------------- */
.sucursales {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .3em 1.15em;
  max-width: 40ch; color: #fff;
  font-size: clamp(14px,1.9svh,19px); line-height: 1.5;
}
.sucursales li::before {
  content: "\2022"; color: #F4313E; margin-right: .45em;
}

/* --- 7. El foco nunca aterriza en algo invisible -------------------------
   Los botones viven en bloques que el motor desvanece con opacity segun el
   scroll. Si alguien llega con el teclado antes de que el bloque aparezca, esta
   regla lo revela: !important le gana al style inline que escribe el JS.
   WCAG 2.4.7 (Foco visible) sin sacrificar 2.1.1 (Teclado).
   ------------------------------------------------------------------------ */
[data-k="b1"]:focus-within,
[data-k="b2"]:focus-within,
[data-k="s4copy"]:focus-within { opacity: 1 !important; }
[data-k="b1"]:focus-within .cta,
[data-k="b2"]:focus-within .cta,
[data-k="s4copy"]:focus-within .cta { pointer-events: auto !important; }

/* --- 8. Hero: medidas y cortes de línea, en CSS y no en JS ---------------
   Esto lo escribía el motor desde _layout(). El problema: si el motor tarda,
   falla, o el teléfono tiene en caché una versión vieja, el móvil se quedaba
   con las medidas de ESCRITORIO — la hamburguesa enorme y el titular del paso 2
   partido en cuatro líneas con la "A" sola. En CSS eso no puede pasar: el
   navegador lo aplica antes de ejecutar una sola línea de JavaScript.
   Móvil es el caso por defecto; tablet y escritorio son las excepciones.
   ------------------------------------------------------------------------ */
[data-k="disc"], [data-k="glow"], [data-k="stage"] { left: 50%; top: 47%; }
/* Movil: emblema y hamburguesa un 15% mas chicos, para que respiren respecto
   del titular. Son medidas solo de telefono: tablet y escritorio las
   sobrescriben en sus propias consultas, mas abajo. */
[data-k="disc"]  { width: min(71.4vmin,39.1svh,408px); height: min(71.4vmin,39.1svh,408px); }
[data-k="glow"]  { width: min(71.4vmin,44.2svh,442px); height: min(71.4vmin,44.2svh,442px); }
[data-k="stage"] { width: min(74.8vmin,39.1svh,425px); height: auto; }
[data-k="b1"] h2, [data-k="b2"] h2 { font-size: clamp(34px,9vw,62px); }

/* Cortes de línea del paso 2. Móvil: STACK VINO / A HACERLAS SMASH */
br[data-br="t1"], br[data-br="d2"] { display: none; }

/* Tablet: STACK VINO A / HACERLAS SMASH */
@media (min-width: 600px) and (max-width: 899px) {
  [data-k="disc"]  { width: min(80vmin,52svh,660px); height: min(80vmin,52svh,660px); }
  [data-k="glow"]  { width: min(80vmin,58svh,700px); height: min(80vmin,58svh,700px); }
  [data-k="stage"] { width: min(84vmin,56svh,700px); }
  br[data-br="d1"] { display: none; }
  br[data-br="t1"] { display: inline; }
}

/* Escritorio: STACK VINO / A HACERLAS / SMASH */
@media (min-width: 900px) {
  [data-k="disc"], [data-k="glow"], [data-k="stage"] { left: 74%; top: 50%; }
  [data-k="disc"]  { width: min(92vmin,68svh,780px); height: min(92vmin,68svh,780px); }
  [data-k="glow"]  { width: min(96vmin,86svh,880px); height: min(96vmin,86svh,880px); }
  [data-k="stage"] { width: min(96vmin,72svh,820px); }
  [data-k="b1"] h2, [data-k="b2"] h2 { font-size: clamp(46px,6.4vw,150px); }
  br[data-br="d2"] { display: inline; }
}

/* --- 9. Apertura: foto, logos y titular ---------------------------------
   Mismo criterio que el bloque 8: el estado de REPOSO lo define el CSS y el
   motor solo anima a partir de ahí. La foto ya trae puesto su desplazamiento
   inicial (6svh), que es exactamente lo que el motor calcula al principio del
   recorrido: así, cuando el JS toma el control, no hay ningún salto. Antes la
   foto nacía sin transform y el motor le metía 50px de golpe.
   ------------------------------------------------------------------------ */
[data-k="s2img"] {
  inset: auto 0 -22svh 0;
  height: 118svh;
  transform: translate3d(0, 6svh, 0);
}
[data-k="s2img"] img { object-position: center 66%; }

/* Móvil: los logos arriba y el titular más abajo, con aire entre los dos */
[data-k="s2logos"] { top: 10svh; }
[data-k="s2txt"]   { top: 28svh; }

@media (min-width: 600px) and (max-width: 899px) {
  [data-k="s2img"] img { object-position: center 60%; }
  [data-k="s2logos"] { top: 11svh; }
  [data-k="s2txt"]   { top: 30svh; }
}

@media (min-width: 900px) {
  [data-k="s2img"] { inset: -14% 0; height: auto; }
  [data-k="s2img"] img { object-position: center 56%; }
  [data-k="s2logos"] { top: 11svh; }
  /* Los tres versos iban centrados y caian sobre las caras de la foto. Bajan a
     72%: el bloque mide un 23% del alto de pantalla, asi que pasa de ocupar la
     franja 38-61% a la 60-84%, por debajo de los dos comensales y sobre la
     mesa. Queda holgura hasta el indicador de scroll del pie. */
  [data-k="s2txt"]   { top: 72%; transform: translateY(-50%); }
}