/* ═══════════════════════════════════════════════════════════
   MATELEC · animación de electrodeposición del hero
   ───────────────────────────────────────────────────────────
   Extraído de la capa de animación original: solo el lienzo.
   No define tipografías, tamaños ni colores: se limita a
   colocar el canvas detrás del contenido del hero, que ya es
   position:relative y tiene overflow:hidden.
   ══════════════════════════════════════════════════════════ */
.mx-canvas{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;
}

/* ═══════════════════════════════════════════════════════════
   Tarjetas de investigación convertidas en enlace
   ───────────────────────────────────────────────────────────
   Al pasar de <div> a <a>, el contenido heredaría el azul de
   `a { color: var(--blue) }`. Esto devuelve el color de texto
   original para que las tarjetas se vean exactamente igual
   que antes. El h3, el texto y los ítems ya llevan su propio
   color; esto solo afecta al icono, que no lo tenía.
   ══════════════════════════════════════════════════════════ */
.cards-grid a.card-research,
.cards-grid a.card-research:hover{
  color:var(--text);
}

/* ═══════════════════════════════════════════════════════════
   Elevación al pasar el ratón
   ───────────────────────────────────────────────────────────
   style.css ya define `.card:hover{transform:translateY(-4px)}`
   (línea 524), pero `.fade-in.visible{transform:none}` (línea
   1264) tiene la misma especificidad y va después, así que lo
   anulaba: la sombra y el borde sí cambiaban, el desplazamiento
   no. Se repite aquí con más especificidad y el mismo valor de
   -4px para que la elevación funcione de verdad.
   ══════════════════════════════════════════════════════════ */
.cards-grid a.card-research:hover{
  transform:translateY(-4px);
}

/* ═══════════════════════════════════════════════════════════
   Micro-rebote del icono de las tarjetas de investigación
   ───────────────────────────────────────────────────────────
   Acompaña a la elevación de arriba con un rebote del emoji.

   width:fit-content ciñe la caja al emoji para que el giro
   sea sobre él y no sobre toda la anchura de la tarjeta. No
   cambia la maquetación: el div sigue siendo de bloque y
   conserva su margen inferior.
   ══════════════════════════════════════════════════════════ */
.card-research .card-icon{
  width:fit-content;
  transform-origin:50% 65%;
  transition:transform .45s cubic-bezier(.34,1.56,.64,1);
}
.card-research:hover .card-icon,
.card-research:focus-visible .card-icon{
  transform:translateY(-5px) rotate(-8deg) scale(1.12);
}

/* Accesibilidad: movimiento reducido. El lienzo del hero ya no
   se dibuja (lo comprueba el script); aquí se anula el rebote. */
@media (prefers-reduced-motion: reduce){
  .card-research .card-icon{transition:none}
  .card-research:hover .card-icon,
  .card-research:focus-visible .card-icon{transform:none}
  .cards-grid a.card-research:hover{transform:none}
}