/* Programa Fardamento · RODA. Usa tokens.css e componentes.css do pacote (blocos protegidos).
   Regra de movimento: o estilo natural de cada elemento é o estado final. Toda animação vive dentro
   de @supports (animation-timeline) + prefers-reduced-motion: no-preference. Sem suporte (Firefox),
   com movimento reduzido ou sem JavaScript, a página fica parada e completa. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--color-preto); color: var(--color-preto);
  font-family: var(--font-body-family); font-size: var(--font-body-size);
  line-height: var(--font-body-line-height); overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; border-radius: 4px; }

:root { --gut: clamp(20px, 5vw, 64px); --larg: 1320px; }
.miolo { max-width: var(--larg); margin-inline: auto; }
.cap { padding-inline: var(--gut); }
@media (max-width: 899px) { .cap { padding-block: var(--spacing-lg); } }

.letreiro { display: block; color: currentColor; }
.grafismo { display: block; color: currentColor; }
.legenda {
  font-family: var(--font-label-family); font-weight: 700; font-size: 13px;
  letter-spacing: .01em; line-height: 1.35; margin: 12px 0 0;
}
.titulo-sec {
  font-family: var(--font-display-family); font-weight: 700; letter-spacing: -.01em;
  font-size: clamp(34px, 5vw, 72px); line-height: 1.02; margin: 0; max-width: 18ch; text-wrap: balance;
}

/* cores de capítulo fora do .cap (artigos da história) */
.c-amarelo { background-color: var(--color-amarelo); color: var(--color-preto); }
.c-preto { background-color: var(--color-preto); color: var(--color-branco); }
.c-branco { background-color: var(--color-branco); color: var(--color-preto); }
.c-verde { background-color: var(--color-verde); color: var(--color-preto); }
.c-azul { background-color: var(--color-azul); color: var(--color-branco); }
.c-rosa { background-color: var(--color-rosa); color: var(--color-preto); }
.c-vermelho { background-color: var(--color-vermelho); color: var(--color-branco); }

/* ============ ABERTURA ============ */
.abertura { position: relative; overflow: clip; background: var(--color-amarelo); color: var(--color-preto); }
.abertura-palco {
  min-height: 100svh; padding: 20px var(--gut) 72px;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  grid-template-rows: auto 1fr; column-gap: clamp(24px, 4vw, 72px);
  max-width: calc(var(--larg) + 2 * var(--gut)); margin-inline: auto;
}
.barra { grid-column: 1 / -1; display: flex; align-items: center; gap: 20px; padding-bottom: 20px; }
.barra-marca { display: block; width: 116px; }
.barra-nome {
  font-family: var(--font-label-family); font-weight: 700; font-size: 15px;
  letter-spacing: .14em; text-transform: uppercase; padding-left: 20px; border-left: 2px solid currentColor;
}
.barra-para { font-weight: 400; margin-left: 8px; }
.barra-botao { margin-left: auto; text-decoration: none; border-radius: var(--rounded-full); }
.barra-botao { display: inline-grid; justify-items: center; }
.bb-a, .bb-b { grid-area: 1 / 1; }
.bb-b { visibility: hidden; }
@media (hover: hover) { .barra-botao:hover .bb-a { visibility: hidden; } .barra-botao:hover .bb-b { visibility: visible; } }
.barra-botao:focus-visible .bb-a { visibility: hidden; }
.barra-botao:focus-visible .bb-b { visibility: visible; }
@media (hover: none) { .bb-a { display: none; } .bb-b { visibility: visible; } }
.barra-nome { white-space: nowrap; }

.abertura-texto { align-self: end; position: relative; padding-bottom: 2vh; }
.abertura-titulo {
  font-family: var(--font-display-family); font-weight: 700; letter-spacing: -.02em;
  font-size: clamp(42px, 4.9vw, 76px); line-height: .98; margin: 0 0 28px; max-width: 15ch; text-wrap: balance;
}
.abertura-lead { font-size: clamp(18px, 1.5vw, 22px); max-width: 34em; margin: 0; }
.grafismo-circpont { position: absolute; width: clamp(64px, 8vw, 120px); right: 0; top: -30%; }

.retalhos { margin: 0; align-self: center; justify-self: end; width: 100%; max-width: min(560px, 76svh * .8); }
.retalhos-quadro { position: relative; aspect-ratio: 4 / 5; }
.retalhos-foto { width: 100%; height: 100%; object-fit: cover; border-radius: var(--rounded-md); }
.retalhos-tela { position: absolute; display: none; pointer-events: none; }
.leg-a { display: none; }
/* a legenda fica colada na foto: 8px abaixo, com duas linhas reservadas para a troca antes/depois não mexer na foto */
.retalhos .legenda { margin-top: 8px; min-height: 2.7em; }

/* com o efeito ligado (JS decide: canvas 2D e sem movimento reduzido) */
html.retalhos-on .abertura { height: 175svh; }
html.retalhos-on .abertura-palco { position: sticky; top: 0; height: 100svh; min-height: 0; }
html.retalhos-on .retalhos-foto { visibility: hidden; }
html.retalhos-on .retalhos-tela { display: block; top: -2%; left: -7%; width: 114%; height: 104%; }
html.retalhos-on .retalhos[data-fase="a"] .leg-a { display: inline; }
html.retalhos-on .retalhos[data-fase="a"] .leg-b { display: none; }

@media (max-width: 899px) {
  .abertura-palco { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; padding-bottom: 24px; }
  .barra { gap: 12px; padding-bottom: 12px; }
  .barra-marca { width: 84px; }
  .barra-nome { font-size: 12px; padding-left: 12px; letter-spacing: .1em; }
  .barra-para { font-weight: 400; margin-left: 8px; }
.barra-botao { padding: 10px 16px; font-size: 12px; }
  .abertura-texto { align-self: start; padding: 3vh 0 20px; }
  .abertura-titulo { font-size: clamp(34px, 10.2vw, 56px); margin-bottom: 16px; }
  .abertura-lead { font-size: 16px; }
  .grafismo-circpont { display: none; }
  .barra-para { display: none; }
  .retalhos { justify-self: stretch; max-width: none; }
  .retalhos-quadro { width: min(100%, 40svh * .8 + 40px); margin-inline: auto; }
  /* com a cena presa: o quadro ocupa só o que sobra da tela, e a legenda nunca é cortada */
  html.retalhos-on .abertura-palco { display: flex; flex-direction: column; padding-bottom: 32px; }
  html.retalhos-on .retalhos { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  html.retalhos-on .retalhos-quadro { flex: 1 1 auto; min-height: 120px; aspect-ratio: auto; width: min(100%, 420px); }
  html.retalhos-on .retalhos .legenda { flex: none; }
  .retalhos .legenda { text-align: center; font-size: 11px; }
  html.retalhos-on .abertura { height: 165svh; }
}

/* ============ O CAMINHO DO LOTE ============ */
.caminho-intro { padding-bottom: var(--spacing-lg); }
.caminho-titulo { font-size: clamp(38px, 6.2vw, 96px); max-width: 16ch; }
.filete { border: 0; height: 6px; background: currentColor; margin: 48px 0 0; width: 33%; border-radius: var(--rounded-full); }

.passo {
  position: relative; padding: 40px var(--gut) var(--spacing-xl);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr; column-gap: clamp(24px, 5vw, 96px); row-gap: 40px;
  container-type: inline-size; overflow: clip;
}
.passo > * { max-width: 100%; }
.trilho {
  grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: flex; gap: 6px;
  font-family: var(--font-label-family); font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
}
/* rótulos inativos na cor do texto, sem opacidade (a .45 mediam 2,25:1 sobre o rosa); a etapa ativa se marca pela barra de 6px */
.trilho li { flex: 1; padding-top: 10px; border-top: 2px solid currentColor; }
.trilho li.ativo { border-top-width: 6px; padding-top: 6px; }
.passo-texto { align-self: center; max-width: 34em; }
.passo-num {
  font-family: var(--font-numero-family); font-weight: 700; font-size: clamp(72px, 9vw, 150px);
  line-height: .82; letter-spacing: -.03em; margin: 0 0 16px;
}
.passo-titulo {
  font-family: var(--font-headline-family); font-weight: 700; font-size: clamp(44px, 5.4vw, 84px);
  line-height: .95; margin: 0 0 20px; text-wrap: balance;
}
.passo-texto > p:not([class]) { margin: 0 0 24px; font-size: clamp(17px, 1.3vw, 20px); }
.registro-rotulo {
  font-family: var(--font-label-family); font-weight: 700; font-size: 13px; letter-spacing: .14em;
  text-transform: uppercase; margin: 0 0 10px;
}
.registro { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.registro li {
  font-family: var(--font-label-family); font-weight: 700; font-size: 15px; letter-spacing: .04em;
  border: 2px solid currentColor; border-radius: var(--rounded-full); padding: 6px 14px 5px;
}
.passo-visual { align-self: center; justify-self: center; width: 100%; max-width: 560px; margin: 0; container-type: inline-size; position: relative; }

@media (max-width: 899px) {
  .passo { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; row-gap: 32px; padding-top: 28px; padding-bottom: var(--spacing-lg); }
  .trilho { font-size: 0; gap: 4px; }
  .trilho li { padding-top: 0; }
  .passo-titulo { font-size: clamp(40px, 12vw, 56px); }
  .passo-num { font-size: 72px; }
}

/* 01 etiqueta de lote */
.etiqueta {
  position: relative; margin: 56px auto 0; width: min(100%, 400px);
  background: var(--color-branco); color: var(--color-preto); border-radius: var(--rounded-md);
  padding: 56px 28px 24px; transform-origin: 50% 20px;
}
.etiqueta-furo { position: absolute; top: 14px; left: 50%; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: var(--color-azul); }
.etiqueta-cordao { position: absolute; left: 50%; bottom: calc(100% - 24px); width: 3px; height: 80px; margin-left: -1.5px; background: var(--color-branco); }
.etiqueta-topo { font-family: var(--font-label-family); font-weight: 700; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; margin: 0; }
.etiqueta-num { font-family: var(--font-numero-family); font-weight: 700; font-size: 72px; line-height: .9; margin: 4px 0 20px; letter-spacing: -.02em; }
.etiqueta dl { margin: 0; }
.etiqueta dl div { display: flex; justify-content: space-between; gap: 12px; border-top: 2px solid var(--color-preto); padding: 8px 0 6px; }
.etiqueta dt { font-family: var(--font-label-family); font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.etiqueta dd { margin: 0; font-weight: 700; font-size: 16px; text-align: right; }
.etiqueta-barra { display: block; height: 14px; border: 2px solid var(--color-preto); border-radius: var(--rounded-full); margin-top: 12px; overflow: hidden; }
.etiqueta-barra i { display: block; height: 100%; background: var(--color-preto); transform-origin: left; }
.etiqueta-nota { margin: 12px 0 0; font-family: var(--font-label-family); font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }

/* 02 camisa sem marca */
.passo-2 .passo-visual { aspect-ratio: 560 / 420; }
.camisa { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.camisa-corpo { fill: var(--color-branco); }
.camisa-buraco { fill: var(--color-preto); }
.camisa-corte { fill: none; stroke: var(--color-preto); stroke-width: 3; stroke-dasharray: 7 6; }
.marca-remendo {
  position: absolute; left: 39.64%; top: 28.57%; width: 11.07%; height: 10.95%;
  background: var(--color-branco); color: var(--color-preto); border: 2px solid var(--color-preto); border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-headline-family); font-weight: 700; font-size: 3.7cqw; line-height: 1;
  transform: translate(330%, 330%) rotate(16deg) scale(1.5);
}
.marca-remendo span { display: inline-block; transform: translateY(calc((var(--i) - 2) * 6%)) rotate(calc((var(--i) - 2) * 10deg)); }

/* 03 classes */
.classes { margin: 0; display: grid; gap: 14px; }
.classe { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 16px; border-top: 2px solid currentColor; padding-top: 12px; }
.classe dt { display: flex; align-items: center; gap: 16px; min-width: 0; }
.classe-letra { font-family: var(--font-display-family); font-weight: 700; font-size: clamp(48px, 5.5vw, 80px); line-height: .85; width: 1em; flex: none; }
.classe-peca { display: block; background: var(--color-preto); border-radius: 8px; height: 56px; flex: none; }
.classe-a .classe-peca { width: 60%; height: 64px; }
.classe-b .classe-peca { width: 40%; height: 48px; }
.classe-c .classe-peca { width: 22%; height: 34px; }
.classe-d .classe-peca { background: none; width: 40%; height: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.classe-d .classe-peca i { display: block; width: 16px; height: 12px; background: var(--color-preto); border-radius: 3px; }
.classe-d .classe-peca i:nth-child(2n) { width: 10px; height: 16px; }
.classe dd { margin: 0; font-size: 16px; line-height: 1.3; }
.classe dd b { display: block; font-family: var(--font-label-family); font-size: 14px; letter-spacing: .12em; text-transform: uppercase; }

/* 04 produto */
.produto img { width: 100%; max-height: 64svh; object-fit: cover; border-radius: var(--rounded-md); aspect-ratio: 4 / 5; }
@media (max-width: 899px) { .produto img { max-height: none; } .produto { max-width: 420px; } }

/* 05 fluxo */
.fluxo { width: 100%; height: auto; display: block; overflow: visible; }
.fluxo rect.cheio { fill: var(--color-preto); }
.fluxo rect.contorno { fill: none; stroke: var(--color-preto); stroke-width: 3; }
.fluxo rect.tracejado { fill: none; stroke: var(--color-preto); stroke-width: 3; stroke-dasharray: 8 7; }
.fluxo text { font-family: var(--font-headline-family); font-weight: 700; font-size: 30px; text-anchor: middle; fill: var(--color-preto); }
.fluxo text.t-claro { fill: var(--color-branco); text-transform: uppercase; letter-spacing: .08em; font-size: 26px; }
.fluxo text.t-menor { font-family: var(--font-label-family); font-size: 15px; letter-spacing: .05em; text-transform: uppercase; }
/* sequência de três da sobra: número em círculo (como o carimbo da ficha) e linha de apoio legível a 390 (22px no viewBox = 13,75px na tela) */
.fluxo circle.rd-ordem { fill: none; stroke: var(--color-preto); stroke-width: 3; }
.fluxo text.rd-ordem-num { font-family: var(--font-numero-family); font-size: 28px; letter-spacing: 0; }
.fluxo text.rd-sub { font-family: var(--font-label-family); font-size: 22px; letter-spacing: .01em; } /* caixa baixa: 47 a 49 caracteres em caixa-alta leem mal a 390 */
.fluxo-no { transform-box: fill-box; transform-origin: center; }
.fluxo-linha { fill: none; stroke: var(--color-preto); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 0; }

/* 06 relatório */
.relatorio { background: var(--color-branco); border: 3px solid var(--color-preto); border-radius: var(--rounded-md); padding: 24px 28px; }
.relatorio-topo { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; font-family: var(--font-label-family); font-weight: 700; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; }
.relatorio-topo span + span { opacity: .7; }
.relatorio ol { list-style: none; margin: 0; padding: 0; counter-reset: r; }
.relatorio li { counter-increment: r; display: grid; grid-template-columns: 2.2em minmax(0, 8.5em) minmax(0, 1fr); gap: 12px; align-items: baseline; border-top: 2px solid var(--color-preto); padding: 10px 0 8px; }
.relatorio li::before { content: counter(r, decimal-leading-zero); font-family: var(--font-numero-family); font-weight: 700; font-size: 18px; }
.relatorio li b { font-family: var(--font-headline-family); font-size: 22px; line-height: 1.1; }
.relatorio li span { font-size: 15px; line-height: 1.35; }
@media (max-width: 520px) {
  .relatorio { padding: 20px; }
  .relatorio li { grid-template-columns: 2em minmax(0, 1fr); }
  .relatorio li span { grid-column: 2; }
}

/* ============ NÚMEROS ============ */
.numeros-titulo { font-family: var(--font-headline-family); font-weight: 700; font-size: clamp(34px, 3.6vw, 56px); line-height: 1; margin: 0 0 40px; }
.numeros-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(24px, 5vw, 96px); }
.numero { border-top: 2px solid currentColor; padding: 14px 0 18px; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; align-items: baseline; }
.numero-valor { margin: 0; font-family: var(--font-numero-family); font-weight: 700; letter-spacing: -.02em; line-height: .9; white-space: nowrap; font-size: clamp(44px, 4.6vw, 72px); }
.n-val { display: inline-block; text-align: right; }
.numero-rotulo { margin: 0; font-size: 17px; line-height: 1.3; max-width: 16em; }
.numero-principal { grid-column: 1; grid-row: 1 / span 3; border-top-width: 6px; display: block; padding-top: 20px; }
.numero-principal .numero-valor { font-size: clamp(120px, 21vw, 320px); line-height: .82; letter-spacing: -.04em; }
.numero-principal .numero-rotulo { font-family: var(--font-headline-family); font-weight: 700; font-size: clamp(28px, 2.8vw, 44px); line-height: 1; margin-top: 20px; max-width: 12em; }
.numero:not(.numero-principal) { grid-column: 2; }
.numeros-data { margin-top: 32px; }
@media (max-width: 899px) {
  .numeros-lista { grid-template-columns: minmax(0, 1fr); }
  .numero-principal, .numero:not(.numero-principal) { grid-column: 1; grid-row: auto; }
  .numero-principal { margin-bottom: 24px; }
  .numero-principal .numero-valor { font-size: min(34vw, 180px); }
  .numero { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
}

/* ============ ASSINATURA ============ */
.assinatura { overflow: clip; }
.assinatura-grade {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: clamp(24px, 4vw, 72px);
  grid-template-rows: auto 1fr; position: relative;
}
.assinatura-frase { grid-column: 1; margin: 0 0 32px; font-family: var(--font-display-family); font-weight: 700; font-size: clamp(46px, 8.4vw, 136px); line-height: .92; letter-spacing: -.02em; }
.pal { display: block; white-space: nowrap; }
.pal-transforma { font-family: var(--font-display-family); }
.assinatura-foto { grid-column: 2; grid-row: 1 / 3; margin: 16px 0 0; align-self: start; }
.assinatura-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--rounded-md); }
.assinatura-texto { grid-column: 1; max-width: 30em; margin: 0; font-size: clamp(18px, 1.4vw, 21px); }
.grafismo-arco { position: absolute; left: 0; bottom: 0; width: clamp(90px, 10vw, 150px); }
@media (max-width: 899px) {
  .assinatura-grade { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .assinatura-frase { font-size: clamp(38px, 13.2vw, 72px); }
  .assinatura-foto { grid-column: 1; grid-row: auto; max-width: 420px; margin-top: 32px; }
  .assinatura-texto { grid-row: 2; }
  .grafismo-arco { width: 64px; top: -48px; right: 0; left: auto; bottom: auto; }
}

/* ============ CLIENTES: a roda de clientes ============ */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; padding: 0; }
.clientes { overflow: clip; }
.clientes-grade { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); column-gap: clamp(24px, 4vw, 72px); align-items: center; }
.clientes-titulo { font-family: var(--font-display-family); font-weight: 700; font-size: clamp(26px, 2.5vw, 38px); line-height: 1.02; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
.clientes .legenda { margin-top: 24px; }

/* Geometria (refação R2, E3): os nomes ficam em pé e giram; a cada fase do giro nenhum nome cruza a borda
   da tela nem cobre o nome de outro anel. Para isso, raio e corpo são proporcionais à largura da roda e
   obedecem a: raio do anel 3 + meia pílula <= metade da roda; diferença de raios entre anéis vizinhos >=
   soma das meias pílulas (menos o acolchoado das pílulas, que não leva texto). Nomes longos do anel 3
   quebram em duas linhas (max-width em em). Abaixo de 700px os três anéis se empilham, cada um no seu
   círculo, porque três anéis concêntricos com 19 nomes em pé não cabem em 390px com corpo legível. */
.roda-clientes { position: relative; width: min(100%, 880px, calc(100svh - 160px)); aspect-ratio: 1; justify-self: center; container-type: inline-size; }
.anel { position: absolute; left: 50%; top: 50%; width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2); }
.anel-1 { --d: 30%; --t: 70s; --dir: reverse; }
.anel-2 { --d: 55.6%; --t: 95s; --dir: normal; }
.anel-3 { --d: 86%; --t: 120s; --dir: reverse; }
.anel-trilho { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.anel-trilho circle { fill: none; stroke: currentColor; stroke-width: 5px; stroke-linecap: round; stroke-dasharray: 0 1.4; vector-effect: non-scaling-stroke; }
.orbita { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
/* raio do anel em cqw da roda: metade do --d */
.anel-1 .orbita { transform: rotate(calc(var(--i) / var(--n) * 1turn + .5turn / var(--n))) translateY(-15cqw); }
.anel-2 .orbita { transform: rotate(calc(var(--i) / var(--n) * 1turn + .5turn / var(--n))) translateY(-27.8cqw); }
.anel-3 .orbita { transform: rotate(calc(var(--i) / var(--n) * 1turn + .5turn / var(--n))) translateY(-43cqw); }
.cliente { position: absolute; left: 0; top: 0; display: block; white-space: nowrap; width: max-content; text-align: center;
  translate: -50% -50%; transform: rotate(calc(-1 * (var(--i) / var(--n) * 1turn + .5turn / var(--n))));
  font-family: var(--font-headline-family); font-weight: 700; line-height: 1.05; padding: 6px 12px;
  background: var(--color-branco); border-radius: 1.2em; }
.cliente img { display: block; height: 1.1em; width: auto; }
.anel-1 .cliente { font-size: max(18px, 3.6cqw); }
.anel-2 .cliente { font-size: max(16px, 3cqw); }
.anel-3 .cliente { font-size: max(15px, 2.4cqw); } /* nomes longos quebram com <br> no HTML */
.roda-centro { position: absolute; left: 50%; top: 50%; width: 16%; transform: translate(-50%, -50%); }

@media (max-width: 899px) {
  .clientes-grade { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .roda-clientes { margin-top: 24px; }
}
/* celular: um círculo por anel, empilhados; a roda ocupa a largura toda da tela e cada anel é o próprio
   contêiner (raio = 50cqw do anel). O letreiro fica no centro do anel maior, o último. */
@media (max-width: 699px) {
  .roda-clientes { width: 100vw; max-width: none; margin-inline: calc(-1 * var(--gut)); aspect-ratio: auto;
    display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: 44px; padding-block: 16px 24px; }
  .anel { position: relative; left: auto; top: auto; margin: 0; container-type: inline-size; }
  .anel-1 { --d: 46vw; }
  .anel-2 { --d: 57.5vw; }
  .anel-3 { --d: 72vw; grid-area: 3 / 1; }
  .anel-1 .orbita, .anel-2 .orbita, .anel-3 .orbita { transform: rotate(calc(var(--i) / var(--n) * 1turn + .5turn / var(--n))) translateY(-50cqw); }
  .anel-1 .cliente { font-size: 18px; }
  .anel-2 .cliente { font-size: 16px; }
  .anel-3 .cliente { font-size: 15px; }
  .roda-centro { position: static; transform: none; grid-area: 3 / 1; align-self: center; justify-self: center; width: 29vw; }
}

@supports (animation-timeline: view()) or (animation-name: x) {
@media (prefers-reduced-motion: no-preference) {
  .anel { animation: gira-anel var(--t) linear infinite var(--dir); animation-play-state: paused; }
  .anel .cliente { animation: gira-nome var(--t) linear infinite var(--dir); animation-play-state: paused; }
  .clientes.gira .anel, .clientes.gira .anel .cliente { animation-play-state: running; }
  @keyframes gira-anel { from { rotate: 0turn; } to { rotate: 1turn; } }
  @keyframes gira-nome { from { rotate: 0turn; } to { rotate: -1turn; } }
}
}

/* ============ COMO COMEÇA: a etiqueta do primeiro lote ============ */
.comeca-grade { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(24px, 5vw, 96px); align-items: center; }
.comeca-titulo { font-family: var(--font-display-family); font-weight: 700; font-size: clamp(38px, 4.6vw, 72px); line-height: 1; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
.ficha { position: relative; background: var(--color-branco); color: var(--color-preto); border-radius: var(--rounded-md);
  padding: 64px clamp(24px, 3.4vw, 48px) 28px; margin-top: 96px; transform: rotate(-1.5deg); }
.ficha-furo { position: absolute; top: 20px; left: 50%; width: 24px; height: 24px; margin-left: -12px; border-radius: 50%; background: var(--color-preto); }
.ficha-cordao { position: absolute; left: 50%; bottom: calc(100% - 32px); width: 3px; height: 110px; margin-left: -1.5px; background: var(--color-branco); }
.ficha-topo { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 8px; font-family: var(--font-label-family); font-weight: 700; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; }
.ficha-topo span + span { opacity: .8; } /* a .65 media 4,42:1 no pior pixel */
.ficha-lista { list-style: none; margin: 0; padding: 0; }
.ficha-lista li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start; border-top: 3px dashed var(--color-preto); padding: 20px 0 18px; }
.carimbo { width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--color-preto); color: var(--color-preto);
  display: grid; place-items: center; font-family: var(--font-numero-family); font-weight: 700; font-size: 30px; transform: rotate(-12deg); }
.ficha-lista h3 { font-family: var(--font-headline-family); font-weight: 700; font-size: clamp(28px, 2.6vw, 40px); line-height: 1; margin: 4px 0 8px; }
.ficha-lista p { margin: 0; }
.ficha-botao { display: inline-block; margin-top: 16px; text-decoration: none; border-radius: var(--rounded-full); }
.ficha-botao:hover, .ficha-botao:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 899px) {
  .comeca-grade { grid-template-columns: minmax(0, 1fr); }
  .ficha { margin-top: 110px; transform: none; padding-inline: 20px; }
  .carimbo { width: 48px; height: 48px; font-size: 22px; }
}

/* ============ CONTATO (vermelho: só título e rótulo curto, em corpo grande) ============ */
.contato-letreiro { width: min(640px, 84%); }
.contato-titulo { font-family: var(--font-headline-family); font-weight: 700; font-size: clamp(40px, 5.4vw, 76px); line-height: 1; margin: 40px 0 40px; }
.contato-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.contato-lista li { border-top: 2px solid currentColor; padding-top: 14px; font-family: var(--font-display-family); font-weight: 700; font-size: clamp(20px, 1.8vw, 28px); line-height: 1.15; overflow-wrap: anywhere; }
.contato-lista span { display: block; font-family: var(--font-label-family); font-size: 19px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 6px; }
.contato-lista a { text-decoration: none; }
.contato-lista a:hover { text-decoration: underline; text-underline-offset: 4px; }
.rodape-nota { padding-block: 28px; }
.rodape-texto { margin: 0; font-size: 16px; max-width: 40em; }
@media (max-width: 899px) { .contato-lista { grid-template-columns: minmax(0, 1fr); } }

/* =====================================================================
   MOVIMENTO. Só com suporte a animation-timeline e sem movimento reduzido.
   ===================================================================== */
@property --r { syntax: '<percentage>'; inherits: true; initial-value: 150%; }

@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {

  .grafismo-circpont { animation: gira linear both; animation-timeline: scroll(root); }
  @keyframes gira { from { transform: rotate(0deg); } to { transform: rotate(540deg); } }

  /* assinatura: palavras entram de lados opostos; "transforma" troca de largura (Condensed → Exp) */
  .pal { animation: entra-pal linear both; animation-timeline: view(); animation-range: entry 0% cover 42%; }
  @keyframes entra-pal { from { transform: translateX(calc(var(--dx) * 1vw)); } to { transform: none; } }
  .pal-transforma { animation-name: entra-pal, alarga; }
  @keyframes alarga { 0%, 55% { font-family: var(--font-headline-family); letter-spacing: .02em; } 100% { font-family: var(--font-display-family); letter-spacing: -.02em; } }
  .grafismo-arco { animation: arco linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; transform-origin: 50% 100%; }
  @keyframes arco { from { transform: scale(.35); } to { transform: none; } }

  /* passos, versão empilhada (celular e janelas baixas): cada visual anima ao entrar */
  .anima { animation-duration: 1s; animation-fill-mode: both; animation-timing-function: cubic-bezier(.62, 0, .32, 1);
           animation-timeline: view(); animation-range: entry 15% cover 50%; }

  .etiqueta.anima { animation-name: pendura; }
  .etiqueta-barra i { animation: pesa linear both; animation-timeline: view(); animation-range: entry 40% cover 55%; }
  .marca-remendo.anima { animation-name: descostura; }
  .marca-remendo span { animation: espalha linear both; animation-timeline: view(); animation-range: entry 30% cover 55%; }
  .classe-a .classe-peca { animation-name: cai-a; }
  .classe-b .classe-peca { animation-name: cai-b; }
  .classe-c .classe-peca { animation-name: cai-c; }
  .classe-d .classe-peca { animation-name: cai-d; }
  .produto.anima { animation-name: abre-produto; }
  .produto.anima img { mask-image: radial-gradient(circle at 50% 45%, #000 var(--r), transparent calc(var(--r) + .5%)); }
  .produto.anima { --r: 150%; }
  .fluxo .anima { animation-range: entry 20% cover 55%; }
  .fluxo .n0 { animation-name: no-0; } .fluxo .n1 { animation-name: no-1; } .fluxo .n2 { animation-name: no-1; }
  .fluxo .n3 { animation-name: no-2; } .fluxo .n4 { animation-name: rd-no-3; } .fluxo .n5 { animation-name: rd-no-4; }
  .fluxo .l1, .fluxo .l2 { animation-name: linha-1; } .fluxo .l3 { animation-name: linha-2; }
  .fluxo .l4 { animation-name: rd-linha-3; } .fluxo .l5 { animation-name: rd-linha-4; }
  .carimbo { animation: carimba linear both; animation-timeline: view(); animation-range: entry 60% cover 50%; }
  @keyframes carimba { from { transform: scale(1.8) rotate(-40deg); opacity: .15; } to { transform: rotate(-12deg); opacity: 1; } }
  .relatorio li.anima { animation-name: linha-rel; animation-range: entry calc(10% + var(--n) * 5%) cover calc(28% + var(--n) * 5%); }

  @keyframes pendura { from { transform: translateY(-40px) rotate(-16deg); } 55% { transform: translateY(0) rotate(6deg); } 80% { transform: rotate(-2deg); } to { transform: none; } }
  @keyframes pesa { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes descostura { 0%, 35% { transform: none; } to { transform: translate(330%, 330%) rotate(16deg) scale(1.5); } }
  @keyframes espalha { 0%, 40% { transform: none; } }
  @keyframes cai-a { 0% { transform: translate(-30cqw, -60px) rotate(-18deg); } 40%, 100% { transform: none; } }
  @keyframes cai-b { 0%, 15% { transform: translate(-30cqw, -60px) rotate(14deg); } 55%, 100% { transform: none; } }
  @keyframes cai-c { 0%, 30% { transform: translate(-30cqw, -60px) rotate(-12deg); } 70%, 100% { transform: none; } }
  @keyframes cai-d { 0%, 45% { transform: translate(-30cqw, -60px) rotate(20deg); } 85%, 100% { transform: none; } }
  @keyframes abre-produto { from { --r: 22%; transform: scale(.92); } 70% { --r: 72%; } to { --r: 150%; transform: none; } }
  @keyframes no-0 { from { transform: translateY(-20px); } 14%, 100% { transform: none; } }
  @keyframes linha-1 { 0%, 10% { stroke-dashoffset: 1; } 26%, 100% { stroke-dashoffset: 0; } }
  @keyframes no-1 { 0%, 22% { transform: translateY(-24px) scale(.9); } 38%, 100% { transform: none; } }
  @keyframes linha-2 { 0%, 34% { stroke-dashoffset: 1; } 48%, 100% { stroke-dashoffset: 0; } }
  @keyframes no-2 { 0%, 44% { transform: translateY(-24px) scale(.96); } 60%, 100% { transform: none; } }
  @keyframes rd-linha-3 { 0%, 56% { stroke-dashoffset: 1; } 68%, 100% { stroke-dashoffset: 0; } }
  @keyframes rd-no-3 { 0%, 64% { transform: translateY(-24px) scale(.96); } 80%, 100% { transform: none; } }
  @keyframes rd-linha-4 { 0%, 76% { stroke-dashoffset: 1; } 88%, 100% { stroke-dashoffset: 0; } }
  @keyframes rd-no-4 { 0%, 84% { transform: translateY(-24px) scale(.96); } 100% { transform: none; } }
  @keyframes linha-rel { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

  /* ---------- versão com a cena presa (tela larga e alta o bastante) ---------- */
  @media (min-width: 900px) and (min-height: 760px) {
    .lote { height: 410svh; view-timeline: --hist block; position: relative; }
    .lote-palco { position: sticky; top: 0; height: 100svh; overflow: hidden; }
    .passo { position: absolute; inset: 0; padding-bottom: 48px; grid-template-rows: auto minmax(0, 1fr);
             border-radius: 24px 24px 0 0; will-change: transform;
             animation: cortina linear both; animation-timeline: --hist;
             animation-range: contain var(--w0) contain var(--w1); }
    .passo-1 { animation: none; border-radius: 0; }
    .passo-1 { --w0: 0%;       --w1: 0%;       --i0: 1%;       --i1: 11%; }
    .passo-2 { --w0: 14.667%; --w1: 19.667%; --i0: 17.167%; --i1: 27.167%; }
    .passo-3 { --w0: 31.333%; --w1: 36.333%; --i0: 33.833%; --i1: 43.833%; }
    .passo-4 { --w0: 48%; --w1: 53%; --i0: 50.500%; --i1: 60.500%; }
    .passo-5 { --w0: 64.667%; --w1: 69.667%; --i0: 67.167%; --i1: 77.167%; }
    .passo-6 { --w0: 81.333%; --w1: 86.333%; --i0: 83.833%; --i1: 93.833%; }
    @keyframes cortina { from { transform: translateY(100%); } to { transform: none; } }


    .anima, .fluxo .anima { animation-timeline: --hist; animation-range: contain var(--i0) contain var(--i1); }
    .etiqueta-barra i, .marca-remendo span { animation-timeline: --hist; animation-range: contain var(--i0) contain var(--i1); }
    .relatorio li.anima { animation-range: contain calc(var(--i0) + var(--n) * 1.2%) contain calc(var(--i0) + var(--n) * 1.2% + 3%); }
    .passo-visual { max-height: calc(100svh - 170px); }
    .rd-fluxo-seq { max-height: calc(100svh - 170px); }
    .passo-2 .passo-visual { width: min(100%, (100svh - 200px) * 1.333); }
    .etiqueta { margin-top: 40px; }
  }
}
}

/* símbolo do WhatsApp no botão do topo e no contato (pedido da Mari, 29/09) */
.barra-botao { grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; }
.barra-botao .ico-wa { grid-row: 1; grid-column: 1; width: 1.35em; height: 1.35em; }
.barra-botao .bb-a, .barra-botao .bb-b { grid-area: 1 / 2; }
.contato-wa { display: inline-flex; align-items: center; gap: 12px; margin: 8px 0 32px; padding: 14px 24px; border-radius: var(--rounded-full); background: var(--color-branco, #fff); color: var(--color-preto, #100f0d); text-decoration: none; font-weight: 700; }
.contato-wa .ico-wa { width: 1.5em; height: 1.5em; }
.barra-botao { white-space: nowrap; }