/* ═══════════════════════════════════════════════════════════════════════
   CATÁLOGOS — la página que sustituye a catalogo.html y certificados.html
   ═══════════════════════════════════════════════════════════════════════
   Vive aparte de portada.css y ficha.css por la misma razón que ellas viven
   separadas: cada página carga lo suyo y nada más. Los tokens, el reset, la
   cabecera y los botones vienen de aignep.css.

   🔴 Y esos tokens son LOS QUE EXISTEN, comprobados uno a uno contra
   aignep.css antes de mirar la página. La primera versión de esta hoja usó
   diez nombres inventados —`--fondo-2`, `--texto-1`, `--linea`…— que sonaban
   plausibles y no existen: el CSS habría cargado sin un solo error, sin nada en
   consola, y la página se habría visto rara sin poder decir por qué. Es la
   trampa que este proyecto ya documenta cuatro veces con clases, y con los
   tokens muerde igual de silenciosa. Los nombres de la casa son `--bg`, `--bg-2`,
   `--text`, `--muted`, `--line`, `--panel`, `--radius-*` y `--space-*`.
   ══════════════════════════════════════════════════════════════════════ */
@layer reset, base, layout, componentes, motion;

@layer layout {
  .cats { max-width: 1180px; margin: 0 auto; padding: var(--space-xl) var(--space-md) var(--space-2xl); }
  .cats__cab { max-width: 68ch; margin-bottom: var(--space-xl); }

  /* la rejilla la decide el CONTENIDO, no una cuenta de columnas escrita a
     mano: `auto-fill` con un mínimo deja que quepan las que quepan, y así la
     página no tiene un ancho en el que las tarjetas se estiren solas */
  .cats__rejilla {
    display: grid; gap: var(--space-md);
    grid-template-columns: repeat(auto-fill, minmax(clamp(15rem, 27vw, 20rem), 1fr));
  }
}

@layer componentes {
  .cats__eyebrow {
    font-family: var(--font-mono); font-size: .74rem; letter-spacing: .16em;
    text-transform: uppercase; color: var(--brand); margin: 0 0 .5rem;
  }
  .cats__t { font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.08; margin: 0 0 .7rem; text-wrap: balance; }
  .cats__lead { font-size: 1.05rem; line-height: 1.6; color: var(--muted); margin: 0 0 .6rem; text-wrap: pretty; }
  .cats__nota { font-size: .9rem; line-height: 1.55; color: var(--muted); margin: 0; text-wrap: pretty; }

  /* 🔴 `subgrid`, y llegando HASTA DENTRO de la tarjeta. Con él solo en `.cat`
     se igualan las tarjetas entre sí, que era la mitad del problema: dentro,
     una descripción de dos líneas y otra de tres seguían dejando los botones de
     PDF a alturas distintas en la misma fila. Se vio mirando, no midiendo —la
     medida decía 441/441/441 porque comparaba tarjetas de filas distintas—.
     Por eso `.cat__txt` es subgrid también: nombre, descripción y acciones
     comparten sus carriles con toda la fila, y los botones quedan alineados
     aunque los textos no midan lo mismo. Son cuatro carriles: foto, nombre,
     descripción y acciones. */
  .cat {
    display: grid; grid-template-rows: subgrid; grid-row: span 4;
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    background: var(--bg-2); overflow: hidden;
    transition: border-color .2s var(--ease-out), transform .2s var(--ease-out);
  }
  .cat:hover { border-color: var(--brand); transform: translateY(-2px); }
  .cat__foto { display: block; aspect-ratio: 8 / 5; overflow: hidden; background: var(--panel); }
  .cat__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .cat__txt {
    padding: var(--space-sm) var(--space-md) var(--space-md);
    display: grid; grid-template-rows: subgrid; grid-row: span 3;
    gap: .5rem; align-content: start;
  }
  /* la nota va con la descripción, para no reclamar un carril propio que las
     tarjetas sin nota dejarían vacío */
  .cat__desc + .cat__nota { margin-top: -.25rem; }
  .cat__nom { font-size: 1.12rem; margin: 0; }
  .cat__desc { font-size: .88rem; line-height: 1.5; color: var(--muted); margin: 0; text-wrap: pretty; }
  .cat__nota { font-size: .8rem; line-height: 1.45; color: var(--muted); margin: 0; }
  .cat__acciones { display: flex; flex-wrap: wrap; gap: .5rem; margin: .3rem 0 0; align-items: center; }

  .cat__pdf, .cat__ficha {
    display: inline-flex; align-items: center; gap: .45rem; min-height: 40px;
    padding: 0 .95rem; border-radius: 999px; font-size: .84rem; font-weight: 600;
    text-decoration: none; transition: background .18s var(--ease-out), color .18s var(--ease-out);
  }
  .cat__pdf { background: var(--brand); color: var(--white); }
  .cat__pdf span { font-family: var(--font-mono); font-size: .74rem; opacity: .8; font-weight: 400; }
  .cat__pdf:hover { background: var(--brand-gradient-end); }
  .cat__ficha { border: 1px solid var(--line); color: var(--text); }
  .cat__ficha:hover { border-color: var(--brand); color: var(--brand); }

  /* la que no tiene catálogo NO se esconde ni se disfraza de las demás: se ve
     que le falta algo, y por eso ocupa una fila de la rejilla igual */
  /* la que no tiene catálogo NO se esconde ni se disfraza: se ve que le falta
     algo. Ocupa tres carriles porque no tiene foto, y así su texto arranca
     donde arranca el de las demás. */
  .cat--sin { border-style: dashed; background: none; grid-row: span 3; }
  .cat--sin .cat__txt { padding-top: var(--space-md); grid-row: span 3; }
}

@layer motion {
  @media (prefers-reduced-motion: reduce) {
    .cat { transition: none; }
    .cat:hover { transform: none; }
  }
}