/* JM. O desenho de cada seção, na ordem da página. Cores só pelas variáveis de cores.css. */

/* 1. Abertura: mármore negro com veios e folhas de ouro (imagem do Codex) e a moldura art déco em linhas finas de ouro.
   A moldura é desenhada aqui, e não na imagem, para caber em qualquer altura de topo sem ser cortada.
   No celular o mármore coroa o topo e some no ônix antes do texto corrido; no computador cobre o topo inteiro.
   Um véu de ônix (--veu) fica atrás de todo texto: contraste AA mesmo sobre um veio claro. */

.topo {
  isolation: isolate;
  padding-block: 112px 64px;
  border-top: 0;
  overflow-x: clip;
  text-align: center;
}

/* ::before é o mármore; ::after é o véu, só na faixa do texto */
.topo::before, .topo::after { content: ""; position: absolute; z-index: -1; right: 0; left: 0; pointer-events: none; }
.topo::before {
  top: 0;
  height: calc(100vw * 1.5);
  background: url("img/topo-marmore-celular-780.webp") center top / 100% auto no-repeat;
  -webkit-mask-image: linear-gradient(var(--texto) 60%, transparent);
  mask-image: linear-gradient(var(--texto) 60%, transparent);
}
.topo::after {
  top: 0;
  bottom: 0;
  background: linear-gradient(transparent 52px, var(--veu) 104px);
  -webkit-mask-image: linear-gradient(90deg, transparent 8px, var(--texto) 34px, var(--texto) calc(100% - 34px), transparent calc(100% - 8px));
  mask-image: linear-gradient(90deg, transparent 8px, var(--texto) 34px, var(--texto) calc(100% - 34px), transparent calc(100% - 8px));
}

.topo-moldura { position: absolute; inset: 12px; z-index: 0; border: 1px solid var(--linha-forte); pointer-events: none; }
.topo-moldura::before { content: ""; position: absolute; inset: 5px; border: 1px solid var(--linha); }
.losango { position: absolute; left: 50%; width: 11px; height: 11px; border: 1px solid var(--destaque); background: var(--fundo); transform: translate(-50%, -50%) rotate(45deg); }
.losango-topo { top: 0; }
.losango-base { top: 100%; }

.topo-texto {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  width: min(100% - 2 * 34px, 46rem);
  margin-inline: auto;
}
.topo .rotulo { color: var(--destaque-suave); }
.topo-marca { width: clamp(150px, 44vw, 190px); margin-top: 22px; }
.topo h1 { margin-top: 20px; }
.topo-sub { max-width: 30em; margin-top: 18px; color: var(--texto-2); font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem); font-weight: 500; text-wrap: balance; }

.topo-promessa {
  max-width: 17em;
  margin-top: 26px;
  color: var(--destaque-suave);
  font-family: var(--serifa);
  font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.55rem);
  font-style: italic;
  font-weight: 600;
  line-height: 1.18;
  text-wrap: balance;
}

.topo-corrido { max-width: 34em; margin-top: 18px; text-wrap: balance; }

.selos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 46rem; margin-top: 28px; }
.selos li {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 12px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-pequeno);
  background: var(--veu);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
}

.topo .botao { margin-top: 30px; }
.topo-nota { max-width: 34em; margin-top: 16px; font-size: 1.125rem; text-wrap: balance; }
.topo-cuidado { margin-top: 8px; color: var(--texto-2); font-size: 1.125rem; text-wrap: balance; }

@media (max-width: 767.98px) {
  .topo .botao { width: 100%; }
}

@media (min-width: 768px) {
  .topo { padding-block: clamp(64px, 6vw, 88px) clamp(80px, 8vw, 112px); }
  .topo::before {
    bottom: 0;
    height: auto;
    background-image: url("img/topo-marmore-computador-1536.webp");
    background-position: center;
    background-size: cover;
    -webkit-mask-image: linear-gradient(var(--texto) 86%, transparent);
    mask-image: linear-gradient(var(--texto) 86%, transparent);
  }
  .topo::after {
    top: 44px;
    bottom: 44px;
    background: var(--veu);
    -webkit-mask-image: linear-gradient(90deg, transparent calc(50% - 470px), var(--texto) calc(50% - 390px), var(--texto) calc(50% + 390px), transparent calc(50% + 470px));
    mask-image: linear-gradient(90deg, transparent calc(50% - 470px), var(--texto) calc(50% - 390px), var(--texto) calc(50% + 390px), transparent calc(50% + 470px));
  }
  .topo-moldura { inset: 24px; }
  .topo-moldura::before { inset: 7px; }
  .topo-marca { width: 220px; }
  .topo-promessa { margin-top: 20px; }
  .selos { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 22px; }
  .topo .botao { margin-top: 24px; }
}

/* 2. A Jornada se expande: a carta, com o retrato da Dinara embaixo do título, os números e a citação */

.carta-abertura { color: var(--destaque-suave); font-family: var(--serifa); font-size: var(--t-sub); font-style: italic; font-weight: 600; line-height: 1.2; }
.carta-retrato { width: min(100%, 280px); margin-top: 10px; }
.carta-retrato img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 1px solid var(--linha); border-radius: var(--raio-medio); }
@media (max-width: 1023.98px) { .carta-retrato { width: min(58vw, 260px); } }

.numeros { display: grid; margin-top: clamp(48px, 7vw, 80px); border-block: 1px solid var(--linha); }
.numeros li { display: grid; gap: 6px; padding-block: 24px; }
.numeros li + li { border-top: 1px solid var(--linha); }
.numero-grande { color: var(--texto); font-family: var(--serifa); font-size: clamp(2.5rem, 2rem + 2vw, 3.6rem); font-style: italic; font-weight: 600; line-height: 1; font-variant-numeric: lining-nums; }
.numero-grande small { font-size: 0.5em; }
.numero-rotulo { color: var(--texto-2); font-size: 1rem; }
.numeros-nota { margin-top: 14px; }
.fecho { max-width: 40em; margin-top: 28px; font-weight: 500; }

@media (min-width: 768px) {
  .numeros { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .numeros li { padding: 30px 28px; }
  .numeros li:first-child { padding-left: 0; }
  .numeros li + li { border-top: 0; border-left: 1px solid var(--linha); }
}

/* Na tela média, um número embaixo do outro: o "Mais de 12 mil" não quebra no meio */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .numeros { grid-template-columns: minmax(0, 1fr); }
  .numeros li, .numeros li:first-child { padding: 24px 0; }
  .numeros li + li { border-left: 0; border-top: 1px solid var(--linha); }
}

/* 4. Até quando?: dez perguntas em linhas com filete, o "Até quando" em ouro abrindo cada uma, e o fecho centrado */

.perguntas-ate { display: grid; gap: 0 var(--vao-lado); border-top: 1px solid var(--linha); }
.perguntas-ate .cartao { padding: 18px 0; border-width: 0 0 1px; border-radius: 0; background: none; box-shadow: none; }
.perguntas-ate li { font-size: 1.125rem; line-height: 1.55; }
.ate { color: var(--destaque-suave); font-weight: 500; }

@media (min-width: 768px) {
  .perguntas-ate { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .perguntas-ate li { font-size: 1.25rem; }
}

.ate-fecho { margin-top: clamp(48px, 7vw, 80px); margin-inline: auto; text-align: center; }
.ate-fecho .frase { margin-inline: auto; }

/* 5. Ser, Ter e Parecer */

.subtitulo { font-family: var(--serifa); font-size: var(--t-frase); font-style: italic; font-weight: 600; line-height: 1.2; letter-spacing: 0; }
.cartoes-menores { margin-top: clamp(28px, 4vw, 40px); }
.cartoes-menores .cartao { background: var(--fundo-2); }

/* 6. A Jornada não é um curso: os oito aspectos e os cinco pilares */

.aspectos { display: flex; flex-wrap: wrap; gap: 10px; }
.aspectos li { padding: 10px 16px; border: 1px solid var(--linha); border-radius: var(--raio-pequeno); background: var(--tinta); font-size: 1rem; font-weight: 500; line-height: 1.35; }

.pilares-bloco { display: grid; justify-items: center; gap: 22px; margin-top: clamp(56px, 8vw, 96px); padding-top: clamp(48px, 6vw, 72px); border-top: 1px solid var(--linha); text-align: center; }
.pilares { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 30px; }
.pilares li { color: var(--texto); font-family: var(--serifa); font-size: var(--t-sub); font-style: italic; font-weight: 600; line-height: 1.2; }
.pilares-bloco .frase { margin-top: 10px; }
.linha-final { color: var(--texto); font-family: var(--serifa); font-size: var(--t-sub); font-style: italic; font-weight: 600; }

/* 7. O que é a JM: a proposta central num painel */

.painel-proposta {
  display: grid;
  gap: 16px;
  margin-block: clamp(40px, 6vw, 64px);
  padding: clamp(22px, 5vw, 56px);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  background: var(--tinta);
}
.painel-proposta h3 { color: var(--destaque); font-size: 1rem; font-weight: 500; letter-spacing: 0.03em; }
.painel-proposta .frase { max-width: 32em; color: var(--texto); font-size: clamp(1.4rem, 1.05rem + 1.8vw, 2.55rem); }

/* 8. Para quem é: os sete perfis em 3 + 3 + 1 no computador, o último centrado */

@media (min-width: 1024px) {
  .perfis { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .perfis > li { grid-column: span 2; }
  .perfis > li:nth-child(7) { grid-column: 3 / span 2; }
}


.nota-perfis { margin-top: 20px; }
.duas-colunas { display: grid; gap: clamp(32px, 5vw, 56px); }
.definicao { padding: 22px 24px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--tinta); }

@media (min-width: 1024px) {
  .duas-colunas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

/* 9. Como funciona: o formato em linhas; os quatro cartões curtos em duas colunas a partir de 480 px */

@media (min-width: 480px) and (max-width: 767.98px) {
  .cartoes-curtos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cartoes-curtos .cartao { padding: 18px; }
}


.formato { border-top: 1px solid var(--linha); }
.formato li { padding-block: 16px; border-bottom: 1px solid var(--linha); }
.formato strong { color: var(--destaque-suave); }

/* 10. As 4 dimensões */

.dimensoes { display: grid; gap: clamp(16px, 2vw, 24px); }
.dimensoes .cartao { padding: clamp(24px, 4.5vw, 44px); }
.pergunta { color: var(--destaque-suave); font-family: var(--serifa); font-size: var(--t-sub); font-style: italic; font-weight: 600; line-height: 1.25; }
.exemplos { display: grid; gap: 4px; padding-block: 6px; }
.exemplos li { color: var(--texto); font-family: var(--serifa); font-size: var(--t-sub); font-style: italic; font-weight: 600; line-height: 1.3; }
.destaque-cartao { color: var(--destaque-suave); font-weight: 500; }

@media (min-width: 1024px) {
  .dimensoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 11 e 21. Sequências numeradas: o número em Cormorant, ouro */

.etapas, .passos { counter-reset: etapa; margin-top: clamp(32px, 5vw, 48px); border-top: 1px solid var(--linha); }
.etapas > li, .passos > li { counter-increment: etapa; padding-block: clamp(24px, 4vw, 36px); border-bottom: 1px solid var(--linha); }
.etapas > li::before, .passos > li::before {
  content: counter(etapa);
  display: block;
  margin-bottom: 10px;
  color: var(--destaque);
  font-family: var(--serifa);
  font-size: clamp(2.6rem, 2.1rem + 1.8vw, 3.6rem);
  font-style: italic;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: lining-nums;
}
.etapas h3 + .fluxo, .passos h3 + p { margin-top: 0.7rem; }
.etapas + .nota { margin-top: 24px; }

@media (min-width: 768px) {
  .etapas > li, .passos > li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: 24px; align-content: start; }
  .etapas > li::before, .passos > li::before { grid-row: 1 / span 2; margin-bottom: 0; }
  .etapas > li > *, .passos > li > * { grid-column: 2; }
}

@media (min-width: 1024px) {
  .passos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--vao-lado); border-top: 0; }
  .passos > li { border-top: 1px solid var(--linha); border-bottom: 0; }
  .passos > li:last-child { grid-column: 1 / -1; }
}

/* 12. Cartões numerados: os três movimentos são uma sequência. Os itens do Passaporte não são, e não levam número. */

.movimentos { counter-reset: cartao; }
.movimentos > li { counter-increment: cartao; }
.movimentos > li::before {
  content: counter(cartao);
  display: block;
  margin-bottom: 4px;
  color: var(--destaque);
  font-family: var(--serifa);
  font-size: 2.6rem;
  font-style: italic;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: lining-nums;
}

/* 13. Gestão, liderança e visão */

.eixos { display: grid; gap: 14px; margin-block: 2rem; }

/* 14. Por que a JM é diferente: 3 e 2 no computador */

@media (min-width: 1024px) {
  .diferencas { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .diferencas > li { grid-column: span 2; }
  .diferencas > li:nth-child(4) { grid-column: 2 / span 2; }
}

/* 15. Diferença na prática: tabela em duas colunas; no celular, cada linha vira um bloco */

.tabela-pratica { width: 100%; border-collapse: collapse; }
.tabela-pratica th { padding: 0 22px 16px 0; color: var(--destaque); font-size: 1rem; font-weight: 500; letter-spacing: 0.03em; text-align: left; }
.tabela-pratica td { padding: 20px 22px 20px 0; border-top: 1px solid var(--linha); vertical-align: top; }
.tabela-pratica td:first-child { color: var(--texto-2); }
.tabela-pratica td + td { padding-left: 22px; border-left: 1px solid var(--linha); color: var(--texto); font-weight: 500; }
.tabela-pratica th + th { padding-left: 22px; }

@media (max-width: 767.98px) {
  .tabela-pratica thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabela-pratica tr, .tabela-pratica td { display: block; }
  .tabela-pratica tr { padding-block: 18px; border-top: 1px solid var(--linha); }
  .tabela-pratica tr:last-child { border-bottom: 1px solid var(--linha); }
  .tabela-pratica td, .tabela-pratica td + td { padding: 4px 0; border: 0; }
  .tabela-pratica td + td { margin-top: 10px; }
  .tabela-pratica td::before { content: attr(data-rotulo); display: block; margin-bottom: 2px; color: var(--destaque); font-size: 1rem; font-weight: 500; }
}

/* 16. Quem conduz */

.condutores { display: grid; gap: clamp(18px, 2.5vw, 28px); }
.condutor { display: grid; align-content: start; gap: 22px; }
.condutor > * + * { margin-top: 0; }
.condutor-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--raio-medio); }
.condutor-foto-vazia { display: grid; place-items: center; min-height: 140px; padding: 20px; border: 1px dashed var(--linha-forte); border-radius: var(--raio-medio); background: var(--tinta); text-align: center; }
.condutor-texto > * + * { margin-top: 0.8em; }
.condutor-texto h3 { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.9rem); }
.condutor-titulo { color: var(--destaque-suave); font-weight: 500; }
.assinatura { width: 220px; margin-top: 1.4em; }

@media (min-width: 1024px) {
  .condutores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .condutor-foto-vazia { min-height: 0; aspect-ratio: 4 / 5; }
}

/* 17. Passaporte: o título ao lado da caderneta; os seis cartões embaixo */

.passaporte-topo .cabecalho { margin-bottom: 0; }

/* 18. Os quatro portais, todos do mesmo tamanho */

.portais h3 { display: grid; gap: 10px; }
.sigla { color: var(--texto); font-family: var(--serifa); font-size: clamp(2.8rem, 2.3rem + 1.6vw, 3.6rem); font-style: italic; font-weight: 600; line-height: 0.95; letter-spacing: 0.01em; }
.portal-nome { font-size: 1.125rem; line-height: 1.35; }

/* 19. Pertencimento: a pausa centrada */

.pertencimento { text-align: center; }
.pertencimento .rotulo { margin-bottom: 26px; }
.pert-titulo span { display: block; }
.pert-titulo { font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.6rem); line-height: 1.22; }
.pert-texto { margin-top: clamp(40px, 6vw, 64px); margin-inline: auto; }
.pert-texto .frase { margin-inline: auto; }

/* 20. Investimento: o preço num painel e os detalhes ao lado */

.inv-grade { display: grid; gap: clamp(36px, 5vw, 56px); }

.painel-preco {
  padding: clamp(22px, 4.5vw, 44px);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio);
  background: var(--superficie);
  box-shadow: var(--sombra);
}
.painel-preco > * + * { margin-top: 1em; }
.preco { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 0.3em; color: var(--destaque-suave); font-family: var(--serifa); font-size: clamp(2.8rem, 2.1rem + 3vw, 4.4rem); font-style: italic; font-weight: 600; line-height: 1; font-variant-numeric: lining-nums; }
.preco span { display: inline-block; color: var(--texto-2); -webkit-text-fill-color: var(--texto-2); font-family: var(--fonte); font-size: 1.125rem; font-style: normal; font-weight: 500; }
.preco-forma { color: var(--destaque-suave); font-weight: 500; }

.tabela-parcelas { width: 100%; border-collapse: collapse; font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.tabela-parcelas th, .tabela-parcelas td { padding: 12px 10px 12px 0; border-bottom: 1px solid var(--linha); text-align: left; vertical-align: top; }
.tabela-parcelas thead th { color: var(--destaque); font-size: 1rem; font-weight: 500; }
.tabela-parcelas tbody th { font-weight: 600; white-space: nowrap; }
.tabela-parcelas small { display: block; color: var(--texto-2); font-size: 0.9375rem; }

@media (max-width: 479.98px) {
  .tabela-parcelas { font-size: 1rem; }
  .tabela-parcelas thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabela-parcelas tr { display: block; padding-block: 12px; border-bottom: 1px solid var(--linha); }
  .tabela-parcelas th, .tabela-parcelas td { display: block; padding: 0; border: 0; }
  .tabela-parcelas tbody th { margin-bottom: 2px; color: var(--destaque-suave); }
  .tabela-parcelas td::before { content: attr(data-rotulo) ": "; color: var(--texto-2); }
  .tabela-parcelas small { display: inline; }
}

.inv-detalhes > h3:first-child { margin-top: 0; }
.lacunas { display: grid; gap: 10px; }
.inv-fecho { margin-top: clamp(48px, 7vw, 80px); }

@media (min-width: 1024px) {
  .inv-grade { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--vao-lado); align-items: start; }
  .painel-preco { position: sticky; top: calc(var(--barra) + 32px); }
}

/* 21. Como entrar: o que o instrumento percorre, em linhas com filete */

.instrumento .cabecalho { max-width: 26rem; }
.percorre { gap: 0 var(--vao-lado); border-top: 1px solid var(--linha); }
.percorre .cartao { padding: 22px 0; border-width: 0 0 1px; border-radius: 0; background: none; box-shadow: none; }

/* 22. Perguntas frequentes em sanfona, sem JavaScript */

.sanfona { border-top: 1px solid var(--linha); }
.sanfona details { border-bottom: 1px solid var(--linha); }
.sanfona summary {
  position: relative;
  display: block;
  padding: 22px 52px 22px 0;
  color: var(--texto);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}
.sanfona summary::-webkit-details-marker { display: none; }
.sanfona summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 6px;
  color: var(--destaque);
  font-size: 1.9rem;
  font-weight: 400;
  line-height: 1;
  transform: translateY(-50%);
  transition: transform 0.3s var(--suave);
}
.sanfona details[open] > summary::after { transform: translateY(-50%) rotate(45deg); }
.sanfona summary:hover { color: var(--destaque-suave); }
.resposta { padding-bottom: 24px; }
.resposta > * + * { margin-top: 0.8em; }

@media (prefers-reduced-motion: no-preference) {
  .sanfona details[open] .resposta { animation: abrir 0.35s var(--suave); }
}

@keyframes abrir {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

@media (min-width: 1024px) {
  .sanfona summary { font-size: 1.25rem; }
}

/* 24. O seu próximo passo: coluna centrada, com os quatro passos curtos um embaixo do outro */

.estreito-centro { max-width: 36rem; text-align: center; }
.estreito-centro .frase { margin-inline: auto; }

.passos-curtos { counter-reset: passo; display: grid; gap: 12px; margin-block: clamp(32px, 5vw, 48px); text-align: left; }
.passos-curtos li { counter-increment: passo; display: flex; align-items: baseline; gap: 14px; padding: 14px 18px; border: 1px solid var(--linha); border-radius: var(--raio-medio); background: var(--tinta); font-weight: 500; }
.passos-curtos li::before { content: counter(passo); flex: none; color: var(--destaque); font-family: var(--serifa); font-size: 1.9rem; font-style: italic; font-weight: 600; line-height: 1; font-variant-numeric: lining-nums; }


.proximo .emblema { margin-top: clamp(40px, 6vw, 56px); }
.assinatura-texto { display: grid; gap: 6px; margin-top: 24px; }
.assinatura-texto p:first-child { color: var(--texto-2); }
.lema { margin-top: 28px; color: var(--texto); font-family: var(--serifa); font-size: var(--t-sub); font-style: italic; font-weight: 600; line-height: 1.3; }
.proximo .lema + .frase { margin-top: 24px; }

/* 25. Aviso importante */

.aviso-cartao { max-width: 40rem; margin-inline: auto; }
.aviso-cartao h2 { font-size: clamp(1.9rem, 1.6rem + 1.2vw, 2.5rem); }
.aviso-cartao .fluxo { margin-top: 18px; }

/* 26. Rodapé */

.rodape { padding-block: clamp(56px, 8vw, 88px) 40px; border-top: 1px solid var(--linha); background: var(--fundo-2); color: var(--texto-2); font-size: 1.125rem; line-height: 1.6; }
.divisoria + .rodape { border-top: 0; }
.rodape-grade { display: grid; gap: 22px; }
.rodape-marca { display: grid; gap: 14px; }
.rodape-marca img { width: 190px; }
.rodape-marca p { color: var(--texto); font-weight: 500; }
.rodape-dados { display: grid; gap: 8px; }
.rodape-aviso { max-width: 48em; }

/* Computador: os cartões de texto longo em duas colunas, para a linha ter de 44 a 57 letras. Em Ser, Ter e Parecer,
   cada cartão vira uma faixa, com o título à esquerda e o texto à direita. De 1024 a 1279 px, os perfis em duas
   colunas e o preço acima dos detalhes, para o painel não ficar estreito. */
@media (min-width: 1024px) {
  .portais, .entregas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #ser-ter-parecer .grade-3 { grid-template-columns: minmax(0, 1fr); }
  #ser-ter-parecer .grade-3 > li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--vao-lado); align-items: start; }
  #ser-ter-parecer .grade-3 > li > * + * { margin-top: 0; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .perfis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .perfis > li { grid-column: auto; }
  .perfis > li:nth-child(7) { grid-column: 1 / -1; }
  .inv-grade { grid-template-columns: minmax(0, 1fr); }
  .painel-preco { position: static; max-width: 40rem; }
  .inv-detalhes { max-width: 40rem; }
}
#para-quem .cartao-calmo { max-width: 44rem; }