/* Seção 2 · como — "A primeira consulta": a proveta presa na tela enche com a rolagem (classes co-) */
.co-secao{--co-nivel:10%;--co-curva:cubic-bezier(.3,.8,.2,1);--co-ameixa-texto:color-mix(in oklch, var(--ameixa) 55%, var(--ameixa-escura))} /* ameixa para texto miúdo: AA sobre a parte mais escura da malha */
.co-cabeca{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:14px 56px;align-items:end;margin-bottom:clamp(36px,5vw,64px)}
.co-cabeca .wf-olho{grid-column:1/-1}
.co-cabeca .wf-titulo em{display:block}
.co-intro{margin-bottom:10px}

.co-corpo{display:grid;grid-template-columns:minmax(240px,.38fr) minmax(0,1fr);column-gap:clamp(32px,5vw,80px);align-items:start}

/* a medida (proveta + marcas), presa na tela */
.co-medida{position:sticky;top:calc(var(--nav-h) + 36px);display:grid;grid-template-columns:48px auto;column-gap:22px;height:min(54vh,470px);margin:0 0 0 clamp(0px,3vw,40px)}
.co-proveta{position:relative;height:100%;width:48px}
.co-tubo{position:absolute;inset:0 0 10px 0;border-radius:8px 8px 20px 20px;background:var(--vidro);box-shadow:var(--vidro-borda);overflow:hidden}
.co-tubo::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;border-radius:8px 8px 0 0;background:rgba(13,50,70,.1);box-shadow:inset 0 -1px 0 rgba(13,50,70,.25)}
.co-liquido{position:absolute;left:3px;right:3px;bottom:3px;height:var(--co-nivel);border-radius:0 0 18px 18px;background:var(--liquido);transition:height 2.4s var(--co-curva)}
.co-liquido::after{content:"";position:absolute;left:4px;top:8px;bottom:8px;width:6px;border-radius:4px;background:rgba(255,255,255,.35)}
.co-ticks-dentro{position:absolute;left:-3px;right:-3px;bottom:-3px;height:var(--co-altura-tubo,540px);width:auto;pointer-events:none}
.co-ticks-dentro line{stroke:#fff;stroke-opacity:.7}
.co-menisco{position:absolute;left:-2px;right:-2px;top:-5px;height:10px;border-radius:50%;background:color-mix(in oklch, var(--ameixa-clara) 75%, white);opacity:.95;box-shadow:0 1px 0 rgba(255,255,255,.7)}
.co-ticks{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.co-brilho{position:absolute;left:5px;top:10px;bottom:16px;width:5px;border-radius:4px;background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.2));filter:blur(.6px)}
.co-pe{position:absolute;left:50%;bottom:0;width:84px;height:10px;transform:translateX(-50%);border-radius:50%;background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(13,50,70,.12));box-shadow:0 1px 0 rgba(13,50,70,.25), 0 10px 18px -8px rgba(13,50,70,.35)}
/* camada sem recorte, com a mesma geometria do tubo: a etiqueta anda com o nível */
.co-sobre{position:absolute;inset:0 0 10px 0;pointer-events:none}
.co-aqui{position:absolute;right:calc(100% + 14px);bottom:calc(3px + var(--co-nivel));transform:translateY(50%);font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--co-ameixa-texto);white-space:nowrap;transition:bottom 2.4s var(--co-curva)}
.co-aqui::after{content:"";position:absolute;right:-12px;top:50%;width:10px;height:1px;background:var(--ameixa)}

/* marcas ao lado do tubo: alinhadas ao nível de cada passo (--p = fração a partir do fundo) */
.co-marcas{list-style:none;position:relative;height:calc(100% - 10px)}
.co-marcas li{position:absolute;left:0;bottom:calc(var(--p) * 100%);transform:translateY(50%);display:flex;align-items:baseline;gap:10px;white-space:nowrap;opacity:0;translate:-8px 0;transition:opacity .6s, translate .6s}
.co-medida.wf-visivel .co-marcas li{opacity:1;translate:0 0}
.co-medida.wf-visivel .co-marcas li:nth-child(5){transition-delay:.5s}
.co-medida.wf-visivel .co-marcas li:nth-child(4){transition-delay:.66s}
.co-medida.wf-visivel .co-marcas li:nth-child(3){transition-delay:.82s}
.co-medida.wf-visivel .co-marcas li:nth-child(2){transition-delay:.98s}
.co-medida.wf-visivel .co-marcas li:nth-child(1){transition-delay:1.14s}
.co-marcas li::before{content:"";position:absolute;left:-30px;top:50%;width:18px;height:1px;background:var(--petroleo);opacity:.35;transition:opacity .5s, background .5s}
.co-marcas b{font-family:var(--mono);font-weight:500;font-size:11px;color:var(--tinta-suave);letter-spacing:.08em;transition:color .5s}
.co-marcas span{font-family:var(--serifa);font-size:clamp(15px,1.2vw,18px);color:var(--tinta-suave);transition:color .5s}
.co-marcas .co-acesa b{color:var(--co-ameixa-texto)}
.co-marcas .co-acesa span{color:var(--petroleo)}
.co-marcas .co-acesa::before{opacity:.8;background:var(--ameixa)}
.co-marcas .co-atual span{font-weight:500}
.co-nivel{position:absolute;left:0;top:calc(100% + 16px);font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--tinta-suave);text-transform:uppercase;white-space:nowrap}
.co-nivel b{font-weight:500;color:var(--co-ameixa-texto);font-size:13px}
.co-nivel-aqui{display:none}

/* os passos: cada um é uma grade (texto à esquerda, a voz dela à direita) */
.co-passos{list-style:none}
.co-passo{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);column-gap:clamp(28px,4vw,56px);align-content:center;padding:clamp(28px,4vh,44px) 0 clamp(28px,4vh,44px) 30px;min-height:32vh;border-top:1px solid rgba(13,50,70,.14)}
.co-passo:first-child{border-top:0;padding-top:0;min-height:0;padding-bottom:clamp(40px,7vh,72px)}
.co-passo-cabeca{position:relative;grid-column:1/-1;display:flex;align-items:baseline;gap:16px;margin-bottom:14px}
.co-passo-cabeca::before{content:"";position:absolute;left:-30px;top:.6em;width:7px;height:7px;border-radius:50%;background:transparent;box-shadow:inset 0 0 0 1px rgba(13,50,70,.35);transition:background .5s, box-shadow .5s}
.co-passo.co-ativo .co-passo-cabeca::before{background:var(--ameixa);box-shadow:0 0 0 4px color-mix(in oklab, var(--ameixa) 18%, transparent)}
.co-num{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--tinta-suave);transition:color .5s}
.co-passo.co-ativo .co-num{color:var(--co-ameixa-texto)}
.co-passo .wf-h3{color:var(--tinta-suave);transition:color .5s}
.co-passo.co-ativo .wf-h3{color:var(--petroleo)}
.co-passo > .wf-texto{grid-column:1;max-width:46ch}
.co-voz{grid-column:2;padding-left:18px;border-left:1px solid var(--ameixa-clara);max-width:44ch;align-self:start}
.co-voz .wf-citacao{font-size:clamp(16px,1.25vw,19px)}
.co-voz--paciente{border-left-color:rgba(13,50,70,.22)}
.co-voz + .co-voz{margin-top:16px}

/* fecho: faixa de vidro de borda a borda */
.co-fecho{display:grid;grid-template-columns:minmax(0,1.3fr) auto;gap:24px clamp(32px,5vw,80px);align-items:center;margin-top:clamp(48px,7vh,80px);padding:clamp(28px,3vw,44px) clamp(24px,3.5vw,52px);border-radius:18px;background:var(--vidro);box-shadow:var(--vidro-borda)}
.co-fecho-voz .wf-citacao{font-size:clamp(19px,1.8vw,26px);color:var(--petroleo);max-width:30ch}
.co-acoes{display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-self:end}

@media (max-width:1100px){
  .co-corpo{grid-template-columns:minmax(200px,.36fr) minmax(0,1fr)}
  .co-medida{margin-left:0}
  .co-passo{grid-template-columns:1fr}
  .co-passo > .wf-texto,.co-voz{grid-column:1}
  .co-voz{margin-top:16px}
  .co-fecho{grid-template-columns:1fr}
  .co-acoes{justify-self:start}
}
@media (max-width:760px){
  .co-cabeca{grid-template-columns:1fr;gap:16px;margin-bottom:28px}
  .co-corpo{display:block}
  /* a proveta vira barra horizontal presa no topo da seção */
  .co-medida{position:sticky;top:var(--nav-h);z-index:5;display:block;height:auto;margin:0 calc(-1 * var(--gutter)) 24px;padding:14px var(--gutter) 30px;background:color-mix(in oklab, var(--papel) 88%, transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(13,50,70,.08)}
  .co-proveta{height:26px;width:100%;margin-top:22px}
  .co-pe,.co-brilho,.co-ticks,.co-ticks-dentro,.co-liquido::after,.co-sobre{display:none}
  .co-tubo{inset:0;border-radius:13px}
  .co-tubo::before{display:none}
  .co-liquido{left:3px;right:auto;top:3px;bottom:3px;height:auto;width:var(--co-nivel);border-radius:10px 0 0 10px;transition:width 2.2s var(--co-curva)}
  .co-menisco{top:-2px;bottom:-2px;left:auto;right:-6px;width:12px;height:auto}
  .co-marcas{position:absolute;left:var(--gutter);right:var(--gutter);top:14px;height:16px}
  .co-marcas li{bottom:auto;top:0;left:calc(var(--p) * 100%);transform:translateX(-50%);gap:0}
  .co-marcas li::before,.co-marcas span{display:none}
  .co-marcas b{font-size:10.5px}
  .co-nivel{position:absolute;right:var(--gutter);left:auto;top:auto;bottom:8px;font-size:10.5px}
  .co-nivel-aqui{display:inline;color:var(--co-ameixa-texto)}
  .co-nivel-passo{display:none}
  .co-leitura{padding-top:18px}
  .co-passo{grid-template-columns:1fr;min-height:0;padding:26px 0 26px 22px}
  .co-passo:first-child{padding-bottom:26px}
  .co-passo > .wf-texto,.co-voz{grid-column:1;max-width:none}
  .co-passo-cabeca::before{left:-22px;top:.5em}
  .co-fecho{margin-top:36px;padding:24px 20px}
}