/* ============================================================================ MOISÉS MOTA · MY DIGITAL WORLD — NARRATIVA DE SCROLL (Fase 3) ---------------------------------------------------------------------------- Capa de storytelling para la portada. Se carga después de mm-2026.css. REGLA DE ORO: todo lo que se anima parte de un estado VISIBLE. Las clases .is-* que ocultan solo se aplican si tiene .mm-gsap, que mm-story.js agrega únicamente cuando GSAP cargó de verdad. Si el CDN falla, si el JS se rompe o si el visitante pidió menos movimiento, la página se ve entera. ========================================================================== */ :root { /* Cuarta línea de trabajo: inversión en pozo */ --mm-inv: #34d399; --mm-inv-glow: rgba(52, 211, 153, .35); } /* ============================================ LENIS (scroll suave) ============================================ */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; } /* ============================================ BARRA DE PROGRESO DE LECTURA ============================================ */ .mm-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--mm-rent), var(--mm-mkt) 40%, var(--mm-ia) 70%, var(--mm-inv)); z-index: 1200; pointer-events: none; will-change: transform; } /* ============================================ REVELADO DE TEXTO POR PALABRAS -------------------------------------------- mm-story.js parte el texto en palabra Solo se oculta si GSAP está activo. ============================================ */ .mm-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; } .mm-word > span { display: inline-block; will-change: transform; } .mm-gsap .mm-split .mm-word > span { transform: translateY(105%); } /* ============================================ ENTRADAS SIMPLES (fade + subida) ============================================ */ .mm-gsap .mm-in { opacity: 0; transform: translateY(34px); will-change: transform, opacity; } /* ============================================ CAPÍTULO FIJO: "LO QUE TE FRENA" ============================================ */ .mm-chapter { position: relative; background: radial-gradient(900px circle at 80% 10%, rgba(6, 182, 212, .10), transparent 55%), radial-gradient(700px circle at 10% 90%, rgba(246, 160, 0, .08), transparent 55%); border-top: 1px solid var(--mm-line); } .mm-chapter__sticky { position: sticky; top: 0; min-height: 100vh; display: flex; align-items: center; overflow: hidden; } .mm-chapter__inner { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 120px 20px 80px; } .mm-chapter__eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 30px; } .mm-chapter__eyebrow::before { content: ""; width: 40px; height: 1px; background: var(--mm-line-strong); } .mm-chapter__lead { font-size: clamp(1.9rem, 4.6vw, 3.6rem); line-height: 1.14; font-weight: 700; letter-spacing: -.025em; max-width: 16ch; margin-bottom: 46px; text-wrap: balance; } /* Frases que se van encendiendo con el scroll */ .mm-beats { display: grid; gap: 18px; max-width: 700px; list-style: none; margin: 0; padding: 0; } .mm-beat { display: flex; gap: 18px; align-items: flex-start; font-size: clamp(1rem, 1.6vw, 1.2rem); line-height: 1.65; color: var(--text-secondary); transition: color .5s var(--mm-ease), opacity .5s var(--mm-ease); } .mm-gsap .mm-beat { opacity: .28; } .mm-gsap .mm-beat.is-on { opacity: 1; color: var(--text-primary); } .mm-beat__num { flex: 0 0 auto; font-size: .78rem; font-weight: 700; letter-spacing: .1em; padding-top: .45em; color: var(--mm-c, var(--mm-mkt)); font-variant-numeric: tabular-nums; } /* ============================================ LOS CUATRO CAMINOS ============================================ */ .mm-paths__grid--four { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .mm-path--inv { --mm-c: var(--mm-inv); --mm-c-glow: var(--mm-inv-glow); } /* Etiqueta de "nuevo" */ .mm-path__flag { position: absolute; top: 18px; right: 18px; z-index: 2; font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; color: #06111f; background: var(--mm-c); } /* ============================================ RETRATO CON PARALLAX ============================================ */ .mm-figure { position: relative; border-radius: 24px; overflow: hidden; background: var(--background-secondary); aspect-ratio: 4 / 5; } .mm-figure img { width: 100%; height: 112%; object-fit: cover; object-position: center top; display: block; will-change: transform; } .mm-figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(3, 7, 18, .85) 100%); pointer-events: none; } .mm-figure__caption { position: absolute; left: 24px; right: 24px; bottom: 22px; z-index: 2; font-size: .92rem; line-height: 1.5; color: var(--text-primary); } .mm-figure__caption strong { display: block; font-size: 1.05rem; margin-bottom: 3px; } .mm-figure__caption span { color: var(--text-secondary); } /* ============================================ LÍNEA DE PROCESO CON PROGRESO ============================================ */ .mm-track { position: relative; padding-left: 42px; } .mm-track::before { content: ""; position: absolute; left: 13px; top: 8px; bottom: 8px; width: 2px; background: var(--mm-line); } .mm-track__fill { position: absolute; left: 13px; top: 8px; width: 2px; height: 0; background: linear-gradient(180deg, var(--mm-rent), var(--mm-mkt), var(--mm-ia), var(--mm-inv)); will-change: height; } .mm-track__item { position: relative; padding-bottom: 40px; } .mm-track__item:last-child { padding-bottom: 0; } .mm-track__item::before { content: ""; position: absolute; left: -35px; top: 9px; width: 12px; height: 12px; border-radius: 50%; background: var(--background); border: 2px solid var(--mm-line-strong); transition: border-color .4s var(--mm-ease), background .4s var(--mm-ease); } .mm-track__item.is-on::before { border-color: var(--mm-mkt); background: var(--mm-mkt); } .mm-track__item strong { display: block; font-size: 1.12rem; margin-bottom: 7px; color: var(--text-primary); } .mm-track__item p { color: var(--text-secondary); line-height: 1.75; margin: 0; } /* ============================================ CIERRE A PANTALLA COMPLETA ============================================ */ .mm-final { position: relative; padding: 120px 0; text-align: center; border-top: 1px solid var(--mm-line); overflow: hidden; } .mm-final::before { content: ""; position: absolute; inset: 0; background: radial-gradient(800px circle at 50% 120%, rgba(6, 182, 212, .18), transparent 60%); pointer-events: none; } .mm-final h2 { position: relative; font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.1; letter-spacing: -.03em; max-width: 18ch; margin: 0 auto 26px; text-wrap: balance; } .mm-final p { position: relative; color: var(--text-secondary); font-size: 1.1rem; line-height: 1.75; max-width: 56ch; margin: 0 auto 36px; } .mm-final__actions { position: relative; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* ============================================ RESPONSIVE ============================================ */ @media (max-width: 1100px) { .mm-paths__grid--four { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .mm-paths__grid--four { grid-template-columns: 1fr; } .mm-chapter__sticky { min-height: auto; position: static; } .mm-chapter__inner { padding: 70px 20px; } .mm-chapter__lead { max-width: none; margin-bottom: 34px; } .mm-gsap .mm-beat { opacity: 1; color: var(--text-primary); } .mm-final { padding: 80px 0; } .mm-final__actions .mm-btn { width: 100%; } .mm-track { padding-left: 34px; } .mm-track::before, .mm-track__fill { left: 9px; } .mm-track__item::before { left: -31px; } } /* ============================================ MOVIMIENTO REDUCIDO ============================================ */ @media (prefers-reduced-motion: reduce) { .mm-gsap .mm-split .mm-word > span, .mm-gsap .mm-in { transform: none !important; opacity: 1 !important; } .mm-gsap .mm-beat { opacity: 1 !important; color: var(--text-primary) !important; } .mm-chapter__sticky { position: static; min-height: auto; } .mm-progress { display: none; } .mm-figure img { height: 100%; } }