/* ==========================================================================
   CRUZA · Experiencia móvil (≤ 900 px). El escritorio no se ve afectado:
   todo lo nuevo está oculto por encima de 900 px o dentro de la media query.
   ========================================================================== */
.m-show, .m-menu-btn, .m-menu, .m-chips { display: none; }

@media (max-width: 900px) {
  .m-hide { display: none; }
  .m-show { display: inline; }

  /* ---------- Cabecera: CTA corto + botón de menú ---------- */
  .nav-actions { display: flex; align-items: center; gap: 8px; }
  .nav-actions .btn-demo-header { padding: 10px 18px !important; font-size: 14px !important; }
  .m-menu-btn { display: grid; place-content: center; gap: 5px; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); cursor: pointer; transition: transform 160ms ease-out; }
  .m-menu-btn:active { transform: scale(.94); }
  .m-menu-btn span { display: block; width: 16px; height: 2px; border-radius: 2px; background: #fff; }

  /* ---------- Menú a pantalla completa ---------- */
  .m-menu { display: flex; position: fixed; inset: 0; z-index: 3000; flex-direction: column; justify-content: space-between; padding: 96px 28px calc(28px + env(safe-area-inset-bottom)); background: rgba(5, 8, 15, .94); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); opacity: 0; visibility: hidden; transition: opacity 320ms var(--ease-out-strong), visibility 0s linear 320ms; }
  .m-menu.is-open { opacity: 1; visibility: visible; transition: opacity 320ms var(--ease-out-strong); }
  .m-menu__close { position: absolute; top: 22px; right: 22px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .08); cursor: pointer; }
  .m-menu__close span { position: absolute; left: 14px; top: 21px; width: 16px; height: 2px; border-radius: 2px; background: #fff; transform: rotate(45deg); }
  .m-menu__close span + span { transform: rotate(-45deg); }
  .m-menu__links { display: grid; gap: 6px; }
  .m-menu__links a { font-size: 38px; line-height: 1.15; font-weight: 800; letter-spacing: -.035em; color: #F8FAFC; text-decoration: none; opacity: 0; transform: translateY(16px); transition: opacity 400ms var(--ease-out-strong), transform 500ms var(--ease-out-strong), color 200ms ease; }
  .m-menu__links a:active { color: #00C896; }
  .m-menu.is-open .m-menu__links a { opacity: 1; transform: none; }
  .m-menu.is-open .m-menu__links a:nth-child(1) { transition-delay: 60ms; }
  .m-menu.is-open .m-menu__links a:nth-child(2) { transition-delay: 110ms; }
  .m-menu.is-open .m-menu__links a:nth-child(3) { transition-delay: 160ms; }
  .m-menu.is-open .m-menu__links a:nth-child(4) { transition-delay: 210ms; }
  .m-menu.is-open .m-menu__links a:nth-child(5) { transition-delay: 260ms; }
  .m-menu__foot { display: grid; gap: 14px; opacity: 0; transition: opacity 400ms ease 300ms; }
  .m-menu.is-open .m-menu__foot { opacity: 1; }
  .m-menu__foot .btn-demo-header { justify-content: center; padding: 16px; font-size: 16px; }
  .m-menu__foot span { font-size: 13px; color: #64748B; text-align: center; }

  /* ---------- Portada ---------- */
  .xhero { min-height: auto; padding: 112px 0 40px; }
  .xhero-inner { gap: 28px; padding: 0 22px; }
  .xhero-title { font-size: clamp(42px, 12.4vw, 56px); letter-spacing: -.055em; line-height: .96; }
  .xhero-underline { width: 62%; }
  .xhero-lead { font-size: 17px; margin: 16px 0 26px; }
  .xhero-cta { gap: 6px; }
  .xhero-cta .btn-demo-header { padding: 17px 24px; font-size: 16px; }
  .xhero-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 30px; padding-top: 22px; }
  .xhero-facts b { font-size: 26px; letter-spacing: -.04em; }
  .xhero-facts span { font-size: 11.5px; line-height: 1.3; display: block; }
  /* escena del cruce a sangre */
  .xhero-stage { width: calc(100% + 44px); max-width: none; margin: 4px -22px 0; aspect-ratio: 1 / 1.18; background: radial-gradient(70% 60% at 50% 50%, rgba(0, 200, 150, .10), transparent 70%); }
  .xhero-stage .shop, .xhero-stage .xpack, .xhero-stage .xtoast { margin: 0 12px; }

  /* ---------- Fila de accesos (estilo "Get the highlights") ---------- */
  .m-chips { display: block; padding: 8px 0 28px; background: #FBFDFC; }
  .m-chips__label { display: block; padding: 0 22px 12px; font-size: 13px; font-weight: 700; color: #64748B; letter-spacing: .02em; }
  .m-chips__row { display: flex; gap: 10px; overflow-x: auto; padding: 0 22px 6px; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .m-chips__row::-webkit-scrollbar { display: none; }
  .m-chips__row a { flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 99px; background: #fff; border: 1px solid #E2E8F0; font-size: 15px; font-weight: 700; color: #0F172A; text-decoration: none; box-shadow: 0 6px 16px -10px rgba(15, 23, 42, .25); transition: transform 160ms ease-out; }
  .m-chips__row a:active { transform: scale(.96); }
  .m-chips__row i { font-style: normal; font-size: 14px; color: #00C896; }

  /* ---------- Frase ---------- */
  .statement-section { padding: 72px 0 64px; }
  .statement-text { font-size: clamp(32px, 9.4vw, 44px); line-height: 1.06; padding: 0 22px; }

  /* ---------- Títulos de sección al estilo Apple ---------- */
  .story-head, .opp-head, .start-head { padding: 0 22px; text-align: left; }
  .story-head .section-title, .opp-head .section-title, .start-head .section-title { font-size: clamp(34px, 10vw, 44px) !important; line-height: 1.02 !important; letter-spacing: -.045em !important; text-align: left; }
  .story-head .section-subtitle, .opp-head .section-subtitle { font-size: 17px; text-align: left; margin-left: 0; }
  .opp-head .opp-switch { display: grid; width: 100%; }

  /* ---------- Oportunidades: tarjeta arriba, texto abajo ---------- */
  .opp-inner { padding: 0 22px; }
  .opp-panel { gap: 28px; }
  .opp-visual { order: -1; padding: 8px 0; }
  .opp-copy h3 { font-size: 30px; }
  .opp-copy > p { font-size: 16.5px; }
  .opp-list li { font-size: 15.5px; }
  .balance-card, .pass-card { width: 100%; max-width: 360px; }

  /* ---------- Cómo empezar: galería deslizable ---------- */
  .start-sticky { padding: 88px 0 72px; }
  .start-head { margin-bottom: 26px; }
  .start-track { flex-direction: row !important; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 22px 8px !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .start-track::-webkit-scrollbar { display: none; }
  .start-track::after { content: ""; display: block !important; flex: 0 0 8px; }
  .start-card { flex: 0 0 86% !important; scroll-snap-align: center; padding: 26px 22px !important; border-radius: 28px; }
  .start-num { font-size: 64px; }
  .start-body h3 { font-size: 23px; }
  .start-body p { font-size: 15.5px; margin-bottom: 18px; }
  .start-visual { padding: 16px; min-height: 140px; }
  .start-visual > * { transform: scale(.92); }
  .start-dots { display: flex !important; margin-top: 22px; }

  /* ---------- Preguntas ---------- */
  .qa-inner { padding: 0 22px; }
  .qa-aside h2 { font-size: clamp(34px, 10vw, 44px); letter-spacing: -.045em; line-height: 1.02; }

  /* ---------- Ideas ---------- */
  .ideas-title h2 { font-size: clamp(38px, 11vw, 50px); }

  /* ---------- Cierre ---------- */
  .finale-title { font-size: clamp(64px, 19vw, 96px); }
  .finale-sub { font-size: 16.5px; }
  .finale-actions { flex-direction: column; width: 100%; max-width: 360px; }
  .finale-actions .btn-demo-header, .finale-ghost { justify-content: center; }

  /* ---------- Pie compacto ---------- */
  .footer { padding: 56px 0 calc(28px + env(safe-area-inset-bottom)) !important; }
  .footer-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 28px 20px !important; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; gap: 6px; text-align: center; }

  /* ---------- Aparición al entrar en pantalla ---------- */
  .m-rv { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out-strong), transform 800ms var(--ease-out-strong); }
  .m-rv.in { opacity: 1; transform: none; }
}

@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .m-rv { opacity: 1 !important; transform: none !important; }
  .m-menu__links a { transition: none; }
}
@media (max-width: 900px) {
  .opp-head .opp-switch { display: grid !important; width: 100% !important; box-sizing: border-box; }
  .opp-switch button { white-space: nowrap; padding: 12px 10px !important; font-size: 15px !important; }
}
@media (max-width: 900px) { .opp-head { padding: 0; } }

/* ---------- Barra fija de acción ---------- */
.m-dock { display: none; }
@media (max-width: 900px) {
  .m-dock { display: flex; position: fixed; z-index: 900; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); align-items: center; gap: 12px; padding: 10px 10px 10px 18px; border-radius: 22px; background: rgba(15, 23, 42, .86); border: 1px solid rgba(255, 255, 255, .08); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .5); transform: translateY(140%); opacity: 0; transition: transform 480ms var(--ease-drawer), opacity 300ms ease; }
  .m-dock.is-on { transform: none; opacity: 1; }
  .m-dock__txt { flex: 1; min-width: 0; line-height: 1.25; }
  .m-dock__txt b { display: block; font-size: 14px; color: #fff; }
  .m-dock__txt span { font-size: 12px; color: #94A3B8; }
  .m-dock .btn-demo-header { flex: none; padding: 13px 18px !important; font-size: 14.5px !important; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) { .m-dock { transition: opacity 150ms ease; transform: none; } }