/* ==========================================================================
   Componente: íconos de redes en círculo (Framer "Social Icons").
   Global: se usan en el hero y en el menú a pantalla completa.
   ========================================================================== */

@layer components {
  /* --- Íconos sociales (Framer "Social Icons") --- */
  .social-icons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
  }

  .social-icons__link {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    overflow: hidden;
    border-radius: 60px;
    background: linear-gradient(0deg, var(--palette-jet-gray) 0%, var(--palette-black) 100%);
    box-shadow: inset 0.3px 0.3px 0 0 var(--palette-dusty-black);
    color: var(--color-text-soft);
    transition: color 0.5s cubic-bezier(0.44, 0, 0.56, 1);

    /* "BG Fill": el amarillo sube desde abajo al pasar el cursor */
    &::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      border-radius: inherit;
      background-color: var(--color-accent);
      transform: translateY(100%);
      transition: transform 0.5s cubic-bezier(0.44, 0, 0.56, 1);
    }

    &:hover,
    &:focus-visible {
      color: var(--palette-dark-gray);

      &::before {
        transform: translateY(0);
      }
    }
  }

  .social-icons__icon {
    width: 18px;
    height: 17px;
  }

  .site-header .site-header__social {
    justify-content: flex-start;
  }
}