/* ===== consulta (prefixo co-) — a mesa de vidro: é onde a consulta acontece ===== */
.co{--co-fl:min(38.75rem, 46vw);--co-fa:calc(var(--co-fl) * .9286)}

/* a cena: a foto encosta no canto da seção e o tampo dela vira a página */
.co-foto{position:absolute;z-index:-1;top:0;right:0;width:var(--co-fl);margin:0}
.co-foto img{display:block;width:100%;height:auto;filter:sepia(.1) saturate(1.04) contrast(1.03);
  -webkit-mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.45) 13%, #000 32%), linear-gradient(to top, transparent 0%, rgba(0,0,0,.55) 15%, #000 34%);
          mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.45) 13%, #000 32%), linear-gradient(to top, transparent 0%, rgba(0,0,0,.55) 15%, #000 34%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.co-foto figcaption{position:absolute;right:var(--margem);bottom:.9rem;display:flex;align-items:center;gap:.7rem;color:var(--tinta)}
.co-foto figcaption::before{content:"";width:1.8rem;height:1px;background:currentColor;opacity:.7}
@media (min-width:1700px){
  .co-foto{right:calc((100vw - 96rem) / 2)}
  .co-foto img{-webkit-mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.45) 13%, #000 32%, #000 78%, transparent 100%), linear-gradient(to top, transparent 0%, rgba(0,0,0,.55) 15%, #000 34%);
          mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.45) 13%, #000 32%, #000 78%, transparent 100%), linear-gradient(to top, transparent 0%, rgba(0,0,0,.55) 15%, #000 34%)}
  .co-foto figcaption{right:22%}
}
/* o reflexo da persiana escorre da foto para o tampo */
.co-reflexo{position:absolute;z-index:-2;pointer-events:none;top:calc(var(--co-fa) * .62);right:0;width:calc(var(--co-fl) * 1.25);height:calc(var(--co-fa) * 1.5);
  background:repeating-linear-gradient(90deg, transparent 0 26px, rgba(255,252,240,.62) 38px 60px, transparent 72px 104px);
  -webkit-mask-image:radial-gradient(ellipse 62% 70% at 62% 22%, #000 0%, rgba(0,0,0,.5) 45%, transparent 78%);mask-image:radial-gradient(ellipse 62% 70% at 62% 22%, #000 0%, rgba(0,0,0,.5) 45%, transparent 78%);
  animation:co-sol 30s ease-in-out infinite alternate}
@keyframes co-sol{from{transform:translate3d(-1.6%,0,0)}to{transform:translate3d(1.6%,0,0)}}

.co-grade{display:grid;grid-template-columns:minmax(0,1fr);row-gap:clamp(2.2rem,5vh,3.6rem)}
.co-cab{display:flex;flex-direction:column;justify-content:flex-end;
  min-height:calc(var(--co-fa) - var(--respiro) - .4rem);max-width:calc(100% - var(--co-fl) + var(--margem) - 1.5rem)}
.co-titulo{font-size:clamp(2.6rem,5.5vw,5.3rem);line-height:.99}
.co-intro{margin-top:1.6rem;max-width:27em}

/* os quatro passos, sobre uma placa de vidro que continua o tampo da foto; a luz da persiana abre mais uma lâmina a cada passo */
.co-passos{position:relative;margin:0;padding:0;list-style:none;border-radius:var(--raio);
  background:linear-gradient(180deg in oklab, rgba(255,255,255,.34) 0%, rgba(255,255,255,.14) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 1px 0 0 rgba(255,255,255,.35), inset -1px 0 0 rgba(255,255,255,.35), 0 46px 60px -40px rgba(36,26,18,.5)}
.co-passos::after{content:"";display:block;height:9px;border-radius:0 0 var(--raio) var(--raio);
  background:linear-gradient(180deg in oklab, #6f8a7d 0%, #cfe0d6 22%, #f1f7f2 40%, #a9c4b7 62%, #7d9a8c 100%)}
.co-passo{--co-p:5.2rem;position:relative;display:grid;grid-template-columns:2.6rem minmax(0,6.2fr) minmax(0,3fr) minmax(0,4.2fr);column-gap:clamp(1rem,2.4vw,2.6rem);align-items:start;
  padding:clamp(1.8rem,3.8vh,2.6rem) clamp(1rem,2.2vw,2.2rem)}
.co-passo + .co-passo{border-top:1px solid var(--fio-tinta)}
.co-passo::before{content:"";position:absolute;z-index:-1;left:0;top:0;bottom:0;width:calc(var(--co-k,1) * var(--co-p));max-width:100%;
  background:repeating-linear-gradient(90deg, rgba(255,252,240,.86) 0, rgba(255,252,240,.6) calc(var(--co-p) * .76), rgba(255,252,240,.14) calc(var(--co-p) * .8), rgba(255,252,240,.14) var(--co-p));
  transform:scaleX(0);transform-origin:left;transition:transform 1.6s var(--ease) .2s}
.co-passo.wf-visto::before,.wf-sem-js .co-passo::before{transform:scaleX(1)}
.co-n{font-size:clamp(1.5rem,1.9vw,1.9rem);color:var(--verde-tinta);padding-top:.42em}
.co-verbo{margin:0;font-family:var(--serifa);font-weight:300;font-size:clamp(2.3rem,4.5vw,4.3rem);line-height:1;letter-spacing:-.024em;white-space:nowrap}
.co-verbo em{font-style:italic;color:var(--verde-tinta)}
.co-corpo{display:contents}
.co-corpo .wf-texto{padding-top:.55rem;max-width:22em}
.co-cit{margin:0;padding:.45rem 0 0 1.2rem;border-left:2px solid var(--verde-tinta)}
.co-cit p{margin:0;font-family:var(--serifa);font-style:italic;font-weight:400;font-size:clamp(1.1rem,1.38vw,1.3rem);line-height:1.4;color:var(--tinta)}
.co-cit footer{margin-top:.55rem;font-size:var(--t-mini);color:var(--tinta-suave)}
.co-passo--fim{padding-block:clamp(2.2rem,5vh,3.2rem)}
.co-passo--fim::before{width:100%}

/* a fala dela: uma placa de nogueira sobre o vidro, com a luz da persiana batendo na madeira */
.co-fala{position:relative;isolation:isolate;overflow:hidden;margin-top:clamp(1.4rem,4vh,3rem);padding:clamp(2.2rem,5vw,4.6rem);border-radius:var(--raio);color:var(--texto);
  background:linear-gradient(100deg in oklab, rgba(19,11,6,.9) 0%, rgba(29,20,13,.76) 50%, rgba(44,33,24,.5) 100%), url("../img/co-nogueira.webp") center/cover var(--nogueira-1);
  box-shadow:0 44px 70px -44px rgba(19,11,6,.75)}
.co-fala-luz{position:absolute;z-index:-1;inset:-20% -6% -20% 52%;pointer-events:none;mix-blend-mode:screen;
  background:repeating-linear-gradient(98deg, transparent 0 34px, rgba(233,223,198,.2) 50px 96px, transparent 112px 150px);
  -webkit-mask-image:linear-gradient(100deg, transparent 6%, #000 52%, rgba(0,0,0,.5) 100%);mask-image:linear-gradient(100deg, transparent 6%, #000 52%, rgba(0,0,0,.5) 100%);
  animation:co-sol 34s ease-in-out infinite alternate}
.co .co-fala-rot{margin-bottom:1.5rem;color:var(--creme)}
.co-fala-q{margin:0}
.co-fala-q p{margin:0;font-family:var(--serifa);font-weight:300;font-size:clamp(2.1rem,5.9vw,5.7rem);line-height:1.02;letter-spacing:-.024em;text-indent:-.42em;text-shadow:0 2px 24px rgba(19,11,6,.55)}
.co-fala-q em{font-style:italic;color:var(--creme);white-space:nowrap}
.co-l1,.co-l2{display:block;white-space:nowrap}
.co-l2{text-indent:0}
.co-l2 i{font-style:normal;margin-left:.09em}
.co-fala-q footer{margin-top:1.6rem;font-size:var(--t-mini);color:var(--texto-suave)}
.co-fala-eco{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) minmax(0,.85fr);gap:clamp(1.4rem,3vw,3rem);margin-top:clamp(2.2rem,6vh,4rem);padding-top:clamp(1.5rem,3vh,2.2rem);border-top:1px solid var(--fio-claro)}
.co-fala-eco .wf-h3{color:var(--creme)}
.co-fala-apoio{margin:.7rem 0 0;font-size:var(--t-texto);line-height:1.6;font-weight:300;color:var(--texto);max-width:20em}
.co-eco{margin:0}
.co-eco p{margin:0;font-family:var(--serifa);font-style:italic;font-weight:300;font-size:clamp(1.08rem,1.3vw,1.24rem);line-height:1.45}
.co-eco footer{margin-top:.5rem;font-size:var(--t-mini);color:var(--texto-suave)}

@media (max-width:1100px){
  .co-passo{grid-template-columns:2.2rem minmax(0,1fr) minmax(0,1.1fr)}
  .co-verbo{white-space:normal}
  .co-corpo{display:block;padding-top:.5rem}
  .co-corpo .wf-texto{padding-top:0;max-width:none}
  .co-cit{margin-top:1rem;padding-top:0}
}
@media (max-width:860px){
  .co{--co-fl:min(100vw, 38.75rem);padding-top:0}
  .co-foto{position:relative;z-index:0;width:var(--co-fl);margin-left:auto;margin-right:calc(var(--margem) * -1);order:1}
  .co-foto img{-webkit-mask-image:linear-gradient(to top, transparent 0%, rgba(0,0,0,.55) 12%, #000 30%);mask-image:linear-gradient(to top, transparent 0%, rgba(0,0,0,.55) 12%, #000 30%);-webkit-mask-composite:source-over;mask-composite:add}
  .co-foto figcaption{right:var(--margem);bottom:-.4rem;text-shadow:0 0 10px rgba(223,231,224,.9)}
  .co-reflexo{top:calc(var(--co-fa) * .7);width:100%;height:calc(var(--co-fa) * 1.6)}
  .co-grade{row-gap:2rem}
  .co-cab{order:2;min-height:0;max-width:none;margin-top:.6rem}
  .co-passos{order:3;margin:0 -.5rem}
  .co-fala{order:4}
  .co-titulo{font-size:clamp(2.5rem,11.6vw,3.5rem)}
  .co-intro{margin-top:1.1rem}
  .co-passo{--co-p:3.3rem;grid-template-columns:minmax(0,1fr);padding:1.6rem 1rem 1.7rem}
  .co-n{padding-top:0;font-size:1.25rem;margin-bottom:.35rem}
  .co-n::after{content:" de 4";font-family:var(--sem);font-size:.875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-suave)}
  .co-verbo{font-size:clamp(2.3rem,10.6vw,3.1rem)}
  .co-corpo{padding-top:.9rem}
  .co-fala{margin-inline:calc(var(--margem) * -1);border-radius:0;padding:2.6rem var(--margem) 2.8rem;margin-top:.8rem}
  .co-fala-luz{inset:-10% -30% -10% 20%;-webkit-mask-image:radial-gradient(ellipse 60% 46% at 62% 26%, #000 0%, transparent 78%);mask-image:radial-gradient(ellipse 60% 46% at 62% 26%, #000 0%, transparent 78%)}
  .co-fala-q p{font-size:clamp(2.05rem,9.8vw,3rem);text-indent:-.38em;padding-left:.38em}
  .co-l1{white-space:normal}
  .co-fala-eco{grid-template-columns:1fr;gap:1.4rem}
  .co-eco{padding-top:1.2rem;border-top:1px solid var(--fio-claro)}
  .co-cit footer,.co-eco footer,.co-fala-q footer{font-size:.875rem}
}
@media (prefers-reduced-motion:reduce){
  .co-passo::before{transform:scaleX(1);transition:none}
  .co-reflexo,.co-fala-luz{animation:none}
}
@media (min-width:621px) and (max-width:860px){
  .co-foto img{-webkit-mask-image:linear-gradient(to right, transparent 0%, #000 22%), linear-gradient(to top, transparent 0%, rgba(0,0,0,.55) 12%, #000 30%);mask-image:linear-gradient(to right, transparent 0%, #000 22%), linear-gradient(to top, transparent 0%, rgba(0,0,0,.55) 12%, #000 30%);-webkit-mask-composite:source-in;mask-composite:intersect}
}
@media (max-width:620px){
  .co-foto{width:100vw;margin-left:calc(var(--margem) * -1)}
}