/*
 * CSS do Botão Flutuante do Instagram (lado esquerdo)
 * Este bloco controla a aparência e o posicionamento do botão único do Instagram.
 */

/* Container principal para o grupo do Instagram */
.floating-button-container {
    position: fixed; /* O botão ficará fixo na tela */
    bottom: 86px;    /* Distância da parte inferior da tela (desktop) */
    left: 20px;      /* Distância da borda esquerda da tela */
    display: flex;   /* Ativa o Flexbox para organização */
    flex-direction: column; /* Itens organizados em coluna */
    align-items: flex-start; /* Alinha itens à esquerda */
    z-index: 1000;   /* Garante que fique acima de outros elementos */
}

/* Grupo do Instagram (para manter a estrutura, mesmo sem texto) */
.instagram-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0px; /* Sem espaçamento extra */
}

/* Estilos base para o botão social (Instagram) */
.social-button {
    display: flex;   /* Flexbox para centralizar o ícone */
    align-items: center; /* Centraliza verticalmente o ícone */
    justify-content: center; /* Centraliza horizontalmente o ícone */
    width: 60px;     /* Largura do botão no desktop */
    height: 60px;    /* Altura do botão no desktop */
    border-radius: 9999px; /* Transforma o botão em um círculo */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08); /* Sombra suave */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* Animação ao passar o mouse */
    text-decoration: none; /* Remove sublinhado do link */
}

.social-button:hover {
    transform: translateY(-3px); /* Move ligeiramente para cima no hover */
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); /* Sombra mais intensa */
}

/* Estilos para o ícone SVG dentro do botão */
.social-button svg {
    width: 34px;     /* Largura do ícone SVG */
    height: 34px;    /* Altura do ícone SVG */
    fill: white;     /* Cor do ícone (branco) */
}

/* Cores específicas para o botão do Instagram (gradiente) */
.instagram-button {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); /* Gradiente do Instagram */
    color: white;    /* Cor do texto (se houver) */
}

/* Estilos para o texto "SEGUIR" (atualmente escondido) */
.follow-text {
    display: none; /* Garante que o texto não seja exibido */
}

/* Estilos para o conteúdo principal da página (geralmente não necessário no CSS personalizado) */
.content {
    padding: 40px;
    max-width: 800px;
    margin: 0 auto;
}

/* --- Media Queries para Responsividade do Botão Único (Esquerda) --- */
@media (max-width: 768px) {
    .floating-button-container {
        bottom: 180px; /* Posição para mobile */
        left: 20px;
        transform: translateX(0);
        align-items: flex-start;
    }
    .instagram-group { align-items: flex-start; gap: 0px; }
    .social-button {
        width: 64px; /* Tamanho para mobile */
        height: 64px; /* Tamanho para mobile */
    }
    .social-button svg {
        width: 37px; /* Tamanho do ícone para mobile */
        height: 37px; /* Tamanho do ícone para mobile */
    }
}

@media (max-width: 480px) {
    .floating-button-container {
        bottom: 154px; /* Posição para mobile muito pequeno */
    }
    .social-button {
        width: 57px; /* Tamanho para mobile muito pequeno */
        height: 57px; /* Tamanho para mobile muito pequeno */
    }
    .social-button svg {
        width: 34px; /* Tamanho do ícone para mobile muito pequeno */
        height: 34px; /* Tamanho do ícone para mobile muito pequeno */
    }
}

/*
 * CSS dos 3 Botões de Redes Sociais (lado direito)
 * Este bloco controla a aparência e o posicionamento dos botões agrupados.
 */

/* Contêiner de todos os botões flutuantes para DESKTOP (lado direito) */
.floating-buttons-desktop-container {
    position: fixed; /* Posição fixa na tela */
    bottom: 100px;    /* Distância da parte inferior (para o botão mais abaixo) */
    right: 20px;     /* Distância da borda direita */
    z-index: 1000;   /* Garante que fique acima da maioria dos outros elementos */
    display: flex;   /* Ativa o flexbox */
    flex-direction: column-reverse; /* Organiza os botões de baixo para cima */
    align-items: flex-end; /* Alinha os botões à direita dentro do contêiner */
    gap: 15px; /* Espaçamento entre os botões */
}

/* Estilos base para todos os botões de texto */
.base-button {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial, sans-serif; /* Fonte Arial */
    font-weight: bold; /* Negrito */
    color: white;
    border-radius: 25px; /* Cantos arredondados */
    text-decoration: none; /* Remove sublinhado do link */
    white-space: nowrap; /* Impede que o texto quebre em várias linhas */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08); /* Sombra suave */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* Efeito suave ao passar o mouse */
}

.base-button:hover {
    transform: translateY(-3px); /* Move ligeiramente para cima ao passar o mouse */
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); /* Sombra mais intensa no hover */
}

/* Estilos específicos para os botões da VERSÃO DESKTOP */
.desktop-button {
    height: 42px; /* Altura fixa do botão */
    width: 210px; /* Largura padronizada para desktop */
    padding: 8px 10px; /* Espaçamento interno */
    font-size: 13px; /* Tamanho da fonte */
}

/* Estilo específico para o botão do Instagram (neste grupo) */
.instagram-button {
    background: linear-gradient(45deg, #fdf497, #fd5949, #d6249f, #285AEB); /* Gradiente do Instagram */
}

/* Estilo específico para o botão do WhatsApp (Cor oficial) */
.whatsapp-button {
    background-color: #25D366; /* Verde oficial do WhatsApp */
}

/* Estilo específico para o botão do TikTok (Cor oficial) */
.tiktok-button {
    background-color: #000000; /* Preto oficial do TikTok */
}

/* --- Media Queries para Responsividade dos 3 Botões (Direita) --- */
@media (max-width: 768px) {
    /* Oculta os botões do desktop em telas pequenas */
    .floating-buttons-desktop-container {
        display: none;
    }
}