.footer-redes__descripcion {
  color: var(--footer-text-muted);
  font-size: 15px;
  line-height: 1.5;
}

.footer-redes__lista {
  gap: 10px;
}

/*
  El tamaño y el estado hover viven en el <a>, nunca en el <i>: Font Awesome
  corre en modo JS/SVG y reemplaza el <i> por un <svg> después del render, así
  que cualquier estilo puesto sobre el <i> se pierde al hidratar.
*/
.footer-redes__boton {
  width: 44px;
  height: 44px;
  border-radius: var(--footer-radius);
  background-color: var(--footer-boton);
  color: var(--footer-text);
  font-size: 20px;
  text-decoration: none;
  transition: background-color var(--footer-motion), color var(--footer-motion);
}

.footer-redes__boton:hover,
.footer-redes__boton:focus-visible {
  background-color: var(--footer-accent);
  color: var(--footer-surface);
  text-decoration: none;
}

.footer-redes__boton:focus-visible {
  outline: var(--footer-focus-ring);
  outline-offset: var(--footer-focus-offset);
}

.footer-redes__licencia {
  margin-top: 22px;
}

.footer-redes__licencia-enlace {
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--footer-accent);
  text-decoration: none;
}

a.footer-redes__licencia-enlace:hover {
  color: var(--footer-accent-hover);
}

.footer-redes__licencia-enlace:focus-visible {
  outline: var(--footer-focus-ring);
  outline-offset: var(--footer-focus-offset);
}

.footer-redes__licencia-imagen {
  height: 20px;
  width: auto;
}