/* Textos no centro (pedido da Rafaella): as seções que tinham texto na lateral esquerda passam a ter tudo centralizado.
   "Sobre mim" e "Contato" continuam à esquerda. Vem por último para valer sobre os estilos anteriores. */

/* ---------- Galeria: títulos dos núcleos, respiro e crédito no centro da tela ---------- */
html .pin-nucleo,html .pin-breath,html .pin-credit{left:0 !important;right:0 !important;margin-left:auto !important;margin-right:auto !important;text-align:center}
html .pin-nucleo{width:min(34ch,88vw);max-width:none}
html .pin-breath{width:min(38ch,88vw);max-width:none}
html .pin-breath::before{left:-20%;right:-20%}
html .breath-row{justify-content:center}
html .pin-credit{width:min(52ch,86vw);max-width:none;bottom:clamp(64px,10vh,96px)}

/* ---------- Como posso ajudar: conteúdo dos cartões no centro ---------- */
html .mural-card{text-align:center}
html .mural-num{justify-content:center}
html .ajuda.aj2 .mural-big{margin-left:auto;margin-right:auto}
html .mural-card .md-q{margin-left:auto;margin-right:auto;max-width:30ch}
html .mural-card .mural-rodape{justify-content:center !important}
html .ajuda .mural-wa{margin-left:0}

/* ---------- Como funciona: a cena em cima e o texto da etapa embaixo, no centro (como no celular) ---------- */
@media (min-width:901px){
  html .pf-stage{grid-template-columns:1fr;grid-template-rows:auto auto;align-content:center;gap:clamp(10px,2.2vh,26px);
    padding:clamp(76px,10vh,100px) 20px clamp(92px,13vh,124px)}
  html .pf-vis{order:-1;height:clamp(220px,36svh,380px)}
  html .pf-card{transform-origin:50% 50%}
  html .pf-card.on{transform:scale(var(--pf-s,1))}
  html .pf-note.on{transform:scale(var(--pf-s,1)) rotate(-2deg)}
  html .pf-steps{order:1;height:clamp(220px,31svh,320px)}
  html .pf-step{max-width:40rem;margin:0 auto;text-align:center}
  html .pf-tag{margin-bottom:12px}
  html .pf-step h3{font-size:clamp(2.2rem,min(4.4vw,7svh),3.8rem);margin-bottom:12px}
  html .pf-step p:last-child{font-size:clamp(16px,min(1.3vw,2.4svh),19px)}
}

/* ---------- Check-in: textos do cartão da roda no centro ---------- */
html .roda-card{text-align:center}
html .rc-num,html .rc-q,html .rc-corpo{margin-left:auto;margin-right:auto}
html .rc-acoes{justify-content:center}

/* ---------- Terapia no aqui e agora: a figura fica presa em cima e os textos passam embaixo, no centro ---------- */
html .metodo-grid{grid-template-columns:1fr !important;gap:8px}
html .metodo-stage{position:sticky;top:72px;z-index:2;background:var(--ground-light);padding-block:10px;display:flex;justify-content:center}
html .metodo-sticky{position:relative;top:0;width:min(560px,100%,calc(36svh * 1.6));aspect-ratio:16/10;max-width:none}
html .metodo-list{text-align:center}
html .m-item,html .m-item:first-child{min-height:44vh;justify-content:center;align-items:center;padding-top:0}
html .metodo-list.spy .m-item{transform:translateY(10px)}
html .metodo-list.spy .m-item.is-active{transform:none}
html .m-item h3,html .m-item p{margin-left:auto;margin-right:auto}
html .m-item h3{max-width:18ch}
html .metodo-foot{flex-direction:column;justify-content:center;text-align:center}
html .metodo-foot p{margin-left:auto;margin-right:auto}

/* ---------- Dúvidas: alinhada à esquerda, como Sobre mim e Contato ---------- */
html .duvidas .wrap{text-align:left}
html .duvidas .eyebrow{justify-content:flex-start;margin-left:0;margin-right:0}
html .duvidas h2,html .duvidas .lede,html .faq{margin-left:0;margin-right:0}
html .faq{text-align:left}

/* Contato e Sobre mim ficam alinhados à esquerda (decisão da Rafaella) */
/* cada etapa tem um trecho maior de rolagem: a rolagem assenta numa etapa por vez (pausa.js) */
html .m-item,html .m-item:first-child{min-height:58vh}