/* o layout das matérias do Observatório (monta-observatorio2.cjs), com títulos de seção e listas */
  .materia { max-width: 760px; margin: 0 auto; padding-top: calc(var(--lp-topo) + 88px); padding-bottom: 96px; }
  .materia .pg-titulo { font-size: clamp(34px, 3.6vw, 52px); margin-top: 0; }
  .legal-minuta { max-width: 62ch; margin: 16px 0 0; color: var(--ds-cor-texto-2); font-size: 15px; line-height: 22px; text-wrap: pretty; }
  .materia-corpo { margin-top: 40px; }
  .materia-corpo p, .legal-lista { max-width: 62ch; margin: 0 0 20px; font-size: 17px; line-height: 28px; color: var(--ds-cor-texto); text-wrap: pretty; }
  .materia-corpo b { font-weight: 600; }
  .legal-h2 { max-width: 62ch; margin: 48px 0 16px; color: var(--ds-cor-texto); font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.012em; scroll-margin-top: 64px; }
  /* a âncora: o html desconta o cabeçalho (paginas.css, scroll-padding-top, 96 px a 1440), mas o véu dele vai a 136 px (152 no
     celular): mais 64 px, e o título pousa abaixo do véu, inteiro */
  .legal-h3 { max-width: 62ch; margin: 32px 0 12px; color: var(--ds-cor-texto); font-size: 17px; line-height: 22px; font-weight: 600; }
  .legal-lista { padding-left: 24px; }
  .materia-corpo p:has(+ .legal-lista) { margin-bottom: 8px; } /* a frase que apresenta a lista fica junto dela */
  .legal-lista li + li { margin-top: 8px; }
  .legal-lista li::marker { color: var(--ds-cor-texto-2); }
  /* os links do texto: no tamanho e na linha do texto, sublinhados; o hover acende o sublinhado, a pressão marca o fundo */
  .materia-corpo .link-texto { display: inline; padding: 0; font-size: inherit; line-height: inherit; color: var(--ds-cor-texto);
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
    transition: text-decoration-color var(--ds-dur-rapida) var(--ds-curva), background-color var(--ds-dur-rapida) var(--ds-curva); }
  @media (hover: hover) { .materia-corpo .link-texto:hover { text-decoration-color: currentColor; } }
  .materia-corpo .link-texto:active { background-color: var(--ds-cor-realce); transition-duration: 0ms; }
  @media (max-width: 760px) { .materia { padding-top: calc(var(--lp-topo) + 40px); } }
  /* o e-mail para copiar (ocultar-meu-nome.html): no texto, em peso 600 e selecionável num clique; logo abaixo da lista, as duas
     ações com a cara dos links do texto (sublinhado que acende no hover, fundo na pressão, anel no foco), alvo de 44 px no toque */
  .legal-email { font-weight: 600; -webkit-user-select: all; user-select: all; overflow-wrap: anywhere; }
  .materia-corpo .legal-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin: -4px 0 24px; }
  .legal-acao { position: relative; display: inline-grid; margin: 0; padding: 0; border: 0; border-radius: 2px; background: none; color: var(--ds-cor-texto);
    font: inherit; font-size: 17px; line-height: 28px; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
    transition: text-decoration-color var(--ds-dur-rapida) var(--ds-curva), background-color var(--ds-dur-rapida) var(--ds-curva); }
  .legal-acao::after { content: ''; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; transform: translateY(-50%); }
  @media (hover: hover) { .legal-acao:hover { text-decoration-color: currentColor; } }
  .legal-acao:active { background-color: var(--ds-cor-realce); transition-duration: 0ms; }
  .legal-acao:focus-visible { outline: 2px solid color-mix(in srgb, var(--ds-cor-texto) 72%, transparent); outline-offset: 2px; }
  /* "Copiar o e-mail" e "E-mail copiado" na mesma célula: a largura é a do maior, a troca não move nada */
  .legal-rot { grid-area: 1 / 1; }
  .legal-ok, .legal-acao[data-copiado] .legal-rot:not(.legal-ok) { visibility: hidden; }
  .legal-acao[data-copiado] .legal-ok { visibility: visible; }
  .legal-so-leitor { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }