/* O AVISO DE CONSENTIMENTO — arquivo próprio, pelo mesmo motivo do site da
   Fatormix: consentimento não se mistura com os partials do site.
   ⚠️ Ele NÃO se chama hero-*.css de propósito: aquele nome é o que o validador
   usa para cobrar o CSS por página. Este é compartilhado e entra no orçamento
   de todas — que é o certo, porque o aviso aparece em todas.

   ⚠️ AS MEDIDAS SÃO AS DO SITE DA FATORMIX (Ronaldo, 03/09/2026): mesmo
   respiro, mesmo raio, mesma anatomia de duas colunas, mesmos botões de 48 px
   — entre o miúdo (42) e o cheio (52). Os dois sites mostram o mesmo aviso; o
   visitante que vê os dois não deveria notar que são páginas diferentes.

   ⚠️ NÃO É CONTEÚDO (AGENTS, invariante 8). Ele não cobre a página, não
   bloqueia rolagem e nasce `hidden`: sem JavaScript não aparece — e nada é
   carregado, que é o estado mais seguro que existe. */

/* ⚠️ O respiro VERTICAL é o padding deste contêiner, não margem da caixa: com
   `position: fixed` a margem colaria a caixa na borda da tela em telefone.
   O respiro HORIZONTAL não está aqui — quem dá é o `.wrap` de dentro, que é o
   mesmo do resto do site. Assim a caixa nasce com a largura e as calhas do
   painel do fecho, em qualquer largura de tela. */
.consentimento {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  padding-block: var(--e5);
}
/* [hidden] precisa vencer o display:grid, que tem a mesma especificidade e vem
   antes — sem isto o aviso aparece mesmo escondido (AG_BUILD, higiene). */
.consentimento[hidden] { display: none; }

.consentimento__caixa {
  width: 100%;
  display: grid;
  gap: var(--e4);
  padding: var(--e6);
  /* o mesmo raio do painel do fecho (.convite): os dois ocupam a mesma
     largura e as mesmas calhas, e raio diferente faria um parecer de outra
     família na mesma tela */
  border-radius: var(--raio-2);
  /* ⚠️ QUEM SEPARA O CARTÃO DO FUNDO É A BORDA E A SOMBRA, não o
     preenchimento — e o motivo é que ele é `fixed` e aparece sobre DOIS
     fundos: a hero clara da home e o Canvas do fecho. Um cartão branco sobre
     a base clara praticamente some se depender só do preenchimento; sobre o
     escuro, ele salta. Só a borda e a sombra dão conta dos dois lados. */
  border: 1px solid color-mix(in srgb, var(--texto) 16%, transparent);
  background: var(--cartao);
  box-shadow: 0 20px 56px rgb(13 30 46 / .34), 0 2px 8px rgb(13 30 46 / .10);
}
@media (min-width: 768px) {
  .consentimento__caixa {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--e4) var(--e7);
    padding: var(--e6) var(--e7);
  }
  /* ⚠️ grid-column declarado NOS TRÊS: dois itens dividindo linha sem coluna
     declarada fazem o auto-placement criar uma trilha a mais. */
  .consentimento__titulo { grid-column: 1; }
  .consentimento__texto  { grid-column: 1; }
  .consentimento__acao   { grid-column: 2; grid-row: 1 / span 2; }
}
.consentimento__titulo { margin: 0; color: var(--texto); font-weight: 600; font-size: var(--t3); }
.consentimento__texto  { margin: 0; color: var(--suave); font-size: var(--t2); line-height: 1.6; max-width: 62ch; }
.consentimento__texto a { color: var(--primaria); }
.consentimento__acao { display: grid; grid-auto-flow: column; gap: var(--e4); }
/* Os dois botões ficam ENTRE o miúdo (42 px) e o cheio (52 px): 48 px, com o
   padding e o corpo de texto do botão normal. A sobrescrita mora aqui, e não
   no style.css, para não mexer em nenhum outro `botao--miudo` do site.
   ⚠️ Especificidade: `.consentimento__acao .botao--miudo` é 0,2,0 contra os
   0,1,0 de `.botao--miudo`, então vence sem depender da ordem dos arquivos —
   e não deveria depender, porque são dois arquivos diferentes. */
.consentimento__acao .botao--miudo {
  min-height: 48px;
  padding: var(--e3) var(--e6);
  font-size: var(--t2);
}
@media (max-width: 479px) { .consentimento__acao { grid-auto-flow: row; } }

/* ⚠️ O respiro que deixa o aviso confortável no desktop come METADE da tela
   num telefone. O pedido era mais respiro, não um aviso que engole a página —
   então em tela pequena ele volta a ser proporcional. Os botões ficam nos
   48 px: alvo de toque não encolhe. */
@media (max-width: 599px) {
  .consentimento { padding-block: var(--e4); }
  .consentimento__caixa { padding: var(--e5); gap: var(--e3); }
  .consentimento__texto { font-size: var(--t1); line-height: 1.5; }
}