/* ═══════════════════════════════════════════════════════════════════
   AVISO DE PRIVACIDADE (consentimento) — 04/08/2026
   Só tokens e geometria já existentes no design system: fundo midnight
   como a barra fixa, botões .btn-creme / .btn-ghost, --radius-sm.
   position:fixed por definição — não empurra nada no hero (CLS 0).
   ═══════════════════════════════════════════════════════════════════ */

.eg-consent{
  position:fixed; left:0; right:0; bottom:0; z-index:120;
  background:#1B1917;                                    /* --bg-dark-2, opaco */
  border-top:1px solid rgba(247,234,216,.14);
  box-shadow:0 -22px 60px rgba(0,0,0,.45);
  padding:16px 24px;
  /* Entrada por opacidade, não por deslize. Medido em 4G lento (mobile 412px):
     com o banner surgindo opaco — animado por transform ou sem animação —, o
     frame em que a troca de fonte desloca o hero passa a contar a área do
     banner e o CLS da página sobe de 0,200 para 0,255. Com o fade, volta a
     0,200: exatamente o mesmo da página sem banner. Também é o vocabulário
     dos .reveal da página. Se um dia virar deslize, medir de novo. */
  animation:egConsentEntra .45s var(--ease-out) both;
}
.eg-consent[hidden]{ display:none !important; }

.eg-consent__inner{
  max-width:1160px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:16px 28px;
}
/* Os botões vêm ANTES do texto no DOM: no celular — de onde vem quase todo o
   tráfego — eles ficam em cima, e a ordem visual, a de tabulação e a do DOM
   são a mesma. No desktop o `order` devolve o texto para a esquerda e os
   botões para a direita, que é como a barra sempre foi. */
.eg-consent__texto{
  order:1;
  font-size:13.5px; line-height:1.65; color:rgba(247,234,216,.78);
  max-width:660px;
}
.eg-consent__link{
  color:var(--creme); text-decoration:underline;
  text-underline-offset:3px; text-decoration-thickness:1px;
  transition:color .2s ease;
}
.eg-consent__link:hover{ color:var(--terracota); }
.eg-consent__acoes{ order:2; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.eg-consent .btn-creme,
.eg-consent .btn-ghost{ padding:12px 24px; font-size:11px; }
/* .btn-ghost tem borda de 1px e .btn-creme não tem nenhuma. Com flex:1
   (flex-basis:0%) essa borda entra na base do cálculo: medido em 380px, o
   Recusar saía 2px mais largo e 2px mais alto que o Aceitar. A borda
   transparente iguala as duas caixas sem mudar nada do que se vê — os dois
   botões precisam ter exatamente o mesmo peso. */
.eg-consent .btn-creme{ border:1px solid transparent; }
/* .btn-ghost nasceu para fundo creme: no escuro ele inverte as linhas */
.eg-consent .btn-ghost{ color:var(--creme); border-color:rgba(247,234,216,.28); }
.eg-consent .btn-ghost:hover{
  color:var(--creme); border-color:var(--creme); background:rgba(247,234,216,.08);
}

@keyframes egConsentEntra{
  from{ opacity:0; }
  to{ opacity:1; }
}

/* No celular a barra vira bloco: a decisão em cima, em dois botões de 56px
   que cabem no polegar e dividem a linha em 50/50; a explicação logo abaixo,
   em corpo maior. Os dois botões têm sempre o mesmo tamanho — nenhum dos
   dois é o caminho fácil. */
@media (max-width:768px){
  .eg-consent{ padding:20px 16px 22px; }
  .eg-consent__inner{ flex-direction:column; align-items:stretch; gap:16px; }
  .eg-consent__acoes{ order:1; gap:12px; }
  .eg-consent__texto{ order:2; font-size:14px; }
  .eg-consent__acoes .btn-creme,
  .eg-consent__acoes .btn-ghost{ flex:1; min-height:56px; font-size:12.5px; padding:17px 18px; }
}
@media (prefers-reduced-motion:reduce){
  .eg-consent{ animation:none; }
}

/* ─── Revogação no rodapé: mesma pinta dos links de rodapé ─── */
.footer-revogar{
  background:none; border:none; padding:0; cursor:pointer;
  font-family:inherit; font-size:12.5px; line-height:inherit;
  color:rgba(247,234,216,.5);
  text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;
  transition:color .2s ease;
}
.footer-revogar:hover{ color:var(--creme); }