/* ============================================================
   PLANOS — costura · profundidad · tipo detrás del cuerpo
   Sale de la ronda de 9 sitios (2026-08-18) + voto de bl4ck coder.
   Se copia con el molde. No decide paleta: usa --costura / --costura-fondo / --papel / --tinta.
   ============================================================ */

/* ── COSTURA ────────────────────────────────────────────────
   El color de salida de una sección es el de entrada de la siguiente.
   Dos variables, no una: el velo de N degrada a SU --fondo-out (--costura);
   el fondo de N+1 nace de --costura-fondo (lo escribe costurar() hacia
   adelante). Una sola variable cargada hacia atrás servía a dos consumidores
   con semánticas opuestas: el velo quedaba invisible y la regla de hermanos
   (0,2,0) le ganaba al fondo declarado. — Fable 2026-08-18 + Kimi
   :where() deja que un fondo declarado (p.ej. .banda--cierre) gane siempre. */
[data-costura] {
  --costura: var(--fondo-out, #F3EFE7);
  position: relative;
  isolation: isolate;
}
[data-costura]::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: min(28vh, 220px);
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(to bottom, transparent, var(--costura));
}
[data-costura] > * { position: relative; z-index: 1; }
:where([data-costura], [data-costura] + .banda) {
  background-color: var(--costura-fondo, revert);
}

/* ── PROFUNDIDAD ────────────────────────────────────────────
   Tres planos. El JS escribe --y en la sección. Reduced-motion apaga el viaje. */
[data-profundidad] {
  position: relative;
  isolation: isolate;
  overflow: clip;
}
[data-profundidad] .capa {
  will-change: transform;
  transform: translate3d(0, calc(var(--y, 0) * var(--v, 0) * 1px), 0);
}
[data-profundidad] .capa--fondo { --v: .06; z-index: 0; }
[data-profundidad] .capa--medio { --v: .14; z-index: 1; }
[data-profundidad] .capa--frente { --v: .22; z-index: 2; }
@media (prefers-reduced-motion: reduce) {
  [data-profundidad] .capa { transform: none; will-change: auto; }
}

/* ── TIPO DETRÁS DEL CUERPO ─────────────────────────────────
   Franja de oficio/retrato, NUNCA el hero (el H1 va en 2 columnas).
   La frase queda atrás; el retrato (recorte o multiply) pasa por delante. */
.franja-oficio {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 70svh;
  overflow: clip;
}
.franja-oficio .tipo-detras {
  grid-area: 1 / 1;
  z-index: 0;
  margin: 0;
  font-family: inherit;
  font-weight: 800;
  font-size: clamp(4.5rem, 18vw, 14rem);
  line-height: .8;
  letter-spacing: -.04em;
  text-align: center;
  color: var(--tinta, #161616);
  pointer-events: none;
  padding-top: .16em;
  margin-top: -.16em;
}
.franja-oficio .retrato {
  grid-area: 1 / 1;
  z-index: 1;
  max-width: min(52vw, 420px);
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
}
.franja-oficio .retrato--multiply { mix-blend-mode: multiply; }
/* C2: la imagen tapa el titular por completo. El tipo queda atrás a sangre.
   El H1 del hero no usa esto. */
.franja-oficio--sangre .retrato {
  max-width: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.franja-oficio--sangre .tipo-detras {
  font-size: clamp(6rem, 24vw, 18rem);
}
@media (prefers-reduced-motion: reduce) {
  .franja-oficio .tipo-detras { clip-path: none; }
}