/* =============================================================
   CrossUp × Escalafy — Refinamientos MOBILE (global)
   Se carga al final → tiene prioridad para overrides.
   ============================================================= */

/* -------------------------------------------------------------
   0. Guard global contra scroll horizontal
   (el reveal lateral y algunos grids generaban overflow en X)
   ------------------------------------------------------------- */
html, body { max-width: 100%; overflow-x: hidden; }

/* En mobile, el reveal entra siempre en vertical (sin desplazar en X) */
@media (max-width: 760px) {
  .reveal.rv-left,
  .reveal.rv-right { transform: translate3d(0, 28px, 0) scale(.97); }
  .reveal.rv-left.in,
  .reveal.rv-right.in { transform: none; }
}

/* -------------------------------------------------------------
   1. NAV — que el logo y el botón no se solapen
   ------------------------------------------------------------- */
@media (max-width: 620px) {
  .nav { padding: 12px 16px; gap: 10px; }
  .nav .brand { min-width: 0; flex: 0 1 auto; overflow: hidden; }
  .nav .cobrand { gap: 8px; min-width: 0; }
  .nav .cobrand .unit { font-size: 14px; gap: 7px; }
  .nav .cobrand .unit img { height: 18px; }
  .nav .cobrand .x { font-size: 13px; }
  .nav .actions { flex-shrink: 0; }
  .nav .btn-nav { padding: 9px 14px; font-size: 12px; white-space: nowrap; }
}
@media (max-width: 400px) {
  .nav .cobrand .unit { font-size: 12.5px; gap: 5px; }
  .nav .cobrand .unit img { height: 16px; }
  .nav .btn-nav { padding: 8px 12px; font-size: 11px; }
}

/* -------------------------------------------------------------
   2. SALESPILOT — features a 1 columna (no se corta la sección)
   ------------------------------------------------------------- */
@media (max-width: 760px) {
  .l-features { grid-template-columns: 1fr; }
  .l-dash { padding: 18px; }
  .l-dash .metrics { gap: 8px; }
  .l-dash .metrics .m { padding: 12px 10px; }
  .l-dash .metrics .m .vv { font-size: 18px; }
}

/* -------------------------------------------------------------
   3. STATS (cross/up-selling) — cards uniformes e iguales
   ------------------------------------------------------------- */
@media (max-width: 760px) {
  .l-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
  }
  .l-stats .t {
    display: flex; flex-direction: column; gap: 6px;
    padding: 14px 10px;
    min-height: 100%;
  }
  .l-stats .v { font-size: 20px; }
  .l-stats .l { font-size: 11px; margin-top: 0; }
}
@media (max-width: 440px) {
  .l-stats .t { padding: 12px 8px; }
  .l-stats .v { font-size: 18px; }
  .l-stats .l { font-size: 10.5px; line-height: 1.3; }
}

/* -------------------------------------------------------------
   4. PLANES — badge "RECOMENDADO" centrado y compacto
   ------------------------------------------------------------- */
@media (max-width: 760px) {
  .plan-l { padding: 26px 22px; }
  .plan-l.featured { margin-top: 8px; }
  .plan-l .ribbon {
    left: 50%; transform: translateX(-50%);
    font-size: 10px; padding: 5px 14px; letter-spacing: 0.12em;
    white-space: nowrap;
  }
  .plan-l .bene-tag { margin-top: 4px; }
  .plan-l .price { flex-wrap: wrap; }
}

/* -------------------------------------------------------------
   5. Integration strip — centrado y prolijo
   ------------------------------------------------------------- */
@media (max-width: 620px) {
  .integ-strip { justify-content: center; text-align: center; gap: 14px; }
  .integ-strip .items { justify-content: center; gap: 18px; }
}

/* -------------------------------------------------------------
   6. Mockups y dashboards — evitar que empujen el ancho
   ------------------------------------------------------------- */
@media (max-width: 760px) {
  .l-mockup, .l-dash, .benefit-box { max-width: 100%; }
  .l-product { grid-template-columns: 1fr; gap: 14px; }
  .l-product .img { min-height: 150px; }
}

/* -------------------------------------------------------------
   7. CTA / chips / offer-line — que no desborden
   ------------------------------------------------------------- */
@media (max-width: 620px) {
  .cta-partner .offer-line { flex-direction: column; align-items: center; }
  .cta-partner .big-btn .l-btn { width: 100%; justify-content: center; }
  .hero-actions { width: 100%; }
  .hero-actions .l-btn { flex: 1 1 auto; justify-content: center; }
}