/* Estilos de `fondo-vivo.js`.

   Aquí NO hay ni un color de marca: el velo lo pone cada demo con su propia
   variable `--fv-velo`, porque el dorado de Chris, el negro de Karen, el lino
   de Cristina y el azul de Laysa no se pueden pintar con el mismo gris. Si esto
   trajera color, las cuatro volverían a parecer la misma plantilla, que es
   justo lo que se está corrigiendo. */

.fondo-vivo{
  position: relative;
  isolation: isolate;
  /* A sangre: sale del contenedor centrado para ocupar el ancho entero.
     `100vw` y no `100%` porque vive dentro de `.env`; el `overflow-x:hidden`
     del body evita la barra horizontal que provocaría la barra vertical. */
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
}

.fv-capa{ position: absolute; inset: 0; z-index: -2; overflow: hidden }
.fv-capa figure{
  position: absolute; inset: 0; margin: 0;
  opacity: 0;
  /* 1,5 s de fundido, bajado desde 2,4. Con el cambio cada 3,4 s, un fundido
     de 2,4 significa que casi la mitad del tiempo hay dos fotos mezcladas y no
     se ve ninguna de las dos. El fundido tiene que ser bastante más corto que
     la espera. */
  transition: opacity 1.5s cubic-bezier(.4,0,.2,1);
}
.fv-capa figure.puesta{ opacity: 1 }
.fv-capa img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* ⚠️ TOPE A LAS ALTAS LUCES. Medido el 21/09/2026 sobre los píxeles reales:
     el velo dejaba el fondo en 13-16:1 de media —perfecto— pero había zonas
     que llegaban a BLANCO PURO (1,0:1): una cortina a contraluz, unas toallas,
     una ventana. El texto blanco desaparecía justo ahí.
     Un velo degradado no arregla eso, porque el problema no es la media sino
     los picos. Bajar el brillo y el contraste de la foto impide que ningún
     píxel llegue arriba del todo, y la foto sigue leyéndose como foto. */
  filter: brightness(.62) contrast(.92) saturate(1.02);
  /* El empuje de cámara SOLO en la que se ve. Una animación CSS sigue
     corriendo con el elemento a `opacity:0`, y animar cuatro fotos a pantalla
     completa a la vez es lo que hizo que la portada de Laysa fuese a tirones.
     Ese fallo ya costó una sesión entera. */
  transform: scale(1.04);
}
.fv-capa figure.puesta img{
  animation: fv-respira 13s ease-in-out infinite alternate;
}
@keyframes fv-respira{
  from{ transform: scale(1.04) }
  to  { transform: scale(1.12) }
}

/* El velo. Cada demo define `--fv-velo` y `--fv-velo-2` con SU color. */
.fondo-vivo::before{
  /* ⚠️ `-1px`, no `0`. La sección va a sangre con `width:100vw` y
     `translateX(-50%)`, y el redondeo de subpíxel dejaba una línea de un píxel
     en el borde izquierdo por donde asomaba la foto SIN velo: un filo brillante
     a lo largo de toda la sección. Se detectó el 21/09/2026 midiendo el píxel
     más claro de cada fondo, que salía siempre en x=0. */
  content: ''; position: absolute; inset: -1px; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to bottom, var(--fv-velo, rgba(10,10,12,.86)) 0%,
                               var(--fv-velo-2, rgba(10,10,12,.62)) 48%,
                               var(--fv-velo, rgba(10,10,12,.86)) 100%);
}

@media (prefers-reduced-motion: reduce){
  .fv-capa figure{ transition: none }
  .fv-capa figure.puesta img{ animation: none }
}

/* En impresión no tiene sentido un fondo fotográfico detrás del texto. */
@media print{ .fv-capa{ display: none } }

/* ⚠️ Cuando la sección que lleva `fondo-vivo` ES TAMBIÉN el contenedor
   centrado (`.env`), el `width:100vw` se come su margen y el texto acaba
   pegado al borde de la pantalla. Aquí se le devuelve el mismo hueco que daba
   `.env`: el máximo del proyecto centrado, y un canalón mínimo en móvil.
   `--max` lo define cada demo, así que esto no impone anchura a nadie. */
.fondo-vivo.env{
  width:100vw;
  padding-inline: max(1rem, calc((100vw - var(--max, 1320px)) / 2));
}
@media(min-width:900px){
  .fondo-vivo.env{ padding-inline: max(2.5rem, calc((100vw - var(--max, 1320px)) / 2)) }
}