/* Página /quanto-custa-um-site/ — sem referência no Figma.
   Usa as peças das páginas de solução (css/paginas/solucao.css): seções, tabelas, listas, FAQ.
   Aqui só o que é próprio dela: abertura em texto corrido, bloco de preços da Kalina e chamada final. */

/* ---------- Abertura ---------- */
.preco-abertura__interno {
  padding: 40px var(--margem-dir) 24px var(--conteudo-x);
}

.preco-abertura .trilha-navegacao {
  margin-bottom: 40px;
}

.preco-abertura__titulo {
  max-width: 820px;
  margin-top: 4px;
  color: var(--navy-kalina);
  font-size: clamp(2rem, 1.5rem + 1.4vw, 2.75rem);   /* igual ao H1 das páginas de solução */
  line-height: 1.18;
}

.preco-abertura__texto {
  max-width: 760px;
  margin-top: 20px;
  color: var(--texto-claro);
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
}

.preco-abertura__texto p + p {
  margin-top: 14px;
}

.preco-abertura__texto strong {
  color: var(--navy-kalina);
  font-weight: 500;
}

/* ---------- Seções de texto ---------- */
.preco-secao .solucao-secao__interno {
  padding-top: 72px;
  padding-bottom: 0;
}

.preco-secao__intro {
  max-width: 760px;
  margin-top: 16px;
  color: var(--texto-claro);
  font-size: 1rem;
  line-height: 1.7;
}

.preco-secao .tabela-caixa {
  margin-top: 28px;
}

.preco-secao .lista-losango,
.preco-secao .lista-numerada {
  max-width: 820px;
  margin-top: 20px;
  color: var(--texto-claro);
  font-size: 1rem;
  line-height: 1.65;
}

.preco-secao .lista-losango li + li,
.preco-secao .lista-numerada li + li {
  margin-top: 10px;
}

.preco-secao :is(.lista-losango, .lista-numerada) strong {
  color: var(--navy-kalina);
  font-weight: 500;
}

.preco-secao__fecho {
  max-width: 760px;
  margin-top: 20px;
  color: var(--texto-claro);
  font-size: 1rem;
  line-height: 1.7;
}

.preco-secao .solucao-destaque {
  margin-top: 24px;
}

/* ---------- E quanto custa um site na Kalina? (faixa cinza-clara, como o processo) ---------- */
.preco-kalina {
  position: relative;
  z-index: 3;
  margin-top: 72px;
  background: var(--fundo-claro);
  border-top: var(--linha-grade) solid var(--fundo-cinza);
  border-bottom: var(--linha-grade) solid var(--fundo-cinza);
}

.preco-kalina .solucao-secao__interno {
  padding-top: 72px;
  padding-bottom: 72px;
}

.preco-kalina__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(32px, 4vw, 56px);
  align-items: start;
  max-width: 1164px;
  margin-top: 28px;
}

.preco-kalina__grade .tabela-caixa {
  margin-top: 0;
}

.preco-kalina .solucao-desconto {
  margin-top: 12px;
}

.preco-kalina__detalhes {
  color: var(--texto-claro);
  font-size: 0.9375rem;
  line-height: 1.65;
}

.preco-kalina__detalhes > * + * {
  margin-top: 14px;
}

.preco-kalina__detalhes strong {
  color: var(--navy-kalina);
  font-weight: 500;
}

.preco-kalina__detalhes .lista-losango {
  margin-top: 8px;
}

.preco-kalina__detalhes .lista-losango li + li {
  margin-top: 6px;
}

/* "Importante" logo abaixo do título da seção de comparação, antes da introdução e da tabela */
.preco-secao .titulo-secao-display__titulo + .solucao-destaque {
  margin-top: 16px;
}

/* ---------- Chamada final ---------- */
.preco-cta .solucao-secao__interno {
  padding-top: 88px;
  padding-bottom: 72px;
}

.preco-cta__caixa {
  max-width: 1164px;
  padding: 36px 40px 40px;
  border: 1px solid var(--dourado-kalina);
  background: var(--creme-kalina);
}

.preco-cta__titulo {
  max-width: 720px;
  color: var(--navy-kalina);
  font-size: clamp(1.625rem, 1.3rem + 0.9vw, 2rem);
  line-height: 1.23;
}

.preco-cta__texto {
  max-width: 720px;
  margin-top: 12px;
  color: var(--texto-claro);
  font-size: 1rem;
  line-height: 1.7;
}

.preco-cta__botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 28px;
}

/* Fontes e data da última revisão */
.preco-fontes {
  max-width: 820px;
  margin-top: 28px;
  color: var(--cinza-texto);
  font-size: 0.8125rem;
  font-style: italic;
  line-height: 1.6;
}

/* ---------- Abaixo de 1024 ---------- */
@media (max-width: 1023px) {
  .preco-abertura .trilha-navegacao {
    margin-bottom: 28px;
  }

  .preco-kalina__grade {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 32px;
  }

  .preco-secao .solucao-secao__interno,
  .preco-kalina .solucao-secao__interno {
    padding-top: 56px;
  }

  .preco-kalina {
    margin-top: 56px;
  }

  .preco-kalina .solucao-secao__interno {
    padding-bottom: 56px;
  }
}

/* ---------- Celular ---------- */
@media (max-width: 767px) {
  .preco-abertura__interno {
    padding-top: 24px;
  }

  .preco-abertura__titulo {
    font-size: 1.875rem;
  }

  .preco-abertura__texto {
    font-size: 1.0625rem;
    line-height: 1.625rem;
  }

  .preco-secao .solucao-secao__interno,
  .preco-kalina .solucao-secao__interno {
    padding-top: 48px;
  }

  .preco-kalina {
    margin-top: 48px;
  }

  .preco-kalina .solucao-secao__interno {
    padding-bottom: 48px;
  }

  .preco-secao__intro,
  .preco-secao__fecho,
  .preco-secao .lista-losango,
  .preco-secao .lista-numerada {
    font-size: 0.9375rem;
  }

  .preco-cta .solucao-secao__interno {
    padding-top: 56px;
    padding-bottom: 48px;
  }

  .preco-cta__caixa {
    padding: 24px 16px 24px;
  }

  .preco-cta__botoes .botao-cta {
    width: 100%;
  }
}