:root {
  --cor-fundo: #812054; /* Preto bem escuro */
  --cor-texto-primario: #F0F0F0; /* Branco suave */
  --cor-botao-fundo: #ffffff; /* Cinza escuro para o botão */
  --cor-botao-texto: #724527; /* Branco puro */
  --cor-botao-hover: #c7c4c4;
  --cor-destaque: #0580b1; /* Um roxo elegante */
  --cor-borda-foco: #439fc4; /* Uma tonalidade mais escura do destaque */
  --cor-botao-active: #838383;
  --tamanho-borda-foco: 3px;
  --transicao-rapida: 0.2s ease-in-out;
  --transicao-lenta: 0.3s ease-out;
}

body {
  font-family: 'Montserrat', sans-serif;
  background: linear-gradient(180deg, #55012e, #f76bb5);
  color: var(--cor-texto-primario);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  padding: 20px;
  box-sizing: border-box;
  line-height: 1.6;
}

.container {
  max-width: 500px;
  width: 100%;
  text-align: center;
  padding: 30px;
  border-radius: 15px;
  background: linear-gradient(145deg, #C53482, #C53482);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  animation: fadeIn 1s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-150px); }
  to { opacity: 1; transform: translateY(0); }
}

.logo {
  
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--cor-destaque);
  animation: pulsateBorder 3s infinite alternate ease-in-out;
}

@keyframes pulsateBorder {
  from { border-color: var(--cor-destaque); box-shadow: 0 0 0px var(--cor-destaque); }
  to { border-color: var(--cor-borda-foco); box-shadow: 0 0 30px var(--cor-borda-foco); }
}

h1 {
  font-size: 1.8em;
  margin-bottom: 10px;
  color: var(--cor-texto-primario);
  font-weight: 700;
}

a {
  display: block;
  width: 90%;
  padding: 18px 25px;
  margin-bottom: 18px;
  background-color: var(--cor-botao-fundo);
  color: var(--cor-botao-texto);
  text-decoration: none;
  border-radius: 10px;
  font-size: 1.4em;
  font-weight: 600;
  transition: background-color var(--transicao-rapida), transform var(--transicao-rapida), box-shadow var(--transicao-rapida), border-color var(--transicao-rapida);
  border: 2px solid transparent; 
  position: relative;
  overflow: hidden;
  text-align: center;
}

.social-icons{
  display: flex; /*icones lado a lado*/
  justify-content: center; /*Centraliza*/
  align-items: center;
  margin-top: -10px;
  gap: 15px; /* Espaço entre os icones */
}

.social-link {
  background-color: transparent;
  /* Faz a Tag não ser um bloco gigantesco */
  width: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 0; /* Remove a altura da linha */
  transition: transform 0.2s ease-out, opacity 0.2s ease-out; /* Animação de hover */
}

.social-link img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.social-link:hover {
  transform: scale(1.15);
  opacity: 0.8;
}

.link-button:last-child {
  margin-bottom: 0;
}

.link-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, transparent, rgba(161, 161, 160, 0.5), transparent);
  transition: left var(--transicao-lenta);
}

.link-button:hover::before {
  left: 100%;
}

.link-button:hover {
   background-color: var(--cor-botao-hover);
   transform: translateY(-5px); 
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
   border-color: var(--cor-botao-hover);
}

.link-button:active {
   transform: translateY(-2px); 
   background-color: var(--cor-botao-active);
}

.link-button span {
   position: relative; 
   z-index: 1;
}

/* NOVO ESTILO PARA SEUS ÍCONES */
.link-button .custom-icon {
   width: 30px; /* Ajuste o tamanho da sua imagem */
   height: 30px; /* Ajuste o tamanho da sua imagem */
   object-fit: contain; /* Garante que seu ícone não distorça */

   position: absolute; 
   left: 25px; /*Alinha com o padding esquerdo do botão */
   top: 50%; /* Centraliza verticalmente */
   transform: translatey(-50%); /* Ajuste fino da centralização vertical */
}

/* ========================================= */
/* === CÓDIGO DE RESPONSIVIDADE PARA MOBILE === */
/* ========================================= */

@media (max-width: 480px) {

    /* 1. Ajustes finos no container e fontes para telas pequenas */
    .container {
        padding: 20px; /* Menos padding lateral */
    }

    h1 {
        font-size: 1.6em; /* Fonte do título um pouco menor */
        margin-bottom: 25px;
    }

    .link-button {
        font-size: 1.0em; /* Fonte do botão um pouco menor */
        padding: 16px 20px; /* Botão um pouco mais fino */
        width: 100%; /* Ocupa 100% do container (que já tem padding) */
    }

    /* * 2. A MÁGICA: Corrigindo o layout do ícone e texto 
     * Vamos reverter o layout "fixo" e voltar a centralizar o GRUPO (ícone + texto)
    */
    
    .link-button {
        text-align: left; /* Desliga o 'text-align: center' */
    }
    
    .link-button span {
        display: flex; /* <-- LIGA o Flexbox de novo */
        align-items: center;
        justify-content: center; /* <-- Centraliza o grupo (ícone + texto) */
    }

    /* 3. Trazemos os ícones de volta para o "fluxo" normal da página */
    .link-button .custom-icon,
    .link-button .whatsapp-vip-icon,
    .link-button .perfil-icon {
        
        position: relative; /* <-- DESLIGA o 'position: absolute' */
        left: 0;          /* Reseta o posicionamento */
        top: 0;
        transform: none;

        margin-right: 12px; /* <-- Agora a margem volta a funcionar! */
    }

    /* 4. Ajustamos o tamanho dos ícones para o mobile (opcional) */
    .link-button .custom-icon {
        width: 25px;
        height: 25px;
    }
    .link-button .whatsapp-vip-icon {
        width: 30px;
        height: 30px;
    }
     .link-button .perfil-icon {
        width: 30px;
        height: 30px;
    }
}