/* =====================================================================
   CONTINUIDADE EDITORIAL · Conteúdos → Encerramento → Rodapé
   Mesmos tokens, escala tipográfica e movimento dos capítulos aprovados.
   ===================================================================== */

/* 1. Conteúdos · capítulo escuro, como A proposta. */
.topics {
  padding-block: 88px 80px;
  border: 0;
  border-radius: 40px 40px 0 0;
  background: var(--color-dark);
  color: var(--color-on-dark);
}
.topics-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  align-items: end;
  gap: 64px;
  margin-bottom: 64px;
}
.topics h2, .closing h2 {
  font-size: clamp(44px, 5vw, 72px);
  line-height: 1.08;
  letter-spacing: -.04em;
  font-weight: 500;
  text-wrap: initial;
}
.topics h2 span { color: var(--color-accent-dark); }
.topics .eyebrow, .topic .index { color: var(--color-accent-dark); }
.topics-heading > p {
  max-width: 440px;
  color: #d1d4d1;
  font-size: 20px;
  line-height: 1.65;
  padding-bottom: 4px;
}
.topic {
  position: relative;
  grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  padding-block: 48px;
  border-color: rgb(199 168 149 / 25%);
}
.topic::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-accent-dark);
  transform: scaleX(var(--progress, 1));
  transform-origin: left;
}
.topic .index {
  padding: 0;
  font-family: var(--font-display);
  font-size: 60px;
  line-height: 1;
  letter-spacing: -.05em;
}
.topic h3 {
  max-width: 400px;
  font-size: 38px;
  line-height: 1.12;
  letter-spacing: -.035em;
}
.topic p { max-width: 460px; color: #d1d4d1; line-height: 1.65; }
.topic:last-child { border-color: rgb(199 168 149 / 25%); }
.topic h3, .topic p, .topics-heading h2, .closing h2 {
  transform: translateY(var(--lift, 0px));
}

/* 2. Encerramento · uma conclusão com a presença da abertura. */
.closing { padding-block: 88px; }
.closing-grid { gap: 32px; }
.closing-grid > div {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  align-items: end;
  gap: 64px;
}
.closing h2 { max-width: 760px; }
.closing-grid > div { align-items: start; }
.experience-copy { display: grid; gap: 24px; }
.closing h2 span { color: #6f5143; }
.closing p:not(.eyebrow) {
  max-width: 440px;
  margin: 0;
  font-size: 20px;
  line-height: 1.65;
  padding-bottom: 4px;
}
.closing-grid::after {
  content: '';
  width: 100%;
  height: 1px;
  margin-top: 24px;
  background: #8f6e5e;
  transform: scaleX(var(--progress, 1));
  transform-origin: left;
}

/* 3. Rodapé · mesma assinatura; ação real com foco e resposta visual. */
.site-footer { padding-block: 48px; gap: 48px; }
.site-footer p { max-width: 560px; }
.back-top {
  max-width: none;
  min-height: 48px;
  gap: 16px;
  padding: 12px 20px;
  border: 1px solid #bca393;
  border-radius: 999px;
  background: linear-gradient(135deg, #fffaf5, #e8d9cd);
  white-space: nowrap;
  font-size: 14px;
  transition: background .2s ease;
}
.back-top span { transition: transform .2s ease; }
.back-top:is(:hover, :focus-visible) { background: #e2d3c7; text-decoration: none; }
.back-top:is(:hover, :focus-visible) span { transform: translateY(-3px); }

/* 4. Tablet · mantém os mesmos eixos, com leitura em duas colunas. */
@media (max-width: 1100px) {
  .topics-heading, .closing-grid > div { grid-template-columns: 1fr; gap: 32px; }
  .topics-heading > p, .closing p:not(.eyebrow) { max-width: 640px; }
  .topic { grid-template-columns: 64px minmax(0, 1fr); gap: 20px 32px; }
  .topic .index { grid-row: 1 / 3; font-size: 44px; }
  .topic h3 { max-width: none; font-size: 32px; }
  .topic p { grid-column: 2; max-width: 560px; }
  .site-footer { gap: 32px; }
}

/* 5. Celular · escala expressiva sem sacrificar a leitura. */
@media (max-width: 480px) {
  .topics { border-radius: 24px 24px 0 0; padding-block: 56px; }
  .topics-heading { gap: 24px; margin-bottom: 40px; }
  .topics h2, .closing h2 { font-size: 40px; line-height: 1.1; }
  .topics-heading > p, .closing p:not(.eyebrow), .topic p { font-size: 17px; line-height: 28px; }
  .topic { grid-template-columns: 36px minmax(0, 1fr); gap: 16px; padding-block: 32px; }
  .topic .index { font-size: 32px; }
  .topic h3 { font-size: 28px; }
  .closing { padding-block: 56px; }
  .closing-grid, .closing-grid > div { gap: 24px; }
  .closing-grid::after { margin-top: 8px; }
  .site-footer { grid-template-columns: 1fr; gap: 24px; padding-block: 32px; }
  .site-footer p { grid-column: auto; grid-row: auto; }
  .back-top { justify-self: start; }
}

/* 6. Acessibilidade · conteúdo estático completo por padrão. */
@media (prefers-reduced-motion: reduce) {
  .topic::before, .closing-grid::after,
  .topic h3, .topic p, .topics-heading h2, .closing h2,
  .back-top:is(:hover, :focus-visible) span { transform: none; }
}