/* Prancha 05 · A consulta e o consultório — planta baixa do percurso (prefixo co-) */
.co { --co-p: 0; }
#consulta { scroll-margin-top: 1rem; }

/* malha e halo do disco de luz */
.co .wf-malha i { animation-duration: 31s; }
.co-m1 { width: 80vmax; height: 80vmax; left: -28vmax; top: -10vmax; background: radial-gradient(closest-side in oklab, #e9d3ad2e 0%, #cbbfae12 45%, #12131600 100%); }
.co-m2 { width: 70vmax; height: 70vmax; right: -30vmax; top: 30%; background: radial-gradient(closest-side in oklab, #c9a25a24 0%, #c9a25a0c 50%, #c9a25a00 100%); animation-duration: 37s !important; animation-delay: -9s; }
.co-m3 { width: 90vmax; height: 90vmax; left: 10vw; bottom: -55vmax; background: radial-gradient(closest-side in oklab, #2a2c31 0%, #1d1f24aa 40%, #12131600 100%); animation-duration: 29s !important; }

/* cabeçalho */
.co-cab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); column-gap: clamp(2.5rem, 5vw, 5rem); align-items: end; margin-bottom: clamp(3rem, 6vw, 5.5rem); }
.co-cab .wf-carimbo { grid-column: 1 / -1; justify-self: start; }
.co-cab .wf-h2 { max-width: 16ch; }
.co-intro { margin: 0; }

/* corpo: planta fixa à esquerda, etapas à direita */
.co-corpo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(2.5rem, 5vw, 5.5rem); align-items: start; }

/* ───────── planta ───────── */
.co-planta { position: sticky; top: max(1.25rem, calc(50svh - min(39svh, 25rem))); margin: 0; }
.co-planta-in { position: relative; border: 1px solid #e9d3ad40; padding: clamp(.75rem, 1.4vw, 1.25rem); background: color-mix(in oklab, var(--grafite-0) 55%, transparent); }
.co-planta-in::before { content: ""; position: absolute; inset: 7px; border: 1px solid #e9d3ad1c; pointer-events: none; }
.co-svg { display: block; width: 100%; height: auto; max-height: min(60svh, 42rem); margin-inline: auto; overflow: visible; }
.co-quadricula { opacity: .09; }
.co-parede path { stroke: var(--luz-2); stroke-width: 7; stroke-linecap: square; opacity: .82; }
.co-janela path { stroke: var(--luz-2); stroke-width: .9; opacity: .7; }
.co-porta path { stroke: var(--luz-2); stroke-width: 1.4; opacity: .75; }
.co-porta .co-arco { stroke-width: .8; stroke-dasharray: 3 4; opacity: .6; }
.co-movel :is(rect, circle, path) { stroke: var(--bege); stroke-width: 1; opacity: .5; }
.co-movel .co-espelho { fill: var(--luz-2); opacity: .55; stroke: none; }
.co-disco circle { stroke: var(--luz); stroke-width: .8; stroke-dasharray: 2 5; opacity: .55; }
.co-disco circle + circle { stroke-dasharray: none; opacity: .3; }
.co-bandeja circle { stroke: var(--ouro); stroke-width: 1.4; }
.co-bandeja circle + circle { stroke-width: 1; opacity: .8; }
.co-amb text, .co-norte text { font-family: var(--f-tecnica); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; fill: var(--tinta-2); }
.co-norte circle { stroke: var(--tinta-2); stroke-width: .8; opacity: .6; }
.co-norte path { fill: var(--ouro); }

/* percurso: traço-guia apagado + traço que se desenha */
.co-rota-guia { stroke: var(--ouro); stroke-width: 1; stroke-dasharray: 2 6; stroke-linecap: round; opacity: .35; }
.co-rota { stroke: var(--ouro-claro); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--co-p)); filter: drop-shadow(0 0 4px #c9a25a88); }
.co-seta { stroke: var(--ouro-claro); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .5s; }
.co-planta.fim .co-seta { opacity: 1; }

/* estações */
.co-est .co-no { fill: var(--grafite); stroke: var(--ouro); stroke-width: 1.2; transition: fill .5s, stroke .5s; }
.co-est .co-halo { fill: #e9d3ad; opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; scale: .4; transition: opacity .6s, scale .8s var(--curva); }
.co-est text { font-family: var(--f-tecnica); font-size: 12px; fill: var(--ouro-claro); transition: fill .5s; }
.co-est.on .co-no { fill: var(--luz); stroke: var(--luz); }
.co-est.on text { fill: var(--grafite); }
.co-est.on .co-halo { opacity: .16; scale: 1; }
.co-est.atual .co-halo { opacity: .3; animation: co-pulsa 2.4s ease-in-out infinite alternate; }
@keyframes co-pulsa { to { scale: 1.35; opacity: .12; } }

.co-selo { display: grid; grid-template-columns: 1fr 1fr; margin-top: .75rem; border: 1px solid #e9d3ad33; font-family: var(--f-tecnica); font-size: var(--t-mini); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); }
.co-selo > span { padding: .65rem .9rem .7rem; border-right: 1px solid #e9d3ad26; line-height: 1.2; }
.co-selo > span:nth-child(2) { border-right: 0; }
.co-selo-local { grid-column: 1 / -1; border-right: 0 !important; border-top: 1px solid #e9d3ad26; }
.co-selo b { display: block; margin-top: .35rem; font-weight: 400; color: var(--luz-2); letter-spacing: .1em; }
.co-selo-ativo b { color: var(--ouro-claro); min-width: 9ch; }

/* ───────── etapas ───────── */
.co-etapas { list-style: none; margin: 0; padding: 0; position: relative; }
.co-etapa { position: relative; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: clamp(1rem, 2vw, 1.75rem); padding: clamp(3rem, 9svh, 6rem) 0; border-top: 1px solid #e9d3ad1f; }
.co-etapa:first-child { border-top: 0; padding-top: 0; }
.co-etapa:last-child { padding-bottom: 0; }
.co-num { align-self: start; margin: 0; font-family: var(--f-titulo); font-weight: 300; font-size: clamp(3.4rem, 5vw, 4.6rem); line-height: .8; color: transparent; -webkit-text-stroke: 1px #e9d3ad66; transition: color .7s ease, -webkit-text-stroke-color .7s; }
.co-etapa.on .co-num { color: var(--ouro-claro); -webkit-text-stroke-color: transparent; }
.co-etapa-txt { min-width: 0; }
.co-rot { margin: 0 0 .7rem; font-family: var(--f-tecnica); font-size: var(--t-mini); letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-2); transition: color .6s; }
.co-etapa.on .co-rot { color: var(--ouro-claro); }
.co-etapa.on .co-tit { color: var(--luz); }
.co-tit { transition: color .6s; font-weight: 300; font-size: clamp(1.75rem, 2.6vw, 2.5rem); line-height: 1.08; color: var(--tinta); margin-bottom: 1rem; }
.co-p { margin: 0; font-size: var(--t-corpo); font-weight: 300; line-height: 1.6; color: var(--tinta-2); max-width: 34rem; }
.co-cit { margin: 1.5rem 0 0; padding-left: 1.1rem; border-left: 1px solid var(--ouro); max-width: 32rem; }
.co-cit p { margin: 0; font-size: clamp(1.2rem, 1.5vw, 1.4rem); line-height: 1.4; color: var(--tinta); }
.co-cit footer { margin-top: .6rem; font-family: var(--f-tecnica); font-size: var(--t-mini); letter-spacing: .1em; color: var(--tinta-2); line-height: 1.4; }
.co-cit + .co-cit { margin-top: 1.25rem; }

/* fotos fixadas na prancha */
.co-foto { position: relative; margin: 0; }
.co-foto img { width: 100%; height: 100%; object-fit: cover; border: 1px solid #e9d3ad40; padding: 6px; background: #f3e6cf0d; }
.co-foto figcaption { margin-top: .55rem; font-family: var(--f-tecnica); font-size: var(--t-mini); letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-2); }
.co-pino { position: absolute; z-index: 2; top: -7px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f3e6cf, #c9a25a 55%, #7d5f24); box-shadow: 0 3px 6px #0008; }
.co-foto-cafe { grid-column: 2; justify-self: end; margin-top: 2.5rem; width: min(24rem, 78%); aspect-ratio: 4 / 4.4; }
.co-foto-cafe img { object-position: 50% 60%; }
.co-fotos { grid-column: 2; margin-top: 2.75rem; display: grid; grid-template-columns: 1.25fr 1fr; align-items: start; }
.co-foto-a { aspect-ratio: 3 / 4; }
.co-foto-b { aspect-ratio: 2 / 3; margin-top: 5rem; margin-left: -2.5rem; z-index: 1; }
.co-foto-b img { background: var(--grafite); }
.co-foto-a img { object-position: 30% 30%; }
.co-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 1.75rem; }
.co-link { color: var(--tinta); }
.co-link span { color: var(--ouro-claro); }

/* ───────── celular e tablet em pé ───────── */
@media (max-width: 900px) {
  .co-cab { grid-template-columns: minmax(0, 1fr); row-gap: 1.25rem; }
  .co-corpo { grid-template-columns: minmax(0, 1fr); row-gap: 3rem; }
  .co-planta { position: relative; top: auto; max-width: 30rem; width: 100%; margin-inline: auto; }
  .co-svg { max-height: none; }
  .co-amb text, .co-norte text { font-size: 17px; }
  .co-est text { font-size: 15px; }
  .co-selo { grid-template-columns: 1fr 1fr; }
  .co-selo-ativo { display: none; }
  /* trilho do percurso ao lado das etapas, desenhado com a rolagem */
  .co-etapas { padding-left: 0; }
  .co-etapas::before { content: ""; position: absolute; left: 1.45rem; top: .5rem; bottom: 0; width: 1px; background: repeating-linear-gradient(#c9a25a59 0 3px, transparent 3px 9px); }
  .co-etapas::after { content: ""; position: absolute; left: calc(1.45rem - .5px); top: .5rem; bottom: 0; width: 2px; background: var(--ouro-claro); transform-origin: 50% 0; transform: scaleY(var(--co-trilho, 0)); box-shadow: 0 0 6px #c9a25a88; }
  .co-etapa { grid-template-columns: 2.9rem minmax(0, 1fr); padding: 2.75rem 0; border-top: 0; }
  .co-num { position: relative; z-index: 1; width: 2.9rem; height: 2.9rem; display: grid; place-items: center; font-family: var(--f-tecnica); font-size: .875rem; line-height: 1; border-radius: 50%; border: 1px solid var(--ouro); background: var(--grafite); color: var(--ouro-claro); -webkit-text-stroke: 0; transition: background-color .5s, color .5s; }
  .co-etapa.on .co-num { background: var(--luz); color: var(--grafite); }
  .co-foto-cafe, .co-fotos { grid-column: 2; }
  .co-foto-cafe { width: min(15rem, 85%); }
  .co-fotos { grid-template-columns: 1fr 1fr; gap: .9rem; }
  .co-foto-b { margin-top: 2rem; margin-left: -1.25rem; }
  .co-foto-cafe { justify-self: start; }
}
@media (max-width: 420px) {
  .co-carimbo-extra { display: none; }
  .co .wf-carimbo { letter-spacing: .08em; max-width: 100%; }
  .co .wf-carimbo > span { padding-inline: .7rem; }
  .co .wf-carimbo > span:first-child { white-space: nowrap; }
  .co-selo { grid-template-columns: 1fr; }
  .co-selo > span { border-right: 0; }
  .co-selo > span + span { border-top: 1px solid #e9d3ad26; }
  .co-acoes .wf-botao { white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .co { --co-p: 1 !important; }
  .co-seta { opacity: 1; }
  .co-etapas::after { transform: none; }
}
.co-foto-a figcaption { padding-right: 2.75rem; }
@media (max-width: 900px) { .co-foto-a figcaption { padding-right: 1.5rem; } }

/* rodada 2: o móvel da etapa acende; filete de luz; rótulo de ambiente */
.co-mov { transition: opacity .7s, stroke .7s, filter .7s; }
.co-planta [data-co-mov].on { opacity: 1 !important; stroke: var(--luz) !important; filter: drop-shadow(0 0 5px #e9d3ad99); }
.co-planta .co-espelho.on { fill: var(--luz); stroke: none !important; }
.co-planta .co-disco.on circle { stroke: var(--luz); opacity: .95; }
.co-disco-aceso { opacity: 0; transition: opacity 1.2s ease; mix-blend-mode: screen; }
.co-planta.luz .co-disco-aceso { opacity: 1; }
.co-amb-rot { display: block; margin-top: .45rem; font-family: var(--f-tecnica); font-size: var(--t-mini); letter-spacing: .12em; color: var(--tinta-2); opacity: .9; }
.co-amb-rot::before { content: "↳ "; color: var(--ouro); }
.co-etapa::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: linear-gradient(90deg, var(--ouro-claro), #e9d3ad00); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.2s var(--curva); }
.co-etapa:first-child::before { display: none; }
.co-etapa.on::before { transform: scaleX(1); }
.co-cab { margin-bottom: clamp(2.5rem, 4.5vw, 4rem); }
@media (max-width: 900px) {
  .co-etapa::before { display: none; }
  .co-planta.toca .co-rota { animation: co-percurso 4.2s var(--curva) forwards; }
  .co-planta.toca .co-seta { opacity: 1; transition-delay: 4s; }
}
@keyframes co-percurso { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }