/* ═══════════════════════════════════════════════════════════════════════════
   trabajo.css — la sección TRABAJO, v2 (17 ago 2026)

   Sustituye la sección de casos que vivía en index.html con `.recorre`
   (recorridos cosidos a partir de capturas). Lo que cambia de fondo: cada caso
   ahora es una PELÍCULA renderizada en Cycles del sitio real corriendo dentro
   del aparato, y arranca al pasar el cursor.

   🔴 TODAS LAS CLASES VAN PREFIJADAS `tr-`, Y NO ES BUROCRACIA. Los nombres
      naturales —`.marco`, `.caso`, `.casos`, `.rotulo`, `.pie`, `.cierre`—
      YA EXISTEN en caliber.css con otro significado: 90 reglas entre los seis.
      Sin prefijo esta sección heredaba el chasis, la rotación de ±2°, la placa
      de papel y la rejilla del sistema viejo, en silencio y sin un error.

   Se carga DESPUÉS de caliber.css: hereda sus tokens (--tinta, --oro, --tx-*,
   los pesos por función, --curva) y no redefine ninguno.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── LA MEDIDA ───────────────────────────────────────────────────────────
   990px de contenido, y sale de dos sitios a la vez. Medido en
   cuberto.com/projects/: contenido de 990 con márgenes de 216 a 1440 de
   viewport. Y nos conviene por aritmética: 990 con un hueco de 90 da columnas
   de 450, que a dpr 2 son 900px de pantalla contra los 900px de fuente de
   nuestras piezas verticales — NATIVO EXACTO, cero ampliación. Con el
   contenedor ancho del sitio los tiles pedían más píxeles de los que existen
   y la imagen se veía borrosa. */
#trabajo .tr-envoltorio,
#apertura .tr-envoltorio{
  max-width:1134px;                        /* 990 + 2×72 de relleno */
  margin:0 auto;
  padding:0 clamp(24px,5vw,72px);
}

/* ── LA CABECERA ───────────────────────────────────────────────────────
   ⚠️ VIVE EN `#apertura`, NO AQUÍ. La pantalla anclada de encima termina
   enseñándola: es su último fotograma. Los selectores llevan las dos secciones
   para que haya UNA sola fuente de verdad — si se copian los valores a
   apertura.css, la próxima vez que cambie la escala tipográfica el titular se
   parte en dos tamaños distintos según por dónde se mire. */
#trabajo .tr-rotulo,
#apertura .tr-rotulo{
  font-family:var(--texto);font-weight:var(--p-ui);font-size:var(--t6);
  letter-spacing:0;text-transform:none;color:var(--tx-3);
  margin:0 0 30px;
}
#trabajo .tr-titulo,
#apertura .tr-titulo{
  font-family:var(--display);font-weight:var(--p-voz);font-size:var(--t1);
  line-height:1.03;letter-spacing:-.028em;color:var(--tx-titular);
  margin:0 0 26px;max-width:18ch;text-wrap:balance;
}
#trabajo .tr-titulo b,
#apertura .tr-titulo b{font-weight:var(--p-golpe);color:var(--tx-1)}  /* ilumina, no pesa */
#trabajo .tr-entrada,
#apertura .tr-entrada{
  color:var(--tx-2);font-size:var(--t4);font-weight:var(--p-cuerpo);
  line-height:1.55;max-width:52ch;margin:0 0 clamp(56px,7vw,104px);
}

/* ── EL ESCALONADO ───────────────────────────────────────────────────────
   Medido en cuberto.com/projects/ con el viewport real: 2 columnas de 450px,
   hueco de 90px (fila y columna) y la columna derecha desfasada +145px, o sea
   el 32% del alto del tile. Sus filas van cada 612px = 450 + 90 + 72 del pie.
   🔴 El desfase se aplica UNA VEZ a la columna, no por fila — lo delata que su
      paso de fila sea 612 exacto en LAS DOS columnas. Aquí sólo hay una fila
      de dos, así que un margin-top en el segundo lo replica sin acumularse.
   ⚠️ Con tres verticales en dos columnas SIEMPRE sobra un hueco: LEVIA queda
      sola en la fila 2. Se acepta como aire antes del cierre. */
#trabajo .tr-trio{display:grid;grid-template-columns:repeat(2,1fr);gap:96px;align-items:start}
#trabajo .tr-trio .tr-caso:nth-child(2){margin-top:145px}
@media (max-width:900px){
  #trabajo .tr-trio{grid-template-columns:1fr;gap:clamp(48px,7vw,64px)}
  #trabajo .tr-trio .tr-caso:nth-child(2){margin-top:0}
}
#trabajo .tr-cierre{margin-top:clamp(48px,6vw,88px)}

#trabajo .tr-caso{display:block;position:relative;text-decoration:none;color:inherit}
#trabajo .tr-caso:focus-visible{outline:2px solid var(--oro);outline-offset:10px;border-radius:12px}

/* ── EL DERRAME ──────────────────────────────────────────────────────────
   Del comentario de caliber.css §marco: «el derrame es luz, no caja — es lo
   que integra la captura con la página sin recurrir a un filtro, que es la
   salida barata». Cada pieza tira SU luz sobre la tinta. El color no se
   eligió: es el matiz dominante MEDIDO de cada película, con la luminosidad
   subida a .62 porque el dominante de LEVIA (#314961, L=0.29) sobre tinta no
   existe. Va al 44%, el mismo valor que `.oscuro .marco::before`.
   🔴 EL INSET EN PÍXELES, NUNCA EN PORCENTAJE: con -6% el halo del tile ancho
      se salía 78px de un margen de 72 y la página ganaba scroll horizontal. */
#trabajo .tr-caso{--derrame:rgba(160,160,170,.55)}
#trabajo .tr-caso::before{
  content:'';position:absolute;inset:-38px -22px;z-index:-1;pointer-events:none;
  border-radius:50%;filter:blur(60px);
  background:radial-gradient(closest-side,
             color-mix(in oklab, var(--derrame) 44%, transparent), transparent 72%);
  opacity:0;transition:opacity .9s var(--curva);
}
#trabajo .tr-caso.-dentro::before{opacity:1}        /* se enciende cuando la pieza ENTRA */
#trabajo .tr-caso:hover::before{opacity:1;transition-duration:.5s}

/* ── EL MARCO ────────────────────────────────────────────────────────────
   🔴 RADIO SÍ, PLACA NO. El scout de caliber.css (30-jul-2026, 73 imágenes de
   5 estudios en vivo) midió 0 con sombra, 0 con borde, 0 anidadas y radio
   mediano 0 — de ahí salió `.marco--desnudo`. paco pidió las esquinas
   redondeadas, así que van; lo que NO vuelve es la combinación que ese mismo
   comentario marca como «se lee hecha por IA»: relleno + fondo + borde +
   radio + sombra, todo a la vez. El radio va sobre el propio medio, sin placa
   debajo, y el volumen lo pone el derrame. */
#trabajo .tr-marco{
  --r:10px;
  position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:var(--r);
  background:var(--sup-1);
}
#trabajo .tr-caso--ancho .tr-marco{aspect-ratio:16/10}
/* la hairline de pseudo-elemento y NO de `border`: un borde entra en la caja y
   desplaza el vídeo un píxel al encender */
#trabajo .tr-marco::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:3;
  border-radius:inherit;box-shadow:inset 0 0 0 1px var(--tx-linea);
  transition:box-shadow var(--lento) var(--curva);
}
#trabajo .tr-caso:hover .tr-marco::after{box-shadow:inset 0 0 0 1px rgba(216,197,140,.42)}

#trabajo .tr-tapa,#trabajo .tr-marco video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1);transition:transform 1.2s var(--curva);   /* 1.2s medido en su ficha */
}
#trabajo .tr-caso:hover .tr-tapa,#trabajo .tr-caso:hover video{transform:scale(1.035)}

/* 🔴 LA TAPA NO SE VA HASTA `canplay`. Cuberto cruza al vídeo en cuanto entra
   el puntero; con preload="none" eso puede caer en un cuadro vacío en una
   conexión lenta. Aquí la tapa aguanta hasta que el vídeo tiene qué enseñar. */
#trabajo .tr-tapa{z-index:2;opacity:1;transition:opacity .4s linear}
#trabajo .tr-marco video{z-index:1}
#trabajo .tr-caso.-corre .tr-tapa{opacity:0}

/* nuestras piezas son MONTAJES de 4-6 tomas, no una toma continua como las
   suyas. Esta hairline lo dice sin gastar una palabra. */
#trabajo .tr-avance{
  position:absolute;left:0;bottom:0;height:2px;width:0;z-index:4;
  background:var(--oro-vivo);opacity:0;transition:opacity var(--base);
}
#trabajo .tr-caso.-corre .tr-avance{opacity:.9}

/* ── EL PIE ──────────────────────────────────────────────────────────────
   El número vive AQUÍ y no encima de la obra: estaba dentro del marco con
   `mix-blend-mode:difference` y sobre el gris claro de Black Secret el «04»
   casi desaparecía —difference contra claro devuelve gris MEDIO, no negro—.
   El arreglo bueno no era otro modo de mezcla: era no poner nada encima.
   Y el TIPO va en la línea del nombre: apilado eran tres renglones grises
   seguidos del mismo valor y el ojo no encontraba dónde empezar. */
/* ⚠️ AGO-2026 · SE FUERON EL NÚMERO Y EL TIPO. El pie tenía cuatro piezas
   —número en oro, nombre, flecha, tipo en versales— más una lista de cuatro
   chips debajo: SEIS elementos por caso. El de Cuberto tiene dos, la imagen y
   una frase. El número no informa (el orden ya lo da la rejilla) y el tipo
   («Sistema a la medida») dice lo mismo que la frase de abajo, sólo que en
   versales y partido en otro renglón. Ahora el tipo vive DENTRO de la frase. */
#trabajo .tr-pie{display:flex;align-items:baseline;gap:8px 16px;flex-wrap:wrap;margin:22px 0 10px}
#trabajo .tr-nombre{
  font-family:var(--display);font-weight:var(--p-voz);font-size:var(--t3);
  letter-spacing:-.018em;line-height:1;margin:0;text-wrap:nowrap;
}
#trabajo .tr-flecha{
  color:var(--oro);opacity:0;transform:translateX(-8px);margin-left:-8px;
  transition:opacity var(--base) var(--curva),transform var(--base) var(--curva);
}
#trabajo .tr-caso:hover .tr-flecha,#trabajo .tr-caso:focus-visible .tr-flecha{
  opacity:1;transform:translateX(0);
}
/* sin divisor: era cromo. La separación la hacen el salto de tamaño (44px de
   Clash contra 12 de versalitas) y el aire. Cuberto no usa un solo divisor en
   toda su página de casos. */
#trabajo .tr-que{
  color:var(--tx-2);font-size:var(--t5);font-weight:var(--p-cuerpo);
  line-height:1.55;max-width:46ch;margin:0;
}
#trabajo .tr-caso--ancho .tr-que{max-width:58ch}
/* lo que se entregó, dentro de la frase: mismo tamaño y mismo peso, sólo sube
   de tono. Antes eran cuatro chips en versales con una rayita de oro cada uno
   — cuatro paradas del ojo que no construían una sola idea. */
/* CAPA 1 · ago-2026 — el énfasis por TONO dentro de prosa corrida se va.
   Medido: en las 16 pantallas el sitio mostraba 5.6 colores de texto
   simultáneos contra 1.6 de Cuberto y 3.7 de Apple, y buena parte venía de
   estos saltos .62 → 1.0 a media frase: el párrafo salía RAYADO. El énfasis
   ahora es tamaño, posición y aire. La etiqueta <b> se queda (es semántica);
   lo que se va es el salto de color. */
#trabajo .tr-que b{font-weight:var(--p-cuerpo)}

@media (prefers-reduced-motion:reduce){
  #trabajo .tr-tapa,#trabajo .tr-marco video,#trabajo .tr-caso::before,
  #trabajo .tr-marco::after,#trabajo .tr-flecha{transition:none}
}