/* ============================================================================
   NA TOCA v3 — abas sobrepostas dos cinco movimentos
   Substitui o carrossel horizontal: antes era preciso arrastar a página para
   o lado para ver os cinco. Agora as cinco abas ficam visíveis de uma vez,
   encaixadas uma sobre a outra como um cardápio de fichário — a ativa vem
   para a frente e abre o painel logo abaixo.

   Também corrige a faixa de fatos do hero, onde as palavras longas
   ("Fonoaudiologia", "Grupos reduzidos") transbordavam do card.
   ========================================================================== */

/* --- faixa de fatos: palavra longa não pode estourar o card -------------- */
.fato{min-width:0}
.fato b{overflow-wrap:anywhere;hyphens:auto;display:block;text-align:center}
.fato span{display:block;text-align:center;text-wrap:balance}
.fato--txt b{
  font-size:clamp(.92rem,1.15vw,1.16rem)!important;   /* cabe sem cortar */
  line-height:1.14;letter-spacing:-.01em;
}

/* --- as abas ------------------------------------------------------------- */
.etapas{position:relative;z-index:2}

.etapas__abas{
  display:flex;flex-wrap:wrap;align-items:flex-end;
  gap:0;                       /* o encaixe vem da margem negativa */
  padding-left:6px;
}
.aba{
  position:relative;
  margin-left:-14px;           /* a sobreposição */
  padding:13px 22px 15px;
  display:flex;align-items:baseline;gap:9px;
  border:1px solid rgba(255,255,255,.16);
  border-bottom:none;
  border-radius:16px 16px 0 0;
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(8px);
  color:rgba(255,255,255,.72);
  cursor:pointer;
  transition:background .25s var(--e,ease),color .25s,transform .25s var(--e,ease);
}
.aba:first-child{margin-left:0}
/* a da esquerda fica por cima da seguinte, como cartas abertas na mão */
.aba:nth-child(1){z-index:5} .aba:nth-child(2){z-index:4}
.aba:nth-child(3){z-index:3} .aba:nth-child(4){z-index:2}
.aba:nth-child(5){z-index:1}

.aba__n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;opacity:.7}
.aba__t{
  font-family:var(--cond);font-weight:700;font-size:15.5px;
  text-transform:uppercase;letter-spacing:.045em;white-space:nowrap;
}
.aba:hover{background:rgba(255,255,255,.12);color:#fff;transform:translateY(-2px)}

.aba.on{
  z-index:9;                                   /* a ativa sempre na frente */
  background:var(--osso,#FCF4E9);
  border-color:var(--osso,#FCF4E9);
  color:var(--carvao,#242424);
  transform:translateY(-4px);
  box-shadow:0 -8px 26px rgba(0,0,0,.28);
}
.aba.on .aba__n{color:var(--terra,#C54202);opacity:1;font-weight:500}
.aba:focus-visible{outline:3px solid var(--brasa,#FC8A4F);outline-offset:2px;z-index:10}

/* --- o painel que a aba abre --------------------------------------------- */
.etapas__palco{
  position:relative;
  border:1px solid var(--osso,#FCF4E9);
  border-radius:0 22px 22px 22px;
  background:var(--osso,#FCF4E9);
  color:var(--carvao,#242424);
  padding:clamp(26px,3.4vw,44px);
  min-height:210px;
  box-shadow:0 26px 60px rgba(0,0,0,.3);
}
.pn{animation:pn-entra .38s var(--e,ease) both}
.pn[hidden]{display:none}
@keyframes pn-entra{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

.pn__p{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--terra,#C54202);
}
.pn__d{
  margin-top:14px;font-size:clamp(1.02rem,1.35vw,1.24rem);line-height:1.62;
  max-width:64ch;color:var(--carvao,#242424);
}
.pn__c{
  margin-top:20px;padding-left:18px;
  border-left:4px solid var(--laranja,#F05002);
  font-family:var(--mao,'Shantell Sans',cursive);
  font-size:clamp(1rem,1.25vw,1.14rem);line-height:1.5;
  color:var(--cinza,#5C5854);max-width:58ch;
}

/* --- telas pequenas: as abas empilham, mas nada rola para o lado --------- */
@media(max-width:860px){
  .etapas__abas{padding-left:0;gap:6px}
  .aba{
    margin-left:0;flex:1 1 auto;justify-content:center;
    padding:11px 14px 12px;border-radius:13px 13px 0 0;
  }
  .aba__t{font-size:13.5px;white-space:normal;text-align:center}
  .aba.on{transform:none}
  .etapas__palco{border-radius:18px;padding:24px 20px}
}
@media(max-width:520px){
  .aba{flex:1 1 44%}
  .aba__t{font-size:12.5px}
}
@media(prefers-reduced-motion:reduce){
  .pn{animation:none}
  .aba,.aba.on{transition:none;transform:none}
}