/* ==========================================================================
   Secao 10, FAQ. Dono: agente GOOGLE. Layout da Maid (titulo, texto e contato colados a esquerda)
   com o numero grande de cada pergunta e a resposta que abre por grid-rows (0fr para 1fr).
   Sem JS: tudo aberto. O CSS so fecha sob html.js.
   ========================================================================== */
.faq__grid{ display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(32px,6vw,96px); align-items:start }
.faq__side{ position:sticky; top:calc(var(--hd-solid) + 32px) }
.faq__lead{ margin-top:22px; max-width:34ch; font-size:clamp(17px,1.35vw,19px); line-height:1.55; color:var(--texto2) }
.faq__ct{ display:grid; gap:2px; margin-top:26px; justify-items:start }
.faq__ct a{ display:inline-flex; align-items:center; gap:14px; min-height:52px; font-size:clamp(17px,1.4vw,19px); font-weight:600; letter-spacing:-.015em; text-decoration:none; overflow-wrap:anywhere }
.faq__ci{ display:grid; place-items:center; flex:0 0 auto; width:44px; height:44px; border-radius:50%; background:var(--grafite); color:#fff; transition:transform .4s var(--ease-out), background-color .3s }
.faq__ci .i{ width:19px; height:19px }
.faq__ct a:hover .faq__ci{ transform:scale(1.1) rotate(-8deg) }
.faq__ct a>span:last-child{ background:linear-gradient(currentColor,currentColor) 0 100% / 0 1px no-repeat; transition:background-size .4s var(--ease-out); padding-bottom:1px }
.faq__ct a:hover>span:last-child{ background-size:100% 1px }

/* lista: o fio de 1px separa as perguntas (so onde organiza) */
.faq__list{ border-top:1px solid var(--rejunte) }
.faq__item{ border-bottom:1px solid var(--rejunte) }
.faq__q{ margin:0; font-size:inherit; font-weight:inherit; letter-spacing:inherit; line-height:inherit }
.faq__q button{
  display:grid; grid-template-columns:clamp(54px,5.4vw,84px) minmax(0,1fr) 44px; align-items:center; column-gap:6px; width:100%; min-height:44px;
  padding:clamp(22px,2.3vw,32px) 0; border:0; background:none; color:var(--grafite); text-align:left;
}
.faq__n{
  font-size:clamp(30px,3.4vw,50px); font-weight:600; line-height:1; letter-spacing:-.06em; font-variant-numeric:tabular-nums; color:var(--texto2);
  transition:color .4s, transform .6s var(--ease-out);
}
.faq__t{ font-size:clamp(18px,1.55vw,22px); font-weight:600; line-height:1.25; letter-spacing:-.03em; text-wrap:balance; padding-right:10px }
.faq__ic{
  display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--grafite); color:#fff;
  transition:transform .55s var(--ease-out), background-color .3s, color .3s;
}
.faq__ic .i{ width:19px; height:19px }
.faq__q button:hover .faq__ic{ background:var(--profundo) }
.faq__q button:hover .faq__n{ transform:translateX(5px); color:var(--grafite) }
.faq__item.is-open .faq__n{ color:var(--grafite) }
.faq__item.is-open .faq__ic{ transform:rotate(135deg); background:#fff; color:var(--grafite); box-shadow:inset 0 0 0 1px var(--grafite) }
.faq__q button:focus-visible{ outline-offset:-2px; border-radius:var(--r-md) }

.faq__a{ margin-left:calc(clamp(54px,5.4vw,84px) + 6px); margin-right:50px }
.faq__ai{ padding:0 0 clamp(24px,2.6vw,34px) }
.faq__ai p{ font-size:clamp(16.5px,1.3vw,18px); line-height:1.65; color:var(--texto2); max-width:58ch }

/* so com JS a resposta fecha (grid-rows 0fr para 1fr) */
.js .faq__a{ display:grid; grid-template-rows:0fr; visibility:hidden; transition:grid-template-rows .55s var(--ease-out), visibility 0s .55s }
.js .faq__ai{ overflow:hidden; min-height:0; padding-bottom:0; opacity:0; transition:opacity .35s, padding .55s var(--ease-out) }
.js .faq__item.is-open .faq__a{ grid-template-rows:1fr; visibility:visible; transition:grid-template-rows .55s var(--ease-out), visibility 0s }
.js .faq__item.is-open .faq__ai{ opacity:1; padding-bottom:clamp(24px,2.6vw,34px); transition:opacity .55s .1s, padding .55s var(--ease-out) }

@media (max-width:899px){
  .faq__grid{ grid-template-columns:minmax(0,1fr); gap:36px }
  .faq__side{ position:static }
}
@media (max-width:520px){
  .faq__q button{ grid-template-columns:44px minmax(0,1fr) 44px; column-gap:8px; padding:20px 0 }
  .faq__n{ font-size:26px }
  .faq__t{ font-size:18px; padding-right:4px }
  .faq__a{ margin-left:52px; margin-right:0 }
}
@media (prefers-reduced-motion:reduce){
  .js .faq__a, .js .faq__ai{ transition:none }
}