/* Foto de fondo en la cabecera de cada página (encargo de la CTO, 12-oct): como la portada, una foto con sentido
   detrás del titular, con un velo del tono de la página para que el texto se lea perfecto y un Ken Burns lento.

   Cómo funciona: la sección (.pag-cabecera o .b-cabecera) lleva la clase .con-foto y, como primer hijo,
   <div class="cab-foto" aria-hidden="true"><picture>…</picture></div>. La foto va absoluta detrás de todo y
   ::after es el velo. El tono de cada página se da en RGB (--cab-rgb) para poder graduar el velo con rgba() sin
   depender de color-mix. Las fotos son de Unsplash (autores en el README) y se hornean mate con hornear.py. */

.con-foto { position: relative; overflow: clip; isolation: isolate; }
/* Lo que ya había en la cabecera queda por encima de la foto sin tocar su maqueta */
.con-foto > .contenedor, .con-foto > .b-contenedor { position: relative; z-index: 1; }

.cab-foto { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.cab-foto picture, .cab-foto img { display: block; width: 100%; height: 100%; }
/* --foto-escala agranda la foto cuando su motivo no llena el ancho (las herramientas acaban a 4/5 de la tabla) */
.cab-foto img { object-fit: cover; object-position: var(--foto-pos, 50% 50%); transform: scale(var(--foto-escala, 1.04)); transform-origin: var(--foto-origen, 60% 50%); will-change: transform; }

/* El velo: casi liso del lado del texto (izquierda), va dejando ver la foto hacia la derecha, y una lengua suave
   arriba para que la barra translúcida no caiga sobre la parte más viva de la foto. Nunca llega a cero: la foto
   se ve siempre a través de un poco del tono, que es lo que la hace mate y de la misma familia que la página. */
.cab-foto::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(var(--cab-rgb), 0.55) 0, rgba(var(--cab-rgb), 0) 160px),
    linear-gradient(90deg, rgba(var(--cab-rgb), 0.97) 0%, rgba(var(--cab-rgb), 0.94) var(--velo-lleno, 34%), rgba(var(--cab-rgb), 0.62) var(--velo-medio, 62%), rgba(var(--cab-rgb), var(--velo-min, 0.26)) 100%);
}

/* Movimiento Premium: aparece en 1,4 s y después respira muy despacio (36 s ida, 36 s vuelta) con una curva seno,
   que es la única que no se nota al cambiar de sentido. Nada depende del scroll. */
@keyframes cab-aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes cab-ken { from { transform: scale(var(--foto-escala, 1.04)) translate(0, 0); } to { transform: scale(calc(var(--foto-escala, 1.04) * 1.058)) translate(-1.1%, 0.7%); } }
.js .cab-foto { opacity: 0; animation: cab-aparece 1400ms var(--suave) 120ms forwards; }
.cab-foto img { animation: cab-ken 36s cubic-bezier(0.37, 0, 0.63, 1) infinite alternate; }

/* ---------- Cada página: su tono (RGB), dónde mira la foto y cuánto velo ---------- */
/* Asesoría: las herramientas sobre blanco de Simuladores de la app (Z3vFp7szCAY, la CTO, 12-oct). La foto es
   vertical y de fondo blanco: va en el lado derecho, en «multiply» sobre el tono de la página, con lo que el blanco
   desaparece y sólo quedan las herramientas fundidas con el arena; el velo sólo tapa el borde izquierdo de la foto,
   bajo el texto. El encuadre enseña el martillo y los clavos (la franja de arriba, como en la app). */
.cab-asesoria.con-foto { --cab-rgb: 241, 232, 219; --foto-pos: 50% 16%; }
.cab-asesoria.con-foto .cab-foto { left: 36%; }
.cab-asesoria.con-foto .cab-foto img { mix-blend-mode: multiply; transform-origin: 70% 40%; }
.cab-asesoria.con-foto .cab-foto::after {
  background:
    linear-gradient(180deg, rgba(241, 232, 219, 0.5) 0, rgba(241, 232, 219, 0) 140px),
    linear-gradient(90deg, rgba(241, 232, 219, 1) 0%, rgba(241, 232, 219, 0.85) 18%, rgba(241, 232, 219, 0.2) 48%, rgba(241, 232, 219, 0) 100%);
}
/* Despacho: un despacho moderno junto a la ventana, la foto del CRM de la app (Alesia Kazantceva). La ficha va a la
   derecha, así que la foto se queda detrás con poca presencia: velo alto en toda la anchura. */
.cab-despacho.con-foto { --cab-rgb: 243, 233, 225; --foto-pos: 50% 60%; --velo-lleno: 38%; --velo-medio: 64%; --velo-min: 0.34; }
/* Equipo: un equipo de remo a lo lejos, en un lago en calma al amanecer (Jeton Bajrami): «a la vista». */
.cab-equipo.con-foto { --cab-rgb: 238, 233, 224; --foto-pos: 50% 70%; --velo-min: 0.2; }
/* Negocio: naranjos cargados de fruta delante de una casa sevillana (Mitchell Orr): lo que da fruto solo. */
.cab-negocio.con-foto { --cab-rgb: 236, 231, 220; --foto-pos: 50% 42%; --velo-min: 0.3; }
/* Oficina Digital: una calle comercial andaluza bajo sus toldos (Maksim Shutov): la empresa del cliente, por fuera.
   La CTO la descartó el 12-oct por la de la dueña de una pastelería en su mostrador, y el 13-oct la quiso de vuelta:
   «me gustaba más la de antes». La cabecera sigue con el panorama de la app, así que la foto se queda en la banda
   del texto y se funde abajo. */
.b-oficina-cab.con-foto { --cab-rgb: 247, 243, 234; --foto-pos: 50% 18%; }
.b-oficina-cab.con-foto .cab-foto { bottom: auto; height: min(640px, 72%); }
.b-oficina-cab.con-foto .cab-foto::after {
  background:
    linear-gradient(180deg, rgba(247, 243, 234, 0) 55%, rgba(247, 243, 234, 1) 100%),
    linear-gradient(180deg, rgba(247, 243, 234, 0.55) 0, rgba(247, 243, 234, 0) 160px),
    linear-gradient(90deg, rgba(247, 243, 234, 0.97) 0%, rgba(247, 243, 234, 0.94) 36%, rgba(247, 243, 234, 0.5) 60%, rgba(247, 243, 234, 0.16) 100%);
}
/* Correo: sobres de papel, blancos y crema, repartidos sobre la mesa (Joanna Kosinska). Es clara de por sí: el velo
   puede ser más suave, y el lado derecho lo ocupa la lámina del correo. */
.b-email-cab.con-foto { --cab-rgb: 247, 244, 236; --foto-pos: 50% 50%; --velo-lleno: 28%; --velo-medio: 54%; --velo-min: 0.04; --foto-escala: 1.12; }
/* Tu día: un amanecer de nubes rosas sobre azul pálido (Guillaume Galtier). El «Hoy.» grande va sobre el velo y el
   cielo se abre hacia la hoja del calendario. */
.b-agenda-cab.con-foto { --cab-rgb: 246, 243, 234; --foto-pos: 50% 42%; --velo-lleno: 28%; --velo-medio: 56%; --velo-min: 0.04; }
/* Seguridad: un muro de hormigón claro con la sombra de un árbol (Yeon Li): la base, sólida y en calma. El esquema
   de Amazon va encima, así que la foto se queda con poca presencia y en el verde de la página. */
.b-seguridad-cab.con-foto { --cab-rgb: 230, 235, 225; --foto-pos: 50% 50%; --velo-lleno: 40%; --velo-medio: 70%; --velo-min: 0.42; }

/* ---------- Mosaico de producto a la derecha (la CTO, 12-oct: «a la derecha falta algo») ----------
   Asesoría, Equipo y Negocio llevaban el texto solo, a todo el ancho, y la cabecera quedaba vacía a la derecha. Ahora
   van como Despacho: texto a la izquierda y, delante de la foto, una pieza de producto: cuatro láminas pequeñas con
   las herramientas reales de la página en movimiento, en el orden del índice. Cada lámina se posa como las grandes
   (data-posa, estilo.css), con 90 ms entre una y otra (presupuesto Premium: menos de 400 ms en total). */
.cab-mosaico { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.2vw, 16px); }
.cab-mosaico .lamina { aspect-ratio: 16 / 10; }
.cab-mosaico .lamina img, .cab-mosaico .lamina video { object-position: top left; }
.cab-mosaico .rotulo { left: 8px; bottom: 8px; padding: 5px 10px 5px 8px; gap: 6px; font-size: 11.5px; }
.cab-mosaico .rotulo i { width: 6px; height: 6px; }
.js .cab-mosaico .lamina:nth-child(2) { transition-delay: 90ms; }
.js .cab-mosaico .lamina:nth-child(3) { transition-delay: 180ms; }
.js .cab-mosaico .lamina:nth-child(4) { transition-delay: 270ms; }
/* Con el mosaico al lado, el texto cabe en su columna sin que el titular tenga que partirse de más */
.con-foto .cab-int:not(.cab-apilada) .cab-texto .respiro.grande { font-size: clamp(36px, 4.2vw, 62px); }
@media (max-width: 900px) {
  .cab-mosaico { max-width: 640px; }
  .js .cab-mosaico .lamina { transition-delay: 0ms; }
}

/* ---------- Móvil: la foto es una banda arriba, bajo la barra, y el texto empieza donde el velo ya es liso ---------- */
@media (max-width: 640px) {
  .pag-cabecera.con-foto, .b-cabecera.con-foto { padding-top: calc(var(--nav-alto) + var(--nav-margen) + 230px); }
  .con-foto .cab-foto { bottom: auto; height: calc(var(--nav-alto) + var(--nav-margen) + 360px); }
  .con-foto .cab-foto img { object-position: var(--foto-pos-movil, 50% 50%); transform-origin: 50% 50%; --foto-escala: 1.04; }
  /* El velo baja en rampa larga: entre los 140 y los 330 px pasa de dejar ver la foto a ser el tono liso, para que
     no se note ningún borde; el texto empieza donde ya es casi liso */
  .con-foto .cab-foto::after, .b-oficina-cab.con-foto .cab-foto::after {
    background:
      linear-gradient(180deg, rgba(var(--cab-rgb), 0.5) 0, rgba(var(--cab-rgb), 0.22) 90px, rgba(var(--cab-rgb), 0.28) 140px, rgba(var(--cab-rgb), 0.62) 220px, rgba(var(--cab-rgb), 0.9) 280px, rgba(var(--cab-rgb), 0.99) 335px, rgba(var(--cab-rgb), 1) 100%);
  }
  /* Asesoría tiene su propio velo en escritorio (más específico): aquí se le da la misma rampa vertical que a las demás,
     o las herramientas seguían viéndose debajo del titular */
  .cab-asesoria.con-foto .cab-foto { left: 0; }
  .cab-asesoria.con-foto { --foto-pos-movil: 50% 12%; }
  .cab-asesoria.con-foto .cab-foto::after {
    background:
      linear-gradient(180deg, rgba(241, 232, 219, 0.5) 0, rgba(241, 232, 219, 0.22) 90px, rgba(241, 232, 219, 0.28) 140px, rgba(241, 232, 219, 0.62) 220px, rgba(241, 232, 219, 0.9) 280px, rgba(241, 232, 219, 0.99) 335px, rgba(241, 232, 219, 1) 100%);
  }
  .cab-equipo.con-foto { --foto-pos-movil: 72% 64%; }
  .b-agenda-cab.con-foto { --foto-pos-movil: 50% 30%; }
  .b-oficina-cab.con-foto { --foto-pos-movil: 50% 14%; }
  .b-oficina-cab.con-foto .cab-foto { height: calc(var(--nav-alto) + var(--nav-margen) + 360px); }
}

/* Con «reducir movimiento»: la foto se ve quieta, ya puesta, y sin fundido */
@media (prefers-reduced-motion: reduce) {
  .js .cab-foto { opacity: 1; animation: none; }
  .cab-foto img { animation: none; transform: scale(1.04); }
}