/* ======== VARIÁVEIS DE COR E TIPOGRAFIA ======== */
:root {
  --cor-primaria: #486d57; 
  --cor-secundaria: #486d57;
  --cor-branco: #ffffff;
  --cor-texto: #333333;
  --cor-texto-claro: #666666;
  --cor-fundo: #f9f9f9;
  --cor-borda: #e0e0e0;
  --sombra: 0 2px 8px rgba(0,0,0,0.1);
  --borda-arredondada: 8px;
  --transicao-rapida: all 0.3s ease;
}

/* ======== RESET E ESTRUTURA PRINCIPAL ======== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: 'Roboto', 'Segoe UI', sans-serif;
  line-height: 1.6;
  color: var(--cor-texto);
  background-color: var(--cor-fundo);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* ======== CABEÇALHO ======== */
header {
  background-color: var(--cor-primaria);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: var(--sombra);
  width: 100%;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem 1.2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.logo {
  color: var(--cor-branco);
  font-size: 1.3rem;
  font-weight: 600;
  margin: 0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* ======== MENU HAMBURGUER ======== */
.hamburger {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  transition: var(--transicao-rapida);
  border-radius: 50%;
}

.hamburger:active {
  background-color: rgba(255,255,255,0.2);
}

.hamburger-line {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--cor-branco);
  transition: var(--transicao-rapida);
}

.hamburger.active .hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.hamburger.active .hamburger-line:nth-child(2) {
  opacity: 0;
}

.hamburger.active .hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ======== MENU SUSPENSO ======== */
.mobile-menu {
  background-color: var(--cor-primaria);
  position: fixed;
  top: 60px;
  left: 0;
  width: 100%;
  height: calc(100vh - 60px);
  transform: translateX(-100%);
  transition: transform 0.4s ease;
  z-index: 999;
  overflow-y: auto;
  padding-bottom: 2rem;
}

.mobile-menu.active {
  transform: translateX(0);
}

.mobile-menu ul {
  list-style: none;
  padding: 0;
}

.mobile-menu li {
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.mobile-menu a {
  color: var(--cor-branco);
  text-decoration: none;
  display: block;
  padding: 1rem 1.5rem;
  font-size: 1.1rem;
  transition: background 0.3s;
  font-weight: 500;
}

.mobile-menu a:hover, .mobile-menu a:focus {
  background-color: rgba(255,255,255,0.15);
}

/* ======== CONTEÚDO PRINCIPAL ======== */
main {
  flex: 1;
  padding: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

article {
  background-color: var(--cor-branco);
  padding: 1.5rem;
  border-radius: var(--borda-arredondada);
  box-shadow: var(--sombra);
  margin-bottom: 1.5rem;
}

h1, h2, h3 {
  color: var(--cor-primaria);
  margin-bottom: 1rem;
}

h2 {
  font-size: 1.5rem;
  border-bottom: 2px solid var(--cor-secundaria);
  padding-bottom: 0.5rem;
  margin-bottom: 1.5rem;
}

p {
  margin-bottom: 1rem;
  color: var(--cor-texto);
  font-size: 1rem;
  line-height: 1.7;
}

a {
  color: var(--cor-primaria);
  text-decoration: none;
  font-weight: 500;
}

a:hover {
  text-decoration: underline;
}

/* ======== RODAPÉ ======== */
footer {
  background-color: var(--cor-primaria);
  color: var(--cor-branco);
  text-align: center;
  padding: 1.5rem;
  margin-top: auto;
  font-size: 0.9rem;
}

footer p {
  color: var(--cor-branco);
  margin-bottom: 0.5rem;
}

/* ======== MEDIA QUERIES PARA RESPONSIVIDADE ======== */
@media (min-width: 768px) {
  .header-container {
    padding: 1rem 2rem;
  }
  
  .logo {
    font-size: 1.5rem;
  }
  
  main {
    padding: 2rem;
  }
  
  article {
    padding: 2rem;
  }
  
  h2 {
    font-size: 1.7rem;
  }
  
  p {
    font-size: 1.1rem;
  }
}

/* Efeito de overlay quando o menu está aberto */
body.menu-open::after {
  content: '';
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 998;
  display: none;
}

body.menu-open::after {
  display: block;
}

/* Adicionando um pequeno espaçamento para evitar que o conteúdo fique muito colado */
section {
  margin-bottom: 1.5rem;
}

/* Melhorando a legibilidade dos links */
article a {
  color: var(--cor-primaria);
  text-decoration: underline;
  text-underline-offset: 3px;
}

article a:hover {
  color: #1b5e20;
}
/* ======== ESTILOS PARA PÁGINA DE PARTICIPANTES ======== */
.page-title {
  text-align: center;
  margin: 1.5rem 0;
  color: var(--cor-primaria);
  font-size: 1.8rem;
}

.participantes-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 0 1rem;
}

.participante-card {
  background-color: var(--cor-branco);
  border-radius: var(--borda-arredondada);
  box-shadow: var(--sombra);
  overflow: hidden;
  transition: transform 0.3s ease;
}

.participante-card:active {
  transform: scale(0.98);
}

.participante-img-container {
  width: 100%;
  height: 350px;
  overflow: hidden;
}

.participante-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.participante-info {
  padding: 1.2rem;
}

.participante-info h3 {
  color: var(--cor-primaria);
  margin-bottom: 0.8rem;
  font-size: 1.3rem;
}

.participante-bio {
  position: relative;
  max-height: 120px;
  overflow: hidden;
  transition: max-height 0.5s ease;
}

.participante-bio::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
  transition: opacity 0.3s ease;
}

.participante-bio.expanded {
  max-height: 2000px;
}

.participante-bio.expanded::after {
  opacity: 0;
}

.participante-bio p {
  margin-bottom: 1rem;
  line-height: 1.6;
  color: var(--cor-texto);
}

.btn-expand {
  background-color: var(--cor-primaria);
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  margin-top: 0.5rem;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.3s;
}

.btn-expand:active {
  background-color: #1b5e20;
}

/* Media Queries para tablets */
@media (min-width: 600px) {
  .participantes-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

/* Media Queries para desktop */
@media (min-width: 900px) {
  .participantes-container {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .participante-img-container {
    height: 250px;
  }
}
/* ======== AJUSTES PARA CARDS CLICÁVEIS DE PARTICIPANTES ======== */

/* Estilo para a tag <a> que envolve o card.
  Isso remove o sublinhado padrão e faz com que o texto dentro
  herde a cor correta, em vez de ficar azul.
*/
.participante-link {
  text-decoration: none; /* Remove o sublinhado */
  color: inherit;       /* Faz o texto herdar a cor do elemento pai */
  display: block;         /* Garante que o link se comporte como um bloco */
}

/* Efeito de hover para dar um feedback visual de que o card é clicável.
  Também atualizamos a transição no .participante-card para que o efeito seja suave.
*/
.participante-card {
  background-color: var(--cor-branco);
  border-radius: var(--borda-arredondada);
  box-shadow: var(--sombra);
  overflow: hidden;
  /* Atualize a transição para incluir a sombra e o transform */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.participante-link:hover .participante-card {
  transform: translateY(-5px); /* Efeito de "levantar" o card */
  box-shadow: 0 4px 15px rgba(0,0,0,0.15); /* Sombra mais pronunciada */
}

/* Garante que o cursor mude para a "mãozinha" no card, 
  mas volte ao normal sobre o botão.
*/
.participante-link:hover {
    cursor: pointer;
}

.btn-expand {
    cursor: pointer; /* Mantém o cursor de ponteiro no botão */
}
/* ======== ESTILOS PARA PÁGINA SOBRE (COM MELHORIA NA GRADE DE LOGOS) ======== */

.grid-logos {
  display: grid;
  /* Esta é a regra principal para o layout lado a lado.
     Ela cria colunas automáticas com no mínimo 100px.
     As logos se quebrarão para a próxima linha apenas
     quando não houver mais espaço na tela. */
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px; /* Espaçamento entre as logos */
  align-items: center; /* Centraliza as logos verticalmente nas colunas */
  justify-items: center; /* Centraliza as logos horizontalmente nas colunas */
}

/* Regra para redimensionar as logos */
.logo-instituicao {
  max-width: 100%; /* Garante que a logo não ultrapasse o espaço da sua coluna */
  height: auto;     /* Mantém a proporção da imagem */
  object-fit: contain;
  padding: 5px;
  box-sizing: border-box;
}
/* Mantenha esta regra, mas faça um pequeno ajuste para telas menores */
@media (max-width: 480px) {
  .grid-logos {
    grid-template-columns: 1fr; /* Em telas muito pequenas, use uma única coluna */
  }
}
/* Estilos para as páginas de programação diária */

.data-evento {
 font-size: 1.1em;
 color: #555;
 text-align: center;
 margin-bottom: 25px;
}

.mesas-container {
 display: flex;
 flex-direction: column;
 gap: 25px; /* Espaço entre as seções de mesa */
}

.mesa {
 background-color: #fff;
 border: 1px solid #ddd;
 border-radius: 8px;
 padding: 15px;
}

.mesa-header {
 border-bottom: 1px solid #eee;
 padding-bottom: 10px;
 margin-bottom: 15px;
}

.mesa-header h2 {
 margin: 0;
}

.horario {
 margin: 5px 0 0 0;
 color: #555; /* Cor de destaque para o horário */
 font-weight: bold;
}

.participantes-mesa {
 display: flex;
 flex-direction: column;
 gap: 20px;
}

.participante a {
 text-decoration: none;
 color: inherit;
 display: block;
 text-align: center;
}

.participante img {
 max-width: 150px;
 margin-bottom: 10px;
}

.participante h3 {
 margin: 0 0 5px 0;
 color: #333;
}

.participante p {
 margin: 0;
 font-style: italic;
 color: #666;
}

.btn-voltar {
 display: inline-block;
 margin-top: 30px;
 padding: 10px 20px;
 background-color: #555;
 color: #fff;
 text-decoration: none;
 border-radius: 5px;
 transition: background-color 0.3s;
}

.btn-voltar:hover {
 background-color: #333;
}
/* ======== ATUALIZAÇÕES PARA PÁGINA DE DETALHE DO PARTICIPANTE ======== */

/* Garante que o conteúdo principal tenha um contexto de empilhamento
   e não fique escondido atrás de outros elementos. Resolve o problema da "bio invisível". */
#conteudo-principal {
  position: relative;
  z-index: 1; 
}

/* Container principal da página de detalhe (sem alterações) */
.participante-detalhe {
  background-color: var(--cor-branco);
  padding: 1.5rem;
  border-radius: var(--borda-arredondada);
  box-shadow: var(--sombra);
  margin-bottom: 1.5rem;
}

/* Container da foto para controle de layout */
.participante-foto-container {
  max-width: 250px; /* Um bom tamanho máximo para a foto de destaque */
  margin: 0 auto 1.5rem auto; /* Centraliza o container da foto */
  border-radius: var(--borda-arredondada); /* Usa a variável de borda do seu design */
  box-shadow: var(--sombra);
  overflow: hidden; /* Essencial para a imagem se ajustar à borda arredondada */
}

/* FOTO: Alterado de redondo para retangular/quadrado. */
.participante-foto-detalhe {
  display: block; /* Remove espaços extras abaixo da imagem */
  width: 100%;
  height: auto;
  object-fit: cover; /* Garante que a imagem preencha o container sem distorcer */
}

/* Estilo para o nome do participante (sem alterações) */
.participante-detalhe h1 {
  text-align: center;
  font-size: 1.8rem;
  color: var(--cor-primaria);
  margin-bottom: 2rem;
  line-height: 1.2;
}

/* Estilo para as seções (sem alterações) */
.participante-detalhe section {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--cor-borda); 
}

/* Botão (sem alterações) */
.participante-trabalho .btn-voltar {
  display: inline-block;
  width: 100%;
  text-align: center;
  margin-top: 1rem;
}
/* ======== AJUSTE PARA EXIBIR BIO COMPLETA NA PÁGINA DE DETALHE ======== */

/* Esta regra se aplica APENAS à biografia dentro de uma página de detalhe
  (que usa a classe .participante-detalhe), fazendo com que todo o texto apareça.
*/
.participante-detalhe .participante-bio {
  max-height: none; /* Remove o limite de altura */
  overflow: visible;  /* Garante que o texto não seja cortado */
}

/* Remove o efeito de degradê (sombra) que indica que há mais texto,
  pois agora todo o texto já está visível.
*/
.participante-detalhe .participante-bio::after {
  display: none;
}

/*
  Esconde o botão "Ler mais", pois ele não é mais necessário
  nesta página específica.
*/
.participante-detalhe .btn-expand {
  display: none;
}
/* ======== RECORTE DAS FOTOS NA PÁGINA DE PROGRAMAÇÃO (SÓ CSS) ======== */

/* Esta regra se aplica diretamente às imagens dos participantes 
  dentro das mesas na página de programação.
*/
.mesas-container .participante img {
  /* 1. Definimos um tamanho e formato */
  width: 90px;          /* Largura da imagem */
  height: 90px;         /* Altura da imagem (igual à largura para formar um quadrado) */
  
  /* 2. O recorte mágico acontece aqui */
  object-fit: cover;    /* Preenche o espaço 90x90px sem distorcer, cortando o excesso */


  /* 3. Estilos adicionais para um bom acabamento */
  display: block;
  margin: 0 auto 10px auto; /* Centraliza a foto acima do nome */
  box-shadow: var(--sombra);
  background-color: var(--cor-borda); /* Fundo enquanto a imagem carrega */
}
/* ======== ESTILOS PARA PÁGINA DE FORMULÁRIO (INSCRIÇÃO) ======== */

.form-container {
  background-color: var(--cor-branco);
  padding: 2rem; /* Espaçamento interno */
  border-radius: var(--borda-arredondada);
  box-shadow: var(--sombra);
  max-width: 800px; /* <<<<<<<<<<<< EDITE ESTE VALOR PARA MUDAR O TAMANHO */
  margin: 2rem auto; /* Centraliza o formulário na página */
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
  color: var(--cor-texto);
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.8rem;
  border: 1px solid var(--cor-borda);
  border-radius: 4px;
  font-size: 1rem;
  font-family: inherit;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 2px rgba(72, 109, 87, 0.2);
}

.btn-submit {
  display: block;
  width: 100%;
  padding: 1rem;
  background-color: var(--cor-primaria);
  color: var(--cor-branco);
  border: none;
  border-radius: 4px;
  font-size: 1.1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-submit:hover {
  background-color: #3a5947; /* Um tom um pouco mais escuro da cor primária */
}
/* ======== ESTILOS PARA PÁGINA DE INSCRIÇÃO (COM IFRAME) ======== */

/* O 'quadrado' que envolve o formulário */
.form-container {
  position: relative;
  /* EDITE OS VALORES ABAIXO PARA MUDAR O TAMANHO */
  max-width: 800px;   /* Largura máxima do formulário na tela */
  height: 80vh;       /* Altura do formulário (80% da altura da tela) */
  /* ------------------------------------------- */
  margin: 2rem auto;    /* Centraliza o container na página */
  border: 1px solid var(--cor-borda);
  box-shadow: var(--sombra);
}

/* O formulário do Google Forms dentro do container */
.form-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0; /* Remove a borda padrão do iframe */
}

/* Estilo para o link alternativo, caso o formulário não carregue */
.form-alternative {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.9rem;
}
/* ======== FOTOS PALESTRANTES ======== */
.foto-palestrante {
  width: 200px;
  height: 200px;
  border-radius: 8px; /* Alterado de 50% para 8px para cantos arredondados suaves */
  object-fit: cover;
  object-position: center; /* Garante que a imagem esteja centralizada */
  border: 3px solid #486d57;
  flex-shrink: 0;
}
/* ======== FOTOS NA PROGRAMAÇÃO ======== */
.participante img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 8px; /* ou 0 para quadrado perfeito */
  border: 3px solid #486d57;
  margin-bottom: 1rem;
}

/* Ajuste opcional para o layout dos participantes */
.participantes-mesa {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Aumente se necessário */
  gap: 1.5rem;
}
  /* Ajustes de palestrante */
  .palestrante {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .foto-palestrante,
  .participante img {
    width: 120px;
    height: 120px;
  }

  .participantes-mesa {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

@media (max-width: 480px) {
  main {
    padding: 0.5rem;
  }

  .foto-palestrante,
  .participante img {
    width: 100px;
    height: 100px;
  }

  .grid-logos {
    grid-template-columns: 1fr;
  }
}
/* Evita imagens gigantes por padrão */
img { max-width: 100%; height: auto; }

/* Cards de participantes (lista) no mobile */
@media (max-width: 600px) {
  .participante-img-container {
    height: auto;
    aspect-ratio: 4 / 3;   /* controla a altura sem ocupar a tela toda */
    max-height: 220px;     /* limite no mobile */
    overflow: hidden;
  }
  .participante-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* Programação (mobiledia1): garante miniaturas fixas */
.mesas-container .participante img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
  border: 3px solid #486d57;
  margin-bottom: 1rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
}