/* O aviso de consentimento — arquivo próprio, por pedido de Ronaldo.
   ⚠️ Ele NÃO entra no style.css de propósito: só é baixado por quem carrega a
   página com o aviso, e some do orçamento das outras quando ele sair. */

/* ⚠️ 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
   cartão 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);
  /* 16px é o raio do cartão do fecho (.convite). Os dois ocupam a mesma
     largura e as mesmas calhas — raio diferente faria um parecer de outra
     família na mesma tela. */
  border-radius: 16px;
  /* ⚠️ CARTÃO CLARO SOBRE HERO ESCURA, e o motivo é medido: com
     `--superficie` (#132B42) sobre a `--canvas` (#0D1E2E) o contraste entre o
     cartão e o que está atrás era de **1,17:1** — ou seja, como bloco ele
     praticamente não existia, e só a borda o separava do fundo. Em branco são
     **16,90:1**, e ele salta na primeira dobra, que é onde o aviso precisa ser
     visto (Ronaldo, 23/08/2026).

     ⚠️⚠️ E o preço, que também foi medido: sobre uma seção BRANCA o mesmo
     cartão dá **1,00:1** — desaparece. O aviso é `fixed` e aparece em toda
     página, inclusive por cima do corpo claro da Política. Por isso quem
     separa o cartão do fundo NÃO é o preenchimento, é a BORDA e a SOMBRA: elas
     precisam sozinhas dar conta dos dois fundos. Clarear a borda ou aliviar a
     sombra devolve o defeito num dos dois lados, e só num. */
  border: 1px solid color-mix(in srgb, var(--navy-900) 16%, transparent);
  background: var(--claro);
  box-shadow: 0 20px 56px rgb(6 16 26 / .34), 0 2px 8px rgb(6 16 26 / .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);
  }
  .consentimento__titulo { grid-column: 1; }
  .consentimento__texto  { grid-column: 1; }
  .consentimento__acao   { grid-column: 2; grid-row: 1 / span 2; }
}
.consentimento__titulo { color: var(--navy-900); font-weight: 600; font-size: var(--t3); }
/* navy-900 a 82% sobre branco: o mesmo tom do corpo da Política */
.consentimento__texto  { color: color-mix(in srgb, var(--navy-900) 82%, #FFFFFF); font-size: var(--t2); line-height: 1.6; max-width: 62ch; }
.consentimento__texto a { color: var(--pink-500); }
/* ⚠️ grid-column declarado nos dois: dois itens dividindo linha sem coluna
   declarada fazem o auto-placement criar uma trilha a mais (ESTRATEGIA §0.34). */
.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: medido em 375×812, a caixa saiu de 281 px (35%) para 444 px (55%)
   só com o padding novo. 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; }
}