/* =========================================================================
   Consentimento — aparência do aviso
   =========================================================================
   Uma folha só, carregada nas quatro páginas. Ela não traz cor própria: usa os
   tokens da página que estiver aberta, com `var()` encadeado. É o que faz o
   mesmo aviso sair sage no hub e na página do Dr. Carlos e ameixa na da
   Dra. Carla, sem três cópias do arquivo para divergirem na primeira correção.

   O encadeamento lê assim: usa `--brand-red` se existir; se não, `--lilas`; se
   não, o cinza escuro. As páginas dele definem o primeiro, a dela define o
   segundo, e o terceiro é a rede.
   ========================================================================= */

.consentimento {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  padding: var(--s2, 16px);
  /* `env()` para não encostar na barra de gestos do iPhone */
  padding-bottom: calc(var(--s2, 16px) + env(safe-area-inset-bottom, 0px));
  animation: consentimento-entra .22s ease both;
}

@keyframes consentimento-entra {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .consentimento { animation: none; }
}

.consentimento__caixa {
  position: relative;
  max-width: 720px;
  margin-inline: auto;
  display: grid;
  gap: var(--s3, 24px);
  padding: var(--s3, 24px);
  background: var(--paper, #fff);
  border: 1px solid var(--line-forte, #8A857D);
  border-radius: var(--radius, 4px);
  box-shadow: 0 8px 28px rgba(28, 27, 25, .16);
}

@media (min-width: 720px) {
  .consentimento__caixa {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--s4, 32px);
  }
}

.consentimento__texto {
  font-family: var(--sans, system-ui, sans-serif);
  font-size: .95rem;
  line-height: 1.5;
  color: var(--ink-soft, #57534E);
  /* medida de leitura, igual ao resto do site */
  max-width: 62ch;
}
.consentimento__texto p { margin: 0; }

.consentimento__titulo {
  margin-bottom: 4px !important;
  font-weight: 600;
  color: var(--ink, #1C1B19);
}

.consentimento__texto a { color: inherit; }
.consentimento__texto a:hover { color: var(--ink, #1C1B19); }

.consentimento__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2, 16px);
}

/* Os dois botões têm o MESMO tamanho, a MESMA altura e ficam lado a lado, no
   primeiro nível do aviso. É exigência do guia da ANPD e é também o que separa
   uma escolha de um teatro de escolha: recusa escondida atrás de "gerenciar
   preferências", ou desenhada como link secundário, não vale como consentimento
   livre. O aceite se destaca pela COR de marca, não por ser maior. */
.consentimento__botao {
  flex: 1 1 auto;
  min-width: 132px;
  min-height: 44px;
  padding: 10px var(--s3, 24px);
  font-family: var(--sans, system-ui, sans-serif);
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  border-radius: var(--radius, 4px);
  border: 1px solid var(--line-forte, #8A857D);
  background: transparent;
  color: var(--ink, #1C1B19);
  transition: border-color .18s ease, background-color .18s ease;
}
.consentimento__botao:hover { border-color: var(--ink, #1C1B19); }

.consentimento__botao--sim {
  background: var(--brand-red, var(--lilas, #1C1B19));
  border-color: var(--brand-red, var(--lilas, #1C1B19));
  color: #fff;
}
.consentimento__botao--sim:hover {
  background: var(--brand-red-dark, var(--lilas-dark, #000));
  border-color: var(--brand-red-dark, var(--lilas-dark, #000));
}

.consentimento__fechar {
  position: absolute;
  top: 4px; right: 8px;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  font-size: 1.3rem; line-height: 1;
  cursor: pointer;
  background: transparent; border: 0;
  color: var(--ink-soft, #57534E);
  border-radius: var(--radius, 4px);
}
.consentimento__fechar:hover { color: var(--ink, #1C1B19); }

/* O botão do rodapé que reabre o aviso. É <button> e não <a> porque não navega
   para lugar nenhum, mas tem que parecer com os outros links de lá. */
.consentimento__link {
  padding: 0;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.consentimento__link:hover { color: var(--on-dark, #fff); }