/* ——— lote 4: cirurgia dermatológica + olheiras ———
   herói editorial de página, ficha técnica, lista de retirada,
   capítulo da pinta (noite quente), passos, vozes, régua de preços
   e o explorador "que tipo de olheira é a sua" */

/* ——— herói das páginas internas ——— */
.mm-pag-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(34px,5vw,80px);align-items:center}
.mm-h1-pag{margin:12px 0 0;max-width:15ch;font:italic 500 clamp(40px,4.9vw,66px)/1.07 var(--tg-f-titulo);letter-spacing:-.02em}
.mm-lead-pag{margin:20px 0 0;max-width:46ch;font-size:clamp(17px,1.45vw,20px);line-height:1.58}
.mm-reg-pag{margin:18px 0 0;font-size:13.5px;line-height:1.65;opacity:.78}
.mm-pag-acoes{display:flex;flex-direction:column;align-items:flex-start;margin-top:28px}
.mm-pag-acoes .mm-prova-nota{margin-top:12px}
.mm-pag-fig{justify-self:end;width:min(100%,390px);position:relative;isolation:isolate}
.mm-pag-halo{position:absolute;inset:-10% -20%;z-index:-1;pointer-events:none;background:radial-gradient(58% 52% at 50% 42%,rgba(238,203,151,.55),rgba(238,203,151,.22) 55%,rgba(238,203,151,0) 78%);filter:blur(14px)}
.mm-lead2{margin:20px 0 0;max-width:60ch;font-size:clamp(16.5px,1.4vw,19px);line-height:1.62}
.mm-cit-pag{margin-top:clamp(24px,3.5vw,40px)}
@media (max-width:900px){
  .mm-pag-hero-grid{display:flex;flex-direction:column}
  .mm-pag-txt{display:contents}
  .mm-pag-txt>.mm-eyebrow{order:0}
  .mm-pag-txt>.mm-h1-pag{order:1}
  .mm-pag-fig{order:2;align-self:center;width:min(74vw,340px);margin:10px 0 16px}
  .mm-olh-lado{order:2;width:100%;margin:12px 0 4px}
  .mm-pag-txt>.mm-lead-pag{order:3}
  .mm-pag-txt>.mm-reg-pag{order:4}
  .mm-pag-txt>.mm-pag-acoes{order:5;align-self:stretch;align-items:stretch}
  .mm-pag-acoes .mm-botao{width:100%}
  .mm-pag-acoes .mm-prova-extra{display:none}
}

/* ——— ficha técnica: quem pode operar ——— */
.mm-ficha{list-style:none;margin:clamp(26px,3.5vw,42px) 0 0;padding:0;max-width:780px;border-top:1.5px solid rgba(43,33,26,.22)}
.mm-ficha li{display:grid;grid-template-columns:168px 1fr;gap:6px 24px;padding:15px 0;border-bottom:1.5px solid rgba(43,33,26,.14);align-items:baseline}
.mm-ficha-k{font:600 11.5px/1.5 var(--tg-f-texto);letter-spacing:.12em;text-transform:uppercase;opacity:.62}
.mm-ficha-v{font:italic 500 clamp(19px,2.1vw,25px)/1.3 var(--tg-f-titulo)}
.mm-ficha-v small{display:block;margin-top:3px;font:400 13.5px/1.5 var(--tg-f-texto);opacity:.8}
@media (max-width:620px){.mm-ficha li{grid-template-columns:1fr;gap:2px;padding:13px 0}}

/* ——— a lista técnica do que sai ——— */
.mm-retira{list-style:none;margin:clamp(24px,3vw,36px) 0 0;padding:0;counter-reset:retira;max-width:880px}
.mm-retira li{counter-increment:retira;display:flex;gap:18px;padding:16px 0;border-top:1.5px solid rgba(43,33,26,.18)}
.mm-retira li:last-child{border-bottom:1.5px solid rgba(43,33,26,.18)}
.mm-retira li::before{content:"0" counter(retira);flex:none;width:30px;padding-top:5px;font:italic 500 15px/1 var(--tg-f-titulo);color:var(--tg-acento)}
.mm-retira b{display:block;font:italic 500 clamp(20px,2.3vw,27px)/1.2 var(--tg-f-titulo)}
.mm-retira p{margin:5px 0 0;font-size:15px;line-height:1.55;opacity:.85;max-width:58ch}
.mm-retira-nota{margin:18px 0 0;font-size:14.5px;line-height:1.6;opacity:.85}

/* ——— capítulo da pinta: a noite quente ——— */
.mm-pinta{background:var(--tg-tinta);color:var(--tg-fundo)}
.mm-pinta>.mm-fio path{stroke:var(--tg-apoio);opacity:.5}
.mm-pinta .mm-eyebrow{color:var(--tg-luz);opacity:.8}
.mm-pinta .mm-h2 em{color:var(--tg-luz)}
.mm-pinta .mm-cit{margin-top:clamp(22px,3vw,32px)}
.mm-pinta .mm-cit p{color:var(--tg-luz)}
.mm-pinta-p{margin:22px 0 0;max-width:54ch;opacity:.9}
.mm-pinta .mm-botao{margin-top:24px}
.mm-pinta-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(30px,4.5vw,72px);align-items:center}
.mm-pinta .mm-fig{justify-self:end;width:min(100%,330px)}
@media (max-width:860px){
  .mm-pinta-grid{grid-template-columns:1fr}
  .mm-pinta .mm-fig{justify-self:start;width:min(62vw,270px);margin-top:10px}
}

/* ——— passos numerados (percurso e preparo) ——— */
.mm-passos{list-style:none;margin:clamp(22px,3vw,34px) 0 0;padding:0;counter-reset:passo;max-width:620px}
.mm-passos li{counter-increment:passo;position:relative;padding:0 0 22px 56px}
.mm-passos li::before{content:"0" counter(passo);position:absolute;left:0;top:1px;font:italic 500 17px/1.3 var(--tg-f-titulo);color:var(--tg-acento)}
.mm-passos li::after{content:"";position:absolute;left:12px;top:28px;bottom:0;width:1.5px;background:rgba(43,33,26,.18)}
.mm-passos li:last-child{padding-bottom:0}
.mm-passos li:last-child::after{content:none}
.mm-passos b{display:block;font-weight:600;font-size:16.5px}
.mm-passos p{margin:4px 0 0;font-size:15px;line-height:1.55;opacity:.86}

/* ——— como é aqui: texto + tour ——— */
.mm-aqui-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:clamp(30px,4.5vw,72px);align-items:center}
.mm-aqui-grid .mm-fig{justify-self:end;width:min(100%,290px)}
.mm-aqui-grid video{width:100%;height:auto;display:block}
@media (max-width:860px){
  .mm-aqui-grid{grid-template-columns:1fr}
  .mm-aqui-grid .mm-fig{justify-self:start;width:min(56vw,240px);margin-top:6px}
}

/* ——— vozes: a noite fria do espelho ——— */
.mm-vozes{background:var(--tg-noite);color:var(--tg-fundo)}
.mm-vozes>.mm-fio path{stroke:var(--tg-luz);opacity:.5}
.mm-vozes .mm-eyebrow{color:var(--tg-luz);opacity:.8}
.mm-vozes .mm-h2{color:var(--tg-fundo)}
.mm-vozes .mm-h2 em{color:var(--tg-luz)}
.mm-vozes-nota{margin:16px 0 clamp(24px,3vw,34px);font-size:14.5px;color:var(--tg-luz);opacity:.9}
.mm-vozes-nota i{font-style:normal}

/* ——— régua de preços ——— */
.mm-custo-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(28px,4vw,64px);align-items:start}
.mm-precos{margin:0;padding:0}
.mm-precos>div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0;border-bottom:1.5px solid rgba(43,33,26,.2)}
.mm-precos>div:first-child{border-top:1.5px solid rgba(43,33,26,.2)}
.mm-precos dt{font:600 12px/1.5 var(--tg-f-texto);letter-spacing:.1em;text-transform:uppercase;opacity:.68}
.mm-precos dd{margin:0;font:italic 500 clamp(19px,2.1vw,25px)/1.2 var(--tg-f-titulo);font-variant-numeric:tabular-nums}
@media (max-width:860px){.mm-custo-grid{grid-template-columns:1fr}}

/* ——— papel de bula (nota Anvisa) ——— */
.mm-bula{position:relative;margin:8px 0 0;padding:clamp(24px,3vw,34px) clamp(20px,2.6vw,30px);background:var(--tg-fundo) url('/assets/img/arte-textura-bula.webp') center/cover;border-radius:6px;box-shadow:0 18px 34px -22px rgba(43,33,26,.5);transform:rotate(.6deg)}
.mm-bula-t{margin:0 0 10px;font:600 11.5px/1.4 var(--tg-f-texto);letter-spacing:.12em;text-transform:uppercase;opacity:.6}
.mm-bula p{margin:0;font-size:15px;line-height:1.6}

/* ——— explorador de olheiras (o palco da página) ——— */
.mm-olh-lado{position:relative;isolation:isolate}
.mm-olh{position:relative}
.mm-olh-stage{position:relative;width:min(100%,440px);margin:0 auto}
.mm-olh-svg{display:block;width:100%;height:auto;fill:none;stroke:var(--tg-tinta);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.mm-olh-svg .mm-olh-zona{fill:var(--tg-apoio);fill-opacity:.55;stroke:none}
.mm-olh-svg .mm-olh-iris{fill:var(--tg-tinta);stroke:none}
.mm-olh-svg .mm-olh-sulco{stroke-dasharray:2 7;opacity:.55}
.mm-olh-ponto{position:absolute;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:5px 14px 5px 8px;border:0;border-radius:999px;background:var(--tg-fundo);color:var(--tg-tinta);font:600 12px/1 var(--tg-f-texto);letter-spacing:.07em;text-transform:uppercase;cursor:pointer;box-shadow:0 6px 16px -8px rgba(43,33,26,.5);transition:background-color .2s ease,color .2s ease}
.mm-olh-ponto i{flex:none;width:11px;height:11px;border-radius:50%;background:var(--tg-acento)}
.mm-olh-ponto:hover{background:var(--tg-apoio)}
.mm-olh-ponto[aria-selected="true"]{background:var(--tg-tinta);color:var(--tg-fundo)}
.mm-olh-ponto[aria-selected="true"] i{background:var(--tg-luz)}
.mm-olh-paineis{margin:16px auto 0;width:min(100%,440px);min-height:104px}
.mm-olh-painel[hidden]{display:none}
.mm-olh-painel h3{margin:0 0 8px;font:italic 500 clamp(20px,2.2vw,25px)/1.2 var(--tg-f-titulo)}
.mm-olh-painel h3 em{color:var(--tg-acento)}
.mm-olh-painel p{margin:0;font-size:15px;line-height:1.6;opacity:.88}
.mm-olh-dica{margin:12px 0 0;text-align:center;font:600 10.5px/1.5 var(--tg-f-texto);letter-spacing:.13em;text-transform:uppercase;opacity:.55}
.mm-olh-peq{display:flex;align-items:center;gap:14px;width:min(100%,440px);margin:18px auto 0;padding-top:14px;border-top:1px solid rgba(43,33,26,.18)}
.mm-olh-peq .mm-fig{flex:none;width:62px}
.mm-olh-peq p{margin:0;font-size:13.5px;line-height:1.5;opacity:.85}
@media (prefers-reduced-motion:reduce){.mm-olh-ponto{transition:none}}

/* ——— quem cuida respira em areia entre capítulos creme ——— */
.mm-cuida{background:color-mix(in srgb,var(--tg-apoio) 58%,var(--tg-fundo))}