/*
==================================================
TEMA ROCK/MOTO (Corpo do portal e Cards)
==================================================
*/

/* Variáveis para tema */
:root {
    --cor-primaria: #ff0000; /* Vermelho Fogo */
    --cor-secundaria: #333333; /* Cinza Escuro */
    --cor-fundo: #0A0A0A; /* Preto Carvão */
    --cor-texto: #F0F0F0; /* Branco Sujo */
    --fonte-titulo: 'Oswald', sans-serif; /* Fonte forte para cards */
    --fonte-rock: 'Rock Salt', cursive; /* Para o header */
    --fonte-corpo: 'Roboto Mono', monospace; /* Fonte com estilo de máquina de escrever */
    /* Adicionando variável para o brilho Neon (Amarelo/Ouro) para consistência */
    --cor-neon: #FFD700; 
}

/* Estilos Globais */
html, body { 
    background-color: var(--cor-fundo); 
    color: var(--cor-texto); 
    margin:0; 
    padding:0; 
    min-height:100vh; 
    display:flex; 
    flex-direction:column; 
    font-family: var(--fonte-corpo); 
}
h1,h2,h3,h4,h5,h6, .header-title, .modal-title { 
    font-family: var(--fonte-rock); 
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

/* ---------------- HEADER ---------------- */

.header-banner { 
    background: linear-gradient(to bottom, #111, #000); 
    border-bottom: 3px solid var(--cor-primaria);
    
       }
.header-title { 
    font-size: 3rem; 
    color: var(--cor-primaria);
    /* Efeito neon */
    text-shadow:
        0 0 5px var(--cor-primaria), /* Sutil com a cor primária */
        0 0 15px var(--cor-primaria),
        0 0 30px var(--cor-neon); /* Usando o Amarelo/Ouro para o glow espalhado */
    animation:glow 2s ease-in-out infinite alternate;
}
.header-subtitle{ color: #ccc; font-family: var(--fonte-corpo); }

@keyframes glow { 
    from { text-shadow:0 0 5px var(--cor-primaria),0 0 10px var(--cor-primaria); } 
    to { text-shadow:0 0 10px var(--cor-primaria),0 0 20px #ff3333,0 0 30px #ff3333; } 
}



/* ---------------- LAYOUT E CARDS ---------------- */

.card-grid {
    display: flex;
    gap: 30px; 
    max-width: 1200px;
    margin: 0 auto;
    justify-content: center;
    flex-wrap: wrap; 
}

/* Base para todos os cards - ATUALIZADO PARA FUNDO DE IMAGEM */
.section-box {
    flex: 1 1 300px; 
    min-height: 250px;
    text-align: center;
    background-color: #1a1a1a; /* Cor de fallback */
    border: 3px solid var(--cor-primaria);
    border-radius: 8px; 
    padding: 30px 20px; 
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.5); 
    transition: transform 0.3s, box-shadow 0.3s;
    max-width: 350px;

    /* Propriedades da Imagem de Fundo */
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
    position: relative; /* Essencial para o overlay */
    overflow: hidden; 
}

/* Overlay para escurecer a imagem e melhorar a legibilidade do texto */
.section-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Cor de overlay preto semi-transparente */
    z-index: 1; 
}

/* Garante que o conteúdo do card fique acima do overlay */
.section-box > * {
    position: relative;
    z-index: 2;
}

/* Regras específicas para cada card com suas imagens de fundo */
#biker {
    background-image: url('imagens/biker-fundo.jpg'); /* ATUALIZADO */
}
#rock {
    background-image: url('imagens/rock-fundo.jpg'); /* ATUALIZADO */
}
#tattoo {
    background-image: url('imagens/tattoo-fundo.jpg'); /* ATUALIZADO */
}


.section-box:hover {
    transform: translateY(-5px); 
    box-shadow: 0 5px 20px rgba(255, 0, 0, 0.8);
}
.section-box h2 { 
    color: var(--cor-primaria); 
    margin-bottom: 15px; 
    font-family: var(--fonte-titulo); 
    font-size: 1.8rem; 
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 1); /* Sombra para o título sobre o fundo */
}
.section-box p {
    color: var(--cor-texto); 
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}
.section-box .btn-danger, .section-box .list-link { 
    margin: 5px; 
    width: calc(50% - 10px); 
    display: inline-block; 
}
.list-link { text-decoration: none; }

/* Estilo para os ícones/figuras dos cards */
.card-icon {
    font-size: 3rem; 
    color: var(--cor-texto); 
    margin-bottom: 15px;
    display: block;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.7), 0 0 20px rgba(255, 255, 255, 0.3); /* Efeito neon leve */
}

/* ---------------- BOTÕES ---------------- */

.btn-danger { 
    background: linear-gradient(to bottom, #ff0000, #800000); 
    border:1px solid #ff0000; 
    text-shadow:0 0 5px #000; 
    transition:all 0.3s ease; 
    font-family: var(--fonte-titulo);
    letter-spacing: 1px;
    font-weight: 700;
}
.btn-danger:hover { 
    transform:translateY(-2px); 
    box-shadow:0 5px 15px rgba(255, 0, 0, 0.4); 
}
.btn-secondary { 
    background-color: #555;
    border-color: #555;
    color: #fff;
}

/* ---------------- MODAL (Foco na Legibilidade) ---------------- */

#cadastroModal .modal-content { 
    background-color:#fff; 
    color:#000; 
    border-radius:10px; 
    border:1px solid #ccc; 
    box-shadow:0 8px 25px rgba(0,0,0,0.5);
}

/* Garante que o texto da label seja preto no fundo branco do modal */
#cadastroModal .form-label { 
    color:#000 !important; 
    font-weight: 700;
} 
.required-field::after { 
    content:" *"; 
    color:#ff0000; 
}

#cadastroModal .form-control { 
    color:#000; 
    background-color:#f9f9f9; 
    border:1px solid #ccc; 
    box-shadow:inset 0 1px 3px rgba(0,0,0,0.1); 
    transition:all 0.2s;
}
#cadastroModal .form-control:focus { 
    border-color:#ff0000; 
    box-shadow:0 0 8px rgba(255,0,0,0.3) inset; 
    outline:none; 
}
#cadastroModal .form-control::placeholder { 
    color:#555; 
}

/* ---------------- OUTROS ELEMENTOS ---------------- */

/* Footer */
.footer { 
    background-color:#111; 
    border-top:1px solid var(--cor-primaria); 
    margin-top:auto; 
}

/* Tela de Senha */
#passwordOverlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: #000; 
    color: #fff; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    flex-direction: column; 
    z-index: 9999; 
}
#passwordOverlay input { 
    padding: 10px; 
    font-size: 1rem; 
    margin-top: 10px; 
    border: 2px solid #ff0000; 
    background: #111; 
    color: #fff; 
}
#passwordOverlay button { 
    margin-top: 10px; 
    padding: 10px 20px; 
    background: #ff0000; 
    border: none; 
    color: #fff; 
    font-weight: bold; 
    cursor: pointer; 
}

/* ---------------- ESTILOS DE DESTAQUE NEON (NOVOS) ---------------- */

/* TÍTULO DO QUADRO DE AVISOS (COM EFEITO NEON) */
.quadro-avisos-titulo {
    color: var(--cor-primaria); /* Vermelho Fogo */
    font-weight: 900;
    
    /* Efeito de Brilho Neon */
    text-shadow: 
        0 0 5px var(--cor-primaria),
        0 0 15px var(--cor-neon, #FFD700),
        0 0 30px var(--cor-neon, #FFD700);
}

/* ---------------- FOOTER - ITENS CHAVE COM VERMELHO SÓLIDO (FINAL) ---------------- */

/* Link "NOSSA PROPOSTA" e ícone de email */
.footer a.link-destaque-proposta,
.footer a.link-destaque-proposta:link,
.footer a.link-destaque-proposta:visited,
.footer a.link-destaque-proposta i.fa-envelope {
    color: var(--cor-primaria) !important;
    font-weight: bold !important;
    text-decoration: none !important;
    font-size: 1.05rem;
    text-shadow: none !important;
    transition: all 0.3s ease-in-out;
}

/* Ícone Instagram */
.footer i.fa-instagram {
    color: var(--cor-primaria) !important;
    text-shadow: none !important;
}

/* Hover geral */
.footer a.link-destaque-proposta:hover,
.footer a.link-destaque-proposta:active,
.footer a.link-destaque-proposta:hover i.fa-envelope,
.footer i.fa-instagram:hover {
    color: #FF6666 !important;
    text-shadow: none !important;
}

/* ===========================
   MENU PRINCIPAL
=========================== */

.nav-principal {
    width: 100%;
    background: #000;
    border-bottom: 2px solid var(--cor-primaria);
    padding: 10px 0;
    display: flex;
    justify-content: center;
}

.nav-principal .menu {
    list-style: none;
    display: flex;
    gap: 30px;
    margin: 0;
    padding: 0;
}

.nav-principal .menu > li > a {
    color: var(--cor-primaria);
    font-size: 1.2rem;
    font-weight: bold;
    text-decoration: none;
    transition: 0.2s;
}

.nav-principal .menu > li > a:hover {
    color: #fff;
    text-shadow: 0 0 10px var(--cor-primaria);
}

/* Submenu */
.submenu {
    position: relative;
}

.submenu-items {
    display: none;
    position: absolute;
    background: #000;
    border: 1px solid var(--cor-primaria);
    list-style: none;
    padding: 10px 0;
    margin: 0;
    top: 100%;
    left: 0;
    min-width: 180px;
    z-index: 999;
}

.submenu-items li {
    padding: 5px 15px;
}

.submenu-items li a {
    color: #ccc;
    text-decoration: none;
    display: block;
    transition: 0.2s;
}

.submenu-items li a:hover {
    color: var(--cor-primaria);
}

.submenu:hover .submenu-items {
    display: block;
}

/* ===========================
   RESPONSIVIDADE DO MENU
=========================== */

@media (max-width: 768px) {
    .nav-principal {
        padding: 8px 0;
    }

    .nav-principal .menu {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .submenu-items {
        position: relative;
        border-left: none;
        border-right: none;
        border-bottom: none;
    }
}

/* 🔥 BORDA DE FOGO — VERSÃO FINAL E COMPATÍVEL COM FUNDOS DIFERENTES */

.section-box {
    overflow: visible !important;
    position: relative;
    z-index: 2;

    /* Mantém o fundo ORIGINAL de cada card (#biker, #rock, #tattoo) */
    background-clip: padding-box !important;

    /* Borda de fogo */
    border: 20px solid transparent !important;
    border-image-source: url('../img/border-image.jpg') !important;
    border-image-slice: 80 !important;
    border-image-width: 20px !important;
    border-image-repeat: round !important;
    border-image-outset: 0 !important;

    /* Glow externo */
    box-shadow:
        0 0 25px rgba(255, 0, 0, 0.9),
        0 0 45px rgba(255, 0, 0, 0.6),
        0 0 70px rgba(255, 0, 0, 0.4) !important;
}

/* Mantém overlay atrás do fogo */
.section-box::before {
    z-index: 1 !important;
}

/* Conteúdo acima de tudo */
.section-box > * {
    z-index: 3 !important;
    position: relative;
}

/* 🔥 Restaura cor e brilho ORIGINAL dos títulos das culturas */
.section-box h2 {
    color: var(--cor-titulo-card) !important;
    text-shadow: 3px 3px 5px rgba(0, 0, 0, 1), var(--neon-glow-sutil) !important;
}

/* Impede quebra de linha nos títulos dos cards */
.section-box h2 {
    white-space: nowrap !important;
}



/* ---------------- RESPONSIVIDADE DOS CARDS ---------------- */

@media (max-width: 992px) {
    .card-grid {
        flex-direction: column;
        align-items: center;
    }
    .section-box {
        max-width: 90%;
    }
}