/* =========================================================
   SEÇÃO 4: O MÉTODO (fases, pilares, rótulo, massagem)
   ========================================================= */
.fases{max-width:900px;margin:0 auto 46px}
.fases-bt{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding-top:22px}
.fases-bt::before{content:"";position:absolute;left:12%;right:12%;top:8px;height:5px;border-radius:5px;background:var(--c-linha)}
.fases-bt .enche-f{position:absolute;left:12%;top:8px;height:5px;border-radius:5px;background:var(--c-escuro);width:0;transition:width .7s var(--ease)}
.fase{position:relative;display:grid;justify-items:center;gap:4px;min-height:84px;padding:10px 4px;border:0;border-radius:18px;background:transparent;color:#000;font-weight:700}
.fase::before{content:"";position:absolute;top:-22px;left:50%;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:#fff;border:4px solid var(--c-linha);transition:background .3s,border-color .3s,transform .4s var(--mola)}
.fase.on::before{background:var(--c-acido);border-color:var(--c-escuro);transform:scale(1.25)}
.fase b{font-family:var(--f-titulo);font-weight:400;font-size:clamp(18px,4.6vw,26px);line-height:1}
.fase span{font-size:16px}
@media(max-width:599px){.fase span{display:none}.fase{min-height:60px}}
.fase.on{background:var(--c-escuro);color:#fff}
.fase.on b{color:var(--c-acido)}
.painel-f{margin-top:14px;border-radius:26px;background:var(--c-escuro);color:#fff;padding:22px 20px;min-height:250px}
.painel-f h3{font-size:clamp(26px,6vw,36px);color:var(--c-acido)}
.painel-f .foco{font-size:20px;font-weight:700;margin:6px 0 16px}
.barras{display:grid;gap:12px}
.barra-q{display:grid;gap:4px}
.barra-q .rot{display:flex;justify-content:space-between;font-size:18px;font-weight:700}
.barra-q .trilho{height:14px;border-radius:14px;background:var(--c-escuro-3);overflow:hidden}
.barra-q .trilho i{display:block;height:100%;width:0;border-radius:14px;background:var(--c-acido);transition:width 1.1s var(--ease)}
.painel-f .fonte{color:var(--c-suave-esc)}
.painel-f.troca{animation:troca-p .5s var(--ease)}
@keyframes troca-p{from{opacity:0;transform:translateY(12px)}}
.pilares{position:relative;max-width:820px;margin:0 auto;display:grid;gap:34px;padding-left:54px}
.pilares::before{content:"";position:absolute;left:21px;top:10px;bottom:10px;width:8px;border-radius:8px;background:var(--c-linha)}
.pilares .serum{position:absolute;left:21px;top:10px;width:8px;border-radius:8px;height:0;background:linear-gradient(var(--c-acido),var(--c-acido-esc))}
.pilares .serum::after{content:"";position:absolute;left:50%;bottom:-14px;width:20px;height:26px;margin-left:-10px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:var(--c-acido-esc);box-shadow:0 0 0 3px var(--c-escuro)}
.pilar{position:relative}
.pilar .num{position:absolute;left:-54px;top:0;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:#fff;border:4px solid var(--c-linha);font-family:var(--f-titulo);font-size:22px;transition:background .4s,border-color .4s,transform .5s var(--mola);z-index:2}
.pilar.ativa .num{background:var(--c-acido);border-color:var(--c-escuro);transform:scale(1.1)}
.pilar h3{font-size:clamp(26px,6vw,36px);margin-bottom:6px}
.pilar p{font-size:20px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chips span{font-size:17px;font-weight:700;padding:6px 12px;border-radius:999px;background:var(--c-escuro);color:#fff}
.pilar{opacity:.35;transition:opacity .6s}
.pilar.ativa{opacity:1}
.rotulo-sec{max-width:900px;margin:56px auto 0;display:grid;gap:22px;align-items:center}
.frasco-r{position:relative;width:200px;margin:0 auto}
.frasco-r svg{width:100%;height:auto}
.frasco-r .lupa{position:absolute;width:76px;height:76px;border-radius:50%;border:6px solid var(--c-escuro);background:rgba(var(--rgb-acido),.35);left:60%;top:48%;transition:left .6s var(--ease),top .6s var(--ease);pointer-events:none}
.frasco-r .lupa::after{content:"";position:absolute;right:-26px;bottom:-14px;width:34px;height:10px;border-radius:6px;background:var(--c-escuro);transform:rotate(40deg)}
.ativos-bt{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.ativos-bt button{min-height:52px;padding:0 16px;border-radius:999px;border:3px solid var(--c-escuro);background:#fff;color:#000;font-weight:700;font-size:18px;transition:background .25s,color .25s,transform .15s}
.ativos-bt button.on{background:var(--c-escuro);color:var(--c-acido)}
.ativos-bt button:active{transform:scale(.94)}
.decifra{margin-top:16px;border-radius:22px;background:var(--c-escuro);color:#fff;padding:18px 18px;min-height:150px}
.decifra b{display:block;font-family:var(--f-titulo);font-weight:400;font-size:24px;color:var(--c-acido);margin-bottom:6px}
.decifra .uso{display:inline-flex;gap:8px;margin-top:10px;font-size:17px;font-weight:700;background:var(--c-escuro-2);padding:6px 12px;border-radius:12px}
.decifra.troca{animation:troca-p .45s var(--ease)}