/* =======================================================
   1. ESTRUTURA DE FUNDO E CONTEÚDO PRINCIPAL
   ======================================================= */
body {
    margin: 0;
    padding: 0;
    background-color: #0b1a1a;
}

.container-fundo {
    position: relative;
    width: 100%;
    min-height: 100vh;
}

/* Fixa o fundo sem quebrar */
.fundo {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    object-fit: cover !important;
    z-index: -1 !important; 
}

/* Container que empilha as seções verticalmente */
main.conteudo-sobreposto {
    display: flex !important;
    flex-direction: column !important; /* Obriga a ficar um embaixo do outro */
    gap: 80px !important; /* Espaço entre os artigos */
    position: relative !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 80px 40px !important;
    box-sizing: border-box !important;
}

/* =======================================================
   2. SEÇÕES LADO A LADO (COMPUTADOR)
   ======================================================= */
section.bloco-artigo {
    display: flex !important;
    flex-direction: row !important; /* Garante imagem e texto lado a lado */
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 60px !important;
}

.lado-imagem {
    flex: 0 0 40% !important;
    display: flex !important;
    justify-content: center !important;
}

.lado-texto {
    flex: 0 0 60% !important;
}

/* =======================================================
   3. IMAGENS CORRIGIDAS
   ======================================================= */
/* Foto redonda (Pedra) */
.imagem-artigo {
    width: 60% !important;
    max-width: 360px !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    box-shadow: 0 0 30px rgba(100, 180, 255, 0.2) !important; 
}

/* Foto retangular (Claudia) */
.imagem-artigo-retangular {
    width: 100% !important;
    max-width: 440px !important;
    height: auto !important;
    display: block !important;
    border-radius: 8px !important;
    
}

/* =======================================================
   4. ESTILIZAÇÃO DOS TEXTOS
   ======================================================= */
.titulo-artigo {
    color: white !important;
    font-family: 'Times New Roman', serif !important;
    font-size: 36px !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    margin-top: 0 !important;
    margin-bottom: 25px !important;
}

.paragrafo-artigo {
    color: #e0e0e0 !important;
    font-family: 'Times New Roman', serif !important;
    font-size: 20px !important;
    line-height: 1.6 !important;
    margin-bottom: 20px !important;
    text-align: justify !important;
}

footer.rodape-site {
    background-color: #010101 !important; /* Força o preto idêntico ao menu superior */
    background-image: none !important;    /* Destrói qualquer herança de imagem de fundo */
    border-top: 1px solid #1a1a1a !important; /* Linha de acabamento cinza escura */
    
    width: 100% !important;
    padding: 30px 20px !important;
    box-sizing: border-box !important;
    
    display: flex !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 999 !important; /* Garante que fique por cima do papel de parede da floresta */
}

/* Alinha o sapinho e o texto na mesma linha horizontal */
.container-rodape {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 25px !important;
    width: 100% !important;
    max-width: 1200px !important;
}

/* Tamanho do Isca */
.img-rodape {
    height: 65px !important;
    width: auto !important;
    display: block !important;
}

/* Estilo da frase única */
.frase-informativa {
    color: #ffffff !important; /* Branco de alto contraste */
    font-family: 'Times New Roman', serif !important;
    font-size: 14px !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    margin: 0 !important;
}

/* =======================================================
   ESTILO DO FORMULÁRIO INTEGRADO NO FINAL DA PÁGINA
   ======================================================= */
section.secao-interativa {
    display: flex !important;
    justify-content: center !important; /* Centraliza a caixa no meio do site */
    width: 100% !important;
    margin-top: 60px !important;
    margin-bottom: 40px !important;
}

/* Caixa do Formulário (Design idêntico ao seu print) */
.caixa-formulario {
    background-color: #1a1a1a !important; /* Cinza escuro do exemplo */
    width: 100%;
    max-width: 500px; /* Limita o tamanho para ficar idêntico ao print */
    padding: 40px !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
}

/* Título Centralizado */
.titulo-formulario {
    color: white !important;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 24px !important;
    text-align: center !important;
    margin: 0 0 10px 0 !important;
}

/* Organização dos inputs */
.grupo-campo {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

/* Textos pretos/brancos acima dos inputs */
.grupo-campo label {
    color: white !important;
    font-family: sans-serif;
    font-weight: 600;
    font-size: 14px !important;
    text-align: left !important;
}

/* Inputs de texto cinzas escuros */
.grupo-campo input {
    background-color: #262626 !important; /* Fundo interno do input */
    border: 1px solid #363636 !important; 
    border-radius: 6px !important;
    padding: 14px 16px !important;
    color: white !important;
    font-family: sans-serif;
    font-size: 14px !important;
    outline: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease !important;
}

/* Realce azul ao clicar no campo */
.grupo-campo input:focus {
    border-color: #0076ff !important;
}

.grupo-campo input::placeholder {
    color: #666666 !important;
}

/* Botão Azul Vibrante */
.botao-enviar {
    background-color: #0076ff !important; /* O azul do seu print */
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 14px !important;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 15px !important;
    cursor: pointer !important;
    width: 100% !important;
    transition: background-color 0.2s ease !important;
    margin-top: 10px !important;
}

.botao-enviar:hover {
    background-color: #005cd6 !important;
}

/* =======================================================
   5. MOBILE RESPONSIVO (CELULAR)
   ======================================================= */
@media (max-width: 768px) {
    main.conteudo-sobreposto {
        padding: 40px 20px !important;
        gap: 50px !important;
    }

    /* Passa para coluna individual no celular */
    section.bloco-artigo {
        flex-direction: column !important;
        gap: 25px !important;
    }

    .lado-imagem, .lado-texto {
        flex: 0 0 100% !important;
        width: 100% !important;
    }

    .imagem-artigo {
        max-width: 240px !important;
    }

    .imagem-artigo-retangular {
        max-width: 100% !important;
    }

    .titulo-artigo {
        font-size: 26px !important;
        text-align: center !important;
    }

    .paragrafo-artigo {
        font-size: 14px !important;
        text-align: left !important;
    }

        footer.rodape-site {
        padding: 20px 15px !important;
    }

    .container-rodape {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .img-rodape {
        height: 55px !important;
    }

    .frase-informativa {
        font-size: 11px !important;
        text-align: center !important;
        letter-spacing: 1px !important;
    }

        section.secao-interativa {
        margin-top: 40px !important;
        padding: 0 10px !important;
    }

    .caixa-formulario {
        padding: 25px 20px !important;
        gap: 18px !important;
    }

    .titulo-formulario {
        font-size: 20px !important;
    }
}