/*
--- Variáveis de Cores ---
*/
:root {
    --color-background-light: #64b307;
    --color-primary-dark: #264624;
    --color-accent-gold: #ffc107;
    --color-spicy-mix: #4a9006;
    --color-text-subtle: #757575;
    --color-text-default: #333333;
    --color-white: #ffffff;
    --color-off-white: #f7f7f7;
    --font-heading: 'Roboto Slab', serif;
    --font-body: 'Open Sans', sans-serif;
}

/*
--- RESET E AJUSTES GLOBAIS ---
*/
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    line-height: 1.6;
    background-color: var(--color-off-white);
    color: var(--color-text-default);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/*
--- Tipografia ---
*/
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-primary-dark);
    font-weight: 700;
}

h1 {
    font-size: 3.2em;
    text-align: center;
    margin-bottom: 0.8em;
}

h2 {
    font-size: 2.4em;
    text-align: center;
    margin-bottom: 0.8em;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-text-subtle);
    display: inline-block;
}

h3 {
    font-size: 1.8em;
}

p {
    font-size: 1.1em;
    margin-bottom: 1em;
    color: var(--color-text-default);
}

/*
--- Links ---
*/
a {
    color: var(--color-primary-dark);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--color-accent-gold);
}

/*
--- Header ---
*/
header {
    background-color: var(--color-background-light); /* Fundo verde vibrante */
    padding: 20px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.logo {
    display: flex;
    align-items: center;
    color: var(--color-white); /* Texto branco para contraste */
    gap: 20px;
    font-weight: bold;
    font-size: 25px;
}

.header-logo {
    max-height: 60px;
    width: auto;
}

.menu-toggle {
    background: none;
    border: none;
    color: var(--color-white); /* Ícone do menu branco */
    font-size: 1.8em;
    display: none;
    cursor: pointer;
}

nav {
    display: flex;
}

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

nav ul li {
    margin-left: 40px;
}

nav ul li a {
    color: var(--color-white); /* Links em branco */
    font-weight: 600;
    font-size: 1.1em;
    padding-bottom: 5px;
    transition: color 0.3s ease;
}

nav ul li a:hover {
    color: var(--color-primary-dark); /* Hover em verde escuro */
}

/*
--- Main Content ---
*/
main {
    max-width: 1280px;
    margin: 40px auto;
    padding: 0 5%;
}

section {
    background-color: var(--color-white);
    padding: 50px;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    margin-bottom: 40px;
    text-align: center;
}

/*
--- Carrossel ---
*/
.container-carrossel {
    width: 90%;
    max-width: 900px; /* Levemente mais largo para melhor visualização */
    margin: 50px auto;
    position: relative;
    text-align: center;
}

.container-carrossel h2 {
    margin-bottom: 25px; /* Ajuste para o espaçamento do título */
    color: var(--color-primary-dark);
    font-size: 2.5em;
    border-bottom: 3px solid var(--color-accent-gold); /* Linha dourada para destaque */
    padding-bottom: 10px;
    display: inline-block; /* Para que a borda de baixo se ajuste ao texto */
}


.carrossel {
    position: relative;
    overflow: hidden;
    height: 500px; /* Aumentado para acomodar imagem e texto melhor */
    border-radius: 12px;
    background-color: var(--color-white); /* Fundo branco para os itens */
    box-shadow: 0 8px 25px rgba(0,0,0,0.15); /* Sombra mais pronunciada */
    display: flex; /* Usar flexbox para centralizar itens */
    align-items: center; /* Centraliza verticalmente */
    justify-content: center; /* Centraliza horizontalmente */
}

.carrossel-item {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    transition: opacity 0.7s ease-in-out; /* Transição mais suave */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px; /* Mais padding interno */
    text-align: center;
    opacity: 0; /* Inicia invisível para a transição */
}

.carrossel-item.active {
    display: flex;
    opacity: 1;
    z-index: 1;
}

/* Moldura e Estilo da Imagem */
.carrossel-item .image-wrapper { /* Novo wrapper para a imagem */
    width: 85%; /* Largura máxima do wrapper da imagem */
    max-width: 450px; /* Largura máxima fixa */
    height: 280px; /* Altura fixa para o wrapper da imagem */
    margin-bottom: 30px; /* Mais espaço entre imagem e texto */
    border: 4px solid var(--color-background-light); /* Borda verde vibrante */
    border-radius: 15px; /* Cantos arredondados na moldura */
    overflow: hidden; /* Garante que a imagem não vaze */
    display: flex; /* Para centralizar a imagem dentro do wrapper */
    align-items: center;
    justify-content: center;
    background-color: var(--color-off-white); /* Fundo leve para o wrapper */
    box-shadow: 0 6px 15px rgba(0,0,0,0.1); /* Sombra suave para a moldura */
}

.carrossel-item img {
    max-height: 100%; /* Permite que a imagem preencha a altura do wrapper */
    max-width: 100%; /* Permite que a imagem preencha a largura do wrapper */
    object-fit: contain; /* Garante que a imagem inteira seja visível, mantendo a proporção */
    border-radius: 10px; /* Leves cantos arredondados na imagem interna */
}

/* Estilo do Texto */
.carrossel-item p {
    font-family: var(--font-body);
    font-size: 1.35em; /* Fonte um pouco maior */
    line-height: 1.7; /* Mais espaçamento entre linhas para legibilidade */
    font-weight: 500; /* Peso da fonte médio */
    color: var(--color-primary-dark); /* Texto em verde escuro para destaque */
    max-width: 80%; /* Limita a largura do texto para melhor leitura */
    margin: 0 auto; /* Centraliza o bloco de texto */
    padding: 10px 20px; /* Adiciona padding ao texto */
    background-color: rgba(255, 255, 255, 0.9); /* Fundo levemente transparente */
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* Sombra suave no texto */
}

.carrossel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(38, 70, 36, 0.7); /* Cor do botão mais escura (primary-dark com transparência) */
    color: var(--color-white);
    border: none;
    font-size: 28px; /* Botões um pouco maiores */
    padding: 12px 18px; /* Mais padding */
    cursor: pointer;
    z-index: 10;
    transition: background 0.3s, transform 0.3s;
    border-radius: 50%;
    display: flex; /* Para centralizar o ícone */
    align-items: center;
    justify-content: center;
}

.carrossel-btn:hover {
    background: var(--color-primary-dark); /* Fundo sólido em primary-dark */
    transform: translateY(-50%) scale(1.1); /* Leve zoom no hover */
}

.carrossel-btn.prev {
    left: 15px; /* Mais afastado da borda */
}

.carrossel-btn.next {
    right: 15px; /* Mais afastado da borda */
}

/*
--- Responsividade do Carrossel ---
*/
@media (max-width: 992px) {
    .container-carrossel {
        width: 95%;
        margin-top: 30px;
    }
    .container-carrossel h2 {
        font-size: 2em;
    }
    .carrossel {
        height: 450px;
    }
    .carrossel-item .image-wrapper {
        width: 90%;
        max-width: 380px;
        height: 250px;
        margin-bottom: 25px;
    }
    .carrossel-item p {
        font-size: 1.2em;
        max-width: 90%;
    }
    .carrossel-btn {
        font-size: 24px;
        padding: 10px 15px;
    }
}

@media (max-width: 600px) {
    .container-carrossel {
        margin-top: 20px;
    }
    .container-carrossel h2 {
        font-size: 1.8em;
        border-bottom-width: 2px;
    }
    .carrossel {
        height: 400px;
    }
    .carrossel-item .image-wrapper {
        width: 95%;
        max-width: 300px;
        height: 200px;
        margin-bottom: 20px;
    }
    .carrossel-item p {
        font-size: 1.1em;
        max-width: 95%;
        padding: 8px 15px;
    }
    .carrossel-btn {
        font-size: 20px;
        padding: 8px 12px;
        top: unset; /* Remove o top 50% */
        bottom: 10px; /* Posiciona os botões na parte inferior em mobile */
        transform: none; /* Remove a transformação de translate Y */
    }
    .carrossel-btn.prev {
        left: 10px;
    }
    .carrossel-btn.next {
        right: 10px;
    }
}


/*
--- Footer ---
*/
footer {
    background-color: var(--color-background-light); /* Fundo verde vibrante */
    color: var(--color-white); /* Texto em branco para contraste */
    padding: 40px 20px;
    text-align: center;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}

.footer-content {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-text-subtle);
}

.footer-contact, .footer-social {
    max-width: 300px;
}

.footer-contact h3, .footer-social h3 {
    color: var(--color-primary-dark); /* Títulos do footer em verde escuro */
    margin-bottom: 15px;
}

.footer-contact p, .footer-contact a {
    color: var(--color-white); /* Texto e links de contato em branco */
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-contact a:hover {
    color: var(--color-primary-dark);
}

.footer-social a {
    color: var(--color-white); /* Ícones sociais em branco */
    font-size: 1.5rem;
    margin: 0 10px;
}

.footer-social a:hover {
    color: var(--color-primary-dark);
}

.footer-bottom {
    margin-top: 20px;
    font-size: 0.9em;
    color: var(--color-text-subtle);
}

/*
--- Responsividade ---
*/

/* Tablets */
@media (max-width: 992px) {
    .header-logo {
        max-height: 50px;
    }

    nav ul li {
        margin-left: 25px;
    }

    .footer-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    section {
        padding: 30px 20px;
    }

    .carrossel {
        height: auto;
    }

    .carrossel-btn {
        top: unset;
        bottom: 10px;
        transform: none;
    }

    .carrossel-btn.prev {
        left: 20px;
    }

    .carrossel-btn.next {
        right: 20px;
    }
}

/* Celulares */
@media (max-width: 600px) {
    h1 {
        font-size: 2em;
    }

    h2 {
        font-size: 1.5em;
    }

    p {
        font-size: 1em;
    }

    .logo {
        font-size: 18px;
        gap: 10px;
    }

    .header-logo {
        max-height: 40px;
    }

    nav {
        display: none;
        flex-direction: column;
        background: var(--color-background-light); /* Menu mobile com o mesmo fundo */
        width: 100%;
        position: absolute;
        top: 70px;
        left: 0;
        padding: 20px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    nav ul {
        flex-direction: column;
        gap: 15px;
    }

    nav ul li {
        margin: 0;
    }

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

    .menu-toggle {
        display: block;
    }

    section {
        padding: 20px 15px;
    }

    .carrossel-item img {
        max-height: 180px;
    }
}