/* ════════════════════════════════════════════════════════════════
   COMPONENTES DEL HUB EPI
   Grilla de tarjetas — cuatro variantes: icono · imagen · dato · texto.

   Archivo propio y no molde-feria.css a propósito: el componente no es de la
   ficha de feria, es del hub. La home, las páginas de sector y lo que venga lo
   llaman igual.

   Los tokens (--color-*, --radius-*, --shadow-*, --anim-*) los sirve el
   Custom CSS de Bricks. Acá no se define ninguno.
   Render: inc/componentes.php · Documentación: MOLDE-FICHA-FERIA.md §11
   ════════════════════════════════════════════════════════════════ */

.tarjetas{display:grid;gap:1rem}
.cols-1{grid-template-columns:1fr}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}

/* ── La tarjeta ─────────────────────────────────────────────────
   Sombra suave en reposo que entra con la cascada; en hover se dibuja la
   barra superior y sube la sombra. Es el par hmk-hv-bar-top + hmk-hv-glow. */
/* Sin gris (2026-09-14): la tarjeta es siempre blanca —flota igual sobre una
   sección blanca que sobre una negra, y en la negra es donde más contrasta—.
   El borde que la separaba del fondo era --color-border; pasa a negro a baja
   opacidad, que ya no es un token de color aparte. */
.tarjeta{
  display:flex;flex-direction:column;gap:.5rem;
  background:var(--color-background);
  border:1px solid rgba(31,31,31,.12);
  border-radius:var(--radius-m);
  padding:1.4rem 1.3rem;
  text-decoration:none;color:inherit;
  box-shadow:var(--shadow-s);
  /* UNA sola transición. Los shorthands de `transition` no se componen: si la
     tarjeta lleva a la vez una clase de entrada (hmk-sr-cascade, que anima
     opacity y transform) y una de hover (hmk-hv-*, que anima transform y
     box-shadow), solo sobrevive la última y la tarjeta aparece de golpe.
     Este archivo carga después del glosario, así que acá se declara entera. */
  transition:opacity var(--anim-duration-base) var(--anim-easing),
             transform var(--anim-duration-fast) var(--anim-easing),
             box-shadow var(--anim-duration-fast) var(--anim-easing),
             border-color var(--anim-duration-fast) var(--anim-easing);
}

.t-cuerpo{display:flex;flex-direction:column;gap:.3rem}
/* Escala portada de miningtech.pe (2026-09-03): el título de tarjeta es el
   escalón entre display y texto — 1,25 de interlínea, ni tan apretado como un
   titular ni tan suelto como un párrafo. El texto abre a 1,6 igual que el
   cuerpo: la tarjeta no es un caso aparte, respira como el resto de la página.
   La tipografía del componente vive ACÁ y no en molde-feria.css: este archivo
   carga después (prioridad 21 contra 20) y le gana con la misma especificidad.
   Respaldo: componentes.css.pre-tipografia-2026-09-03 */
.t-titulo{font-family:var(--font-display);font-size:1.22rem;font-weight:700;line-height:1.25;letter-spacing:-.015em}
.t-texto{font-size:.95rem;color:var(--color-text-primary);line-height:1.6}
.t-eyebrow{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--color-text-primary);opacity:.6}
.t-tags{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.5rem}
.t-tag{font-size:.68rem;border:1px solid rgba(31,31,31,.15);border-radius:var(--radius-full);
  padding:.14em .6em;color:var(--color-text-primary)}
.t-flecha{margin-top:auto;padding-top:.6rem;color:inherit; /* sin rojo en textos (2026-10-03) */
  font-weight:600;transition:transform var(--anim-duration-fast) var(--anim-easing)}
.tarjeta:hover .t-flecha{transform:translateX(4px)}

/* ── Variante: icono ────────────────────────────────────────────
   El SVG viene de Lucide con stroke="currentColor", así que toma el color de
   la feria sin tocarlo. Por eso el color va en el contenedor, no en el svg. */
.t--icono .t-ico{color:inherit;line-height:0}
.t--icono .t-ico svg{width:1.75rem;height:1.75rem;display:block}

/* ── Variante: imagen ───────────────────────────────────────────
   La foto sale del padding de la tarjeta y toca sus bordes: por eso los
   márgenes negativos y el radio solo arriba. */
.t--imagen .tarjeta{padding-top:0}
.t-foto{margin:0 -1.3rem 1rem;aspect-ratio:16/10;
  border-radius:var(--radius-m) var(--radius-m) 0 0;overflow:hidden;
  background:var(--color-neutral-900)}
.t-foto .t-img{display:block;width:100%;height:100%;object-fit:cover}

/* ── Variante: dato ─────────────────────────────────────────────
   El número manda; el título queda de etiqueta debajo. */
.t--dato .tarjeta{text-align:center;align-items:center}
.t--dato .t-dato b{display:block;font-family:var(--font-display);
  font-size:clamp(1.8rem,3vw,2.4rem);font-weight:700;line-height:1;
  color:inherit}
.t--dato .t-titulo{font-size:.92rem}
.t--dato .t-texto{font-size:.82rem}

/* ── Tarjeta destacada ──────────────────────────────────────────
   Tinte apenas perceptible: a plena carga tapa la retícula y se come la
   sección. Si el navegador no soporta color-mix, se descarta el fondo y el
   borde sigue marcando la tarjeta. */
.tarjeta.destacada{border-color:var(--feria-color,var(--color-primary));
  background:var(--color-background)}

/* ── Responsive ─────────────────────────────────────────────────
   Se baja de a un escalón: 4→2 y 3→2 en tablet, todo a 1 en teléfono. */
@media(max-width:940px){
  .cols-4,.cols-3{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .cols-4,.cols-3,.cols-2{grid-template-columns:1fr}
}