/** * SparkLink / encendedor — prioridad móvil (no afecta otras landings). * Requiere class "landing-mobile-html" en y "landing-mobile-first" en . */ html.landing-mobile-html { scroll-padding-top: 4.5rem; } /* —— Viewport y chrome del navegador —— */ .landing-mobile-first { -webkit-text-size-adjust: 100%; } /* —— Hero: producto primero en pantallas estrechas (orden de lectura móvil) —— */ @media (max-width: 899px) { .landing-mobile-first .hero-grid { gap: 1.35rem; } .landing-mobile-first .hero-grid .hero-visual { order: -1; } .landing-mobile-first .hero-grid .hero-copy { order: 1; } .landing-mobile-first .hero--focus { padding-top: clamp(1rem, 4vw, 1.75rem); } .landing-mobile-first .hero h1 { font-size: clamp(1.42rem, 6.2vw, 2.1rem); line-height: 1.14; } .landing-mobile-first .hero .lead { font-size: 1.06rem; line-height: 1.55; } .landing-mobile-first .hero-bullets { max-width: none; } .landing-mobile-first .hero-bullets li { font-size: 1.04rem; padding-left: 1.45rem; } /* Imagen hero: altura acotada para dejar copy “above the fold” */ .landing-mobile-first .hero-visual--media img, .landing-mobile-first .hero-visual--media .hero-video { max-height: min(52vh, 420px); width: 100%; object-fit: cover; object-position: center; } } /* —— CTAs: área táctil mínima ~48px (WCAG 2.5.5) —— */ @media (max-width: 899px) { .landing-mobile-first .cta-row { flex-direction: column; align-items: stretch; gap: 0.65rem; } .landing-mobile-first .cta-row .btn-primary, .landing-mobile-first .cta-row .btn-ghost { width: 100%; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; text-align: center; box-sizing: border-box; } .landing-mobile-first .site-header .cta-mini { min-height: 44px; padding: 0.5rem 1rem; display: inline-flex; align-items: center; justify-content: center; } .landing-mobile-first .pack-card .btn-primary.btn-block { min-height: 48px; font-size: 1.02rem; padding-top: 0.95rem; padding-bottom: 0.95rem; } .landing-mobile-first .final-cta .btn-primary { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding-left: 1.5rem; padding-right: 1.5rem; } } /* —— Safe area (iPhone con notch / barra home) —— */ @media (max-width: 899px) { .landing-mobile-first .wrap { padding-left: max(1rem, env(safe-area-inset-left, 0px)); padding-right: max(1rem, env(safe-area-inset-right, 0px)); } .landing-mobile-first .top-offer-bar { padding-left: max(1rem, env(safe-area-inset-left, 0px)); padding-right: max(1rem, env(safe-area-inset-right, 0px)); } body.landing-mobile-first .site-header .header-inner { padding-left: max(0, env(safe-area-inset-left, 0px)); padding-right: max(0, env(safe-area-inset-right, 0px)); } body.landing-mobile-first.has-sticky { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); } .landing-mobile-first .sticky-cta { padding-left: max(1rem, env(safe-area-inset-left, 0px)); padding-right: max(1rem, env(safe-area-inset-right, 0px)); padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px)); } } /* —— Chips y prueba social: no overflow horizontal —— */ @media (max-width: 599px) { .landing-mobile-first .hero-chips { gap: 0.4rem; } .landing-mobile-first .hero-chip { flex: 1 1 calc(50% - 0.25rem); min-width: 0; } .landing-mobile-first .social-proof-line { font-size: 0.9rem; line-height: 1.4; } .landing-mobile-first .hero-cta-microcopy, .landing-mobile-first .hero-trust-line { font-size: 0.82rem; line-height: 1.45; } } /* —— Toque: feedback suave —— */ @media (hover: none) and (pointer: coarse) { .landing-mobile-first .btn-primary:active, .landing-mobile-first .btn-ghost:active, .landing-mobile-first .cta-mini:active { transform: scale(0.98); opacity: 0.95; } } /* —— Página de gracias —— */ @media (max-width: 899px) { body.landing-mobile-first.thank-you-page { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); } body.landing-mobile-first.thank-you-page .thank-you-shell { padding-left: max(0.5rem, env(safe-area-inset-left, 0px)); padding-right: max(0.5rem, env(safe-area-inset-right, 0px)); } body.landing-mobile-first.thank-you-page .thank-you-actions .btn-primary, body.landing-mobile-first.thank-you-page .thank-you-back { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; } }