/* ===========================================================
   ECLAT GOLD — FOOTER (Design System v1.1 · verde + neutros)
   =========================================================== */
:root{ --egf-text:#b9cfc8; --egf-head:#ffffff; --egf-line:rgba(255,255,255,.10); }

.eg-footer{font-family:var(--eg-body)}
.eg-footer .eg-wrap{max-width:var(--eg-site-width,1200px);margin:0 auto;padding:0 24px;width:100%}
.eg-footer a{text-decoration:none}

/* faixa de benefícios */
.eg-foot-benefits{background:#fff;border-top:1px solid var(--eg-line)}
.eg-foot-benefits .eg-wrap{display:flex;flex-wrap:wrap;gap:20px 28px;justify-content:space-between;padding-top:30px;padding-bottom:30px}
.eg-benefit{display:flex;align-items:center;gap:13px;flex:1;min-width:180px}
.eg-benefit .eg-bi{width:46px;height:46px;border-radius:12px;background:var(--eg-g50);color:var(--eg-brand);display:grid;place-items:center;flex-shrink:0}
.eg-benefit .eg-bi svg{width:23px;height:23px;display:block}
.eg-benefit b{display:block;font-size:14px;font-weight:600;color:var(--eg-ink)}
.eg-benefit small{font-size:12px;color:var(--eg-muted)}

/* corpo */
.eg-foot-main{background:var(--eg-deep);color:var(--egf-text);padding:3rem 0rem 3rem 0rem}
/* São CINCO blocos: marca, três listas de links e atendimento.
   O grid declarava quatro colunas, então o quinto caía numa segunda linha,
   sozinho embaixo da marca, com três quartos da faixa vazios ao lado. A
   coluna "Políticas" entrou junto com as páginas legais e o grid ficou para
   trás — contar as colunas é o tipo de coisa que só o layout denuncia. */
.eg-foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1.6fr;gap:40px}
/* Item de grid não encolhe abaixo do próprio conteúdo (min-width:auto). Sem
   isto o e-mail — uma palavra só, sem espaço onde quebrar — empurra a coluna
   e vaza para fora dela em telas médias. */
.eg-foot-grid > *{min-width:0}
.eg-foot-brand p{font-size:13.5px;line-height:1.75;color:var(--egf-text);max-width:34ch;margin:18px 0 22px}
.eg-foot-logo{display:inline-flex;align-items:center;gap:10px}
/* No rodape sobra espaco vertical, entao a marca pode vir maior que no header. */
.eg-foot-logo .eg-logo-svg{height:52px;width:auto;display:block}
@media(max-width:600px){.eg-foot-logo .eg-logo-svg{height:44px}}
.eg-foot-logo .eg-mark{width:34px;height:34px;border-radius:9px;background:var(--eg-brand);display:grid;place-items:center;color:#fff;font-family:var(--eg-display);font-size:19px}
.eg-foot-logo .eg-word{font-family:var(--eg-display);font-size:22px;letter-spacing:.5px;color:#fff;line-height:1}
.eg-foot-logo .eg-word b{color:#5cae9b;font-weight:400}
.eg-foot-logo .eg-word small{display:block;font-family:var(--eg-body);font-size:9px;letter-spacing:3.5px;color:var(--egf-text);text-transform:uppercase;margin-top:3px}
.eg-foot-social{display:flex;gap:10px}
.eg-foot-social a{width:38px;height:38px;border-radius:10px;border:1px solid var(--egf-line);display:grid;place-items:center;color:#fff;transition:.15s}
.eg-foot-social a:hover{background:var(--eg-brand);border-color:var(--eg-brand)}

.eg-foot-col h4{font-family:var(--eg-body);font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--egf-head);margin:0 0 22px}
.eg-foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:15px}
.eg-foot-col ul a{font-size:13.5px;color:var(--egf-text);transition:.15s}
.eg-foot-col ul a:hover{color:#fff;padding-left:3px}

/* atendimento */
.eg-foot-wa{display:inline-flex;align-items:center;gap:8px;background:var(--eg-brand);color:#fff;font-size:13.5px;font-weight:600;padding:12px 18px;border-radius:10px;margin-bottom:18px;transition:.15s}
.eg-foot-wa:hover{background:#0c8a72;color:#fff}
/* `break-word` e não `anywhere`: só parte a palavra quando não há outro jeito,
   respeitando primeiro o <wbr> que o template põe antes do @ do e-mail. */
.eg-foot-line{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--egf-text);margin:0 0 12px;overflow-wrap:break-word;min-width:0}
.eg-li{width:15px;height:15px;flex-shrink:0;display:block}
.eg-foot-line a{color:var(--egf-text)}
.eg-foot-line a:hover{color:#fff}
/* As cinco bandeiras somavam 258px numa coluna de 256 e o "Boleto" caía
   sozinho na linha de baixo. Menos respiro interno e menos gap devolvem
   ~18px de folga — o suficiente para a linha não depender de 2px.
   (Vale para o fallback de texto; com a imagem, ver .eg-foot-pay--img.) */
.eg-foot-pay{display:flex;flex-wrap:wrap;gap:6px;margin-top:22px}

/* A imagem já traz as bandeiras em duas fileiras, então não precisa de flex.
   `height:auto` com `width` limitado preserva a proporção 726x240 e evita o
   salto de layout enquanto ela carrega — o navegador reserva o espaço certo
   a partir dos atributos width/height que o WordPress imprime. */
/* Rótulo das bandeiras.
   Menor e em cinza, não no branco do <h4> da coluna: é um subtítulo dentro de
   "Atendimento", e dois títulos com o mesmo peso disputariam a leitura. */
.eg-foot-pay-lbl{margin:24px 0 10px;font-family:var(--eg-body);font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--egf-text)}
/* O respiro passou a ser do rótulo; sem isto o bloco herdaria as duas margens
   e a imagem descolaria do texto que a nomeia. Vale também para o fallback. */
.eg-foot-pay-lbl + .eg-foot-pay{margin-top:0}
.eg-foot-pay--img{display:block;margin-top:22px}
/* O seletor repete o pai porque o WooCommerce declara `.woocommerce img,
   .woocommerce-page img{max-width:100%}` — especificidade (0,1,1), que ganha
   de uma classe sozinha (0,1,0). Como o body carrega `woocommerce-page` em
   todas as páginas da loja, essa regra alcança até a imagem do rodapé. */
.eg-foot-pay .eg-foot-pay-img{display:block;width:100%;max-width:260px;height:auto}
.eg-foot-pay span{font-size:11px;font-weight:600;color:var(--egf-text);border:1px solid var(--egf-line);border-radius:6px;padding:5px 8px;background:rgba(255,255,255,.03);white-space:nowrap}

/* aviso legal */
.eg-foot-legal{background:#052824;color:rgba(185,207,200,.75)}
.eg-foot-legal .eg-wrap{padding-top:24px;padding-bottom:24px;font-size:11.5px;line-height:1.7;text-align:center;max-width:820px}

/* barra inferior */
.eg-foot-bottom{background:#04211d;color:var(--egf-text)}
.eg-foot-bottom .eg-wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:20px;padding-bottom:20px;font-size:12.5px;flex-wrap:wrap}
.eg-foot-safe{display:inline-flex;align-items:center;gap:6px}

/* responsivo */
/* Degrau intermediário: abaixo disto as cinco colunas caem para ~199px e a de
   atendimento não sustenta o próprio conteúdo — o botão "Chamar no WhatsApp"
   parte em duas linhas. Passando a marca para a largura toda, sobram quatro
   colunas de ~215px e tudo volta a caber. */
@media(max-width:1100px){.eg-foot-grid{grid-template-columns:repeat(4,1fr);gap:32px}.eg-foot-brand{grid-column:1/-1}}
/* 980 e não 920: entre 921 e 960 as quatro colunas chegam a 192px e o botão
   do WhatsApp volta a quebrar. O limite de cada degrau é a largura em que o
   conteúdo mais teimoso da linha ainda cabe inteiro. */
@media(max-width:980px){.eg-foot-grid{grid-template-columns:1fr 1fr;gap:32px}.eg-foot-brand{grid-column:1/-1}}
@media(max-width:560px){
	/* Eram 5 blocos empilhados: ~430px de altura logo antes do rodape, so de
	   selos. A intencao aqui ja era 2 colunas, mas com flex-wrap o item media
	   ~179px (icone 46 + texto) e dois nao cabiam em 368px — entao cada um caia
	   numa linha. Grid de 2 colunas nao depende da largura do conteudo, e os
	   tamanhos menores dao folga ate em 320px. */
	.eg-foot-benefits .eg-wrap{display:grid;grid-template-columns:1fr 1fr;gap:16px 12px;padding-top:22px;padding-bottom:22px}
	.eg-benefit{min-width:0;flex:none;gap:10px;align-items:center}
	.eg-benefit .eg-bi{width:38px;height:38px;border-radius:10px}
	.eg-benefit .eg-bi svg{width:19px;height:19px}
	.eg-benefit b{font-size:13px;line-height:1.25}
	.eg-benefit small{display:block;font-size:11px;line-height:1.3}
	/* sao 5 itens: o ultimo sobra sozinho na terceira linha, entao ocupa as duas
	   colunas e fica centrado em vez de encostado na esquerda */
	.eg-benefit:last-child{grid-column:1/-1;justify-content:center}
	.eg-foot-grid{grid-template-columns:1fr;gap:28px}
	.eg-foot-bottom .eg-wrap{justify-content:center;text-align:center}
}
@media(prefers-reduced-motion:reduce){.eg-foot-social a,.eg-foot-wa,.eg-foot-col ul a{transition:none!important}}