/* ══════════════════════════════════════════════════════════════════════════
   obra.css — la página `/trabajo`. Sólo la REJILLA; todo lo demás lo pone
   `trabajo.css`, que ya estiliza `.tr-caso` y sus partes.

   🔴 LA SECCIÓN LLEVA `id="trabajo"` A PROPÓSITO Y NO ES UN DESCUIDO. Las 32
   reglas de `trabajo.css` cuelgan de `#trabajo`, y `trabajo.js` arranca con
   `getElementById('trabajo')`. Con ese id, la ficha de esta página es
   EXACTAMENTE la misma que la de la portada —mismo marco, mismo hover que baja
   la película, misma barra de avance— sin una línea duplicada. Cambiar el id
   habría significado copiar las 32 reglas y verlas divergir en un mes.

   🔴 Y LA REJILLA CRECE SOLA. `auto-fill` con un mínimo en `rem`: con cuatro
   casos hay tres columnas y con doce habrá tres columnas y cuatro renglones.
   Añadir un caso es pegar un bloque de HTML, nunca tocar esta hoja — que es la
   pregunta de verdad: qué hay que hacer la PRÓXIMA vez.
   ══════════════════════════════════════════════════════════════════════════ */

.ob-abre, .ob-obra, .ob-cierre{
  padding-inline: max(1.5rem, (100% - 80rem) / 2);
}

/* ── La apertura ──────────────────────────────────────────────────────────
   Mismo séptimo escalón que las otras interiores. Aquí se declara porque esta
   página NO carga `puertas.css`: sólo necesitaba una rejilla, no las puertas. */
:root{ --t0: clamp(3.25rem, 7.2vw, 6.5rem); }

.ob-abre{ padding-block: clamp(7rem, 22vh, 12rem) clamp(2.5rem, 7vh, 4rem); }
.ob-abre__t{
  font-size: var(--t0); line-height: 1.0; letter-spacing: -.035em;
  color: var(--tx-1); margin: .5rem 0 0; max-width: 20ch; text-wrap: balance;
}
.ob-abre__pie{
  display: grid; grid-template-columns: repeat(2, minmax(0, 28ch));
  gap: clamp(1.5rem, 4vw, 4rem); margin-top: clamp(2rem, 6vh, 3.5rem);
}
.ob-abre__pie .parrafo{ max-width: none; margin: 0; }
@media (max-width: 720px){ .ob-abre__pie{ grid-template-columns: 1fr; gap: 1.1rem } }

/* ── La rejilla ───────────────────────────────────────────────────────────
   `minmax(19rem, 1fr)`: 19rem es el ancho por debajo del cual el nombre y su
   frase dejan de leerse cómodos en una ficha vertical. Por encima, el navegador
   mete tantas columnas como quepan. */
.ob-obra{ padding-block: clamp(2rem, 5vh, 3.5rem) clamp(4rem, 10vh, 7rem); }
#trabajo .ob-rejilla{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: clamp(2.5rem, 5vw, 5rem) clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
/* Un caso apaisado ocupa DOS columnas. Su marco ya es 16/10 en `trabajo.css`:
   metido en una columna vertical se vería una tira. Es la única decisión que
   hay que tomar al añadir un caso, y se toma poniéndole la clase o no. */
#trabajo .ob-rejilla .tr-caso--ancho{ grid-column: span 2; }
@media (max-width: 700px){
  /* En una sola columna `span 2` deja la ficha SIN COLOCAR y la rejilla la
     manda a la fila siguiente con un hueco delante. Se anula. */
  #trabajo .ob-rejilla .tr-caso--ancho{ grid-column: auto; }
}

/* El renglón de arriba de la rejilla: cuántos son, dicho sin presumir. */
.ob-cuenta{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  border-top: 1px solid var(--tx-linea);
  padding-top: 1.1rem; margin-bottom: clamp(2rem, 5vh, 3.2rem);
}
.ob-cuenta p{ margin: 0; font-size: var(--t6); color: var(--tx-3); }
.ob-cuenta b{ color: var(--tx-1); font-weight: 400; font-variant-numeric: tabular-nums; }

/* ── El cierre ────────────────────────────────────────────────────────────
   Honesto: con cuatro casos, la frase no puede sonar a catálogo. Dice lo que
   hay y ofrece el siguiente paso. */
.ob-cierre{ padding-block: clamp(3rem, 9vh, 6rem) clamp(4rem, 12vh, 8rem); }
.ob-cierre .d2{ margin: .4rem 0 1rem; max-width: 20ch; }
.ob-cierre .pie__rutas{ margin-top: clamp(1.5rem, 4vh, 2.4rem); }

/* El revelado: mismo gesto que el resto del sitio, disparado por `puertas.js`. */
.pu-rev{ opacity: 0; }
.pu-rev[data-visto]{ animation: ob-enfoca .62s var(--curva) forwards; }
@keyframes ob-enfoca{ from{ opacity:0; translate:0 14px } to{ opacity:1; translate:0 0 } }
@media (prefers-reduced-motion: reduce){ .pu-rev{ opacity:1; animation:none } }