/* ——— HERO — versão A imersiva: a foto e a luz dominam ——— */
.mm-hero{
  position:relative;min-height:100svh;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,46%) minmax(0,54%);
  align-items:center;
  padding:96px clamp(20px,4vw,64px) 48px;
  background:var(--tg-fundo);
}

/* luz champagne: a janela das fotos virada aura (tipo "luz", família quente) */
.mm-hero-luz{
  position:absolute;z-index:0;
  right:-6%;top:2%;width:62%;height:96%;
  background:radial-gradient(closest-side,rgba(238,203,151,.95),rgba(238,203,151,.45) 52%,rgba(238,203,151,0) 74%);
  filter:blur(56px);
  transform:translate(calc((var(--k-mx,.5) - .5)*26px),calc((var(--k-my,.5) - .5)*18px)) scale(.94);
  animation:mmLuz .8s ease .22s both;
  pointer-events:none;
}
.mm-hero-luz::after{ /* grão fino sobre o degradê grande */
  content:"";position:absolute;inset:0;
  background:url('/assets/img/arte-grao-filme.webp');background-size:420px;
  opacity:.35;mix-blend-mode:overlay;
}
@keyframes mmLuz{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(.94)}}

/* ——— bloco de texto ——— */
.mm-hero-texto{position:relative;z-index:3;max-width:640px}
.mm-eyebrow-hero{margin-bottom:14px}
.mm-h1{
  margin:0 0 18px;
  font:italic 500 clamp(64px,6.1vw,96px)/1 var(--tg-f-titulo);
  font-style:italic;letter-spacing:-.015em;color:var(--tg-tinta);
}
.mm-h1 .mm-linha{display:block;white-space:nowrap}
.mm-h1 .mm-p{
  display:inline-block;transform-origin:0 100%;
  animation:mmPalavra .55s cubic-bezier(.22,.8,.3,1) var(--d,.5s) both;
}
@keyframes mmPalavra{
  from{opacity:0;transform:translateY(.38em) rotate(3deg)}
  to{opacity:1;transform:none}
}
.mm-lead{
  margin:0 0 14px;max-width:44ch;
  font-size:clamp(16px,1.25vw,18.5px);line-height:1.55;
}
.mm-lead em{font-style:normal;color:var(--tg-acento);font-weight:500}
.mm-registro{
  margin:0 0 22px;font-size:13.5px;line-height:1.5;opacity:.78;
  font-variant-numeric:tabular-nums;
}
.mm-br-movel{display:none}
.mm-acoes{display:flex;flex-direction:column;gap:12px;align-items:flex-start;
  animation:mmDesce .5s ease .85s both}
.mm-prova{margin:0;font-size:13.5px;line-height:1.45;font-variant-numeric:tabular-nums}
.mm-prova i{font-style:normal;color:var(--tg-acento)}
@keyframes mmDesce{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ——— o espelho ——— */
.mm-espelho{
  position:relative;z-index:2;justify-self:center;
  height:min(80svh,780px);aspect-ratio:720/1080;
  margin-left:-3%;
}
.mm-espelho-caixa{position:absolute;inset:0}
.mm-espelho-mascara{
  position:absolute;inset:0;
  filter:drop-shadow(0 34px 60px rgba(43,33,26,.20)); /* sombra na tinta, nunca preta */
}
.mm-espelho-foto,.mm-espelho-canvas{
  position:absolute;inset:0;width:100%;height:100%;display:block;
}
.mm-espelho-foto{object-fit:cover;object-position:50% 0;
  animation:mmFoto .6s ease .2s both}
.mm-espelho-canvas{touch-action:pan-y}
@keyframes mmFoto{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:scale(1)}}
.mm-moldura{position:absolute;inset:-6px;width:calc(100% + 12px);height:calc(100% + 12px);overflow:visible;pointer-events:none}
.mm-moldura-traco{
  stroke-dasharray:1;stroke-dashoffset:0;
  animation:mmTraco .5s ease-out .05s both;
}
@keyframes mmTraco{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.mm-espelho-legenda{
  display:none;margin:10px 0 0;text-align:center;
  font:italic 400 13px/1.4 var(--tg-f-titulo);opacity:.7;
}
.mm-sem-onda .mm-espelho-legenda{display:block}

/* CTA do pé — só no celular */
.mm-cta-movel{display:none}

/* ——— faixa de passagem ——— */
.mm-faixa{background:var(--tg-apoio);padding:0 0 34px;text-align:center}
.mm-faixa-fio{padding:8px 0 22px}
.mm-faixa-txt{
  margin:0 auto;max-width:560px;padding:0 24px;
  font-size:15.5px;line-height:1.6;
}
.mm-faixa-txt em{font:italic 500 1.15em/1.4 var(--tg-f-titulo)}

/* ——— celular: composição própria ——— */
@media (max-width:860px){
  .mm-hero{display:block;min-height:100svh;padding:0}
  .mm-hero-texto{
    position:relative;z-index:3;max-width:none;
    padding:calc(84px + env(safe-area-inset-top,0px)) 20px 0;
  }
  .mm-eyebrow-hero{font-size:10.5px;margin-bottom:10px}
  .mm-h1{font-size:clamp(42px,12vw,58px);margin-bottom:12px}
  .mm-lead{display:none}
  .mm-registro{font-size:12.5px;margin-bottom:0;max-width:30ch}
  .mm-br-movel{display:inline}
  .mm-acoes{display:none}

  .mm-hero-luz{
    inset:auto -34% 8% -34%;width:auto;height:74%;
    transform:none;
  }
  @keyframes mmLuz{from{opacity:0}to{opacity:1}}

  .mm-espelho{
    position:absolute;z-index:1;margin:0;
    left:50%;bottom:-56px;transform:translateX(-50%);
    height:calc(62svh + 56px);min-height:480px;width:auto;
  }
  .mm-espelho-foto{object-position:50% 0}

  .mm-cta-movel{
    position:absolute;z-index:4;left:0;right:0;bottom:0;
    display:flex;flex-direction:column;gap:8px;
    padding:10px 20px calc(12px + env(safe-area-inset-bottom,0px));
    animation:mmDesce .5s ease .95s both;
  }
  .mm-prova-movel{
    align-self:center;
    background:rgba(43,33,26,.88);color:var(--tg-fundo);
    padding:6px 14px;border-radius:999px;font-size:12px;white-space:nowrap;
  }
  .mm-prova-movel i{color:var(--tg-luz)}
  .mm-prova-movel .mm-prova-extra{display:none}
}
@media (max-width:380px){
  .mm-h1{font-size:clamp(38px,11.5vw,46px)}
  .mm-prova-movel{white-space:normal;text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .mm-espelho-legenda{display:block}
  .mm-hero-luz{transform:none}
}