/* ============================================================================
   COMPONENTES › REDES SOCIALES
   ----------------------------------------------------------------------------
   Los íconos son SVG inline (dibujados dentro del propio HTML): no dependen de
   ninguna librería externa, pesan casi nada y toman el color del texto con
   currentColor. Por eso el hover es UNA sola línea (color) y el ícono la sigue.

   Al escalar: para sumar una red nueva (TikTok, Bandcamp, Beatport) alcanza con
   copiar un bloque .red-item en el HTML. Este CSS no se toca.
   ============================================================================ */

.redes {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;                                /* en mobile bajan de línea solas */
  gap: 16px;
  margin-top: 34px;
}

/* Cada red es ícono + nombre, apilados en columna. */
.red-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* Nombre debajo del ícono: no dependemos solo de la forma del logo para que se
   entienda de qué red se trata. */
.red-item span {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-texto-suave);
}

.red {
  display: grid;
  place-items: center;                            /* centra el ícono en el círculo */
  width: 56px;
  height: 56px;
  border: 1px solid var(--color-borde);
  border-radius: 50%;
  color: var(--color-texto);
  background: rgba(255, 255, 255, .04);
  transition: transform var(--transicion),
              color var(--transicion),
              border-color var(--transicion),
              box-shadow var(--transicion);
}

.red svg {
  width: 24px;
  height: 24px;
}

.red:hover,
.red:focus-visible {
  color: var(--color-acento);                     /* el SVG lo hereda por currentColor */
  border-color: var(--color-acento);
  transform: translateY(-4px) scale(1.06);
  box-shadow: 0 8px 22px var(--color-acento-suave);
}

/* --- Tablet: 600px en adelante ------------------------------------------- */
@media (min-width: 600px) {
  .redes { gap: 22px; }
}