/* ==========================================================================
   FAQ · 1:358 · Realização e apoio · 1:401 · Chamada final · 1:507
   Respiros reais do Figma: Ao vivo → FAQ 123 · FAQ → Realização 144 ·
   Realização → Chamada final 123 · Chamada final → rodapé 123.
   Mobile: desktop empilhado (preferência do Lucas).
   ========================================================================== */

/* ---------- FAQ ---------- */
.cn-faq { padding-top: var(--gap-123); }
.cn-faq__inner { display: grid; grid-template-columns: minmax(0, var(--faq-head-w)) minmax(0, var(--faq-list-w)); justify-content: space-between; gap: var(--space-64); align-items: start; }
.cn-faq__head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-20); }
.cn-faq__head .t-body-l { color: var(--text-body); }
.cn-faq__list .cn-acc__item:first-child { border-top: 1px solid var(--border-divider); }
.cn-faq__list .cn-acc__q { cursor: pointer; transition: color var(--dur-fast); }
.cn-faq__list .cn-acc__q:hover { color: var(--purple-700); }
.cn-faq__link { color: var(--purple-700); font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 3px; }
/* sem JS: tudo aberto */
.no-js .cn-acc__a { grid-template-rows: 1fr; }
.no-js .cn-acc__icon::after { transform: translate(-50%, -50%) rotate(0deg); }

/* ---------- Realização ---------- */
.cn-realizacao { padding-top: var(--gap-144); }
.cn-realizacao__head { display: flex; flex-direction: column; align-items: center; gap: var(--space-20); text-align: center; }
/* dois grupos lado a lado: Realização (2) | Apoio (1), separados por um fio */
.cn-realizacao__tiers {
  margin-top: var(--space-10); padding-top: var(--space-32); border-top: 1px solid var(--lilac-375);
  display: flex; justify-content: center; align-items: stretch; gap: var(--space-40);
}
.cn-realizacao__tier { display: flex; flex-direction: column; align-items: center; gap: var(--space-20); }
.cn-realizacao__tier--apoio { padding-left: var(--space-40); border-left: 1px solid var(--lilac-200); }
.cn-realizacao__label { color: var(--text-strong); }
.cn-realizacao__logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-40); }
/* só o logo, sem card */
.cn-realizacao__logo {
  display: grid; place-items: center; height: var(--logo-card-h); padding-inline: var(--space-12);
  transition: transform .3s var(--ease-out);
}
.cn-realizacao__logo img { width: auto; max-width: 100%; height: var(--logo-h-idomed); object-fit: contain; }
.cn-realizacao__logo--tanatologia img { height: var(--logo-h-tanatologia); }
.cn-realizacao__logo--excellence img { height: var(--logo-h-excellence); }
@media (hover: hover) and (pointer: fine) {
  .cn-realizacao__logo:hover { transform: translateY(-3px); }
}

/* ---------- Chamada final ----------
   D8: em vez de encostar os cantos r46 na borda da tela, o bloco tem a margem
   lateral do gutter (24px). */
.cn-final { padding: var(--gap-123) var(--gutter) 0; }
.cn-final__box {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; place-items: center; min-height: var(--final-h);
  padding: var(--space-64) var(--space-24);
  border-radius: var(--radius-final);
  background: var(--purple-900); /* cor de base enquanto o fundo carrega */
}
.cn-final__bg { position: absolute; inset: 0; z-index: -1; }
.cn-final__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 100%; } /* borboleta e fitas no canto inferior direito */
.cn-final__content { width: min(100%, var(--final-w)); display: flex; flex-direction: column; align-items: center; gap: var(--space-24); text-align: center; }
.cn-final__content .t-body-l { color: var(--white); }

/* ---------- ≤1023 ---------- */
@media (max-width: 1023px) {
  .cn-faq__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-32); }
  .cn-realizacao__tiers { flex-direction: column; align-items: center; gap: var(--space-32); }
  .cn-realizacao__tier--apoio { padding-left: 0; border-left: 0; }
}
@media (max-width: 767px) {
  .cn-faq { padding-top: var(--space-80); }
  .cn-faq__list .cn-acc__q { font-size: var(--fs-body-l); }
  .cn-realizacao { padding-top: var(--space-80); }
  .cn-realizacao__tier { width: 100%; }
  .cn-realizacao__logos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: var(--space-12); }
  .cn-realizacao__tier--apoio .cn-realizacao__logos { grid-template-columns: minmax(0, 1fr); }
  .cn-realizacao__logo { height: 96px; padding-inline: 0; }
  .cn-realizacao__logo img { height: 56px; }
  .cn-realizacao__logo--tanatologia img { height: 76px; }
  .cn-realizacao__logo--excellence img { height: 40px; }
  .cn-final { padding: var(--space-80) var(--space-16) 0; }
  /* proporção da referência do Lucas (assets/complementar/exemplo-secao-movimento.png, ~395 × 660):
     texto em cima, borboleta logo abaixo do botão (a arte é cortada no topo, que é só céu escuro); 1,3 × a largura */
  .cn-final__box { min-height: calc((100vw - 2 * var(--space-16)) * 1.3 + var(--space-24)); /* +24: o respiro extra do topo não empurra a borboleta */ place-items: start center; padding: var(--space-64) var(--space-20) var(--space-40); }
  .cn-final__content { gap: var(--space-20); }
  .cn-final__content .t-body-l { font-size: var(--fs-body-s); line-height: 1.6; }
  .cn-final__bg img { object-position: 50% 100%; }
  .cn-final__content .cn-btn { width: 100%; }
}