/* Ajustes da página Menos Tela, Mais Missões (complementa style.css) */

html { scroll-behavior: smooth; }
body { -webkit-text-size-adjust: 100%; }

/* Contraste: rótulos laranja em fundo claro ficavam com ~3:1 */
.bg-cream .eyebrow.text-ember,
.bg-mist .eyebrow.text-ember,
.bg-card .text-ember { color: oklch(52% .16 42); }

/* Ritmo vertical das seções: menos espaço vazio no celular */
.mtm-sec { padding-top: 3.5rem; padding-bottom: 3.5rem; }
@media (min-width: 768px) { .mtm-sec { padding-top: 5rem; padding-bottom: 5rem; } }

/* Títulos de seção um pouco menores em telas pequenas */
@media (max-width: 400px) {
  h2.text-3xl { font-size: 1.625rem; }
  .text-lg { font-size: 1.0625rem; }
}

/* ---------- Botões ---------- */
.mtm-btn { min-height: 3.5rem; text-align: center; line-height: 1.25; }
@media (max-width: 480px) {
  .mtm-btn { width: 100%; padding-left: 1.25rem; padding-right: 1.25rem; }
}

/* ---------- Primeira tela ---------- */
.mtm-hero-grid { padding-top: 2.25rem; padding-bottom: 3rem; gap: 2.5rem; }
@media (min-width: 768px) { .mtm-hero-grid { padding-top: 5rem; padding-bottom: 5.5rem; } }
.mtm-h1 { font-size: clamp(2rem, 8.4vw, 3.75rem); line-height: 1.06; letter-spacing: -.01em; }
.mtm-lead { font-size: clamp(1.125rem, 4.4vw, 1.3rem); line-height: 1.35; }
.mtm-sub { font-size: 1.0625rem; line-height: 1.5; }
.mtm-hero-buy { margin-top: 1.5rem; }
.mtm-price-pill {
  display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1rem;
  padding: .5rem 1rem; border-radius: 999px;
  background: oklch(30% .06 262 / .7); border: 1px solid oklch(78% .03 255 / .3);
  color: var(--navy-foreground); font-size: .95rem; font-weight: 600;
}
.mtm-price-pill strong { color: var(--sun); font-family: Sora, sans-serif; font-size: 1.15rem; font-weight: 800; }
.mtm-price-pill span { opacity: .45; }
@media (max-width: 767px) {
  .mtm-hero-img { max-width: 22rem; }
  .mtm-badge { width: 4.75rem; height: 4.75rem; right: -.25rem; top: -.75rem; }
  .mtm-badge span:first-child { font-size: 1.15rem; }
}

/* ---------- Como funciona ---------- */
.mtm-step { display: flex; gap: 1rem; align-items: flex-start; }
.mtm-step-n {
  flex: none; width: 2.5rem; height: 2.5rem; border-radius: .75rem;
  display: grid; place-items: center;
  background: var(--sun); color: var(--sun-foreground);
  font-family: Sora, sans-serif; font-weight: 800; font-size: 1.1rem;
  box-shadow: 0 3px 0 oklch(65% .14 70);
}

/* ---------- Páginas do material ---------- */
.mtm-zoom { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: .875rem; }
.mtm-zoom:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
.mtm-zoom img { display: block; width: 100%; height: auto; aspect-ratio: 1055 / 1491; object-fit: cover; border-radius: .875rem; }

.mtm-feat-row {
  margin-top: 2.5rem; display: grid; gap: 1.5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mtm-feat { margin: 0; }
.mtm-feat-img img { box-shadow: 0 18px 40px -18px oklch(25% .07 262 / .45); border: 1px solid var(--border); background: #fff; }
.mtm-feat figcaption { margin-top: 1rem; }
.mtm-feat figcaption strong { display: block; font-family: Sora, sans-serif; color: var(--navy); font-size: 1.125rem; }
.mtm-feat figcaption span { display: block; margin-top: .25rem; color: var(--muted-foreground); font-size: .95rem; line-height: 1.5; }
@media (max-width: 767px) {
  .mtm-feat-row {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%;
    overflow-x: auto; scroll-snap-type: x mandatory; gap: 1rem;
    margin-left: -1.25rem; margin-right: -1.25rem; padding: 0 1.25rem .75rem;
    scroll-padding: 0 1.25rem; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .mtm-feat-row::-webkit-scrollbar { display: none; }
  .mtm-feat { scroll-snap-align: start; }
}
.mtm-more { margin-top: 2.75rem; text-align: center; font-family: Sora, sans-serif; font-weight: 700; color: var(--navy); }

.mtm-marquee {
  margin-top: 1.25rem; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.mtm-track { display: flex; width: max-content; animation: mtm-scroll 50s linear infinite; padding: .5rem 0 1rem; }
.mtm-marquee:hover .mtm-track,
.mtm-marquee:focus-within .mtm-track { animation-play-state: paused; }
.mtm-slide { flex: none; width: 240px; margin-right: 1.25rem; }
.mtm-slide img { border: 1px solid var(--border); background: #fff; box-shadow: 0 10px 28px -14px oklch(25% .07 262 / .35); }
@keyframes mtm-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 640px) {
  .mtm-slide { width: 170px; margin-right: .875rem; }
  .mtm-track { animation-duration: 38s; }
}
@media (prefers-reduced-motion: reduce) {
  .mtm-track { animation-duration: 140s; }
  .animate-float { animation: none !important; }
}

/* Ampliação */
.mtm-lb {
  position: fixed; inset: 0; z-index: 60; background: oklch(12% .04 262 / .92);
  display: grid; place-items: center; padding: 3.5rem 1rem 1rem;
}
.mtm-lb[hidden] { display: none; }
.mtm-lb img { max-width: min(100%, 720px); max-height: 100%; width: auto; height: auto; border-radius: .75rem; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.mtm-lb-close {
  position: absolute; top: .75rem; right: .75rem; width: 2.75rem; height: 2.75rem; border-radius: 999px;
  border: 0; background: #fff; color: var(--navy); font-size: 1.75rem; line-height: 1; cursor: pointer;
}

/* ---------- Oferta ---------- */
.mtm-offer-h { font-size: clamp(1.5rem, 6vw, 1.875rem); line-height: 1.15; }

/* ---------- Depoimentos (seção preparada) ---------- */
.mtm-depo-grid { margin-top: 2.5rem; display: grid; gap: 1rem; }
@media (min-width: 768px) { .mtm-depo-grid { grid-template-columns: repeat(3, 1fr); } }
.mtm-depo { margin: 0; padding: 1.25rem; border-radius: 1rem; background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-card); }
.mtm-depo blockquote { margin: 0; color: var(--navy); line-height: 1.55; }
.mtm-depo figcaption { margin-top: .75rem; font-size: .875rem; font-weight: 600; color: var(--muted-foreground); }
.mtm-guarantee { padding: 1.5rem; border-radius: 1rem; background: #fff; border: 2px solid var(--success); text-align: center; }

/* ---------- Barra fixa de compra (celular) ---------- */
.mtm-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .625rem 1rem calc(.625rem + env(safe-area-inset-bottom));
  background: var(--navy-deep); border-top: 1px solid oklch(30% .06 262);
  box-shadow: 0 -8px 24px -10px rgba(0,0,0,.4);
  transform: translateY(110%); transition: transform .25s ease;
}
.mtm-sticky.is-on { transform: none; }
.mtm-sticky div { display: flex; flex-direction: column; line-height: 1.15; }
.mtm-sticky strong { color: var(--sun); font-family: Sora, sans-serif; font-size: 1.1rem; }
.mtm-sticky span { color: var(--navy-muted); font-size: .75rem; }
.mtm-sticky-btn {
  flex: 1; max-width: 15rem; text-align: center; padding: .8rem .75rem; border-radius: .75rem;
  background: var(--success); color: var(--success-foreground);
  font-family: Sora, sans-serif; font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em;
  box-shadow: 0 3px 0 var(--success-dark);
}
@media (min-width: 768px) { .mtm-sticky { display: none; } }
@media (max-width: 767px) { footer { padding-bottom: 5.5rem; } }

/* Rótulos pequenos: mínimo de 12px para leitura */
.eyebrow { font-size: .75rem; }

/* 12 semanas: duas colunas no celular para encurtar a rolagem */
@media (max-width: 639px) {
  .mtm-weeks { grid-template-columns: 1fr 1fr; gap: .625rem; }
  .mtm-weeks > div { padding: .875rem; }
  .mtm-weeks h3 { font-size: .95rem; line-height: 1.25; }
  .mtm-weeks p { font-size: .8125rem; }
}

/* Foto do autor menor no celular */
@media (max-width: 767px) {
  .mtm-author img { max-width: 10rem; margin: 0 auto; }
}