/* Central de Privacidade — site e blog. Cores próprias, porque mora fora do
   .blog-root e o site tem outra paleta; seguem o data-theme do <html>. */
.pv {
  --pv-papel: #ffffff;
  --pv-tinta: #15131f;
  --pv-suave: #6a6880;
  --pv-borda: #e4e3f1;
  --pv-acento: #6c5ce7;
  --pv-sombra: rgba(31, 15, 102, 0.5);
  --pv-veu: rgba(12, 8, 30, 0.42);
  --pv-vidro: rgba(255, 255, 255, 0.88);
  --pv-vidro-borda: rgba(255, 255, 255, 0.6);
  font-family: "Inter", "Syne", system-ui, sans-serif;
  color: var(--pv-tinta);
  box-sizing: border-box;
}
[data-theme="dark"] .pv {
  --pv-papel: #15151f;
  --pv-tinta: #ffffff;
  --pv-suave: #9b9bb2;
  --pv-borda: #24243a;
  --pv-acento: #8b7bff;
  --pv-sombra: rgba(0, 0, 0, 0.8);
  --pv-veu: rgba(0, 0, 0, 0.55);
  --pv-vidro: rgba(21, 18, 34, 0.86);
  --pv-vidro-borda: rgba(255, 255, 255, 0.08);
}
.pv *, .pv *::before, .pv *::after { box-sizing: border-box; }

.pv-titulo { margin: 0; font: 600 16px/1.2 "Syne", sans-serif; letter-spacing: -0.01em; color: var(--pv-tinta); }
.pv-texto { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--pv-suave); }
.pv-texto a {
  color: var(--pv-tinta); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--pv-tinta) 30%, transparent);
}
.pv-acoes { display: flex; align-items: center; gap: 8px; margin: 0; }
.pv-btn {
  appearance: none; margin: 0; border: 1px solid var(--pv-borda); background: transparent; color: var(--pv-tinta);
  font: 600 13px/1 "Syne", sans-serif; padding: 11px 18px; border-radius: 999px; cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.pv-btn:hover { border-color: color-mix(in srgb, var(--pv-tinta) 35%, transparent); }
.pv-btn--forte { background: var(--pv-tinta); border-color: var(--pv-tinta); color: var(--pv-papel); }
.pv-btn--forte:hover { background: var(--pv-acento); border-color: var(--pv-acento); color: #fff; }
.pv-btn--texto { border: 0; padding: 11px 6px; color: var(--pv-suave); }
.pv-btn--texto:hover { color: var(--pv-tinta); }
.pv-btn:focus-visible, .pv-reabrir:focus-visible, .pv-texto a:focus-visible,
.pv-chave input:focus-visible + span { outline: 2px solid var(--pv-acento); outline-offset: 2px; }

/* O cartão no canto, na primeira visita: pequeno e em vidro, para não pesar
   sobre o hero do site nem sobre a leitura. */
.pv-cartao {
  position: fixed; left: 20px; bottom: 20px; z-index: 2147483000;
  width: min(312px, calc(100vw - 32px)); padding: 16px 16px 12px; border-radius: 18px;
  background: var(--pv-vidro); border: 1px solid var(--pv-vidro-borda);
  backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: 0 18px 50px -24px var(--pv-sombra);
  display: grid; gap: 10px;
  animation: pv-sobe 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.pv-cartao .pv-texto { font-size: 12.5px; line-height: 1.5; color: var(--pv-tinta); opacity: 0.78; }
.pv-cartao .pv-acoes { gap: 6px; }
.pv-cartao .pv-btn { font-size: 12px; padding: 8px 14px; }
.pv-cartao .pv-btn--texto { margin-right: auto; padding: 8px 2px; }
/* No site, o seletor de idioma mora no mesmo canto: o cartão fica acima dele. */
body:has(.lang-switch) .pv-cartao { bottom: 80px; }

/* Depois da escolha: o botão de rever, no mesmo canto */
.pv-reabrir {
  position: fixed; left: 24px; bottom: 24px; z-index: 2147482000;
  width: 44px; height: 44px; padding: 0; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--pv-borda); background: var(--pv-papel); color: var(--pv-suave); cursor: pointer;
  box-shadow: 0 12px 30px -16px var(--pv-sombra);
  transition: color 0.2s ease, transform 0.2s ease;
}
.pv-reabrir:hover { color: var(--pv-tinta); transform: translateY(-2px); }

/* Personalizar */
.pv-fundo {
  position: fixed; inset: 0; z-index: 2147483001; padding: 16px;
  background: var(--pv-veu); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: grid; place-items: center;
  animation: pv-aparece 0.25s ease;
}
.pv-painel {
  width: min(460px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 26px; border-radius: 26px;
  background: var(--pv-papel); border: 1px solid var(--pv-borda);
  box-shadow: 0 40px 100px -30px var(--pv-sombra);
  display: grid; gap: 18px;
  animation: pv-sobe 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.pv-lista { list-style: none; margin: 0; padding: 0; display: grid; }
.pv-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: center;
  padding: 14px 0; border-top: 1px solid var(--pv-borda);
}
.pv-item:last-child { border-bottom: 1px solid var(--pv-borda); }
.pv-item__nome { font: 600 14px/1.3 "Syne", sans-serif; color: var(--pv-tinta); }
.pv-item__desc { grid-column: 1; font-size: 12.5px; line-height: 1.5; color: var(--pv-suave); }
.pv-item__fixo { grid-row: 1 / 3; grid-column: 2; font-size: 12px; color: var(--pv-suave); }
.pv-chave { grid-row: 1 / 3; grid-column: 2; position: relative; display: inline-block; width: 42px; height: 24px; cursor: pointer; }
.pv-chave input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pv-chave span {
  position: absolute; inset: 0; border-radius: 999px; pointer-events: none;
  background: color-mix(in srgb, var(--pv-tinta) 16%, transparent); transition: background-color 0.2s ease;
}
.pv-chave span::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.pv-chave input:checked + span { background: var(--pv-acento); }
.pv-chave input:checked + span::after { transform: translateX(18px); }
.pv-acoes--fim { justify-content: flex-end; }

@media (max-width: 600px) {
  .pv-cartao { left: 16px; right: 16px; bottom: 16px; width: auto; }
  body:has(.lang-switch) .pv-cartao { bottom: 72px; }
  .pv-reabrir { left: 16px; bottom: 16px; }
}

@keyframes pv-sobe { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes pv-aparece { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .pv-cartao, .pv-painel, .pv-fundo { animation: none; }
  .pv-reabrir, .pv-btn, .pv-chave span, .pv-chave span::after { transition: none; }
}

/* Os links "Privacidade" dos rodapés são botões: abrem o painel. */
button[data-privacidade] {
  appearance: none; margin: 0; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; cursor: pointer; transition: color 0.2s ease;
}
button[data-privacidade]:hover { color: var(--pv-acento, #6c5ce7); }
/* No rodapé, "Privacidade" fica junto do ©. */
.footer-fim { display: inline-flex; align-items: center; gap: 20px; }
