/* WaveOps · peças que só a página Projetos sob medida usa: o conteúdo do cartão "Proposta", o atalho
   das frentes, o ajuste da tabela de modelos para três campos, as notas dos modelos e as perguntas.
   A abertura, a lista editorial das frentes, as colunas numeradas e a tabela de modelos são peças de
   components.css. O h3 de cada frente leva a classe wo-sobmedida-frente__nome, que serve de gancho
   para teste e não tem regra própria: o estilo vem de .wo-lista-editorial__item h3.
   Depende de tokens.css, base.css e components.css. */

/* ---------- Cartão "Proposta" (modelo ilustrativo) ---------- */
.wo-sobmedida-proposta {
  padding: var(--wo-espaco-3);
}

.wo-sobmedida-proposta .wo-maquete__cabeca {
  margin-bottom: 0;
}

/* "Título de cartão" de 5.2. */
.wo-sobmedida-proposta__texto {
  margin-top: var(--wo-espaco-2);
}

.wo-sobmedida-proposta__itens {
  margin-top: var(--wo-espaco-2);
  border-top: var(--wo-linha-fina) solid var(--wo-borda);
}

.wo-sobmedida-proposta__itens > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wo-espaco-2);
  min-height: var(--wo-alvo);
  padding: var(--wo-espaco-1) 0;
  border-bottom: var(--wo-linha-fina) solid var(--wo-borda);
}

.wo-sobmedida-proposta__itens dt {
  color: var(--wo-texto-2);
}

/* "Nota e etiqueta de tecnologia" de 5.2, em tinta 3. */
.wo-sobmedida-proposta__itens dd {
  color: var(--wo-texto-3);
  font-size: var(--wo-texto-pequeno);
  line-height: 1.45;
  text-align: right;
}

@media (min-width: 768px) {
  .wo-sobmedida-proposta {
    padding: var(--wo-espaco-4);
  }
}

/* ---------- Atalho das frentes ---------- */
.wo-sobmedida-atalhos {
  margin-top: var(--wo-espaco-4);
}

/* ---------- Modelos de contratação ---------- */
/* Três campos por modelo, onde a Home tem dois. A coluna do nome tem 1,2 parte contra 1 de cada campo,
   igual em todas as linhas para os campos alinharem. O vão fecha em 32 px até 1279 px: em 1024 px,
   "Implementação" cabe na coluna dela. */
@media (min-width: 1024px) {
  .wo-sobmedida-modelos .wo-modelo {
    grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)) auto;
    gap: var(--wo-espaco-4);
  }
}

@media (min-width: 1280px) {
  .wo-sobmedida-modelos .wo-modelo {
    gap: var(--wo-espaco-5);
  }
}

.wo-sobmedida-notas p {
  flex: 1 1 320px;
}

.wo-sobmedida-notas strong {
  color: var(--wo-texto);
  font-weight: 500;
}

/* ---------- Perguntas frequentes ---------- */
.wo-sobmedida-faq__ajuda {
  max-width: 420px;
  margin-top: var(--wo-espaco-4);
}

.wo-sobmedida-faq__ajuda p {
  color: var(--wo-texto-2);
}

.wo-sobmedida-faq__lista {
  border-top: var(--wo-linha-forte) solid var(--wo-texto);
}

.wo-sobmedida-faq__item {
  border-bottom: var(--wo-linha-fina) solid var(--wo-borda);
}

/* A pergunta é um título de cartão (5.2) que abre a resposta. */
.wo-sobmedida-faq__pergunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--wo-espaco-3);
  min-height: var(--wo-alvo);
  padding: var(--wo-espaco-3) 0;
  list-style: none;
  cursor: pointer;
  transition: color var(--wo-transicao);
}

.wo-sobmedida-faq__pergunta::-webkit-details-marker {
  display: none;
}

.wo-sobmedida-faq__pergunta:hover {
  color: var(--wo-acento-texto);
}

.wo-sobmedida-faq__icone {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--wo-acento-texto);
  transition: transform var(--wo-transicao);
}

.wo-sobmedida-faq__item[open] .wo-sobmedida-faq__icone {
  transform: rotate(180deg);
}

.wo-sobmedida-faq__resposta {
  max-width: 680px;
  padding: 0 var(--wo-espaco-5) var(--wo-espaco-3) 0;
  color: var(--wo-texto-2);
}