/* --------------------------------------------------------------------------
   06. Secao 10: Duvidas

   Ultimo capitulo escuro da home (--sup-0), entre #implantacao (claro) e
   #contato (verde claro). A divisa dos dois lados e desenhada pelo sistema,
   em css/site.css secao 05, por :has(). Este arquivo NAO tem ::before de
   sangria, gradiente de transicao nem fio de borda: duplicar a divisa e
   exatamente o artefato que o cliente reclamou.

   O acordeao e o primitivo .acordeao de css/site.css. Aqui mora so o que e
   desta secao: a regua que se desenha, a linha que acende quando abre e a
   altura animada de <details>.
   -------------------------------------------------------------------------- */
.duvidas-corpo {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: var(--esp-grid);
  align-items: start;
}

/* Em tela larga a intro acompanha a leitura das perguntas.
   O top respeita o scroll-padding do cabecalho fixo (128px). */
.duvidas-intro {
  position: sticky;
  top: calc(var(--e9) + var(--e7));
}

.duvidas-intro h2 {
  margin-top: var(--e4);
}

.duvidas-intro .secao-lead {
  max-width: 44ch;
}

/* Os tres compromissos: o resumo das objecoes antes mesmo da primeira
   pergunta. Usa o primitivo .lista-marcada, so com o ritmo daqui. */
.duvidas-compromissos {
  gap: var(--e4);
  max-width: 46ch;
  margin-top: var(--e6);
  padding-top: var(--e5);
  border-top: 1px solid var(--borda);
}

.duvidas-intro .secao-acao {
  margin-top: var(--e5);
}

.duvidas-grupos {
  display: grid;
  gap: var(--esp-bloco);
}

.duvidas-grupo-cabecalho {
  display: flex;
  align-items: center;
  gap: var(--e4);
}

.duvidas-grupo-titulo {
  display: flex;
  align-items: baseline;
  gap: var(--e3);
  color: var(--texto);
  font-size: var(--t6);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk-largo);
  line-height: 1.4;
  text-transform: uppercase;
}

.duvidas-grupo-indice {
  color: var(--verde);
}

/* Regua divisoria. E um elemento, e nao um ::after, porque o vocabulario de
   movimento (.mov-fio) nao alcanca pseudo-elementos. */
.duvidas-regua {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--verde-linha), transparent);
}

.duvidas-grupo-nota {
  max-width: 62ch;
  margin: var(--e3) 0 var(--e5);
}

/* --- Acordeao ------------------------------------------------------------ */
.duvidas-grupo .acordeao > details {
  position: relative;
}

/* A linha da pergunta aberta acende e se desenha da esquerda, por cima da
   borda que o primitivo ja desenha. */
.duvidas-grupo .acordeao > details::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--verde), var(--verde-linha) 55%, transparent);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition:
    transform var(--dur-3) var(--ease),
    opacity var(--dur-1) var(--ease);
  pointer-events: none;
}

.duvidas-grupo .acordeao > details[open]::before {
  opacity: 1;
  transform: scaleX(1);
}

/* O span do summary e a propria pergunta: ocupa a linha e herda o tipo. */
.duvidas-grupo .acordeao summary {
  transition: color var(--dur-1) var(--ease);
}

.duvidas-grupo .acordeao summary > span {
  flex: 1 1 auto;
  min-width: 0;
  letter-spacing: var(--tk3);
}

.duvidas-grupo .acordeao summary:hover {
  color: var(--verde-brilho);
}

.duvidas-grupo .acordeao > details[open] > summary > .icone {
  color: var(--verde-brilho);
}

.duvidas-grupo .acordeao > details > div {
  padding: 0 var(--e6) var(--e5) 0;
}

.duvidas-grupo .acordeao p {
  max-width: 76ch;
}

/* Abertura em duas camadas: a caixa cresce (abaixo, onde o navegador sabe
   animar ::details-content) e o texto sobe para o lugar. Sem suporte, o
   texto ainda aparece com movimento e a caixa simplesmente abre. */
.duvidas-grupo .acordeao > details[open] > div {
  animation: duvidas-abrir var(--dur-3) var(--ease-solto) both;
}

@keyframes duvidas-abrir {
  from {
    opacity: 0;
    transform: translateY(calc(var(--e2) * -1));
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@supports selector(details::details-content) {
  .duvidas-grupo .acordeao > details {
    interpolate-size: allow-keywords;
  }

  .duvidas-grupo .acordeao > details::details-content {
    block-size: 0;
    overflow: hidden;
    transition:
      block-size var(--dur-3) var(--ease-solto),
      content-visibility var(--dur-3) var(--ease-solto) allow-discrete;
  }

  .duvidas-grupo .acordeao > details[open]::details-content {
    block-size: auto;
  }
}

/* --- Fecho: a ultima objecao sai daqui para o WhatsApp ------------------- */
.duvidas-fecho {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--esp-grid);
  align-items: center;
  padding: var(--e7);
  border-color: var(--verde-linha);
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 160% at 0% 0%, var(--verde-vidro), transparent 58%),
    var(--sup-2);
}

.duvidas-fecho h3 {
  margin: var(--e4) 0 var(--e3);
}

/* So o paragrafo NU. Ver a nota de .dupla-texto p:not([class]) em
   css/pagina.css. Seletor de elemento pesa (0,1,1) e vence calado o
   .nota e o .sobretitulo, que pesam (0,1,0). */
.duvidas-fecho p:not([class]) {
  max-width: 56ch;
  font-size: var(--c3);
  line-height: 1.85;
}

.duvidas-fecho-acao {
  display: grid;
  justify-items: start;
  gap: var(--e3);
}

.duvidas-fecho-acao .nota {
  max-width: 26ch;
}

@media (max-width: 1200px) {
  .duvidas-corpo {
    gap: var(--e7);
  }
}

@media (max-width: 980px) {
  .duvidas-corpo {
    grid-template-columns: minmax(0, 1fr);
  }

  .duvidas-intro {
    position: static;
  }

  .duvidas-compromissos {
    max-width: none;
  }

  .duvidas-fecho {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e5);
    align-items: start;
  }
}

@media (max-width: 680px) {
  .duvidas-grupo-cabecalho {
    gap: var(--e3);
  }

  .duvidas-grupo .acordeao > details > div {
    padding: 0 0 var(--e5) 0;
  }

  .duvidas-fecho {
    padding: var(--e5);
  }

  .duvidas-fecho-acao .nota {
    max-width: none;
  }
}

@media (max-width: 380px) {
  .duvidas-grupo .acordeao > details > div {
    padding-left: 0;
  }

  .duvidas-fecho-acao {
    justify-items: stretch;
  }
}