/*
  Cap 8 · Dúvidas (Figma 123:2 › "CAP 8 · Dúvidas" 127:82), 1440 × 1330.
  Medidas do Figma:
    título a 185px do topo (Geist Medium 56), 700px; botão "Ficou alguma
      dúvida? Me chama" à direita (cta/fundo, padding 14/22, Geist Medium 15);
    perguntas 70px abaixo do título, gap 12; 120px de respiro embaixo;
    pergunta fechada: 1200 × 90, superficie/vidro, borda 1px linha, raio 28,
      padding 24/24/24/32; texto Geist Medium 20 (−0,5%); ícone de 40
      (superficie/sutil) com + de 12 e traço 1,8 em texto;
    pergunta aberta: superficie/janela, borda 1px destaque; ícone em destaque
      com − em cta/texto; resposta Geist 17/155% (texto-apoio), 760px (aqui
      vai até o fim do card), 14px abaixo da linha da pergunta.
*/

.secao-duvidas {
  /* Figma: título a 185px do topo (65px além do respiro padrão) */
  padding-top: calc(var(--secao-respiro) + 65px);
  padding-bottom: var(--secao-respiro);
  background-color: var(--fundo);
}

.duvidas-cabecalho {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}

.duvidas-titulo {
  max-width: 700px;
  color: var(--texto);
  font-size: clamp(2rem, 3.89vw, var(--titulo-secao));
  font-weight: var(--peso-medio);
  line-height: var(--titulo-secao-altura);
  letter-spacing: var(--titulo-secao-letra);
}

.duvidas-botao {
  display: inline-flex;
  flex: none;
  align-items: center;
  min-height: 48px;
  padding: 14px 22px;
  border-radius: var(--raio-999);
  background-color: var(--cta-fundo);
  color: var(--cta-texto);
  font-size: var(--navegacao);
  font-weight: var(--peso-medio);
  line-height: normal;
  text-decoration: none;
}

.duvidas-lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 70px;
}

/* ------------------------------------------------------------------
   Pergunta
   ------------------------------------------------------------------ */
.duvida {
  border-radius: var(--raio-28);
  background-color: var(--superficie-vidro);
  box-shadow: inset 0 0 0 1px var(--linha);
}

.duvida[open] {
  background-color: var(--superficie-janela);
  box-shadow: inset 0 0 0 1px var(--destaque);
}

/* A linha inteira é clicável (padding no summary, não no card) */
.duvida-pergunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 90px;
  padding: 24px 24px 24px 32px;
  border-radius: var(--raio-28);
  color: var(--texto);
  font-size: var(--pergunta);
  font-weight: var(--peso-medio);
  letter-spacing: var(--pergunta-letra);
  line-height: normal;
  list-style: none;
  cursor: pointer;
}

.duvida-pergunta::-webkit-details-marker {
  display: none;
}

.duvida-icone {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--raio-999);
  background-color: var(--superficie-sutil);
  color: var(--texto);
}

/* Aberta: ícone em destaque e o traço vertical some (vira −) */
.duvida[open] .duvida-icone {
  background-color: var(--destaque);
  color: var(--cta-texto);
}

.duvida[open] .duvida-icone-vertical {
  display: none;
}

/* A resposta vai até o fim do card (no Figma ela tem 760px; decisão da
   Samara), com o mesmo respiro da direita da pergunta */
.duvida-resposta {
  margin-top: -10px;
  padding: 0 24px 25px 32px;
  color: var(--texto-apoio);
  font-size: var(--apoio-resposta);
  line-height: var(--apoio-resposta-altura);
}

/* ------------------------------------------------------------------
   Abaixo de 1024px: título e botão empilhados. Provisório até o mobile.
   ------------------------------------------------------------------ */
@media (max-width: 1023.98px) {
  .duvidas-cabecalho {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .duvidas-lista {
    margin-top: 48px;
  }
}

@media (max-width: 767.98px) {
  .secao-duvidas {
    padding-top: var(--secao-respiro);
  }

  .duvida-pergunta {
    min-height: 0;
    padding: 20px 20px 20px 24px;
    gap: 16px;
  }

  .duvida-resposta {
    padding: 0 24px 22px;
  }
}