@charset "UTF-8";
/* =========================================================================================
   SANTO PECADO SMASHBURGER · sec-08.css · ACTO 8 «Tres formas de pecar» (frente S08, F2)
   -----------------------------------------------------------------------------------------
   SOLO estilos de este acto. Prefijo propio: .a8- . No toca tokens, componentes ni el motor.

   QUÉ ES (BRIEF §3 acto 8 · emoción: CLARIDAD): pin corto con crossfade de los tres caminos
   de pedir (recoger · mesa por QR · Glovo). Los tres viven en la misma plaza y se suceden con
   los cues del motor (opacidad y una deriva vertical de 2,4 vh, nada más: el motor escribe
   opacity/transform inline; aquí solo se pinta el escenario y el reposo).

   ESCENARIO (de abajo arriba): .sp-trama (trama real de marca) · .a8-copia (H2 fijo arriba +
   los tres caminos en láminas de cristal). Cada lámina lleva a la derecha su gráfica:
   el tampón de recogida (bolsa real del sistema), el QR ilustrativo de mesa y la banda real
   de delivery (banner_delivery del negocio, a su proporción 2,26:1: nunca a sangre, que
   cortaría la moto y la valla).

   REGLAS: 0 HEX (todo var()/color-mix), sin `transition: all`, se animan solo transform y
   opacity (el barrido del QR ilustrativo). prefers-reduced-motion: menos y más suave, no
   cero: el crossfade (opacidad) se conserva y el barrido del QR se queda quieto.
   ========================================================================================= */

/* --------------------------------------------------------------------- el acto -------- */
.a8 {
  background: var(--sp-negro);   /* el suelo nunca es blanco mientras entra el stage */
  color: var(--sp-blanco);
}

.a8-escena { isolation: isolate; }   /* la trama se mezcla dentro del escenario, no con la página */

/* ------------------------------------------------------------------------ la copia ----- */
.a8-copia {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: clamp(var(--esp-4), 2.5vh, var(--esp-6));
  padding: clamp(4.75rem, 12vh, 7rem) var(--esp-pagina-x) clamp(2rem, 6vh, 3.5rem);
}

/* H2 del acto: dispositivo de marca (relleno transparente + contorno mostaza, BRIEF §9).
   Sin cue: es el rótulo del acto y está presente desde que entra el escenario (suelo). */
.a8-titulo {
  margin: 0;
  max-width: 20ch;
  font-size: var(--fs-h2);
  letter-spacing: var(--ls-titular);
  text-shadow: 0 0.25rem 1.5rem color-mix(in oklab, var(--sp-negro) 75%, transparent);
}

/* ------------------------------------------------------------------- los tres caminos -- */
/* Los tres comparten plaza (misma celda de rejilla): el contenedor mide lo que el camino
   más alto y el motor los funde encima uno de otro. El reparto de pointer-events lo hace
   el motor (solo el camino con opacidad > 0,5 recibe clics). */
.a8-caminos {
  flex: 1 1 auto;
  display: grid;
  align-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.a8-camino {
  grid-area: 1 / 1;
  align-self: center;
  width: min(100%, 58rem);
  margin-inline: auto;
}

/* La lámina: cristal (la cola funcional va en cristal, BRIEF §1.6). */
.a8-lamina {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: clamp(var(--esp-4), 3vw, var(--esp-7));
  padding: clamp(var(--esp-5), 3.5vw, var(--esp-8));
}

/* El camino del domicilio da más sitio a la gráfica (la banda real es 2,26:1). */
.a8-lamina--glovo { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }

.a8-cuerpo {
  display: grid;
  gap: clamp(var(--esp-2), 1.6vh, var(--esp-4));
  justify-items: start;
}

.a8-nombre {
  margin: 0;
  font-family: var(--fuente-rotulo);
  font-weight: var(--peso-rotulo);
  font-size: var(--fs-h4);
  line-height: var(--lh-subtitulo);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--tinta-principal);
}

.a8-rotulo {
  margin: 0;
  color: var(--tinta-acento);   /* mostaza sobre el cristal: acento de marca */
}

.a8-texto {
  margin: 0;
  max-width: 40ch;
  font-family: var(--fuente-texto);
  font-weight: var(--peso-texto);
  font-size: var(--fs-p);
  line-height: var(--lh-texto);
  color: var(--tinta-principal);
}

.a8-accion { margin: var(--esp-2) 0 0; }

/* Botones de los tres caminos: mismo ancho mínimo para que el crossfade no salte. */
.a8-btn { min-width: 12rem; }

.a8-visual { display: grid; place-items: center; }

/* --------------------------------------------------------- visual 1 · recoger (tampón) -- */
.a8-tampon {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(8rem, 22vh, 11rem);
  aspect-ratio: 1;
  border-radius: var(--radio-circulo);
  border: 2px solid color-mix(in oklab, var(--sp-mostaza) 55%, transparent);
  background-color: color-mix(in oklab, var(--sp-blanco) 4%, transparent);
  color: var(--sp-mostaza);
  transform: rotate(3deg);
}

.a8-tampon::after {
  content: '';
  position: absolute;
  inset: var(--esp-2);
  border: 1px dashed color-mix(in oklab, var(--sp-mostaza) 35%, transparent);
  border-radius: var(--radio-circulo);
}

.a8-tampon .sp-icono { width: 4.4rem; height: 4.4rem; }

/* ---------------------------------------------------- visual 2 · QR ilustrativo (mesa) -- */
/* ILUSTRACIÓN, no un QR real: malla de puntos redondos irregulares (tres tramas desfasadas),
   un barrido de escáner y un mordisco de marca. Sin patrones localizadores y sin ningún nodo
   de imagen: ningún lector puede tomarlo por un código válido. El generador real llega en F5. */
.a8-qr {
  position: relative;
  display: block;
  width: clamp(8rem, 22vh, 11rem);
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radio-lg);
  border: 1px solid color-mix(in oklab, var(--sp-mostaza) 38%, transparent);
  background-color: color-mix(in oklab, var(--sp-blanco) 4%, transparent);
  transform: rotate(-2deg);
}

.a8-qr__trama {
  position: absolute;
  inset: 10%;
  opacity: 0.5;
  background-image:
    radial-gradient(circle at 50% 50%, var(--sp-mostaza) 0 0.16rem, transparent 0.21rem),
    radial-gradient(circle at 50% 50%, var(--sp-mostaza) 0 0.1rem, transparent 0.15rem),
    radial-gradient(circle at 50% 50%, var(--sp-mostaza) 0 0.13rem, transparent 0.18rem);
  background-size: 1.4rem 1.4rem, 0.95rem 0.95rem, 1.95rem 1.95rem;
  background-position: 0 0, 0.5rem 0.35rem, 0.25rem 0.6rem;
}

.a8-qr__scan {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 0;
  height: 18%;
  background: linear-gradient(to bottom,
    transparent 0%,
    color-mix(in oklab, var(--sp-mostaza) 55%, transparent) 50%,
    transparent 100%);
  animation: a8-qr-barrido 2.6s var(--ease-entrada) infinite;
}

@keyframes a8-qr-barrido {
  0%   { transform: translate3d(0, -110%, 0); opacity: 0; }
  12%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { transform: translate3d(0, 560%, 0); opacity: 0; }
}

.a8-qr__mordisco {
  position: absolute;
  right: 7%;
  bottom: 6%;
  width: 36%;
  aspect-ratio: 1;
  border-radius: var(--radio-circulo);
  background-color: var(--sp-negro);
  box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--sp-mostaza) 45%, transparent);
}

/* ------------------------------------------- visual 3 · banda real de delivery (Glovo) -- */
/* Copia sin retoques del banner_delivery del negocio, a su proporción real. */
.a8-visual--banda { justify-items: stretch; }

.a8-banda { margin: 0; }

.a8-banda__img {
  display: block;
  width: 100%;
  height: auto;
}

/* ------------------------------------------------------------ hook de la comanda -------- */
/* Marcador sin pintura: el módulo de la firma (S04) lo convierte en la línea del ticket. */
.a8-comanda {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* -------------------------------------------------------------------------- móvil ----- */
@media (max-width: 760px) {
  .a8-copia {
    padding-top: clamp(4rem, 11vh, 5.5rem);
    padding-bottom: clamp(1.5rem, 4vh, 2.5rem);
  }

  .a8-titulo { max-width: 14ch; }

  .a8-lamina,
  .a8-lamina--glovo {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    gap: var(--esp-4);
    padding: var(--esp-5) var(--esp-4);
  }

  .a8-nombre { font-size: var(--fs-h5); }

  .a8-texto { font-size: var(--fs-p); max-width: 100%; }

  .a8-visual { justify-self: center; }
  .a8-visual--banda { justify-self: stretch; }

  .a8-tampon,
  .a8-qr { width: clamp(6rem, 34vw, 8rem); }

  .a8-tampon .sp-icono { width: 2.6rem; height: 2.6rem; }
}

/* -------------------------------------------------- degradado sin motor (sin scrollcraft) -- */
/* Si el motor no carga no hay cues que leer: sec-08.js marca .a8--sin-motor y aquí el acto
   se apila como lista legible (texto de BRIEF, mismas gráficas y enlaces), en vez de quedarse
   en negro. */
.a8--sin-motor .a8-escena {
  position: relative;
  padding-block: var(--esp-seccion);
}

.a8--sin-motor .a8-copia { position: static; padding-block: 0; }
.a8--sin-motor .a8-caminos { display: block; }
.a8--sin-motor .a8-camino { opacity: 1; }
.a8--sin-motor .a8-camino + .a8-camino { margin-top: var(--esp-5); }

/* -------------------------------------------------- prefers-reduced-motion ------------- */
/* Menos y más suave, no cero (SPEC §7): el crossfade es opacidad y se conserva; el barrido
   del QR se queda quieto en una posición legible. */
@media (prefers-reduced-motion: reduce) {
  .a8-qr__scan {
    animation: none;
    opacity: 0.5;
    transform: translate3d(0, 260%, 0);
  }
}