/* =============================================================================
   Política de Privacidade — layout de documento
   -----------------------------------------------------------------------------
   Duas colunas: índice grudado à esquerda, texto à direita numa medida de
   leitura confortável. No celular o índice vira um <details> recolhido.
   Barlow só nos títulos (regra do projeto: em texto miúdo ela borra).
   ============================================================================= */

/* ---- Cabeçalho ---------------------------------------------------------- */
.pp-head{position:relative;overflow:hidden;padding:56px 0 44px;background:var(--paper)}
.pp-head .wrap{position:relative;z-index:1}
/* As outras páginas trazem o breadcrumb no CSS delas, em versão para fundo
   escuro. Aqui o fundo é claro, então ele é redefinido. */
.pp-head .breadcrumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-family:var(--disp);font-size:12.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);margin-bottom:22px}
.pp-head .breadcrumb a{color:var(--teal)}
.pp-head .breadcrumb a:hover{color:var(--red)}
.pp-head .breadcrumb .sep{color:#9FB0AF}
.pp-head .breadcrumb .cur{color:var(--ink)}
.pp-head h1{font-family:var(--disp);font-weight:800;font-size:clamp(40px,6vw,68px);line-height:1.02;letter-spacing:-.02em;color:var(--ink);margin:10px 0 0}
.pp-head h1 em{font-style:normal;color:var(--teal)}
.pp-dek{max-width:62ch;margin-top:18px;font-size:17.5px;line-height:1.6;color:var(--text)}
.pp-meta{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.pp-chip{font-size:12.5px;font-weight:600;color:var(--teal);background:#E2EFEE;border:1px solid #CFE3E2;border-radius:999px;padding:6px 13px}

/* ---- Grade do documento -------------------------------------------------- */
.pp-body{background:var(--surface);border-top:1px solid var(--line);padding:44px 0 80px}
.pp-grid{display:grid;grid-template-columns:290px minmax(0,1fr);gap:52px;align-items:start}

/* ---- Índice -------------------------------------------------------------- */
/* A coluna gruda ao rolar. Índice + certificado passam da altura de telas
   baixas, então ela rola por dentro em vez de esconder o que sobra. */
.pp-toc{position:sticky;top:100px;max-height:calc(100vh - 128px);overflow-y:auto;overscroll-behavior:contain;padding-right:4px}
.pp-toc::-webkit-scrollbar{width:6px}
.pp-toc::-webkit-scrollbar-thumb{background:#D7DEDD;border-radius:3px}
.pp-toc-box{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:20px 22px}
.pp-toc-box>summary{font-family:var(--disp);font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);cursor:pointer;list-style:none}
.pp-toc-box>summary::-webkit-details-marker{display:none}
.pp-toc-box ol{list-style:none;counter-reset:pp;margin-top:14px}
.pp-toc-box li{counter-increment:pp;margin:0}
.pp-toc-box a{display:flex;gap:10px;padding:7px 0;font-size:14px;line-height:1.35;color:var(--text);border-left:2px solid transparent;padding-left:12px;margin-left:-14px;transition:color .15s,border-color .15s}
.pp-toc-box a::before{content:counter(pp) ".";color:var(--muted);font-variant-numeric:tabular-nums;flex:none}
.pp-toc-box a:hover{color:var(--teal)}
.pp-toc-box a.atual{color:var(--teal);font-weight:600;border-left-color:var(--teal)}
.pp-toc-box a.atual::before{color:var(--teal)}

/* ---- Faixa do certificado (entre a abertura e o documento) --------------- */
.pp-certband{background:var(--paper);border-top:1px solid var(--line);padding:34px 0}
.pp-certband .wrap{display:grid;grid-template-columns:210px minmax(0,1fr);gap:34px;align-items:center}
.pp-cert-lb{display:block;font-family:var(--disp);font-weight:800;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.pp-cert-txt h2{font-family:var(--disp);font-weight:800;font-size:clamp(22px,2.4vw,28px);line-height:1.12;letter-spacing:-.01em;color:var(--ink)}
.pp-cert-txt h2 em{font-style:normal;color:var(--teal)}
.pp-cert-txt>p{font-size:15.5px;line-height:1.6;color:var(--text);max-width:62ch;margin-top:10px}
.pp-cert-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:18px}
.pp-cert-acoes .btn{text-transform:none;letter-spacing:0;font-size:15px}
.pp-cert-img{display:block;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;transition:border-color .18s,transform .18s}
.pp-cert-img img{display:block;width:100%;height:auto}
.pp-cert-img:hover{border-color:var(--teal);transform:translateY(-2px)}
.pp-cert-dl{display:flex;flex-wrap:wrap;gap:0 34px;margin:18px 0 0;border-top:1px solid var(--line)}
.pp-cert-dl>div{display:flex;align-items:baseline;gap:9px;padding:9px 0}
.pp-cert-dl dt{font-size:12.5px;color:var(--muted);flex:none}
.pp-cert-dl dd{font-family:var(--disp);font-weight:700;font-size:13px;color:var(--ink);text-align:right}
.pp-cert-go{font-size:14px;font-weight:600;color:var(--teal);text-decoration:none;padding:5px 0}
.pp-cert-go::after{content:" →"}
.pp-cert-go:hover{color:var(--red)}

/* ---- Texto --------------------------------------------------------------- */
.pp-doc{max-width:74ch}
.pp-doc section{padding-top:14px;margin-bottom:38px;scroll-margin-top:100px}
.pp-doc h2{font-family:var(--disp);font-weight:800;font-size:clamp(23px,2.6vw,29px);line-height:1.14;letter-spacing:-.01em;color:var(--ink);margin-bottom:14px}
.pp-doc p{font-size:16.5px;line-height:1.72;color:var(--text);margin-bottom:15px}
/* :not(.btn) porque o bloco do jornalista é escuro e tem um botão dentro do
   documento: sem isso o texto do botão ficava teal sobre teal, invisível. */
.pp-doc a:not(.btn){color:var(--teal);text-decoration:underline;text-underline-offset:2px}
.pp-doc a:not(.btn):hover{color:var(--red)}
.pp-fim{font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:18px;margin-top:8px}

/* ---- Resumo -------------------------------------------------------------- */
.pp-resumo{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:28px 30px;margin-bottom:26px}
.pp-resumo h2{font-family:var(--disp);font-weight:800;font-size:22px;color:var(--ink)}
.pp-resumo-nota{font-size:13.5px;color:var(--muted);margin:8px 0 16px}
.pp-resumo ul{list-style:none;display:grid;gap:12px}
.pp-resumo li{font-size:15.5px;line-height:1.6;color:var(--text);padding-left:18px;position:relative}
.pp-resumo li::before{content:"";position:absolute;left:0;top:10px;width:7px;height:7px;border-radius:50%;background:var(--grad)}
.pp-resumo b{color:var(--ink)}

/* ---- Faixa do jornalista ------------------------------------------------- */
.pp-jorn{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px;background:var(--ink);color:#fff;border-radius:18px;padding:28px 30px;margin-bottom:34px}
.pp-jorn h2{font-family:var(--disp);font-weight:800;font-size:22px;line-height:1.14;color:#fff;margin-bottom:8px}
.pp-jorn p{font-size:15px;line-height:1.55;color:#C9D6D5;max-width:56ch;margin:0}
.pp-jorn .btn{flex:none;text-transform:none;letter-spacing:0;font-size:15px}
/* O contato é uma PESSOA: foto, nome, cargo e os dois caminhos (WhatsApp e
   e-mail). Quem pede para sair de um mailing não quer falar com uma caixa. */
.pp-jorn-pessoa{flex:none;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"foto id" "acoes acoes";gap:12px 14px;align-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:16px 18px;min-width:290px}
.ppj-foto{grid-area:foto;width:72px;height:72px;border-radius:50%;object-fit:cover;border:2px solid rgba(102,200,198,.5)}
.ppj-id{grid-area:id;min-width:0}
.ppj-id b{display:block;font-family:var(--disp);font-weight:800;font-size:19px;color:#fff;line-height:1.15}
.ppj-id span{display:block;font-size:13px;color:#9FC3C2;margin-top:3px}
.ppj-acoes{grid-area:acoes;display:flex;flex-direction:column;gap:9px;align-items:stretch}
.pp-jorn .ppj-wpp{width:100%;justify-content:center;gap:9px}
.pp-jorn .ppj-wpp svg{width:18px;height:18px;fill:currentColor;flex:none}
.ppj-email{font-size:14.5px;font-weight:600;color:#7FD3D2;text-align:center;word-break:break-all;border-bottom:1px solid rgba(127,211,210,.35);padding-bottom:2px;align-self:center}
.ppj-email:hover{color:#fff;border-color:currentColor}

/* ---- Cartão do encarregado ----------------------------------------------- */
.pp-dpo{display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:24px 26px;margin-top:6px}
.pp-dpo-lb{display:block;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.pp-dpo-l b{display:block;font-size:17px;color:var(--ink)}
/* quem é o encarregado: rosto + perfil público, ao lado do nome */
.pp-dpo-quem{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.pp-dpo-foto{width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid #CFE3E2;flex:none}
.pp-dpo-in{display:inline-flex;align-items:center;gap:7px;margin-top:5px;font-size:14px;font-weight:600;color:var(--teal)}
.pp-dpo-in svg{width:15px;height:15px;fill:currentColor}
.pp-dpo-in:hover{color:var(--red)}
.pp-dpo address{font-style:normal;font-size:15px;line-height:1.6;color:var(--text)}
.pp-dpo-r{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.pp-dpo-link{font-size:14.5px;font-weight:600;color:var(--teal);text-decoration:none;border-bottom:1px solid #CFE3E2;padding-bottom:2px}
.pp-dpo-link:hover{color:var(--red);border-color:currentColor}

/* ---- Celular ------------------------------------------------------------- */
@media(max-width:900px){
  .pp-grid{grid-template-columns:1fr;gap:26px}
  .pp-toc{position:static;max-height:none;overflow:visible;padding-right:0}
  .pp-toc-box>summary{list-style:revert;cursor:pointer}
  .pp-doc{max-width:none}
  .pp-jorn{flex-direction:column;align-items:flex-start}
  .pp-jorn .btn{width:100%;justify-content:center}
  .pp-jorn-pessoa{width:100%;min-width:0}
  /* o número não pode quebrar em duas linhas dentro do botão */
  .pp-jorn .ppj-wpp{font-size:14px;padding:14px 16px;white-space:nowrap}
  /* O certificado empilha: miniatura em cima, com largura contida para não
     virar um pôster ocupando a tela inteira antes do texto. */
  .pp-certband .wrap{grid-template-columns:1fr;gap:22px;justify-items:start}
  .pp-cert-img{max-width:240px}
}
@media(max-width:560px){
  .pp-head{padding:38px 0 32px}
  .pp-resumo,.pp-jorn,.pp-dpo{padding:22px 20px}
  .pp-doc p{font-size:16px}
}

/* ---- Impressão: sai só o documento -------------------------------------- */
@media print{
  header.nav,footer,.float-cta,.pp-toc,.pp-jorn .btn,#leadModal{display:none!important}
  .pp-body{background:#fff;border:0;padding:0}
  .pp-grid{display:block}
  .pp-doc{max-width:none}
  .pp-doc section{page-break-inside:avoid}
  .pp-head{padding:0 0 18px}
  a{color:#000!important;text-decoration:none!important}
}