/* NoLabel: la tarjeta de un proyecto (.dir-card), en hoja propia porque la pintan dos superficies:
   el directorio de /escena y la vista previa de /proyecto. Es el espejo en CSS de shared/tarjeta.mjs:
   una sola copia del marcado, una sola copia de su estilo.
   Vive fuera de site.css porque /proyecto es una Function server-rendered que NO carga esa hoja (solo
   tokens.css + el <style> inline de la página): traerse las 661 líneas del sitio de marketing para
   estilar una tarjeta le cambiaba los botones a las tres vistas del perfil.
   El gate scripts/check-design.sh escanea este archivo: nada de hex crudo, radios solo --r-* o 999px,
   box-shadow solo inset.
   La rejilla que las acomoda (.dir-grid) y el pie (.dir-pie) se quedan en site.css: son de /escena,
   no de la tarjeta. */

/* El line-height se declara aquí y no se hereda: en /escena el body de site.css lo pone en 1.45,
   pero en /proyecto el body lo pinta estilosLogin(), que no lo declara, y la misma tarjeta salía
   11.5px más apretada en la vista previa que en la ficha real. El ritmo vertical es del componente. */
.dir-card{border:1px solid var(--hairline); border-radius:var(--r-md); overflow:hidden;
  background:var(--surface); line-height:1.45; transition:border-color 160ms var(--ease-out)}
.dir-card:hover{border-color:var(--accent-30)}
/* La foto pasa de 3/2 (230px de alto) a franja: en un directorio uno busca nombres, y con la foto
   grande se leen colores antes que nombres. De paso aguanta mejor una foto mediocre, que va a
   pasar. El ratio ya no vive en el <img> sino en su caja (.dir-foto-caja): el <img> va absoluto
   dentro y la cubre, asi que los width/height del HTML (que reservan el hueco) ya no mandan la
   altura. La caja recorta (.enc-caja) y el encuadre guardado entra por tres variables: --fx y --fy
   (punto de enfoque, en %) y --fz (zoom, 1 a 2). object-position y transform-origin usan el mismo
   punto: el borde izquierdo de la imagen escalada queda en (x/100)*(B - s*W), lineal en x y siempre
   cubre la caja, asi que nunca se ve fondo.
   Son 3 perillas, una por breakpoint, no una sola: la columna se ENSANCHA al bajar a menos
   columnas (menos columnas = más ancho cada una), así que un ratio fijo agranda la foto justo en
   mobile, que es donde más se scrollea buscando nombres. El ratio sube (foto más achatada) según
   baja el ancho de viewport para que el alto real no pase de ~150px en ninguno de los tres.
   El invariante depende de que la tarjeta viva en una columna de ~340-400px: en /escena la acota la
   rejilla y en /proyecto la columna de la vista previa (340px fija arriba de 860, con tope debajo,
   ver .p-preview). Suelta a 800px de ancho la misma regla da 290px de foto. Si tocas un valor o
   sueltas ese tope, mide con getBoundingClientRect() en LAS DOS páginas, no lo calcules. */
.enc-caja{position:relative; overflow:hidden}
.enc-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:var(--fx,50%) var(--fy,50%); transform:scale(var(--fz,1));
  transform-origin:var(--fx,50%) var(--fy,50%)}
.dir-foto-caja{display:block; aspect-ratio:5/2; background:var(--bg)}
/* El hueco vacío guarda el mismo lugar que la foto, así que comparte los ratios de arriba. */
.dir-foto-vacia{display:flex; align-items:center; justify-content:center; margin:0; aspect-ratio:5/2;
  background:var(--bg); border-bottom:1px solid var(--hairline); font-family:var(--sans);font-weight:500;
  font-size:12px; letter-spacing:.01em; color:var(--muted)}
/* tarjeta.mjs emite los tres nodos siempre y apaga el que no aplica con [hidden]; sin esta línea el
   display propio de cada uno le gana (la hoja de autor pisa a la del user-agent, no importa la
   especificidad). .dir-m hoy no declara display, así que le basta el default del navegador y no
   necesitaría estar aquí, pero el invariante de "el nodo oculto no se ve" es del componente, no de
   que nadie le ponga un display a esa regla algún día: mejor blindarlo ahora que depender de que
   siga sin tocarse. */
.dir-foto[hidden],.dir-foto-vacia[hidden],.dir-m[hidden]{display:none}
/* Sin foto la caja vacia no debe sumarse al "Sin foto". */
.dir-foto-caja:has(> .dir-foto[hidden]){display:none}
@media(max-width:860px){ .dir-foto-caja,.dir-foto-vacia{aspect-ratio:11/4} }
@media(max-width:520px){ .dir-foto-caja,.dir-foto-vacia{aspect-ratio:13/4} }
.dir-bd{padding:14px 15px 16px}
/* La display la traía la regla `h1,h2,h3` de site.css. Aquí se declara: sin ella el <h3> de la
   tarjeta se cae a la sans en /proyecto, y el mismo componente se leería distinto en cada página. */
.dir-n{font-family:var(--disp); font-size:1.3rem; letter-spacing:-.025em; margin:0 0 4px}
.dir-m{color:var(--muted); font-size:13px; margin:0 0 10px}
.dir-lks{display:flex; flex-wrap:wrap; gap:6px}
/* La flecha del link lo hace verse tocable en vez de parecer una etiqueta. */
.dir-lk{border:1px solid var(--hairline); border-radius:999px; padding:5px 12px; font-size:12px;
  color:var(--chip-text); text-decoration:none; display:inline-flex; align-items:center; gap:5px;
  transition:border-color 160ms var(--ease-out), color 160ms var(--ease-out)}
.dir-lk:hover{border-color:var(--accent); color:var(--text)}
@media (prefers-reduced-motion:reduce){ .dir-card,.dir-lk{transition:none} }