/* As soluções por setor: o acervo (`conteudo.css`) com a trilha, os passos, o exemplo antes e depois e a oferta. */
.solucao-trilha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 20px; color: var(--texto-sobre-foto); font-size: 14px; }
.solucao-trilha a { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.solucao-trilha a:hover { color: var(--landing-action); }
.solucao-trilha a:active { color: var(--ink); }
.solucao-trilha [aria-current="page"] { color: var(--ink); font-weight: 600; }
.solucao-hero .landing-hero__lead { max-width: 72ch; }
.solucao-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.solucao-titulo { margin: 0 0 24px; }

.solucao-setores { margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.solucao-setores h3 { margin: 0; font-size: 20px; line-height: 1.35; letter-spacing: -.02em; overflow-wrap: anywhere; }
.solucao-setores h3 a:hover { color: var(--landing-action); text-decoration: underline; text-underline-offset: 4px; }
.solucao-setores h3 a:active { color: var(--ink); }

.solucao-duas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.solucao-duas :is(.solucao-passos, .solucao-lista) { width: 100%; }

.solucao-texto h2 { margin: 40px 0 16px; font-size: clamp(22px, 2.2vw, 28px); }
.solucao-texto h2:first-child { margin-top: 0; }
.solucao-passos { display: grid; gap: 12px; margin: 0 0 24px; padding: 0; list-style: none; counter-reset: passo; }
.solucao-passos li { position: relative; min-width: 0; padding: 16px 18px 16px 62px; border: 1px solid var(--landing-rule); border-radius: 10px; background: var(--landing-soft); counter-increment: passo; }
.solucao-passos li::before { content: counter(passo); position: absolute; top: 16px; left: 16px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--landing-action); color: var(--paper); font-size: 14px; font-weight: 700; }
.solucao-passos h3 { margin: 0 0 6px; font-size: 17px; }
.solucao-passos p { margin: 0; color: var(--muted); line-height: 1.65; }

.solucao-exemplo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0 0 24px; }
.solucao-exemplo__lado { min-width: 0; padding: 18px; border: 1px solid var(--landing-rule); border-radius: 10px; background: var(--surface); }
.solucao-exemplo__lado--depois { border-color: var(--landing-action); background: var(--landing-soft); }
.solucao-exemplo .eyebrow { margin: 0 0 10px; }
.solucao-exemplo pre { margin: 0; padding: 0; border: 0; background: none; color: var(--ink); font: 15px/1.75 var(--font-body); white-space: pre-wrap; overflow-wrap: anywhere; }
.solucao-exemplo mark { padding: 0 3px; border-radius: 4px; background: color-mix(in srgb, var(--landing-action) 18%, var(--surface)); color: var(--ink); font-weight: 600; }
.solucao-exemplo figcaption { grid-column: 1 / -1; color: var(--muted); font-size: 13px; line-height: 1.6; }
.solucao-codigo { margin: 0 0 24px; }

.solucao-lista { display: grid; gap: 10px; margin: 0; padding-left: 22px; }
.solucao-lista li { line-height: 1.7; }
.solucao-preco ul { display: grid; gap: 10px; margin: 0; padding-left: 20px; }
.solucao-preco li { line-height: 1.6; }
.solucao-nota { margin: 0; color: var(--muted); font-size: 13px; }
.solucao-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.solucao-chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 14px; border: 1px solid var(--landing-rule); border-radius: 8px; background: var(--surface); font-size: 15px; }
.solucao-chips a:hover { border-color: var(--landing-action); color: var(--landing-action); }
.solucao-chips a:active { background: var(--landing-soft); color: var(--ink); }

/* No computador com tela de altura comum, o preço acompanha a leitura do artigo. */
@media (min-width: 761px) and (min-height: 700px) {
  .solucao-artigo > .conteudo-aplicacao { position: sticky; top: 24px; }
}

@media (max-width: 1100px) {
  .solucao-setores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .solucao-duas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .solucao-duas > .solucao-preco { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .solucao-setores, .solucao-duas, .solucao-exemplo { grid-template-columns: minmax(0, 1fr); }
  .solucao-acoes .button { width: 100%; }
  .solucao-passos li { padding-left: 58px; }
}