@charset "UTF-8";
/* =========================================================================================
   SANTO PECADO SMASHBURGER · SEC-06 · ACTO 6 «¿Eres un pecador?» (el reto)
   Fichero: web/estilos/sec-06.css        Frente: S06 (bloque F2-secciones, acto 6)
   -----------------------------------------------------------------------------------------
   QUÉ ES ESTO: el acto con carácter propio del relato. La foto real de la burger gigante
   (cuchillo clavado) dentro de un marco stencil, sobre el fondo REAL del reto: el bloque
   rosa con los sellos de la marca (background_challenge.png, copiado del corpus del
   negocio, 7680x3936 -> 1920x984, nunca ampliado). Titular que se arma línea a línea.

   CÓMO SE MUEVE (el motor no se edita; aquí no hay JS de animación):
   · El titular lo parte y lo escalona el motor ([data-sc-kinetic] sobre [data-sc-cue]):
     las líneas suben desde detrás de su máscara cuando el acto llega a su ventana.
   · El texto entra después, con su propio cue de entrada única (sin pin).
   · El acercamiento de la foto es CSS puro: este fichero deriva --a6-t del --sc-p que el
     motor publica en #acto-6 y lo gasta en un transform: scale() muy leve (1 -> 1,045).
     Si el motor no está, --sc-p cae a 0 y la foto se queda en su tamaño natural: nada
     rompe.

   REGLAS DEL BLOQUE: 0 HEX (todo var(--…) de tokens.css o color-mix de tokens); sin
   transition: all; solo se animan transform/opacity/clip-path; clases con prefijo a6-;
   ninguna clase .esq-* (el andamio se retira al cerrar el bloque).
   CONTRASTE: todo el texto vive en paneles .sp-marco-stencil (fondo negro Santo) o sobre
   el velo oscuro del bloque; el granate no se usa como tinta. Sobre el rosa del fondo
   real no se escribe texto a pelo (el velo y los paneles garantizan la lectura).
   ========================================================================================= */

/* ---- Progreso del acto: el motor publica --sc-p (0..1) en el elemento del acto ------- */
#acto-6 {
  /* 0,16 = el bloque asoma por abajo · 0,66 = el bloque centrado. Tramo del acercamiento. */
  --a6-t: clamp(0, calc((var(--sc-p, 0) - .16) / .5), 1);
}

/* ---- El bloque del reto: fondo real + velo que lo funde con la página ---------------- */
#acto-6 .a6-escena {
  position: relative;
  isolation: isolate;               /* el fondo (z-index -2) y el velo (-1) no escapan */
  overflow: clip;
  padding: clamp(var(--esp-4), 3vw, var(--esp-8));
}

#acto-6 .a6-fondo-pic {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
}
#acto-6 .a6-fondo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.92);            /* contención leve: el rosa real manda, sin gritar */
}

/* El velo: oscurece bordes superior e inferior (el bloque se funde con la página negra)
   y vignetea las esquinas; el centro conserva el rosa del reto. */
#acto-6 .a6-velo {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      color-mix(in oklab, var(--sp-negro) 88%, transparent) 0%,
      color-mix(in oklab, var(--sp-negro) 30%, transparent) 14%,
      transparent 32%,
      transparent 68%,
      color-mix(in oklab, var(--sp-negro) 30%, transparent) 86%,
      color-mix(in oklab, var(--sp-negro) 88%, transparent) 100%),
    radial-gradient(135% 105% at 50% 50%,
      transparent 38%,
      color-mix(in oklab, var(--sp-negro) 68%, transparent) 100%);
}

/* ---- La composición: cartel del reto + foto de la burger ------------------------------ */
#acto-6 .a6-marco {
  position: relative;
  display: grid;
  gap: var(--esp-5);
  align-items: center;
}
@media (min-width: 861px) {
  #acto-6 .a6-marco {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: var(--esp-6);
  }
}

/* ---- El cartel: titular kinético + texto + pie (marco stencil de marca) --------------- */
#acto-6 .a6-copy {
  display: grid;
  gap: var(--esp-4);
  justify-items: start;
  align-content: center;
}

#acto-6 .a6-titular {
  margin: 0;
  text-transform: uppercase;
  /* El titular de marca: relleno transparente y contorno mostaza (sp-contorno). Las
     líneas las parte y las arma el motor; aquí solo se le da la medida. */
  font-size: var(--fs-h1);
  line-height: var(--lh-titular);
}

#acto-6 .a6-texto {
  margin: 0;
  max-width: 30ch;
  font-size: var(--fs-h5);
  line-height: 1.45;
  letter-spacing: var(--ls-texto);
  color: var(--sp-blanco);          /* blanco sobre el negro del panel: 21:1 */
  text-wrap: pretty;
}
/* Subrayado de rotulador sobre la palabra clave (componente de marca: mostaza). */
#acto-6 .a6-texto .sp-subrayado::after { height: .34em; }

/* Datos del reto (peso/tiempo/precio): NO se renderizan hoy (BRIEF §11.1). El hueco queda
   preparado para cuando el cliente confirme las condiciones (lo rellena sec-06.js). */
#acto-6 .a6-datos {
  margin: 0;
  font-family: var(--fuente-rotulo);
  font-weight: var(--peso-rotulo);
  font-size: var(--fs-precio);
  letter-spacing: var(--ls-pequeno);
  color: var(--tinta-acento);       /* mostaza sobre negro: 11,41:1 */
}
#acto-6 .a6-datos[hidden] { display: none; }

/* Botón de apuntarse: solo con local confirmado (lo enseña sec-06.js). */
#acto-6 .a6-cta { justify-self: start; }
#acto-6 .a6-cta[hidden] { display: none; }

#acto-6 .a6-pie {
  width: 100%;
  margin: 0;
  padding-top: var(--esp-3);
  border-top: 1px dashed color-mix(in oklab, var(--sp-mostaza) 38%, transparent);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-pequeno);
  color: color-mix(in oklab, var(--sp-blanco) 82%, transparent);  /* ≈ 12:1 sobre negro */
}

/* ---- La foto de la burger: acercamiento leve ligado al scroll (solo transform) -------- */
#acto-6 .a6-burger {
  margin: 0;
  overflow: clip;                   /* el acercamiento muere en el marco stencil */
}
#acto-6 .a6-burger picture { display: block; }
#acto-6 .a6-burger__img {
  display: block;
  width: 100%;
  height: auto;
  transform: scale(calc(1 + var(--a6-t) * .045));
  transform-origin: 50% 58%;
  will-change: transform;
}

/* ---- Móvil: una columna, con menos aire y el mismo orden (titular -> foto) ------------ */
@media (max-width: 860px) {
  #acto-6 .a6-escena { padding: var(--esp-4); }
  #acto-6 .a6-copy { gap: var(--esp-3); }
  #acto-6 .a6-texto { font-size: var(--fs-p); }
}

/* ---- prefers-reduced-motion: quieto, no ciego ----------------------------------------- */
/* El titular ya lo resuelve el motor (opacidad sin desplazamiento); aquí solo se apaga
   el acercamiento de la foto: nada se mueve, todo se lee. */
@media (prefers-reduced-motion: reduce) {
  #acto-6 .a6-burger__img { transform: none; }
}