/* ============================================================================
   Home — o que é só desta página. Padrão compartilhado mora em `site.css`.
   ========================================================================== */

/* Prova: título à esquerda, marcas à direita, na mesma linha de base. */
.st-prova { display: grid; gap: var(--ct-space-8); align-items: end; }
@media (width >= 1024px) {
  .st-prova { grid-template-columns: minmax(0, 1fr) auto; gap: var(--ct-space-16); }
  .st-prova .st-secao__cabecalho .ct-divider--accent { margin-block-end: 0; }
}

/* Logos: o espaço fica montado e vazio até os contratos fecharem (21/09). A moldura
   tracejada diz "reservado", não "quebrado"; quando o <img> entrar, ela some. */
.st-prova__marcas--slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ct-space-4); }
.st-prova__marcas--slots[hidden] { display: none; }
.st-logo-slot {
  block-size: var(--ct-space-16); min-inline-size: 8rem;
  display: grid; place-items: center;
  border: var(--ct-border-width-hairline) dashed var(--ct-border-default);
  border-radius: var(--ct-radius-sm);
}
.st-logo-slot:has(img) { border-color: transparent; }
.st-logo-slot img { max-block-size: 100%; inline-size: auto; }
@media (width >= 640px) { .st-prova__marcas--slots { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* O que é venda consultiva: definição curta, com a régua de acento de nota. */
.st-definicao {
  max-width: 48rem;
  padding-inline-start: var(--ct-space-6);
  border-inline-start: var(--ct-border-width-accent) solid var(--ct-border-accent);
}
.st-definicao__rotulo { color: var(--ct-text-accent); margin-block-end: var(--ct-space-3); }
.st-definicao > .ct-text-body-lg { color: var(--ct-text-primary); }
.st-definicao__nota { color: var(--ct-text-tertiary); margin-block-start: var(--ct-space-4); }

/* Quatro segmentos: dois por linha no tablet, quatro no desktop. */
.st-cards--4 { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
@media (width >= 1024px) { .st-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Sobre: texto e citação. A citação é o contraponto do parágrafo, não o fecho. */
.st-sobre { display: grid; gap: var(--ct-space-12); align-items: center; }

@media (width >= 1024px) {
  .st-sobre { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--ct-space-20); }
}

/* ────────────────────────────────────────────────────────── jornada ── */
/* As cinco etapas do programa, como trilho interativo (padrão de abas da WAI).
   Sem JS: o trilho e a navegação ficam `hidden` e os cinco painéis aparecem
   empilhados, legíveis. O `site.js` liga o trilho e esconde os painéis que não
   estão selecionados — nada do conteúdo depende de script para existir. */
.st-jornada { display: grid; gap: var(--ct-space-8); }
.st-jornada .st-subtitulo { margin-block-end: 0; }

.st-jornada__trilho {
  --_progresso: 0;
  position: relative;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
}
/* A linha liga o centro do primeiro marco ao centro do último: com cinco
   colunas iguais, esses centros ficam a 10% de cada ponta. */
.st-jornada__trilho::before,
.st-jornada__trilho::after {
  content: ''; position: absolute;
  inset-block-start: calc(var(--ct-space-12) / 2);
  inset-inline-start: 10%;
  block-size: var(--ct-border-width-thick);
  transform: translateY(-50%);
}
.st-jornada__trilho::before { inset-inline-end: 10%; background: var(--ct-border-default); }
.st-jornada__trilho::after {
  inline-size: calc(80% * var(--_progresso));
  background: var(--ct-border-accent);
}
.st-jornada__trilho[hidden] { display: none; }

.st-jornada__passo {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: var(--ct-space-3);
  min-block-size: var(--ct-size-target-min);
  padding: 0 var(--ct-space-1) var(--ct-space-2);
  background: none; border: 0; cursor: pointer;
  color: var(--ct-text-tertiary); font: inherit; text-align: center;
}
.st-jornada__marco {
  display: grid; place-items: center;
  inline-size: var(--ct-space-12); block-size: var(--ct-space-12);
  border: var(--ct-border-width-thick) solid var(--ct-border-default);
  border-radius: var(--ct-radius-full);
  background: var(--ct-bg-canvas);
  font-family: var(--ct-font-family-display); font-weight: var(--ct-font-weight-bold);
  font-size: var(--ct-font-size-lg); font-variant-numeric: tabular-nums;
  color: var(--ct-text-tertiary);
}
.st-jornada__nome {
  font-family: var(--ct-font-family-display); font-weight: var(--ct-font-weight-semibold);
  font-size: var(--ct-font-size-md); line-height: var(--ct-font-line-height-snug);
}
.st-jornada__passo:hover .st-jornada__marco { border-color: var(--ct-border-strong); color: var(--ct-text-primary); }
.st-jornada__passo.is-feito .st-jornada__marco { border-color: var(--ct-border-accent); color: var(--ct-text-accent); }
.st-jornada__passo[aria-selected='true'] { color: var(--ct-text-primary); }
.st-jornada__passo[aria-selected='true'] .st-jornada__marco {
  background: var(--ct-bg-accent); border-color: var(--ct-border-accent); color: var(--ct-text-on-accent);
}
.st-jornada__passo:focus-visible { outline: none; }
.st-jornada__passo:focus-visible .st-jornada__marco {
  outline: var(--ct-size-focus-width) solid var(--ct-border-focus);
  outline-offset: var(--ct-size-focus-offset);
}

/* No telefone os nomes não cabem em cinco colunas: somem da vista e continuam
   sendo o nome acessível do botão. O painel abaixo diz qual é a etapa. */
@media (width < 40rem) {
  .st-jornada__nome {
    position: absolute; inline-size: 0.0625rem; block-size: 0.0625rem;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}

.st-jornada__paineis { display: grid; gap: var(--ct-space-6); }
.st-jornada__painel {
  display: grid; gap: var(--ct-space-4); align-content: start;
  padding: var(--ct-space-8);
  background: var(--ct-bg-surface);
  border: var(--ct-border-width-hairline) solid var(--ct-border-default);
  border-inline-start: var(--ct-border-width-accent) solid var(--ct-border-accent);
  border-radius: var(--ct-radius-card);
}
/* Com o trilho ligado, os cinco painéis dividem a mesma célula e só o ativo
   aparece: a caixa fica com a altura do maior, e a navegação abaixo não pula
   a cada etapa. `visibility` também tira o inativo da leitura e do Tab. */
.st-jornada.is-ligada .st-jornada__paineis { grid-template-areas: 'painel'; }
.st-jornada.is-ligada .st-jornada__painel { grid-area: painel; }
.st-jornada__painel.is-inativo { visibility: hidden; }
.st-jornada__painel:focus-visible {
  outline: var(--ct-size-focus-width) solid var(--ct-border-focus);
  outline-offset: var(--ct-size-focus-offset);
}
.st-jornada__topo { display: flex; align-items: center; gap: var(--ct-space-3); }
.st-jornada__icone { inline-size: var(--ct-size-icon-lg); block-size: var(--ct-size-icon-lg); color: var(--ct-text-accent); }
.st-jornada__fase { color: var(--ct-text-accent); }
.st-jornada__resumo { color: var(--ct-text-primary); max-width: 48ch; }
.st-jornada__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ct-space-3); color: var(--ct-text-secondary); }
.st-jornada__lista li { position: relative; padding-inline-start: var(--ct-space-6); }
.st-jornada__lista li::before {
  content: ''; position: absolute; inset-inline-start: 0; inset-block-start: 0.6em;
  inline-size: var(--ct-space-2); block-size: var(--ct-space-2);
  background: var(--ct-bg-accent); border-radius: var(--ct-radius-xs);
}
.st-jornada__fica {
  padding-block-start: var(--ct-space-4);
  border-block-start: var(--ct-border-width-hairline) solid var(--ct-border-subtle);
  color: var(--ct-text-secondary);
}
.st-jornada__fica strong { color: var(--ct-text-primary); font-weight: var(--ct-font-weight-semibold); }

/* Em tela larga o painel vira duas colunas: o que é, à esquerda; como e o
   que fica, à direita. Uma coluna só daria linhas longas demais para ler. */
@media (width >= 1024px) {
  .st-jornada__painel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: 'topo lista' 'titulo lista' 'resumo fica';
    column-gap: var(--ct-space-16); padding: var(--ct-space-12);
  }
  .st-jornada__topo { grid-area: topo; }
  .st-jornada__titulo { grid-area: titulo; }
  .st-jornada__resumo { grid-area: resumo; }
  .st-jornada__lista { grid-area: lista; align-self: start; }
  .st-jornada__fica { grid-area: fica; align-self: end; }
}

.st-jornada__navegacao { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ct-space-4); }
.st-jornada__navegacao[hidden] { display: none; }
.st-jornada__contador { color: var(--ct-text-tertiary); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: no-preference) {
  .st-jornada__trilho::after { transition: inline-size var(--ct-motion-duration-slow) var(--ct-motion-easing-emphasized); }
  .st-jornada__marco { transition: background-color var(--ct-motion-duration-fast) var(--ct-motion-easing-standard), border-color var(--ct-motion-duration-fast) var(--ct-motion-easing-standard), color var(--ct-motion-duration-fast) var(--ct-motion-easing-standard); }
  .st-jornada__painel.is-entrando { animation: st-jornada-entra var(--ct-motion-duration-moderate) var(--ct-motion-easing-enter); }
}
@keyframes st-jornada-entra {
  from { opacity: 0; transform: translateY(var(--ct-motion-distance-sm)); }
  to { opacity: 1; transform: none; }
}

/* ── diagnóstico rápido ──────────────────────────────────────────────────────
   Sintomas à esquerda, leitura à direita. A leitura é escura de propósito: é o
   "resultado", e contrasta com a lista que a pessoa está preenchendo. */
.st-diag { display: grid; gap: var(--ct-space-10); }
.st-diag__painel { display: grid; gap: var(--ct-space-6); align-items: start; }
@media (width >= 768px) {
  .st-diag__painel { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .st-diag__leitura { position: sticky; inset-block-start: calc(var(--ct-space-20) + var(--ct-space-4)); }
}
@media (width >= 1280px) {
  .st-diag { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: var(--ct-space-16); align-items: start; }
}

.st-diag__sintomas { border: 0; margin: 0; padding: 0; display: grid; gap: var(--ct-space-3); min-inline-size: 0; }
.st-diag__legenda { padding: 0; margin-block-end: var(--ct-space-2); color: var(--ct-text-tertiary); }

.st-sintoma {
  display: grid; grid-template-columns: var(--ct-space-6) 1fr; gap: var(--ct-space-4); align-items: start;
  padding: var(--ct-space-4) var(--ct-space-5);
  background: var(--ct-bg-surface);
  border: var(--ct-border-width-hairline) solid var(--ct-border-default);
  border-radius: var(--ct-radius-card);
  color: var(--ct-text-secondary); cursor: pointer;
  transition: var(--ct-transition-colors), transform var(--ct-motion-duration-base) var(--ct-motion-easing-standard);
}
.st-sintoma input { position: absolute; opacity: 0; inline-size: var(--ct-space-0-5); block-size: var(--ct-space-0-5); pointer-events: none; }
.st-sintoma:hover { border-color: var(--ct-border-control-hover); color: var(--ct-text-primary); }
.st-sintoma:has(input:checked) { border-color: var(--ct-border-accent); background: var(--ct-bg-accent-subtle); color: var(--ct-text-primary); }
.st-sintoma:has(input:focus-visible) { outline: var(--ct-size-focus-width) solid var(--ct-border-focus); outline-offset: var(--ct-size-focus-offset); }
.st-sintoma__caixa {
  display: grid; place-items: center;
  inline-size: var(--ct-space-6); block-size: var(--ct-space-6); margin-block-start: var(--ct-space-0-5);
  border: var(--ct-border-width-thick) solid var(--ct-border-control);
  border-radius: var(--ct-radius-check);
  color: var(--ct-text-on-accent);
  transition: var(--ct-transition-colors);
}
.st-sintoma__caixa .ct-icon { inline-size: var(--ct-size-icon-sm); block-size: var(--ct-size-icon-sm); transform: scale(0); transition: transform var(--ct-motion-duration-base) var(--ct-motion-easing-emphasized); }
.st-sintoma:has(input:checked) .st-sintoma__caixa { background: var(--ct-bg-accent); border-color: var(--ct-border-accent); }
.st-sintoma:has(input:checked) .st-sintoma__caixa .ct-icon { transform: scale(1); }

.st-diag__leitura {
  padding: var(--ct-space-8);
  background: var(--ct-bg-canvas); color: var(--ct-text-primary);
  border-radius: var(--ct-radius-card);
  box-shadow: var(--ct-shadow-3);
}
.st-diag__medidor { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--ct-space-1); }
.st-diag__medidor span {
  block-size: var(--ct-space-2); border-radius: var(--ct-radius-xs);
  background: color-mix(in srgb, var(--ct-text-primary) 14%, transparent);
  transition: background-color var(--ct-motion-duration-slow) var(--ct-motion-easing-standard);
}
.st-diag__medidor span.is-on { background: var(--ct-bg-accent); }
.st-diag__placar {
  display: flex; align-items: baseline; gap: var(--ct-space-1);
  margin-block: var(--ct-space-6) var(--ct-space-4);
  font-family: var(--ct-font-family-display); font-weight: var(--ct-font-weight-bold);
  font-size: var(--ct-font-size-8xl); line-height: var(--ct-font-line-height-tight);
  font-variant-numeric: tabular-nums;
}
.st-diag__titulo { margin-block-end: var(--ct-space-3); }
.st-diag__texto { color: var(--ct-text-secondary); }
.st-diag__acoes { margin-block-start: var(--ct-space-8); }

/* ── a transformação ─────────────────────────────────────────────────────────
   Desktop: o palco (título + desenho) fica preso enquanto as quatro fases
   passam ao lado. Telefone: só o desenho gruda sob o cabeçalho, e as fases
   passam por baixo dele — por isso `flex` e não `grid` ali: item de grid tem a
   própria célula como limite do sticky, item de flex tem o container inteiro. */
.st-transforma__grade { display: flex; flex-direction: column; gap: var(--ct-space-8); }
.st-transforma__palco { display: contents; }
.st-constelacao { display: none; margin: 0; }
.js-transforma .st-constelacao {
  display: block; position: sticky; z-index: var(--ct-z-raised);
  inset-block-start: calc(var(--ct-space-16) + var(--ct-space-2));
  padding-block: var(--ct-space-3);
  background: var(--ct-bg-canvas);
}
.st-constelacao svg { display: block; inline-size: 100%; max-block-size: 34vh; overflow: visible; }

.st-constelacao__ponto {
  fill: color-mix(in srgb, var(--ct-text-primary) 58%, transparent);
  transition:
    transform var(--ct-motion-duration-slower) var(--ct-motion-easing-emphasized),
    fill var(--ct-motion-duration-slow) var(--ct-motion-easing-standard),
    opacity var(--ct-motion-duration-slow) var(--ct-motion-easing-standard);
}
.st-constelacao__ponto.is-dono,
[data-fase-ativa="3"] .st-constelacao__ponto.is-final,
[data-fase-ativa="4"] .st-constelacao__ponto { fill: var(--ct-text-accent); }
[data-fase-ativa="1"] .st-constelacao__ponto:not(.is-dono) { opacity: 0.45; }

.st-constelacao__raios line { stroke: color-mix(in srgb, var(--ct-text-accent) 45%, transparent); stroke-width: 1; }
.st-constelacao__raios, .st-constelacao__fluxo, .st-constelacao__anel {
  opacity: 0; transition: opacity var(--ct-motion-duration-slow) var(--ct-motion-easing-standard);
}
.st-constelacao__fluxo, .st-constelacao__anel { fill: none; stroke: var(--ct-text-accent); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; }
.st-constelacao__fluxo { stroke-dasharray: 0.02 0.02; }
[data-fase-ativa="1"] .st-constelacao__raios { opacity: 1; }
[data-fase-ativa="3"] .st-constelacao__fluxo { opacity: 0.7; }
[data-fase-ativa="4"] .st-constelacao__anel { opacity: 0.6; stroke-dashoffset: 0; }
.st-constelacao__anel { transition: opacity var(--ct-motion-duration-slow) var(--ct-motion-easing-standard), stroke-dashoffset var(--ct-motion-duration-slower) var(--ct-motion-easing-emphasized); }

.st-constelacao__trilho {
  list-style: none; margin: var(--ct-space-4) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ct-space-1);
  font-family: var(--ct-font-family-display); font-weight: var(--ct-font-weight-semibold);
  font-size: var(--ct-font-size-xs); letter-spacing: var(--ct-font-tracking-wide); text-transform: uppercase;
}
.st-constelacao__trilho li {
  padding-block-start: var(--ct-space-2);
  border-block-start: var(--ct-border-width-thick) solid color-mix(in srgb, var(--ct-text-primary) 16%, transparent);
  color: var(--ct-text-tertiary);
  transition: var(--ct-transition-colors);
}
.st-constelacao__trilho li.is-ativa { border-block-start-color: var(--ct-border-accent); color: var(--ct-text-accent); }
.st-constelacao__trilho li.is-passada { border-block-start-color: color-mix(in srgb, var(--ct-text-accent) 45%, transparent); }

.st-fases { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ct-space-10); }
.st-fase { display: grid; gap: var(--ct-space-4); align-content: center; max-inline-size: 36rem; color: var(--ct-text-secondary); }
.st-fase strong { color: var(--ct-text-primary); }
.st-fase__nome {
  font-family: var(--ct-font-family-display); font-weight: var(--ct-font-weight-bold);
  font-size: clamp(var(--ct-font-size-5xl), 7vw, var(--ct-font-size-8xl));
  line-height: var(--ct-font-line-height-tight); letter-spacing: var(--ct-font-tracking-tight);
  text-transform: uppercase; color: var(--ct-text-primary);
}
.js-transforma .st-fase { min-block-size: 62vh; }
.js-transforma .st-fase { opacity: 0.28; transition: opacity var(--ct-motion-duration-slow) var(--ct-motion-easing-standard); }
.js-transforma .st-fase.is-ativa { opacity: 1; }
.js-transforma .st-fase.is-ativa .st-fase__nome { color: var(--ct-text-accent); }

@media (width >= 1024px) {
  .st-transforma__grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ct-space-20); align-items: start; }
  .st-transforma__palco {
    display: flex; flex-direction: column; justify-content: center; gap: var(--ct-space-10);
    position: sticky; inset-block-start: calc(var(--ct-space-20) + var(--ct-space-4));
    min-block-size: calc(100vh - var(--ct-space-32));
  }
  .js-transforma .st-constelacao { position: static; padding: 0; background: none; }
  .st-constelacao svg { max-block-size: 46vh; }
  .js-transforma .st-fase { min-block-size: 80vh; }
  .st-fases { padding-block: 10vh; }
}