/* 10 · DÚVIDAS · prefixo .faq
   <details> nativos: funciona sem JS. Pergunta em .t-h3 e um sinal de mais que gira e vira menos
   ao abrir (o traço vertical deita sobre o horizontal). A linha inteira é o alvo de toque.
   Laranja só como evento: o traço de 15° da pergunta ativa e o sinal da pergunta aberta.
   Com JS, js/10-faq.js anima a altura de .faq-c e usa .faq-fechando enquanto fecha. */
.faq{--secao-y:clamp(4.5rem,7.5vw,7rem);--faq-e:cubic-bezier(.16,1,.3,1)}
.faq .secao-cab{margin-bottom:clamp(24px,2.8vw,40px)}

/* borda superior: o preto sobe sobre o branco por um degrau de 15° que corre com a rolagem */
.faq-borda{--bh:clamp(40px,5vw,72px);--bx:calc(6% + (1 - var(--p,.45))*84%);position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:var(--bh);background:var(--fundo);pointer-events:none;
  clip-path:polygon(var(--bx) 100%,calc(var(--bx) + var(--bh)*var(--tan15)) 0,100% 0,100% 100%)}

.faq-lista{grid-column:1/-1;border-bottom:1px solid var(--linha)}
/* o título ganha uma coluna para caber numa linha */
@media (min-width:900px){.faq-lista{grid-column:4/span 8}.faq .secao-cab>div{grid-column:4/-1}}

.faq-item{position:relative;border-top:1px solid var(--linha)}
/* fio branco que se desenha por cima da linha de 1 px */
.faq-item::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--texto);pointer-events:none;transform:scaleX(0);transform-origin:0 50%;transition:transform 700ms var(--faq-e)}
.faq-p{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--e-4);min-height:44px;padding-block:16px;cursor:pointer;list-style:none;border-radius:2px}
.faq-p::-webkit-details-marker{display:none}
.faq-p:focus-visible{outline-offset:-2px}
/* traço de 15° à esquerda da pergunta ativa */
.faq-p::before{content:"";position:absolute;left:5px;top:calc(50% - .62em);height:1.24em;width:2px;background:var(--marca);pointer-events:none;transform:skewX(-15deg) scaleY(0);transform-origin:50% 100%;transition:transform 500ms var(--faq-e)}
.faq-p .t-h3{transition:transform 500ms var(--faq-e)}

.faq-sinal{position:relative;flex:none;width:20px;height:20px;color:var(--texto-2);transition:color var(--dur-micro) var(--curva-entrada),transform 600ms var(--faq-e)}
.faq-sinal::before,.faq-sinal::after{content:"";position:absolute;background:currentColor}
.faq-sinal::before{left:2px;right:2px;top:calc(50% - 1px);height:2px}
.faq-sinal::after{top:2px;bottom:2px;left:calc(50% - 1px);width:2px;transition:transform 600ms var(--faq-e)}

/* ativa: ponteiro em cima, dedo pressionando ou pergunta aberta */
@media (hover:hover){
  .faq-p:hover .t-h3{transform:translate3d(20px,0,0)}
  .faq-p:hover::before{transform:skewX(-15deg) scaleY(1)}
  .faq-p:hover .faq-sinal{color:var(--texto);transform:rotate(90deg)}
  .faq-item:hover::before{transform:scaleX(1)}
}
.faq-p:active .t-h3,.faq-item[open]:not(.faq-fechando) .faq-p .t-h3{transform:translate3d(20px,0,0)}
.faq-p:active::before,.faq-item[open]:not(.faq-fechando) .faq-p::before{transform:skewX(-15deg) scaleY(1)}
.faq-item[open]:not(.faq-fechando)::before{transform:scaleX(1)}
.faq-item[open]:not(.faq-fechando) .faq-sinal{color:var(--acento);transform:rotate(180deg)}
.faq-item[open]:not(.faq-fechando) .faq-sinal::after{transform:rotate(90deg)}

/* resposta: .faq-c é a caixa de altura animada */
.faq-c{overflow:hidden}
.faq-abrindo .faq-c,.faq-fechando .faq-c{transition:height 560ms var(--faq-e)}
.faq-r{max-width:40em;padding:0 var(--e-8) var(--e-6) 20px;font-size:1.0625rem;line-height:1.55;color:var(--texto-2);text-wrap:pretty}
@media (min-width:900px){.faq-r{font-size:1.125rem}}
.mov .faq-item[open]:not(.faq-fechando) .faq-r{animation:faq-sobe 700ms var(--faq-e) 60ms backwards}
.mov .faq-fechando .faq-r{opacity:0;transition:opacity 240ms var(--curva-saida)}

/* ---------- entrada: as perguntas sobem em sequência ---------- */
.faq-item:nth-child(2){--n:1}.faq-item:nth-child(3){--n:2}.faq-item:nth-child(4){--n:3}.faq-item:nth-child(5){--n:4}.faq-item:nth-child(6){--n:5}.faq-item:nth-child(7){--n:6}
.mov .faq-lista:not(.na-vista) .faq-item{opacity:0}
.mov .faq-lista.na-vista .faq-item{animation:faq-entra 900ms var(--faq-e) backwards;animation-delay:calc(var(--n,0)*70ms)}
@keyframes faq-entra{from{opacity:0;transform:translate3d(-6px,22px,0)}}
@keyframes faq-sobe{from{opacity:0;transform:translate3d(0,14px,0)}}