@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;800&display=swap');

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

:root {
  --azul-claro: #dbeeff;
  --azul-principal: #1a3b6b;
  --azul-secundario: #2f5b9c;
  --azul-hover: #3986df;
  --branco: #ffffff;
  --cinza-texto: #1a1a1a;
}

body {
  font-family: 'Poppins', sans-serif;
  background-color: var(--azul-claro);
  color: var(--cinza-texto);
  line-height: 1.6;
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
}

/* Cabeçalho */
header.cabecalho {
  background-color: #c9d2db;
  padding: 4rem 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* Agrupa logo e textos */
/* Container flexível para logo + título */
.logo-e-titulo {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap; /* permite quebrar em telas pequenas */
}

/* Logo */
.logo {
  height: 80px;
  width: auto;
  flex-shrink: 0; /* impede que a logo encolha demais */
}

/* Texto do topo */
.texto-topo h1 {
  font-size: 3rem;
  color: var(--azul-principal);
  margin: 0;
}

.texto-topo p {
  font-size: 1rem;
  color: #3d3c3c;
  margin: 0;
}

/* Media queries para telas menores */

@media (max-width: 992px) {
  .logo {
    height: 60px;
  }
  .texto-topo h1 {
    font-size: 2.2rem;
  }
  .texto-topo p {
    font-size: 0.9rem;
  }
}

@media (max-width: 600px) {
  /* Coluna em telas pequenas, centralizado */
  .logo-e-titulo {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
  }
  .logo {
    height: 50px;
  }
  .texto-topo h1 {
    font-size: 1.8rem;
  }
  .texto-topo p {
    font-size: 0.85rem;
  }
}


/* Menu */
nav ul.menu {
  list-style: none;
  display: flex;
  gap: 1.8rem;
}

nav ul.menu li a {
  text-decoration: none;
  color: var(--azul-principal);
  font-weight: 750;
  font-size: 1.3rem;
  transition: color 0.3s ease;
}

nav ul.menu li a:hover {
  color: var(--azul-hover);
}


/* Banner */
.banner {
  text-align: center;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.banner-imgs {
  width: 100%;
}

.banner-imgs img.principal-banner {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
  margin: 0 0;
}

.banner h1, .banner p {
  margin-top: 1.5rem;
  color: var(--azul-principal); /* Ou branco se estiver sobre imagem */
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* Sombra suave opcional */
  z-index: 1;
  position: relative;
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

/* Apresentação */
.apresentacao {
  background-color: transparent;
  padding: 2rem 1rem;
  text-align: left;
  max-width: 1200px;
  margin: 0 auto;
  color: var(--cinza-texto);
  border-radius: 0;
  box-shadow: none;
  font-family: 'Inter', sans-serif;
}

.apresentacao h2 {
  font-size: 2rem;
  font-weight: 800;
  font-family: Arial, Helvetica, sans-serif;
  text-transform: uppercase;
  color: var(--azul-principal);
  margin: 12px 0 2rem 0;
}

.apresentacao h2::after {
  content: '';
  display: block;
  height: 5px;
  background-color: #a6d4d5;
  border-radius: 5px;
  margin-top: 3px;
}

.apresentacao p {
  font-size: 1.1rem;
  line-height: 1.7;
  text-align: justify;
  max-width: 950px;
  margin: 0 auto 2rem auto;
  color: var(--cinza-texto);
}

.apresentacao h3 {
  font-size: 1.3rem;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
  color: #1a2a57;
  margin: 2rem 0 1rem 0;
  padding-left: 6.8rem; /* Move o texto para a direita */
}


.apresentacao ul {
  list-style: disc;
  padding-left: 10px;
  text-align: left;
  max-width: 930px;
  margin: 0 auto 1rem;
  color: var(--cinza-texto);
}

.apresentacao li {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}



/* Container dos Cards */
/* Container dos Cards */
.cards-container {
  display: flex;
  flex-wrap: wrap; /* permite quebra de linha */
  justify-content: center;
  gap: 30px;
  margin-top: 2rem;
  max-width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}

/* Card Individual */
.card {
  flex: 1 1 350px; /* base 350px, flexível */
  max-width: calc(50% - 15px); /* até 2 cards por linha no desktop */
  background-color: #f5faff;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  border: 1px solid #e0e6ed;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Responsividade dos Cards */

/* Tablets - até 992px: 1 card por linha */
@media (max-width: 992px) {
  .card {
    max-width: 100%;
    flex-basis: 100%;
  }
}

/* Smartphones - até 600px: mantém 1 card por linha */
@media (max-width: 600px) {
  .card {
    max-width: 100%;
    flex-basis: 100%;
    padding: 15px; /* opcional: reduzir padding para telas pequenas */
  }
}


/* Imagem dentro do Card */
.imagem-material {
  width: 70%; /* Garante que a div ocupe a largura total do card */
  padding-top: 80%; /* Isso cria uma altura igual à largura, resultando em um quadrado */
  height: 0; /* Zera a altura real, pois o padding-top já define a altura visual */
  background-size: cover; /* Garante que a imagem cubra a área, cortando se necessário */
  background-repeat: no-repeat;
  background-position: center center;
  border-radius: 6px 6px 0 0; /* Apenas as bordas superiores arredondadas */
  margin-bottom: 15px; /* Espaço entre a imagem e o texto do card */
  /* Adicione overflow: hidden; se você quiser garantir que nada vaze para fora do raio das bordas */
  overflow: hidden;
}

/* Botão "Mais Detalhes" */
.botao-detalhes {
  display: inline-block;
  background: linear-gradient(135deg, #1a2a57, #223b7e);
  color: #ffffff;
  text-decoration: none;
  padding: 20px 32px;
  font-size: 2.8rem;
  font-weight: 600;
  font-family: 'Segoe UI', Tahoma, sans-serif;
  border: none;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  transition: all 0.3s ease-in-out;
  margin-top: 20px;
}

.botao-detalhes:hover {
  background: linear-gradient(135deg, #274080, #1a2a57);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.3);
}


/* Botões de Materiais (se forem diferentes dos botões dentro dos cards) */
.botao-materiais {
  display: inline-block;
  background-color: #1a2a57;
  color: white;
  text-decoration: none;
  padding: 12px 24px;
  font-size: 1em;
  border-radius: 10px;
  transition: background-color 0.3s ease;
}

.botao-materiais:hover {
  background-color: #274080;
}

.imagem-material {
  width: 100%;
  height: 140px;
  background-color: #cfdce6;
  background-size: cover;
  background-position: center;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.botao-detalhes {
  display: inline-block;
  padding: 8px 15px;
  background-color: var(--azul-secundario);
  color: white;
  text-decoration: none;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  margin-top: 10px;
}

.botao-detalhes:hover {
  background-color: var(--azul-hover);
}

#materiais { 
  text-align: left;
  max-width: 1200px; 
  margin: 0 auto; 
}
/* --- */

.titulo-material {
  font-family: 'Arial', sans-serif;
  font-weight: 800;
  font-size: 30px;
  padding-left: 25px;
  color: var(--azul-principal);
  text-transform: uppercase;
  position: relative;
  display: inline-block; 
  margin-bottom: 10px;
}

.titulo-material::after {
  content: '';
  display: block; 
  height: 5px;
  background-color: #a6d4d5;
  border-radius: 10px;
  margin-top: 3px;
}
.titulo-secao {
  color: #0a2e53;
  font-size: 1.5rem;
  margin: 1.5rem;
}

/* Seção vídeo */
.secao-video {
  background: linear-gradient(135deg, #d8e9f6, #f0f8ff);
  padding: 4rem 2rem;
  text-align: center;
  border-radius: 20px;
  margin: 2rem auto;
  max-width: 900px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}

.titulo-video {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--azul-principal);
  margin-bottom: 1rem;
}

.video1,
.video2 {
  font-size: 1.3rem;
  font-weight: bold;
  color: #204080;
  margin: 2rem 0 1rem;
  text-align: center;
}

.divisor-videos {
  border: none;
  border-top: 1px solid #b3cbe3;
  margin: 3rem auto;
  width: 80%;
  opacity: 0.5;
}


.texto-video {
  max-width: 700px;
  margin: 0 auto 2rem auto;
  font-size: 1rem;
  color: #3d3d3d;
  line-height: 1.6;
}

.video-container {
  width: 100%;
  max-width: 700px;
  /* Remova a altura fixa para o vídeo ajustar a altura automaticamente */
  /* height: 300px; */
  
  /* Remova o background e a borda para deixar transparente */
  background-color: transparent;
  border: none;

  margin: 0 auto 1.5rem auto;
  border-radius: 16px;

  /* Remova o flex para evitar conflitos de layout */
  display: block;

  /* Se quiser centralizar o vídeo horizontalmente */
  text-align: center;
  color: #1a3b6b;
}
.video-container video,
.video-container iframe {
  width: 100%;
  height: auto; /* Altura automática para manter a proporção */
  border-radius: 13px;
  display: block;
  margin: 0 auto;
}

.botao-video {
  background-color: var(--azul-principal);
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 30px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.botao-video:hover {
  background-color: var(--azul-hover);
  transform: translateY(-2px);
}

.texto-video-extra {
  margin-top: 2.5rem;
  font-size: 1rem;
  color: var(--cinza-texto);
}

.rodape {
  background-color: #003f88; /* azul bonito */
  color: white;
  text-align: center;
  padding: 20px 0;
  font-size: 1.1rem;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin-top: 40px;
}

.realizacao-apoio {
  border: 8px solid #0c478b; /* azul escuro */
  border-radius: 40px;
  padding: 30px;
  margin: 50px auto;
  max-width: 900px;
  text-align: center;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: white;
}

.realizacao-apoio h3 {
  display: inline-block;
  margin: 0 40px;
  font-size: 1.3rem;
  color: #333;
}

.realizacao-apoio img {
  max-width: 100%;  /* Nunca maior que o container */
  height: auto;     /* Mantém a proporção da imagem */
  display: block;   /* Remove espaços embaixo da imagem */
  margin: 0 auto;   /* Centraliza a imagem se quiser */
  /* Opcional: para limitar altura máxima */
  /* max-height: 80px; */
}


img, video, iframe {
  max-width: 100%;
  height: auto;
}