/* ==========================================================================
       1. RESET E CONFIGURAÇÕES BASE
       ========================================================================== */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    :root {
        /* Cores */
        --cor-primaria: #2F4F46; /* Verde escuro */
        --cor-secundaria: #5A786F; /* Verde médio */
        --cor-destaque: #D29B32; /* Amarelo/Ouro */
        --cor-destaque-hover: #E7BA63; /* Amarelo/Ouro claro */
        --cor-fundo-claro: #FFFFFF; /* Branco */
        --cor-fundo-alternativo: #F7F5ED; /* Bege claro */
        --cor-texto-claro: #FFFFFF; /* Branco */
        --cor-texto-escuro: var(--cor-primaria);
        --cor-texto-secundario: var(--cor-secundaria);
        --cor-borda: var(--cor-destaque);
        --cor-icone-footer: var(--cor-destaque-hover);
        --cor-link-footer: var(--cor-texto-claro);
        --cor-borda-footer: var(--cor-secundaria);
        --cor-texto-copy: var(--cor-texto-secundario);
        --cor-icone-social: var(--cor-texto-claro);
        --cor-whatsapp-float: #25d366;

        /* Fontes */
        --fonte-titulo: 'Aclonica', sans-serif;
        --fonte-conteudo: 'Poppins', sans-serif;

        /* Tamanhos de Fonte */
        --tamanho-base-fonte: 16px;
        --tamanho-fonte-h1: 1.75rem;
        --tamanho-fonte-h2: 2rem;
        --tamanho-fonte-h3: 1.125rem;
        --tamanho-fonte-p: 1rem;
        --tamanho-fonte-botao: 1rem;
        --tamanho-fonte-faq-sumario: 1.125rem;
        --tamanho-fonte-footer: 0.9375rem;
        --tamanho-icone-social: 1.3rem;
        --tamanho-fonte-copy: 0.875rem;

        /* Espaçamentos */
        --espacamento-xs: 0.5rem;  /* 8px */
        --espacamento-s: 1rem;     /* 16px */
        --espacamento-m: 1.25rem;  /* 20px */
        --espacamento-l: 1.875rem; /* 30px */
        --espacamento-xl: 2.5rem;  /* 40px */
        --espacamento-xxl: 3.75rem;/* 60px */
        --espacamento-botao-y: 0.625rem;
        --espacamento-botao-x: 1.25rem;

        /* Bordas */
        --raio-borda-padrao: 8px;
        --raio-borda-grande: 12px;
    }
    html {
        font-size: var(--tamanho-base-fonte);
        scroll-behavior: smooth; /* Adicionado para rolagem suave */
    }
    body {
        min-height: 100dvh;
        font-family: var(--fonte-conteudo);
        background-color: var(--cor-fundo-claro);
        color: var(--cor-texto-escuro);
        display: flex;
        flex-direction: column;
        line-height: 1.6;
    }

    /* ==========================================================================
       2. CLASSES UTILITÁRIAS
       ========================================================================== */
    .texto-principal { color: var(--cor-texto-escuro); }
    .texto-secundario { color: var(--cor-texto-secundario); }
    .fonte-titulo { font-family: var(--fonte-titulo); }
    .fonte-conteudo { font-family: var(--fonte-conteudo); }
    .texto-destaque { color: var(--cor-destaque); font-weight: bold; }

    /* ==========================================================================
       3. COMPONENTES GERAIS (Cabeçalho, Botões, Cards, etc.)
       ========================================================================== */
    
    /* Cabeçalho (Header) */
    .topo {
        background-color: var(--cor-destaque);
        padding: var(--espacamento-s) var(--espacamento-m);
        position: sticky; /* Torna o cabeçalho fixo no topo ao rolar */
        top: 0;
        z-index: 1000;
        width: 100%;
    }
    .container-header {
        max-width: 1000px;
        margin: 0 auto;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    .logo h1 {
        font-family: var(--fonte-titulo);
        color: var(--cor-texto-claro);
        font-size: var(--tamanho-fonte-h1);
        margin: 0; /* Remove margens do h1 dentro do logo */
    }
    .menu-navegacao .menu {
        list-style: none;
        display: flex;
        gap: var(--espacamento-m);
    }
    .menu-navegacao .menu a {
        color: var(--cor-texto-claro);
        text-decoration: none;
        font-weight: 600;
        padding: var(--espacamento-xs) 0;
        transition: color 0.3s;
    }
    .menu-navegacao .menu a:hover {
        color: var(--cor-primaria);
    }
    .menu-toggle {
        display: none; /* Escondido por padrão, aparece em telas menores */
        background: none;
        border: none;
        font-size: 2rem;
        color: var(--cor-texto-claro);
        cursor: pointer;
    }

    /* Títulos e Parágrafos */
    h1, h2, h3 {
        font-family: var(--fonte-titulo);
        color: var(--cor-texto-escuro);
        margin-top: var(--espacamento-l);
        margin-bottom: var(--espacamento-m);
        line-height: 1.3;
    }
    h2 {
        font-size: var(--tamanho-fonte-h2);
        text-align: center;
        font-weight: bold;
    }
    h3 { font-size: var(--tamanho-fonte-h3); }
    p {
        font-size: var(--tamanho-fonte-p);
        margin-bottom: var(--espacamento-m);
    }
    
    /* Botões Gerais */
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--espacamento-xs);
        background-color: var(--cor-destaque);
        color: var(--cor-texto-claro);
        padding: 0.75rem var(--espacamento-s);
        border-radius: var(--raio-borda-padrao);
        text-decoration: none;
        margin-top: var(--espacamento-s);
        font-size: var(--tamanho-fonte-botao);
        transition: background 0.3s ease;
        font-family: var(--fonte-conteudo);
        border: none;
        cursor: pointer;
        font-weight: bold;
        text-align: center;
    }
    .btn:hover, .btn:focus {
        background-color: var(--cor-destaque-hover);
    }

    /* ==========================================================================
       4. SEÇÕES ESPECÍFICAS
       ========================================================================== */
    main { flex-grow: 1; }
    section {
        padding: var(--espacamento-l) var(--espacamento-m);
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
        width: 90%;
    }

    /* Seção Hero */
    .hero {
        background-color: var(--cor-fundo-alternativo);
        text-align: center;
        padding: var(--espacamento-xl) var(--espacamento-m);
        width: 100%;
        max-width: none;
        margin-bottom: 0;
        margin-top: 0;
    }
    .hero h2 { margin-top: 0; margin-bottom: 1rem; }
    .hero p {
        color: var(--cor-texto-escuro);
        font-weight: 600;
        text-align: center;
        max-width: 600px;
        margin: 0 auto var(--espacamento-m);
    }
    .hero .btn {
        margin: 60px auto 0 auto;
        display: block;
        max-width: 250px;
    }

    /* História e Propósito */
    #historia, #proposito { text-align: justify; }
    #historia strong, #proposito strong { font-weight: bold; }
    #historia em, #proposito em { color: var(--cor-texto-secundario); font-style: italic; }

    /* Galeria de Fotos */
    #galeria { padding-top: var(--espacamento-xl); padding-bottom: var(--espacamento-xl); }
    .galeria-wrapper { position: relative; max-width: 1000px; margin: 0 auto; }
    .galeria-container { display: flex; justify-content: center; align-items: center; gap: 1rem; overflow: hidden; }
    .galeria-wrapper .seta {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        font-size: 2.5rem;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 50%;
        border: none;
        cursor: pointer;
        z-index: 10;
        padding: 0.2rem 0.7rem;
        color: var(--cor-primaria);
        transition: background 0.3s;
    }
    .galeria-wrapper .seta:hover { background: rgba(255, 255, 255, 1); }
    .seta.esquerda { left: 0.5rem; }
    .seta.direita { right: 0.5rem; }
    .slide {
        width: 30%;
        opacity: 0.7;
        filter: grayscale(100%);
        border-radius: var(--raio-borda-grande);
        cursor: pointer;
        transition: all 0.5s ease-in-out;
    }
    .slide.active {
        width: 40%;
        opacity: 1;
        filter: none;
        transform: scale(1.05);
    }
    
    /* Características dos Ovos */
    #ovos p { text-align: justify; }

    /* Simulador de Planos */
    #simulador-planos { text-align: center; }
    #simulador-planos > p { color: var(--cor-texto-secundario); margin-bottom: var(--espacamento-l); }
    .btn-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--espacamento-s);
        margin-bottom: var(--espacamento-m);
    }
    .btn-container .btn { padding: 0.75rem var(--espacamento-m); }
    #info {
        background-color: var(--cor-fundo-claro);
        border: 1px solid var(--cor-borda);
        border-radius: var(--raio-borda-grande);
        padding: var(--espacamento-m);
        max-width: 500px;
        margin: var(--espacamento-xl) auto;
        font-size: var(--tamanho-fonte-p);
        color: var(--cor-texto-escuro);
        box-shadow: 0 0 10px rgba(0,0,0,0.05);
        display: none; /* Oculto por padrão */
        text-align: center;
    }

    /* Pagamento e Entrega */
    #pagamento p, #entrega p { text-align: justify; }

    /* FAQ */
    .faq-section { max-width: 800px; margin: var(--espacamento-xl) auto; padding: 0 var(--espacamento-m); }
    details {
        background: var(--cor-fundo-alternativo);
        border: 1px solid var(--cor-borda);
        border-radius: var(--raio-borda-padrao);
        margin-bottom: var(--espacamento-s);
        padding: var(--espacamento-s) var(--espacamento-m);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
        transition: background 0.3s ease;
    }
    summary {
        font-weight: 600;
        font-size: var(--tamanho-fonte-faq-sumario);
        cursor: pointer;
        outline: none;
        color: var(--cor-texto-escuro);
        list-style: none; /* Remove a seta padrão */
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    summary::-webkit-details-marker { display: none; } /* Remove a seta padrão no Chrome/Safari */
    summary::after {
        content: '+';
        font-size: 1.4em;
        color: var(--cor-destaque);
        transition: transform 0.3s ease;
        flex-shrink: 0;
        margin-left: var(--espacamento-s);
    }
    details[open] { background: var(--cor-destaque-hover); }
    details[open] summary { color: var(--cor-texto-claro); }
    details[open] summary::after { content: '−'; color: var(--cor-texto-claro); }
    details .faq-content { padding-top: var(--espacamento-s); }
    details .faq-content p {
        color: var(--cor-texto-escuro);
        margin-bottom: var(--espacamento-s);
        text-align: left;
    }
    details .faq-content p:last-child { margin-bottom: 0; }
    
    /* Contato */
    #contato { text-align: center; }
    .contato-btns {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
        margin-top: 20px;
    }


    /* ==========================================================================
       5. RODAPÉ
       ========================================================================== */
    footer {
        background-color: var(--cor-primaria);
        color: var(--cor-texto-claro);
        padding: var(--espacamento-xl) 5% var(--espacamento-m);
        margin-top: auto; /* Empurra para o final da página */
        text-align: center;
    }
    .footer-grid {
        display: flex;
        flex-wrap: wrap;
        gap: var(--espacamento-l);
        justify-content: space-around;
        text-align: left;
        max-width: 1200px;
        margin: 0 auto var(--espacamento-l);
    }
    .footer-column {
        flex: 1 1 200px;
        min-width: 180px;
        margin-bottom: var(--espacamento-m);
    }
    .footer-column h4 {
        color: var(--cor-destaque-hover);
        margin-bottom: var(--espacamento-s);
        font-size: var(--tamanho-fonte-h3);
        font-weight: 600;
    }
    .footer-column p, .footer-column li {
        margin-bottom: var(--espacamento-xs);
        font-size: var(--tamanho-fonte-footer);
        line-height: 1.6;
    }
    .footer-column ul.contact-list { list-style: none; padding: 0; margin: 0; }
    .contact-list li { display: flex; align-items: center; margin-bottom: var(--espacamento-xs); }
    .contact-list i { margin-right: var(--espacamento-xs); width: 1.2em; text-align: center; color: var(--cor-icone-footer); }
    .footer-column a {
        color: var(--cor-link-footer);
        text-decoration: none;
        transition: color 0.3s ease;
    }
    .footer-column a:hover, .footer-column a:focus { text-decoration: underline; color: var(--cor-destaque-hover); }
    .map-container { overflow: hidden; border-radius: var(--raio-borda-padrao); line-height: 0; margin-top: var(--espacamento-s); }
    .footer-map { border: 0; width: 100%; height: 200px; display: block; }
    .footer-copyright {
        margin-top: var(--espacamento-l);
        padding-top: var(--espacamento-m);
        border-top: 1px solid var(--cor-borda-footer);
        text-align: center;
        font-size: var(--tamanho-fonte-copy);
        color: var(--cor-texto-copy);
        width: 100%;
    }
    .footer-copyright p { margin: 0; }

    /* Botão Flutuante WhatsApp */
    .whatsapp-float {
        position: fixed;
        bottom: 20px;
        right: 20px;
        background-color: var(--cor-whatsapp-float);
        color: white;
        padding: 14px; /* Ajustado para ícone quadrado */
        border-radius: 50px;
        text-decoration: none;
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        z-index: 999;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .whatsapp-float svg {
        width: 25px;
        height: 25px;
        fill: white;
    }

    /* ==========================================================================
       6. RESPONSIVIDADE
       ========================================================================== */
    /* Telas Maiores (Tablets) */
    @media (min-width: 600px) {
        .hero h2 { font-size: 2.25rem; }
        .hero p { font-size: 1.1rem; }
        .receitas-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
        section { padding: var(--espacamento-xl) var(--espacamento-l); }
        h2 { margin-left: var(--espacamento-m); margin-right: var(--espacamento-m); }
    }
    
    /* Telas Médias/Grandes (Desktop) */
    @media (min-width: 769px) {
        footer { padding-left: 8%; padding-right: 8%; }
        .footer-column { margin-bottom: 0; }
    }
    
    /* Telas Largas (Desktop Largo) */
    @media (min-width: 992px) {
        .footer-grid { gap: var(--espacamento-xl); }
        h2 { margin-left: var(--espacamento-xl); margin-right: var(--espacamento-xl); }
    }
    
    /* Telas Mobile e Tablet (onde o menu hambúrguer aparece) */
    @media (max-width: 768px) {
        .menu-toggle { display: block; } /* Mostra o botão hambúrguer */
        .menu-navegacao .menu {
            display: none; /* Esconde o menu por padrão */
            flex-direction: column;
            background-color: var(--cor-destaque);
            width: 100%;
            padding: var(--espacamento-s);
            position: absolute;
            top: 100%; /* Posiciona abaixo do header */
            left: 0;
            z-index: 999;
            border-top: 1px solid var(--cor-primaria);
        }
        .menu-navegacao .menu.show {
            display: flex; /* Mostra o menu quando a classe .show é adicionada */
        }
        .menu-navegacao .menu li {
            margin: var(--espacamento-xs) 0;
            text-align: center;
        }
        section { width: 95%; }
        h2 { margin-left: var(--espacamento-s); margin-right: var(--espacamento-s); }
    }