* {
  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-invocacao {
  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-invocacao {
  text-align: center;
  font-family: "Special Elite", monospace;
  font-size: 1.2rem;
  line-height: 1.5; /* Mais espaço entre linhas para leitura poética */
  max-width: 650px;
  margin: 0 auto;
  color: #eee;
}

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

/* Links */
ul.topnav li a {
  display: block;
  color: #f1f1f1;
  padding: 14px 16px;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

ul.topnav li a:hover {
  color: #ffcc00;
  transform: translateY(-1px);
}

ul.topnav li a.active {
  color: #fff;
  position: relative;
}

ul.topnav li a.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 40%;
  height: 2px;
  background-color: #ffcc00;
  transform: translateX(-50%);
}

/* Checkbox escondido */
#menu-toggle {
  display: none;
}

/* Ícone do menu */
.menu-icon {
  display: none;
  font-size: 2rem;
  color: #ffcc00;
  padding: 15px;
  cursor: pointer;
}

/* Mobile por último */
@media (max-width: 768px) {
  .slogan {
    font-size: 0.7rem;
    opacity: 0.6;
    text-align: center;
  }

  nav.nav-mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
  }

  header img {
    max-width: 200px;
    height: auto;
  }

  .menu-icon {
    display: block;
    text-align: right;
    line-height: 1;
  }

  ul.topnav {
    display: none;
    flex-direction: column;
    background-color: #222;

    position: absolute;
    top: 60px; /* abaixo do header */
    right: 15px;

    width: 220px;
    border: 1px solid #333;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    z-index: 1000;

    transform: translateY(-5px);
  }

  #menu-toggle:checked + .menu-icon + ul.topnav {
    display: flex;
    transform: translateY(0);
  }
}

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

.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: 1px solid rgba(255, 204, 0, 0.3);
  margin-bottom: 30px;
  z-index: 100;
  top: auto;

  position: sticky;
  top: 50px;
}

.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;
  letter-spacing: 0.08em;
  font-size: 0.9rem;
  text-transform: uppercase;
  font-weight: bold;
  /* transition: color 0.3s ease; */
  transition: color 0.2s ease, transform 0.2s ease;
}

.submenu-sobre a.active {
  color: #fff;
  border-bottom: 2px solid #ffcc00;
}

.submenu-sobre a:hover {
  color: #ffcc00;
  transform: translateY(-1px);
}

/* Estilos para Celular */
@media (max-width: 768px) {
  .submenu-sobre {
    position: relative;
    top: auto;
  }

  .submenu-sobre ul {
    flex-direction: column;
    align-items: stretch;
  }

  .submenu-sobre li {
    margin: 0;
  }

  .submenu-sobre a {
    text-align: left;
    font-size: 1rem;
    padding: 12px 20px;
    border-left: 3px solid transparent;
  }

  .submenu-sobre a.active {
    border-left-color: #ffcc00;
    border-bottom: none;
    background: rgba(255, 204, 0, 0.05);
  }
}

/* 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: 20px 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;
}