/* ==========================================================================
   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 */
  --cookies-fundo:#1C1C1F;            /* a folha do Bento (identidade/design-guide.md) */
  --cookies-texto:#F4F4F5;
  --cookies-destaque:#FF8A65;         /* coral: link e botão de aceitar */
  --cookies-sobre-destaque:#2A0E05;   /* texto de dentro do botão de aceitar */
  --cookies-borda:rgba(255,255,255,.07);
  --cookies-contorno:rgba(255,255,255,.35);   /* 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. Num site de texto escuro com faixa escura o recusar some:
     medido grafite sobre grafite na Dom Fávero, em 04/09/2026. Recusar precisa ser tão fácil
     quanto aceitar, e um botão que não se lê não é fácil. */
  color:var(--cookies-texto);
  box-shadow:0 -12px 34px rgba(0,0,0,.55);
  transform:translateY(100%);transition:transform .3s ease;
}
.cookies--visivel{transform:none}

/* 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{
  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}

/* Quem mora no canto de baixo (botão flutuante de WhatsApp, chat, aviso) tem de subir
   enquanto a faixa está na tela, senão ela cobre justamente o botão de aceitar. O script
   mede a altura da faixa e escreve em --faixa-cookies; some com a faixa. Adapte os
   seletores aos do seu site, mantendo a transição do próprio elemento. */
.cookies-sobe{
  bottom:calc(22px + var(--faixa-cookies,0px));
  transition:bottom .3s ease;
}

/* 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-reduced-motion:reduce){
  .cookies,.cookies-sobe,.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}
}

/* ---------- Contas ---------- */
/* A linha usa a largura da coluna do app (440 px), para alinhar com os blocos. */
.cookies .linha-app{max-width:440px;margin:0 auto;padding-left:18px;padding-right:18px}
.cookies__botao{border-radius:12px}