/* ==========================================================================
   v4 · LA CAPA FOTOGRÁFICA
   --------------------------------------------------------------------------
   La referencia que se usó de guía es realista porque **usa fotografía grande**:
   una imagen a sangre, el logo, una frase y nada más. Aquí se hace lo mismo con
   material propio: la portada es una foto, entre secciones hay bandas de imagen
   a pantalla completa, y la cartera enseña obra en vez de dibujos técnicos.

   Reglas que se siguen en todo lo de abajo:
     · La foto manda y el texto se apoya en un velo, nunca al revés.
     · Sólo se anima `transform` y `opacity`: es lo único que el navegador mueve
       sin volver a maquetar la página.
     · Ninguna imagen decorativa entra en el orden de lectura: todas van con
       `alt` vacío o dentro de un contenedor `aria-hidden`.
   ========================================================================== */

/* ------------------------------------------------------- fondo de portada */
.fondo-f{
  /* Respaldo **oscuro** aunque el sitio sea papel: encima de esto va el vídeo y
     el texto se escribe en claro. Con el papel del tema, un vídeo que tarde en
     cargar deja un rectángulo blanco con el titular blanco encima. */
  position:fixed; inset:0; z-index:0; overflow:hidden; background:#14120F;
}
.fondo-f > *{ position:absolute; inset:0; display:block; }
.fondo-f__img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.075); transform-origin:58% 52%;
  will-change:transform, filter;
}
/* Grano: una foto limpia sobre una pantalla grande se ve digital. Cuatro
   píxeles de ruido repetidos la asientan. */
.fondo-f__grano{
  opacity:.16; mix-blend-mode:overlay; pointer-events:none;
  background-image:
    repeating-conic-gradient(rgba(255,255,255,.45) 0% 25%, transparent 0% 50%);
  background-size:3px 3px;
}
/* El velo del titular: pesa a la izquierda, que es donde se lee.

   Iba al 92% por la izquierda y con el revelado frío encima **la imagen
   desaparecía**: quedaba un titular sobre negro y ninguna fotografía. El velo
   tiene que dejar leer el texto, no borrar el fondo; para eso ya está el
   contraste de la propia tipografía. */
.fondo-f__sombra{
  opacity:.5;
  background:
    linear-gradient(90deg, rgba(var(--velo-rgb),.86) 0%, rgba(19,18,15,.34) 46%, rgba(19,18,15,.04) 80%),
    linear-gradient(180deg, rgba(19,18,15,.58) 0%, transparent 30%, rgba(var(--velo-rgb),.86) 100%);
}
@media (max-width:900px){
  .fondo-f__sombra{
    background:linear-gradient(180deg, rgba(19,18,15,.78) 0%, rgba(19,18,15,.45) 34%, rgba(19,18,15,.92) 100%);
  }
  .fondo-f__img{ transform-origin:50% 50%; }
}

/* ==========================================================================
   BANDAS A SANGRE
   Una imagen que ocupa la pantalla entera con una frase encima. Es la pieza que
   le da respiro a una página larga: después de tres bloques de texto, una foto
   grande y una línea sola valen más que otro párrafo.
   ========================================================================== */
.banda{
  position:relative; z-index:10;
  min-height:min(94svh, 760px);
  display:flex; align-items:flex-end;
  padding:0 var(--margen) clamp(48px, 10vh, 110px);
  overflow:hidden;
  isolation:isolate;
}
.banda__f{
  position:absolute; inset:-8% 0;      /* de sobra por arriba y por abajo, que se mueve */
  z-index:-2;
}
.banda__f img{
  width:100%; height:100%; object-fit:cover; display:block;
  will-change:transform;
}
.banda::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(19,18,15,.86) 0%, rgba(19,18,15,.34) 32%, rgba(19,18,15,.90) 100%);
}
/* ⚠ **Fondo local bajo el texto de la banda.**
   El velo de la banda es un degradado vertical que en la franja central baja al
   34 % para no matar la imagen — y ahí es justo donde va el texto. Medido sobre
   los trazos, con el fotograma clavado: el crema aguantaba (4,49) pero el rojo
   del titular caía a **1,39–2,44 sobre 1** en tres de las cuatro bandas.

   Se resuelve igual que en la portada: una capa que desborda el bloque por los
   lados, opaca donde está la letra y disuelta antes de llegar a la imagen. Un
   degradado puesto como fondo del propio bloque no vale — se reparte sobre su
   ancho y se apaga encima de las últimas palabras. */
.banda__c{ max-width:34ch; position:relative; isolation:isolate; }
.banda__c::before{
  content:""; position:absolute; z-index:-1;
  inset:-52px -190px -40px -120px;
  background:linear-gradient(96deg,
    rgba(12,11,9,.93) 0%, rgba(12,11,9,.90) 58%,
    rgba(12,11,9,.70) 78%, rgba(12,11,9,.24) 92%, transparent 100%);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
  pointer-events:none;
}
/* La banda centrada tiene el texto en medio, así que su velo va centrado. */
.banda--centro .banda__c::before{
  inset:-52px -140px -40px -140px;
  background:radial-gradient(80% 120% at 50% 50%,
    rgba(12,11,9,.92) 0%, rgba(12,11,9,.86) 46%,
    rgba(12,11,9,.50) 74%, transparent 100%);
}
.banda__t{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(30px, 4.6vw, 62px); line-height:1.04; letter-spacing:-.015em;
  /* ⚠ Escritos, no por variable: estas bandas van **sobre el vídeo de fondo**,
     con su propio velo oscuro. Al pasar el sitio a papel, `--caliza` y
     `--tinta-2` se volvieron tinta oscura y el titular se quedó negro sobre el
     velo negro — el mismo fallo que se comió el lema de la puerta y el titular
     de la portada. Aquí el tema no manda. */
  color:#E9E0CE; margin:14px 0 0;
}
/* Y el rojo, el vivo: sobre el velo oscuro el hondo se queda en 2,4 sobre 1. */
.banda__t em{ font-style:italic; color:#E44B3F; }
.banda__d{
  margin-top:16px; max-width:44ch;
  font-size:clamp(14.5px, 1.2vw, 16.5px); line-height:1.7; color:#BFB5A2;
}
/* La banda ancla: la que va a pantalla completa y con la frase centrada. */
/* La banda centrada tiene dos trampas y caí en las dos: el titular se metía
   debajo de la barra de navegación, y con una medida de 24 caracteres una
   frase de nueve palabras se convertía en una columna de seis líneas. Aire
   arriba y una medida de verdad. */
.banda--centro{
  align-items:center; justify-content:center; text-align:center;
  padding:clamp(96px,13vh,150px) var(--margen);
}
.banda--centro .banda__c{ max-width:min(92vw, 30ch); }
.banda--centro .banda__t{ font-size:clamp(28px, 3.8vw, 52px); }
.banda--centro .banda__d{ margin-left:auto; margin-right:auto; }
/* Y la vertical, para el detalle de fachada. */
.banda--alta{ min-height:min(120svh, 980px); }

/* ==========================================================================
   CARTERA CON FOTOGRAFÍA
   La ficha ya admitía imagen —cae en la lámina técnica si no la hay—, así que
   aquí sólo se le da el trato que pide una foto: sitio, un acercamiento lento
   al pasar por encima y el texto sobre la propia imagen.
   ========================================================================== */
.tarjeta__l{ aspect-ratio:4/3; }
.tarjeta__l img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.02);
  transition:transform 1.1s var(--e-cine), filter 1.1s var(--e-cine);
  filter:saturate(.86) contrast(1.03);
}
.tarjeta:hover .tarjeta__l img,
.tarjeta:focus-visible .tarjeta__l img{ transform:scale(1.08); filter:saturate(1) contrast(1.06); }

/* El destacado, a lo grande: la foto ocupa la mitad y el texto la otra. */
@media (min-width:1000px){
  .destacado{ align-items:stretch; }
  .destacado__l{ min-height:min(72svh, 620px); }
  .destacado__l img{ width:100%; height:100%; object-fit:cover; }
}

/* ==========================================================================
   AVISO DE MATERIAL PROVISIONAL
   Mientras las imágenes sean las generadas, se dice. Un sitio con fotos de
   relleno publicado sin avisar es una llamada del cliente a los dos días.
   ========================================================================== */
.aviso-fotos{
  position:relative; z-index:12;
  margin:0 var(--margen) clamp(30px,5vh,54px);
  padding:16px 18px; border-left:2px solid var(--ocre);
  background:rgba(var(--velo-rgb),.86);
  font-family:var(--f-cota); font-size:11px; line-height:1.75; letter-spacing:.04em;
  color:var(--tinta-2);
}
.aviso-fotos b{ color:var(--ink); font-weight:500; }
.aviso-fotos code{ color:#33405A; }

@media (prefers-reduced-motion: reduce){
  .fondo-f__img, .banda__f img, .tarjeta__l img{ transition:none !important; }
}