/*
  FAQ e rodape (docs/lp-nova.md, etapa 9). O FAQ abre uma resposta por vez
  animando grid-template-rows (0fr -> 1fr), sem medir altura. O rodape tem
  so o que existe de verdade: produto, suporte, politicas e o "Let's stay
  in touch".
*/
.faq{max-width:1024px;margin:0 auto;padding:110px 24px 150px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:72px}
.faq .olho{display:block;font-size:14px;font-weight:500;color:rgba(245,247,251,.5)}
.faq h2{margin:10px 0 36px;font-size:clamp(28px, 2.8vw, 36px);line-height:1.1;font-weight:600;letter-spacing:-.025em}

.pergunta{border-bottom:1px solid rgba(255,255,255,.09)}
.pergunta button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;border:0;background:none;
  color:var(--ink);font:inherit;font-size:17px;text-align:left;cursor:pointer}
.pergunta button:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:4px}
.pergunta button svg{flex:none;width:16px;height:16px;color:rgba(245,247,251,.6);transition:transform .35s cubic-bezier(.22,1,.36,1)}
.pergunta.aberta button svg{transform:rotate(180deg)}
.pergunta .resposta{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.22,1,.36,1)}
.pergunta.aberta .resposta{grid-template-rows:1fr}
.pergunta .resposta > div{overflow:hidden}
.pergunta .resposta p{margin:0 0 14px;max-width:60ch;font-size:15px;line-height:1.6;color:rgba(245,247,251,.6)}
.pergunta .resposta p:last-child{margin-bottom:24px}
.pergunta .resposta a{color:#8fb4ff}

.faq-lado{align-self:center;font-size:15.5px;line-height:1.6;color:rgba(245,247,251,.55)}
.faq-lado p{margin:0}
.botao-cinza{display:inline-flex;align-items:center;gap:8px;margin-top:20px;height:42px;padding:0 18px;border-radius:999px;
  background:rgba(255,255,255,.08);color:var(--ink);text-decoration:none;font-size:15px;transition:background .2s ease}
.botao-cinza:hover{background:rgba(255,255,255,.14)}
.botao-cinza:focus-visible{outline:2px solid #fff;outline-offset:3px}
.botao-cinza svg{width:15px;height:15px}
.faq-lado .ou{display:block;margin-top:16px;font-size:14px}
.faq-lado .ou a{color:#8fb4ff}

/* ---------- rodape ---------- */
.rodape{max-width:1024px;margin:0 auto;padding:40px 24px 64px}
.rodape-topo{display:flex;align-items:center;gap:14px}
.rodape-topo .logo{display:flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none;font-size:17px;font-weight:600;letter-spacing:-.01em}
.rodape-topo .logo svg{width:24px;height:24px}
.rodape-topo small{font-size:14px;color:rgba(245,247,251,.45)}

.colunas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.4fr);gap:32px;margin-top:44px}
/* h3 na docs (o rodape vem depois de um h2) e h4 na index; mesma cara. */
.colunas h3,.colunas h4{margin:0 0 18px;font-size:14px;font-weight:600;color:rgba(245,247,251,.8)}
.colunas ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.colunas a{font-size:14px;color:rgba(245,247,251,.5);text-decoration:none;transition:color .2s ease}
.colunas a:hover{color:var(--ink)}
.colunas a:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:3px}

.contato h3,.contato h4{margin-bottom:10px}
.contato p{margin:0 0 16px;font-size:14px;line-height:1.55;color:rgba(245,247,251,.5)}
.email{display:flex;align-items:center;height:44px;padding:0 4px 0 16px;border-radius:999px;background:rgba(255,255,255,.07);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);max-width:320px}
.email:focus-within{box-shadow:inset 0 0 0 1px rgba(143,180,255,.6)}
.email input{flex:1;min-width:0;height:100%;border:0;background:none;color:var(--ink);font:inherit;font-size:14px;outline:none}
.email input::placeholder{color:rgba(245,247,251,.4)}
.email button{display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;cursor:pointer}
.email button:hover{background:rgba(255,255,255,.18)}
.email button svg{width:15px;height:15px}
.contato .aviso-email{min-height:18px;margin-top:10px;font-size:12.5px;color:rgba(245,247,251,.5)}

.rodape-pe{margin-top:56px;padding-top:24px;border-top:1px solid rgba(255,255,255,.08);font-size:12.5px;line-height:1.6;color:rgba(245,247,251,.38)}

@media (max-width:860px){
  .faq{grid-template-columns:1fr;gap:24px}
  .colunas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contato{grid-column:1 / -1}
}
@media (prefers-reduced-motion:reduce){.pergunta .resposta,.pergunta button svg{transition:none}}