/* consulta (prefixo cs-) · como é a consulta, na ordem, com as palavras das pacientes. Fundo noite. */

.cs{overflow:hidden}

/* ───────── a noite desta seção ───────── */
.cs-malha{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--noite)}
.cs-malha i{position:absolute;display:block;border-radius:50%;filter:blur(28px);will-change:transform}
.cs-malha i:nth-child(1){
  left:-20vmax;top:18%;width:70vmax;height:60vmax;
  background:radial-gradient(closest-side in oklch,rgb(11 58 67 / .85) 0%,rgb(11 58 67 / .4) 48%,rgb(6 38 44 / 0) 100%);
  animation:cs-r1 36s ease-in-out infinite alternate;
}
.cs-malha i:nth-child(2){
  right:-22vmax;bottom:-20vmax;width:76vmax;height:64vmax;
  background:radial-gradient(closest-side in oklch,rgb(4 27 32 / .9) 0%,rgb(4 27 32 / .45) 52%,rgb(6 38 44 / 0) 100%);
  animation:cs-r2 30s ease-in-out infinite alternate;
}
@keyframes cs-r1{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(5vmax,-3vmax,0) scale(1.1)}}
@keyframes cs-r2{from{transform:translate3d(0,0,0) scale(1.04)}to{transform:translate3d(-4vmax,3vmax,0) scale(.96)}}
.cs-malha.wf-pausa i{animation-play-state:paused}
@media (max-width:820px){.cs-malha i{filter:blur(18px)}}

/* ───────── a grade ───────── */
.cs-grade{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  grid-template-areas:"cabeca numeros" "passos passos" "escuta escuta" "pe pe";
  gap:0 clamp(32px,5vw,96px);align-items:end;
}
.cs-grade > *{min-width:0}
.cs-cabeca{grid-area:cabeca}
.cs-numeros{grid-area:numeros}
.cs-passos{grid-area:passos}
.cs-escuta{grid-area:escuta}
.cs-pe{grid-area:pe}

/* ───────── cabeça ───────── */
.cs-cabeca .wf-titulo{max-width:9em}
.cs-cabeca .wf-apoio{margin-top:var(--passo);max-width:34em}

/* ───────── os números: sobem uma vez e param ───────── */
.cs-numeros{justify-self:end;width:100%;max-width:26rem;padding-left:clamp(18px,2vw,28px);border-left:1px solid var(--fio)}
.cs-num-lista{display:grid;gap:10px}
.cs-num-lista li{display:grid;grid-template-columns:minmax(2.6em,auto) minmax(0,1fr);align-items:baseline;gap:16px}
.cs-num{
  font:500 clamp(3rem,4.4vw,4.25rem)/1 var(--f-titulo);letter-spacing:.02em;color:var(--pedra);
  font-variant-numeric:tabular-nums;text-align:right;
}
.cs-num-lista span{font-size:var(--t-apoio);line-height:1.35;color:var(--pedra-media)}
.cs-num-lista b{font-weight:600;color:var(--pedra)}
.cs-num-fonte{margin-top:12px;font:500 .9375rem/1.4 var(--f-titulo);letter-spacing:.07em;text-transform:uppercase;color:var(--pedra-media)}

/* ───────── os passos: linhas de ficha, cada uma com a marca e o número em letra de escala ───────── */
.cs-passos{margin-top:clamp(44px,7vh,72px);border-top:1px solid var(--fio)}
.cs-passo{
  position:relative;display:grid;grid-template-columns:3.25rem minmax(0,1.2fr) minmax(0,1fr);
  gap:0 clamp(24px,3vw,48px);padding:clamp(18px,2.8vh,26px) 0;border-bottom:1px solid var(--fio);
}
.cs-passo > *{min-width:0}
/* a marca da escala no começo da linha */
.cs-passo::before{content:"";position:absolute;left:0;top:-1px;width:1px;height:14px;background:var(--ciano);opacity:.8}
.cs-passo-n{
  font:500 1.25rem/1 var(--f-titulo);letter-spacing:.08em;color:var(--ciano);
  font-variant-numeric:tabular-nums;padding-top:.3em;
}
.cs-passo-texto h3{font:500 clamp(1.5rem,2.1vw,1.9rem)/1.05 var(--f-titulo);letter-spacing:0;color:var(--pedra);text-wrap:balance}
.cs-passo-texto p{margin-top:8px;max-width:30em;font-size:var(--t-apoio);line-height:1.52;color:var(--pedra-media);text-wrap:pretty}
.cs-passo-texto q{quotes:"“" "”";font-style:italic;color:var(--pedra-forte)}
.cs-passo-prova{padding-top:.2em;padding-left:14px;border-left:1px solid var(--fio);max-width:28em;justify-self:end;width:100%}

/* ───────── coisas que ele escuta ───────── */
.cs-escuta{
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(24px,4vw,72px);align-items:center;
  margin-top:clamp(56px,8vh,96px);
}
.cs-escuta > *{min-width:0}
.cs-foto{margin:0;position:relative}
.cs-foto img{
  --m1:radial-gradient(ellipse 60% 58% at 58% 64%,#000 34%,rgb(0 0 0 / .55) 64%,transparent 100%);
  --m2:linear-gradient(180deg,transparent 0%,#000 22%,#000 100%);
  display:block;width:100%;aspect-ratio:900/912;object-fit:cover;
  -webkit-mask-image:var(--m1),var(--m2);mask-image:var(--m1),var(--m2);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}
.cs-escuta-titulo{font:inherit}
.cs-falas{position:relative;margin-top:clamp(14px,2.4vh,22px);min-height:3.2em;font:500 clamp(1.75rem,3vw,2.5rem)/1.12 var(--f-titulo)}
.cs-fala-paciente{
  margin:0;font-style:italic;color:var(--pedra);letter-spacing:.005em;text-wrap:balance;max-width:16em;
}
/* com JS, uma por vez, no mesmo lugar; a troca é uma dissolução curta */
.js .cs-falas.cs-roda .cs-fala-paciente{position:absolute;left:0;top:0;opacity:0;transform:translate3d(0,8px,0);transition:opacity .7s var(--ease),transform .7s var(--ease);pointer-events:none}
.js .cs-falas.cs-roda .cs-fala-paciente.cs-on{position:relative;opacity:1;transform:none;pointer-events:auto}
.cs-falas-controle{display:flex;align-items:center;gap:18px;margin-top:14px}
.cs-pontos{display:flex;gap:8px}
.cs-pontos li{position:relative;width:22px;height:1px;background:rgb(239 231 218 / .3)}
.cs-pontos li i{position:absolute;inset:0;background:var(--ciano);transform:scaleX(0);transform-origin:left}
.js .cs-falas.cs-roda ~ .cs-falas-controle .cs-pontos li.cs-on i{animation:cs-medir 4s linear both}
.js .cs-falas.cs-roda ~ .cs-falas-controle .cs-pontos.cs-parado li.cs-on i{animation-play-state:paused}
@keyframes cs-medir{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.cs-pausa{font-size:var(--t-mini);letter-spacing:.04em;color:var(--pedra-media);border-bottom:1px solid var(--fio);padding:4px 0;min-height:44px;display:inline-flex;align-items:center}
.cs-pausa:hover{color:var(--pedra)}
.cs-resposta{margin-top:clamp(20px,3vh,30px);padding-top:16px;border-top:1px solid var(--fio);max-width:34em}
.cs-resposta-fala{font-size:var(--t-apoio);line-height:1.5;color:var(--pedra-media)}
.cs-resposta-fala em{font-style:italic;color:var(--pedra);font-size:1.125em}

/* ───────── por vídeo ───────── */
.cs-pe{
  position:relative;display:grid;grid-template-columns:3.25rem minmax(0,1.2fr) minmax(0,1fr);gap:12px clamp(24px,3vw,48px);align-items:start;
  margin-top:clamp(48px,7vh,80px);padding-top:clamp(20px,3vh,28px);border-top:1px solid var(--fio);
}
.cs-pe > *{min-width:0}
.cs-pe::before{content:"";position:absolute;left:0;top:-1px;width:1px;height:14px;background:var(--pedra);opacity:.35}
.cs-pe-linha{grid-column:2;font-size:var(--t-apoio);line-height:1.5;color:var(--pedra-media);max-width:26em}
.cs-pe-linha strong{color:var(--pedra);font-weight:600}
.cs-pe .wf-segunda{grid-column:2;justify-self:start;margin-top:4px}
.cs-pe-prova{grid-column:3;grid-row:1 / span 2;padding-top:.2em;padding-left:14px;border-left:1px solid var(--fio);max-width:28em;justify-self:end;width:100%}

/* ───────── telas médias ───────── */
@media (max-width:1100px){
  .cs-passo,.cs-pe{grid-template-columns:3rem minmax(0,1fr)}
  .cs-passo-prova{grid-column:2;justify-self:start;margin-top:14px;padding-top:0}
  .cs-pe-prova{grid-column:2;grid-row:auto;justify-self:start;padding-top:0}
  .cs-pe .wf-segunda{grid-row:3}
}

/* ───────── celular ───────── */
@media (max-width:820px){
  .cs-grade{grid-template-columns:minmax(0,1fr);grid-template-areas:"cabeca" "numeros" "passos" "escuta" "pe";gap:0}
  .cs-cabeca .wf-titulo{max-width:none}
  .cs-numeros{justify-self:stretch;max-width:none;margin-top:28px;padding-left:16px}
  .cs-num{font-size:2.25rem}
  .cs-passos{margin-top:32px}
  .cs-passo,.cs-pe{grid-template-columns:2.5rem minmax(0,1fr);padding-top:16px;padding-bottom:18px}
  .cs-passo-n{font-size:1.0625rem}
  .cs-passo-texto h3{font-size:1.4375rem}
  .cs-passo-texto p{margin-top:6px;font-size:1rem}
  .cs-passo-prova{grid-column:2;justify-self:start;margin-top:10px;padding-top:0}
  .cs-escuta{grid-template-columns:minmax(0,1fr);gap:4px;margin-top:40px}
  .cs-foto{max-width:300px;margin:0 auto 0 0}
  .cs-falas{font-size:1.625rem;min-height:3.4em}
  .cs-pe{margin-top:36px;gap:10px 16px}
  .cs-pe-prova{grid-column:2;grid-row:auto;justify-self:start;padding-top:0}
  .cs-pe .wf-segunda{grid-row:3;margin-top:0}
}