/* ══════════════════════════════════════════════════════════════════════
   GRIBOLT — fotografía del oficio
   ══════════════════════════════════════════════════════════════════════
   Hoja aparte, como `alza.css`: quitar su línea del encolado devuelve el
   sitio anterior sin tocar una regla.

   Las cinco tomas están graduadas contra las cifras de la casa —el oro
   `#C9A227` marca el eje en 0,241 y el papel de la página vive en
   luminancia 19-23—, pero con una diferencia respecto a la materia: en una
   escena con caras NO se fuerza ese eje. Subirle el calor a la piel la
   lleva de 18° a 44° y la deja enfermiza, y eso no lo delata ninguna cifra
   global. Se mide la PIEL aparte y se frena en 30°.

   Y las claras no entran: para que una foto pertenezca a una página negra
   hay que bajarla tres o cuatro veces, y ahí el JPEG se rompe en bandas
   sobre la camisa y el rostro. Sólo se usan tomas que nacen oscuras.

     archivo              luminancia   R−B   tono de piel
     dos-al-monitor          31,0      3,7      30,4°
     manos-teclado           31,0      3,2      30,1°
     dos-concentrados        18,4      1,8      30,2°
     velas-teclado           31,0      6,2        —      (manos, sin rostro)
     muro-velas              30,8     −7,4        —      (pantallas)

   `muro-velas` se queda FRÍA a propósito: las velas de un gráfico son
   verdes y rojas, y calentarlas al oro las vuelve ilegibles. ═══════════ */

/* ── la banda: la foto a sangre detrás de un apartado ─────────────────── */
.gb-banda{position:relative;isolation:isolate}
.gb-banda > *{position:relative;z-index:1}
.gb-banda::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:var(--gb-velo),var(--gb-foto);
  background-size:auto,cover;
  background-position:center,var(--gb-pos,center);
  background-repeat:no-repeat,no-repeat}
/* El velo se ancla al CONTENIDO, no a un porcentaje de ventana: la medida
   de la casa son 1.120 px centrados, así que la parte opaca tiene que
   llegar hasta donde de verdad acaba el texto. Cada apartado trae el suyo,
   medido sobre el peor píxel del rango de cada línea. */
.gb-banda{--gb-velo:linear-gradient(90deg,
  rgba(14,12,7,.97) 0%,rgba(14,12,7,.94) 62%,rgba(14,12,7,.42) 100%)}

/* En pantalla estrecha el velo lateral NO sirve: el texto deja de vivir en
   la mitad izquierda y ocupa todo el ancho, así que el degradado que se
   abría al 64 % lo dejaba sobre el gráfico —medido, tres líneas entre 2,60
   y 4,45 sobre el verde de las velas—. Aquí el velo es VERTICAL y casi
   plano: la foto se queda de textura, no de imagen. */
@media (max-width:899.98px){
  .gb-banda::before{
    background-image:linear-gradient(180deg,
      rgba(14,12,7,.90) 0%,rgba(14,12,7,.955) 42%,
      rgba(14,12,7,.955) 72%,rgba(14,12,7,.88) 100%),var(--gb-foto)}
}

/* ── la ficha: la foto enmarcada dentro de una columna ────────────────── */
.gb-ficha{margin:2.2rem 0 0;position:relative;overflow:hidden;
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),
                    100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));
  box-shadow:inset 0 0 0 1px rgba(201,162,39,.30)}
.gb-ficha img{display:block;width:100%;height:auto}
/* el degradado inferior asienta la foto en el papel en vez de recortarla
   contra él, y el lateral dorado la cose a la paleta */
.gb-ficha::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,12,7,.08) 0%,rgba(14,12,7,.58) 100%),
             linear-gradient(90deg,rgba(201,162,39,.10),rgba(201,162,39,0) 55%)}

@media (prefers-reduced-motion:no-preference){
  .gb-ficha img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
  .gb-ficha:hover img{transform:scale(1.03)}
}