/* =========================================================
   Política de privacidade (carrega depois do estilo.css). Texto longo para ler: índice ao lado no computador,
   cada uso de dados num cartão (no celular uma tabela não caberia).
   ========================================================= */

/* ---------- abertura ---------- */
.p-abre{position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(90% 70% at 15% 0%, oklch(0.42 0.27 268 / .28), transparent 65%), var(--breu)}
.p-abre .envolve{padding-top:calc(var(--topo) + var(--e-7));padding-bottom:var(--e-6)}
.p-abre h1{font-size:var(--t-2xl);font-weight:500;line-height:1.08;letter-spacing:-.025em}
.p-data{margin-top:var(--e-4);color:var(--texto-2);font-size:var(--t-s)}
.migalhas{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-2);margin-bottom:var(--e-4);color:var(--texto-2);font-size:var(--t-xs)}
.migalhas a{display:inline-flex;align-items:center;min-height:var(--toque);color:var(--ciano);text-decoration:none}
.migalhas a:hover{text-decoration:underline}

/* ---------- corpo ---------- */
.p-corpo{display:grid;gap:var(--e-6);padding-block:var(--e-6) var(--e-8)}
.p-texto{max-width:72ch;color:var(--texto-2);line-height:1.75}
.p-texto section + section{margin-top:var(--e-7)}
.p-texto h2{color:var(--texto);font-size:var(--t-xl);line-height:1.2;letter-spacing:-.015em;scroll-margin-top:calc(var(--topo) + var(--e-5))}
.p-texto h2 + *{margin-top:var(--e-4)}
.p-texto p + p,.p-texto p + ul,.p-texto ul + p{margin-top:var(--e-4)}
.p-texto ul{display:grid;gap:var(--e-3);padding-left:1.3em}
.p-texto li::marker{color:var(--ciano)}
.p-texto strong{color:var(--texto);font-weight:600}
.p-texto a{color:var(--ciano)}

/* o resumo: cartão com borda em gradiente, como a resposta direta do blog */
.p-resumo{padding:var(--e-5);border:1px solid transparent;border-radius:20px;color:var(--texto);
  background:linear-gradient(oklch(0.165 0.03 262 / .92), oklch(0.165 0.03 262 / .92)) padding-box, linear-gradient(135deg, var(--ciano), transparent 55%) border-box;box-shadow:0 24px 60px -36px var(--ciano)}
.p-texto .p-resumo h2{font-size:var(--t-l)}

/* cada uso de dados é um cartão: situação no topo, dados, finalidade e base legal embaixo */
.p-texto .p-usos{list-style:none;padding:0;gap:var(--e-4);margin-top:var(--e-5)}
.p-usos li{padding:var(--e-5);border:1px solid var(--linha);border-radius:16px;background:oklch(0.165 0.03 262 / .55)}
.p-medicao{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-3);margin-top:var(--e-5);color:var(--texto)}      /* botão que desliga a medição de audiência (pulse.js) */
.p-usos h3{color:var(--texto);font-size:var(--t-m);line-height:1.3}
.p-usos dl{display:grid;gap:var(--e-1) var(--e-4);margin-top:var(--e-3);font-size:var(--t-s);line-height:1.6}
.p-usos dt{color:var(--texto);font-weight:600;font-size:var(--t-xs);letter-spacing:.06em;text-transform:uppercase}
.p-usos dd{margin:0 0 var(--e-2)}

/* índice "Nesta página" */
.p-indice{display:none}
.p-indice p{color:var(--texto-2);font:500 var(--t-xs)/1 var(--f-texto);letter-spacing:.08em;text-transform:uppercase}
.p-indice ol{list-style:none;padding:0;margin-top:var(--e-3);display:grid;border-left:1px solid var(--linha)}
.p-indice a{display:block;padding:var(--e-2) var(--e-4);margin-left:-1px;border-left:1px solid transparent;color:var(--texto-2);font-size:var(--t-s);line-height:1.4;text-decoration:none;transition:color .3s, border-color .3s}
.p-indice a:hover{color:var(--texto);border-left-color:var(--ciano)}

@media (min-width:700px){
  .p-usos dl{grid-template-columns:max-content 1fr}
  .p-usos dt{padding-top:.3em}
  .p-usos dd{margin:0}
}
@media (min-width:1000px){
  .p-corpo{grid-template-columns:240px minmax(0, 72ch);justify-content:space-between;align-items:start}
  .p-lado{position:sticky;top:calc(var(--topo) + var(--e-5))}
  .p-indice{display:block}
}
