/* Peças usadas na home (seção Soluções) e nas páginas de cada solução:
   etiqueta da solução, selo de desconto, preço riscado e planos mensais.
   Os ajustes de posição de cada lugar ficam no CSS da seção ou da página. */

/* Etiqueta "Solução 05 - Site com agendamento" + linha dourada */
.tag-sol {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8.7px;
  color: var(--navy-kalina);
  font-family: var(--fonte-mono);
  font-weight: 300;
  font-size: var(--fs-etiqueta);
  letter-spacing: 1.2px;
  line-height: normal;
  text-transform: uppercase;
}

.tag-sol::after {
  content: "";
  flex: none;
  width: 60px;
  height: 1px;
  background: var(--dourado-kalina);
}

/* Botão dourado "Quero conversar sobre essa opção" (51:41) → questionário */
.botao-sol-conversar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  min-height: 50px;
  margin-top: 37px;
  padding: 12px 24px;
  background: var(--dourado-kalina);
  color: var(--navy-kalina);
  font-family: var(--fonte-mono);
  font-size: 1rem;   /* 16 */
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}

/* ---------- Desconto de portfólio (−10%) ---------- */
.selo-portfolio {
  display: inline-block;   /* texto corrido: quebra como frase em telas estreitas */
  justify-self: start;
  max-width: 100%;
  margin-top: 12px;
  padding: 7px 14px 7px 12px;
  background: var(--dourado-kalina);
  color: var(--navy-kalina);
  font-family: var(--fonte-mono);
  font-size: var(--fs-etiqueta);
  letter-spacing: 1px;
  line-height: 1.3;
  text-transform: uppercase;
}

.selo-portfolio strong {
  margin-right: 6px;
  font-weight: 500;
}

/* Preço original riscado e selo "−10%" ao lado do preço com desconto */
.preco__de {
  color: var(--texto-claro);
  font-size: 0.9em;
  text-decoration-thickness: 1px;
}

.preco__selo {
  align-self: center;
  padding: 2px 6px;
  background: var(--dourado-kalina);
  color: var(--navy-kalina);
  font-family: var(--fonte-mono);
  font-size: 0.6875rem;
  line-height: 1.3;
}

/* ---------- Planos mensais (cards) ---------- */
.planos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.plano {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px 22px 24px;
  border: 1px solid var(--logo-claro);
  background: var(--creme-kalina);
}

.plano__nome {
  color: var(--navy-kalina);
  font-size: 1.25rem;
  line-height: 1.2;
}

.plano__preco {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--fundo-cinza);
}

.plano__preco strong {
  color: var(--navy-kalina);
  font-family: var(--fonte-display);
  font-weight: 600;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  font-size: 1.75rem;
  line-height: 1;
}

.plano__preco span {
  color: var(--texto-claro);
  font-family: var(--fonte-mono);
  font-size: var(--fs-etiqueta);
}

.plano__itens {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
  color: var(--texto-claro);
  font-size: 0.875rem;
  line-height: 1.45;
}

/* Marcador em losango, como no card do portfólio */
.plano__itens li {
  position: relative;
  padding-left: 18px;
}

.plano__itens li::before {
  content: "";
  position: absolute;
  top: 0.5em;
  left: 2px;
  width: 6px;
  height: 6px;
  background: var(--dourado-kalina);
  transform: rotate(45deg);
}