/* ----------------------------------------------------------------------------
   1. RESET E CONFIGURAÇÕES GLOBAIS
   ---------------------------------------------------------------------------- */
html {
    scroll-behavior: smooth;
}

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

img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    align-items: center;
}

/* Paleta de cores principal do site, reaproveitada em várias regras abaixo */
:root {
    --preto: #0a0a0a;
    --preto-suave: #1a1a1a;
    --dourado: #d4af37;
    --dourado-brilho: #f9e29b;
    --texto: #e0e0e0;
}


/* ----------------------------------------------------------------------------
   2. BODY E TIPOGRAFIA BASE
   ---------------------------------------------------------------------------- */
body {
    background-color: #050505; /* Um preto ainda mais profundo para as bordas externas */
    color: var(--texto);
    font-family: 'Raleway', sans-serif;
    line-height: 1.6;
    display: flex;
    justify-content: center; /* Reforça a centralização */

    /* O header é "fixed" (ver seção 3), então sai do fluxo normal da página.
       Esse padding evita que o conteúdo do topo fique escondido atrás dele. */
    padding-top: 88px;
}

h1, h2, h3 {
    font-family: 'Cinzel', serif;
    color: var(--dourado);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

h2 {
    margin-top: 30px;
    margin-bottom: 30px;
}

.logo {
    font-family: 'Cinzel', serif;
    color: var(--dourado);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
}


/* ----------------------------------------------------------------------------
   3. NAVEGAÇÃO (HEADER / NAV)
   ----------------------------------------------------------------------------
   O header fica fixo no topo, cobrindo toda a largura da tela (100vw, de
   canto a canto), e some/aparece conforme o usuário rola a página — esse
   comportamento de mostrar/esconder é controlado em recado.js (seção 6),
   que apenas alterna a classe "header-oculto" definida abaixo.
   ---------------------------------------------------------------------------- */
header {
    background-color: rgba(0, 0, 0, 0.9);
    padding: 20px;
    border-bottom: 2px solid var(--dourado);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100vw; /* Cobre a largura inteira da tela, de canto a canto */
    transition: transform 0.3s ease;
}

/* Aplicada via JS quando o usuário rola para baixo: desliza o header para
   fora da tela (ver recado.js, seção 6). */
header.header-oculto {
    transform: translateY(-100%);
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

nav ul {
    display: flex;
    list-style: none;
}

nav ul li a {
    color: var(--texto);
    text-decoration: none;
    margin-left: 20px;
    transition: 0.3s;
}

nav ul li a:hover {
    color: var(--dourado);
}

.btn-cacadores {
    color: #ffffff !important; /* Destaque para os rebeldes */
}


/* ----------------------------------------------------------------------------
   4. BANNER PRINCIPAL (HERO)
   ---------------------------------------------------------------------------- */
#hero {
    height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('https://via.placeholder.com/1920x1080'); /* Coloque uma imagem de sonho aqui */
    background-size: cover;
    border-bottom: 4px double var(--dourado);
}

.hero-content h1 {
    font-size: 3rem;
    text-shadow: 0 0 15px var(--dourado);
    max-width: 800px; /* Impede que o texto se espalhe muito */
    margin: 0 auto;
    margin-bottom: 10px;
}


/* ----------------------------------------------------------------------------
   5. SEÇÕES DE CONTEÚDO
   ---------------------------------------------------------------------------- */
.content-section {
    padding: 60px 20px;
    max-width: 850px; 
    margin: 0 auto;   /* Centraliza as seções */
    text-align: center;
    display: grid;
    grid-template-columns: 1fr;
}

/* Variações de "caixa" usadas para destacar blocos de texto, cada uma com
   uma cor de borda diferente (dourado / branco / roxo) */
.gold-bg {
    background-color: var(--preto-suave);
    border: 4px double var(--dourado);
    border-radius: 10px;
    margin-bottom: 20px;
    backdrop-filter: blur(5px);
}

.white-bg {
    background-color: var(--preto-suave);
    border: 4px double white;
    border-radius: 10px;
    margin-bottom: 20px;
    backdrop-filter: blur(5px);
}

.purple-bg {
    background-color: var(--preto-suave);
    border: 4px double purple;
    border-radius: 10px;
    margin-bottom: 20px;
    backdrop-filter: blur(5px);
}

.purple-bg h2, .purple-bg h3 {
    color: purple;
}


/* ----------------------------------------------------------------------------
   6. GRIDS DE MEMBROS (CULTISTAS E VIGILANTES)
   ----------------------------------------------------------------------------
   Os dois grids (.grid-membros e .grid-vigilantes) usam o mesmo layout;
   só a cor dos títulos muda (roxo para cultistas, branco para vigilantes).
   ---------------------------------------------------------------------------- */
.grid-membros,
.grid-vigilantes {
    display: flex;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    flex-wrap: wrap;        /* Permite que os cards quebrem a linha */
    gap: 20px;              /* Espaço entre os cards */
    justify-content: center; /* Centraliza os cards horizontalmente */
    margin-top: 30px;
    max-width: 100%;
}

.grid-membros h2, .grid-membros h3 {
    color: purple;
}

.grid-vigilantes h2, .grid-vigilantes h3 {
    color: white;
}


/* ----------------------------------------------------------------------------
   7. CARDS DE MEMBROS (CULTISTAS = .cardM / VIGILANTES = .cardV)
   ----------------------------------------------------------------------------
   Estrutura idêntica nos dois — único diferencial é a cor da borda
   (roxo para cultistas, branco para vigilantes).
   ---------------------------------------------------------------------------- */
.cardM,
.cardV {
    padding: 20px;
    background: #111;
    backdrop-filter: blur(5px);
    transition: transform 0.3s, box-shadow 0.3s;

    width: 250px;           /* Largura fixa para os cards ficarem iguais */
    min-height: 150px;      /* Altura mínima para manter simetria */
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 8px;     /* Um leve arredondado combina com o tom onírico */
}

.cardM {
    border: 1px solid purple;
}

.cardV {
    border: 1px solid white;
}

.cardM h3,
.cardV h3 {
    margin-bottom: 10px;    /* Espaço entre o nome e a descrição */
    font-size: 1.2rem;
}

.cardM p,
.cardV p {
    font-size: 0.9rem;      /* Descrição levemente menor para destaque do nome */
    color: #bbb;
}

.cardM:hover,
.cardV:hover {
    transform: translateY(-10px);
    box-shadow: 0 0 15px var(--dourado);
    transition: all 0.5s ease-in-out;
}


/* ----------------------------------------------------------------------------
   8. SEÇÃO REBELDE (VIGILANTES) E RODAPÉ
   ---------------------------------------------------------------------------- */
.rebel-section {
    border-top: 2px dashed white;
    margin-top: 50px;
    color: #ccc;
}

.rebel-section h2 {
    color: white;
}

footer {
    text-align: center;
    padding: 40px;
    font-size: 0.8rem;
    border-top: 4px double #333;
}


/* ----------------------------------------------------------------------------
   9. IMAGENS, FUNDOS E BOTÕES DECORATIVOS
   ---------------------------------------------------------------------------- */
.placeholder-img {
    align-items: center;
}

/* Botão circular central (ex.: botão de ativação do modo aniversário) */
.botao_circular {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border-color: goldenrod;
    background-color: black;
    color: goldenrod;
    cursor: pointer;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s;
    margin: 20px auto;
    margin-top: 55px;

    /* Pulso contínuo de brilho dourado, ver @keyframes pulsar mais abaixo */
    animation: pulsar 2s infinite;
}

@keyframes pulsar {
    0% { box-shadow: 0 0 0 0px rgba(212, 175, 55, 0.7); }
    100% { box-shadow: 0 0 0 20px rgba(212, 175, 55, 0); }
}

.fundo1 {
    background-image: url("imagens/logo.webp");
    background-size: auto;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)); /* Escurece 50% */
}

.fundo2 {
    background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
        url("imagens/logo.webp");
    background-size: cover; /* Ajusta para preencher a tela toda sem distorcer */
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;

    max-width: 1200px; /* Define uma largura máxima confortável */
    margin: 0 auto;    /* Centraliza o bloco inteiro no meio da tela */
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8); /* Dá profundidade nas laterais */
    min-height: 100vh; /* Garante que o fundo cubra a altura toda da tela */
}

.sim {
    vertical-align: middle;
    height: 2em; /* Faz a altura da imagem igual à altura da fonte (texto) */
    width: auto; /* Mantém a proporção da largura */
    margin-left: 8px; /* Espaço pequeno entre texto e imagem */
}

.texto {
    padding-left: 40px;
    padding-right: 40px;
}


/* ----------------------------------------------------------------------------
   10. BOTÕES DE NAVEGAÇÃO ENTRE PÁGINAS (ONÍRICO / VIGILANTE)
   ---------------------------------------------------------------------------- */
.centralizar-botao {
    margin-top: 40px;
    display: flex;
    justify-content: center;
}

.btn-onirico, .btn-vigilante {
    padding: 15px 30px;
    text-decoration: none;
    font-family: 'Cinzel', serif;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 5px;
    transition: 0.3s;
}

.btn-onirico {
    border: 2px solid var(--dourado);
    color: var(--dourado);
}

.btn-vigilante {
    border: 2px solid var(--dourado);
    color: var(--dourado);
}

.btn-vigilante:hover {
    background-color: white#ff4d4d;
    color: white;
    box-shadow: 0 0 20px var(--dourado);
}


/* ----------------------------------------------------------------------------
   11. LAYOUT "INFO" COM IMAGEM AO LADO DO TEXTO (TELAS GRANDES)
   ----------------------------------------------------------------------------
   Em telas largas (769px+), as seções de apresentação (líder, vigilantes,
   cultistas) ficam lado a lado com a respectiva imagem.
   ---------------------------------------------------------------------------- */
@media (min-width: 769px) {
    .lider-info,
    .vigilantes-info,
    .cultistas-info {
        display: flex;
        align-items: center;
        gap: 30px;
        text-align: left;
    }

    .placeholder-img img {
        max-width: 200px;
        margin-bottom: 30px;
        border-radius: 50%; /* Estilo medalhão */
    }

    .placeholder-imgC img,
    .placeholder-imgV img {
        max-width: 130px;
        margin-left: 50px;
        margin-bottom: 30px;
    }

    /* No desktop o hambúrguer fica escondido */
    .nav-hamburguer {
        display: none;
    }
}


/* ----------------------------------------------------------------------------
   12. MENU HAMBÚRGUER
   ----------------------------------------------------------------------------
   Visível só no mobile (max 768px). O botão alterna a classe "nav-aberto"
   no <nav>, que exibe o menu vertical. O JS correspondente está em recado.js.
   ---------------------------------------------------------------------------- */

/* Agrupa logo + ícone lado a lado */
.nav-marca {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Botão hambúrguer — escondido no desktop, visível no mobile */
.nav-hamburguer {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 200;
}

/* As três barras do ícone hambúrguer */
.nav-hamburguer span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--dourado);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Animação hambúrguer → X quando o menu está aberto */
.nav-aberto .nav-hamburguer span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}
.nav-aberto .nav-hamburguer span:nth-child(2) {
    opacity: 0;
}
.nav-aberto .nav-hamburguer span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}


/* ----------------------------------------------------------------------------
   13. RESPONSIVIDADE — CELULARES E TABLETS (até 768px)
   ---------------------------------------------------------------------------- */
@media (max-width: 768px) {

    /* O header fixo no mobile tem altura variável dependendo do menu aberto.
       Usamos um padding menor que serve de base; o JS ajusta dinamicamente
       se necessário, mas 70px cobre o header fechado na maioria dos celulares. */
    body {
        padding-top: 70px;
    }

    /* --- NAV / HAMBÚRGUER ------------------------------------------------ */
    .nav-hamburguer {
        display: flex; /* Mostra o botão hambúrguer */
    }

    nav {
        flex-wrap: wrap;
        gap: 0;
        padding: 0;
        position: relative;
    }

    /* Os links ficam escondidos por padrão; aparecem quando nav tem .nav-aberto */
    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        padding: 12px 0 8px;
        gap: 0;
        border-top: 1px solid rgba(212, 175, 55, 0.3);
        margin-top: 10px;
    }

    .nav-links.aberto {
        display: flex;
    }

    .nav-links li {
        text-align: center;
        padding: 10px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .nav-links li:last-child {
        border-bottom: none;
    }

    nav ul li a {
        margin-left: 0;
        font-size: 1rem;
        padding: 4px 0;
        display: block;
    }

    /* --- HERO ------------------------------------------------------------ */
    #hero {
        height: 45vh;
    }

    .hero-content h1 {
        font-size: 1.6rem;
        padding: 0 16px;
    }

    .hero-content p {
        font-size: 0.95rem;
        padding: 0 16px;
    }

    /* --- SEÇÕES DE CONTEÚDO --------------------------------------------- */
    .content-section {
        padding: 28px 14px;
        max-width: 100%;
    }

    /* Textos com padding lateral excessivo: reduz para mobile */
    .texto {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Imagem de perfil do líder: empilha acima do texto no mobile */
    .lider-info,
    .vigilantes-info,
    .cultistas-info {
        flex-direction: column;
        text-align: center;
    }

    .placeholder-img img {
        max-width: 130px;
        margin: 0 auto 20px;
    }

    .placeholder-imgC img,
    .placeholder-imgV img {
        max-width: 100px;
        margin: 0 auto 16px;
    }

    /* --- GRIDS DE CARDS -------------------------------------------------- */
    /* Os cards da home ficam em coluna única no mobile */
    .grid-membros,
    .grid-vigilantes {
        flex-direction: column;
        align-items: center;
    }

    /* Cards com largura fixa: deixa ocupar a largura disponível */
    .cardM,
    .cardV {
        width: 100%;
        max-width: 340px;
    }

    /* --- BOTÕES ---------------------------------------------------------- */
    .botao_circular {
        width: 120px;
        height: 120px;
        font-size: 15px;
        margin-top: 30px;
    }

    .btn-onirico,
    .btn-vigilante {
        padding: 12px 20px;
        font-size: 0.85rem;
    }

    /* --- FUNDO ----------------------------------------------------------- */
    /* background-attachment: fixed trava no iOS/Safari mobile.
       No mobile usamos scroll, que é o comportamento correto. */
    .fundo2 {
        background-attachment: scroll;
    }
}