/* Etapas, CTA final e palco fixo (pin). O pin so liga com html.pin-on (JS ativo, sem prefers-reduced-motion). */
@layer pages {
  /* etapas em lista (padrao, mobile sem JS, movimento reduzido) */
  .etapas { list-style: none; padding: 0; counter-reset: e; border-block-start: 1px solid var(--line); }
  .etapas > li { display: grid; gap: var(--s-4) var(--s-6); padding-block: var(--s-6); border-block-end: 1px solid var(--line); }
  .etapa__ic { color: var(--gold); }
  .etapa__txt { display: grid; gap: var(--s-3) var(--s-6); align-content: start; }
  .etapa__n { font: 300 clamp(4rem, 2rem + 9vw, 9rem)/.9 var(--f-sans); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1px var(--gold); font-variant-numeric: tabular-nums; }
  .etapa__txt h3 { font-size: var(--t-xl); font-weight: 500; letter-spacing: -.03em; }
  .etapa__txt p { color: var(--gray-2); max-inline-size: 48ch; }
  @media (min-width: 62rem) {
    .etapas > li { grid-template-columns: 2.4rem minmax(0, 1fr); }
    .etapa__txt { grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr); align-items: center; }
    .etapa__n { grid-row: 1 / span 2; }
    .etapa__txt h3, .etapa__txt p { grid-column: 2; }
  }

  /* palco fixo: a secao fica "presa" enquanto a rolagem troca as etapas */
  .pin-on .pinwrap { position: relative; block-size: calc(100svh + (var(--n) - 1) * 70svh); margin-inline: calc(-1 * var(--gutter)); }
  .pin-on .pinstage { position: sticky; inset-block-start: 0; block-size: 100svh; display: grid; align-items: center; padding: var(--header-h) var(--gutter) var(--s-8); overflow: clip; }
  .pin-on .pinstage::before, .pin-on .pinstage::after { content: ""; position: absolute; inset-inline: var(--gutter); inset-block-end: var(--s-7); block-size: 1px; }
  .pin-on .pinstage::before { background: var(--line); }
  .pin-on .pinstage::after { background: var(--gold); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
  .pin-on .pinstage .etapas { position: relative; border: 0; block-size: min(62svh, 34rem); }
  .pin-on .pinstage .etapas > li { position: absolute; inset: 0; border: 0; align-content: center; padding: 0; opacity: 0; transform: translateY(2.5rem); pointer-events: none; transition: opacity .7s var(--ease), transform .9s var(--ease); }
  .pin-on .pinstage .etapas > li.is-active { opacity: 1; transform: none; pointer-events: auto; }
  .pin-on .pinstage .etapas > li.is-past { transform: translateY(-2.5rem); }
  .pin-on .pinstage .etapa__n { -webkit-text-stroke-color: var(--gold); font-size: clamp(7rem, 4rem + 18vw, 22rem); }
  @media (min-width: 62rem) { .pin-on .pinstage .etapas > li { grid-template-columns: 1fr; } .pin-on .pinstage .etapa__ic { display: none; } .pin-on .pinstage .etapa__txt { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .pin-on .pinstage .etapa__txt h3 { font-size: var(--t-2xl); } .pin-on .pinstage .etapa__txt p { font-size: var(--t-lg); } }
  @media (max-width: 61.99rem) { .pin-on .pinstage .etapa__ic { display: none; } }

  /* ---------- chamada final ---------- */
  .sec--cta { position: relative; isolation: isolate; overflow: clip; padding-block: calc(var(--sec-y) * 1.4); background: var(--black); }
  .sec--cta::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(60% 80% at 80% 100%, rgb(201 164 92 / .18), transparent 70%); }
  .sec--cta::after { content: ""; position: absolute; z-index: -1; inset-block: 8% -20%; inset-inline-end: -10%; inline-size: min(52rem, 90vw); background: url("/img/logo-dm.png") center / contain no-repeat; opacity: .05; }
  .sec--cta .narrow { max-inline-size: none; }
  .sec--cta h2 { font-size: var(--t-3xl); max-inline-size: 12ch; margin-block-start: var(--s-5); }
  .sec--cta.center h2 { margin-inline: 0; }
  .sec--cta .lead { margin-block-start: var(--s-6); }
  .sec--cta.center { text-align: start; }
  .sec--cta.center .narrow > * { margin-inline: 0; }
  .icobolha { display: none; }
  .cta__nota { margin-block-start: var(--s-5); font-size: var(--t-sm); color: var(--gray-3); max-inline-size: 48ch; }
  .sec--cta .cta__row { display: grid; gap: var(--s-6) var(--s-8); padding-inline: var(--gutter); }
  .sec--cta .cta__row .narrow { padding-inline: 0; }
  .cta__name { display: block; font-size: var(--t-3xl); font-weight: 700; letter-spacing: -.03em; line-height: .95; color: var(--white); text-decoration: none; max-inline-size: 11ch; }
  .cta__name em { font-style: normal; font-weight: 300; color: var(--gold-hi); }
  .cta__name:hover em { color: var(--gold); }
  @media (min-width: 60rem) {
    .sec--cta .cta__row { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); align-items: center; }
    .cta__name { justify-self: end; text-align: end; }
  }
}