/* 05 · consulta — do lado de cá da mesa: o tampo da foto atravessa a seção e a fita desce como fio pelos passos */
.co-sec{padding-bottom:0;overflow:clip;--co-w:clamp(400px,45vw,650px);--co-folga:clamp(52px,8vh,92px);--co-h:calc(var(--co-w)*1.7778);--co-tampo:calc(var(--co-h)*.1625)}
.co-grade{display:grid;grid-template-columns:var(--co-w) minmax(0,1fr);gap:clamp(28px,5.5vw,104px)}
.co-esq{display:flex;flex-direction:column;justify-content:space-between}
/* o título acompanha a leitura dos passos até encostar na foto */
.co-trilho{flex:1;position:relative;z-index:2}
.co-topo{position:sticky;top:clamp(24px,13vh,120px);display:grid;gap:22px;justify-items:start}
.co-topo .wf-titulo{font-size:clamp(2.4rem,4.6vw,4.5rem);line-height:1}
.co-topo .wf-titulo em{display:block}

/* a foto: bordas dissolvidas na noite, o tampo segue inteiro até as duas bordas da tela */
.co-foto{position:relative;width:var(--co-w);height:var(--co-h);margin-top:clamp(-150px,-9vw,-60px)}
.co-foto::before{content:"";position:absolute;inset:-12% -22% 14%;z-index:-1;background:radial-gradient(50% 50% at 50% 52% in oklab,rgb(164 117 61/.3),transparent 72%)}
.co-foto img{width:100%;height:100%;object-fit:cover;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(90deg,transparent,#000 12%,#000 80%,transparent),linear-gradient(180deg,transparent 1%,#000 22%);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),linear-gradient(90deg,transparent,#000 12%,#000 80%,transparent),linear-gradient(180deg,transparent 1%,#000 22%);
  -webkit-mask-size:100% 16.4%,100% 100%,100% 100%;mask-size:100% 16.4%,100% 100%,100% 100%;
  -webkit-mask-position:50% 100%,0 0,0 0;mask-position:50% 100%,0 0,0 0;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-composite:source-over,source-in;mask-composite:add,intersect}
.co-tampo{position:absolute;width:100vw;height:calc(var(--co-tampo) + 80px);background-repeat:no-repeat;background-size:100% calc(100% - 60px)}
.co-tampo-dir{left:92%;top:83.88%;z-index:-1;background-color:#94714a;background-image:linear-gradient(90deg in oklab,rgb(18 23 15/0) 4%,rgb(18 23 15/.42) 36%,rgb(18 23 15/.84)),url(../img/co-tampo-dir.webp);background-size:100% 100%,100% calc(100% - 60px);transform-origin:0 0;transform:skewY(-1.6deg)}
.co-tampo-esq{right:92%;top:85.17%;z-index:-1;background-color:#96754c;background-image:linear-gradient(270deg in oklab,rgb(18 23 15/0) 8%,rgb(18 23 15/.8) 40%),url(../img/co-tampo-esq.webp);background-size:100% 100%,100% calc(100% - 60px);transform-origin:100% 0;transform:skewY(-1.6deg)}
.co-tampo::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg in oklab,rgb(243 220 174/.5),rgb(243 220 174/.12))}
.co-tampo-esq::before{background:rgb(243 220 174/.12)}
.co-lado{font-family:var(--f-mono);font-size:var(--t-mono);letter-spacing:.05em;color:var(--tinta);white-space:nowrap}
.co-lado-foto{display:none}
.co-lado-mesa{position:absolute;left:76px;bottom:calc(var(--co-tampo)*.42)}

/* os passos */
.co-coluna{position:relative;padding-bottom:calc(var(--co-tampo) + var(--co-folga))}
.co-passos{position:relative;margin-top:6px}
.co-passos .co-fita{inset:auto;left:-6px;top:-34px;width:60px;height:calc(100% + 34px + var(--co-folga) + 2px);-webkit-mask-image:linear-gradient(180deg,transparent,#000 44px);mask-image:linear-gradient(180deg,transparent,#000 44px)}
.co-lista{display:grid;gap:clamp(40px,6.5vh,60px)}
.co-passo,.co-servico{padding-left:76px}
.co-num{font-family:var(--f-mono);font-weight:300;font-size:var(--t-mono);letter-spacing:.06em;color:var(--creme-3);transition:color .8s}
.co-nome{margin-top:8px;font-family:var(--f-titulo);font-weight:500;font-size:clamp(1.6rem,1.5vw + 1rem,2.3rem);line-height:1.08;letter-spacing:-.028em;color:var(--creme-2);transition:color .8s}
.co-on .co-nome{color:var(--creme)}.co-on .co-num{color:var(--mel-claro)}
.co-fala{margin-top:18px;font-size:var(--t-grande);line-height:1.32;letter-spacing:-.015em;max-width:23em;text-wrap:pretty}
.co-apoio{margin-top:14px;font-size:var(--t-texto);line-height:1.62;color:var(--creme-2);max-width:30em;text-wrap:pretty}
.co-apoio q{color:var(--creme)}
.co-google{margin-top:24px;padding:14px 0 0;border-top:1px solid var(--fio);max-width:30em;font-size:var(--t-mini);line-height:1.55;color:var(--creme-2);display:grid;gap:6px}
.co-google span{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--mel-claro)}
.co-servico{margin-top:clamp(40px,6.5vh,60px);display:grid;gap:20px;justify-items:start}
.co-onde{color:var(--creme)}

@media (max-width:820px){
  .co-sec{padding-bottom:var(--sec-y)}
  .co-grade{grid-template-columns:1fr;gap:44px}
  .co-foto{width:100vw;height:auto;aspect-ratio:1080/1640;margin:8px calc(-1*var(--margem)) 0}
  .co-foto img{object-position:50% 100%;-webkit-mask-image:linear-gradient(180deg,transparent,#000 16%);mask-image:linear-gradient(180deg,transparent,#000 16%);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-composite:source-over;mask-composite:add}
  .co-tampo{display:none}
  .co-lado-foto{display:block;position:absolute;left:0;right:0;bottom:14px;text-align:center}
  .co-lado-mesa{display:none}
  .co-foto::before{display:none}
  .co-topo{position:static}
  .co-passos .co-fita{height:calc(100% + 34px)}
  .co-coluna{padding-bottom:0}
  .co-passos .co-fita{left:-12px;width:46px}
  .co-passo,.co-servico{padding-left:44px}
  .co-google span{font-size:.875rem}
  .co-servico .wf-botao{width:100%;padding:0 12px;text-align:center;white-space:nowrap}
  .co-sec .wf-rotulo b{font-size:1em}
}
@media (min-width:600px) and (max-width:820px){
  .co-foto{width:min(560px,100%);margin:0 auto}
  .co-foto img{-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(180deg,transparent,#000 18%);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(180deg,transparent,#000 18%);-webkit-mask-composite:source-in;mask-composite:intersect}
  .co-passos{max-width:560px;margin-inline:auto;width:100%}
  .co-topo{max-width:560px;margin-inline:auto;width:100%}
}