@charset "UTF-8";
/* =========================================================================================
   SANTO PECADO SMASHBURGER · sec-04.css — ACTO 4 «Capa por capa» (EL PICO)
   Fichero: web/estilos/sec-04.css        Frente: S04 (bloque F2 secciones)
   -----------------------------------------------------------------------------------------
   QUÉ ES: el montaje de la Santo Pecado capa a capa. Nueve franjas fotográficas reales
   suben y se apilan formando la burger; cada una lleva su etiqueta pegatina (textos
   literales de la carta). El acto lo ancla el motor (pin, span 2,5, dwell 0,45) y las
   capas entran por la cascada de cues + el barrido (data-sc-reveal) de cada franja.

   REGLAS: 0 HEX literales (todo var() de tokens.css o color-mix() sobre ellos); sin
   transition:all; solo se anima transform / opacity / clip-path (lo hace el motor).
   Prefijo propio: .a4-. No se tocan tokens.css, componentes.css ni pagina.css.

   ESTA SECCIÓN NO PUBLICA CIFRAS ni textos que no estén en el BRIEF (§3 acto 4).
   ========================================================================================= */

/* =========================================================================================
   1 · ESCENA — rejilla del acto anclado: texto a la izquierda, montaje a la derecha.
   ========================================================================================= */
.a4-escena {
  display: grid;
  grid-template-columns: minmax(11rem, 18rem) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: center;
  align-content: center;
  column-gap: clamp(var(--esp-5), 4vw, var(--esp-8));
  row-gap: var(--esp-4);
  padding: clamp(var(--esp-6), 5vh, var(--esp-9)) var(--esp-pagina-x);
  box-sizing: border-box;
}

/* En pantallas anchas se reserva el carril del ticket (la firma vive en el borde
   derecho): el montaje no se le mete debajo. */
@media (min-width: 1100px) {
  .a4-escena { padding-right: calc(var(--esp-pagina-x) + 18.5rem); }
}

/* Ambiente decorativo: la luz de la cocina a oscuras (granate y mostaza al mínimo). */
.a4-fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(72% 58% at 24% 6%,
      color-mix(in oklab, var(--sp-granate) 34%, transparent) 0%,
      transparent 72%),
    radial-gradient(64% 62% at 82% 96%,
      color-mix(in oklab, var(--sp-mostaza) 11%, transparent) 0%,
      transparent 70%),
    linear-gradient(180deg,
      color-mix(in oklab, var(--sp-negro-humo) 62%, transparent) 0%,
      var(--sp-negro) 58%);
}

/* =========================================================================================
   2 · TITULAR Y CIERRE
   ========================================================================================= */
.a4-cabecera {
  grid-area: 1 / 1 / 2 / 2;
  position: relative;
  z-index: 1;
  align-self: start;
}

.a4-titulo {
  color: var(--tinta-principal);
  text-shadow: var(--sombra-texto);
}

.a4-cierre {
  grid-area: 3 / 1 / 4 / 2;
  position: relative;
  z-index: 1;
  align-self: end;
  margin: 0;
  max-width: 24ch;
  font-family: var(--fuente-texto);
  font-size: var(--fs-h4);
  font-weight: var(--peso-texto-light);
  line-height: var(--lh-titular);
  letter-spacing: var(--ls-texto);
  color: var(--tinta-principal);
  text-shadow: var(--sombra-texto);
  text-wrap: pretty;
}
.a4-cierre__remate {
  font-weight: var(--peso-texto-bold);
  color: var(--tinta-acento);          /* mostaza sobre negro: 11,41:1 */
}

/* =========================================================================================
   3 · EL MONTAJE — nueve franjas reales apiladas
   Cada .a4-capa es una fila: etiqueta pegatina + franja fotográfica. La franja se descubre
   con el barrido del motor (clip-path) y entra con el cue del acto (caída + fundido).
   ========================================================================================= */
.a4-capas {
  --a4-alto-capa: clamp(2.1rem, 5.8vh, 3.5rem);
  grid-area: 1 / 2 / 4 / 3;
  align-self: center;
  justify-self: center;
  display: flex;
  /* El orden del DOM es el de la receta (pan abajo → pan arriba); la columna se
     invierte para que el apilado se VEA de abajo arriba, como se monta la burger. */
  flex-direction: column-reverse;
  align-items: center;
  justify-content: center;
  gap: clamp(3px, .8vh, 10px);
  width: 100%;
  max-width: min(36rem, 100%);
  margin: 0;
  padding: 0;
  list-style: none;
}

.a4-capa {
  position: relative;
  z-index: 1;
  display: grid;
  /* Columna de etiqueta FIJA: todas las franjas arrancan en la misma vertical
     (con max-content cada fila se dimensionaba sola y el apilado quedaba torcido).
     A 14rem las pegatinas más largas se parten en dos líneas: siguen siendo pegatinas. */
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  align-items: center;
  gap: var(--esp-3);
  width: 100%;
}

/* Etiqueta: pegatina de la casa, pegada al borde derecho de su carril (el izquierdo de la franja). */
.a4-capa__etiqueta {
  justify-self: end;
  max-width: 100%;
  white-space: normal;                 /* cabe en su carril fijo partiéndose en dos líneas */
  text-align: left;
}
.a4-capa__etiqueta--doble {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.a4-capa__sub {
  display: block;
  font-size: var(--fs-small);
  line-height: var(--lh-compacto);
  letter-spacing: var(--ls-pequeno);
  white-space: normal;                 /* puede partirse en dos líneas si no cabe */
}

/* La franja: la «capa» propiamente dicha. Alto por token, ancho variable (silueta). */
.a4-capa__lonja {
  display: block;
  position: relative;
  width: var(--capa-ancho, 100%);
  height: var(--a4-alto-capa);
  margin-inline: auto;
  border-radius: var(--radio-pill);
  overflow: hidden;
  background-color: var(--sp-negro-humo);
  box-shadow:
    inset 0 0 0 1px color-mix(in oklab, var(--sp-blanco) 20%, transparent),
    var(--sombra-media);
  transform: rotate(var(--capa-giro, 0deg));
}
.a4-capa__foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--capa-pos, 50% 50%);
}

/* --- Silueta y encuadre de cada capa (orden del montaje: propuesta visual, ver INFORME) --- */
.a4-capas > li:nth-child(1) {               /* Pan (abajo) */
  --capa-ancho: 100%;
  --capa-pos: 50% 55%;
  --capa-giro: -.3deg;
  --a4-alto-capa: clamp(2.4rem, 6.4vh, 3.9rem);
}
.a4-capas > li:nth-child(2) { --capa-ancho: 94%;  --capa-pos: 50% 40%; --capa-giro: .35deg; }
.a4-capas > li:nth-child(3) { --capa-ancho: 106%; --capa-pos: 50% 62%; --capa-giro: -.25deg; }
.a4-capas > li:nth-child(4) { --capa-ancho: 100%; --capa-pos: 50% 42%; --capa-giro: .3deg; }
.a4-capas > li:nth-child(5) { --capa-ancho: 96%;  --capa-pos: 50% 60%; --capa-giro: -.2deg; }
.a4-capas > li:nth-child(6) { --capa-ancho: 104%; --capa-pos: 50% 48%; --capa-giro: .4deg; }
.a4-capas > li:nth-child(7) { --capa-ancho: 98%;  --capa-pos: 50% 58%; --capa-giro: -.35deg; }
.a4-capas > li:nth-child(8) { --capa-ancho: 102%; --capa-pos: 50% 45%; --capa-giro: .2deg; }
.a4-capas > li:nth-child(9) {               /* Pan (arriba): cierra el montaje */
  --capa-ancho: 100%;
  --capa-pos: 50% 50%;
  --capa-giro: -.15deg;
  --a4-alto-capa: clamp(2.4rem, 6.4vh, 3.9rem);
}

/* =========================================================================================
   4 · MÓVIL — una columna: titular arriba, montaje en medio, cierre abajo.
   La etiqueta pasa a ir pegada sobre la propia franja (no hay ancho para dos columnas).
   ========================================================================================= */
@media (max-width: 900px) {
  .a4-escena {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    row-gap: var(--esp-3);
    padding-top: clamp(var(--esp-5), 4vh, var(--esp-7));
    /* Deja libre el carril del chip de la comanda (fijo abajo en móvil). */
    padding-bottom: calc(clamp(var(--esp-5), 4vh, var(--esp-7)) + 3.25rem);
    text-align: center;
  }
  .a4-cabecera { grid-area: 1 / 1 / 2 / 2; align-self: start; }
  .a4-capas    { grid-area: 2 / 1 / 3 / 2; max-width: 100%; }
  .a4-cierre   { grid-area: 3 / 1 / 4 / 2; align-self: end; max-width: 30ch; margin-inline: auto; }

  .a4-capa {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .a4-capa__etiqueta {
    justify-self: start;
    position: absolute;
    left: var(--esp-3);
    top: 50%;
    z-index: 2;
    transform: translateY(-50%) rotate(var(--pegatina-giro));
    max-width: calc(100% - var(--esp-5));
  }
  .a4-capa__etiqueta--doble { transform: translateY(-50%) rotate(var(--pegatina-giro)); }
  .a4-capa__lonja { width: 100%; }
  .a4-capas > li:nth-child(1),
  .a4-capas > li:nth-child(9) { --a4-alto-capa: clamp(2.6rem, 6.8vh, 4.2rem); }
}

/* =========================================================================================
   5 · PREFERS-REDUCED-MOTION — sin caída: la cascada la aplana el motor (transform: none);
   aquí se quitan los giros decorativos de las franjas para dejar el montaje recto.
   ========================================================================================= */
@media (prefers-reduced-motion: reduce) {
  .a4-capa__lonja { transform: none; }
  .a4-capas > li { --capa-giro: 0deg; }
}