/* ===== cs · VEIO 03 · A consulta ===== */
.cs-placa{padding-top:calc(var(--wf-respiro) * .9)}
.cs-fio{position:absolute;z-index:1;left:var(--b-margem);top:0;width:24px;height:calc(var(--wf-respiro) * .8);margin-left:-12px}
@media (min-width:1700px){ .cs-fio{left:calc((100% - var(--wf-largura)) / 2)} }

/* abertura: foto da mesa + título */
.cs-abre{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:3rem clamp(2.5rem,6vw,7rem);align-items:start}
.cs-abre-texto{padding:clamp(2rem,6vw,6rem) 0 7rem}
.cs-foto{aspect-ratio:1400/1791;max-height:48rem}
.cs-foto img{height:100%}
.cs-abre-texto{display:grid;gap:1.6rem;align-content:center}
.cs-abre-texto .wf-rotulo{margin:0}
.cs-titulo{max-width:15ch}
.cs-foto .wf-etiqueta{max-width:14rem;line-height:1.5}
.cs-cita{max-width:32rem}
.cs-numeros{grid-column:1/6;grid-row:5;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem 2.5rem;margin:0;padding-top:1.6rem;border-top:1px solid rgba(243,193,178,.2)}
.cs-num dt{display:flex;align-items:baseline;gap:.6rem}
.cs-num-a{font-family:var(--b-serifa);font-weight:200;font-size:clamp(2.8rem,2rem + 2.4vw,4.4rem);line-height:1;color:var(--b-rose)}
.cs-num-de{font-family:var(--b-mono);font-size:var(--t-rotulo);letter-spacing:.16em;text-transform:uppercase;color:var(--b-cinza-texto)}
.cs-num::after{content:"";display:block;height:2px;margin-top:1rem;background:linear-gradient(90deg, var(--b-rose) 0 var(--p), rgba(243,193,178,.18) var(--p) 100%)}
.cs-num dd{margin:.5rem 0 0;font-size:var(--t-mini);line-height:1.5;color:var(--b-creme-suave);max-width:17rem}

/* a folha de orientações */
.cs-folha{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:2rem clamp(2rem,5vw,5rem);
  width:min(calc(100% - 15.5rem), 70rem);margin:-5rem 0 0 auto;padding:clamp(2rem,1rem + 3vw,4rem);color:var(--wf-tinta);
  background:linear-gradient(in oklab 160deg, rgba(248,243,239,.9), rgba(242,235,229,.94)), url("../img/marmore-claro-a.webp") center/cover, var(--wf-marfim);
  box-shadow:0 50px 90px -40px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.4) inset}
.cs-folha-fonte{margin:0 0 1rem;font-family:var(--b-mono);font-size:var(--t-rotulo);letter-spacing:.18em;text-transform:uppercase;color:var(--wf-terracota)}
.cs-folha-titulo{margin:0 0 1.8rem;font-family:var(--b-serifa);font-weight:200;font-size:clamp(1.7rem,1.2rem + 1.5vw,2.6rem);line-height:1.08;letter-spacing:-.01em;max-width:18ch}
.cs-folha-titulo em{font-style:italic;font-weight:300;color:var(--wf-terracota)}
.cs-lista{list-style:none;margin:0;padding:0;counter-reset:none}
.cs-lista li{display:grid;grid-template-columns:3rem minmax(0,1fr);gap:.5rem;padding:1.05rem 0;border-top:1px solid rgba(42,33,36,.14)}
.cs-lista li:last-child{border-bottom:1px solid rgba(42,33,36,.14)}
.cs-n{font-family:var(--b-mono);font-size:.78rem;letter-spacing:.1em;color:var(--wf-terracota);padding-top:.2rem}
.cs-lista p{margin:0;font-size:var(--t-texto);line-height:1.55;color:var(--wf-tinta-suave)}
.cs-lista strong{font-weight:500;color:var(--wf-tinta)}
.cs-folha-lado{display:grid;grid-template-rows:1fr auto;gap:2rem;align-items:end;justify-items:center}
.cs-perna{width:min(100%, 13.5rem);height:auto;overflow:visible}
.cs-perna path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.cs-perna-c{stroke:var(--wf-tinta);stroke-width:1.3;opacity:.82}
.cs-perna-v{stroke:var(--b-rose-fundo);stroke-width:2.2}
.cs-perna-r{stroke:var(--b-rose-fundo);stroke-width:1.2;opacity:.8}
.cs-perna-p{stroke:var(--wf-terracota);stroke-width:2.4;stroke-dasharray:.1 1.1;stroke-dashoffset:.1;opacity:0}
.cs-fecho{margin:0;padding-left:1.1rem;border-left:1px solid var(--wf-terracota);justify-self:stretch}
.cs-fecho p{margin:0;font-family:var(--b-serifa);font-style:italic;font-weight:300;font-size:clamp(1.08rem,1rem + .4vw,1.3rem);line-height:1.42;color:var(--wf-tinta)}
.cs-fecho footer{margin-top:.6rem;font-family:var(--b-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--wf-tinta-suave)}

/* o gesto: a perna se desenha como na prancheta dela */
.js .cs-perna path{stroke-dasharray:1 1;stroke-dashoffset:1}
.js .cs-perna .cs-perna-p{stroke-dasharray:.1 1.1;stroke-dashoffset:.1}
.js .cs-folha.is-in .cs-perna-c{stroke-dashoffset:0;transition:stroke-dashoffset 2.6s var(--b-ease) .3s}
.js .cs-folha.is-in .cs-perna-v{stroke-dashoffset:0;transition:stroke-dashoffset 1.8s var(--b-ease) 1.9s}
.js .cs-folha.is-in .cs-perna-r{stroke-dashoffset:0;transition:stroke-dashoffset 1s var(--b-ease) 2.9s}
.js .cs-folha.is-in .cs-perna-p{opacity:.55;animation:cs-pulso 7s linear 3.6s infinite}
@keyframes cs-pulso{from{stroke-dashoffset:.1}to{stroke-dashoffset:-1.1}}

/* vozes */
.cs-vozes{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:3.2rem clamp(1.2rem,2vw,2rem);margin-top:clamp(5rem,3rem + 5vw,8rem);align-items:start}
.cs-vozes-rotulo{grid-column:1/-1;margin:0;font-family:var(--b-mono);font-size:var(--t-rotulo);letter-spacing:.2em;text-transform:uppercase;color:var(--b-cinza-texto)}
.cs-mao{grid-column:1/6;grid-row:2/5;align-self:start;aspect-ratio:1080/860}
.cs-voz{margin:0}
.cs-voz-1{grid-column:7/13;grid-row:2}
.cs-voz-2{grid-column:8/13;grid-row:3}
.cs-voz-3{grid-column:7/12;grid-row:4}
.cs-voz-4{grid-column:7/13;grid-row:5}
.cs-voz-1 p{font-size:clamp(1.3rem,1rem + 1vw,1.9rem)}
.cs-acao{grid-column:7/13;grid-row:6;justify-self:start}
.cs-acao .wf-cta{white-space:nowrap}

@media (max-width:980px){
  .cs-abre{grid-template-columns:1fr}
  .cs-foto{max-height:none;aspect-ratio:4/4.6}
  .cs-foto img{object-position:50% 0}
  .cs-abre-texto{padding:0 0 1rem}
  .cs-folha{grid-template-columns:1fr;margin:2rem 0 0 0;width:100%}
  .cs-folha-lado{grid-template-rows:auto;grid-template-columns:7rem minmax(0,1fr);align-items:center;gap:1.4rem}
  .cs-perna{width:7rem}
  .cs-vozes{grid-template-columns:1fr;gap:2.4rem}
  .cs-vozes>*{grid-column:1!important;grid-row:auto!important}
  .cs-acao{justify-self:start}
}
@media (max-width:520px){
  .cs-numeros{grid-template-columns:1fr 1fr;gap:1.2rem}
  .cs-folha{margin-left:calc(var(--b-margem) * -.5);margin-right:calc(var(--b-margem) * -.5);width:auto;padding:2rem 1.25rem}
  .cs-lista li{grid-template-columns:2.3rem minmax(0,1fr)}
  .cs-folha-lado{grid-template-columns:5rem minmax(0,1fr);align-items:end}
  .cs-perna{width:5rem}
  .cs-acao .wf-cta{white-space:normal}
  .cs-acao,.cs-acao .wf-cta{width:100%;justify-content:center;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .js .cs-perna path{stroke-dashoffset:0}
  .js .cs-folha .cs-perna .cs-perna-p{opacity:0!important;animation:none!important}
}