:root {
  --cor-primaria: #223745;         /* Azul escuro institucional */
  --cor-secundaria: #00bfff;       /* Azul claro (títulos, bordas) */
  --cor-destaque: #F5C84C;         /* Amarelo-alaranjado (botões principais) */
  --cor-destaque-alt: #F53D;     /* Laranja vibrante (secundário) */
  --cor-destaque-hover: #d4aa3b;   /* Hover do botão destaque */
  --cor-branco: #ffffff;           /* Branco */
  --cor-cinza-claro: #f8f9fa;      /* Fundo claro (sobre-evento, FAQ) */
  --cor-cinza-intermediario: #f0f4f8; /* Fundo programação */
  --cor-texto: #223745;            /* Texto padrão escuro */
  --cor-texto-secundario: #666666; /* Texto secundário */
  --cor-aviso: #d62828;            /* Vermelho de alerta */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body,
html {
  font-family: "Segoe UI", sans-serif;
  height: 100%;
}

.hero {
  position: relative;
  height: 100vh;
  background: url("images/background.jpg") center center /
    cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(10, 20, 40, 0.7); /* escurece o fundo */
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 20px;
  max-width: 800px;
}

.hero h1 {
  font-size: 2.5em;
  margin-bottom: 0.5em;
  color: var(--cor-secundaria);
}

.hero h2 {
  font-size: 1.2em;
  margin-bottom: 1em;
  color: var(--cor-destaque);;
}

.hero p {
  font-size: 1em;
  margin-bottom: 1.5em;
}

.btn {
  background-color: var(--cor-destaque);;
  color: var(--cor-texto);;
  padding: 15px 30px;
  border: none;
  border-radius: 5px;
  font-weight: bold;
  font-size: 1em;
  cursor: pointer;
  transition: background-color 0.3s;
  text-decoration: none;
}

.btn:hover {
  background-color: var(--cor-destaque-hover);;
}

@media (max-width: 600px) {
  .hero h1 {
    font-size: 1.8em;
  }

  .hero h2 {
    font-size: 1em;
  }

  .hero p {
    font-size: 0.9em;
  }
}

.sobre-evento {
  background-color: var(--cor-cinza-claro);
  padding: 60px 20px;
  color: #223745;
}

.sobre-evento .container {
  max-width: 1000px;
  margin: 0 auto;
}

.sobre-evento h2 {
  font-size: 2em;
  margin-bottom: 20px;
  color: #223745;
  text-align: center;
}

.sobre-evento p {
  font-size: 1.1em;
  line-height: 1.7;
  margin-bottom: 15px;
  text-align: justify;
}

.diferenciais {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 40px;
  gap: 20px;
}

.diferenciais .item {
  background-color: var(--cor-branco);
  padding: 15px 25px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 1em;
  width: 220px;
  text-align: center;
}

.diferenciais .item span {
  margin-top: 10px;
}

.programacao {
  background-color: var(--cor-cinza-intermediario);
  padding: 60px 20px;
  color: #223745;
}

.programacao .container {
  max-width: 1000px;
  margin: 0 auto;
}

.programacao h2 {
  text-align: center;
  font-size: 2em;
  margin-bottom: 30px;
}

.programacao h3 {
  font-size: 1.4em;
  margin: 40px 0 10px;
  color: #1a1a1a;
}

.programacao h4 {
  font-size: 1.2em;
  margin: 20px 0 10px;
  color: #007acc;
}

.programacao .item p {
  background-color: #fff;
  padding: 10px 15px;
  margin-bottom: 10px;
  border-left: 5px solid var(--cor-destaque-alt);
  border-radius: 4px;
}

.minicurso {
  background-color: var(--cor-branco);
  border-left: 5px solid var(--cor-secundaria);
  border-radius: 4px;
  padding: 10px 15px;
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.btn-mini {
  background-color: var(--cor-destaque-alt);
  color: #fff;
  padding: 8px 16px;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
  transition: background-color 0.3s;
}

.btn-mini:hover {
  background-color: var(--cor-destaque-hover);
}

.cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.cards-grid.dois-itens {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 15px;
}

.card-atividade {
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: start;
  gap: 15px;
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
  height: 100%; /* garante que todos os cards tenham mesma altura quando necessário */
}

.card-atividade.destaque {
  width: 100%;
  /* display: flex; */
  gap: 15px;
  margin-bottom: 30px;
  flex-wrap: wrap;
  align-items: flex-start;
  display: block;
  width: 100%;
  margin-bottom: 30px;
}

.card-atividade.destaque .foto,
.card-atividade.destaque .info {
  display: inline-block;
  vertical-align: top;
}

.card-atividade.destaque .foto {
  width: 80px;
  margin-right: 15px;
}

.card-atividade.destaque .info {
  width: calc(100% - 100px); /* 80px da imagem + 15px gap + margem extra */
}

.card-atividade .foto img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid #f5823d;
}

.card-atividade .foto {
  flex-shrink: 0;
}

.card-atividade .info {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.card-atividade .info h4 {
  margin-top: 0;
  font-size: 1.1em;
  margin-bottom: 5px;
  color: #223745;
}

.card-atividade .info .especialidade {
  font-size: 0.95em;
  color: var(--cor-texto-secundario);
  margin-bottom: 10px;
  text-align: justify;
}

.card-atividade .btn-mini {
  background-color: var(--cor-destaque-alt);
  color: #fff;
  padding: 8px 16px;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
  display: inline-block;
  margin-top: 10px;
  margin-top: auto; /* empurra o botão para o final da coluna */
  align-self: flex-start; /* garante que ele fique alinhado à esquerda */
}

.card-atividade .btn-mini:hover {
  background-color: var(--cor-destaque-hover);
}

.card-encerramento {
  display: block; /* anula o flex que foi feito pensando na imagem */
  text-align: left;
  padding: 20px;
}

.card-encerramento .info {
  display: block;
}

.coluna.contato{
  text-align: center;
}

.convidada-especial {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  background-color: #f8f9fa;
  padding: 12px 16px;
  border-left: 4px solid #007acc;
  border-radius: 6px;
  width: 100%;
  align-items: center;
}

.foto-convidada img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid #007acc;
}

.info-convidada h5 {
  margin: 0;
  font-size: 1em;
  color: #223745;
}

.info-convidada p {
  margin: 3px 0 0 0;
  font-size: 0.95em;
  color: #555;
}


/* Breakpoints */
@media (min-width: 768px) {
  .cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .cards-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* 
@media (max-width: 600px) {
  .card-atividade {
    flex-direction: column;
    align-items: flex-start;
  }

  .card-atividade .foto img {
    margin-bottom: 10px;
  }

  .card-atividade .info {
    text-align: left;
  }
} */

/* seção de inscrição */

.inscricao {
  padding: 60px 20px;
  background: linear-gradient(to right, #223745, #2e4a5a);
  color: var(--cor-branco);
  text-align: center;
}

.inscricao .container {
  max-width: 600px;
  margin: 0 auto;
}

.inscricao h2 {
  font-size: 2.2em;
  margin-bottom: 10px;
  color: var(--cor-destaque-alt);
}

.inscricao .sub {
  font-size: 1.1em;
  margin-bottom: 25px;
}

.contador-box {
  background-color: var(--cor-cinza-claro);
  color: #223745;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 30px;
}

.contador-box .urgente {
  font-weight: bold;
  color: var(--cor-aviso);
  margin-bottom: 15px;
}

.contador {
  font-size: 1.6em;
  font-weight: bold;
  letter-spacing: 1px;
}

.inscricao p {
  font-size: 1.1em;
  margin-bottom: 30px;
}

.btn-inscricao {
  background-color: var(--cor-destaque-hover);;
  color: #fff;
  padding: 16px 32px;
  font-size: 1.1em;
  font-weight: bold;
  border-radius: 8px;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.3s;
}

.btn-inscricao:hover {
  background-color: #d56b27;
}

.faq {
  padding: 60px 20px;
  background-color: var(--cor-cinza-claro);
  color: var(--cor-primaria);
}

.faq .container {
  max-width: 800px;
  margin: 0 auto;
}

.faq h2 {
  text-align: center;
  font-size: 2em;
  margin-bottom: 30px;
}

.faq-item {
  margin-bottom: 10px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #ddd;
  background-color: #fff;
}

.faq-question {
  width: 100%;
  text-align: left;
  background-color: var(--cor-branco);
  color: #223745;
  border: none;
  padding: 15px 20px;
  font-size: 1.05em;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s;
  border-left: 4px solid var(--cor-destaque-alt);
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-question .arrow {
  font-size: 1.2em;
  color: var(--cor-texto-secundario);
  transition: transform 0.3s ease;
}

.faq-item.active .arrow {
  transform: rotate(180deg);
}

.faq-question:hover {
  background-color: #f1f1f1;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  padding: 0 20px;
  background-color: #fcfcfc;
}

.faq-answer p {
  margin: 15px 0;
  font-size: 1em;
  line-height: 1.6;
}

.faq-item.active .faq-answer {
  max-height: 300px;
}

.rodape {
  background-color: #223745;
  color: var(--cor-branco);
  padding: 40px 20px;
  font-size: 0.95em;
}

.rodape .container {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.rodape .linha-superior {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 20px;
}

.rodape .coluna {
  flex: 1;
  min-width: 220px;
}

.rodape .logo-rodape {
  width: 140px;
  display: block;
}

.rodape .coluna.logo {
  display: flex;
  justify-content: flex-start;
}

.rodape .coluna.redes {
  display: flex;
  flex-direction: column;
  align-items: flex-end;

}

.rodape .coluna h4 {
  color: var(--cor-destaque-alt);
  font-size: 1.2em;
  margin-bottom: 10px;
}

.rodape .coluna p,
.rodape .coluna a {
  color: var(--cor-branco);
  margin: 5px 0;
  text-decoration: none;
}

.rodape .coluna a:hover {
  text-decoration: underline;
}

/* Linha inferior com o texto e copy */
.rodape .linha-inferior {
  text-align: center;
  border-top: 1px solid #3a4e5e;
  padding-top: 20px;
  font-size: 0.9em;
}

.logo-rodape {
  width: 140px;
  display: block;
}

.logo-rodape {
  width: 140px;
  display: block;
  margin: 0 auto 0 0; /* centraliza no mobile */
}

/* Desktop layout */
@media (min-width: 768px) {
  .rodape .container {
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
  }

  .rodape .coluna {
    flex: 1;
    padding: 0 ;
    margin: auto;
  }

  .rodape .coluna:first-child {
    padding-left: 0;
  }

  .rodape .coluna:last-child {
    padding-right: 0;
  }
}

@media (max-width: 768px) {
  .cards-grid.dois-itens {
    grid-template-columns: 1fr !important;
  }

  .card-atividade {
    grid-template-columns: 1fr;
    text-align: left;
  } 

  .card-atividade .foto {
    margin: 0 auto 10px auto;
  }

  .card-atividade .info {
    align-items: flex-start;
  }

  .card-atividade .btn-mini{
    align-self: center;
    margin-top: 10px;
  }

  .card-atividade.destaque {
    display: grid;
    grid-template-columns: 1fr !important; /* força uma única coluna */
    text-align: left;
  }

   .card-atividade.destaque .foto {
    margin: 0 auto 15px auto;
  }

   .card-atividade.destaque .info {
    align-items: flex-start;
    width: 100%;
  }

  .card-atividade.destaque .convidada-especial {
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 02px;
  }

  .card-atividade.destaque .foto-convidada img {
    margin-bottom: 10px;
  }

  .card-atividade.destaque .info-convidada {
    text-align: center;
  }

  .rodape .linha-superior {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .rodape .coluna.redes {
    align-items: center;
    text-align: center;
  }

  .rodape .coluna.logo {
    justify-content: center;
  }

  .rodape .container {
    flex-direction: column;
    text-align: center;
  }

  .rodape .coluna {
    width: 100%;
    margin-bottom: 20px;
  }

  .logo-rodape {
    margin-left: auto;
    margin-right: auto;
  }
}