/* ═══════════════════════════════════════════════════════
   08-fondo.css  —  La cocina de fondo, a página completa.

   La foto es una capa FIJA detrás de todo el sitio: el
   contenido pasa por encima y la foto nunca se mueve.

   REGLA DE ESTA HOJA: sobre la foto no va NADA. Ni viñeta,
   ni degradado, ni velo de portada, ni filtros de tema. La
   portada se ve la imagen limpia y enfocada, tal cual salió
   de herramientas/limpio.py. La letra de la portada se
   sostiene sola con una sombra ajustada al tema.

   Del resto del sitio se encarga 09-luz.css: cada sección se
   apoya en su velo y se va iluminando conforme bajas.

   Se carga casi al final: esta hoja manda sobre las anteriores.
   ═══════════════════════════════════════════════════════ */

[data-tema="noche"]{
  --velo-seccion:rgba(9,9,8,.90);
}
[data-tema="dia"]{
  --velo-seccion:rgba(240,240,238,.90);
}

/* los velos miden 100vw; esto evita la barra horizontal */
body{ overflow-x:clip; }

/* la luz de sala se va DEBAJO de la foto */
body::before{ z-index:-3; }

/* ── la foto: SOLO la primera pantalla ────────────────────
   Ya no es una capa fija detras de todo el sitio: es un lienzo
   que empieza arriba del todo (detras del techo) y termina justo
   donde termina la portada. De ahi para abajo el sitio va sobre
   su propio color, sin foto.

   El alto exacto lo escribe assets/js/sitio.js en --alto-portada;
   si el JS no corre, se queda en una pantalla (100svh). */
.fondo-portada{ position:absolute; top:0; left:0; right:0; bottom:auto;
  width:100%; height:var(--alto-portada,100svh);
  z-index:-2; overflow:hidden; }
.fondo-portada picture{ position:absolute; inset:0; display:block; }
.fondo-portada img{ width:100%; height:100%; object-fit:cover;
  object-position:50% 46%; transform:none;
  content-visibility:visible; }

/* limpia: sin filtros de tema, sin retoque de navegador.
   Lo que se ve es el archivo, nada más. Se nombran los dos temas
   porque 05-contraste.css los pinta con esa misma fuerza. */
[data-tema] .fondo-portada img,
[data-tema="noche"] .fondo-portada img,
[data-tema="dia"] .fondo-portada img{
  filter:contrast(1.1) saturate(1.06); content-visibility:visible; }

/* nada encima de la foto: se retiran la viñeta y los tres
   degradados que 01-base, 02-temas y 05-contraste le ponían. */
.fondo-portada::after,
[data-tema="noche"] .fondo-portada::after,
[data-tema="dia"] .fondo-portada::after{ content:none; display:none; background:none; }

/* nada de paralaje: una capa fija no se desplaza */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .fondo-portada img{ animation:none; transform:none; }
  }
}

/* ── se va el cuadrado: la lámina pierde marco y fondo ───── */
[data-tema] .escenario{ background:transparent; border:0; box-shadow:none;
  padding:0; overflow:visible; }
.escenario::before,.escenario::after{ display:none; }

/* ── portada: la foto entera, sin velo ───────────────────── */
.portada{ position:relative; isolation:isolate; }
.portada::after{ content:none; display:none; }

/* legibilidad sin tapar la imagen: sombra en la letra, no un
   degradado sobre la cocina. */
[data-tema="noche"] .portada :is(h1,.lema,.entrada),
[data-tema="noche"] .portada .duros :is(b,span),
[data-tema="noche"] .portada .corte :is(b,i,.num){
  text-shadow:0 1px 2px rgba(0,0,0,.62), 0 6px 22px rgba(0,0,0,.50); }
[data-tema="dia"] .portada :is(h1,.lema,.entrada),
[data-tema="dia"] .portada .duros :is(b,span),
[data-tema="dia"] .portada .corte :is(b,i,.num){
  text-shadow:0 1px 2px rgba(255,255,255,.85), 0 6px 22px rgba(255,255,255,.70); }