/* consulta — como funciona (prefixo co-) */
.co{padding-block:0}
.co-grade{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,50vw);column-gap:clamp(40px,6vw,110px);align-items:start}
.co-lado-foto{position:relative;height:100%}
.co-foto{position:sticky;top:0;margin:0;height:100vh;min-height:620px}
.co-quadro{position:absolute;inset:0;overflow:hidden;background:var(--c3)}
.co-quadro img{width:100%;height:100%;object-fit:cover;object-position:50% 60%;
  transform-origin:50% 50%;transform:translate(var(--tx,0%),var(--ty,0%)) scale(var(--z,1));will-change:transform}
.co-quadro::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg, color-mix(in oklab, var(--c0) 55%, transparent), transparent 22%)}
.co-legenda{position:absolute;left:var(--margem);bottom:clamp(18px,3vh,32px);z-index:1;
  font-size:var(--t-rot);letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:#fdfcfb;
  padding:.55em .9em;border-radius:99px;background:rgb(30 20 18 / .38);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

.co-texto{padding-block:var(--pad-s);padding-left:max(var(--margem), calc((100vw - var(--larg)) / 2));max-width:44rem;justify-self:end;width:100%;box-sizing:border-box}
.co-texto .wf-titulo{max-width:11em}

/* o fio do dia vira o caminho dos três tempos */
.co-tempos{list-style:none;margin:clamp(36px,6vh,64px) 0 0;padding:0;position:relative}
.co-tempos::before{content:"";position:absolute;left:4px;top:10px;bottom:10px;width:1px;
  background:repeating-linear-gradient(180deg, rgb(var(--tinta-rgb) / .5) 0 5px, transparent 5px 9px)}
.co-tempos::after{content:"";position:absolute;left:4px;top:10px;bottom:10px;width:1px;background:rgb(var(--tinta-rgb) / .85);
  transform-origin:0 0;transform:scaleY(var(--feito,0))}
.no-js .co-tempos::after{transform:none}
.co-tempo{position:relative;padding:0 0 clamp(30px,5vh,48px) 40px}
.co-tempo::before{content:"";position:absolute;left:0;top:.45em;width:9px;height:9px;border-radius:50%;
  border:1px solid rgb(var(--tinta-rgb));background:var(--c0)}
.co-tempo::before{transition:background .6s var(--ease), transform .6s var(--ease)}
.co-tempo.co-chegou::before,.no-js .co-tempo::before{background:rgb(var(--tinta-rgb));transform:scale(1.25)}
.co-quando{display:block;font-size:var(--t-rot);letter-spacing:.18em;text-transform:uppercase;font-weight:500;color:var(--acento)}
.co-nome{font-family:var(--serifa);font-weight:400;font-size:clamp(1.6rem,1.2rem + 1vw,2.3rem);line-height:1.1;margin:.3em 0 .35em}
.co-desc{margin:0;max-width:30em;color:rgb(var(--tinta-rgb) / .92)}

.co-onde{display:grid;grid-template-columns:1fr 1fr;margin-top:clamp(12px,2vh,24px);
  padding-top:clamp(28px,4vh,44px);border-top:1px solid rgb(var(--tinta-rgb) / .18)}
.co-forma{padding-right:clamp(18px,2.4vw,36px)}
.co-forma + .co-forma{padding:0 0 0 clamp(18px,2.4vw,36px);border-left:1px solid rgb(var(--tinta-rgb) / .18)}
.co-forma p{margin:0 0 .6em}
.co-forma-rot{display:block;font-size:var(--t-rot);letter-spacing:.18em;text-transform:uppercase;font-weight:500;color:rgb(var(--suave-rgb))}
.co-lugar{font-family:var(--serifa);font-weight:400;font-size:clamp(2rem,1.4rem + 1.2vw,2.7rem);white-space:nowrap;line-height:1;letter-spacing:-.015em;margin:.25em 0 .45em}
.co-acao{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:clamp(28px,4vh,44px)}
.co-nota{font-size:.9rem;color:rgb(var(--suave-rgb))}

@media (max-width:899px){
  .co-grade{grid-template-columns:1fr}
  .co-lado-foto{height:auto}
  .co-foto{position:relative;height:auto;min-height:0;aspect-ratio:4/5}
  .co-texto{padding:clamp(48px,8vh,72px) var(--margem) var(--pad-s);max-width:none}
  .co-lado-foto{order:-1}
  .co-onde{grid-template-columns:1fr;gap:28px}
  .co-forma{padding:0}
  .co-forma + .co-forma{padding:28px 0 0;border-left:0;border-top:1px solid rgb(var(--tinta-rgb) / .18)}
  .co-quadro::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg, color-mix(in oklab, var(--c0) 55%, transparent), transparent 22%)}
.co-legenda{font-size:.72rem;bottom:14px}
}
@media (max-width:899px){.co-quadro::after{background:linear-gradient(0deg, color-mix(in oklab, var(--c0) 60%, transparent), transparent 22%)}}
@media (prefers-reduced-motion:reduce){.co-tempos::after{transform:none}.co-tempo::before{transition:none;background:rgb(var(--tinta-rgb))}}
@media (min-width:900px) and (max-width:1199px){
  .co-onde{grid-template-columns:1fr;gap:26px}
  .co-forma + .co-forma{padding:26px 0 0;border-left:0;border-top:1px solid rgb(var(--tinta-rgb) / .18)}
}