/* ==========================================================================
   Faixa de consentimento de cookies. Mecanismo, não pintura: as cores saem das
   variáveis abaixo, e o site que usa redefine as que quiser no próprio :root.
   Nasceu na IRONZERO41 (D-35) e foi generalizada.
   ========================================================================== */
.cookies{
  /* ajuste estas seis, e a faixa fica com a cara do site */
  /* As cores saem das variáveis do próprio site, que já viram no tema escuro sozinhas.
     Só o par do botão de aceitar precisa de ajuste por tema: o rosa do claro pede texto
     branco, e o rosa do escuro é claro demais para isso. */
  --cookies-fundo:var(--surface,#fff);
  --cookies-texto:var(--text,#171a20);
  --cookies-destaque:var(--accent,#c81e6e);   /* link e botão de aceitar */
  --cookies-sobre-destaque:#fff;              /* texto de dentro do botão de aceitar */
  --cookies-borda:var(--border,#dfe3e9);
  --cookies-contorno:var(--border,#dfe3e9);   /* borda do botão de recusar */

  position:fixed;left:0;right:0;bottom:0;z-index:80;
  background:var(--cookies-fundo);border-top:1px solid var(--cookies-borda);
  /* Sem esta linha, quem usa color:inherit aqui dentro (o botão de recusar) herda a cor de
     texto do SITE, não a da faixa, e some se as duas forem parecidas. */
  color:var(--cookies-texto);
  box-shadow:0 -2px 8px rgba(16,24,40,.06), 0 -12px 34px rgba(16,24,40,.10);
  transform:translateY(100%);transition:transform .3s ease;
}
.cookies--visivel{transform:none}

/* O .envelope do site traz padding vertical grande (56px em cima, 72px embaixo): ele serve à
   página, não à faixa. Dentro dela interessam só a largura e as margens laterais, que mudam de
   página para página (1180px no início, 760px na política) e é isso que faz a faixa alinhar com
   o texto de cada uma. */
.cookies .envelope{ padding-top:0; padding-bottom:0; }

/* a linha interna: use a classe de container do próprio site junto desta, para a faixa
   alinhar com o rodapé e com as seções de cima */
.cookies__linha{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(16px,3vw,48px);padding:16px 0;
}
.cookies__texto{
  font-family:var(--font, system-ui, sans-serif);
  margin:0;max-width:56ch;      /* o texto não atravessa a tela: fica em bloco de leitura */
  color:var(--cookies-texto);font-size:15px;line-height:1.45;
}
.cookies__texto a{color:var(--cookies-destaque);text-decoration:underline;text-underline-offset:3px}
.cookies__acoes{display:flex;gap:10px;flex-shrink:0}

.cookies__botao{
  font:inherit;font-size:15px;font-weight:600;line-height:1;
  cursor:pointer;padding:7px 14px;border-radius:3px;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.cookies__botao--recusar{
  background:transparent;color:inherit;border:1px solid var(--cookies-contorno);
}
.cookies__botao--recusar:hover{border-color:currentColor;background:rgba(255,255,255,.07)}
.cookies__botao--aceitar{
  background:var(--cookies-destaque);color:var(--cookies-sobre-destaque);
  border:1px solid var(--cookies-destaque);
}
.cookies__botao--aceitar:hover{filter:brightness(1.08)}
.cookies__botao:focus-visible{outline:2px solid var(--cookies-destaque);outline-offset:2px}

/* Este site não tem botão flutuante no canto de baixo, então não há o que levantar além do
   badge do Netlify, logo abaixo. A variável --faixa-cookies continua sendo escrita pelo
   script: se um dia entrar um botão fixo aqui, é só somá-la ao bottom dele. */

/* O badge "Powered by Netlify", quando o site está hospedado lá. É um iframe de 211 x 64
   preso em bottom:0 right:0, com z-index 2147483645 e fundo transparente, e ele engole o
   clique na área toda, inclusive onde não se vê nada. Medido no ar da IRONZERO41 em
   03/09/2026: em 1366, 1440 e 390 px isso cai justamente sobre o botão Aceitar, e a pessoa
   não consegue aceitar. Ele sobe junto com a faixa, pela mesma variável: continua visível e
   clicável, só sai de cima do que precisa ser apertado. Inofensivo em site fora do Netlify,
   onde o seletor não casa com nada. */
#nl-badge-frame{
  bottom:var(--faixa-cookies,0px) !important;
  transition:bottom .3s ease;
}

@media (prefers-color-scheme:dark){
  .cookies{
    --cookies-sobre-destaque:#12151a;   /* o rosa do escuro é claro: o texto dentro dele escurece */
    box-shadow:0 -2px 8px rgba(0,0,0,.3), 0 -12px 34px rgba(0,0,0,.45);
  }
}

@media (prefers-reduced-motion:reduce){
  .cookies,.cookies__botao,#nl-badge-frame{transition:none}
}

/* No celular a faixa empilha e os botões crescem: 31px de altura é pouco para o dedo,
   e 44px é o alvo de toque que as diretrizes de acessibilidade pedem. */
@media (max-width:760px){
  .cookies__linha{flex-direction:column;align-items:stretch;gap:14px;padding:14px 0}
  .cookies__texto{max-width:none;font-size:14px}
  .cookies__acoes{justify-content:flex-end}
  .cookies__botao{padding:13px 22px;font-size:16px}
}