/* Modo presentación por pantallas también en el móvil.
   Hasta ahora, por debajo de 900 px las páginas quitaban el scroll por
   pantallas y apilaban las dos columnas, con secciones de hasta dos pantallas y
   media. Aquí cada bloque se reorganiza para que quepa en una pantalla:
     · texto + captura (.split): en la misma pantalla si caben, si no en dos;
     · tarjetas, planes y móviles: carril horizontal que se desliza con el dedo;
     · lo que aun así no quepa lo parte deck-movil.js en varias pantallas.
   Se carga después de los estilos de cada página: sus reglas mandan. */

@media (max-width: 900px) and (min-height: 480px) {

  /* ── Contenedor por pantallas ─────────────────────────────────────── */
  .deck, .snap-container {
    height: 100vh !important; height: 100dvh !important;
    overflow-y: scroll !important; overflow-x: hidden;
    scroll-snap-type: y mandatory !important;
    overscroll-behavior-y: contain;
  }
  /* El scroll lo lleva el contenedor (no la página) en la portada y las páginas de producto */
  html:has(.deck), html:has(.deck) body, html:has(.snap-container), html:has(.snap-container) body { height: 100% !important; overflow: hidden !important; }
  /* La presentación desplaza la propia página: el ajuste va en <html> */
  html:has(.presentation) { scroll-snap-type: y mandatory !important; }
  .presentation > section { height: auto !important; min-height: 100vh !important; min-height: 100dvh !important; scroll-snap-align: start; }
  .presentation > section > .slide-inner { padding: 70px 0 24px; justify-content: center; }

  .deck > section, .snap-container > section {
    min-height: 100vh !important; min-height: 100dvh !important;
    height: auto !important;
    scroll-snap-align: start;
    padding: 70px 5vw 24px !important;
    display: flex !important; flex-direction: column; justify-content: center;
    overflow: hidden !important;
  }

  /* Puntos de navegación: finos, a la derecha (antes se ocultaban) */
  .dots, .nav-dots { display: flex !important; right: 5px !important; gap: 9px !important; }
  .dots .dot, .nav-dots .dot { width: 6px !important; height: 6px !important; }
  .dots .tip, .nav-dots .tooltip { display: none !important; }
  .scroll-hint { display: none !important; }

  /* ── Texto + captura: juntos si caben; si no, deck-movil.js los separa ── */
  .split { display: block !important; }
  .split > .col-media { margin-top: 22px; }
  .m-screen > .col-media:not(:first-child) { margin-top: 16px; }
  .split > .col-media.stack { display: flex; flex-direction: column; gap: 14px; }

  /* Las capturas y las pantallas de la app con su proporción fija: así se
     pueden medir antes de que carguen (van con carga diferida). */
  .browser img { aspect-ratio: 1700 / 780; width: 100%; height: auto; object-fit: cover; object-position: top; }
  .phone img { aspect-ratio: 404 / 900; }

  /* ── Carriles horizontales ─────────────────────────────────────────── */
  .cards, .plans, .phones, .impact-grid, .stat-grid, .promo-container div[style*="grid-template-columns"] {
    display: grid !important;
    grid-auto-flow: column; grid-template-columns: none !important;
    grid-auto-columns: 80%;
    gap: 12px !important;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    margin-left: -5vw !important; margin-right: -5vw !important;
    padding: 4px 5vw 10px !important;
    scroll-padding: 0 5vw;
    scrollbar-width: none;
    align-items: start !important;          /* cada tarjeta con su alto: sin huecos vacíos */
    justify-content: start !important;
    flex-wrap: nowrap !important;
  }
  .cards::-webkit-scrollbar, .plans::-webkit-scrollbar, .phones::-webkit-scrollbar,
  .impact-grid::-webkit-scrollbar, .stat-grid::-webkit-scrollbar, .promo-container div[style*="grid-template-columns"]::-webkit-scrollbar { display: none; }
  .cards > *, .plans > *, .phones > *, .impact-grid > *, .stat-grid > *, .promo-container div[style*="grid-template-columns"] > * { scroll-snap-align: start; min-width: 0; }
  /* Comparativa «sin ecosistema / con ecosistema» de la portada: dos cajas para deslizar */
  .promo-container div[style*="grid-template-columns"] { grid-auto-columns: 86%; }
  .promo-box { padding: 18px 16px !important; justify-content: flex-start !important; }
  .promo-list li { font-size: .9rem; }
  .plans { grid-auto-columns: 84%; }
  .phones { grid-auto-columns: 46%; align-items: end !important; }
  .phones .phone img { height: auto !important; width: 100% !important; }
  .phone { transform: none !important; }

  /* Aviso de que se puede deslizar (lo añade deck-movil.js debajo de cada carril) */
  .m-rail-hint { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 6px; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .45); }
  .m-rail-hint i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .25); transition: background .25s, transform .25s; }
  .m-rail-hint i.on { background: var(--primary, #00f2ea); transform: scale(1.3); }

  /* Cifras en una fila compacta, no apiladas */
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; margin-top: 18px !important; }
  .stats .stat { padding: 11px 8px !important; }
  .stats .stat-n { font-size: 1.5rem !important; }
  .stats .stat-l { font-size: .74rem !important; line-height: 1.3; }

  /* Etiquetas: una línea deslizable */
  .pills { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; margin-right: -5vw; padding-right: 5vw; }
  .pills .pill { flex: none; }

  /* Texto algo más compacto para que quepa sin perder legibilidad */
  .flist { gap: 8px !important; margin-top: 14px !important; }
  .flist li { font-size: .9rem; line-height: 1.45; }
  .card { padding: 15px 14px !important; }
  .card p { font-size: .88rem; }

  .m-foot { scroll-snap-align: end; scroll-snap-stop: always; }

  /* Una pantalla por gesto: sin esto, un deslizamiento rápido pasa de largo
     por dos o tres pantallas y no hay forma de frenar en la que se quiere. */
  .deck > section, .snap-container > section, .presentation > section, .m-screen { scroll-snap-stop: always !important; }

  /* Portada: la sección ya deja sitio a la cabecera; el contenedor no suma más */
  .snap-container > section > .container { padding: 0 !important; }   /* la sección ya pone el margen lateral */
  .snap-container > section:not(.m-multi) > .container { gap: 18px !important; }
  /* Las 8 funciones, en 2 columnas compactas en vez de una lista de 8 */
  .feature-grid-small { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; margin-top: 4px !important; }
  .feature-grid-small .feature-box { min-height: 0 !important; padding: 12px 12px !important; flex-direction: column !important; align-items: flex-start !important;
    justify-content: center !important; text-align: left !important; gap: 4px !important; }
  .feature-grid-small .feature-box .impact-icon-linear { width: 22px !important; height: 22px !important; margin: 0 0 4px !important; }
  .feature-grid-small .feature-box span[style] { margin-top: 0 !important; font-size: .74rem !important; }
  .feature-grid-small .feature-box p { font-size: .76rem !important; line-height: 1.35; }
  .feature-grid-small .feature-title { font-size: .86rem !important; }
  .testimonial-slider { height: 330px !important; margin-top: 10px !important; }
  .testimonial-nav { margin-top: 8px !important; }

  /* ── Lo que parte deck-movil.js ─────────────────────────────────────── */
  .m-multi, .deck > section.m-multi, .snap-container > section.m-multi { scroll-snap-align: none !important; padding-top: 0 !important; padding-bottom: 0 !important; display: block !important; min-height: 0 !important; }
  /* Una sección partida no puede recortar con «hidden»: eso la convierte en
     contenedor de scroll y sus pantallas dejan de ser puntos de parada (el
     dedo pasaba de largo varias pantallas). «clip» recorta sin ese efecto. */
  .deck > section.m-multi, .snap-container > section.m-multi, .m-multi, .m-multi :has(.m-screen) {
    overflow: visible !important; overflow: clip !important;
  }
  /* Entre pantallas partidas no puede quedar hueco: si no, el ajuste salta. */
  .m-multi > .container, .m-multi > .wrap, .m-multi.col-media, .split > .m-multi, .m-multi :has(> .m-screen) { gap: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; }
  .m-screen {
    min-height: 100vh; min-height: 100dvh;
    scroll-snap-align: start;
    display: flex; flex-direction: column; justify-content: center;
    padding: 70px 0 24px;
  }
  /* Pantalla con un bloque grande: menos margen para que quepa entero */
  .m-screen.m-tight { padding: 62px 0 6px; }
  /* Carril y sus puntos van juntos */
  .m-rail-wrap { min-width: 0; }
}

/* Tipografía del móvil: escala contenida y menos aire entre título, subtítulo
   y texto, para un aspecto más limpio y que cada pantalla respire.
   Va por encima de los tamaños propios de cada página. */
@media (max-width: 900px) and (min-height: 480px) {
  :is(.deck, .snap-container, .presentation) h1 { font-size: 1.5rem !important; line-height: 1.15 !important; letter-spacing: -.01em; margin-bottom: 10px !important; }
  :is(.deck, .snap-container, .presentation) h2 { font-size: 1.22rem !important; line-height: 1.22 !important; letter-spacing: -.005em; margin-bottom: 8px !important; }
  :is(.deck, .snap-container, .presentation) h3 { font-size: .98rem !important; line-height: 1.3 !important; }
  :is(.deck, .snap-container, .presentation) :is(h1, h2, h3) :is(span, strong, em) { font-size: inherit !important; }
  .sub-title-primary { font-size: .95rem !important; margin-bottom: 12px !important; }
  .kicker, .eyebrow { font-size: .62rem !important; letter-spacing: .16em !important; margin-bottom: 8px !important; }
  .lead, .hero p, .hero-copy { font-size: .86rem !important; line-height: 1.5 !important; }
  :is(.deck, .snap-container, .presentation) section p { font-size: .84rem; line-height: 1.5; }
  :is(.deck, .snap-container, .presentation) section p:not(:last-child) { margin-bottom: 10px !important; }
  :is(.deck, .snap-container, .presentation) section li, .flist li { font-size: .82rem !important; line-height: 1.45 !important; }
  :is(.deck, .snap-container, .presentation) section strong { font-size: inherit; }
  .stat-n, .stats .stat-n { font-size: 1.2rem !important; }
  .stats .stat-l, .stat-l { font-size: .68rem !important; }
  .plan-n { font-size: .95rem !important; }
  .plan .price, .price { font-size: 1.6rem !important; }
  .card { padding: 12px 13px !important; }
  .card h3 { font-size: .9rem !important; }
  .card p { font-size: .8rem !important; }
  .promo-box p, .promo-list li { font-size: .8rem !important; }
  .feature-grid-small .feature-title { font-size: .8rem !important; }
  .feature-grid-small .feature-box p { font-size: .72rem !important; }
  /* Botones algo más finos */
  :is(.deck, .snap-container, .presentation) :is(.btn, .button, .actions a, .buttons-container a) { font-size: .85rem !important; padding-top: 11px !important; padding-bottom: 11px !important; }
}

/* Móviles con poca pantalla útil: rellenos más compactos */
@media (max-width: 900px) and (min-height: 480px) and (max-height: 720px) {
  .plan { padding: 16px 15px !important; }
  .plan ul { margin: 10px 0 14px !important; gap: 5px !important; }
  .feature-grid-small .feature-box { padding: 10px 11px !important; }
  .stat-card { padding: 14px 13px !important; }
}

/* Ventana de bienvenida de la portada, a la misma escala */
@media (max-width: 900px) {
  .modal-content h2 { font-size: 1.35rem !important; }
  .modal-content p { font-size: .9rem !important; }
}