/* NUEVO: landing-mobile.css — responsive-only, no toca desktop.
   Aditivo: apps/landing/index.html y css/components.css ya cubren la
   mayoría del responsive (module-grid, tp-kpi-row, tp-content-row,
   cta-close__tiers, cbi-hero__inner @860px). Este fichero solo cierra
   gaps reales detectados en el mock del hero, la tabla TOP POSITIONS
   y el tap target de los CTAs de pricing en mobile. No se duplican
   reglas ya existentes. */

@media (max-width: 768px) {
  /* TOP POSITIONS: red de seguridad. Con el contenido actual (4
     columnas cortas: Ticker/Position/P&L/%) no debería activarse, pero
     evita overflow horizontal si el usuario fuerza fuente grande. */
  .tp-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Pricing CTAs (Starter/Pro/Elite): usan .cbi-btn base (~36px de
     alto: padding 8px 18px), por debajo del tap target mínimo de 44px
     en mobile. Los CTAs del hero ya usan cbi-btn--lg (~47px) y no se
     tocan aquí. */
  .cta-tier__cta {
    min-height: 44px;
  }
}

@media (max-width: 420px) {
  /* Mock del terminal (hero): métricas Portfolio Total / Annual
     Return / Sharpe Ratio / Max Drawdown pasan de 2 a 1 columna para
     dar aire a valores largos como "$47,382". */
  .cbi-terminal-preview__body .cbi-g2 {
    grid-template-columns: 1fr;
  }

  .cbi-terminal-preview__body {
    padding: var(--sp-4);
  }
}

@media (max-width: 400px) {
  /* NAV: en pantallas muy estrechas (iPhone SE 320px, Android gama
     baja) logo (~148px) + "Sign in" (~76px) + "Start free" (~113px)
     no caben en cbi-nav__actions y fuerzan overflow horizontal de
     toda la página (verificado: scrollWidth 362px en viewport de
     320px). "Sign in" es la acción secundaria (login sigue accesible
     vía el propio flujo de "Start free" / auth widget), así que se
     oculta para dejar sitio a la CTA primaria sin tocar el layout
     desktop ni el de tablet (>400px). */
  .cbi-nav__actions .cbi-btn--ghost {
    display: none;
  }
}