/* --- Estilo dos Links Quadrados (O que pediste) --- */

        .social-links {
            display: flex;
            flex-wrap: wrap;
            /* Para quebrarem em mobile */
            gap: 15px;
            justify-content: center;
        }

        .social-link-item {
            /* Tamanho dos quadrados */
            width: 60px;
            height: 60px;
            background-color: transparent;
            border: 2px solid  #1a1a1a;
            /* Borda branca/clara inicial */
            border-radius: 8px;
            /* Cantos ligeiramente arredondados */
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
            /* Transição suave */
            position: relative;
            overflow: hidden;
            text-decoration: none;
        }

        /* Icone dentro do quadrado */
        .social-link-item i {
            font-size: 24px;
            color: #1a1a1a;
            /* Cor do ícone inicial (clara) */
            z-index: 2;
            /* Para o ícone ficar por cima do efeito de fundo */
            transition: color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
            /* Transição suave */
        }

        /* Efeito Hover (Cor Contrária - Estilo Lo-Fi Girl) */
        .social-link-item:hover {
            border-color:  #f0f0f0;
            /* Borda fica da cor do fundo do corpo (escura) */
        }

        /* A cor de fundo "contrária" (clara) vai ser um overlay */
        .social-link-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #1a1a1a;
            /* Cor contrária ao fundo (claro) */
            transform: scale(0);
            /* Começa invisível */
            border-radius: 6px;
            transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
            z-index: 1;
        }

        .social-link-item:hover::before {
            transform: scale(1);
            /* Expande e cobre o quadrado */
        }

        /* O ÍCONE deve mudar para a cor escura (contrária ao overlay claro) no hover */
        .social-link-item:hover i {
            color:  #f0f0f0;
            /* Cor contrária ao overlay (escura) */
            transform: scale(1.1);
        }