/* ==================================================== Mobile / App UX polish (Innoval, 2026-05-15) Hojas de mejoras transversales aplicadas a todas las páginas del sitio. Importar al final del . ==================================================== */ /* iOS / Android: comportamiento de tap */ html, body { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(255, 145, 17, 0.18); text-rendering: optimizeLegibility; } /* Touch targets accesibles: links y botones del menú al menos 44x44 */ nav a, .nav a, .nav-links a, .top-nav .nav-links a { min-height: 44px; display: inline-flex; align-items: center; padding: 6px 4px; } /* Hamburger: área de toque mínima 44x44 (el ícono visual sigue siendo pequeño) */ .hamburger, .top-nav .hamburger { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; border-radius: 6px; padding: 10px; } /* Focus visible accesible para teclado (sin afectar mouse) */ a:focus-visible, button:focus-visible, .btn:focus-visible, .nav-cta:focus-visible { outline: 3px solid #ff9111; outline-offset: 2px; border-radius: 4px; } /* WhatsApp flotante: garantizar tamaño y separar del CTA en mobile */ @media (max-width: 768px) { a[aria-label="Contactar por WhatsApp"] { width: 56px !important; height: 56px !important; bottom: 1rem !important; right: 1rem !important; } } /* Tipografía mínima legible: nunca menos de 14px en body en mobile */ @media (max-width: 480px) { body { font-size: 16px; } p, .card-body p, .servicio-main p, .programa-desc, .ruta-who, .modular-table td, .suite-card-desc, .audiencia-item p { font-size: 0.95rem !important; line-height: 1.65 !important; } } /* Evitar overflow horizontal en mobile (causado por imágenes o tablas anchas) */ html, body { overflow-x: hidden; } img, video, iframe, table { max-width: 100%; height: auto; } /* Tablas responsivas (Si una tabla excede el viewport, scroll horizontal interno) */ .modular-table, .responsive-table-wrap > table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } @media (min-width: 768px) { .modular-table { display: table; } } /* CTAs mobile: ancho mínimo accesible */ @media (max-width: 480px) { .btn, .cta-button, .programa-cta, .curso-cta { width: 100%; text-align: center; padding: 0.95rem 1.5rem !important; font-size: 0.95rem !important; } } /* Hero tipográfico (suite-display) en mobile: que no rompa layout */ @media (max-width: 540px) { .suite-display { font-size: clamp(4rem, 22vw, 7rem) !important; } .suite-tagline { font-size: 1rem !important; } } /* Quita la meta del hero cuando se cae a mobile (la info se reproduce abajo) */ @media (max-width: 700px) { .suite-hero-meta { position: static !important; max-width: 100% !important; text-align: left !important; margin-bottom: 1.2rem; } .suite-opener-meta { position: static !important; max-width: 100% !important; text-align: left !important; margin-bottom: 0.6rem; } } /* Reducir motion para usuarios con preferencia */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } } /* Soporte modo oscuro suave (opcional, no fuerza dark mode) */ @media (prefers-color-scheme: dark) { /* Mantener look del sitio. Esta es un placeholder para futuras mejoras dark. */ } /* PWA-ready: safe-area insets para notch en iOS */ @supports (padding: max(0px)) { .top-nav { padding-left: max(5%, env(safe-area-inset-left)); padding-right: max(5%, env(safe-area-inset-right)); } footer { padding-bottom: max(1.5rem, env(safe-area-inset-bottom)); } a[aria-label="Contactar por WhatsApp"] { bottom: max(1.5rem, env(safe-area-inset-bottom)) !important; right: max(1.5rem, env(safe-area-inset-right)) !important; } } /* Mejor scroll behavior en mobile para anchors */ html { scroll-padding-top: 76px; } /* Cards/links con cursor pointer */ a[class*="card"], .suite-card, .programa-card, .servicio-link, .sister-tile { cursor: pointer; } /* Theme color para barra de navegador del browser/app */ /* (se aplica vía meta tag inyectado, ver script inyector) */