/* UAIprimora · página Como funciona (2026-10-07): linha do tempo da lapidação, um tom de vermelho por passo.
   Só esta página carrega este arquivo, depois de estilo.css. Cores de texto: só as já conferidas em
   estilo.css (REQ-20); o tom de cada passo aparece no ponto, na borda e no corte da pedra, nunca no texto. */

.marcos { margin-top: clamp(40px, 5vw, 72px); display: grid; gap: clamp(40px, 5vw, 64px); }
.marco { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; scroll-margin-top: 24px; }
.marco-pedra .nucleo { background: var(--esc); box-shadow: none; overflow: hidden; }
.marco-pedra svg { width: 100%; height: auto; }
.marco .corte-novo { opacity: .3; transition: opacity .4s var(--curva); }
.marco.aceso .corte-novo { opacity: 1; }
.marco-texto { border-left: 2px solid var(--linha); padding: 6px 0 6px clamp(20px, 3vw, 34px); transition: border-color .4s var(--curva); }
.marco.aceso .marco-texto { border-left-color: var(--cor); }
.marco-texto > .rotulo { display: flex; align-items: center; gap: 10px; }
.marco-texto > h3 { margin-top: 8px; font-size: clamp(24px, 2.2vw, 30px); letter-spacing: -.02em; line-height: 1.2; }
.marco-texto > .lead { margin-top: 10px; max-width: 52ch; }
.marco-texto > .pendente { margin-top: 18px; max-width: 62ch; }

/* passo 03: os dois formatos de entrega, no mesmo desenho da página inicial (js/secoes-claras.js, #entrega) */
.marco .entrega-grade { margin-top: clamp(28px, 3vw, 40px); }
.entrega-texto h4 { font-size: clamp(22px, 1.9vw, 28px); letter-spacing: -.02em; line-height: 1.2; margin: 10px 0 8px; }
.entrega-texto h4 + p { font-size: 17px; color: var(--cinza); line-height: 1.5; }
.entrega-texto .pendente { margin-top: 16px; }

.divisa { border-top: 1px solid var(--linha); }

/* a coluna do texto é mais estreita que a seção da página inicial: os cartões empilham mais cedo */
@media (max-width: 1100px) {
  .marco { grid-template-columns: 140px minmax(0, 1fr); }
  .marco .entrega-grade { grid-template-columns: 1fr; }
  .marco .entrega-ou { position: relative; left: auto; top: auto; margin: -8px auto; }
}
@media (max-width: 760px) {
  .marco { grid-template-columns: 1fr; gap: 18px; }
  .marco-pedra { width: 132px; }
  .entrega-texto h4 + p { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .marco .corte-novo, .marco-texto { transition: none; }
}