.abertura-nota { color: var(--texto-2); }
@media (min-width: 481px) {
  .abertura-acoes { align-items: center; column-gap: var(--e5); }
}

.cabeca-rotulo { grid-column: 1 / -1; margin-bottom: var(--e3); }
/* seção só com o cabeçalho (riscos psicossociais): sem o vão até um conteúdo que não existe */
.secao-cabeca:last-child { margin-bottom: 0; }

.bento {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--calha);
}
.bento-cartao {
  grid-column: span 5; min-width: 0;
  display: flex; flex-direction: column;
  padding: var(--cartao-pad);
  background: var(--fundo); border-radius: var(--raio-cartao);
}
.bento-cartao--largo { grid-column: span 7; }
.bento-cartao :is(h3, p) { overflow-wrap: anywhere; }
.bento-texto { margin-top: var(--e3); max-inline-size: 30em; }
.bento-fatos {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--calha);
  margin-top: auto; padding-top: var(--e7);
  color: var(--texto-2);
}
.bento-fatos li { border-top: 1px solid var(--linha); padding-top: var(--e3); }

@media (max-width: 1068px) {
  .bento-cartao, .bento-cartao--largo { grid-column: span 6; }
  /* cartão estreito: um fato por linha, cada um com o seu fio */
  .bento-fatos { grid-template-columns: minmax(0, 1fr); row-gap: var(--e3); }
}
@media (max-width: 734px) {
  .bento { grid-template-columns: minmax(0, 1fr); gap: var(--e3); }
  .bento-cartao, .bento-cartao--largo { grid-column: auto; }
}

.solucoes {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--calha); row-gap: var(--e9);
}
.solucoes > li { display: flex; flex-direction: column; min-width: 0; }
.solucoes h3 { overflow-wrap: anywhere; }
.solucao-texto { margin-top: var(--e3); color: var(--texto-2); max-inline-size: 30em; }
.solucao-lista { margin-top: var(--e6); }
.solucao-lista li { padding-block: var(--e3); border-top: 1px solid var(--linha); }
.solucao-mais { margin-top: var(--e5); align-self: flex-start; justify-self: start; }
@supports (grid-template-rows: subgrid) {
  @media (min-width: 1069px) {
    .solucoes { row-gap: 0; }
    .solucoes > li { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
  }
}
/* telas médias e celular: uma solução por linha */
@media (max-width: 1068px) {
  .solucoes { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 735px) and (max-width: 1068px) {
  .solucoes > li {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "icone ." "titulo lista" "texto lista" "mais lista";
    grid-template-rows: auto auto auto 1fr;
    column-gap: var(--calha);
  }
  .solucoes .cartao-icone { grid-area: icone; }
  .solucoes h3 { grid-area: titulo; }
  .solucao-texto { grid-area: texto; }
  .solucao-lista { grid-area: lista; margin-top: 0; }
  .solucao-mais { grid-area: mais; align-self: start; }
}
@media (max-width: 734px) {
  .solucao-lista { max-inline-size: 30em; }
}

.texto-link {
  color: var(--petroleo);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em;
  border-radius: 4px;
}
.texto-link:hover { text-decoration-thickness: 2px; }

.chamada .secao-cabeca { margin-bottom: var(--e7); }
.botao--claro { background: var(--fundo); border-color: var(--fundo); color: var(--petroleo); }
.botao--claro:hover { background: var(--fundo-2); border-color: var(--fundo-2); }
.botao--claro:active { background: var(--pressionado); border-color: var(--pressionado); }