* {
  box-sizing: border-box;
}

html {
  /* Substitua pelo caminho da sua imagem de textura ou um padrão */
  background-color: #050505;
  background-image: url("/img/background_texture.jpg"); /* Exemplo de textura de ruído */
  background-attachment: fixed;
}

body {
  max-width: 1000px; /* Limite para telas grandes */
  margin: 0 auto; /* O "auto" centraliza o bloco no meio da tela */
  padding: 20px;
  background-color: black;
  color: white;

  /* Melhora a responsividade */
  width: 95%; /* Em telas menores que 1000px, ocupa 95% da largura */
  box-sizing: border-box; /* Garante que o padding não "estique" o body */

  box-shadow: 0 0 50px rgba(0, 0, 0, 0.8); /* Sombra para destacar do fundo texturizado */
  border-left: 1px solid #1a1a1a;
  border-right: 1px solid #1a1a1a;
}

header {
  padding: 10px;
  text-align: left;
}

main {
  max-width: 800px; /* Define o limite de largura */
  margin: 40px auto; /* Centraliza o bloco horizontalmente */
  padding: 20px;
}

footer {
  padding: 8px;
  text-align: right;
}

/* Subtítulo discreto abaixo do título principal */
.data-manifesto {
  text-align: center;
  font-family: "Special Elite", monospace;
  font-size: 0.85rem; /* Pequeno */
  color: #555; /* Cinza escuro para pouca ênfase */
  letter-spacing: 3px; /* Espaçamento entre letras estilo carimbo */
  text-transform: uppercase;
  margin-top: -25px; /* Puxa para perto do H1 do default.njk */
  margin-bottom: 50px; /* Afasta do início do texto */
  display: block;
}

/* Bloco do manifesto */
.texto-manifesto {
  text-align: center;
  font-family: "Special Elite", monospace;
  font-size: 1.2rem;
  line-height: 2.2; /* Mais espaço entre linhas para leitura poética */
  max-width: 650px;
  margin: 0 auto;
  color: #eee;
}

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

/* Style the topnav */
ul.topnav {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333333;
}

/* Style links in topnav */
ul.topnav li a {
  display: block;
  color: #f1f1f1;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change color on hover */
ul.topnav li a:hover {
  background-color: #dddddd;
  color: black;
}

.img-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  /* opcional: define uma largura padrão se não quiser setar no MD */
  max-width: 100%;
}

.video-item {
  display: flex;
  gap: 30px; /* Espaço entre a imagem e o texto */
  margin-bottom: 40px;
  align-items: flex-start; /* Alinha o texto pelo topo da imagem */
}

.video-thumb {
  flex: 0 0 50%; /* A imagem ocupa 50% da largura */
}

.video-thumb img {
  width: 100%; /* Garante que a imagem preencha os 50% */
  height: auto;
  display: block;
}

.video-info {
  flex: 1; /* O texto ocupa o restante do espaço */
}

.video-info h2 {
  font-family: "Courier New", Courier, monospace;
  color: rgb(211, 241, 166);
  font-size: 1.5rem;
  margin: 0;
  margin-top: 0;
  margin-bottom: 15px;
}

.video-info p {
  margin: 10px 0;
  color: #999; /* Cor das informações técnicas */
}

/* Blockquote pra dar ênfase */
blockquote {
  max-width: 600px;
  margin: 40px auto !important; /* Centraliza o bloco na página */
  padding: 20px !important;
  border: 1px solid yellow !important;
  background-color: rgba(255, 255, 0, 0.05) !important;
  border-radius: 4px;
  text-align: center;
}

/* Isso remove especificamente qualquer tentativa de capitular dentro do blockquote */
blockquote p::first-letter {
  font-size: inherit !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  color: yellow !important;
}

blockquote p {
  font-family: "Special Elite", monospace;
  color: yellow !important;
  font-size: 1.2rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin: 0 !important;
  border: none !important;
}

/* Adiciona aspas decorativas pequenas nos cantos */
blockquote::before {
  content: "“";
  position: absolute;
  top: 5px;
  left: 10px;
  font-size: 2rem;
  color: yellow;
  opacity: 0.3;
}

.quote-menor {
  max-width: 300px;
  font-size: 0.9rem;
}

/* Da página de vídeos */

.video-detalhe {
  margin-top: 20px;
}

.video-container {
  text-align: center; /* Centraliza a capa do filme */
  margin-bottom: 30px;
}

.video-info-box {
  background: #111;
  padding: 15px;
  border-radius: 5px;
  margin-bottom: 20px;
  border: 1px solid #333;
}

.video-detalhe h2 {
  color: #ff0000;
  border-bottom: 1px solid #333;
  padding-bottom: 5px;
  margin-top: 30px;
}

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* Proporção 16:9 */
  height: 0;
  overflow: hidden;
  margin: 20px 0;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.capa-flutuante {
  float: right; /* Faz a imagem ir para a direita */
  margin-left: 20px; /* Empurra o texto para não grudar na imagem */
  margin-bottom: 20px; /* Empurra o texto que vier abaixo */
}

/* Para garantir que o layout não quebre em celulares muito pequenos */
@media (max-width: 500px) {
  .capa-flutuante {
    float: none; /* Para de flutuar */
    display: block; /* Fica em cima do texto */
    margin: 0 auto 20px auto; /* Centraliza */
  }
}

/* Estilo para os rótulos (labels) */
.video-page strong {
  color: greenyellow; /* Rosa choque para combinar com a logo */
  text-transform: uppercase; /* Transforma em CAIXA ALTA */
  font-family: "Courier New", Courier, monospace; /* Fonte de roteiro */
  font-size: 1.1rem;
  letter-spacing: 1px; /* Espaçamento entre letras para dar peso */
  display: inline-block;
  margin-right: 5px;
  text-shadow: 2px 2px 0px #330033; /* Sombra sutil para profundidade */
}

/* Efeito opcional: uma linha tênue entre os parágrafos para organizar */
.video-page p {
  border-bottom: 1px solid #1a1a1a;
  padding-bottom: 10px;
  margin-bottom: 15px;
}

/* Para o título principal não ficar simples demais */

.video-page h1 {
  font-family: "Arial Black", sans-serif;
  color: white;
  border-left: 8px solid #ff00ff;
  padding-left: 15px;
  margin-bottom: 30px;
}

.video-detalhe p {
  color: #ddd; /* Texto levemente acinzentado */
  line-height: 1.6;
}

/* Conjurados */

.conjurado-item {
  overflow: hidden; /* Garante que o container envolva o float */
  margin-bottom: 30px;
  padding-top: 20px;
}

.conjurado-foto {
  float: left;
  margin-right: 25px;
  margin-bottom: 15px;
}

.conjurado-foto img {
  width: 250px; /* Ajuste o tamanho conforme sua foto original */
  height: auto;
  border: 1px solid #333; /* Opcional: moldura sutil */
}

.conjurado-bio h4 {
  font-family: "Courier New", Courier, monospace;
  color: rgb(211, 241, 166);
  font-size: 2rem;
  margin: 0;
  margin-top: 0;
  margin-bottom: 15px;
}

.bio-texto {
  color: #ccc;
  line-height: 1.6;
}

.divisor-conjurado {
  border: 0;
  border-top: 1px solid #222;
  margin: 20px 0;
}

/* Responsividade para celular */
@media (max-width: 600px) {
  .conjurado-foto {
    float: none;
    text-align: center;
    margin-right: 0;
  }
  .conjurado-foto img {
    width: 100%;
    max-width: 300px;
  }
}

.video-oficina {
  margin-bottom: 50px;
  padding: 20px;
  background: #0a0a0a;
  border: 1px solid #222;
}

.video-oficina h3 {
  color: #ff00ff;
  text-transform: uppercase;
  font-family: "Courier New", Courier, monospace;
  margin-bottom: 15px;
}

/* Reutilizando o container responsivo que criamos antes */
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  margin-bottom: 15px;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.equipe {
  font-size: 0.9rem;
  color: #999;
  border-top: 1px solid #333;
  padding-top: 10px;
}

.equipe strong {
  color: #ccc;
}

/* Container do Submenu */

.submenu-sobre {
  background-color: #222; /* Um cinza um pouco mais claro que o fundo */
  border-bottom: 2px solid #ff00ff; /* Linha de destaque rosa */
  margin-bottom: 30px;
  position: sticky; /* Faz o menu grudar no topo ao rolar */
  top: 0;
  z-index: 100;
}

.submenu-sobre ul {
  list-style: none;
  display: flex;
  justify-content: center;
  padding: 10px 0;
  margin: 0;
  flex-wrap: wrap; /* Para não quebrar no celular */
}

.submenu-sobre li {
  margin: 0 15px;
}

.submenu-sobre a {
  color: #ccc;
  text-decoration: none;
  font-family: "Arial", sans-serif;
  font-size: 0.9rem;
  text-transform: uppercase;
  font-weight: bold;
  transition: color 0.3s ease;
}

.submenu-sobre a.active {
  color: yellow;
  border-bottom: 2px solid yellow;
  padding-bottom: 5px;
}

.submenu-sobre a:hover {
  color: yellow; /* Rosa ao passar o mouse */
}

/* Espaçamento do texto interno */
.conteudo-sobre {
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.8;
  color: #ddd;
}

.conteudo-sobre h1 {
  text-align: center;
  margin-bottom: 40px;
}

/* Isso aplica a letra grande APENAS nos parágrafos principais da página */
.conteudo-sobre > p:first-of-type::first-letter {
  font-family: "Special Elite", sans-serif;
  font-size: 3.5rem;
  float: left;
  margin-right: 12px;
  color: yellow;
  line-height: 1;
  background: #1a1a1a;
  padding: 5px 12px;
  border-radius: 4px;
  text-transform: uppercase;
}

/* 1. Melhore a base do corpo com uma fonte mais moderna */
@import url("https://fonts.googleapis.com/css2?family=Special+Elite&family=Inter:wght@300;400;700&display=swap");

body {
  font-family: "Inter", sans-serif; /* Fonte base mais legível */
  line-height: 1.6;
  background-attachment: fixed; /* Opcional: faz o fundo ficar parado ao rolar */
}

/* 2. Títulos com cara de máquina de escrever clássica */
h1,
h2,
h3,
.video-info h2,
.conjurado-bio h4 {
  font-family: "Special Elite", cursive !important;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* 3. Submenu "Sobre" Moderno (Semi-transparente) */
.submenu-sobre {
  background-color: rgba(
    34,
    34,
    34,
    0.9
  ); /* Transparência para ver o conteúdo passando por baixo */
  backdrop-filter: blur(5px); /* Efeito de vidro fosco */
  border-bottom: 2px solid yellow; /* Mudando para amarelo para combinar com seu hover */
}

/* 4. Efeito de "Cartaz" nas Imagens */
.video-thumb img,
.conjurado-foto img,
.capa-flutuante {
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 10px rgba(255, 255, 255, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.video-thumb img:hover {
  transform: scale(1.02); /* Leve aumento ao passar o mouse */
  box-shadow: 0 0 20px rgba(255, 255, 0, 0.2); /* Brilho amarelo discreto */
}

/* 5. Refinamento da Letra Capitular (Página História) */
.conteudo-sobre p:first-of-type::first-letter {
  font-family: "Special Elite", sans-serif;
  font-size: 4rem;
  color: yellow; /* Combinando com sua nova cor de destaque */
  margin-right: 15px;
  background: #1a1a1a;
  padding: 5px 15px;
  border-radius: 4px;
}

/* 6. Botão de Chamada no rodapé ou páginas */
.btn-cta {
  display: inline-block;
  padding: 12px 24px;
  background-color: yellow;
  color: black;
  text-decoration: none;
  font-weight: bold;
  text-transform: uppercase;
  border-radius: 4px;
  margin-top: 20px;
  transition: background 0.3s;
}

.btn-cta:hover {
  background-color: #ffd700;
}

.timeline {
  border-left: 3px solid #f1c40f;
  margin: 40px 0 40px 50px;
  padding: 10px 0;
}
.timeline-group {
  position: relative;
  margin-bottom: 30px;
}
.year-label {
  position: absolute;
  left: -95px;
  top: 0;
  background: #f1c40f;
  color: #000;
  padding: 3px 8px;
  font-family: "Special Elite", monospace;
  font-size: 0.85rem;
  font-weight: bold;
}
.event-card {
  background: #111;
  border: 1px solid #333;
  padding: 15px;
  margin-left: 25px;
  border-radius: 4px;
}
.event-card strong {
  color: #f1c40f;
  display: block;
  margin-bottom: 5px;
}
.event-card p {
  margin: 0;
  color: #ccc;
  font-size: 0.95rem;
}
.event-card ul {
  margin-top: 10px;
  color: #aaa;
  font-size: 0.9rem;
}
.event-card.highlight {
  border: 1px solid #f1c40f;
  box-shadow: 0 0 10px rgba(241, 196, 15, 0.2);
}



.contato-container {
    text-align: center;
    padding: 60px 20px;
    max-width: 700px;
    margin: 0 auto;
}

.cartao-contato {
    background: rgba(20, 20, 20, 0.8); /* Fundo quase preto mas com profundidade */
    border: 1px solid #333;
    padding: 40px;
    margin: 40px 0;
    box-shadow: 0 0 15px rgba(241, 196, 15, 0.1); /* Brilho amarelo sutil */
    border-radius: 4px;
}

.campo-contato {
    margin-bottom: 25px;
}

.campo-contato .label {
    display: block;
    font-family: 'Special Elite', monospace;
    font-size: 0.9rem;
    color: #f1c40f; /* Amarelo Conjuração */
    letter-spacing: 2px;
    margin-bottom: 5px;
}

.link-destaque {
    font-size: 1.4rem;
    color: #fff;
    text-decoration: none;
    transition: 0.3s;
}

.link-destaque:hover {
    color: #f1c40f;
    text-shadow: 0 0 8px rgba(241, 196, 15, 0.5);
}

.nota-rodape {
    font-style: italic;
    color: #666;
    font-size: 1rem;
    margin-top: 10px;
}