/* 09 Perguntas, 08:00, dia claro: o azul do pé da 08 termina de clarear para o branco gelo. À esquerda o título e a saída
   para quem não achou a pergunta; à direita as perguntas divididas pelos dois produtos, na ordem da 08. Uma aberta por vez */
.s9{background:linear-gradient(180deg,oklch(0.93 0.025 236) 0,oklch(0.955 0.012 238) 140px,var(--nevoa) 320px);color:var(--tinta);--foco:var(--tinta)}
.s9 .in{display:grid;grid-template-columns:minmax(0,400fr) minmax(0,740fr);gap:32px clamp(40px,7vw,100px);align-items:start}
.s9 .rot{font:500 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:oklch(0.42 0.03 250)}
.s9 h2{margin-top:18px;max-width:9em}
.fale9{margin-top:36px;padding-top:22px;box-shadow:inset 0 1px 0 oklch(0.22 0.025 250/.14)}
.fale9 p{max-width:22em;font-size:15px;line-height:1.5;color:var(--tinta-2)}
.s9 .lk{gap:9px;margin-top:6px;font-size:16px;color:oklch(0.48 0.17 252)}

.g9{margin-bottom:6px;font:500 12px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:oklch(0.48 0.03 250)}
.q + .g9{margin-top:30px}
.q{box-shadow:inset 0 -1px 0 oklch(0.22 0.025 250/.12)}
.g9 + .q{box-shadow:inset 0 -1px 0 oklch(0.22 0.025 250/.12),inset 0 1px 0 oklch(0.22 0.025 250/.12)}
.q h4{margin:0;font:inherit}
.q button{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;min-height:60px;padding:12px 0;border:0;background:none;font-size:19px;font-weight:600;letter-spacing:-.015em;line-height:1.25;color:var(--tinta);text-align:left;cursor:pointer;transition:color .2s}
/* o sinal de mais gira 45 graus e vira um xis */
.q button i{position:relative;flex:none;width:30px;height:30px;border-radius:50%;background:oklch(1 0 0/.8);box-shadow:inset 0 0 0 1px oklch(0.22 0.025 250/.1);transition:transform .45s var(--saida),background-color .2s}
.q button i:before,.q button i:after{content:"";position:absolute;left:9px;top:14px;width:12px;height:2px;border-radius:2px;background:currentColor}
.q button i:after{transform:rotate(90deg)}
@media (hover:hover) and (pointer:fine){
  .q button:hover i{background:oklch(1 0 0)}
}
.q button[aria-expanded="true"]{color:oklch(0.48 0.17 252)}
.q button[aria-expanded="true"] i{transform:rotate(45deg);background:oklch(0.92 0.035 245)}
/* abrir muda a altura de uma vez e a resposta entra; fechar é na hora */
.r{padding:0 64px 20px 0}
.r:not([hidden]){animation:abre9 .5s var(--saida) both}
@keyframes abre9{from{opacity:0;transform:translateY(-6px)}}
.r p{max-width:36em;font-size:17px;font-weight:500;line-height:1.5;color:var(--tinta-2)}

/* a chegada: as linhas sobem 12 px e acendem em sequência, uma vez (fim.js liga .on e põe o --i de cada uma) */
.anima .faq > *{opacity:0;transform:translateY(12px)}
.anima .faq.on > *{opacity:1;transform:none;transition:opacity .5s,transform .5s var(--saida);transition-delay:calc(var(--i,0) * 40ms)}

/* empilhada: rótulo, título, as perguntas e, por último, a saída do WhatsApp, logo antes do rodapé */
@media (max-width:859px){
  .s9 .in{display:flex;flex-direction:column;gap:0}
  .lado9{display:contents}
  .s9 .rot{order:0}
  .s9 h2{order:1;max-width:none}
  .faq{order:2;margin-top:32px}
  .fale9{order:3;margin-top:40px}
}
@media (max-width:599px){
  .q button{min-height:56px;font-size:17px}
  .r{padding-right:0}
  .r p,.fale9 p{font-size:16px}
}