/* ——— LOTE 1 · páginas de serviço (tricologia, toxina) ———
   formas novas do lote: hero interior com palco/figura, dupla editorial,
   lista fina, passos numerados abertos, cards de bula, palco 3D. */

/* hero interior — texto à esquerda, objeto à direita */
.mm-hero-pag{padding-bottom:clamp(56px,8vw,96px)}
.mm-hero-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(36px,5vw,80px);align-items:center}
.mm-h1-pag{margin:14px 0 0;max-width:14ch;font:italic 500 clamp(40px,5.6vw,76px)/1.06 var(--tg-f-titulo);letter-spacing:-.02em}
.mm-lead{margin:20px 0 0;max-width:46ch;font-size:clamp(17px,1.6vw,20px);line-height:1.55}
.mm-reg{margin:14px 0 0;font-size:13.5px;opacity:.78}
.mm-acoes{margin:26px 0 0;display:flex;flex-wrap:wrap;gap:12px}
.mm-hero-fig{width:min(100%,420px);justify-self:end}
.mm-hero-txt{min-width:0}

/* dupla editorial — rótulo à esquerda, conteúdo à direita */
.mm-dupla{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(28px,4vw,64px);align-items:start}
.mm-dupla p{margin:0 0 14px;max-width:62ch}
.mm-h2-largo{max-width:26ch}
.mm-pos{margin-top:18px;font:italic 500 15.5px/1.5 var(--tg-f-titulo);color:var(--tg-acento)}

/* par — texto + figura-espelho, nos dois sentidos */
.mm-par{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:clamp(30px,4.5vw,72px);align-items:center;margin-top:clamp(26px,3.5vw,44px)}
.mm-par .mm-fig{justify-self:end;width:min(100%,360px)}
.mm-par--inv{grid-template-columns:minmax(0,.82fr) minmax(0,1fr)}
.mm-par--inv .mm-fig{justify-self:start}
.mm-par .mm-cit p{font-size:clamp(26px,3.2vw,38px)}

/* lista fina — o que a tricologia investiga */
.mm-lista{list-style:none;margin:16px 0 0;padding:0;border-top:1.5px solid rgba(43,33,26,.22);max-width:56ch}
.mm-lista li{padding:9px 0;border-bottom:1px solid rgba(43,33,26,.16);font-size:15.5px}

/* passos abertos — sequência numerada, nunca cartão */
.mm-passos{list-style:none;margin:clamp(26px,3.5vw,40px) 0 0;padding:0;border-top:1.5px solid rgba(43,33,26,.24)}
.mm-passos li{display:grid;grid-template-columns:clamp(52px,6vw,76px) minmax(0,1fr);gap:clamp(16px,2.5vw,30px);padding:clamp(16px,2.4vw,24px) 0;border-bottom:1.5px solid rgba(43,33,26,.18);align-items:start}
.mm-passos .mm-num{font:italic 500 clamp(30px,3.6vw,46px)/1 var(--tg-f-titulo);color:var(--tg-acento)}
.mm-passos h3{margin:0 0 6px;font:600 16px/1.35 var(--tg-f-texto)}
.mm-passos p{margin:0;max-width:60ch;font-size:15.5px}
.mm-pre-sub{margin:16px 0 0;max-width:34ch;font-size:14.5px;opacity:.75}

/* capítulo em cor cheia — noite (grafite-vidro) e acento (vermelho) */
.mm-cap--noite{background:var(--tg-noite);color:var(--tg-fundo)}
.mm-cap--noite .mm-eyebrow{color:var(--tg-luz);opacity:.85}
.mm-cap--noite .mm-h2 em{color:var(--tg-luz)}
.mm-cap--noite > .mm-fio path{stroke:var(--tg-luz);opacity:.4}
.mm-cap--noite .mm-fig-nota{color:var(--tg-fundo);opacity:.62}
.mm-cap--noite .mm-link{color:var(--tg-luz)}
.mm-cap--acento{background:var(--tg-acento);color:var(--tg-fundo)}
.mm-cap--acento .mm-eyebrow{color:var(--tg-fundo);opacity:.85}
.mm-cap--acento .mm-h2 em{color:var(--tg-luz)}
.mm-cap--acento > .mm-fio path{stroke:var(--tg-fundo);opacity:.5}
.mm-cap--acento .mm-cit cite{color:var(--tg-luz);opacity:.92}
.mm-regra{max-width:820px;margin:0 auto;text-align:center}
.mm-regra-sub{margin:24px auto 0;max-width:56ch;font-size:16.5px;line-height:1.6;opacity:.94}

/* cards de bula — papel de medicamento sobre a noite */
.mm-bula{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:clamp(18px,2.6vw,30px);margin-top:clamp(28px,4vw,44px)}
.mm-bula-card{position:relative;padding:clamp(24px,3vw,36px);background:#FBF4E8 url("/assets/img/arte-textura-bula.webp") center/cover;color:var(--tg-tinta);box-shadow:0 18px 40px -22px rgba(0,0,0,.55)}
.mm-bula-rotulo{margin:0 0 12px;font:600 10.5px/1.4 var(--tg-f-texto);letter-spacing:.14em;text-transform:uppercase;opacity:.65}
.mm-bula-num{display:block;margin:0 0 10px;font:italic 500 clamp(36px,4.2vw,54px)/1 var(--tg-f-titulo);color:var(--tg-acento)}
.mm-bula-num small{font-size:.42em;letter-spacing:.02em}
.mm-bula-txt{margin:0;font-size:15.5px;line-height:1.62}
.mm-bula-fonte{display:block;margin-top:16px;font:600 11px/1.4 var(--tg-f-texto);letter-spacing:.12em;text-transform:uppercase;opacity:.58}

/* palco 3D — a bandeja roxa; a altura mora aqui, o motor faz o resto */
.mm-palco-caixa{margin:0}
.mm-palco{position:relative;width:100%;height:clamp(340px,55vh,540px);background:var(--tg-apoio);overflow:hidden}
.mm-palco .k-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mm-palco .k-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:pan-y}
.mm-palco [data-k-ancora]{position:absolute;z-index:3;transform:translate(-50%,-120%);display:inline-flex;align-items:center;gap:7px;padding:7px 12px;background:var(--tg-tinta);color:var(--tg-fundo);font:600 11px/1 var(--tg-f-texto);letter-spacing:.1em;text-transform:uppercase;border-radius:999px;white-space:nowrap;pointer-events:none;box-shadow:0 6px 18px -8px rgba(16,27,34,.6)}
.mm-palco [data-k-ancora]::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--tg-luz)}

/* quem cuida recebe faixa de apoio para não repetir o creme vizinho */
section.mm-cuida[data-secao="quem-cuida"]{background:color-mix(in srgb,var(--tg-apoio) 55%,var(--tg-fundo))}

/* celular — projeto próprio: empilha com medida, sem apertar */
@media (max-width:900px){
  .mm-hero-grid{grid-template-columns:1fr;gap:34px}
  .mm-h1-pag{font-size:clamp(38px,10.5vw,54px);max-width:12ch}
  .mm-hero-fig{justify-self:center;width:min(76vw,330px)}
  .mm-palco{height:min(66vw,380px)}
}
@media (max-width:820px){
  .mm-dupla{grid-template-columns:1fr;gap:20px}
  .mm-par,.mm-par--inv{grid-template-columns:1fr;gap:26px}
  .mm-par .mm-fig,.mm-par--inv .mm-fig{justify-self:center;width:min(70vw,300px)}
  .mm-passos li{grid-template-columns:44px minmax(0,1fr);gap:14px}
}

/* movimento reduzido — estado final parado */
@media (prefers-reduced-motion: reduce){
  .mm-palco [data-k-ancora]{transform:translate(-50%,-120%)}
}
