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

body{
    font-family: Arial, Helvetica, sans-serif;
    color:#fff;
    background:#000;
}

/* HEADER - LOGO À ESQUERDA E TÍTULO */
.topo {
    background: linear-gradient(180deg, #3a1f0b, #1a0f08);
    padding: 20px;
    box-shadow: 0 0 25px #ffb703;
}

.container-header {
    display: flex;          
    align-items: center;    
    justify-content: flex-start; 
    max-width: 1200px;      
    margin: 0 auto;         
    gap: 20px;              
}

.logo-maior {
    width: 110px;           
    height: auto;
    display: block;
    filter: drop-shadow(0 0 10px #ffb703);
}

.titulo-topo {
    color: #ffb703;
    text-shadow: 0 0 10px #ffb703;
    font-size: 2.2rem;      
    margin: 0;
}

/* FUNDO - EXIBINDO TODA A IMAGEM NAS LATERAIS SEM CORTES */
.fundo-principal{
    background:
        linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)),
        url('../imagens/terca-brega2025.jpg') no-repeat center center;
    background-size: 100% 100%; /* Estica a imagem para preencher toda a lateral e altura */
    background-attachment: fixed;
    min-height: 100vh;
    padding: 20px;
}

/* CONTEÚDO */
.container{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
    gap:20px;
}

/* CARD */
.card{
    background:rgba(0,0,0,0.85);
    border:2px solid #ffb703;
    border-radius:12px;
    padding:15px;
    box-shadow:0 0 15px #ffb703;
}

.card img{
    width:100%;
    border-radius:10px;
    margin-bottom:10px;
}

/* COMENTÁRIOS */
.coment{
    background:#1c1c1c;
    border-left:4px solid #ffb703;
    padding:8px;
    margin:6px 0;
    font-size:14px;
}

/* FORM */
input, textarea{
    width:100%;
    padding:8px;
    margin-top:6px;
    border-radius:6px;
    border:none;
}

textarea{
    resize:none;
    height:70px;
}

button{
    background:#ffb703;
    color:#000;
    font-weight:bold;
    border:none;
    padding:10px;
    border-radius:8px;
    cursor:pointer;
    margin-top:8px;
}

button:hover{
    background:#ffd166;
}

/* WHATSAPP */
.whatsapp{
    position:fixed;
    bottom:20px;
    right:20px;
    z-index:999;
}

.whatsapp img{
    width:60px;
    filter: drop-shadow(0 0 10px #25d366);
}

/* ANIMAÇÃO */
.animate{
    animation:fade .6s ease;
}

@keyframes fade{
    from{opacity:0; transform:translateY(15px);}
    to{opacity:1;}
}
/* FOOTER PROFISSIONAL */
.rodape-elegante {
    background: #121212;
    border-top: 2px solid #ffb703;
    padding: 20px 0;
    margin-top: 40px;
    color: #fff;
}

.container-footer {
    display: flex;
    justify-content: space-between; /* Empurra os itens para as extremidades */
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Estilo do Botão WhatsApp à Esquerda */
.btn-whats-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    transition: 0.3s;
}

.btn-whats-footer img {
    width: 35px;
    filter: drop-shadow(0 0 5px #25d366);
}

.btn-whats-footer:hover {
    color: #25d366;
}

/* Endereço Centralizado */
.footer-info p {
    font-size: 14px;
    opacity: 0.8;
    margin: 0;
}

/* Logo do Desenvolvedor à Direita */
.footer-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

.logo-dev {
    height: 30px; /* Tamanho elegante para o seu logo */
    width: auto;
    filter: grayscale(1) brightness(2); /* Deixa o logo branco/discreto */
    transition: 0.3s;
}

.logo-dev:hover {
    filter: none; /* Volta a cor original no hover */
}

/* Ajuste para Celulares */
@media (max-width: 768px) {
    .container-footer {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    .footer-brand {
        align-items: center;
    }
}
/* Botão WhatsApp Flutuante Estilo JG Soft */
.btn-whatsapp-flutuante {
    position: fixed;
    bottom: 30px;
    left: 30px; /* Lado oposto ao voltar ao topo */
    z-index: 99;
    background-color: #25d366;
    color: #fff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    text-align: center;
    font-size: 35px;
    line-height: 60px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    transition: 0.3s;
    text-decoration: none;
    animation: pulsar-whats 2s infinite;
}

.btn-whatsapp-flutuante:hover {
    transform: scale(1.1);
    background-color: #128c7e;
    color: #fff;
}

/* Animação de Pulso */
@keyframes pulsar-whats {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* Ajuste para Celulares */
@media (max-width: 768px) {
    .btn-whatsapp-flutuante {
        width: 50px;
        height: 50px;
        font-size: 30px;
        line-height: 50px;
        bottom: 20px;
        left: 20px;
    }
}