/* Lista de casos: work grid del kit del DS, agrupada por categoría. */

.portada { padding-top: var(--s-6); padding-bottom: var(--s-5); }
.portada h1 {
  font-weight: 700; font-size: var(--fs-h1); line-height: 0.96; letter-spacing: -0.03em;
}
.portada__bajada {
  margin-top: var(--s-3); max-width: 30em;
  font-weight: 300; font-size: var(--fs-lead); line-height: 1.35; letter-spacing: -0.01em;
}

/* Todos · Niños: dos páginas estáticas (lista/ y lista/ninos/), como la navegación principal. */
.vistas-lista { display: flex; gap: var(--s-4); margin-top: var(--s-4); border-bottom: 1px solid var(--ink-10, #e6e6e8); }
.vistas-lista a {
  position: relative; display: inline-block; padding: 12px 0; min-height: 44px;
  font-size: var(--fs-small); font-weight: 500; color: var(--fg-2);
  transition: color var(--dur) var(--ease);
}
.vistas-lista a:hover, .vistas-lista a[aria-current="page"] { color: var(--ink); }
.vistas-lista a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--orange);
}

.grupo { margin-top: var(--s-6); scroll-margin-top: calc(var(--nav-alto) + var(--s-3)); }
.grupo:last-child { margin-bottom: var(--s-7); }
.grupo__cabeza {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3);
  border-top: 1px solid var(--ink); padding-top: var(--s-2); margin-bottom: var(--s-4);
}
.grupo__cabeza h2 { font-weight: 600; font-size: var(--fs-h2); line-height: 1.05; letter-spacing: var(--ls-display); }
.grupo__cabeza p { color: var(--fg-2); font-size: var(--fs-small); }

/* Versión embebible (pedidos de la persona, 2026-11-06), como las tarjetas de
   tridimage.com/proyectos: sólo la imagen, y al pasar el mouse una banda oscura translúcida abajo
   con el nombre del proyecto (Rational Light) y el país. La imagen es la miniatura del hero
   (sitio/miniaturas/, scripts/generar_sitio.py → miniatura()), ya armada a 16:9 con su fondo. */
.tarjetas {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-3);
}
.tarjeta a { position: relative; display: block; overflow: hidden; border-radius: 4px; }
.tarjeta__marco { aspect-ratio: 16 / 9; background: var(--lamina, var(--mist)); }
.tarjeta__marco img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta__banda {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 12px var(--s-2) 14px;
  background: rgba(40, 40, 46, 0.85); color: var(--paper);
  opacity: 0; transition: opacity 300ms linear;
}
.tarjeta a:hover .tarjeta__banda, .tarjeta a:focus-visible .tarjeta__banda { opacity: 1; }
.tarjeta a:focus-visible { outline-offset: 3px; }
.tarjeta h3 { font-weight: 300; font-size: 20px; line-height: 1.15; letter-spacing: -0.01em; }
.tarjeta__meta { margin-top: 4px; font-size: 13px; line-height: 1.3; color: rgba(255, 255, 255, 0.78); }
/* Sin mouse (pantallas táctiles) no hay hover: la banda queda a la vista. */
@media (hover: none) { .tarjeta__banda { opacity: 1; } }