/* Container principal de contatos */
.contato-aba {
  background: #000000;          /* fundo preto */
  padding: 200px 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
  width: 100%;
  height: 100px;                /* altura do container */
  margin: 0;
  box-sizing: border-box;
}

.contato-subtitulo{
  font-size: 25px;
  font-weight: bold;
  text-align: center;
  letter-spacing: 1px;
  color: #c4c4c4;
  margin: 50px auto 10px auto;
  margin-top:-170px;
}


/* Título secundário */
.titulo-mensagem { 
  font-size: 24px;               /* aumenta a fonte */ 
  font-weight: bold;             /* negrito */ 
  color: #333;                   /* cor do texto */ 
  margin-bottom: 10px;           /* espaço abaixo do título */ 
  text-transform: uppercase;     /* todas as letras maiúsculas */ 
  letter-spacing: 1px;           /* espaço entre as letras */ 
  text-align: left;              /* alinhado à esquerda */ 
  margin-left: 180px;            /* empurra para a direita */ 
  margin-top: 100px;
}

.titulo-principal-mensagem { 
  font-size: 80px;
  text-align: center;
  margin: 0 0;
  font-family: "Arial Black", sans-serif;
  color: #000000;                  /* cor interna da letra */
  -webkit-text-stroke: 1px #fff; /* contorno branco */
  margin: 50px auto 0px auto;
  margin-top: -50px;
}
/* Descrição da mensagem */
.descricao-mensagem {
  font-family: 'Arial', sans-serif; /* fonte delicada */
  font-weight: 300;                 /* mais leve, mas não tão fino */
  font-size: 18px;
  color: #9b9b9b;
  line-height: 1.5;                 /* altura mais equilibrada */
  max-width: 900px;                 /* aumenta a largura do bloco */
  margin: -10px auto 60px;           /* centralizado */
  text-align: center;
  padding: 0 20px;                  /* respiro lateral */
}
/* Barra lateral de redes sociais */
.social-bar {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background-color: #424242;       /* cinza */
  padding: 12px 8px;
  border-radius: 10px 0 0 10px;    /* arredondado no lado esquerdo */
  display: flex;
  flex-direction: column;
  gap: 15px;                        /* espaço entre os ícones */
  z-index: 1000;
}

/* Ícones da barra lateral */
.social-bar .icon {
  color: white;
  font-size: 22px;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: 0.3s;
}

/* Efeito hover nos ícones */
.social-bar .icon:hover {
  background-color: #333;
}

/* Seção de contatos em grade */
.contatos {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 colunas */
  background-color: #000000;             /* fundo preto */
  text-align: center;
  gap: 1px;       
  margin-top: -100px;
margin-bottom: 50px;
}

/* Blocos individuais de contato */
.contato-item {
  background-color: #000000;
  padding: 20px;
}

/* Ícones dentro do bloco de contato */
.contato-item i {
  font-size: 40px;
  color: #afafaf;                        /* ícone cinza claro */
  margin-bottom: 10px;
}

/* Título do bloco de contato */
.contato-item h3 {
  color: #ffffff;                        /* cor do título */
  font-size: 18px;
  margin-bottom: 8px;
}

/* Texto do bloco de contato */
.contato-item p {
  color: #888888;
  font-size: 15px;
  line-height: 1.4;
}

/* ==========================
   Menu Mobile - Hamburger
========================== */
/* Layout do header */
/* Botão hamburguer (escondido por padrão) */
.menu-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
  width: 30px;
  height: 22px;
  justify-content: space-between;
}

.menu-toggle span {
  display: block;
  height: 3px;
  background: #333;
  border-radius: 2px;
}

/* Responsivo: só muda em telas menores */
@media (max-width: 1230px) {
  /* mostra o hamburguer */
  .menu-toggle {
    display: flex;
  }

  /* esconde menu normal */
  .menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 70px;
    right: 20px;
    background: #000000;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  }

  /* quando o menu é ativado */
  .menu.active {
    display: flex;
  }
}
/* transformar em X*/
.menu-toggle.open span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle.open span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.open span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/*-------resposnivo----------*/
@media (max-width: 500px) {
  .contato-aba {
    padding: 30px 15px;
    align-items: center;
    gap: 20px;
  }

  .titulo-mensagem {
    font-size: 16px;
    margin-left: 0;      /* centraliza no mobile */
    text-align: center;
  }

  .titulo-principal-mensagem {
    font-size: 40px;     /* reduz título */
    margin-top: -180px;
  }

  .descricao-mensagem {
    font-size: 14px;     /* menor fonte */
    margin-top: -10px;
    padding: 0 10px;
  }

  .social-bar {
    top: auto;
    bottom: 10px;        /* joga pro rodapé no mobile */
    right: 50%;
    transform: translateX(50%);
    flex-direction: row; /* ícones na horizontal */
    padding: 8px 12px;
    border-radius: 10px;
    gap: 10px;
  }

  .social-bar .icon {
    font-size: 18px;
    width: 35px;
    height: 35px;
  }
}

/*icones contatos*/
@media (max-width: 500px) {
  .contatos {
    grid-template-columns: 1fr; /* Celular = 1 coluna */
    margin-top: -150px;
  }

  .contato-item i {
    font-size: 28px; /* Ícones menores */
  }

  .contato-item h3 {
    font-size: 16px;
  }

  .contato-item p {
    font-size: 13px;
  }
}