/* A pagina de Funcionalidades no modelo 2a (#4947).
   Herda tudo de landing-2a.css e acrescenta so o que e daqui: o sumario dos
   quatro atos e a ficha de cada funcao. */

/* ─────────────────────────────── o sumario ───────────────────────────────
   41 funcoes numa pagina so viram rolagem infinita sem um mapa no alto. O
   sumario nao e enfeite: e o que faz a pagina servir para consulta, e nao so
   para leitura de cima a baixo. */
.sum { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px;
       background: var(--l-linha); border-radius: 12px; overflow: hidden;
       padding: 0; max-width: var(--l-larg); }
.sum-ato { background: var(--l-creme); padding: 26px 28px; }
.sum-ato-n { font-family: var(--l-serif); font-size: 15px; color: var(--l-teal-ink); margin-bottom: 4px; }
.sum-ato-nome { font-size: 22px; font-weight: 700; margin-bottom: 14px; }
.sum-lista { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.sum-lista a { font-size: 14.5px; color: var(--l-tinta-3); line-height: 1.4; }
.sum-lista a:hover { color: var(--l-teal-ink); }

/* ─────────────────────────── a faixa de cada ato ─────────────────────────── */
.ato-bloco:nth-child(even) { background: var(--l-creme-2); }
.ato-cab { padding-bottom: 0; }
.ato-cab .lp-ato-sub { margin-top: -8px; }
.ato-cab .lp-aparte { max-width: 620px; margin-top: 12px; }

/* ─────────────────────────── a ficha da funcao ───────────────────────────
   Texto a esquerda, tela a direita, e um fio acima de cada uma. O numero grande
   e em serif porque ele e o unico ponto de descanso do olho numa pagina com 41
   blocos parecidos. */
.fn-lista { padding-top: 24px; display: grid; gap: 0; }
.fn {
  display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start;
  padding: 40px 0; border-top: 1px solid var(--l-linha);
  scroll-margin-top: 96px;     /* o topo grudento nao pode cobrir a funcao */
}
.fn:first-child { border-top: 0; }
.fn-txt { min-width: 0; }
.fn-n { font-family: var(--l-serif); font-size: 15px; color: var(--l-teal-ink); margin-bottom: 6px; }
.fn-nome { font-size: 26px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 12px; }
.fn-frase { font-size: 17px; line-height: 1.6; color: var(--l-tinta-2); margin: 0 0 16px; }
.fn-como { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.fn-como li { font-size: 15.5px; line-height: 1.55; color: var(--l-tinta-3); }
.fn-como li::marker { color: var(--l-teal); }
.fn-img { border-radius: 12px; overflow: hidden; border: 1px solid var(--l-linha); }
.fn-img img { display: block; width: 100%; height: auto; }

/* Funcao sem print ocupa a largura toda, em vez de deixar meia pagina vazia */
.fn:not(:has(.fn-img)) { grid-template-columns: 1fr; }
.fn:not(:has(.fn-img)) .fn-como { columns: 2; column-gap: 44px; }

.fn-hero { padding-bottom: 40px; }
.fn-hero .lp-lead, .fn-hero .lp-lead-2 { max-width: 680px; }

@media (max-width: 980px) {
  .sum { grid-template-columns: 1fr; }
  .fn { grid-template-columns: 1fr; gap: 24px; padding: 32px 0; }
  .fn:not(:has(.fn-img)) .fn-como { columns: 1; }
  .fn-nome { font-size: 22px; }
}