/* ==========================================================================
   MEI Brasil Assessoria — identidade visual do site público
   Faixa de aviso, cabeçalho, menu de serviços, rodapé, botões e WhatsApp flutuante.
   Classes com prefixo site-/mb- para não conflitar com o CSS das páginas de pedido.
   ========================================================================== */

:root {
    /* Cores */
    /* O azul do logo ("MEI BRASIL", #0C326F) fica só no logo: no resto do site ele dava cara de órgão público.
       Cor escura principal desde 26/10/2026: verde-floresta, tirado do verde do logo (mesma matiz, 150°), mais escuro e sóbrio.
       floresta: títulos, links, navegação, menu grande, numeração, bloco da Dívida Ativa e rodapé (11,6:1 com branco; 9,9:1 sobre areia).
       floresta-profundo: faixa de aviso, hovers sobre floresta e texto do botão verde-claro (14,4:1 com branco). */
    --marinho: #0C326F;
    --floresta: #173F2B;
    --floresta-profundo: #0F2D1F;
    --floresta-borda: rgba(23, 63, 43, .08); /* contorno de 1px dos cards areia */
    /* Verdes de CTA: uma família só, tirada do verde do logo ("Assessoria", #256A46, matiz 149°).
       verde-escuro: botões principais e texto verde sobre branco (6,5:1 com branco; 5,5:1 sobre areia).
       verde-claro: texto, ícones e botões sobre floresta (6,9:1 sobre a floresta; o verde-escuro sobre ela dá só 1,8:1).
       verde-suave: fundo de ícones e etiquetas sobre branco. */
    --verde-escuro: #256A46;
    --verde-escuro-hover: #1B5034;
    --verde-claro: #83D8AC;
    --verde-suave: #E6F2EA;
    --tinta: #1A2620;
    --cinza: #56615B;
    --fundo: #F5F4EF;
    --linha: #E2DED3;
    --branco: #FFFFFF;
    --whatsapp: #25D366;
    /* Anel de foco: floresta sobre fundo claro (11,6:1 com branco; 9,9:1 sobre areia). Sobre fundo escuro, verde-claro ou branco.
       Até 26/10/2026 era azul (#2F6FEB), a única cor azul que sobrava fora do logo. */
    --foco: #173F2B;

    /* Superfícies e texto do site público.
       areia: superfície dos cards (um pouco mais escura desde 26/10/2026, para o card aparecer sem hover); areia-escura: quadrado dos
       ícones, contorno do card de ajuda. texto-suave: cinza-esverdeado para texto corrido sobre branco (6,5:1) e sobre areia (5,5:1). */
    --areia: #EFECE4;
    --areia-escura: #E2DED2;
    --areia-borda: #E2DED3;
    --texto: #1A2620;
    --texto-suave: #55615A;
    --sobre-escuro: #D5E3D9;       /* texto sobre floresta (8,9:1) */
    --sobre-escuro-suave: #A9C2B2; /* texto secundário sobre floresta (6,2:1) */

    /* Tipografia */
    --fonte: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    /* Títulos de seção: condensada forte, sempre em caixa alta */
    --fonte-display: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', Impact, sans-serif;

    /* Raios */
    --raio-pilula: 999px;
    --raio-card: 24px;
    --raio-bloco: 28px;
    --raio-sm: 12px;
    --raio-icone: 16px;

    /* Sombras */
    --sombra-1: 0 1px 2px rgba(23, 63, 43, .06), 0 4px 12px rgba(23, 63, 43, .06);
    --sombra-2: 0 16px 40px rgba(23, 63, 43, .14);
    /* Hover dos cards: sombra suave em duas camadas, quase sem cor */
    --sombra-hover: 0 12px 28px -6px rgba(15, 45, 31, .16), 0 3px 8px rgba(15, 45, 31, .06);

    /* Layout: 1200px de conteúdo, margens de 20px (celular) e 32px (desktop) */
    --container: 1200px;
    --margem: 20px;
    --secao: 64px;
    --altura-header: 60px;
    --altura-aviso: 48px; /* celular: área de toque de 48px */
}

@media (min-width: 1024px) {
    :root { --margem: 32px; --secao: 96px; --altura-header: 72px; --altura-aviso: 40px; }
}

/* Âncoras (#servicos etc.) não ficam escondidas atrás do cabeçalho fixo */
html { scroll-padding-top: calc(var(--altura-header) + 16px); }
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

body {
    font-family: var(--fonte);
    color: var(--tinta);
    -webkit-font-smoothing: antialiased;
}

/* As páginas de pedido usam `* { font-family }`; cabeçalho, rodapé e flutuante mantêm a fonte da marca */
.site-aviso, .site-aviso *,
.site-header, .site-header *,
.site-footer, .site-footer *,
.site-wa, .site-wa * {
    font-family: var(--fonte);
}

.site-skip {
    position: absolute; left: 16px; top: -100px; z-index: 2000;
    background: var(--floresta); color: var(--branco);
    padding: 12px 20px; border-radius: var(--raio-pilula);
    font-weight: 700; text-decoration: none;
}
.site-skip:focus { top: 12px; }
.site-skip:hover { background: var(--floresta-profundo); }
.site-skip:focus-visible { outline: 3px solid var(--verde-escuro); outline-offset: 2px; }

.site-wrap {
    width: 100%;
    max-width: calc(var(--container) + 2 * var(--margem));
    margin: 0 auto;
    padding: 0 var(--margem);
}

/* Foco visível
   Base para qualquer link, botão ou sanfona do site (inclusive das páginas de pedido, que não definem foco): anel de 3px.
   :where() não pesa na especificidade, então qualquer regra de foco de uma página ou componente continua valendo. */
:where(a, button, summary, input[type="submit"], input[type="button"], [tabindex]):focus-visible {
    outline: 3px solid var(--foco);
    outline-offset: 2px;
}
.site-aviso a:focus-visible, .site-aviso button:focus-visible,
.site-header a:focus-visible, .site-header button:focus-visible,
.site-footer a:focus-visible, .site-wa:focus-visible,
.mb-btn:focus-visible, .mb-focus:focus-visible {
    outline: 3px solid var(--foco);
    outline-offset: 3px;
}
/* Sobre a floresta, o azul do foco some: anel em verde-claro (6,9:1) */
.site-aviso a:focus-visible, .site-aviso button:focus-visible,
.site-footer a:focus-visible, .site-footer .mb-btn:focus-visible { outline-color: var(--verde-claro); }

/* --------------------------------------------------------------------------
   Botões: um principal (verde) e um secundário (contorno floresta)
   Estados (regra do site, conferida no headless com contraste de 3:1 ou mais contra o fundo em volta):
   - fundo claro: o hover escurece um pouco e o toque (:active) escurece mais um passo;
   - fundo escuro (floresta, foto do topo): o hover vira fundo branco com texto e ícone em floresta; o toque, verde-suave;
   - foco: anel de 3px afastado do botão (floresta no claro, verde-claro ou branco no escuro);
   - :active também desce 1px, para o toque ter resposta mesmo sem hover (celular).
   -------------------------------------------------------------------------- */
.mb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 28px;
    border-radius: var(--raio-pilula);
    border: 2px solid transparent;
    font-family: var(--fonte);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.mb-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.mb-btn:active { transform: translateY(1px); }

.mb-btn--primary { background: var(--verde-escuro); color: var(--branco); }
.mb-btn--primary:hover { background: var(--verde-escuro-hover); color: var(--branco); }
.mb-btn--primary:active { background: var(--floresta); color: var(--branco); }
/* Sobre fundo floresta: verde-claro do logo com texto floresta-profundo (8,7:1); o botão tem 6,9:1 contra a floresta em volta.
   (O verde-escuro sobre a floresta teria só 1,8:1: o botão sumiria no fundo.) */
.mb-btn--claro { background: var(--verde-claro); color: var(--floresta-profundo); }
.mb-btn--claro:hover { background: var(--branco); color: var(--floresta); }
.mb-btn--claro:active { background: var(--verde-suave); color: var(--floresta); }

.mb-btn--secondary { background: var(--branco); color: var(--floresta); border-color: var(--floresta); }
.mb-btn--secondary:hover { background: var(--areia); color: var(--floresta); }
.mb-btn--secondary:active { background: var(--areia-escura); color: var(--floresta); }
.mb-btn--secondary .icone-wa { color: var(--verde-escuro); }

.mb-btn--sm { min-height: 44px; padding: 0 20px; font-size: 16px; }
.mb-btn--sm svg { width: 18px; height: 18px; }
.mb-btn--full { width: 100%; }

/* --------------------------------------------------------------------------
   Cabeçalho de seção: etiqueta pequena + título + apoio (padrão das referências)
   -------------------------------------------------------------------------- */
.mb-etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--verde-escuro);
}
.mb-etiqueta::before {
    content: "";
    width: 20px; height: 2px;
    border-radius: 2px;
    background: currentColor;
}
.mb-etiqueta--clara { color: var(--verde-claro); }

/* Títulos de seção: Barlow Condensed ExtraBold, caixa alta, em floresta; de 32px (celular) a 52px (desktop) */
.mb-titulo {
    margin: 0;
    font-family: var(--fonte-display);
    font-size: clamp(32px, 4vw, 52px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--floresta);
    text-wrap: balance;
}
.mb-apoio {
    margin: 16px 0 0;
    font-size: 17px;
    line-height: 1.55;
    color: var(--texto-suave);
    max-width: 36em;
}
@media (min-width: 1024px) {
    .mb-apoio { font-size: 18px; }
}

/* --------------------------------------------------------------------------
   Etiqueta (tag) e selo de pagamento
   -------------------------------------------------------------------------- */
.mb-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--raio-pilula);
    background: var(--verde-suave);
    color: var(--verde-escuro-hover);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}

.mb-selo {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    line-height: 1.45;
    color: var(--cinza);
}
.mb-selo__icone {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--verde-suave);
    color: var(--verde-escuro);
    display: flex; align-items: center; justify-content: center;
}
.mb-selo__icone svg { width: 18px; height: 18px; }
.mb-selo strong { color: var(--tinta); font-weight: 700; }
.mb-selo__metodos {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: 8px;
    list-style: none; padding: 0;
}
.mb-selo__metodos li {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--linha);
    border-radius: var(--raio-pilula);
    background: var(--branco);
    font-size: 14px; font-weight: 600; color: var(--tinta);
    margin: 0;
}
.mb-selo__metodos img { width: 16px; height: 16px; object-fit: contain; }

/* --------------------------------------------------------------------------
   Faixa de aviso (acima do cabeçalho)
   -------------------------------------------------------------------------- */
.site-aviso {
    background: var(--floresta-profundo);
    color: var(--branco);
    font-size: 14px;
    line-height: 1.3;
}
.aviso-fechado .site-aviso { display: none; }
.site-aviso__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--altura-aviso);
    position: relative;
    padding-right: calc(var(--margem) + 40px);
}
.site-aviso__link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--altura-aviso);
    color: var(--sobre-escuro);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
}
.site-aviso__link strong { color: var(--branco); font-weight: 700; }
.site-aviso__acao {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
    color: var(--verde-claro);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    flex-shrink: 0;
}
.site-aviso__link:hover .site-aviso__acao { color: var(--branco); }
.site-aviso__chevron { width: 16px; height: 16px; flex-shrink: 0; }
.site-aviso__link:hover .site-aviso__chevron { color: var(--branco); }
.site-aviso__curto { display: none; }
.site-aviso__fechar {
    position: absolute;
    right: calc(var(--margem) - 10px);
    top: 50%;
    transform: translateY(-50%);
    width: 40px; height: var(--altura-aviso);
    display: flex; align-items: center; justify-content: center;
    border: 0; background: transparent; color: var(--sobre-escuro-suave);
    border-radius: 50%;
    cursor: pointer;
}
/* Fundo escuro: hover branco com o X em floresta; toque em verde-suave */
.site-aviso__fechar:hover { color: var(--floresta); background: var(--branco); }
.site-aviso__fechar:active { color: var(--floresta); background: var(--verde-suave); }
.site-aviso__fechar svg { width: 18px; height: 18px; }
@media (max-width: 719px) {
    .site-aviso { font-size: 14px; }
    .site-aviso__inner { justify-content: flex-start; }
    .site-aviso__longo { display: none; }
    .site-aviso__curto { display: inline; }
    .site-aviso__fechar { width: 48px; right: calc(var(--margem) - 14px); }
}
/* Celular estreito: o texto curto quebra em duas linhas em vez de cortar o "Consultar" */
@media (max-width: 429px) {
    .site-aviso__link { flex-wrap: wrap; column-gap: 6px; row-gap: 0; padding: 4px 0; white-space: normal; }
}

/* --------------------------------------------------------------------------
   Cabeçalho
   -------------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--branco);
    border-bottom: 1px solid var(--areia-borda);
    transition: box-shadow .2s ease;
}
.site-header.is-scrolled { box-shadow: 0 6px 20px rgba(15, 45, 31, .08); }

.site-header__bar {
    display: flex;
    align-items: center;
    height: var(--altura-header);
    position: relative;
}

.site-logo { display: flex; align-items: center; flex-shrink: 0; height: 100%; }
.site-logo img { height: 34px; width: auto; display: block; }
@media (min-width: 1024px) {
    .site-logo img { height: 40px; }
}

.site-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px;
    margin-left: auto;
    margin-right: -10px;
    border: 0; border-radius: var(--raio-sm);
    background: transparent;
    color: var(--floresta);
    cursor: pointer;
}
.site-toggle svg { width: 28px; height: 28px; }
.site-toggle:hover { background: var(--areia); }
.site-toggle:active { background: var(--areia-escura); }
.site-toggle .icone-fechar { display: none; }
.site-toggle[aria-expanded="true"] .icone-abrir { display: none; }
.site-toggle[aria-expanded="true"] .icone-fechar { display: block; }

.site-menu { list-style: none; margin: 0; padding: 0; }
.site-menu li { margin: 0; padding: 0; }

.site-menu__link,
.site-menu__trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--floresta);
    text-decoration: none;
    background: transparent;
    border: 0;
    cursor: pointer;
}
.site-menu__trigger svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Itens do menu de serviços (comuns a desktop e celular) */
.site-mega__lista { list-style: none; margin: 0; padding: 0; }
.site-mega__item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    text-decoration: none;
    color: var(--texto);
}
.site-mega__icone {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: var(--raio-sm);
    background: var(--areia-escura);
    color: var(--floresta);
    display: flex; align-items: center; justify-content: center;
}
.site-mega__icone svg { width: 22px; height: 22px; }
.site-mega__texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.site-mega__nome { font-size: 16px; font-weight: 700; color: var(--floresta); line-height: 1.3; }
.site-mega__desc { font-size: 14px; color: var(--texto-suave); line-height: 1.4; }
/* Preço fixo numa linha só, discreto: 1px maior que a descrição. As formas de pagamento ficam uma vez só, no rodapé do menu. */
.site-mega__preco { font-size: 15px; font-weight: 600; color: var(--verde-escuro); line-height: 1.4; white-space: nowrap; font-variant-numeric: tabular-nums; }
.site-mega__titulo {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--texto-suave);
}
.site-mega__ajuda-titulo { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.25; color: var(--floresta); }
.site-mega__ajuda-texto { margin: 8px 0 16px; font-size: 15px; line-height: 1.5; color: var(--texto-suave); }
.site-mega__rodape {
    display: flex; align-items: center; gap: 8px;
    margin: 0;
    font-size: 14px; font-weight: 600;
    color: var(--texto-suave);
}
.site-mega__rodape svg { width: 16px; height: 16px; color: var(--verde-escuro); flex-shrink: 0; }

/* Ações do cabeçalho: duas pílulas gêmeas, iguais em altura (36px), fonte (14px, 600), ícone (16px), borda (1.5px) e padding;
   só a largura muda com o texto. "Acompanhar pedido" com contorno floresta e prancheta; "Falar com especialista" verde cheio.
   Na gaveta do celular, as duas viram botões de largura total com 48px. */
.site-acoes__btn {
    height: 36px;
    min-height: 36px;
    padding: 0 14px;
    gap: 7px;
    border-width: 1.5px;
    font-size: 14px;
    font-weight: 600;
}
.site-acoes__btn svg { width: 16px; height: 16px; }
.site-acoes__btn--rastreio { background: var(--branco); color: var(--floresta); border-color: var(--floresta); }
.site-acoes__btn--rastreio:hover { background: var(--areia); color: var(--floresta); }
.site-acoes__btn--rastreio:active { background: var(--areia-escura); color: var(--floresta); }

/* --- Celular e tablet (até 1179px): gaveta abaixo do cabeçalho ---
   Ordem: "Acompanhar pedido" e "Falar com especialista" (largura total, 48px), depois a lista: Início, Serviços em sanfona,
   Dívida Ativa, Blog e Dúvidas.
   Fecha pelo X (o próprio botão do menu), com um toque fora (fundo escuro) ou com Esc; o fundo da página não rola. */
.site-menu__nota { display: none; }
@media (max-width: 1179px) {
    .site-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        max-height: calc(100vh - var(--altura-header));
        max-height: calc(100dvh - var(--altura-header));
        overflow-y: auto;
        overscroll-behavior: contain;
        background: var(--branco);
        border-top: 1px solid var(--areia-borda);
        box-shadow: 0 16px 32px rgba(15, 45, 31, .18);
        border-radius: 0 0 var(--raio-card) var(--raio-card);
        padding: 16px var(--margem) 20px;
    }
    .site-nav.is-open { display: block; }
    html.menu-aberto, html.menu-aberto body { overflow: hidden; }

    .site-gaveta-fundo {
        position: fixed;
        inset: 0;
        z-index: 999; /* logo abaixo do cabeçalho (1000) */
        background: rgba(10, 30, 20, .5);
        touch-action: none;
    }
    .site-gaveta-fundo[hidden] { display: none; }

    /* Os dois botões do topo, em largura total e com 48px (mesma borda de 1.5px do desktop) */
    .site-gaveta-acoes { display: flex; flex-direction: column; gap: 10px; }
    .site-acoes__btn { width: 100%; height: 48px; min-height: 48px; font-size: 16px; }
    .site-acoes__btn svg { width: 20px; height: 20px; }
    .site-acoes { display: none; }

    /* Lista: linhas de 56px alinhadas à esquerda, separadas por fios */
    .site-menu { margin-top: 12px; }
    .site-menu__item { border-bottom: 1px solid var(--areia-borda); }
    .site-menu__item:last-child { border-bottom: 0; }
    .site-menu__link,
    .site-menu__trigger {
        width: 100%;
        min-height: 56px;
        padding: 8px 4px;
        justify-content: space-between;
        font-size: 17px;
        text-align: left;
    }
    .site-menu__link:hover, .site-menu__trigger:hover { color: var(--floresta-profundo); background: var(--areia); }
    .site-menu__link:active, .site-menu__trigger:active { background: var(--areia-escura); }
    .site-menu__link, .site-menu__trigger { border-radius: var(--raio-sm); }
    .site-menu__trigger .chevron { width: 22px; height: 22px; color: var(--floresta); transition: transform .15s ease; }
    .site-menu__trigger[aria-expanded="true"] .chevron { transform: rotate(180deg); }
    .site-menu__nota { display: inline; font-size: 14px; font-weight: 600; color: var(--verde-escuro); }

    /* Sanfona de serviços: ícone, nome e preço fixo (mesmo formato compacto do menu grande, sem a descrição) */
    .site-mega { display: none; padding: 0 0 12px; }
    .site-mega.is-open { display: block; }
    .site-mega__li--divida { display: none; } /* Dívida Ativa tem linha própria logo abaixo */
    .site-mega__titulo { margin: 4px 0 6px; padding-left: 4px; font-size: 14px; }
    .site-mega__grupo + .site-mega__grupo .site-mega__titulo { margin-top: 14px; }
    .site-mega__lista { display: flex; flex-direction: column; gap: 6px; }
    .site-mega__item {
        align-items: center;
        min-height: 60px;
        padding: 8px 12px;
        border-radius: 14px;
        background: var(--areia);
    }
    .site-mega__item:hover { background: var(--areia-escura); }
    .site-mega__item:active { background: #D6D1C3; } /* um passo abaixo da areia-escura */
    .site-mega__desc, .site-mega__ajuda, .site-mega__rodape { display: none; }
    .site-mega__nome { font-size: 17px; }
    .site-mega__icone { background: var(--branco); }
}
/* --- Desktop (1180px ou mais): logo | navegação centralizada | ações --- */
@media (min-width: 1180px) {
    .site-toggle, .site-gaveta-acoes, .site-gaveta-fundo { display: none; }

    .site-nav { flex: 1; display: flex; align-items: center; gap: 24px; height: 100%; margin-left: 24px; }
    .site-menu { flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px; height: 100%; }
    .site-menu__item { display: flex; align-items: center; height: 100%; }
    .site-acoes { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

    .site-menu__link,
    .site-menu__trigger {
        min-height: 40px;
        padding: 0 14px;
        border-radius: var(--raio-pilula);
    }
    .site-menu__link:hover,
    .site-menu__trigger:hover,
    .site-menu__trigger[aria-expanded="true"] { background: var(--areia); color: var(--floresta); }
    .site-menu__link:active,
    .site-menu__trigger:active { background: var(--areia-escura); }
    .site-menu__trigger .chevron { transition: transform .15s ease; }
    .site-menu__trigger[aria-expanded="true"] .chevron { transform: rotate(180deg); }

    /* Menu grande: painel alinhado ao container, logo abaixo do cabeçalho */
    .site-mega {
        display: none;
        position: absolute;
        top: 100%;
        left: var(--margem);
        right: var(--margem);
        margin-top: 1px;
        background: var(--branco);
        border: 1px solid var(--areia-borda);
        border-top: 0;
        border-radius: 0 0 var(--raio-card) var(--raio-card);
        box-shadow: 0 24px 48px -12px rgba(15, 45, 31, .22);
        overflow: hidden;
    }
    .site-mega.is-open { display: block; }
    .site-mega__inner {
        display: grid;
        grid-template-columns: 1fr 300px;
        gap: 32px;
        padding: 28px 28px 24px;
    }
    .site-mega__grupos { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
    .site-mega__titulo { padding-left: 12px; }
    .site-mega__lista { display: flex; flex-direction: column; gap: 2px; }
    .site-mega__item { padding: 12px; border-radius: var(--raio-icone); transition: background-color .15s ease-out; }
    .site-mega__item:hover { background: var(--areia); }
    .site-mega__item:active { background: var(--areia-escura); }
    .site-mega__item:hover .site-mega__icone { background: var(--areia-escura); }
    .site-mega__item:focus-visible { outline: 3px solid var(--foco); outline-offset: -3px; }
    .site-mega__ajuda {
        align-self: start;
        padding: 24px;
        border-radius: var(--raio-card);
        background: var(--areia);
    }
    .site-mega__rodape {
        padding: 14px 40px;
        border-top: 1px solid var(--areia-borda);
        background: #FAFAF7;
    }
}
@media (min-width: 1180px) and (max-width: 1279px) {
    .site-nav { margin-left: 16px; gap: 16px; }
    .site-menu__link, .site-menu__trigger { padding: 0 11px; }
    .site-mega__inner { grid-template-columns: 1fr 260px; }
}

/* --------------------------------------------------------------------------
   Rodapé: card floresta arredondado, com a mesma margem lateral do topo da home (10px no celular, 20px a partir de 600px).
   Abre com a chamada final; o aviso de empresa privada fica na linha final, junto do CNPJ.
   -------------------------------------------------------------------------- */
.site-footer {
    margin: auto 10px 10px;
    padding: 0 0 32px;
    border-radius: 20px;
    background: var(--floresta);
    color: var(--sobre-escuro);
    font-size: 16px;
    line-height: 1.6;
}
@media (min-width: 600px) {
    .site-footer { margin: auto 20px 20px; }
}
.site-footer p { margin: 0 0 8px; color: var(--sobre-escuro); font-size: 16px; }
.site-footer strong { color: var(--branco); font-weight: 700; }

.site-footer__cta {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 48px 0 36px;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}
/* Logo abaixo dos H2 das seções (clamp(32px, 4vw, 52px)) em qualquer largura: mínimo, inclinação e máximo menores */
.site-footer__cta-titulo {
    margin: 0;
    padding: 0;
    font-family: var(--fonte-display);
    font-size: clamp(30px, 3.6vw, 46px);
    font-weight: 800;
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: 0;
    color: var(--branco);
    text-wrap: balance;
}
.site-footer .site-footer__cta-texto { margin: 10px 0 0; font-size: 17px; color: var(--sobre-escuro); }
.site-footer__cta .mb-btn { width: 100%; }
@media (min-width: 720px) {
    .site-footer__cta { flex-direction: row; align-items: center; justify-content: space-between; padding: 64px 0 48px; }
    .site-footer__cta .mb-btn { width: auto; }
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 40px 0;
}
@media (min-width: 720px) {
    .site-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
    .site-footer__grid { grid-template-columns: 1.2fr 1fr 1fr 1.3fr; gap: 48px; padding: 56px 0 48px; }
}

.site-footer__logo { display: inline-flex; align-items: center; min-height: 48px; margin-bottom: 10px; }
.site-footer__logo img { height: 38px; width: auto; display: block; filter: brightness(0) invert(1); }

.site-footer__titulo {
    margin: 0 0 10px;
    padding: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--sobre-escuro-suave);
}
.site-footer__titulo--seg { margin-top: 20px; }
.site-footer__lista { list-style: none; margin: 0; padding: 0; }
.site-footer__lista li { margin: 0; padding: 0; }
.site-footer__lista a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    color: var(--branco);
    font-weight: 600;
    text-decoration: none;
}
.site-footer__lista a:hover { color: var(--branco); text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 1024px) {
    .site-footer__lista a { min-height: 40px; } /* mouse: lista mais compacta; no celular fica com 48px de toque */
}
.site-footer__lista svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--verde-claro); }

/* Bloco do logo: frase e CNPJ juntos (4px), ícones das redes 16px abaixo */
.site-footer .site-footer__marca p { margin: 0; }
.site-footer .site-footer__marca .site-footer__cnpj { margin-top: 4px; }
.site-footer__redes { display: flex; gap: 10px; margin-top: 16px; }
.site-footer__redes a {
    width: 48px; height: 48px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .08);
    color: var(--branco);
}
.site-footer__redes a:hover { background: var(--branco); color: var(--floresta); }
.site-footer__redes a:active { background: var(--verde-suave); color: var(--floresta); }
.site-footer__redes svg { width: 20px; height: 20px; }

.site-footer .mb-selo { color: var(--sobre-escuro); margin-top: 16px; }
.site-footer .mb-selo strong { color: var(--branco); }
.site-footer .mb-selo__icone { background: rgba(255, 255, 255, .1); color: var(--verde-claro); }
.site-footer .mb-selo__metodos li { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: var(--branco); }
.site-footer .mb-selo__metodos img { filter: brightness(0) invert(1); } /* logos escuros: brancos sobre a floresta */

.site-footer__base {
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .14);
}
/* Aviso numa linha só no desktop (o container de 1200px comporta) e quebra natural no celular; o CNPJ vem embaixo */
.site-footer .site-footer__base p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--sobre-escuro-suave); text-align: left; }
.site-footer .site-footer__base .site-footer__aviso { margin-bottom: 10px; }

/* --------------------------------------------------------------------------
   WhatsApp flutuante
   -------------------------------------------------------------------------- */
.site-wa {
    position: fixed;
    right: 16px;
    bottom: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--floresta);
    text-decoration: none;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    pointer-events: none; /* só o botão redondo recebe toque; o rótulo invisível não pode cobrir o que está atrás */
}
.site-wa__botao { pointer-events: auto; }
.site-wa__botao {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--whatsapp);
    color: var(--branco);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 24px rgba(10, 30, 20, .25);
}
.site-wa__botao svg { width: 30px; height: 30px; fill: currentColor; }
/* O verde do WhatsApp (#25D366) tem só 2:1 contra o branco; no hover e no toque a bolinha vai para o verde-escuro da marca (6,5:1) */
.site-wa__botao { transition: background-color .15s ease, transform .1s ease; }
.site-wa:hover .site-wa__botao { background: var(--verde-escuro); }
.site-wa:active .site-wa__botao { background: var(--verde-escuro-hover); transform: scale(.96); }
.site-wa__texto {
    background: var(--branco);
    color: var(--floresta);
    font-size: 15px;
    font-weight: 700;
    padding: 8px 14px;
    border-radius: var(--raio-pilula);
    box-shadow: var(--sombra-2);
    white-space: nowrap;
    opacity: 0;
    transform: translateX(8px);
    transition: opacity .15s ease, transform .15s ease;
    pointer-events: none;
}
.site-wa:hover .site-wa__texto,
.site-wa:focus-visible .site-wa__texto { opacity: 1; transform: none; }
.site-wa.is-hidden { opacity: 0; visibility: hidden; transform: translateY(12px); }
.site-wa.is-hidden .site-wa__botao { pointer-events: none; }

@media (min-width: 1024px) {
    .site-wa { right: 24px; bottom: 24px; }
}
@media (max-width: 1023px) {
    .site-wa__botao { width: 52px; height: 52px; }
    .site-wa__botao svg { width: 28px; height: 28px; }
    .site-wa__texto { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .site-header, .site-wa, .site-wa__texto, .mb-btn, .site-menu__trigger .chevron { transition: none !important; }
}

/* --------------------------------------------------------------------------
   Páginas de pedido: estados que faltavam nos botões definidos no CSS de cada página (extra_css).
   Ficam aqui para valer nas 6 páginas de uma vez; :hover/:active pesam mais que as regras de base de lá.
   -------------------------------------------------------------------------- */
.btn-submit:active:not(:disabled) { background-color: var(--floresta); }
.faq-trigger { transition: background-color .15s ease; }
.faq-trigger:hover { background: var(--areia); }
.faq-trigger:active { background: var(--areia-escura); }
.faq-trigger:focus-visible { outline-offset: -3px; }