/* Camada 3: perguntas e texto curto no HTML do servidor.
 *
 * Usado pela landing do Amigo Secreto, pelo Localizador e pelo Guia (textos
 * aprovados em 18/10/2026). Uma pergunta por `details`: a resposta esta' no
 * HTML (o Google le), e quem visita abre so' o que quer. Tokens do
 * lv-tokens.css; nada de seletor de tag solto. */

.lv-faq-lista { display: grid; gap: 10px; max-width: 820px; }

.lv-faq-item {
  border-radius: 16px; background: var(--lv-bg); border: 1px solid var(--lv-line);
  transition: border-color .2s ease;
}
.lv-faq-item[open] { border-color: var(--lv-accent); }

.lv-faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; padding: 14px 20px; cursor: pointer; list-style: none;
  font-family: var(--lv-font-display); font-weight: 800; font-size: 17px; line-height: 1.35; color: var(--lv-ink);
}
.lv-faq-item summary::-webkit-details-marker { display: none; }
.lv-faq-item summary::after {
  content: ''; flex: none; width: 10px; height: 10px; margin-top: -4px;
  border-right: 2.5px solid var(--lv-accent-texto); border-bottom: 2.5px solid var(--lv-accent-texto);
  transform: rotate(45deg); transition: transform .2s ease;
}
.lv-faq-item[open] summary::after { transform: translateY(5px) rotate(-135deg); }
.lv-faq-item summary:focus-visible { outline: 3px solid var(--lv-accent-strong); outline-offset: 2px; border-radius: 16px; }

.lv-faq-item p { margin: 0; padding: 0 20px 18px; font-size: 16px; line-height: 1.6; color: var(--lv-muted); max-width: 68ch; }
.lv-faq-item p a, .lv-faq-texto a { color: var(--lv-accent-texto); font-weight: 700; text-underline-offset: 3px; }

/* Bloco curto abaixo da grade do Localizador e do Guia: nao disputa com os produtos. */
.lv-faq-pagina { max-width: 820px; margin: 56px 0 0; padding: 0 0 56px; }
.lv-faq-pagina-titulo {
  margin: 0 0 10px; color: var(--lv-ink);
  font-family: var(--lv-font-display); font-weight: 900; font-size: 24px; line-height: 1.2; letter-spacing: -.01em;
}
.lv-faq-texto { margin: 0 0 20px; font-size: 16px; line-height: 1.6; color: var(--lv-muted); max-width: 68ch; }

@media (prefers-reduced-motion: reduce) {
  .lv-faq-item, .lv-faq-item summary::after { transition: none; }
}