/** * Premioplus — Base * Reset mínimo + estilos de elementos nativos. Sin frameworks. */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; overflow-x: clip; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ---------- Home Mobile: scroll vertical — decisión final ---------- Se probaron y descartaron dos implementaciones de scroll-snap (proximity+12 paradas agrupadas, después mandatory+scroll-snap-stop +15 paradas individuales+scroll-padding). Ambas, aun corrigiendo cada bug puntual reportado, seguían produciendo la sensación de "salto entre bloques"/"sección encastrada" inherente a CUALQUIER scroll-snap — no un bug de implementación, sino la naturaleza misma de la técnica. Decisión: Home Mobile usa scroll vertical 100% nativo, sin ningún mecanismo (CSS o JS) que fuerce, sugiera o corrija la posición de reposo. Si en el futuro se reconsidera algún tipo de asistencia de scroll acá, empezar de cero — no reactivar esto. */ body { /* Fondo "cielo" único y continuo para toda la landing — ver --grad-sky en tokens.css. Reemplaza los bloques sólidos por sección: la marca ya no se corta de sección en sección, respira como una sola superficie. */ background: var(--bg-base); background-image: var(--grad-sky); background-repeat: no-repeat; position: relative; color: var(--text-secondary); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; } /* Bloqueo real de scroll de fondo mientras el benefit-sheet está abierto vive en JS (benefit-sheet.js: lockScroll/unlockScroll, mismo patrón position:fixed + top negativo que el mobile menu drawer en nav.js) — overflow:hidden solo en el body no alcanza en Safari (el bounce/ rubber-band igual desplaza la página detrás del sheet). Esta regla queda como refuerzo secundario para navegadores sin ese JS (no debería ocurrir en la práctica), nunca como el mecanismo real. Encerrado en el mismo breakpoint que el propio sheet: la clase solo puede aplicarse desde ese módulo, que ya se auto-limita a ≤639px, pero repetir la condición acá asegura que la regla no tenga efecto alguno si algo la aplicara fuera de mobile. */ @media (max-width: 639px) { body.has-open-sheet { overflow: hidden; } } /* Bloqueo de scroll del age-gate (verificación +18, ver css/components.css "Age gate" + js/modules/age-gate.js) — a diferencia de has-open-sheet (clase agregada por JS), este selector es puramente declarativo: el gate debe bloquear desde el primer paint, sin esperar a que corra ningún script. html[data-age-gate-skip] es lo único que lo desactiva (marcado por el script anti-flash en cuando sessionStorage ya trae la confirmación de esta sesión — ver index.html). Sin scope de ancho: a diferencia de has-open-sheet (exclusivo de un componente mobile-only), el age-gate bloquea en cualquier viewport. overflow-y:hidden en , no solo en : confirmado en vivo que document.scrollingElement es acá (modo estándar), así que overflow:hidden solo en NO bloqueaba window.scrollTo/gestos — la página seguía scrolleando detrás del overlay. ya trae overflow-x:clip más arriba; overflow-y (no overflow corto, para no pisar ese clip) es lo que realmente detiene el eje vertical. La versión robusta contra el rubber-band de iOS (position:fixed + top negativo) la aplica age-gate.js apenas corre boot() — este overflow-y:hidden es el guardia inicial mientras tanto, activo desde antes de que cualquier script corra. */ html:not([data-age-gate-skip]) { overflow-y: hidden; } /* Spotlight que sigue al cursor (cursor-fx.js) — luz ambiental grande y muy suave, detrás del contenido (#main es z-index:1), delante de la nebulosa/grano. Nace centrada arriba porque --spot-x/--spot-y recién se fijan en el primer mousemove; así no hay un punto de luz perdido en la esquina 0,0 durante el primer instante de carga. */ .cursor-spotlight { position: fixed; inset: 0; z-index: 0; pointer-events: none; --spot-x: 50vw; --spot-y: 30vh; background: radial-gradient(700px circle at var(--spot-x) var(--spot-y), rgba(139, 95, 191, 0.1), transparent 70%); } /* Nebulosa WebGL (webgl-bg.js) — vive detrás de TODO, incluso del grano. Fondo transparente: si Three.js no cargó o el navegador no soporta WebGL, este elemento ni siquiera existe y --grad-sky de se ve exactamente igual que antes. Es un realce, no una dependencia. */ #webgl-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; } /* Grano muy sutil sobre el --grad-sky: rompe el banding de los degradados grandes y le da una textura casi táctil, sin leerse como "efecto" — es el mismo recurso que usan las interfaces premium para que un fondo con gradientes no se sienta plano. Fixed (no scrollea) porque es una propiedad óptica de la "cámara", no un elemento de la página. */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; opacity: 0.028; mix-blend-mode: overlay; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 180px 180px; } #main, .footer { position: relative; z-index: 1; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } ul, ol { list-style: none; } h1, h2, h3 { font-family: var(--font-display); color: var(--text-primary); font-weight: 700; } h1 { font-size: var(--fs-display); line-height: 1.05; letter-spacing: -0.02em; } h2 { font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -0.01em; } h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.25; } /* En mobile, cada título de sección tocaba el piso del clamp de --fs-h2 (32px) — a 4px del H1 del Hero (36px) y repetido en 8 secciones a lo largo del scroll, todo grita al mismo volumen. Bajarlo acá dice claramente "este es un subtítulo de módulo", nunca el protagonista de la pantalla — el H1 del Hero sigue siendo el único título grande de toda la experiencia. */ @media (max-width: 639px) { h2 { font-size: 1.75rem; } } /* Accesibilidad: foco visible consistente en todo elemento interactivo */ a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--gold-300); outline-offset: 2px; border-radius: var(--radius-xs); } /* Skip link */ .skip-link { position: absolute; top: -80px; left: var(--space-4); z-index: 100; background: var(--gold-500); color: var(--text-on-gold); padding: var(--space-3) var(--space-5); border-radius: var(--radius-sm); font-weight: 600; transition: top var(--dur-standard) var(--ease-standard); } .skip-link:focus { top: var(--space-4); } /* En mobile no queremos que aparezca durante el uso normal — pero sigue siendo el primer elemento focuseable del documento (funcional para lectores de pantalla / teclado externo vía Tab): activar el link con Enter todavía navega a #main igual que siempre, solo que nunca se despega visualmente de su posición fuera de pantalla. */ @media (max-width: 639px) { .skip-link:focus { top: -80px; } } /* Selección de texto acorde a marca */ ::selection { background: var(--gold-500); color: var(--text-on-gold); }