/* ===========================================================================
   COMPONENTES — botões, campos, avisos, selos, caixas, cabeçalho, rodapé,
   barra fixa, faixa de cookies, acordeão.
   Ligados à lógica por atributos data-*, nunca por classe: trocar o visual
   inteiro não pode exigir mexer no JavaScript. Toda cor, tamanho e espaço vem
   de tokens.css. As únicas medidas escritas aqui são espessura de borda e
   ponto de quebra de tela, que não são token em lugar nenhum do projeto.

   Direção "Consultório": botão petróleo liso (sem gradiente), cartão desenhado
   pela borda (não pela sombra), chapéu em caixa alta espaçada, selo sempre com
   par fundo/texto medido, e o cobre uma vez por tela.
   =========================================================================== */

/* --- BOTÕES -------------------------------------------------------------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);
  width: 100%;
  min-height: var(--alvo-toque);
  padding: var(--e3) var(--e5);
  font-family: inherit;
  font-size: var(--texto-corpo);
  font-weight: var(--peso-forte);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--raio);
  cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao), transform var(--transicao);
}
@media (min-width: 560px) { .botao { width: auto; } .botao--largo { width: 100%; } }

/* O botão principal: petróleo liso, texto branco em caixa alta (7.72:1).
   Um único botão principal visível por dobra. */
.botao--principal {
  color: var(--cor-texto-invertido);
  background: var(--cor-primaria);
  text-transform: uppercase;
  letter-spacing: var(--espaco-letras-botao);
}
.botao--principal:hover { background: var(--cor-primaria-esc); transform: translateY(-1px); }

/* Seta de linha à direita, opcional (classe no HTML): o JS troca o texto do
   botão, e a seta em ::after sobrevive à troca. */
.botao--seta::after {
  content: "";
  width: 20px; height: 20px;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 5l7 7-7 7'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 5l7 7-7 7'/></svg>") center / contain no-repeat;
}

/* O botão de comprar: 56px. */
.botao--grande { min-height: var(--alvo-toque-grande); padding-left: var(--e6); padding-right: var(--e6); }

/* Branco com borda petróleo. "Ver todas as aulas", "agora não", "voltar". */
.botao--secundario {
  color: var(--cor-primaria);
  background: var(--cor-fundo);
  border-color: var(--cor-primaria);
  text-transform: uppercase;
  letter-spacing: var(--espaco-letras-botao);
}
.botao--secundario:hover { background: var(--cor-primaria-clara); }

/* Sobre o bloco escuro: botão branco com texto petróleo (7.72:1). */
.botao--invertido {
  color: var(--cor-primaria);
  background: var(--cor-fundo);
  text-transform: uppercase;
  letter-spacing: var(--espaco-letras-botao);
}
.botao--invertido:hover { background: var(--cor-primaria-clara); }

/* Só texto, sublinhado, 44px de alvo: "sair", "esconder a senha". */
.botao--texto {
  width: auto;
  min-height: var(--alvo-toque-menor);
  padding: var(--e2) 0;
  font-family: inherit;          /* o cabeçalho usa .botao--texto sozinho, sem .botao */
  font-size: var(--texto-corpo);
  cursor: pointer;
  color: var(--cor-primaria);
  background: none;
  border: 0;
  font-weight: var(--peso-medio);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
.botao--texto:hover { color: var(--cor-primaria-esc); }

/* Ligado (aria-pressed) — usado nos botões-selo de velocidade e avaliação.
   Fundo cheio E a palavra escrita ao lado: nunca só a cor. */
.botao[aria-pressed="true"] {
  color: var(--cor-texto-invertido);
  background: var(--cor-primaria);
  border-color: var(--cor-primaria);
}

.botao:disabled, .botao[aria-disabled="true"] { opacity: .65; cursor: progress; transform: none; }

/* --- CAMPOS -------------------------------------------------------------- */
.campo { margin-bottom: var(--e6); }

/* Rótulo ACIMA do campo, nunca placeholder como rótulo. */
.campo label,
.rotulo {
  display: block;
  font-size: var(--texto-corpo);
  font-weight: var(--peso-forte);
  margin-bottom: var(--e2);
}
.rotulo-ajuda { font-weight: var(--peso-normal); color: var(--cor-texto-suave); font-size: var(--texto-pequeno); }

.entrada {
  width: 100%;
  min-height: var(--alvo-toque-grande);
  padding: var(--e3) var(--e4);
  font-family: inherit;
  font-size: 20px;   /* 20px trava o zoom automático do iPhone ao focar o campo */
  color: var(--cor-texto);
  background: var(--cor-fundo);
  border: 2px solid var(--cor-borda);   /* 3.80:1 — conferido */
  border-radius: var(--raio);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.entrada::placeholder { color: var(--cor-texto-suave); opacity: 1; }
.entrada:hover { border-color: var(--cor-borda-forte); }
.entrada:focus-visible {
  outline: none;
  border-color: var(--cor-primaria);
  box-shadow: var(--anel-foco);
}
/* Erro: borda mais grossa, fundo rosado e a mensagem abaixo (via .aviso). */
.entrada[aria-invalid="true"] {
  border-color: var(--cor-erro);
  border-width: 3px;
  background: var(--cor-erro-fundo);
}

.entrada--numerica { letter-spacing: .18em; font-variant-numeric: tabular-nums; }
.entrada--texto { min-height: calc(var(--alvo-toque-grande) * 2); line-height: var(--altura-linha); resize: vertical; }
select.entrada { appearance: auto; }

/* Caixa de marcar e rádio SEMPRE visíveis, 28px: o controle nunca se esconde
   atrás de um cartão bonito. */
.marcar, .marcar input {
  cursor: pointer;
}
.marcar {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  min-height: var(--alvo-toque);
  padding: var(--e3) 0;
  font-size: var(--texto-corpo);
}
.marcar input[type="checkbox"], .marcar input[type="radio"],
input.marcar__caixa {
  width: 28px; height: 28px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--cor-primaria);
}

/* Cartão-etiqueta: o rádio/checkbox dentro de um cartão de 64px (meio de
   pagamento, bump). O marcado ganha borda 3px petróleo por [data-marcado] ou
   pelo :has, que aqui é só enfeite — o rádio visível já diz qual está marcado. */
.etiqueta {
  display: flex;
  align-items: center;
  gap: var(--e4);
  min-height: var(--alvo-toque-grande);
  padding: var(--e4);
  background: var(--cor-fundo);
  border: 2px solid var(--cor-borda);
  border-radius: var(--raio);
  cursor: pointer;
}
.etiqueta + .etiqueta { margin-top: var(--e3); }
.etiqueta input { width: 28px; height: 28px; margin: 0; flex: 0 0 auto; accent-color: var(--cor-primaria); }
.etiqueta[data-marcado="sim"] {
  border-color: var(--cor-primaria);
  border-width: 3px;
  background: var(--cor-primaria-clara);
}
/* Regra SEPARADA de propósito: navegador antigo que não entende :has joga
   fora a lista inteira de seletores — e levaria a regra de cima junto. */
.etiqueta:has(input:checked) {
  border-color: var(--cor-primaria);
  border-width: 3px;
  background: var(--cor-primaria-clara);
}

/* --- AVISOS -------------------------------------------------------------- */
/* Nasce escondido; o JS grava data-visivel="sim" para mostrar. Visual de
   ficha: borda esquerda de 6px na cor do estado. Nunca some sozinho. */
.aviso {
  display: none;
  margin: 0 0 var(--e5);
  padding: var(--e4) var(--e5);
  font-size: var(--texto-corpo);
  line-height: var(--altura-linha);
  border-left: 6px solid;
  border-radius: var(--raio);
}
.aviso[data-visivel="sim"] { display: block; }

.aviso--erro    { color: var(--cor-erro);        background: var(--cor-erro-fundo);    border-color: var(--cor-erro); }
.aviso--sucesso { color: var(--cor-sucesso-esc); background: var(--cor-sucesso-fundo); border-color: var(--cor-sucesso); }
.aviso--atencao { color: var(--cor-aviso-esc);   background: var(--cor-aviso-fundo);   border-color: var(--cor-aviso-borda); }
.aviso--info    { color: var(--cor-texto);       background: var(--cor-fundo-realce);  border-color: var(--cor-primaria); }

/* --- SELO ---------------------------------------------------------------- */
/* Pílula de 32px, caixa alta, sempre com par fundo/texto medido. Com um
   ícone de linha de 18px à esquerda quando houver. */
.selo {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  min-height: 32px;
  padding: var(--e1) var(--e3);
  font-size: var(--texto-pequeno);
  font-weight: var(--peso-forte);
  line-height: 1.2;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cor-primaria);
  background: var(--cor-primaria-clara);
  border-radius: var(--raio-redondo);
}
.selo .icone { width: 18px; height: 18px; }
.selo--sucesso { color: var(--cor-sucesso-esc); background: var(--cor-sucesso-fundo); }   /* "Concluída" — 8.03:1 */
.selo--acento  { color: var(--cor-acento);      background: var(--cor-acento-fundo); }    /* "Garantia de 21 dias", "Dia 21" — 5.24:1 */
.selo--areia   { color: var(--cor-texto);       background: var(--cor-marca-texto); }     /* "Aula de hoje" — 12.56:1 */
.selo--atencao { color: var(--cor-aviso-esc);   background: var(--cor-aviso-fundo); }     /* "Aguardando" — 7.47:1 */
.selo--neutro  { color: var(--cor-texto-suave); background: var(--cor-fundo-suave); }     /* 7.21:1 */
/* Dentro do bloco escuro. */
.selo--escuro  { color: var(--cor-texto-invertido); background: var(--cor-fundo-escuro-2); }

/* --- CHAPÉU (eyebrow) E LINHA DE SEÇÃO ----------------------------------- */
/* A assinatura visual do site: uma linha de 3px petróleo de 64px à esquerda
   do chapéu (no lugar da barra-gradiente da referência). Chapéu em caixa alta
   espaçada, 16px, petróleo. O H2 vem logo abaixo, alinhado à esquerda. */
.chapeu {
  display: block;
  margin: 0 0 var(--e3);
  font-size: var(--texto-pequeno);
  font-weight: var(--peso-forte);
  letter-spacing: var(--espaco-letras-chapeu);
  text-transform: uppercase;
  color: var(--cor-primaria);
}
.chapeu::before {
  content: "";
  display: block;
  width: var(--linha-secao-largura);
  height: var(--linha-secao);
  margin-bottom: var(--e3);
  background: var(--cor-primaria);
  border-radius: var(--raio-redondo);
}
/* Dentro do bloco escuro o chapéu fica claro e a linha, clara. */
.caixa--escura .chapeu, .escuro .chapeu { color: var(--cor-texto-sobre-escuro); }
.caixa--escura .chapeu::before, .escuro .chapeu::before { background: var(--cor-primaria-clara); }
/* Rótulo de ficha: o mesmo desenho, sem a linha. */
.rotulo-ficha {
  display: block;
  font-size: var(--texto-pequeno);
  font-weight: var(--peso-forte);
  letter-spacing: var(--espaco-letras-chapeu);
  text-transform: uppercase;
  color: var(--cor-texto-suave);
}

/* --- BARRA DE PROGRESSO (quiz e área de membros) ------------------------- */
/* Trilho de 12px (barra fina de 4px some para quem enxerga pouco). O texto
   "Você concluiu 4 de 21 dias" vai sempre por escrito ao lado — nunca só a
   porcentagem. Enche em 0,8s; parada com prefers-reduced-motion. */
.barra-progresso {
  height: 12px;
  background: var(--cor-primaria-clara);
  border-radius: var(--raio-redondo);
  overflow: hidden;
}
.barra-progresso__trecho {
  height: 100%;
  background: var(--cor-primaria);
  border-radius: var(--raio-redondo);
  transition: width var(--transicao-barra);
}
/* Dentro do bloco escuro: trilho um degrau mais claro, trecho petróleo-claro (12.1:1). */
.caixa--escura .barra-progresso, .escuro .barra-progresso { background: var(--cor-fundo-escuro-2); }
.caixa--escura .barra-progresso__trecho, .escuro .barra-progresso__trecho { background: var(--cor-primaria-clara); }

/* --- CAIXA DE CONTEÚDO --------------------------------------------------- */
/* Branca sobre o branco-salvia, desenhada pela borda (3.8:1), raio 16, sem
   sombra. Só três cartões "levantam" (.caixa--levanta): a oferta, o destaque
   do painel e a barra fixa. */
.caixa {
  padding: var(--e6);
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-grande);
}
@media (min-width: 720px) { .caixa { padding: var(--e8); } }
.caixa--realce  { background: var(--cor-fundo-realce); border-color: var(--cor-primaria); }
.caixa--levanta { box-shadow: var(--sombra-2); }
.caixa--compacta { padding: var(--e4); }

/* Variante ESCURA: o único bloco escuro por página. Texto branco, secundário
   em --cor-texto-sobre-escuro (11.2:1), linhas em --cor-borda-sobre-escuro.
   ⚠️ Nunca --cor-primaria nem --cor-acento como texto aqui dentro. */
.caixa--escura, .escuro {
  color: var(--cor-texto-invertido);
  background: var(--cor-fundo-escuro);
  border-color: var(--cor-borda-sobre-escuro);
}
.caixa--escura .miudo, .caixa--escura .subtitulo, .caixa--escura .rotulo-ficha,
.escuro .miudo, .escuro .subtitulo, .escuro .rotulo-ficha { color: var(--cor-texto-sobre-escuro); }
.caixa--escura a, .escuro a { color: var(--cor-texto-invertido); }
.caixa--escura hr, .escuro hr { border-color: var(--cor-borda-sobre-escuro); }
.caixa--escura .caixa, .escuro .caixa { background: var(--cor-fundo-escuro-2); border-color: var(--cor-borda-sobre-escuro); color: var(--cor-texto-invertido); }
.caixa--escura mark, .escuro mark { color: var(--cor-texto); }

/* Variante FICHA: a metáfora da receita. Linhas horizontais de 1px petróleo
   entre os dados, rótulo em caixa alta pequena acima e o valor abaixo.
   Usada no resumo do pedido, nos dados do certificado, nos selos contados. */
.ficha { margin: 0; padding: 0; list-style: none; }
.ficha__linha {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--e2) var(--e4);
  padding: var(--e3) 0;
  border-top: 1px solid var(--cor-borda);
  margin: 0;
}
.ficha__linha:last-child { border-bottom: 1px solid var(--cor-borda); }
.ficha__linha--sem-linha, .ficha__linha--sem-linha:last-child { border: 0; }
.ficha__rotulo {
  font-size: var(--texto-pequeno);
  font-weight: var(--peso-forte);
  letter-spacing: var(--espaco-letras-chapeu);
  text-transform: uppercase;
  color: var(--cor-texto-suave);
}
.ficha__valor { font-size: var(--texto-medio); font-weight: var(--peso-forte); font-variant-numeric: tabular-nums; }
.ficha__valor--grande { font-family: var(--fonte-titulo); font-size: var(--texto-titulo); line-height: 1.1; }
.ficha__valor--acento { color: var(--cor-acento); }
.caixa--escura .ficha__linha, .escuro .ficha__linha { border-color: var(--cor-borda-sobre-escuro); }
/* Ficha em pé: rótulo em cima, valor embaixo (selos contados, dado do certificado). */
.ficha--vertical .ficha__linha { flex-direction: column; align-items: flex-start; gap: var(--e1); }

/* Lista com ✓ de linha: o "Para você que…". Linhas de 1px entre os itens. */
.lista-marcada { margin: 0; padding: 0; list-style: none; }
.lista-marcada li {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  padding: var(--e3) 0;
  font-size: var(--texto-medio);
  border-top: 1px solid var(--cor-borda);
}
.lista-marcada li:last-child { border-bottom: 1px solid var(--cor-borda); }
.lista-marcada .icone { width: 24px; height: 24px; margin-top: .2em; color: var(--cor-primaria); }
.lista-marcada--limpa li, .lista-marcada--limpa li:last-child { border: 0; padding: var(--e2) 0; }

/* Cartão de garantia: borda esquerda 6px verde, escudo de linha, texto 21px.
   É a primeira objeção deste público; tem de ser vista antes do botão. */
.garantia {
  display: flex;
  gap: var(--e4);
  align-items: flex-start;
  padding: var(--e4) var(--e5);
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-left: 6px solid var(--cor-sucesso);
  border-radius: var(--raio);
  font-size: var(--texto-medio);
}
.garantia .icone { width: 40px; height: 40px; color: var(--cor-sucesso); margin-top: .1em; }
.garantia strong { color: var(--cor-sucesso-esc); }

/* --- ACORDEÃO (FAQ) ------------------------------------------------------ */
/* <details> com summary de 64px; o "+" dentro de um círculo de 44px em
   petróleo-claro (a pista de toque) vira "−" ao abrir — sem rotação. Linha de
   1px entre itens em vez de cartão por pergunta. Uma coluna sempre. */
.acordeao { max-width: var(--largura-estreita); border-top: 1px solid var(--cor-borda); }
.acordeao__item { border-bottom: 1px solid var(--cor-borda); }
.acordeao__pergunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  min-height: var(--e16);
  padding: var(--e3) 0;
  font-size: var(--texto-medio);
  font-weight: var(--peso-forte);
  cursor: pointer;
  list-style: none;
}
.acordeao__pergunta::-webkit-details-marker { display: none; }
.acordeao__pergunta::after {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--alvo-toque-menor);
  height: var(--alvo-toque-menor);
  font-size: var(--texto-titulo);
  font-weight: var(--peso-medio);
  line-height: 1;
  color: var(--cor-primaria);
  background: var(--cor-primaria-clara);
  border-radius: var(--raio-redondo);
}
.acordeao__item[open] > .acordeao__pergunta::after { content: "−"; }
.acordeao__pergunta:hover { color: var(--cor-primaria); }
.acordeao__resposta { padding: 0 0 var(--e5); max-width: var(--largura-leitura); }
.acordeao__resposta p:last-child { margin-bottom: 0; }

/* --- CABEÇALHO DO SITE ---------------------------------------------------- */
/* Compartilhado pela página principal, pelas legais e pelo painel (o
   acessibilidade.css ajusta .topo__interno/.topo__marca/.topo__acoes para a
   letra grande — por isso ele mora aqui e não num CSS de página).
   72px, branco translúcido com desfoque, linha de 1px embaixo. Sem menu
   escondido: uma pessoa de 60 anos não usa hambúrguer. */
.topo {
  position: sticky; top: 0; z-index: var(--z-topo);
  background: var(--cor-fundo-vidro);
  -webkit-backdrop-filter: blur(var(--desfoque-vidro));
          backdrop-filter: blur(var(--desfoque-vidro));
  border-bottom: 1px solid var(--cor-borda);
}
.topo__interno {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e4); min-height: 72px;
}
/* O logotipo em serifa, com um traço de régua em cobre embaixo — o único
   ornamento do cabeçalho. */
.topo__marca {
  position: relative;
  display: inline-flex; align-items: center;
  min-height: var(--alvo-toque-menor);
  padding-bottom: var(--e1);
  font-family: var(--fonte-titulo);
  font-weight: var(--peso-forte); font-size: var(--texto-grande);
  line-height: 1.1;
  color: var(--cor-texto); text-decoration: none;
}
.topo__marca::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 28px; height: 3px;
  background: var(--cor-acento);
  border-radius: var(--raio-redondo);
}
.topo__marca:hover { color: var(--cor-primaria); }
.topo__acoes { display: flex; align-items: center; gap: var(--e5); }
/* `:not(.botao)`: um botão de verdade dentro do cabeçalho mantém a cor dele —
   sem isso, a especificidade desta regra pintaria de petróleo o texto branco
   de um .botao--principal, e ele sumiria dentro do próprio fundo. */
.topo__acoes a:not(.botao), .topo__acoes .botao--texto, .topo__link {
  display: inline-flex; align-items: center;
  min-height: var(--alvo-toque-menor);
  font-size: var(--texto-corpo); font-weight: var(--peso-medio);
  color: var(--cor-primaria);
}
/* Âncoras de navegação só no desktop (Como funciona · 21 dias · Garantia). */
.topo__nav { display: none; }
@media (min-width: 900px) {
  .topo__nav { display: flex; gap: var(--e6); }
  .topo__nav a { text-decoration: none; }
  .topo__nav a:hover { text-decoration: underline; }
}

/* --- RODAPÉ --------------------------------------------------------------- */
/* Abre com a mesma linha de 3px petróleo das seções. Aviso de saúde em 16px
   secundário com 34em de largura; links legais com 44px de alvo. */
.rodape {
  margin-top: var(--espaco-secao);
  padding: var(--e10) 0 calc(var(--e10) + var(--alvo-toque-grande));   /* espaço para a barra fixa */
  border-top: var(--linha-secao) solid var(--cor-primaria);
  background: var(--cor-fundo);
  font-size: var(--texto-pequeno);
  color: var(--cor-texto-suave);
}
.rodape__marca { font-family: var(--fonte-titulo); font-weight: var(--peso-forte); font-size: var(--texto-grande); color: var(--cor-texto); margin-bottom: var(--e3); }
.rodape__aviso { max-width: var(--largura-leitura); margin-bottom: var(--e6); }
.rodape__links { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e6); margin: 0 0 var(--e5); padding: 0; list-style: none; }
.rodape__link { display: inline-flex; align-items: center; min-height: var(--alvo-toque-menor); font-size: var(--texto-corpo); }
.rodape__empresa { margin: 0; }

/* --- BARRA FIXA (pé da tela) ---------------------------------------------- */
/* Branca, linha de 1px em cima e sombra para cima; 72px + safe-area. Preço
   "por" em serifa à esquerda e o botão principal à direita. O JS a mostra a
   partir de 400px de rolagem (na /oferta só depois da revelação). */
.barra-fixa {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: var(--z-flutuante);
  padding: var(--e3) var(--e4);
  padding-bottom: calc(var(--e3) + env(safe-area-inset-bottom, 0px));
  background: var(--cor-fundo);
  border-top: 1px solid var(--cor-borda);
  box-shadow: var(--sombra-2);
}
.barra-fixa__interno {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e4);
  max-width: var(--largura-pagina); margin: 0 auto;
}
.barra-fixa__preco { font-family: var(--fonte-titulo); font-weight: var(--peso-forte); font-size: var(--texto-grande); line-height: 1.1; white-space: nowrap; }
.barra-fixa__preco .miudo { display: block; font-family: var(--fonte); font-weight: var(--peso-normal); }
.barra-fixa .botao { width: auto; flex: 1 1 60%; }

/* --- FAIXA DE COOKIES ----------------------------------------------------- */
/* Cartão branco no pé da tela com três botões de 52px. É a ÚNICA porta do
   consentimento: o rastreio.js só carrega pixel depois dela. */
.cookies {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: calc(var(--z-flutuante) + 1);
  max-height: 90vh; overflow: auto;
  padding: var(--e5) var(--e4);
  padding-bottom: calc(var(--e5) + env(safe-area-inset-bottom, 0px));
  background: var(--cor-fundo);
  border-top: var(--linha-secao) solid var(--cor-primaria);
  box-shadow: var(--sombra-2);
}
.cookies__interno { max-width: var(--largura-pagina); margin: 0 auto; }
.cookies__titulo { font-family: var(--fonte); font-size: var(--texto-medio); margin-bottom: var(--e2); }
.cookies__texto { margin-bottom: var(--e4); max-width: var(--largura-leitura); }
.cookies__acoes { display: flex; flex-wrap: wrap; gap: var(--e3); }
.cookies__acoes .botao { flex: 1 1 200px; }
.cookies__opcoes { margin-top: var(--e4); padding-top: var(--e4); border-top: 1px solid var(--cor-borda); }
@media (min-width: 720px) {
  .cookies__interno { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e4) var(--e8); }
  .cookies__conteudo { flex: 1 1 400px; }
  .cookies__acoes { flex: 0 1 auto; }
  .cookies__opcoes { flex-basis: 100%; }
}

/* --- ESTADO VAZIO / ERRO -------------------------------------------------- */
/* Usado pela página principal, pelas legais e pelo painel. Uma ficha com
   título, texto e SEMPRE uma saída (botão ou link). */
.vazio {
  max-width: var(--largura-leitura);
  margin: var(--e10) auto;
  padding: var(--e8) var(--e5);
  text-align: center;
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-grande);
}

/* --- ESQUELETO DE CARREGAMENTO ------------------------------------------- */
/* Blocos cinza-salvia no lugar do conteúdo que ainda não chegou. Parado com
   prefers-reduced-motion (o token de transição vira 0). */
.esqueleto {
  display: block;
  min-height: var(--e6);
  background: var(--cor-fundo-realce);
  border-radius: var(--raio);
}
.carregando { color: var(--cor-texto-suave); padding: var(--e8) 0; text-align: center; }