/* co · A primeira consulta */
.co { --m1: var(--manteiga); --m2: var(--lilas-nevoa); --m3: var(--pessego); --m4: var(--rosa-nevoa); background: var(--papel); }
.co-grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 110px); align-items: start; }
.co-figura { position: relative; position: sticky; top: clamp(24px, 6vh, 60px); }
.co-arco { position: relative; aspect-ratio: 4 / 5; border-radius: 999px 999px 28px 28px; overflow: hidden;
  background: radial-gradient(circle at 50% 30%, color-mix(in oklab, var(--manteiga) 70%, var(--papel)), var(--lilas-nevoa) 78%); }
.co-arco img { position: absolute; left: 50%; bottom: 0; width: 94%; height: auto; transform: translateX(-50%); }
.co-ondas { right: -36px; top: 18%; width: 62px; height: 98px; }
.co-ondas path { stroke: var(--framboesa); stroke-width: 5; }
.co-convite { position: absolute; left: -18px; bottom: -34px; width: min(300px, 74%); }
.co-intro { margin-top: 18px; }
.co-passos { position: relative; list-style: none; margin: clamp(30px, 4vw, 52px) 0 0; padding: 0 0 0 76px; display: grid; gap: clamp(26px, 3vw, 40px); }
.co-trilha { left: 6px; top: 20px; width: 40px; height: calc(100% - 40px); }
.co-trilha path { stroke: color-mix(in oklab, var(--lilas) 70%, transparent); stroke-width: 3; stroke-dasharray: none; }
.co-passo { position: relative; }
.co-passo h3 { margin: 0 0 6px; font-family: var(--f-titulo); font-weight: 650; font-size: clamp(1.3rem, 1rem + .7vw, 1.6rem); line-height: 1.15; color: var(--tinta); font-variation-settings: "INFM" 20, "BNCE" 0; }
.co-passo p { margin: 0; font-size: var(--t-corpo); line-height: 1.6; color: var(--tinta-2); max-width: 32em; }
.co-n { position: absolute; left: -76px; top: -4px; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%;
  background: var(--papel); font-family: var(--f-titulo); font-weight: 700; font-size: 1.4rem; color: var(--framboesa-escura); }
.co-roda { inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); }
.co-roda path { stroke: var(--lilas); stroke-width: 3.4; }
.co-fala { font-size: 1.18rem !important; line-height: 1.5 !important; color: var(--tinta) !important; }
.co-pratico { margin-top: clamp(40px, 4.5vw, 64px); padding: clamp(24px, 3vw, 36px); border-radius: 28px; background: color-mix(in oklab, var(--manteiga) 45%, var(--papel)); box-shadow: 0 1px 0 rgb(255 255 255 / .7) inset, 0 20px 40px -28px rgb(70 40 50 / .35); }
.co-fatos { margin: 0 0 22px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.co-fatos div { border-left: 2px solid color-mix(in oklab, var(--lilas) 55%, transparent); padding-left: 14px; }
.co-fatos dt { font-size: var(--t-mini); font-weight: 500; text-transform: uppercase; letter-spacing: .12em; color: var(--tinta-2); margin-bottom: 4px; }
.co-fatos dd { margin: 0; color: var(--tinta); line-height: 1.45; font-size: .98rem; }
.co-pratico { position: relative; }
.co-seta { left: clamp(270px, 24vw, 320px); bottom: 36px; width: 110px; height: 64px; transform: scaleY(-1); }
.co-seta path { stroke: var(--framboesa); stroke-width: 4; }
.co-sub { position: relative; white-space: nowrap; }
.co-risco { left: -2%; bottom: -8px; width: 104%; height: 12px; }
.co-risco path { stroke: var(--framboesa); stroke-width: 4; }
.co-cedo { margin: 0 0 26px; color: var(--tinta-2); line-height: 1.6; max-width: 34em; }
.co-cedo .wf-fala { color: var(--tinta); }
@media (max-width: 900px) {
  .co-grade { grid-template-columns: 1fr; }
  .co-figura { position: relative; top: auto; max-width: 420px; margin: 0 auto 40px; width: 100%; }
  .co-ondas { right: -8px; }
  .co-convite { left: 0; bottom: -40px; }
  .co-passos { padding-left: 62px; }
  .co-n { left: -62px; width: 46px; height: 46px; }
  .co-trilha { left: 3px; }
  .co-fatos { grid-template-columns: 1fr; gap: 14px; }
  .co-pratico { padding: 22px 20px; }
  .co-seta { display: none; }
}