/* page-privacidade.css
   CSS desta página. Partilhado pelas versões PT e EN
   (privacidade.html, privacy.html) — uma só fonte, para não divergirem. */

  /* ============================================================
     PRIVACIDADE · política de dados e informação legal
     ============================================================ */

  /* HERO — mais contido que os das outras páginas: é uma página de
     leitura, não de sedução. O h1 desce de escala por isso mesmo. */
  .pv-hero {
    padding: 180px var(--gutter) 56px;
    border-bottom: 1px solid var(--line);
  }
  .pv-hero .eyebrow { display: block; margin-bottom: 24px; }
  .pv-hero h1 {
    font-family: var(--serif);
    font-size: clamp(48px, 7vw, 104px);
    line-height: 0.9;
    letter-spacing: -0.02em;
    font-weight: 400;
    margin: 0;
    max-width: 14ch;
  }
  .pv-hero h1 em { font-style: italic; color: var(--accent); }
  .pv-hero p {
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink-2);
    max-width: 56ch;
    margin: 28px 0 0;
  }
  .pv-updated {
    margin-top: 28px;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--ink-3);
  }

  /* CORPO — coluna única, medida de leitura curta. O número da secção
     vive na margem em ecrãs largos e passa para cima do título quando
     deixa de caber. */
  .pv-body {
    padding: 72px var(--gutter) 96px;
    max-width: calc(820px + 2 * var(--gutter));
  }
  /* padding: 0 anula o `section { padding: 120px 0 }` genérico do styles.css —
     estas secções são divisões de um texto corrido, não secções de página. */
  .pv-sec { margin-bottom: 64px; padding: 0; }
  .pv-sec:last-child { margin-bottom: 0; }
  /* O número da secção fica POR CIMA do título, não na margem. Na margem
     precisaria de mais espaço do que o --gutter alguma vez dá: a 1280px o
     gutter é 45px, e um recuo de 64px punha o número fora do ecrã. */
  .pv-sec > h2 {
    font-family: var(--serif);
    font-size: clamp(26px, 3.2vw, 36px);
    line-height: 1.15;
    font-weight: 400;
    margin: 0 0 20px;
    padding-top: 26px;
    position: relative;
  }
  .pv-sec > h2::before {
    content: attr(data-n);
    position: absolute;
    left: 0;
    top: 0;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--accent);
  }
  .pv-sec p,
  .pv-sec li {
    font-size: 16px;
    line-height: 1.7;
    color: var(--ink-2);
  }
  .pv-sec p { margin: 0 0 16px; max-width: 66ch; }
  .pv-sec p:last-child { margin-bottom: 0; }
  .pv-sec ul {
    margin: 0 0 16px;
    padding-left: 0;
    list-style: none;
    max-width: 66ch;
  }
  .pv-sec ul li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 12px;
  }
  .pv-sec ul li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.72em;
    width: 6px;
    height: 1px;
    background: var(--accent);
  }
  .pv-sec strong { color: var(--ink); font-weight: 500; }
  .pv-sec a {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--line-2);
    transition: color .25s var(--ease), text-decoration-color .25s var(--ease);
  }
  .pv-sec a:hover { color: var(--accent); text-decoration-color: var(--accent); }

  /* Alvo de toque. Um link isolado numa linha — o telefone, a CNPD, o CICAP,
     o livro de reclamações — é destino de dedo, não texto corrido, por isso
     não cai na exceção da WCAG 2.5.8 para links dentro de uma frase. A caixa
     natural do <a> tem 18-19px de altura; o padding leva-a acima dos 24px. */
  .pv-id dd a,
  .pv-box dd a,
  .pv-sec > p > a:only-child {
    display: inline-block;
    padding: 4px 0;
  }

  /* IDENTIFICAÇÃO — os dados do responsável, em pares rótulo/valor */
  .pv-id {
    margin: 0;
    border-top: 1px solid var(--line);
  }
  .pv-id > div {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 16px 32px;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
  }
  .pv-id dt {
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ink-3);
    padding-top: 4px;
  }
  .pv-id dd {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
  }

  /* CAIXA — usada pelo CICAP e pelo livro de reclamações */
  .pv-box {
    border: 1px solid var(--line);
    border-left: 2px solid var(--accent);
    padding: 28px 32px;
    margin: 24px 0 0;
    background: var(--bg-2);
  }
  .pv-box h3 {
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--ink);
    margin: 0 0 16px;
  }
  .pv-box dl {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 20px;
    font-size: 15px;
  }
  .pv-box dt {
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-3);
    padding-top: 3px;
  }
  .pv-box dd { margin: 0; color: var(--ink-2); line-height: 1.5; }

  @media (max-width: 720px) {
    .pv-hero { padding-top: 120px; }
    .pv-body { padding-top: 56px; }
    .pv-sec { margin-bottom: 48px; }
    .pv-id > div { grid-template-columns: 1fr; gap: 6px; }
    .pv-box { padding: 22px 20px; }
    .pv-box dl { grid-template-columns: 1fr; gap: 4px 0; }
    .pv-box dd { margin-bottom: 12px; }
    .pv-box dd:last-child { margin-bottom: 0; }
  }