body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #0b0a11;
  color: white;
}

.logo img {
  height: 80px;
  margin-right: 30px;
}


header {
  
  background-color: #1f1f1f;
  padding: 1rem;

}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
}

.menu {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;                
  padding: 0;
  margin: 0 auto;

}


.menu ul {
  list-style: none;

  gap: 10px;
  display: flex;
  margin: 0;
  padding: 0;
  
}

.menu li a {
  text-decoration: none;
  color: white;
  background-color: #2a2a2a;
  padding: 8px 16px;
  border-radius: 10px;
  transition: background-color 0.3s ease;
  display: inline-block;
 
}

.menu li a:hover {
  background-color: #444;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 1rem;
}


/* Container principal (mesmo de antes) */
.inst {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 20px;
  gap: 40px; /* Espaço entre os cards */
}

/* Estilo para cada card (mesmo de antes) */
.card-org {
  position: relative; /* Essencial para a sobreposição */
  width: 28%;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease;
}

.card-org:hover {
  transform: scale(1.03);
}

/* Estilo para a imagem (mesmo de antes) */
.card-org img {
  width: 100%;
  display: block;
}

/* NOVO: Estilo para a sobreposição com os links */
.links-sobrepostos {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Ocupa o card inteiro */
  background-color: rgba(0, 0, 0, 0.75); /* Fundo preto mais escuro e semi-transparente */

  /* Centraliza os links perfeitamente no meio do card */
  display: flex;
  flex-direction: column; /* Empilha os links verticalmente */
  justify-content: center; /* Alinha no centro vertical */
  align-items: center;   /* Alinha no centro horizontal */
  
  /* Esconde por padrão e mostra ao passar o mouse */
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Mostra a sobreposição quando o mouse está sobre o card */
.card-org:hover .links-sobrepostos {
  opacity: 1;
}

/* Estilo para cada link */
.links-sobrepostos a {
  color: white;
  text-decoration: none;
  font-size: 1.1em;
  font-weight: bold;
  
  padding: 10px 20px; /* Espaçamento interno para criar botões maiores */
  margin: 8px 0;      /* Espaço entre os botões */
  
  border: 1px solid white; /* Borda branca para parecer um botão */
  border-radius: 5px;      /* Bordas arredondadas para os botões */
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Efeito ao passar o mouse sobre um link específico */
.links-sobrepostos a:hover {
  background-color: white;
  color: black;
}


/* ================================================= */
/* ESTILOS PARA VERSÃO MOBILE               */
/* (Adicione este código ao final do seu CSS)        */
/* ================================================= */
@media (max-width: 768px) {

  /* 1. Ajusta o container principal para empilhar os cards */
  .inst {
    flex-direction: column; /* Empilha os cards na vertical */
    align-items: center;  /* Centraliza os cards empilhados */
    gap: 30px;            /* Define o espaço vertical entre os cards */
  }

  /* 2. Faz o card ocupar mais espaço na tela e remove o efeito de zoom */
  .card-org {
    width: 90%;       /* O card ocupa 90% da largura da tela */
    max-width: 400px; /* Limita a largura máxima em tablets, por exemplo */
  }
  .card-org:hover {
    transform: none; /* Desativa o efeito de zoom no toque */
  }
  
  /* 3. Transforma a sobreposição em uma seção de links ABAIXO da imagem */
  .links-sobrepostos {
    /* Desativa o comportamento de sobreposição */
    position: static; /* Coloca os links de volta no fluxo normal do documento */
    opacity: 1;       /* Deixa os links sempre visíveis */
    height: auto;     /* A altura se ajusta ao conteúdo */
    
    /* Novo estilo para a seção de links */
    background-color: white; /* Um fundo branco para a área dos links */
    border-top: 1px solid #eee; /* Uma linha sutil para separar da imagem */
  }
  
  /* 4. Estiliza os links para o novo fundo claro */
  .links-sobrepostos a {
    color: #1e1e1e;       /* Cor de texto escura para o fundo branco */
    border-color: #1e1e1e; /* Cor da borda escura */
    width: 80%;           /* Define uma largura para os botões */
    text-align: center;
  }

  /* 5. Ajusta o efeito para toque (ativo) nos links */
  .links-sobrepostos a:hover,
  .links-sobrepostos a:active { /* :active é acionado com o toque */
    background-color: #1e1e1e;
    color: white;
  }
}


/* ======================================================= */
/* CORES PERSONALIZADAS POR REDE SOCIAL (VERSÃO CORRIGIDA) */
/* (Substitua o bloco de cores anterior por este)          */
/* ======================================================= */

/* --- Estilos para DESKTOP (Sobreposição escura) --- */
/* O texto permanece branco, mudamos a cor da borda e o fundo no hover */

/* Facebook (Azul) */
.links-sobrepostos a.link-facebook {
  border-color: #1877F2;
}
.links-sobrepostos a.link-facebook:hover {
  background-color: #1877F2;
  border-color: #1877F2; /* Garante que a borda continue azul */
  color: white;
}

/* LinkedIn (Azul corporativo) */
.links-sobrepostos a.link-linkedin {
  border-color: #0A66C2;
}
.links-sobrepostos a.link-linkedin:hover {
  background-color: #0A66C2;
  border-color: #0A66C2;
  color: white;
}

/* Instagram (Rosa/Magenta representativo) */
.links-sobrepostos a.link-instagram {
  border-color: #E1306C;
}
.links-sobrepostos a.link-instagram:hover {
  background-color: #E1306C;
  border-color: #E1306C;
  color: white;
}


/* --- Estilos para MOBILE (Fundo claro) --- */
@media (max-width: 768px) {
  /* No mobile, o texto e a borda assumem a cor da marca */

  /* Facebook (Azul) */
  .links-sobrepostos a.link-facebook {
    color: #1877F2;
    border-color: #1877F2;
  }
  .links-sobrepostos a.link-facebook:hover,
  .links-sobrepostos a.link-facebook:active {
    background-color: #1877F2;
    color: white;
  }

  /* LinkedIn (Azul corporativo) */
  .links-sobrepostos a.link-linkedin {
    color: #0A66C2;
    border-color: #0A66C2;
  }
  .links-sobrepostos a.link-linkedin:hover,
  .links-sobrepostos a.link-linkedin:active {
    background-color: #0A66C2;
    color: white;
  }

  /* Instagram (Rosa/Magenta representativo) */
  .links-sobrepostos a.link-instagram {
    color: #E1306C;
    border-color: #E1306C;
  }
  .links-sobrepostos a.link-instagram:hover,
  .links-sobrepostos a.link-instagram:active {
    background-color: #E1306C;
    color: white;
  }
}




.footer {
  background-color: #1f1f1f;
  color: white;
  text-align: center;
  padding: 20px 0;
  font-size: 14px;
  margin-top: 40px;
}

@media (max-width: 768px) {
   .navbar {
        flex-direction: column; /* Empilha o logo e o menu */
        align-items: center;   /* Centraliza os itens empilhados (logo e depois o bloco do menu) */
        padding: 1rem;         /* Reduz um pouco o padding do navbar */
    }

    .logo img {
        height: 60px;         /* Logo um pouco menor */
        margin-right: 0;      /* Remove a margem direita, já que vai ser centralizado ou empilhado */
        margin-bottom: 15px;  /* Adiciona espaço abaixo do logo quando empilhado com o menu */
    }

    .menu {
        /* O .menu em desktop tem 'margin: 0 auto;' e 'justify-content: center'
           Quando o .navbar vira column, o .menu vai ocupar a largura disponível abaixo do logo.
           Vamos fazer o .menu e seus itens ocuparem a largura e centralizar o texto dos links.
        */
        width: 100%;
        flex-direction: column; /* Se o menu em si precisar empilhar algo, embora o ul já vá */
        gap: 10px; /* Espaço entre os itens do menu quando empilhados */
        align-items: center; /* Centraliza os itens da lista (ul) se houver largura sobrando */
    }

    .menu ul {
        flex-direction: column; /* Itens do menu (li) ficam em coluna */
        width: 100%;            /* Lista ocupa toda a largura disponível */
        gap: 8px;              /* Espaço entre os links do menu */
    }

    .menu li {
        width: 100%; /* Cada item da lista ocupa 100% da largura */
        display: block; /* Garante que o li ocupe a linha toda */
    }

    .menu li a {
        display: block;       /* Faz o link preencher o <li> */
        text-align: center;   /* Centraliza o texto do link */
        padding: 12px 10px;   /* Ajusta o padding dos links */
        width: 90%;           /* Link ocupa quase toda a largura, com margens automáticas */
        margin-left: auto;
        margin-right: auto;
        border-radius: 8px;   /* Ajusta o border-radius se necessário */
    }

    /* Nota sobre 'nav ul': Seu CSS tem um '.menu ul' e um 'nav ul'.
       Se 'nav ul' for um menu diferente, ele provavelmente precisará de tratamento similar
       (ex: flex-direction: column). Se for o mesmo menu, as regras de '.menu ul' acima o cobrirão
       se a especificidade estiver correta ou se 'nav ul' for removido/ajustado para não conflitar.
       Assumindo que .menu é o principal.
    */
    nav ul { /* Se este for um menu diferente e horizontal */
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

}

/* Botão de abrir menu - escondido no desktop */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 30px;
  color: white;
  cursor: pointer;
}

/* Mobile: mostrar botão e esconder menu */
@media (max-width: 768px) {
  .menu-toggle {
    display: block;
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1001;
  }

  .menu {
    display: none; /* Esconde o menu por padrão */
    flex-direction: column;
    align-items: center;
    background-color: #1f1f1f;
    width: 100%;
    padding: 1rem 0;
    margin-top: 60px;
  }

  .menu.show {
    display: flex; /* Mostra quando tiver a classe .show */
  }
}