/* =========================================
   Design System & Tokens
========================================= */
:root {
    /* Contraste conferido contra branco pelo criterio WCAG AA (4.5:1). O verde
       e o cinza originais reprovavam (2.87 e 3.48) - texto branco sobre o verde
       antigo ficava dificil de ler justamente nos botoes de acao. Escurecidos o
       minimo necessario, mantendo a matiz. */
    --primary-color: #1e874a;    /* Verde Fresco - era #27ae60, contraste 4.55 */
    --primary-dark: #196f3d;
    --secondary-color: #f2994a;  /* Laranja (Cenoura) - preservado, ver abaixo */
    --bg-color: #f9fbf9;
    --text-dark: #2c3e50;
    /* Escurecido de novo em 31/07/2026, de #6d7979 para #667171.

       O valor anterior foi calibrado contra BRANCO, onde dava 4.51 - passava
       WCAG AA por 0.01. Só que texto secundario nem sempre cai sobre branco:
       sobre --bg-color (#f9fbf9), que e o fundo da propria pagina, o mesmo
       cinza cai para 4.33 e REPROVA. O Lighthouse ja acusava isso; era o
       unico item que segurava a Acessibilidade em 96 em vez de 100.

       #667171 da 5.04 sobre branco e 4.85 sobre --bg-color - passa nos dois,
       com folga suficiente para nao voltar a quebrar no proximo bloco que
       nascer fora de um cartao branco. Ao trocar esta cor, verifique contra os
       DOIS fundos, nunca so o branco. */
    --text-light: #667171;
    --white: #ffffff;
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(255, 255, 255, 0.4);
    --shadow: 0 8px 32px rgba(39, 174, 96, 0.08);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body {
    font-family: 'Outfit', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-dark);
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* =========================================
   Typography & Utilities
========================================= */
h1, h2, h3, h4 {
    font-weight: 800;
    line-height: 1.2;
}

.section-title {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 2rem;
    color: var(--primary-dark);
}

.subtitle {
    text-align: center;
    color: var(--text-light);
    margin-bottom: 2rem;
}

.hidden {
    display: none !important;
}

/* Botões */
.btn-primary, .btn-large, .btn-whatsapp {
    display: inline-block;
    padding: 12px 24px;
    background: var(--primary-color);
    color: var(--white);
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    text-align: center;
}

.btn-large {
    padding: 16px 32px;
    font-size: 1.1rem;
    background: var(--secondary-color);
    /* Texto escuro em vez de branco. Escurecer o laranja para caber texto
       branco daria #a56832 - um marrom que apaga a paleta. Trocando so a cor da
       letra, o laranja continua vivo e o contraste vai de 2.23 para 4.93. */
    color: var(--text-dark);
}

/* Verde do WhatsApp preservado, letra escurecida - mesma decisao ja tomada no
   laranja do .btn-large. Texto branco sobre #25D366 da contraste 1.98, reprova
   fundo em WCAG AA; com --text-dark sobe para 5.53. Escurecer o verde ate caber
   texto branco exigiria #075E54, que deixa de ser o verde reconhecivel do
   aplicativo justamente no botao cuja funcao e ser reconhecido. */
.btn-whatsapp {
    background: #25D366;
    color: var(--text-dark);
    width: 100%;
    margin-top: 20px;
    font-size: 1.1rem;
}

/* Vermelho do iFood, escurecido de #EA1D2C para #D91622.

   Aqui a saida foi o OPOSTO da adotada no verde do WhatsApp e no laranja, e o
   motivo e numerico: o vermelho oficial com texto branco da contraste 4.46 e
   reprova WCAG AA por 1% (o minimo e 4.5). Este botao usa 1.1rem/600, que nao
   se qualifica como "texto grande" - a regra de 3.0 exige 18.66px em peso 700.
   Escurecer a LETRA, que resolveu nos outros dois, aqui piora: #EA1D2C com
   --text-dark da 2.46. Ja escurecer o fundo em 7% leva o contraste a 5.14 e
   mantem a cor lendo como o vermelho do iFood - ao contrario do verde, cujo
   escurecimento necessario (#075E54) descaracterizava a marca. */
.btn-ifood {
    display: inline-block;
    padding: 12px 24px;
    background: #D91622;
    color: var(--white);
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    text-align: center;
    width: 100%;
    margin-top: 20px;
}

/* No hero o botao acompanha o texto e nao ocupa a linha inteira. */
.btn-ifood-hero {
    width: auto;
    margin-top: 0;
    padding: 16px 32px;
}

.btn-ifood:hover {
    background: #b81219;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(217, 22, 34, 0.3);
}

.btn-primary:hover, .btn-large:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    filter: brightness(1.1);
}

.btn-whatsapp:hover {
    background: #1ebe57;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(37, 211, 102, 0.3);
}

/* =========================================
   Header (Glassmorphism)
========================================= */
.glass-header {
    position: fixed;
    top: 0;
    width: 100%;
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--glass-border);
    z-index: 1000;
    padding: 15px 0;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.5rem;
    color: var(--primary-dark);
}

.logo a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: inherit;
    text-decoration: none;
}

/* Altura em em, nao px: acompanha o font-size do .logo se ele mudar. */
.logo-mark {
    height: 1.6em;
    width: auto;
}

.logo span {
    color: var(--secondary-color);
}

nav a {
    text-decoration: none;
    color: var(--text-dark);
    font-weight: 600;
    margin-left: 20px;
    transition: color 0.3s;
}

nav a:hover {
    color: var(--primary-color);
}

/* So existe como conceito no menu mobile (fecha o :target do #menu-mobile).
   Escondido por padrao; a regra que reexibe fica dentro do @media <768px. */
.fechar-menu {
    display: none;
}

/* Menu sanduiche: escondido em desktop por padrao. Regras de mobile ficam
   no bloco @media no fim do arquivo, junto com o resto do breakpoint
   <768px. E um <a> normal (nao label+checkbox), entao ja e focavel e
   ativavel por teclado sem CSS extra. */
.menu-toggle-label {
    display: none;
}

/* =========================================
   Hero Section
========================================= */
#hero {
    position: relative;
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: #1b2b1f; /* cor de espera ate a foto pintar */
}

/* A foto do hero saiu do `background: url()` e virou <img> no HTML.
   Imagem de fundo em CSS so e descoberta depois que o navegador baixa e
   processa a folha de estilo - tarde demais para o elemento de LCP. */
.hero-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* <picture> e so agrupador de <source>/<img> - display:contents tira ele da
   arvore de caixas, entao quem posiciona continua sendo o .hero-bg de
   dentro (position:absolute relativo a #hero, atravessando o <picture>
   normalmente mesmo sem essa regra, mas contents evita qualquer caixa
   inline vazia sobrando no fluxo). */
.hero-frame {
    display: contents;
}

/* Carrossel em crossfade, so CSS - a pagina nao carrega JavaScript, de
   proposito (ver comentario no fim do index.html). 4 fotos, 6s cada,
   ciclo de 24s. A primeira (abacaxi, tambem a unica com fetchpriority=high
   e preload no <head>) comeca visivel sem atraso - uma animacao nao pode
   segurar o LCP. As outras tres entram com animation-delay NEGATIVO, que
   as coloca ja "no meio" do mesmo ciclo compartilhado desde o primeiro
   frame - e o que da o efeito de revezamento continuo em vez de todas
   comecarem juntas escondidas e so aparecerem depois de 6/12/18s. */
.hero-frame-2 .hero-bg,
.hero-frame-3 .hero-bg,
.hero-frame-4 .hero-bg {
    opacity: 0;
}

.hero-frame .hero-bg {
    animation: hero-crossfade 24s infinite;
}

.hero-frame-2 .hero-bg { animation-delay: -6s; }
.hero-frame-3 .hero-bg { animation-delay: -12s; }
.hero-frame-4 .hero-bg { animation-delay: -18s; }

@keyframes hero-crossfade {
    0%, 20%  { opacity: 1; }
    25%, 95% { opacity: 0; }
    100%     { opacity: 1; }
}

/* Quem pediu menos movimento na animacao do sistema fica só com a primeira
   foto, parada - mesmo resultado visual do hero de antes do carrossel. */
@media (prefers-reduced-motion: reduce) {
    .hero-frame .hero-bg {
        animation: none;
    }
    .hero-frame-1 .hero-bg {
        opacity: 1;
    }
}

.hero-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.3) 100%);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    color: var(--white);
    max-width: 600px;
    animation: fadeInUp 1s ease;
}

.hero-content h2 {
    font-size: 3.5rem;
    margin-bottom: 20px;
}

.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    opacity: 0.9;
}


/* =========================================
   Vitrine (estatica, cards com mini-carrossel por categoria)
========================================= */
#vitrine {
    padding: 80px 20px;
}

.grid-produtos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.card-produto {
    background: var(--white);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform 0.3s ease;
}

.card-produto:hover {
    transform: translateY(-10px);
}

/* Janela do carrossel: mesma altura que a foto unica ocupava antes
   (250px). Cada .card-bg empilha por cima via position:absolute, mesma
   ideia do carrossel do hero (.hero-frame/.hero-bg), em escala de cartao
   em vez de tela inteira. */
.card-carrossel {
    position: relative;
    height: 250px;
    overflow: hidden;
}

.card-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
}

.card-info {
    padding: 20px;
}

.card-info h4 {
    font-size: 1.5rem;
    color: var(--primary-dark);
    margin-bottom: 10px;
}

/* Crossfade por categoria - precisa de um @keyframes por categoria porque
   cada uma tem uma quantidade diferente de fotos (10 frutas, 10 verduras,
   2 temperos): a posicao "visivel"/"escondida" e uma fracao de 100% que
   depende de quantas fotos existem, e a posicao de um seletor de keyframe
   nao aceita calc()/var(). Mesma logica do carrossel do hero: 6s de "slot"
   por foto, 1.2s de transicao (20% do slot, igual ao hero), duracao total
   = numero de fotos x 6s. A primeira foto de cada cartao (nth-child(1),
   sem animation-delay) comeca visivel na hora, sem esperar a animacao -
   o proprio keyframe (0%: opacity 1) ja cobre isso, igual no hero.

   Frutas e Verduras cairam de 14/11 para 10/10 em 07/08/2026, quando as
   fotos com etiqueta/adesivo de marca de terceiro saíram do site (ver
   comentario em IMAGENS_DO_SITE no gerar_imagens.py) - por coincidencia as
   duas categorias convergiram pro mesmo N, entao os dois keyframes ficaram
   identicos, mas continuam separados porque nao ha garantia de que vao
   crescer na mesma proporcao no futuro. */
@keyframes card-crossfade-frutas {
    0%, 8%   { opacity: 1; }
    10%, 98% { opacity: 0; }
    100%     { opacity: 1; }
}

.card-produto-frutas .card-bg {
    animation: card-crossfade-frutas 60s infinite;
}

.card-produto-frutas .card-bg:nth-child(2)  { animation-delay: -6s; }
.card-produto-frutas .card-bg:nth-child(3)  { animation-delay: -12s; }
.card-produto-frutas .card-bg:nth-child(4)  { animation-delay: -18s; }
.card-produto-frutas .card-bg:nth-child(5)  { animation-delay: -24s; }
.card-produto-frutas .card-bg:nth-child(6)  { animation-delay: -30s; }
.card-produto-frutas .card-bg:nth-child(7)  { animation-delay: -36s; }
.card-produto-frutas .card-bg:nth-child(8)  { animation-delay: -42s; }
.card-produto-frutas .card-bg:nth-child(9)  { animation-delay: -48s; }
.card-produto-frutas .card-bg:nth-child(10) { animation-delay: -54s; }

@keyframes card-crossfade-verduras {
    0%, 8%   { opacity: 1; }
    10%, 98% { opacity: 0; }
    100%     { opacity: 1; }
}

.card-produto-verduras .card-bg {
    animation: card-crossfade-verduras 60s infinite;
}

.card-produto-verduras .card-bg:nth-child(2)  { animation-delay: -6s; }
.card-produto-verduras .card-bg:nth-child(3)  { animation-delay: -12s; }
.card-produto-verduras .card-bg:nth-child(4)  { animation-delay: -18s; }
.card-produto-verduras .card-bg:nth-child(5)  { animation-delay: -24s; }
.card-produto-verduras .card-bg:nth-child(6)  { animation-delay: -30s; }
.card-produto-verduras .card-bg:nth-child(7)  { animation-delay: -36s; }
.card-produto-verduras .card-bg:nth-child(8)  { animation-delay: -42s; }
.card-produto-verduras .card-bg:nth-child(9)  { animation-delay: -48s; }
.card-produto-verduras .card-bg:nth-child(10) { animation-delay: -54s; }

@keyframes card-crossfade-temperos {
    0%, 40%  { opacity: 1; }
    50%, 90% { opacity: 0; }
    100%     { opacity: 1; }
}

.card-produto-temperos .card-bg {
    animation: card-crossfade-temperos 12s infinite;
}

.card-produto-temperos .card-bg:nth-child(2) { animation-delay: -6s; }

/* Quem pediu menos movimento fica so com a primeira foto de cada cartao,
   parada - mesmo criterio ja aplicado no carrossel do hero. Especificidade
   tem que IGUALAR a das regras ".card-produto-X .card-bg" acima (2 classes
   cada): testado com uma regra generica ".card-bg { animation: none }" (so
   1 classe) e ela perdia pra regra mais especifica, animacao continuava
   rodando mesmo com reduced-motion ligado. No carrossel do hero isso nao
   acontece porque la as duas regras (".hero-frame .hero-bg") tem a mesma
   especificidade dos dois lados. */
@media (prefers-reduced-motion: reduce) {
    .card-produto-frutas .card-bg,
    .card-produto-verduras .card-bg,
    .card-produto-temperos .card-bg {
        animation: none;
    }
    .card-bg:nth-child(1) {
        opacity: 1;
    }
}

/* =========================================
   B2B Section
========================================= */
#b2b {
    padding: 80px 20px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
}

.glass-panel {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--white);
    gap: 40px;
}

.badge {
    background: var(--secondary-color);
    color: var(--text-dark); /* herdava branco: contraste 2.23 sobre o laranja */
    padding: 5px 15px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 15px;
    display: inline-block;
}

.b2b-text h3 {
    font-size: 2rem;
    margin-bottom: 15px;
}

.b2b-text ul {
    list-style: none;
    margin-top: 20px;
}

.b2b-text ul li {
    margin-bottom: 10px;
    font-weight: 600;
}

.b2b-cta {
    text-align: center;
    min-width: 250px;
}

.b2b-cta p {
    margin-bottom: 10px;
    font-weight: 600;
}

/* O CTA do B2B reusa o verde do WhatsApp em vez do verde da marca: sobre o
   gradiente verde do painel, a cor da marca sumiria no fundo. */
.b2b-cta .btn-b2b {
    width: 100%;
    margin-top: 0;
}

.b2b-cta p.b2b-nota {
    margin: 12px 0 0;
    font-size: 0.85rem;
    font-weight: 400;
    opacity: 0.85;
}

/* =========================================
   Pedido / Calculadora
========================================= */
#pedido {
    padding: 80px 20px;
}

.pedido-box {
    max-width: 600px;
    margin: 0 auto;
    background: var(--white);
    padding: 40px;
    border-radius: 20px;
    box-shadow: var(--shadow);
}

/* Os dois canais de pedido: iFood (entrega) e WhatsApp (retirada). */
.canais-pedido {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-top: 10px;
}

.canal {
    display: flex;
    flex-direction: column;
    padding: 24px;
    border: 2px solid #e0e0e0;
    border-radius: 14px;
    background: var(--bg-color);
}

.canal h4 {
    font-size: 1.15rem;
    margin-bottom: 10px;
    color: var(--text-dark);
}

.canal p {
    font-size: 0.95rem;
    color: var(--text-light);
    /* Empurra o botao para o rodape do cartao, para os dois ficarem alinhados
       mesmo com textos de alturas diferentes. */
    flex-grow: 1;
}

.canal .btn-whatsapp,
.canal .btn-ifood {
    margin-top: 20px;
}

.nota-canais {
    margin-top: 25px;
    font-size: 0.9rem;
    color: var(--text-light);
    text-align: center;
}

.vitrine-nota {
    margin-top: 25px;
    text-align: center;
    color: var(--text-light);
}

/* ---------------------------------------------------------------------------
   INATIVO desde 31/07/2026: estilos do simulador de frete por CEP. O bloco saiu
   do index.html quando a entrega passou a ser operada pelo iFood. Ficam aqui,
   junto com o script.js, para o caso de a entrega propria voltar - eram a
   contraparte visual de uma logica que custou caro (cascata de geocodificacao).
   Nao ha mais elemento na pagina que case com estes seletores.
--------------------------------------------------------------------------- */
.calculadora-frete label {
    display: block;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--text-dark);
}

.calculadora-frete input[type="text"] {
    width: 100%;
    padding: 15px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    font-size: 1rem;
    font-family: 'Outfit', sans-serif;
    outline: none;
    transition: border-color 0.3s;
}

.calculadora-frete input[type="text"]:focus {
    border-color: var(--primary-color);
}

.modo-pedido {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.btn-modo {
    flex: 1;
    padding: 15px;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    background: var(--white);
    font-size: 1rem;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.3s, background-color 0.3s;
}

.btn-modo:hover {
    border-color: var(--primary-color);
}

.btn-modo.ativo {
    border-color: var(--primary-color);
    background-color: #f4fbf6;
    color: var(--primary-dark);
}

.cep-busca {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.cep-busca input {
    flex: 1;
}

.cep-busca button {
    flex-shrink: 0;
    padding: 15px 20px;
}

#cep-status {
    font-size: 0.9rem;
    margin-bottom: 20px;
    padding: 10px 15px;
    border-radius: 8px;
}

.cep-status-aviso {
    background-color: #fff3cd;
    color: #856404;
}

.cep-status-erro {
    background-color: #fdecea;
    color: #b3261e;
}

.aviso-taxa-a-parte {
    font-size: 0.85rem;
    color: var(--text-dark);
    opacity: 0.75;
    margin-top: 10px;
}

.alerta-horario {
    background-color: #fff3cd;
    color: #856404;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 0.95rem;
    border-left: 4px solid #ffeeba;
}

#resultado-frete {
    margin-top: 25px;
    padding: 20px;
    background: #f4fbf6;
    border-radius: 10px;
    border-left: 4px solid var(--primary-color);
}

#resultado-frete h4 {
    color: var(--primary-dark);
    margin-bottom: 5px;
}
/* ------------------- fim do bloco inativo do simulador ------------------- */

/* =========================================
   Localização
========================================= */
#localizacao {
    padding: 80px 20px;
}

.localizacao-content {
    display: flex;
    align-items: stretch;
    background: var(--white);
    border-radius: 20px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.mapa-wrapper {
    flex: 1 1 60%;
    min-height: 350px;
}

.mapa-wrapper iframe {
    width: 100%;
    height: 100%;
    min-height: 350px;
    border: 0;
    display: block;
}

.localizacao-info {
    flex: 1 1 40%;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
}

.localizacao-info h4 {
    font-size: 1.6rem;
    color: var(--primary-dark);
}

.localizacao-info a:not(.btn-primary) {
    color: var(--primary-color);
    font-weight: 600;
}

.localizacao-info a.btn-primary {
    align-self: flex-start;
    margin-top: 10px;
}

.avaliacao-google {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #e8efe9;
    display: flex;
    align-items: center;
    gap: 16px;
}

.avaliacao-google p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--text-dark);
    max-width: 220px;
}

.qrcode-link {
    flex-shrink: 0;
    display: block;
    line-height: 0;
    border-radius: 8px;
    /* Anel de foco/hover proprio, ja que o "botao" aqui e so a imagem. */
    transition: transform 0.2s ease;
}

.qrcode-link:hover,
.qrcode-link:focus-visible {
    transform: scale(1.05);
}

.qrcode-link img {
    display: block;
    border: 1px solid #e8efe9;
    border-radius: 8px;
    background: var(--white);
    padding: 6px;
}

/* Horario em <dl>: dia e o termo, faixa de atendimento e a definicao. Grid de
   duas colunas para os horarios alinharem entre si sem tabela. */
.horarios {
    border-top: 1px solid #e8efe9;
    padding-top: 14px;
}

.horarios h5 {
    font-size: 1rem;
    font-weight: 800;
    color: var(--primary-dark);
    margin-bottom: 8px;
}

.horarios dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 16px;
    font-size: 0.95rem;
}

.horarios dt {
    color: var(--text-light);
}

.horarios dd {
    font-weight: 600;
    text-align: right;
}

/* =========================================
   WhatsApp Flutuante
========================================= */
.whatsapp-float {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 60px;
    height: 60px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    z-index: 1001;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.whatsapp-float:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4);
}

/* =========================================
   Footer
========================================= */
footer {
    background: var(--text-dark);
    color: var(--white);
    text-align: center;
    padding: 40px 20px;
}

footer a {
    color: var(--white);
    font-weight: 600;
}

footer p {
    margin-top: 8px;
}

/* =========================================
   Animations & Responsive
========================================= */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
    /* Menu sanduiche via :target: sem JavaScript, de proposito (ver
       comentario no fim do index.html sobre a pagina nao carregar JS). O
       <a> do icone e um link normal, ja focavel/ativavel por teclado sem
       CSS extra - diferenca do checkbox hack, que exigia truque pra isso. */
    .menu-toggle-label {
        display: block;
        font-size: 1.7rem;
        line-height: 1;
        cursor: pointer;
        color: var(--primary-dark);
        padding: 4px;
        text-decoration: none;
    }

    .menu-toggle-label::before {
        content: "☰";
    }

    .menu-toggle-label:focus-visible {
        outline: 2px solid var(--primary-color);
        outline-offset: 2px;
        border-radius: 4px;
    }

    .header-content nav {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--glass-bg);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--glass-border);
        padding: 0 20px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease, padding 0.3s ease;
    }

    #menu-mobile:target {
        max-height: 320px;
        padding: 12px 20px 20px;
    }

    .header-content nav a {
        margin-left: 0;
        padding: 8px 0;
    }

    /* display:none base fica fora do media query (ver acima) - aqui so o
       layout de quando ele reaparece, com o menu aberto. */
    .fechar-menu {
        align-self: flex-end;
        font-size: 0.9rem;
        color: var(--text-light);
    }

    #menu-mobile:target .fechar-menu {
        display: block;
    }

    .hero-content h2 {
        font-size: 2.5rem;
    }
    .glass-panel {
        flex-direction: column;
        text-align: center;
    }
    .b2b-text ul li {
        text-align: left;
    }
    .localizacao-content {
        flex-direction: column;
    }
    .mapa-wrapper {
        min-height: 250px;
    }
    .mapa-wrapper iframe {
        min-height: 250px;
    }
    .whatsapp-float {
        width: 52px;
        height: 52px;
        right: 16px;
        bottom: 16px;
    }
}