/* Perguntas frequentes da casa: lista que abre e fecha cada pergunta, como no ginecolab.com (03/11/2026).
   Usa <details>/<summary> (sem JavaScript, texto no HTML para a busca; roteiro de landing, seção 1.7).
   A seção fica centralizada: título e lista com largura de leitura no meio da página.
   Marcação:
   <div class="pc-lista">
     <details class="pc-item"><summary>Pergunta?</summary><div class="pc-resposta"><p>Resposta.</p></div></details>
   </div> */
.pc-lista {
  --pc-texto: #0c1322;
  --pc-texto-sec: #475569;
  --pc-linha: #e2e8f0;
  --pc-destaque: #a21caf;
  max-width: 820px;
  margin: 0 auto;
  text-align: left;
}
.pc-item { border-bottom: 1px solid var(--pc-linha); }
.pc-item:first-child { border-top: 1px solid var(--pc-linha); }
.pc-item > summary {
  position: relative;
  display: block;
  min-height: 44px;
  padding: 22px 48px 22px 0;
  color: var(--pc-texto);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}
.pc-item > summary::-webkit-details-marker { display: none; }
.pc-item > summary::marker { content: ''; }
.pc-item > summary::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 8px;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--pc-destaque);
  border-bottom: 2px solid var(--pc-destaque);
  transform: translateY(-65%) rotate(45deg);
  transition: transform .25s ease;
}
.pc-item[open] > summary::after { transform: translateY(-30%) rotate(225deg); }
.pc-item > summary:hover { color: var(--pc-destaque); }
.pc-item > summary:focus-visible { outline: 2px solid var(--pc-destaque); outline-offset: 4px; border-radius: 6px; }
.pc-resposta { padding: 0 48px 22px 0; color: var(--pc-texto-sec); font-size: 16px; line-height: 1.65; }
.pc-resposta p { margin: 0 0 10px; }
.pc-resposta p:last-child { margin-bottom: 0; }
@media (max-width: 560px) {
  .pc-item > summary { padding: 18px 40px 18px 0; font-size: 16.5px; }
  .pc-resposta { padding-right: 0; font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) { .pc-item > summary::after { transition: none; } }
