/* MarthaFit — Transfórmate · landing-specific styles */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--color-fg);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
button { font-family: var(--font-display); }
img { display: block; max-width: 100%; }

/* ---------- shared motion ---------- */
@keyframes mf-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.mf-fade-up { animation: mf-fade-up .5s var(--ease-out) both; }

/* ---------- details/summary ---------- */
summary::-webkit-details-marker { display: none; }
summary { list-style: none; }

/* ---------- focus ring ---------- */
button:focus-visible, a:focus-visible, input:focus-visible, label:focus-visible {
  outline: none;
  box-shadow: var(--shadow-ring);
  border-radius: 4px;
}

/* ---------- Container helper ---------- */
.mf-container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.mf-container--narrow { max-width: 920px; margin: 0 auto; padding: 0 32px; }

/* ---------- Responsive grid helpers ---------- */
@media (max-width: 900px) {
  .mf-container, .mf-container--narrow { padding: 0 20px; }
}

/* ---------- Universal mobile collapse ----------
   Any 2-col or 3-col grid we declare inline should collapse on small screens.
   We do it via attribute selector so we don't have to refactor every component. */
@media (max-width: 900px) {
  [data-mf-cols] { grid-template-columns: 1fr !important; }
}

/* ---------- Mobile type compression ---------- */
@media (max-width: 700px) {
  [data-mf-hero-h1] { font-size: 40px !important; }
  [data-mf-h2] { font-size: 32px !important; }
  [data-mf-h2-lg] { font-size: 36px !important; }
}

/* ---------- Hide nav links on small ---------- */
@media (max-width: 900px) {
  [data-mf-nav-links] { display: none !important; }
}

/* ---------- pill segmented ---------- */
.mf-seg {
  display: inline-flex;
  background: rgba(255,255,255,.08);
  border-radius: 999px;
  padding: 3px;
}

/* ---------- editmode floating panel anchor ---------- */
#tweaks-root { position: fixed; z-index: 9000; }

/* ---------- Contrast cards — stack inner 3-col grid on small ---------- */
@media (max-width: 720px) {
  [data-mf-contrast-neg], [data-mf-contrast-pos] { text-align: left; }
}
@media (max-width: 900px) {
  /* Contrast card inner grid: collapse 3-col into 1-col with arrow inline */
  section [data-mf-cols] > article > [data-mf-contrast-arrow] {
    transform: rotate(90deg);
    align-self: flex-start;
    margin: 4px 0;
  }
  section [data-mf-cols] > article {
    grid-template-columns: 1fr !important;
    text-align: left;
  }
}

/* ---------- Pillar cards — stack number/icon above text on small ---------- */
@media (max-width: 720px) {
  [data-mf-pillar-num] { flex-direction: row !important; align-items: center; gap: 14px !important; }
  [data-mf-pillar-title] { font-size: 24px !important; }
}

/* ---------- FAQ portrait — hide on mobile to save space ---------- */
@media (max-width: 900px) {
  [data-mf-faq-portrait] { display: none !important; }
}

/* ================================================================
   MOBILE OPTIMIZATIONS — comprehensive responsive layer
   ================================================================ */

/* ---------- Section vertical rhythm — way less on mobile ---------- */
@media (max-width: 900px) {
  section { padding-top: 80px !important; padding-bottom: 80px !important; }
}
@media (max-width: 640px) {
  section { padding-top: 56px !important; padding-bottom: 56px !important; }
}

/* ---------- Container padding tighter on small ---------- */
@media (max-width: 640px) {
  .mf-container { padding: 0 18px !important; }
}

/* ---------- Type scale ---------- */
@media (max-width: 640px) {
  [data-mf-hero-h1] { font-size: 36px !important; line-height: 1.05 !important; }
  [data-mf-h2] { font-size: 28px !important; line-height: 1.1 !important; }
  [data-mf-h2-lg] { font-size: 30px !important; line-height: 1.1 !important; }
}
@media (max-width: 420px) {
  [data-mf-hero-h1] { font-size: 32px !important; }
  [data-mf-h2-lg] { font-size: 26px !important; }
}

/* ---------- HERO — portrait shrink + spacing ---------- */
@media (max-width: 1000px) {
  [data-mf-hero-portrait-disc] { width: 360px !important; height: 360px !important; }
}
@media (max-width: 900px) {
  [data-mf-section="hero"] { padding-top: 48px !important; padding-bottom: 72px !important; }
  [data-mf-hero-portrait-disc] { width: 300px !important; height: 300px !important; }
}
@media (max-width: 640px) {
  [data-mf-section="hero"] { padding-top: 32px !important; padding-bottom: 56px !important; }
  [data-mf-hero-portrait-disc] { width: 260px !important; height: 260px !important; }
  [data-mf-hero-portrait-disc] + div {
    /* the floating "Martha responde" pill — make smaller */
    font-size: 12px !important;
    padding: 10px 14px !important;
    right: -4px !important;
    bottom: 4px !important;
  }
}

/* ---------- METHOD — phase card padding + heading column gap ---------- */
@media (max-width: 900px) {
  [data-mf-section="method"] [data-mf-cols] { gap: 24px !important; }
}
@media (max-width: 640px) {
  [data-mf-section="method"] article {
    padding: 22px !important;
    border-radius: 18px !important;
  }
}

/* ---------- AFTER-90 callout — vertical stack on mobile ---------- */
@media (max-width: 640px) {
  [data-mf-section="method"] > .mf-container > div > div:last-child {
    padding: 20px 22px !important;
  }
}

/* ---------- SCIENCE STRIP — 4 books → 2 cols on tablet, 2 cols on mobile ---------- */
@media (max-width: 900px) {
  [data-mf-cols][style*="repeat(4,"] { grid-template-columns: 1fr 1fr !important; }
  /* certification + 2 stats row also stacks */
  [data-mf-cols][style*="1.3fr 1fr 1fr"] { grid-template-columns: 1fr !important; }
}

/* ---------- PILLARS — compact card layout on mobile ---------- */
@media (max-width: 640px) {
  [data-mf-section="pillars"] [data-mf-cols] { gap: 14px !important; }
  [data-mf-section="pillars"] [data-mf-cols] > div {
    padding: 24px 22px !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  [data-mf-pillar-num] {
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
    min-width: 0 !important;
  }
  [data-mf-pillar-num] > div:first-child { font-size: 64px !important; }
  [data-mf-pillar-num] > img { width: 72px !important; height: 72px !important; }
  [data-mf-pillar-title] { font-size: 22px !important; }
}

/* ---------- CONTRAST — already handled, just shrink padding ---------- */
@media (max-width: 640px) {
  section [data-mf-cols] > article[data-mf-cols],
  section [data-mf-cols] > article {
    padding: 22px !important;
  }
}

/* ---------- PRICING CAROUSEL — mobile-friendly ---------- */
@media (max-width: 900px) {
  [data-pricing-carousel] > div:first-child { height: auto !important; min-height: 540px !important; padding: 8px 0 !important; }
  [data-pricing-carousel] article {
    padding: 26px 22px !important;
    border-radius: 22px !important;
  }
}
@media (max-width: 640px) {
  [data-pricing-carousel] > div:first-child { min-height: 580px !important; }
  [data-pricing-carousel] article > div > p:first-of-type { font-size: 13px !important; }
  /* Arrow buttons smaller + inside container */
  [data-pricing-carousel] > button {
    width: 40px !important; height: 40px !important;
    left: 4px !important;
    box-shadow: 0 6px 16px rgba(69,11,104,.18) !important;
  }
  [data-pricing-carousel] > button[aria-label*="Siguiente"] {
    left: auto !important;
    right: 4px !important;
  }
}

/* ---------- PRICING fallback layouts (cards/horizontal) ---------- */
@media (max-width: 900px) {
  [data-mf-section="pricing"] [data-mf-cols] { gap: 16px !important; }
  /* featured card was translated -12px upward; on mobile remove that */
  [data-mf-section="pricing"] article[style*="translateY(-12px)"] {
    transform: none !important;
  }
}

/* ---------- ACHIEVEMENTS dark — stats grid 4 col → 2 col → 1 col ---------- */
@media (max-width: 900px) {
  [data-mf-section="testim"] [data-mf-cols][style*="repeat(4,"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
  }
}
@media (max-width: 420px) {
  [data-mf-section="testim"] [data-mf-cols][style*="repeat(4,"] {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 640px) {
  [data-mf-section="testim"] article {
    padding: 24px !important;
  }
  [data-mf-section="testim"] article h3 { font-size: 22px !important; }
}

/* ---------- QUIZ — card padding ---------- */
@media (max-width: 640px) {
  [data-mf-section="quiz"] > .mf-container > div > div { /* the quiz card */
    border-radius: 18px !important;
  }
  [data-mf-section="quiz"] [data-mf-cols] { gap: 0 !important; }
}

/* ---------- OBJECTIONS — gap reduce ---------- */
@media (max-width: 640px) {
  [data-mf-section] article {
    /* lighten huge paddings across the board */
  }
}

/* ---------- COHORT BANNER — keep readable on mobile ---------- */
@media (max-width: 640px) {
  body > div > div:first-child[style*="LANZAMIENTO"],
  div[style*="LANZAMIENTO 2026"] {
    /* the announcement banner — already has flex-wrap */
    padding: 10px 16px !important;
    font-size: 12px !important;
  }
}

/* ---------- FAQ — show portrait card but smaller ---------- */
@media (max-width: 900px) {
  [data-mf-section="faq"] > .mf-container { gap: 32px !important; }
}

/* ---------- FINAL CTA — type smaller ---------- */
@media (max-width: 640px) {
  [data-mf-section="cta"] [data-mf-h2-lg] { font-size: 36px !important; }
}

/* ---------- WhatsApp float — smaller on mobile ---------- */
@media (max-width: 640px) {
  [data-mf-skip-consent][style*="position: fixed"] {
    /* the floating WhatsApp button */
  }
}

/* ---------- Touch-friendly tap targets ---------- */
@media (max-width: 900px) {
  button, a[role="button"] { min-height: 44px; }
}

/* ---------- Prevent horizontal overflow ---------- */
html, body { overflow-x: hidden; }

/* ---------- Hero badges — wrap nicely on mobile ---------- */
@media (max-width: 640px) {
  [data-mf-section="hero"] div[style*="HERO_BADGES"] { font-size: 12px !important; }
}