/* co · #consulta — A consulta: retrato com meio anel que acende estação por estação */
.co { --prog: 1; }
.co-grade {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  grid-template-areas: "topo topo" "palco texto";
  column-gap: clamp(2rem, 6vw, 6rem);
}
.co-topo {
  grid-area: topo; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(2rem, 6vw, 6rem);
  align-items: end; margin-bottom: clamp(2rem, 5vw, 4rem);
}
.co-topo .wf-rotulo { grid-column: 1 / -1; justify-self: start; }
.co-topo .wf-titulo { font-size: calc(var(--t-sec) * 1.12); }
.co-lede { margin: 0; max-width: 30rem; font-size: clamp(1.3rem, 1.1rem + .6vw, 1.65rem); line-height: 1.25; color: var(--tinta); }
.co-batidas { margin: 1.1rem 0 0; display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; font-size: .95rem; font-weight: 500; color: var(--tinta-suave); }
.co-batidas span { display: inline-flex; align-items: center; gap: .55em; }
.co-topo__lede .wf-fonte { margin-top: 1rem; }
.co-lede .wf-fala { color: var(--tinta); }

/* palco preso na tela: retrato + meio anel + pontos */
.co-palco { grid-area: palco; align-self: stretch; }
.co-cena {
  --w: min(32rem, 36vw); --ea: -72deg;
  position: sticky; top: calc(50vh - var(--w) / 2);
  width: var(--w); aspect-ratio: 1; margin-inline: auto;
}
.co-cena::before {
  content: ''; position: absolute; inset: 7%; border-radius: 50%;
  background: radial-gradient(closest-side in oklab, color-mix(in oklab, var(--pele) 70%, var(--papel)), color-mix(in oklab, var(--papel) 60%, transparent) 70%, transparent);
}
.co-foto {
  position: absolute; inset: 9%; border-radius: 50%; overflow: hidden;
  box-shadow: var(--sombra-foto), 0 0 0 6px color-mix(in oklab, var(--papel) 70%, transparent);
}
.co-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; }
.co-arco { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; }
.co-arco__base { stroke: color-mix(in oklab, var(--outono) 20%, transparent); stroke-width: 3; }
.co-arco__luz { stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 1.2s var(--ease); }

.co-pontos { list-style: none; margin: 0; padding: 0; }
.co-pontos li {
  position: absolute; width: 18px; height: 18px; border-radius: 50%;
  left: calc(50% + 45.45% * cos(var(--a))); top: calc(50% + 45.45% * sin(var(--a)));
  translate: -50% -50%;
  background: var(--papel); border: 2px solid color-mix(in oklab, var(--outono) 30%, transparent);
  transition: background .8s var(--ease), border-color .8s var(--ease), scale .8s var(--ease), box-shadow .8s var(--ease);
}
.co-pontos li.co-aceso { background: var(--c); border-color: var(--papel); }
.co-pontos__anel::after, .co-mom--anel .co-mom__k::after {
  content: ''; position: absolute; inset: -9px; border-radius: 50%;
  background: conic-gradient(from 200deg in oklch, var(--inverno), var(--primavera), var(--verao), color-mix(in oklab, var(--outono) 75%, var(--verao)), var(--inverno));
  -webkit-mask: radial-gradient(closest-side, transparent 62%, #000 68%); mask: radial-gradient(closest-side, transparent 62%, #000 68%);
  animation: wf-gira 14s linear infinite;
}
/* pílula que corre pelo arco até o ponto ativo, sempre em pé */
.co-giro { position: absolute; inset: 0; rotate: var(--ea); transition: rotate 1.2s var(--ease); pointer-events: none; }
.co-giro i {
  position: absolute; left: 95.45%; top: 50%; width: 34px; height: 34px; translate: -50% -50%; border-radius: 50%;
  border: 2px solid color-mix(in oklab, var(--magenta) 55%, transparent);
  box-shadow: 0 0 18px 2px color-mix(in oklab, var(--verao) 55%, transparent);
}
.co-pontos li.co-ativo { scale: 1.4; box-shadow: 0 0 0 5px color-mix(in oklab, var(--c) 30%, transparent), 0 0 22px 4px color-mix(in oklab, var(--c) 50%, transparent); }

/* a lista de momentos */
.co-texto { grid-area: texto; }
.co-lista { list-style: none; margin: 0; padding: 0; position: relative; }
.co-mom {
  min-height: 36vh; display: flex; flex-direction: column; justify-content: center;
  padding-block: 1.5rem;
}
.co-mom__k { position: relative; display: inline-flex; align-items: center; gap: .6em; font-size: .8rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-suave); }
.co-mom--anel .co-mom__k::after { inset: auto; left: calc(.31em - 9px - .31em); width: calc(.62em + 18px); height: calc(.62em + 18px); top: 50%; translate: 0 -50%; }
.co-mom__k::before { transition: background .8s var(--ease), box-shadow .8s var(--ease); content: ''; width: .62em; height: .62em; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in oklab, var(--c) 30%, transparent); }
.co-mom__f { margin: .8rem 0 0; font-family: var(--f-titulo); font-size: clamp(1.6rem, 1rem + 1.6vw, 2.5rem); line-height: 1.14; letter-spacing: -.01em; text-wrap: pretty; }
.co-mom__s { margin: 1rem 0 0; max-width: 32rem; font-size: var(--t-corpo); font-weight: 350; line-height: 1.6; color: var(--tinta-suave); }
.co-cta { margin-top: 1.8rem; align-self: flex-start; }
.co-fonte { margin-top: 2rem; }

/* recolhidas: só com JS */
.co.co-vivo .co-mom > * { transition: opacity .9s var(--ease), scale .9s var(--ease); transform-origin: left center; }
.co.co-vivo .co-mom:not(.co-ativo) .co-mom__f { opacity: .45; scale: .9; }
.co.co-vivo .co-mom:not(.co-ativo) .co-mom__s { opacity: .42; }
.co.co-vivo .co-mom:not(.co-ativo) .co-mom__k { opacity: .5; }

@media (max-width: 899px) {
  .co-grade { grid-template-columns: 1fr; grid-template-areas: "topo" "palco" "texto"; }
  .co-topo { grid-template-columns: 1fr; row-gap: 1.4rem; margin-bottom: 0; }
  .co-topo .wf-titulo { font-size: var(--t-sec); }
  .co-lede { font-size: 1.1rem; }
  .co-giro { display: none; }
  .co-cena { --w: min(84vw, 24rem); position: relative; top: auto; margin-top: 2.5rem; }
  .co-lista { padding-left: 1.6rem; }
  .co-lista::before, .co-lista::after { content: ''; position: absolute; left: 4px; top: 2rem; bottom: 2rem; width: 2px; border-radius: 2px; }
  .co-lista::before { background: color-mix(in oklab, var(--outono) 14%, transparent); }
  .co-lista::after { background: linear-gradient(#cfc9d8, var(--primavera), var(--verao), var(--outono)); transform-origin: top; scale: 1 var(--prog); transition: scale .6s var(--ease); }
  .co-mom { min-height: 0; padding-block: 2.2rem; }
  .co-mom__k { font-size: .875rem; letter-spacing: .14em; margin-left: -1.6rem; }
  .co-mom__k::before { width: 10px; height: 10px; }
  .co.co-vivo .co-mom:not(.co-passou) .co-mom__k::before { background: var(--papel); box-shadow: 0 0 0 2px color-mix(in oklab, var(--c) 80%, var(--outono) 20%); }
  .co-batidas { flex-direction: column; font-size: 1rem; }
  .co-mom__f { font-size: 1.6rem; }
  .co.co-vivo .co-mom:not(.co-ativo) .co-mom__f { scale: 1; opacity: .4; }
}
@media (prefers-reduced-motion: reduce) {
  .co .co-mom > *, .co-arco__luz, .co-pontos li, .co-giro, .co-mom__k::before { transition: none !important; }
  .co-pontos__anel::after, .co-mom--anel .co-mom__k::after { animation: none; }
}