/* ════════════════════════════════════════════════════════════════
   MOMMY MAKEOVER — Redesign editorial de 5 seções  (ADITIVO)
   Skin EXCLUSIVA desta LP. Carregada DEPOIS de style.css.
   • NÃO altera style.css → as outras 6 LPs seguem byte-idênticas/intactas.
   • Tokens (:root), fontes e paleta herdados de style.css.
   • Copy 100% preservada. Só layout + ícones.
   Seções: #procedimentos (linha do tempo) · #diferenciais · #indicacoes
           · #metodo-cpi (7 pilares) · #video (player vertical 9:16)
   Para reverter: remover o <link> deste arquivo e restaurar o markup.
   ════════════════════════════════════════════════════════════════ */

/* helper — ícone SVG da marca tingido de ouro via mask (monocromático) */
.mm-ico {
  display: inline-block; width: 26px; height: 26px;
  background: var(--gradient-gold);
  -webkit-mask: var(--mm-src) center / contain no-repeat;
          mask: var(--mm-src) center / contain no-repeat;
}

/* ─── Espaçamento entre seções reduzido (só nesta LP; feedback Higor 03/07) ─── */
/* redesign.css só carrega na Mommy → não afeta as outras 6 LPs */
.section { padding: clamp(3rem, 6vw, 5rem) 0; }

/* ─────────────── 1) PROCEDIMENTOS — LINHA DO TEMPO ─────────────── */
.mm-tl { position: relative; max-width: 960px; margin: clamp(1rem, 3vw, 2rem) auto 0; }
/* trilho central dourado */
.mm-tl::before {
  content: ""; position: absolute; top: 8px; bottom: 8px; left: 50%; width: 2px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, var(--brand) 6%, var(--brand-darker) 94%, transparent);
}
.mm-tl__item {
  position: relative; width: 50%;
  padding: 0 clamp(1.4rem, 2.6vw, 2.2rem);
  margin-bottom: clamp(1.6rem, 3vw, 2.6rem);
}
.mm-tl__item:nth-child(odd)  { left: 0;   text-align: right; }
.mm-tl__item:nth-child(even) { left: 50%; text-align: left; }
.mm-tl__item:last-child { margin-bottom: 0; }
/* nó no trilho */
.mm-tl__item::after {
  content: ""; position: absolute; top: 30px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--brand); border: 2px solid var(--bg-alt-2);
  box-shadow: 0 0 0 4px var(--bg-alt-2), 0 0 0 5px var(--border-gold);
}
.mm-tl__item:nth-child(odd)::after  { right: -7px; }
.mm-tl__item:nth-child(even)::after { left: -7px; }
/* card */
.mm-tl__card {
  display: flex; width: 100%; flex-direction: column; gap: .7rem; text-align: left;
  background: var(--white); border: 1px solid var(--border); border-radius: 16px;
  padding: clamp(1.5rem, 2.6vw, 2.1rem) clamp(1.6rem, 2.8vw, 2.2rem);
  box-shadow: 0 14px 40px rgba(10, 10, 10, .05);
  transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.mm-tl__card:hover { transform: translateY(-4px); border-color: var(--border-gold); box-shadow: 0 24px 60px rgba(139, 112, 71, .14); }
.mm-tl__top { display: flex; align-items: center; gap: .9rem; }
.mm-tl__item:nth-child(odd) .mm-tl__top { flex-direction: row-reverse; }
.mm-tl__badge {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(197, 165, 114, .12); border: 1px solid var(--border-gold);
}
.mm-tl__num {
  font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 400;
  font-size: clamp(1.7rem, 3.2vw, 2.35rem); line-height: 1; color: var(--brand-darker);
}
.mm-tl__title { font-weight: 600; font-size: clamp(1.2rem, 1.9vw, 1.45rem); color: var(--text-darker); line-height: 1.25; }
.mm-tl__text  { font-size: clamp(1rem, 1.3vw, 1.08rem); line-height: 1.65; color: var(--text-gray); }

@media (max-width: 820px) {
  .mm-tl::before { left: 21px; }
  .mm-tl__item,
  .mm-tl__item:nth-child(odd),
  .mm-tl__item:nth-child(even) {
    width: 100%; left: 0; text-align: left;
    padding: 0 0 0 clamp(3rem, 12vw, 3.6rem);
  }
  .mm-tl__item::after,
  .mm-tl__item:nth-child(odd)::after,
  .mm-tl__item:nth-child(even)::after { left: 14px; right: auto; }
  .mm-tl__item:nth-child(odd) .mm-tl__top { flex-direction: row; }
}

/* ─────────────── 2) DIFERENCIAIS — 5 CARDS EDITORIAIS ─────────────── */
.mm-dif { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1rem, 2vw, 1.5rem); max-width: 1160px; margin: 0 auto; }
.mm-dif__card {
  position: relative; overflow: hidden;
  flex: 1 1 300px; max-width: 355px;
  background: var(--white); border: 1px solid var(--border); border-radius: 18px;
  padding: clamp(1.7rem, 2.8vw, 2.1rem);
  transition: transform .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}
.mm-dif__card:hover { transform: translateY(-6px); border-color: var(--border-gold); box-shadow: 0 26px 64px rgba(139, 112, 71, .14); }
/* faixa dourada no topo, revelada no hover */
.mm-dif__card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--gradient-gold); transform: scaleX(0); transform-origin: left;
  transition: transform .55s var(--ease);
}
.mm-dif__card:hover::before { transform: scaleX(1); }
/* número marca-d'água */
.mm-dif__num {
  position: absolute; top: .3rem; right: 1.1rem; z-index: 0; pointer-events: none;
  font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 400;
  font-size: 4.6rem; line-height: 1; color: rgba(197, 165, 114, .13);
}
.mm-dif__ico {
  position: relative; z-index: 1;
  width: 54px; height: 54px; border-radius: 15px; margin-bottom: 1.15rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gradient-gold); color: #fff;
  box-shadow: 0 10px 24px rgba(139, 112, 71, .28);
}
.mm-dif__ico svg { width: 24px; height: 24px; }
.mm-dif__title {
  position: relative; z-index: 1;
  font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 400;
  font-size: clamp(1.3rem, 2vw, 1.55rem); color: var(--text-darker); margin-bottom: .55rem;
}
.mm-dif__text { position: relative; z-index: 1; font-size: .96rem; line-height: 1.65; color: var(--text-gray); }

/* ─────────────── 3) INDICAÇÕES — 2 PAINÉIS CONTRASTADOS ─────────────── */
.mm-qual { display: grid; grid-template-columns: 1fr; gap: clamp(1.6rem, 3vw, 2.4rem); align-items: stretch; }
@media (min-width: 920px) { .mm-qual { grid-template-columns: 0.9fr 1.1fr; } }
.mm-qual__media { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid var(--border-gold); box-shadow: 0 30px 70px rgba(0, 0, 0, .14); min-height: 320px; }
.mm-qual__media img { width: 100%; height: 100%; object-fit: cover; }
.mm-qual__panels { display: flex; flex-direction: column; gap: clamp(1.1rem, 2vw, 1.5rem); }
.mm-qual__card { border-radius: 18px; padding: clamp(1.5rem, 2.6vw, 2rem); border: 1px solid var(--border); }
.mm-qual__card--yes { background: linear-gradient(180deg, #ffffff 0%, #fdfaf3 100%); border-color: var(--border-gold); }
.mm-qual__card--no  { background: var(--bg-alt-2); }
.mm-qual__head { display: flex; align-items: center; gap: .7rem; margin-bottom: 1.1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.mm-qual__card--yes .mm-qual__head { border-bottom-color: var(--border-gold); }
.mm-qual__head-ico { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.mm-qual__head-ico svg { width: 18px; height: 18px; }
.mm-qual__card--yes .mm-qual__head-ico { background: var(--gradient-gold); color: #fff; box-shadow: 0 8px 18px rgba(139, 112, 71, .3); }
.mm-qual__card--no  .mm-qual__head-ico { background: #ece9e3; color: var(--text-gray-lt); }
.mm-qual__head-txt { font-weight: 700; font-size: clamp(1.15rem, 2.1vw, 1.4rem); line-height: 1.25; color: var(--text-darker); }
.mm-qual__list { list-style: none; display: flex; flex-direction: column; gap: .8rem; }
.mm-qual__li { display: flex; gap: .8rem; align-items: flex-start; font-size: .97rem; line-height: 1.55; color: var(--text-dark); }
.mm-qual__mk { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.mm-qual__mk svg { width: 13px; height: 13px; }
.mm-qual__mk--yes { background: var(--gradient-gold); color: #fff; box-shadow: 0 4px 12px rgba(139, 112, 71, .26); }
.mm-qual__mk--no  { background: #e4e0d8; color: var(--text-gray); }

/* ─────────────── 4) MÉTODO CPI — FOTO (à DIREITA) + 7 PILARES ─────────────── */
/* Invertida em relação a "Para quem é" (foto à esquerda) → alterna e separa as
   duas seções; larguras das colunas espelhadas p/ as fotos ficarem do mesmo tamanho. */
.mm-cpi { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .mm-cpi { grid-template-columns: 1.1fr 0.9fr; } }
.mm-cpi__media { border-radius: 20px; overflow: hidden; border: 1px solid var(--border-gold); box-shadow: 0 30px 70px rgba(0, 0, 0, .16); }
.mm-cpi__media img { width: 100%; height: auto; display: block; }
.mm-cpi__pillars-label { margin-top: clamp(1.4rem, 2.6vw, 2rem); font-size: 10px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--brand-darker); }
.mm-cpi__pillars { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; margin-top: .9rem; }
.mm-pillar { display: flex; align-items: center; gap: .75rem; padding: .75rem .95rem; background: var(--white); border: 1px solid var(--border); border-radius: 12px; transition: border-color .35s var(--ease), transform .35s var(--ease); }
.mm-pillar:hover { border-color: var(--border-gold); transform: translateY(-2px); }
.mm-pillar__n { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 400; color: var(--brand-darker); font-size: 1.1rem; min-width: 1.5em; }
.mm-pillar__t { font-size: .9rem; font-weight: 600; color: var(--text-darker); letter-spacing: .01em; }
.mm-pillar--wide { grid-column: 1 / -1; }
@media (max-width: 460px) { .mm-cpi__pillars { grid-template-columns: 1fr; } }

/* ─────────────── 5) VÍDEO — PLAYER VERTICAL 9:16 ─────────────── */
.mm-video { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 4vw, 3.25rem); align-items: center; }
/* largura contida + centralizada → tira o vídeo do "cantinho" e aproxima do texto */
@media (min-width: 900px) { .mm-video { grid-template-columns: 1fr auto; max-width: 1040px; margin-inline: auto; } }
.mm-video__text { text-align: center; }
@media (min-width: 900px) { .mm-video__text { text-align: left; } }
.mm-video__desc { margin-top: clamp(1.2rem, 2vw, 1.6rem); max-width: 600px; color: rgba(255, 255, 255, .74); font-size: clamp(1rem, 1.35vw, 1.15rem); line-height: 1.75; }
@media (max-width: 899px) { .mm-video__desc { margin-inline: auto; } }
.mm-video__stage { position: relative; display: flex; justify-content: center; }
.mm-video__stage::before {
  content: ""; position: absolute; inset: -10% -6%; z-index: 0;
  background: radial-gradient(circle at 50% 42%, rgba(197, 165, 114, .28), transparent 68%);
  filter: blur(8px);
}
/* vídeo no split "Renascimento feminino" — centraliza o player na coluna */
.mm-split-video { display: flex; justify-content: center; align-items: center; }
.mm-split-video .mm-video__player { box-shadow: 0 30px 70px rgba(10, 10, 10, .22); }

.mm-video__player {
  position: relative; z-index: 1;
  width: min(380px, 84vw); aspect-ratio: 9 / 16;
  border-radius: 26px; overflow: hidden;
  border: 1px solid var(--border-gold);
  box-shadow: 0 44px 100px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .04);
}
.mm-video__player video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* clicar em qualquer ponto do vídeo alterna play/pause. A faixa de 54px de baixo
   fica livre p/ a barra de controles nativa (seek, volume, tela cheia). */
.mm-video__play {
  position: absolute; left: 0; right: 0; top: 0; bottom: 54px; z-index: 2;
  margin: 0; padding: 0; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(10, 10, 10, .10), rgba(10, 10, 10, .34));
}
.mm-video__play span {
  width: 74px; height: 74px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--gradient-gold); color: #0A0A0A;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .12) inset;
  transition: transform .3s var(--ease);
}
.mm-video__play:hover span { transform: scale(1.08); }
.mm-video__play svg { width: 26px; height: 26px; margin-left: 4px; }
/* tocando: overlay fica invisível mas ainda clicável (clicar pausa); o ícone some */
.mm-video__player.is-playing .mm-video__play { background: transparent; }
.mm-video__player.is-playing .mm-video__play span { display: none; }

/* ─── Hero: expansão suave e moderna da capa (override do kenBurns) ─── */
/* zoom bem lento (28s) que respira in↔out — aspecto editorial/moderno */
.hero__bg img {
  animation: mmHeroZoom 28s ease-in-out infinite alternate;
  transform-origin: 50% 42%;
  will-change: transform;
}
@keyframes mmHeroZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.14); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__bg img { animation: none; }
}

/* ════════════════════════════════════════════════════════════════
   LEGIBILIDADE MOBILE — varredura (feedback Higor 04/07)
   Textos pequenos ↑ (hero em destaque), inputs 16px (anti-zoom iOS),
   alvos de toque. Só nesta LP (redesign.css). A hero tinha ~279px de
   folga na viewport, então dá p/ aumentar sem estourar o 100svh.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Hero — protagonismo e leitura */
  .hero-title   { font-size: clamp(2.35rem, 10.5vw, 3rem); }
  .hero__subtitle { font-size: 1rem; line-height: 1.55; }
  .section-tag  { font-size: 11px; }

  /* Corpo: subir os textos que estavam em ~15px para 16px */
  .mm-dif__text { font-size: 1rem; }
  .testi__name  { font-size: 1rem; }
  .mm-pillar__t { font-size: .95rem; }

  /* Formulário: 16px evita o zoom automático do iOS ao focar nos campos */
  .quiz__field input { font-size: 16px; }
  .quiz__option { font-size: 1rem; }

  /* Alvos de toque maiores no banner LGPD (estavam ~38px) */
  .lgpd-accept, .lgpd-reject, .lgpd-manage { padding: 12px 20px; }
}