/* perguntas (prefixo pg-) · "O que toda paciente pergunta." · fundo noite
   A medida vira um eixo vertical: cada pergunta é uma marca; a aberta acende em ciano. Sem âmbar. */

.pg{background:var(--noite);color:var(--pedra);overflow:hidden}
.pg > .wf-miolo{z-index:2}

/* ───────── a noite desta seção: duas manchas ───────── */
.pg-malha{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.pg-malha i{position:absolute;display:block;border-radius:50%;filter:blur(28px);will-change:transform}
.pg-malha i:nth-child(1){
  left:-26vmax;top:-14vmax;width:72vmax;height:62vmax;
  background:radial-gradient(closest-side in oklch,rgb(11 70 81 / .9) 0%,rgb(11 58 67 / .42) 48%,rgb(6 38 44 / 0) 100%);
  animation:pg-respira-1 34s ease-in-out infinite alternate;
}
.pg-malha i:nth-child(2){
  right:-20vmax;bottom:-26vmax;width:66vmax;height:58vmax;
  background:radial-gradient(closest-side in oklch,rgb(45 111 176 / .30) 0%,rgb(30 78 124 / .16) 50%,rgb(6 38 44 / 0) 100%);
  animation:pg-respira-2 28s ease-in-out infinite alternate;
}
@keyframes pg-respira-1{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(5vmax,4vmax,0) scale(1.1)}}
@keyframes pg-respira-2{from{transform:translate3d(0,0,0) scale(1.04)}to{transform:translate3d(-5vmax,-3vmax,0) scale(.94)}}
.pg-malha.wf-pausa i{animation-play-state:paused}

/* ───────── a grade: a coluna que fica e a lista ───────── */
.pg-grade{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:0 clamp(40px,6vw,104px);align-items:start}
.pg-fixo{position:sticky;top:clamp(24px,6vh,56px)}
.pg-cabeca .wf-apoio{margin-top:clamp(18px,3vh,28px)}
.pg-foto{margin:clamp(20px,3.4vh,32px) 0 0 calc(var(--margem) * -.5);width:min(100%,360px);aspect-ratio:1/1;pointer-events:none}
.pg-foto img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:50% 40%;
  --m1:radial-gradient(ellipse 50% 50% at 50% 48%,#000 30%,rgb(0 0 0 / .5) 64%,transparent 100%);
  --m2:linear-gradient(180deg,transparent 0%,rgb(0 0 0 / .5) 16%,#000 34%);
  -webkit-mask-image:var(--m1),var(--m2);mask-image:var(--m1),var(--m2);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}
.pg-mais{margin-top:clamp(0px,.6vh,6px);font-size:1rem;color:var(--pedra-media)}
.pg-mais .wf-segunda{margin-left:.35em}

/* ───────── a lista: o eixo e as marcas ───────── */
.pg-lista{position:relative;padding-left:0}
.pg-eixo{position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--pedra);opacity:.34}
.js .pg-eixo{transform:scaleY(0);transform-origin:50% 0;transition:transform 1.4s var(--ease-traco) .25s}
.js .pg-lista.wf-visto .pg-eixo{transform:scaleY(1)}

.pg-item{position:relative;border-bottom:1px solid var(--fio-fraco);transition:background-color .45s var(--ease)}
/* a aberta é o trecho aceso: superfície de petróleo e o trecho do eixo em ciano */
.pg-item[open]{background:linear-gradient(90deg,rgb(11 58 67 / .62) 0%,rgb(11 58 67 / .3) 60%,rgb(11 58 67 / 0) 100%)}
.pg-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--ciano);opacity:0;transform:scaleY(.2);transform-origin:50% 0;transition:opacity .4s,transform .6s var(--ease-traco);box-shadow:0 0 10px rgb(159 211 230 / .6)}
.pg-item[open]::before{opacity:1;transform:scaleY(1)}
/* marca menor no pé de cada item: o eixo lê como régua */
.pg-item::after{content:"";position:absolute;left:0;bottom:-1px;width:6px;height:1px;background:var(--pedra);opacity:.4}
.pg-item:first-child{border-top:1px solid var(--fio-fraco)}
.pg-q{
  position:relative;display:grid;grid-template-columns:34px minmax(0,1fr) 14px;gap:0 18px;align-items:baseline;
  padding:clamp(16px,2.4vh,22px) 0 clamp(16px,2.4vh,22px) 40px;cursor:pointer;list-style:none;
  -webkit-tap-highlight-color:transparent;
}
.pg-q::-webkit-details-marker{display:none}
.pg-q::marker{content:""}
.pg-num{
  position:relative;font:500 1.0625rem/1 var(--f-titulo);letter-spacing:.055em;color:var(--pedra-media);
  font-variant-numeric:tabular-nums;transition:color .35s;
}
/* a marca: do eixo até o número; a aberta cresce e acende */
.pg-num::before{
  content:"";position:absolute;left:-40px;top:50%;width:14px;height:1px;background:var(--pedra);opacity:.7;
  transition:width .4s var(--ease),background-color .4s,opacity .4s,box-shadow .4s;
}
.pg-h3{font:500 clamp(1.5rem,2.3vw,2.125rem)/1.06 var(--f-titulo);letter-spacing:0;color:var(--pedra);text-wrap:pretty;transition:color .3s}
.pg-q:hover .pg-h3{color:#fff}
.pg-marca{position:relative;width:14px;height:14px;align-self:center}
.pg-marca::before,.pg-marca::after{
  content:"";position:absolute;left:0;top:6.5px;width:14px;height:1px;background:var(--pedra-media);
  transition:transform .4s var(--ease),background-color .35s;
}
.pg-marca::after{transform:rotate(90deg)}
.pg-item[open] .pg-marca::after{transform:rotate(0)}
.pg-item[open] .pg-marca::before,.pg-item[open] .pg-marca::after{background:var(--ciano)}
.pg-item[open] .pg-num{color:var(--ciano)}
.pg-item[open] .pg-num::before{width:26px;background:var(--ciano);opacity:1;box-shadow:0 0 10px rgb(159 211 230 / .7)}
.pg-item[open] .pg-h3{color:#fff}

.pg-r{padding:0 40px clamp(22px,3.2vh,30px) 92px}
.pg-r p{max-width:34em;text-wrap:pretty;font-size:var(--t-apoio);line-height:1.52;color:var(--pedra-media)}
.pg-r p + p{margin-top:.8em}
.pg-r q{quotes:"“" "”";font-style:italic;color:var(--pedra-forte)}
.pg-r p.wf-fala{margin-top:1em;font-size:1rem;line-height:1.4;color:var(--pedra-forte);padding-left:16px;border-left:1px solid rgb(239 231 218 / .34)}
.pg-r p.wf-legenda{margin-top:6px;font-size:var(--t-mini);line-height:1.35;color:var(--pedra-baixa);padding-left:17px}
.pg-r .wf-legenda + p{margin-top:1em}
.pg-prova{margin-top:1em;padding-left:16px;border-left:1px solid rgb(239 231 230 / .34)}
.pg-prova .wf-fala{font-size:1rem;line-height:1.4;color:var(--pedra-forte)}
.pg-prova .wf-legenda{margin-top:4px;font-size:var(--t-mini)}
.pg-r p:first-child.wf-fala{margin-top:0}
.pg-link{color:var(--pedra);text-decoration:none;border-bottom:1px solid rgb(159 211 230 / .55);transition:border-color .25s}
.pg-link:hover{border-bottom-color:var(--pedra)}
/* a resposta chega: um gesto curto, por abertura */
@keyframes pg-chegar{from{opacity:0;transform:translate3d(0,-6px,0)}to{opacity:1;transform:none}}
.pg-item[open] .pg-r{animation:pg-chegar .5s var(--ease) both}

/* ───────── celular e tablet ───────── */
@media (max-width:820px){
  .pg-grade{grid-template-columns:minmax(0,1fr);gap:0}
  .pg-fixo{position:static;display:grid;grid-template-columns:minmax(0,1fr) 38%;gap:0 16px;align-items:center}
  .pg-fixo > .wf-rotulo,.pg-fixo > .wf-titulo,.pg-fixo > .wf-apoio{grid-column:1 / -1}
  .pg-foto{grid-column:2;grid-row:4;width:100%;max-width:170px;aspect-ratio:1/1;justify-self:end;margin:8px -8px 0 0}
  .pg-foto img{
    object-position:50% 30%;
    --m1:radial-gradient(ellipse 50% 50% at 50% 50%,#000 36%,rgb(0 0 0 / .5) 68%,transparent 100%);
    --m2:none;
    -webkit-mask-image:var(--m1);mask-image:var(--m1);
  }
  .pg-mais{grid-column:1;grid-row:4;margin-top:8px;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
  .pg-mais .wf-segunda{display:inline-flex;align-items:center;min-height:48px;margin-left:0;padding:0}
  .pg-lista{margin-top:clamp(20px,4vh,36px);margin-inline:calc(var(--margem) * -1);padding-inline:var(--margem)}
  .pg-eixo,.pg-item::before{left:calc(var(--margem) - 2px)}
  .pg-item::after{left:calc(var(--margem) - 2px)}
  .pg-item[open]{margin-inline:calc(var(--margem) * -1);padding-inline:var(--margem)}
  .pg-item[open]::before,.pg-item[open]::after{left:calc(var(--margem) - 2px)}
  .pg-q{grid-template-columns:28px minmax(0,1fr) 14px;gap:0 12px;padding:18px 0 18px 28px}
  .pg-num::before{left:-28px;width:10px}
  .pg-item[open] .pg-num::before{width:18px}
  .pg-h3{font-size:clamp(1.375rem,5.6vw,1.75rem)}
  .pg-r{padding:0 0 22px 28px}
  .pg-r p{font-size:1rem}
}
@media (max-width:420px){
  .pg-fixo{grid-template-columns:minmax(0,1fr) 42%}
}
@media (min-width:600px) and (max-width:820px){
  .pg-fixo{grid-template-columns:minmax(0,1fr) 220px}
  .pg-foto{max-width:220px}
}