/* ══════════════════════════════════════════════════════════ MAPIIA · Cinematic GIS Landing — v3 Translucent Glassmorphism · Full Responsive · Space Grotesk ══════════════════════════════════════════════════════════ */ /* ── Design Tokens ── */ :root { --accent: #00e5ff; --accent-warm: #f5a623; --accent-green: #00ff88; /* Glass — translucent so the 3D scene shows through */ --glass-bg: rgba(4, 9, 22, 0.46); --glass-bg-solid: rgba(4, 9, 24, 0.74); /* for text-heavy areas */ --glass-border: rgba(0, 229, 255, 0.22); --glass-blur: blur(28px) saturate(190%); --text-primary: #f0f8ff; --text-secondary: rgba(224, 240, 255, 0.88); --text-muted: rgba(180, 210, 240, 0.7); --font-sans: 'Space Grotesk', system-ui, sans-serif; --font-mono: 'Roboto Mono', monospace; --easing: cubic-bezier(0.16, 1, 0.3, 1); --easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Spacing scale (responsive via CSS custom props) */ --px: clamp(18px, 5vw, 52px); /* horizontal page padding */ --py: clamp(20px, 5vh, 52px); /* vertical section padding */ } /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: auto; /* GSAP controla el scroll, no el navegador */ -webkit-text-size-adjust: 100%; /* Evita zoom de fuente automático en iOS */ text-size-adjust: 100%; /* Color de fondo en el ELEMENTO RAÍZ: cubre toda el área scrolleable y la zona de overscroll → nunca aparece blanco al hacer scroll en móvil. */ background-color: #030a17; } body { font-family: var(--font-sans); color: var(--text-primary); background: #030a17; overflow-x: hidden; cursor: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overscroll-behavior: none; /* Elimina rebote elástico en iOS y Android */ } /* ── Scroll táctil premium para iOS y Android ── height:100% es OBLIGATORIO: como body tiene overflow-x:hidden, el navegador lo convierte en contenedor de scroll y iOS necesita una altura definida para poder scrollearlo. Sin esto, el scroll se BLOQUEA en iOS. El fondo blanco se evita con el color de fondo en (no depende de la altura del body). */ @media (max-width: 768px) { html, body { height: 100%; } #scroll-container { -webkit-overflow-scrolling: touch; scroll-snap-type: none; /* Sin snap forzado — flujo natural */ } } /* Touch devices: restore normal cursor */ @media (hover: none) { body { cursor: auto; } } /* ══ Garantía: ningún "pin" bloquea el scroll en táctil ═══════ Neutraliza las secciones con pin/altura fija en CUALQUIER ancho táctil (cubre tablets 769–1023px). NO se toca html/body aquí: su altura la maneja el bloque @media(max-width:768px) de arriba, imprescindible para el scroll de iOS. */ @media (hover: none) { .section-pin-outer, .modules-pin, .cta-pin { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; position: static !important; transform: none !important; } } a { color: inherit; text-decoration: none; } strong { font-weight: 600; color: var(--text-primary); } em { font-style: italic; color: var(--accent); } .mono { font-family: var(--font-mono); } .accent-text { color: var(--accent); } .accent-green-text { color: var(--accent-green); } /* ══ Loader ═══════════════════════════════════════════════ */ #loader { position: fixed; inset: 0; z-index: 9999; background: #030a17; display: flex; align-items: center; justify-content: center; } .loader-inner { text-align: center; width: min(300px, 80vw); padding: 0 16px; } .loader-logo { font-size: clamp(1.8rem, 6vw, 2.4rem); font-weight: 700; letter-spacing: 0.28em; color: var(--accent); margin-bottom: 2rem; text-shadow: 0 0 40px rgba(0,229,255,0.7), 0 0 80px rgba(0,229,255,0.3); } .loader-status { font-size: 0.7rem; color: var(--text-muted); letter-spacing: 0.1em; margin-bottom: 1rem; } .loader-bar { width: 100%; height: 2px; background: rgba(0,229,255,0.12); border-radius: 2px; overflow: hidden; margin-bottom: 0.5rem; } .loader-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent), var(--accent-warm)); box-shadow: 0 0 12px var(--accent); transition: width 0.12s linear; } .loader-pct { font-size: 0.65rem; color: var(--accent); letter-spacing: 0.12em; } .blink { animation: blink 1s step-start infinite; } @keyframes blink { 50% { opacity: 0; } } /* ══ WebGL Canvas ════════════════════════════════════════ */ #webgl-canvas { position: fixed; inset: 0; z-index: 0; width: 100vw !important; height: 100vh !important; filter: contrast(1.06) saturate(1.14); } /* ══ Post-FX ═════════════════════════════════════════════ */ #post-fx { position: fixed; inset: 0; z-index: 3; pointer-events: none; } #vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 85% 80% at 50% 50%, transparent 30%, rgba(2, 6, 18, 0.5) 72%, rgba(2, 6, 18, 0.85) 100%); } #film-grain { position: absolute; inset: 0; opacity: 0.045; mix-blend-mode: screen; image-rendering: pixelated; width: 100%; height: 100%; } /* ══ HUD ═════════════════════════════════════════════════ */ #hud { position: fixed; inset: 0; z-index: 15; pointer-events: none; padding: 16px 20px; } .hud-tl-text, .hud-tr-text { position: absolute; top: 16px; font-size: clamp(0.52rem, 1.2vw, 0.62rem); letter-spacing: 0.14em; color: rgba(0,229,255,0.65); text-transform: uppercase; } .hud-tl-text { left: 20px; } .hud-tr-text { right: 20px; } .hud-sep { margin: 0 8px; opacity: 0.35; } .hud-corner { position: absolute; width: 12px; height: 12px; border-color: rgba(0,229,255,0.28); border-style: solid; } .hud-c-tl { top: 8px; left: 8px; border-width: 1px 0 0 1px; } .hud-c-tr { top: 8px; right: 8px; border-width: 1px 1px 0 0; } .hud-c-bl { bottom: 8px; left: 8px; border-width: 0 0 1px 1px; } .hud-c-br { bottom: 8px; right: 8px; border-width: 0 1px 1px 0; } @media (max-width: 480px) { .hud-tr-text { display: none; } .hud-tl-text { font-size: 0.5rem; letter-spacing: 0.08em; } } /* ══ Cursor (desktop only) ═══════════════════════════════ */ #cursor { position: fixed; z-index: 9998; pointer-events: none; top: 0; left: 0; transform: translate(-50%, -50%); } #cursor-ring { width: 38px; height: 38px; animation: cursor-spin 10s linear infinite; } @keyframes cursor-spin { to { transform: rotate(360deg); } } #cursor-coords { position: absolute; top: 42px; left: 50%; transform: translateX(-50%); font-size: 0.58rem; color: var(--accent); white-space: nowrap; opacity: 0.8; letter-spacing: 0.04em; text-shadow: 0 0 8px var(--accent); } @media (hover: none) { #cursor { display: none; } } /* ══ Scroll container ════════════════════════════════════ */ #scroll-container { position: relative; z-index: 20; touch-action: pan-y; /* Permite scroll vertical, bloquea gestos horizontales */ } /* ══ Glassmorphism Panel ═════════════════════════════════ Translucent by default — backdrop-filter creates the frosted-glass effect so text stays readable even though the 3D scene is visible behind */ .glass-panel { background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); border-radius: 16px; padding: 2.25rem 2.5rem; box-shadow: 0 0 0 0.5px rgba(0,229,255,0.06), 0 8px 48px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -1px 0 rgba(0,0,0,0.25); } /* ══════════════════════════════════════════════════════════ S1: HERO ══════════════════════════════════════════════════════════ */ .hero-section { position: relative; min-height: 100vh; min-height: 100svh; /* Evita el salto al mostrar/ocultar URL bar en móvil */ display: flex; align-items: center; justify-content: flex-start; padding: var(--py) var(--px); } .hero-panel { max-width: 640px; width: 100%; /* slightly denser so title pops against globe */ background: rgba(4, 9, 22, 0.52); } .pill { display: inline-block; padding: 0.3em 1em; border: 1px solid rgba(0,229,255,0.45); border-radius: 999px; font-size: 0.68rem; letter-spacing: 0.14em; color: var(--accent); margin-bottom: 1.4rem; text-transform: uppercase; background: rgba(0,229,255,0.07); text-shadow: 0 0 12px rgba(0,229,255,0.5); } .hero-title { font-size: clamp(2rem, 5.5vw, 4.4rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.025em; margin-bottom: 1rem; text-shadow: 0 2px 30px rgba(0,0,0,0.9); } .reveal-line { display: block; overflow: hidden; } .hero-sub { font-size: clamp(0.95rem, 2vw, 1.15rem); font-weight: 300; color: var(--text-secondary); margin-bottom: 0.85rem; letter-spacing: 0.01em; } .hero-body { font-size: clamp(0.875rem, 1.6vw, 0.975rem); line-height: 1.75; color: var(--text-secondary); margin-bottom: 1.75rem; } /* ── CTAs ── */ .cta-row { display: flex; gap: 0.85rem; flex-wrap: wrap; margin-bottom: 2.25rem; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; padding: 0.85em 1.7em; border-radius: 10px; font-family: var(--font-sans); font-size: 0.9rem; font-weight: 600; cursor: none; position: relative; overflow: hidden; transition: transform 0.25s var(--easing), box-shadow 0.25s var(--easing); border: none; letter-spacing: 0.02em; white-space: nowrap; } @media (hover: none) { .btn { cursor: auto; } } .btn:active { transform: scale(0.97); } @media (hover: hover) { .btn:hover { transform: translateY(-3px) scale(1.03); } } .btn-primary { background: linear-gradient(135deg, var(--accent) 0%, #0096c7 100%); color: #030a17; font-weight: 700; } .btn-primary:hover { box-shadow: 0 6px 30px rgba(0,229,255,0.55), 0 0 60px rgba(0,229,255,0.15); } .btn-glow { position: absolute; inset: 0; background: radial-gradient(circle at 50% -20%, rgba(255,255,255,0.28), transparent 65%); pointer-events: none; } .btn-ghost { background: transparent; border: 1px solid rgba(0,229,255,0.3); color: var(--text-primary); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent); } .btn-full { width: 100%; margin-top: 0.7rem; } .btn-wa { background: rgba(37,211,102,0.1); border: 1px solid rgba(37,211,102,0.35); color: #3dda7a; font-weight: 500; } .btn-wa:hover { background: rgba(37,211,102,0.18); box-shadow: 0 0 20px rgba(37,211,102,0.18); } .arrow-anim { display: inline-block; animation: bounce-y 2s ease-in-out infinite; } @keyframes bounce-y { 0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)} } /* ── Stats bar ── */ .stats-bar { display: flex; align-items: center; border-top: 1px solid var(--glass-border); padding-top: 1.4rem; gap: 0; } .stat { flex: 1; text-align: center; padding: 0 4px; } .stat-val { display: block; font-size: clamp(1.4rem, 3.5vw, 2.1rem); font-weight: 500; color: var(--accent); line-height: 1; margin-bottom: 0.3rem; text-shadow: 0 0 20px rgba(0,229,255,0.5); } .stat-lbl { font-size: clamp(0.58rem, 1.1vw, 0.68rem); color: var(--text-muted); letter-spacing: 0.1em; text-transform: uppercase; } .stat-div { width: 1px; height: 36px; background: var(--glass-border); flex-shrink: 0; } /* ── Scroll hint ── */ .scroll-hint { position: absolute; bottom: clamp(20px, 4vh, 36px); right: var(--px); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; color: var(--text-muted); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; } .scroll-line-anim { width: 1px; height: 44px; background: linear-gradient(to bottom, var(--accent), transparent); animation: scroll-drip 2.2s ease-in-out infinite; } @keyframes scroll-drip { 0% { transform: scaleY(0); transform-origin: top; opacity: 1; } 55% { transform: scaleY(1); transform-origin: top; opacity: 1; } 100% { transform: scaleY(1); transform-origin: bottom; opacity: 0; } } @media (max-width: 480px) { .scroll-hint { display: none; } } /* ══════════════════════════════════════════════════════════ MODULES: Pinned sequential ══════════════════════════════════════════════════════════ */ .section-pin-outer { position: relative; } .modules-pin { position: relative; width: 100%; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--py) var(--px); overflow: hidden; } /* Header pinned top */ .modules-header { position: absolute; top: clamp(16px, 5vh, 48px); left: var(--px); right: var(--px); opacity: 0; transform: translateY(-16px); } .eyebrow { font-size: clamp(0.6rem, 1.2vw, 0.68rem); letter-spacing: 0.18em; color: var(--accent); text-transform: uppercase; margin-bottom: 0.5rem; text-shadow: 0 0 15px rgba(0,229,255,0.5); } .section-title { font-size: clamp(1.5rem, 3.5vw, 3.2rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.12; text-shadow: 0 2px 20px rgba(0,0,0,0.7); } /* Progress dots — desktop: right side vertical strip */ .mod-progress-wrap { position: absolute; top: 50%; right: var(--px); transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.85rem; opacity: 0; z-index: 5; } .mod-progress-num { font-size: 0.65rem; color: var(--accent); letter-spacing: 0.12em; } .mod-dots { display: flex; flex-direction: column; gap: 8px; } .dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(0,229,255,0.18); border: 1px solid rgba(0,229,255,0.35); cursor: none; padding: 0; transition: all 0.3s var(--easing); /* Larger tap target on mobile via pseudo-element */ position: relative; } .dot::before { content: ''; position: absolute; inset: -8px; border-radius: 50%; } @media (hover: none) { .dot { cursor: auto; } } .dot.active { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 14px var(--accent); transform: scale(1.45); } /* Slides stack */ .mod-slides-container { position: relative; width: 100%; flex: 1; display: flex; align-items: flex-end; } .mod-slide { position: absolute; bottom: 0; left: 0; width: min(1014px, calc(100% - 60px)); /* 780 × 1.3 — 30% wider */ opacity: 0; transform: translateX(60px); pointer-events: none; } .mod-slide.is-active { pointer-events: auto; } /* Module panel — translucent glass */ .mod-panel { padding: clamp(2.08rem, 5.07vw, 3.38rem) clamp(2.08rem, 5.85vw, 4.23rem); margin-bottom: 0.5rem; border-left: 2px solid var(--accent); background: rgba(4, 9, 22, 0.48); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); transition: border-color 0.4s ease; /* Suaviza cambio en módulo featured */ } .mod-panel--featured { border-color: var(--accent-green); background: rgba(0, 255, 136, 0.06); } .mod-top-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.85rem; flex-wrap: wrap; } .mod-num { font-size: 0.88rem; letter-spacing: 0.18em; color: var(--accent); opacity: 0.8; } .mod-badge-small { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.2em 0.65em; border: 1px solid rgba(0,229,255,0.3); border-radius: 4px; color: rgba(0,229,255,0.75); } .mod-title { font-size: clamp(1.85rem, 4.23vw, 2.44rem); font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; margin-bottom: 0.9rem; color: var(--text-primary); text-shadow: 0 2px 16px rgba(0,0,0,0.8); } .mod-desc { font-size: clamp(1.24rem, 2.34vw, 1.40rem); line-height: 1.78; color: var(--text-secondary); margin-bottom: 1.3rem; text-shadow: 0 1px 8px rgba(0,0,0,0.6); } .mod-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; } .tag { font-size: clamp(0.78rem, 1.43vw, 0.88rem); padding: 0.25em 0.8em; border: 1px solid rgba(0,229,255,0.28); border-radius: 6px; color: rgba(0,229,255,0.9); font-family: var(--font-mono); letter-spacing: 0.04em; background: rgba(0,229,255,0.05); } /* Visual label — vertical text on right, desktop only */ .mod-visual-label { position: absolute; top: 50%; right: -6vw; transform: translateY(-50%); opacity: 0; writing-mode: vertical-rl; text-orientation: mixed; font-size: 0.6rem; letter-spacing: 0.15em; } /* ══════════════════════════════════════════════════════════ CTA SECTION ══════════════════════════════════════════════════════════ */ .cta-pin { height: 100vh; height: 100svh; width: 100%; display: flex; align-items: center; justify-content: center; padding: var(--py) var(--px); } .cta-layout { display: grid; grid-template-columns: 1fr 400px; gap: clamp(2rem, 4vw, 5rem); width: 100%; max-width: 1180px; align-items: start; } /* Left: Benefits — translucent glass */ .cta-left { background: rgba(3, 7, 22, 0.50); backdrop-filter: blur(30px) saturate(200%); -webkit-backdrop-filter: blur(30px) saturate(200%); border: 1px solid rgba(0, 229, 255, 0.18); border-radius: 18px; padding: clamp(1.5rem, 3vw, 2.75rem) clamp(1.5rem, 3.5vw, 3rem); } .cta-h2 { margin: 1.1rem 0 1.6rem; } .benefits-list { list-style: none; display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 1.75rem; } .benefit { display: flex; align-items: flex-start; gap: 0.85rem; font-size: clamp(0.85rem, 1.5vw, 0.975rem); line-height: 1.6; color: var(--text-primary); opacity: 0; transform: translateX(-28px); text-shadow: 0 1px 8px rgba(0,0,0,0.6); } .chk { color: var(--accent-green); font-weight: 700; font-size: 1rem; flex-shrink: 0; margin-top: 1px; text-shadow: 0 0 10px rgba(0,255,136,0.5); } /* Social proof */ .social-proof { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; padding: 1rem 1.25rem; border: 1px solid rgba(0,229,255,0.22); border-radius: 12px; background: rgba(0, 8, 28, 0.5); opacity: 0; transform: translateY(16px); } .proof-item { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; } .stars { font-size: 0.82rem; line-height: 1; } .proof-val { font-size: 1.25rem; font-weight: 500; color: var(--accent); text-shadow: 0 0 15px rgba(0,229,255,0.4); } .proof-sub { font-size: 0.62rem; color: var(--text-muted); letter-spacing: 0.08em; text-transform: uppercase; } .proof-icon { font-size: 1.2rem; } .proof-div { width: 1px; height: 32px; background: var(--glass-border); } /* Right: Pricing card — slightly more opaque for readability */ .cta-right { position: sticky; top: calc(50vh - 320px); } .pricing-card { padding: clamp(1.5rem, 3vw, 2.25rem); background: rgba(3, 7, 24, 0.68); backdrop-filter: blur(32px) saturate(200%); -webkit-backdrop-filter: blur(32px) saturate(200%); border-color: rgba(0,229,255,0.30); box-shadow: 0 20px 60px rgba(0,0,0,0.65), 0 0 50px rgba(0,229,255,0.07), inset 0 1px 0 rgba(255,255,255,0.09); } .pricing-fire { font-size: 0.88rem; font-weight: 600; color: #ff6b35; text-shadow: 0 0 16px rgba(255,107,53,0.6); margin-bottom: 1.4rem; letter-spacing: 0.04em; opacity: 0; transform: translateY(-10px); } .pricing-label { font-size: 0.62rem; letter-spacing: 0.2em; color: var(--text-muted); margin-bottom: 0.4rem; opacity: 0; } .pricing-amount { display: flex; align-items: baseline; gap: 0.2rem; margin-bottom: 0.5rem; opacity: 0; transform: scale(0.9); } .currency { font-size: 1.5rem; color: rgba(180,215,255,0.8); } .amount { font-size: clamp(2.6rem, 6vw, 3.6rem); font-weight: 700; color: #ffffff; line-height: 1; letter-spacing: -0.02em; text-shadow: 0 0 30px rgba(0,229,255,0.35); } .price-cop { font-size: 1rem; color: rgba(180,215,255,0.8); font-family: var(--font-mono); } .pricing-note { font-size: 0.8rem; color: rgba(200,228,255,0.85); margin-bottom: 1.5rem; opacity: 0; } .price-benefits { list-style: none; display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 1.4rem; padding-bottom: 1.4rem; border-bottom: 1px solid var(--glass-border); } .pb-item { font-size: clamp(0.8rem, 1.4vw, 0.875rem); color: rgba(220, 242, 255, 0.95); display: flex; gap: 0.5em; opacity: 0; transform: translateX(16px); text-shadow: 0 1px 6px rgba(0,0,0,0.5); } .date-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.4rem; font-size: clamp(0.82rem, 1.4vw, 0.875rem); color: rgba(220,242,255,0.92); opacity: 0; } .date-icon { font-size: 1.2rem; } .date-time { display: block; font-size: 0.72rem; color: var(--accent); margin-top: 0.15rem; font-family: var(--font-mono); } .cta-buttons { opacity: 0; transform: translateY(16px); } /* ══ Footer ══════════════════════════════════════════════ */ .footer-section { min-height: 60vh; display: flex; align-items: flex-end; justify-content: center; padding: var(--py) var(--px) clamp(32px, 6vh, 60px); } .footer-wrap { text-align: center; width: 100%; } .footer-logo { font-size: clamp(2rem, 8vw, 3.2rem); font-weight: 700; letter-spacing: 0.32em; color: var(--accent); text-shadow: 0 0 40px rgba(0,229,255,0.5), 0 0 80px rgba(0,229,255,0.2); margin-bottom: 0.75rem; display: block; } .footer-tag { font-size: 0.8rem; color: var(--text-muted); letter-spacing: 0.08em; margin-bottom: 1.5rem; } .footer-nav { display: flex; gap: 0.75rem; justify-content: center; align-items: center; margin-bottom: 1.25rem; flex-wrap: wrap; } .footer-nav a { font-size: 0.8rem; color: var(--text-muted); transition: color 0.2s; } .footer-nav a:hover { color: var(--accent); } .footer-nav span { color: var(--glass-border); } .footer-copy { font-size: 0.68rem; color: rgba(180,210,240,0.35); letter-spacing: 0.06em; } /* ══ Utilities ════════════════════════════════════════════ */ .scanner-init { opacity: 0; } /* ══ Accesibilidad: foco visible por teclado ══════════════ El cursor está oculto en desktop (cursor:none), por eso el foco de teclado DEBE ser claramente visible para navegación. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } .btn:focus-visible { outline-offset: 4px; } /* Quita el outline solo cuando el foco viene del ratón, no del teclado */ :focus:not(:focus-visible) { outline: none; } /* ══ Reduce el movimiento si el sistema lo solicita ════════ Neutraliza animaciones CSS decorativas e infinitas (parpadeo, giro de cursor, drift de estrellas, rebotes). El film-grain y el pulso del botón se desactivan en JS. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ══════════════════════════════════════════════════════════ RESPONSIVE — TABLET LANDSCAPE (≤ 1100px) ══════════════════════════════════════════════════════════ */ @media (max-width: 1100px) { .cta-layout { grid-template-columns: 1fr 360px; gap: 2.5rem; } .cta-right { position: static; } } /* ══════════════════════════════════════════════════════════ RESPONSIVE — TABLET PORTRAIT (≤ 820px) ══════════════════════════════════════════════════════════ */ @media (max-width: 820px) { /* Hero: centered, full width */ .hero-section { justify-content: center; align-items: flex-end; padding-bottom: clamp(80px, 12vh, 120px); } .hero-panel { max-width: 100%; text-align: center; background: rgba(4, 9, 22, 0.56); } .cta-row { justify-content: center; } .stats-bar { justify-content: space-between; } .scroll-hint { right: 50%; transform: translateX(50%); } /* Modules: full width slide, dots at bottom */ .mod-slides-container { align-items: flex-end; } .mod-slide { width: 100%; padding-right: 0; } .mod-visual-label { display: none; } .mod-progress-wrap { /* Move to bottom center on tablet */ top: auto; right: auto; transform: none; bottom: calc(var(--py) - 10px); left: 50%; transform: translateX(-50%); flex-direction: row-reverse; gap: 1rem; } .mod-dots { flex-direction: row; gap: 10px; } /* Adjust module slide to leave room for bottom dots */ .modules-pin { padding-bottom: calc(var(--py) + 52px); } /* CTA: single column stacked */ .cta-layout { grid-template-columns: 1fr; gap: 2rem; max-width: 560px; } .cta-right { position: static; top: auto; } .cta-pin { height: auto; min-height: 100vh; padding-top: clamp(80px, 12vh, 120px); padding-bottom: clamp(40px, 8vh, 80px); align-items: flex-start; } } /* ══════════════════════════════════════════════════════════ RESPONSIVE — MOBILE (≤ 600px) ══════════════════════════════════════════════════════════ */ @media (max-width: 600px) { /* ─ Hero ─ */ .hero-section { align-items: center; padding-bottom: var(--py); } .hero-panel { padding: 1.5rem 1.25rem; border-radius: 14px; } .pill { font-size: 0.6rem; padding: 0.28em 0.85em; margin-bottom: 1rem; } .cta-row { flex-direction: column; gap: 0.65rem; } .btn { width: 100%; } .btn-ghost { width: auto; } /* ─ Stats ─ */ .stats-bar { padding-top: 1.1rem; } .stat-val { font-size: 1.45rem; } .stat-lbl { font-size: 0.55rem; letter-spacing: 0.06em; } .stat-div { height: 28px; } /* ─ Modules ─ */ .modules-pin { padding: 12px 14px; padding-bottom: 72px; } .modules-header { top: 12px; left: 14px; right: 14px; } .section-title { font-size: clamp(1.3rem, 6vw, 1.8rem); } /* Módulo cards: centradas verticalmente, -10% respecto al +40% anterior */ .mod-slide { top: 0; bottom: auto; left: 14px; right: 14px; width: auto; margin: 0; height: 100%; display: flex; align-items: center; justify-content: center; } .mod-panel { width: 100%; padding: 1.76rem 1.89rem; border-radius: 14px; } .mod-title { font-size: clamp(1.64rem, 6.93vw, 1.96rem); } .mod-desc { font-size: 1.22rem; line-height: 1.7; } .tag { font-size: 0.82rem; padding: 0.3em 0.9em; } .mod-progress-wrap { bottom: 14px; gap: 0.75rem; } .mod-progress-num { font-size: 0.6rem; } .mod-dots { gap: 8px; } .dot { width: 8px; height: 8px; } /* ─ CTA ─ */ .cta-pin { padding: 60px 14px 40px; } .cta-left { padding: 1.4rem 1.2rem; border-radius: 14px; } .cta-h2 { margin: 0.85rem 0 1.2rem; } .benefit { font-size: 0.85rem; gap: 0.65rem; } .benefits-list { gap: 0.6rem; margin-bottom: 1.4rem; } .social-proof { gap: 0.9rem; padding: 0.85rem 1rem; justify-content: space-around; } .proof-val { font-size: 1.1rem; } .pricing-card { padding: 1.5rem 1.25rem; border-radius: 14px; } .pricing-fire { font-size: 0.8rem; margin-bottom: 1rem; } .amount { font-size: 2.8rem; } .price-benefits { gap: 0.4rem; margin-bottom: 1.2rem; padding-bottom: 1.2rem; } .pb-item { font-size: 0.8rem; } .date-row { font-size: 0.82rem; margin-bottom: 1.2rem; } /* ─ Footer ─ */ .footer-section { min-height: 50vh; } .footer-logo { letter-spacing: 0.22em; } .footer-nav { gap: 0.5rem; } .footer-nav span { display: none; } /* ─ HUD ─ */ .hud-tl-text { max-width: 55vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hud-corner { display: none; } } /* ══════════════════════════════════════════════════════════ RESPONSIVE — SMALL MOBILE (≤ 380px) ══════════════════════════════════════════════════════════ */ @media (max-width: 380px) { .hero-panel { padding: 1.25rem 1rem; } .hero-title { letter-spacing: -0.02em; } .btn { font-size: 0.85rem; padding: 0.8em 1.2em; } .stats-bar { gap: 0; } .stat-val { font-size: 1.3rem; } .stat-div { height: 24px; } .mod-panel { padding: 1.26rem; } .cta-left { padding: 1.2rem 1rem; } .pricing-card { padding: 1.25rem 1rem; } .amount { font-size: 2.4rem; } #hud { display: none; } } /* ══════════════════════════════════════════════════════════ LANDSCAPE PHONE (height < 500px) ══════════════════════════════════════════════════════════ */ @media (max-height: 500px) and (orientation: landscape) { .hero-section { align-items: flex-start; padding-top: 60px; } .hero-panel { max-width: 55vw; padding: 1.1rem 1.25rem; } .hero-title { font-size: clamp(1.3rem, 4vw, 2rem); } .hero-sub, .hero-body { display: none; } .stats-bar { display: none; } .modules-pin { padding-bottom: 60px; } .mod-panel { padding: 1.54rem 1.75rem; } .mod-desc { font-size: 1.23rem; line-height: 1.65; } .cta-pin { padding-top: 55px; } .cta-layout { gap: 1.25rem; } } /* ══════════════════════════════════════════════════════════ NO-3D MODE (móvil / sin WebGL) Aplicado cuando JS añade .no-3d al ══════════════════════════════════════════════════════════ */ /* ── Fondo cósmico FIJO (reemplaza el WebGL en móvil) ── Se pinta en el ELEMENTO RAÍZ (.no-3d = ): el fondo del root no scrollea → queda totalmente fijo y cubre toda la página, sin blanco. */ .no-3d { background: radial-gradient(ellipse 70% 50% at 15% 60%, rgba(0,60,140,.16) 0%, transparent 70%), radial-gradient(ellipse 50% 70% at 85% 25%, rgba(0,90,170,.12) 0%, transparent 70%), linear-gradient(160deg, #010810 0%, #030d1c 45%, #020b18 100%) #030a17; } /* Body transparente para dejar ver el fondo fijo del root */ .no-3d body { background: transparent; } /* Capa 1: estrellas estáticas con box-shadow (sin JS, sin imágenes) */ .no-3d body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(1px 1px at 8% 12%, rgba(255,255,255,.75) 0%, transparent 1px), radial-gradient(1px 1px at 18% 55%, rgba(255,255,255,.55) 0%, transparent 1px), radial-gradient(1px 1px at 27% 32%, rgba(255,255,255,.65) 0%, transparent 1px), radial-gradient(1px 1px at 34% 8%, rgba(255,255,255,.45) 0%, transparent 1px), radial-gradient(1px 1px at 48% 72%, rgba(255,255,255,.60) 0%, transparent 1px), radial-gradient(1px 1px at 55% 28%, rgba(255,255,255,.70) 0%, transparent 1px), radial-gradient(1px 1px at 62% 85%, rgba(255,255,255,.50) 0%, transparent 1px), radial-gradient(1px 1px at 71% 44%, rgba(255,255,255,.65) 0%, transparent 1px), radial-gradient(1px 1px at 80% 18%, rgba(255,255,255,.55) 0%, transparent 1px), radial-gradient(1px 1px at 88% 62%, rgba(255,255,255,.70) 0%, transparent 1px), radial-gradient(1px 1px at 94% 35%, rgba(255,255,255,.45) 0%, transparent 1px), radial-gradient(1px 1px at 3% 75%, rgba(255,255,255,.60) 0%, transparent 1px), radial-gradient(1px 1px at 42% 92%, rgba(255,255,255,.50) 0%, transparent 1px), radial-gradient(1px 1px at 76% 95%, rgba(255,255,255,.40) 0%, transparent 1px), radial-gradient(2px 2px at 15% 40%, rgba(0,229,255,.35) 0%, transparent 2px), radial-gradient(2px 2px at 60% 15%, rgba(0,229,255,.25) 0%, transparent 2px), radial-gradient(2px 2px at 85% 80%, rgba(0,229,255,.30) 0%, transparent 2px); /* Sin animación: campo de estrellas fijo → fondo estático y scroll fluido. */ } /* Capa 2: neblina galáctica */ .no-3d body::after { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 70% 50% at 15% 60%, rgba(0,50,120,.18) 0%, transparent 70%), radial-gradient(ellipse 50% 70% at 85% 25%, rgba(0,80,160,.12) 0%, transparent 70%), radial-gradient(ellipse 40% 30% at 50% 5%, rgba(0,100,200,.10) 0%, transparent 60%); } /* ── Glass panels: sin backdrop-filter (nada que difuminar) ── */ .no-3d .glass-panel, .no-3d .mod-panel, .no-3d .cta-left, .no-3d .pricing-card { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: rgba(4, 9, 22, 0.92) !important; } /* ── Módulos: contenedor y slides en flujo normal ── */ .no-3d .modules-pin { display: block !important; overflow: visible !important; height: auto !important; padding: clamp(40px, 6vw, 80px) clamp(16px, 5vw, 52px) !important; } .no-3d .modules-header { position: relative !important; top: auto !important; left: auto !important; right: auto !important; opacity: 1 !important; transform: none !important; margin-bottom: 28px; } .no-3d .mod-slides-container { position: static !important; display: flex !important; flex-direction: column !important; gap: 20px !important; overflow: visible !important; } .no-3d .mod-slide { position: relative !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; width: 100% !important; height: auto !important; display: block !important; opacity: 1 !important; transform: none !important; } /* ── CRÍTICO: revelar elementos que GSAP deja en opacity 0 ── En móvil initCTA() retorna temprano y nunca los anima. Sin este bloque el CTA queda completamente invisible. */ .no-3d .benefit, .no-3d .social-proof, .no-3d .pricing-fire, .no-3d .pricing-label, .no-3d .pricing-amount, .no-3d .pricing-note, .no-3d .pb-item, .no-3d .date-row, .no-3d .cta-buttons, .no-3d .scanner-init { opacity: 1 !important; transform: none !important; } /* ── Módulos: header y slides visibles desde el inicio ── */ .no-3d .modules-header, .no-3d .mod-slide { opacity: 1 !important; transform: none !important; } .no-3d #mods-header, .no-3d #mod-progress { opacity: 1 !important; transform: none !important; } /* ── Hero: sin scroll-out (initHero corre pero sin SceneCamera) ── */ .no-3d #hero-panel { opacity: 1 !important; transform: none !important; }