style.css

body {
    font-family: Arial, sans-serif;
    background-color: #f4f6f0;
    color: #333333;
    margin: 20px;
}

.cabecalho {
    background-color: #d2ddbe;
    color: darkgreen;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 12px 20px;
    border-radius: 5px;
}

.cabecalho-marca {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cabecalho-imagem {
    width: 150px;
    height: 90px;
    object-fit: cover;
    border-radius: 5px;
}

.cabecalho-titulo {
    color: #414c2f;
}

.cabecalho-subtitulo {
    font-size: 14px;
    color: #9f7f40;
}

.cabecalho-lista {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.cabecalho-lista-item {
    display: block;
}

.cabecalho a {
    color: #19240f;
    font-family: Calibri, sans-serif;
    font-size: 20px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 4px;
}

/*  SECOES  */
.secao {
    background-color: #ffffff;
    padding: 20px;
    margin-top: 20px;
    border-radius: 5px;
}

.secao h2 {
    color: #414c2f;
    margin-bottom: 10px;
}

.conteudo {
    display: flex;
    gap: 20px;
    align-items: center;
}

.texto {
    flex: 1;
    line-height: 1.6;
}

.imagem {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.imagem img {
    max-width: 250px;
    height: auto;
    border-radius: 5px;
}

/* xxxxxxxxxxxxx secao CONTATO xxxxxxxxxxxxxx */
.fale-conosco {
    /*  22/09  */
    max-width: 600px;
    margin: 0 auto 2em;
    padding: clamp(18px, 4vw, 28px);
    background-color: #FFFEF9;
    border-radius: 5px;
    box-shadow: 8px 18px #2e431c2e;
}

.fale-conosco h2,
/* titulo e paragrafo */
.fale-conosco>p {
    margin-bottom: 15px;
    text-align: center;
}

.fale-conosco form {
    /* formulario  */
    display: flex;
    flex-direction: column;
}

.fale-conosco label {
    /* label = legendas */
    margin-top: 10px;
    margin-bottom: 5px;
    color: #52702f;
    font-weight: bold;
}

.fale-conosco input,
/* caixas de entrada de texto  */
.fale-conosco textarea {
    padding: 10px;
    border: 1px solid #d2ddbe;
    border-radius: 4px;
    font-family: Arial, sans-serif;
    font-size: 16px;
}

/* 22/09 */
.fale-conosco input::placeholder,
/* ajuda que é escrita dentro dos inputs */
.fale-conosco textarea::placeholder {
    color: #5C614C;
}

.fale-conosco textarea {
    resize: vertical;
}

.fale-conosco input:focus,
/* onde ficara o foco / cursor */
.fale-conosco textarea:focus {
    outline: 2px solid #C5973E;
}

.fale-conosco button {
    /* botao da secao contato */
    margin-top: 20px;
    padding: 12px;
    border: none;
    border-radius: 4px;
    color: #FFFFFF;
    background-color: #52702F;
    font-size: 16px;
    cursor: pointer;
}

.fale-conosco button:hover {
    /* efeito do botao ao passar o mouse */
    background-color: #2E431C;
}

.fale-conosco button:disabled {
    /* botao desabilitado  */
    background-color: #808080;
    cursor: wait;
}

.fale-conosco .aviso-formulario {
    /* alerta de aviso do form */
    margin-top: 12px;
    margin-bottom: 0;
    color: #5C614C;
    font-size: 13px;
}

.fale-conosco .sucesso {
    /* aviso de sucesso do form */
    color: #236730;
    font-weight: bold;
}

.fale-conosco .erro {
    /* aviso de erro */
    color: #912E23;
    font-weight: bold;
}

.botao-tema {
    border: none;
    border-radius: 4px;
    padding: 8px 10px;
    color: #fcf8ec;
    background-color: #52702f;
    font-family: Calibri, sans-serif;
    font-size: 18px;
    cursor: pointer;
}

.botao-tema:hover {
    background-color: #2e431c;
}


.voltar {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 10;
    /* Ajuste: usamos flex para centralizar a seta dentro de um botão redondo. */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    color: #FFFFFF;
    background-color: #aecc7e;
    border-radius: 50%;
    text-decoration: none;
    font-weight: bold;
    font-size: 24px;
    line-height: 1;
    opacity: 0.85;
    box-shadow: 0 3px 9px #2e431c47;
}

.voltar:hover {
    background-color: #2e431c;
    opacity: 1;
}

.botao-tema {
    border: none;
    border-radius: 4px;
    padding: 8px 10px;
    color: #fcf8ec;
    background-color: #52702f;
    font-family: Calibri, sans-serif;
    font-size: 18px;
    cursor: pointer;
}

.botao-tema:hover {
    background-color: #2e431c;
}



footer {
    min-height: 7em;
    color: var(--verde-profundo);
    background-color: var(--verde-claro);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    border-radius: 5px;
}

footer p {
    line-height: 1.5;
}






/*14/09 - TEMA ESCURO */

body.tema-escuro {
    background-color: #1C2218;
    color: #E8EFDA;
}

body.tema-escuro .cabecalho a {
    color: #FFFFFF;
}

body.tema-escuro .cabecalho {
    background-color: #304127;
    color: #E8EFDA;
}

body.tema-escuro .cabecalho-subtitulo {
    color: #DEB25B;
}

body.tema-escuro .cabecalho-titulo,
body.tema-escuro .fale-conosco label {
    color: #AECC7E;
}

body.tema-escuro .cabecalho a {
    color: #FFFFFF;
}

body.tema-escuro .cabecalho a:hover {
    background-color: #405231;
    color: #E8EFDA;
}

body.tema-escuro .botao-tema,
body.tema-escuro .fale-conosco button,
body.tema-escuro .voltar {
    color: #FFFFFF;
    background-color: #AECC7E;
}

body.tema-escuro .botao-tema:hover,
body.tema-escuro .fale-conosco button:hover,
body.tema-escuro .voltar:hover {
    background-color: #E8EFDA;
    color: #1C2218;
}

body.tema-escuro .descricao h2,
body.tema-escuro .fale-conosco h2,
body.tema-escuro footer {
    color: #E8EFDA;
}

body.tema-escuro .secao,
body.tema-escuro .fale-conosco {
    background-color: #262F22;
    box-shadow: 8px 8px 18px #00000059;
}

body.tema-escuro .fale-conosco input,
body.tema-escuro .fale-conosco textarea {
    border: 1px solid #304127;
    background-color: #FFFFFF;
    color: #1C2218;
}

body.tema-escuro .fale-conosco input::placeholder,
body.tema-escuro .fale-conosco textarea::placeholder,
body.tema-escuro .fale-conosco .aviso-formulario {
    color: #CBD4BE;
}

body.tema-escuro .fale-conosco input:focus,
body.tema-escuro .fale-conosco textarea:focus {
    outline: 2px solid #DEB25B;
}

body.tema-escuro .fale-conosco .sucesso {
    color: #8FD397;
}

body.tema-escuro .fale-conosco .erro {
    color: #E88474;
}

body.tema-escuro footer {
    background-color: #304127;
}

body.tema-escuro .fale-conosco button:disabled {
    background-color: #696F64;
    color: #FFFFFF;
}

body.tema-escuro .descricao {
    text-shadow: 2px 2px 5px #00000059;
}

body.tema-escuro .voltar {
    box-shadow: 0 3px 9px #00000073;
}