.mobile-plans { display: none; }
html.is-loading { overflow: hidden; overscroll-behavior: none; }

@media (max-width: 600px) {
  :root { --gutter: 1.25rem; --chapter-scroll: 240dvh; }
  .landing-page { overscroll-behavior-y: none; }
  .landing-page:not(.is-loading) { touch-action: pan-y pinch-zoom; }
  .chapter-stage, .story-enhanced .chapter-stage { min-height: 100dvh; padding: 6.5rem var(--gutter) max(5rem, env(safe-area-inset-bottom)); }
  .story-enhanced .journey::after { height: 100dvh; }
  .reading-flow .chapter-stage { min-height: 110dvh; }
  .scene-copy { max-width: 100%; min-width: 0; margin-top: 0; }
  .scene-title { font-size: clamp(2rem, 10vw, 2.6rem); line-height: 1.06; }
  #problema .scene-title--contrast { font-size: clamp(1.85rem, 7.6vw, 2rem); line-height: 1.15; }
  #apertura .scene-copy { margin-top: clamp(0rem, 14dvh, 8rem); }
  #apertura .scene-title--opening { font-size: clamp(2rem, 8.5vw, 2.25rem); line-height: 1.07; }
  .scene-description { font-size: 1rem; line-height: 1.6; margin-top: 1.4rem; }
  #apertura .scene-description { font-size: .9375rem; max-width: 100%; width: auto; white-space: normal; }
  .scene-button { font-size: .9375rem; gap: .8rem; min-width: 44px; min-height: 48px; }
  .scene-button span { flex: none; }
  .text-protection {
    width: 100%;
    background: linear-gradient(180deg, transparent, rgb(0 0 0 / .24) 20%, rgb(0 0 0 / var(--mobile-shade, .8)) 34%, rgb(0 0 0 / var(--mobile-shade, .8)) 80%, rgb(0 0 0 / .45));
  }
  .hero-protection {
    background: linear-gradient(180deg, transparent 10%, rgb(0 0 0 / .18) 30%, rgb(0 0 0 / .78) 52%, rgb(0 0 0 / .84) 82%, rgb(0 0 0 / .45));
  }
  .scroll-cue { bottom: max(1.5rem, env(safe-area-inset-bottom)); }
  .site-header { padding-top: max(1rem, env(safe-area-inset-top)); }
  .site-header .brand, .back-link, .retry-button { min-width: 44px; min-height: 44px; }
  .site-header .brand { max-width: 100%; }
  .detail-main .footnote, .strategy-phases .footnote, .mobile-plan dt, .mobile-plan dd { font-size: .9375rem; line-height: 1.65; }
  .detail-footer { padding-bottom: env(safe-area-inset-bottom); }

  .has-mobile-plans > .comparison-table { display: none; }
  .mobile-plans { display: block; }
  .mobile-plan { min-width: 0; margin-bottom: 3rem; border-top: 1px solid rgb(211 174 127 / .4); }
  .mobile-plan--featured { border-top: 2px solid var(--accent); }
  .detail-main .mobile-plan-heading { margin: 0; padding: 1.5rem 0; }
  .mobile-plan--featured .plan-name { color: var(--accent); }
  .mobile-plan .plan-name { font-size: 2rem; }
  .mobile-plan .plan-price { font-size: 3rem; }
  .mobile-plan .plan-period { font: .875rem/1.6 var(--body); }
  .mobile-plan dl, .mobile-plan dd { margin: 0; }
  .mobile-plan dl > div { padding: 1.1rem 0; border-bottom: 1px solid rgb(255 255 255 / .15); }
  .mobile-plan dt { color: rgb(255 255 255 / .72); margin-bottom: .4rem; }
  .mobile-plan dd { color: #fff; overflow-wrap: break-word; }
  .premium-pricing .mobile-plan-heading { font: .9375rem/1.65 var(--body); }
  .premium-pricing .mobile-plan strong { font-size: 2.75rem; }
  .premium-pricing .mobile-plan small { font-size: .875rem; }
  .phase-milestone--start { left: 0; }
  .phase-axis, .phase-content { min-width: 0; }
  .pillar-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) and (max-height: 650px) {
  .chapter-stage, .story-enhanced .chapter-stage { padding-top: 5.5rem; padding-bottom: max(3.5rem, env(safe-area-inset-bottom)); }
  #apertura .scene-copy { margin-top: 0; }
  .scene-title { font-size: clamp(1.85rem, 9vw, 2.3rem); }
  .scene-description { margin-top: 1rem; }
  .scene-button { margin-top: 1rem; }
  .scroll-cue { bottom: max(.75rem, env(safe-area-inset-bottom)); }
}