/* co · A consulta (noite) */
.co { --co-sangra: calc((100vw - min(var(--largura), 100vw - 2 * var(--margem))) / 2); }

/* ---------- topo ---------- */
.co-topo { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--e-4) clamp(2rem, 5vw, 5rem); align-items: end; margin-bottom: clamp(1rem, 3vw, 2.5rem); }
.co-topo .wf-h2 { max-width: 15ch; }
.co-abre { margin: 0 0 var(--e-2); padding-left: 1.1rem; border-left: 2px solid color-mix(in oklab, var(--rosa) 70%, transparent); }
.co-abre footer { margin-top: .5rem; font-size: .82rem; letter-spacing: .04em; color: var(--texto-suave); }
.co-topo-apoio > .wf-suave { max-width: 30rem; }

/* ---------- trilho: palco fixo + passos ---------- */
.co-trilho { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2.5rem, 6vw, 6.5rem); align-items: start; }

.co-palco { position: sticky; top: max(1.5rem, 7vh); margin: 0 0 0 calc(-1 * var(--co-sangra)); height: min(86vh, 860px);
  border-radius: 0 var(--raio) var(--raio) 0; overflow: hidden; background: var(--vinho);
  box-shadow: 0 40px 90px -40px rgb(0 0 0 / .7), 0 0 0 1px rgb(255 255 255 / .06) inset; }
.co-foto { position: absolute; inset: 0; transition: opacity .9s var(--curva), transform 1.4s var(--curva); }
.co-foto > img { object-position: 50% 30%; }
.co-foto[data-foto="1"] > img { object-position: 50% 45%; }
.co-foto[data-foto="2"] > img { object-position: 45% 20%; }
.co-foto[data-foto="3"] > img { object-position: 55% 18%; }
.js .co-foto { opacity: 0; transform: scale(1.04); }
.js .co-foto.co-ativa { opacity: 1; transform: none; z-index: 1; }
.js .co-foto.co-ativa > img, .js .co-foto.co-ativa > canvas { animation: co-deriva 14s ease-out both; }
@keyframes co-deriva { from { transform: scale(1); } to { transform: scale(1.06); } }
.co-palco::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to top, color-mix(in oklab, var(--noite) 55%, transparent), transparent 26%); }
.co-legenda { position: absolute; z-index: 3; left: calc(var(--co-sangra) + clamp(1rem, 2vw, 1.8rem)); right: clamp(1rem, 2vw, 1.8rem); bottom: clamp(1rem, 2vw, 1.6rem); margin: 0;
  display: flex; align-items: flex-end; gap: .9rem; color: var(--esmalte); pointer-events: none; }
.co-legenda-n { font-family: var(--f-titulo); font-style: italic; font-weight: 600; font-size: clamp(4.5rem, 3rem + 4vw, 8rem); line-height: .78; letter-spacing: -.03em;
  color: var(--rosa-claro); text-shadow: 0 10px 40px rgb(42 20 24 / .55); font-variant-numeric: tabular-nums; }
.co-legenda-c { display: grid; gap: .2rem; padding: .55rem .9rem .6rem; border-radius: 14px; margin-bottom: .2rem;
  background: color-mix(in oklab, var(--noite) 62%, transparent); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); border: 1px solid rgb(255 255 255 / .1); }
.co-legenda-de { font-size: var(--t-rotulo); letter-spacing: .16em; text-transform: uppercase; color: var(--texto-suave); }
.co-legenda-de b { color: var(--rosa-claro); font-weight: 600; }
.co-legenda-t { font-family: var(--f-titulo); font-weight: 500; font-size: 1.08rem; line-height: 1.15; }
.co-legenda.co-troca .co-legenda-n { animation: co-num .8s var(--curva) both; }
.co-legenda.co-troca .co-legenda-c { animation: co-num .8s var(--curva) .08s both; }
@keyframes co-num { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* barra de progresso fina no topo do palco */
.co-palco::before { content: ""; position: absolute; z-index: 3; left: var(--co-sangra); right: 0; top: 0; height: 3px; transform-origin: left; transform: scaleX(var(--co-fracao, 0));
  background: linear-gradient(to right, var(--rosa), var(--rosa-claro)); }

/* faixa escura sob o palco (celular): o texto some antes de passar por trás */
.co-sombra { display: none; position: absolute; left: 0; right: 0; top: calc(100% - var(--raio)); height: calc(5rem + var(--raio)); z-index: -1; pointer-events: none;
  background: linear-gradient(var(--noite) 45%, transparent); }

/* passos */
.co-trajeto { --co-prog: 0px; position: relative; padding-left: clamp(2.6rem, 4vw, 3.6rem); }
.co-passos { list-style: none; margin: 0; padding: 0; }
.co-trajeto::before { content: ""; position: absolute; left: 7px; top: var(--co-ini, 0px); height: calc(var(--co-fim, 100%) - var(--co-ini, 0px)); width: 1px; background: color-mix(in oklab, var(--esmalte) 20%, transparent); }
.co-fio { position: absolute; left: 6px; top: var(--co-ini, 0px); width: 3px; height: calc(var(--co-prog) - var(--co-ini, 0px)); border-radius: 3px; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--rosa) 3rem); box-shadow: 0 0 14px color-mix(in oklab, var(--rosa) 60%, transparent); }
.co-gota { position: absolute; left: 7.5px; top: var(--co-prog); width: 22px; height: 22px; margin: -11px 0 0 -11px; pointer-events: none;
  border-radius: 0 50% 50% 50%; transform: rotate(45deg);
  background: radial-gradient(circle at 62% 62%, #ffd9e8, var(--rosa) 52%, #b8346b);
  box-shadow: 0 0 0 5px color-mix(in oklab, var(--rosa) 20%, transparent), 0 0 30px color-mix(in oklab, var(--rosa) 70%, transparent); }

.co-passo { position: relative; isolation: isolate; min-height: clamp(18rem, 52vh, 30rem); display: flex; flex-direction: column; justify-content: center; padding: var(--e-4) 0; max-width: 34rem; }
.co-passo::before { content: ""; position: absolute; left: calc(-1 * clamp(2.6rem, 4vw, 3.6rem) + 2px); top: 50%; width: 11px; height: 11px; margin-top: -5.5px;
  border-radius: 50%; background: var(--noite); border: 1px solid color-mix(in oklab, var(--esmalte) 40%, transparent); transition: background-color .5s, border-color .5s, transform .5s var(--curva); }
.co-num { font-family: var(--f-titulo); font-style: italic; font-weight: 600; font-size: clamp(2.6rem, 2rem + 2vw, 4rem); line-height: 1; color: color-mix(in oklab, var(--esmalte) 22%, transparent); margin-bottom: .6rem; transition: color .6s; }
.co-passo .wf-h3 { margin-bottom: var(--e-2); }
.co-passo::after { content: ""; position: absolute; z-index: -1; left: -2.2rem; top: 50%; width: min(40rem, 120%); aspect-ratio: 1.6; translate: 0 -50%;
  background: radial-gradient(closest-side in oklab, color-mix(in oklab, var(--rosa) 17%, transparent), transparent);
  opacity: 0; scale: .6; transition: opacity .9s var(--curva), scale 1.2s var(--curva); pointer-events: none; }
.co-passo.co-agora::after { opacity: 1; scale: 1; }
.co-passo .co-fala { font-size: clamp(1.08rem, .95rem + .5vw, 1.38rem); }
.co-fala { color: var(--esmalte); }
.co-texto { margin-top: var(--e-2); color: var(--texto-suave); max-width: 31rem; }
.co-fala + .co-texto { font-family: var(--f-titulo); font-style: italic; font-size: 1rem; }

.js .co-passo > :not(.co-num) { opacity: .46; transition: opacity .6s var(--curva); }
.js .co-passo.co-feito > :not(.co-num) { opacity: .7; }
.js .co-passo.co-agora > :not(.co-num) { opacity: 1; }
.co-passo.co-feito::before, .co-passo.co-agora::before { background: var(--rosa); border-color: var(--rosa); }
.co-passo.co-agora .co-num { color: var(--rosa-claro); }

/* ---------- família ---------- */
.co-familia { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--e-4) clamp(2rem, 6vw, 6rem); align-items: end;
  margin-top: clamp(4rem, 9vw, 8rem); padding-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid color-mix(in oklab, var(--esmalte) 22%, transparent); }
.co-familia-titulo { font-size: var(--t-h3); line-height: 1.15; margin-bottom: var(--e-2); max-width: 22ch; }
.co-familia-titulo em { font-style: italic; font-weight: 600; color: var(--rosa-claro); }
.co-familia-texto .wf-suave { max-width: 34rem; }
.co-conjunto { margin: 0 0 var(--e-3); }
.co-nos { position: relative; display: flex; justify-content: space-between; max-width: 26rem; margin: 0 0 var(--e-4); padding-top: 2.2rem; }
.co-nos::before { content: ""; position: absolute; left: 11px; right: 11px; top: 10px; height: 2px; border-radius: 2px; transform-origin: left; transform: scaleX(0);
  background: linear-gradient(to right, var(--rosa), var(--rosa-claro), var(--rosa)); box-shadow: 0 0 12px color-mix(in oklab, var(--rosa) 55%, transparent);
  transition: transform 1.4s var(--curva) .35s; }
.co-familia-fecho.wf-visto .co-nos::before { transform: none; }
.co-no { position: relative; font-family: var(--f-titulo); font-style: italic; font-weight: 500; font-size: 1.02rem; color: var(--esmalte-2); }
.co-no:nth-child(2) { text-align: center; } .co-no:nth-child(3) { text-align: right; }
.co-no i { position: absolute; top: -2.2rem; left: 0; width: 22px; height: 22px; border-radius: 0 50% 50% 50%; transform: rotate(45deg) scale(.3); opacity: 0;
  background: radial-gradient(circle at 62% 62%, #ffd9e8, var(--rosa) 52%, #b8346b); box-shadow: 0 0 0 5px color-mix(in oklab, var(--rosa) 18%, transparent);
  transition: transform .8s var(--curva), opacity .5s; }
.co-no:nth-child(2) i { left: 50%; margin-left: -11px; transition-delay: .7s; }
.co-no:nth-child(3) i { left: auto; right: 0; transition-delay: 1.3s; }
.co-no:nth-child(1) i { transition-delay: .3s; }
.co-familia-fecho.wf-visto .co-no i { transform: rotate(45deg); opacity: 1; }
.co-conjunto p { font-family: var(--f-titulo); font-weight: 500; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem); line-height: 1.12; text-wrap: balance; }
.co-conjunto span { font-style: italic; color: var(--rosa-claro); }

/* ---------- celular e tablet ---------- */
@media (max-width: 960px) {
  .co-topo, .co-familia { grid-template-columns: minmax(0, 1fr); }
  .co-trilho { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .co-palco { top: 0; z-index: 3; height: clamp(260px, 46svh, 430px); margin: 0 calc(-1 * var(--margem)); border-radius: 0 0 var(--raio) var(--raio); overflow: visible; background: none; box-shadow: none; }
  .co-palco > .co-foto, .co-palco::after { border-radius: 0 0 var(--raio) var(--raio); overflow: hidden; }
  .co-palco::before { left: 0; }
  .co-palco > .co-sombra { display: block; }
  .co-legenda { left: var(--margem); right: var(--margem); bottom: .9rem; gap: .6rem; }
  .co-legenda-n { font-size: 4.2rem; }
  .co-legenda-t { font-size: 1rem; }
  .co-trajeto { margin-top: var(--e-3); }
  .co-passo { min-height: clamp(14rem, 34svh, 20rem); }
}
@media (max-width: 420px) { .co-legenda { font-size: .8rem; } }

@media (prefers-reduced-motion: reduce) {
  .co-foto, .co-passo > *, .co-passo::before, .co-passo::after, .co-num { transition: none !important; }
  .co-legenda.co-troca > * { animation: none !important; }
  .js .co-foto { transform: none; }
  .js .co-foto.co-ativa > img, .js .co-foto.co-ativa > canvas { animation: none; }
  .co-nos::before, .co-no i { transition: none !important; }
}