/* ==========================================================================
   components/redes.css — Enlaces a redes sociales (LinkedIn, Instagram)
   Componente marcado: redes (dentro de footer en todas las páginas y de
   datos-contacto en contacto). Mismo marcado en todas las copias.
   Iconos blancos sobre abismo / abismo-900: contraste ≥ 14:1 (docs/accesibilidad.md).
   ========================================================================== */
.redes { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.redes__enlace {
  display: grid;
  place-items: center;
  width: var(--tactil); height: var(--tactil);
  border: var(--hairline) solid var(--borde-inverso);
  border-radius: var(--radio-circulo);
  color: var(--c-blanco);
  transition: transform var(--dur-rapida) var(--ease-cambio);
}
/* Hover: se eleva (transform, animado) y se rellena de agua (color, instantáneo) */
.redes__enlace:hover {
  transform: translateY(calc(var(--space-1) * -1));
  background: var(--c-agua);
  border-color: var(--c-agua);
  color: var(--c-abismo);
}
.redes__enlace:active { transform: scale(var(--escala-pulsado)); }
.redes__enlace svg { width: var(--icono-sm); height: var(--icono-sm); }