/* 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); }

.tarjetas {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-4) var(--s-3);
}
.tarjeta a {
  display: block; height: 100%;
  border: 1px solid transparent;
  transition: border-color var(--dur-lenta) var(--ease);
}
.tarjeta a:hover { border-color: var(--ink); }
.tarjeta__marco {
  overflow: hidden; aspect-ratio: 4 / 3;
  background: var(--lamina, var(--mist));
  display: flex; align-items: center; justify-content: center;
}
.tarjeta__marco img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-lenta) var(--ease-out);
}
.tarjeta__marco--recorte img { object-fit: contain; padding: 8%; }
.tarjeta a:hover .tarjeta__marco img { transform: scale(1.03); }
.tarjeta h3 {
  margin: var(--s-2) var(--s-2) 0;
  font-weight: 700; font-size: 20px; line-height: 1.15; letter-spacing: -0.02em;
}
.tarjeta__bajada { margin: 6px var(--s-2) 0; font-weight: 300; font-size: 16px; line-height: 1.35; }
.tarjeta__meta { margin: var(--s-1) var(--s-2) var(--s-2); font-size: var(--fs-small); color: var(--fg-2); }