/* ============================================================ inmersiva.css — estilos de page-inmersiva.php Solo se carga en esa plantilla (ver functions.php). Variables locales con prefijo --ix- para no contaminar el resto del tema. ============================================================ */ :root { --ix-bg-1: #050810; /* fondo base muy oscuro */ --ix-bg-2: #0c1228; /* segundo punto del gradiente */ --ix-bg-3: #1b1e3a; /* tercer punto */ --ix-fg: #f4f4f6; --ix-muted:#9aa0b2; --ix-accent:#e0473d; /* rojo CapturoX */ --ix-accent-2:#ffb84d; /* secundario para gradientes */ --ix-radius: 14px; --ix-easing: cubic-bezier(.22,.61,.36,1); } /* Asegura que la plantilla ocupe el viewport sin scroll horizontal accidental. Lenis añadirá su propia clase al al inicializar. */ html, body { overflow-x: hidden; } /* Lenis aplica .lenis y .lenis-smooth al html al activarse. Mientras esté activo, deshabilitamos el smooth scroll nativo del navegador (lo hace ya Lenis pero por si acaso). */ html.lenis { scroll-behavior: auto; } /* -------------------- Root contenedor -------------------- */ .ix-root { background: var(--ix-bg-1); color: var(--ix-fg); font-family: 'Roboto', system-ui, sans-serif; overflow: hidden; /* evita que pin desborde */ } /* -------------------- Sección base -------------------- */ .ix-section { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: clamp(24px, 6vw, 80px); box-sizing: border-box; } /* ======================================================== 1. HERO ======================================================== */ .ix-hero { overflow: hidden; text-align: center; } /* Gradiente animado vía keyframes — independiente del scroll. */ .ix-hero__bg { position: absolute; inset: -10%; z-index: 0; background: radial-gradient(circle at 20% 30%, rgba(224,71,61,.18), transparent 50%), radial-gradient(circle at 80% 70%, rgba(255,184,77,.12), transparent 55%), linear-gradient(140deg, var(--ix-bg-1), var(--ix-bg-2) 50%, var(--ix-bg-3)); filter: blur(2px); animation: ix-hero-bg 18s ease-in-out infinite alternate; } @keyframes ix-hero-bg { 0% { transform: translate3d(-2%, -1%, 0) scale(1); } 50% { transform: translate3d( 2%, 1%, 0) scale(1.04); } 100% { transform: translate3d(-1%, 2%, 0) scale(1.02); } } .ix-hero__inner { position: relative; z-index: 1; max-width: 1000px; } .ix-hero__eyebrow { font-family: 'Roboto Mono', monospace; font-size: 14px; letter-spacing: .35em; color: var(--ix-muted); text-transform: uppercase; margin: 0 0 24px; opacity: 0; /* GSAP lo trae a 1 al cargar */ } .ix-hero__title { font-size: clamp(48px, 8vw, 120px); line-height: 1.02; letter-spacing: -0.02em; font-weight: 700; margin: 0 0 24px; opacity: 0; transform: translateY(40px); } .ix-accent { color: var(--ix-accent); } .ix-hero__sub { color: var(--ix-muted); font-size: 16px; margin: 0; opacity: 0; } .ix-hero__cue { display: inline-block; margin-top: 64px; font-size: 22px; color: var(--ix-muted); opacity: 0; animation: ix-bounce 2.2s ease-in-out infinite; } @keyframes ix-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } } /* ======================================================== 2. PIN ======================================================== */ .ix-pin { padding: 0; } .ix-pin__stage { position: relative; width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(180deg, var(--ix-bg-1) 0%, #0a0e22 100%); } /* Círculo geométrico grande — GSAP lo escala+rota al hacer scroll dentro del pin. Inicia pequeño y descentrado. */ .ix-pin__circle { position: absolute; width: 60vmin; height: 60vmin; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(224,71,61,.5), rgba(224,71,61,0) 70%), conic-gradient(from 0deg, var(--ix-accent), var(--ix-accent-2), var(--ix-accent)); filter: blur(.5px); opacity: .55; transform: scale(.4) rotate(0deg); will-change: transform; } .ix-pin__content { position: relative; z-index: 2; max-width: 880px; padding: 0 24px; text-align: center; } .ix-pin__title { font-size: clamp(36px, 6vw, 80px); line-height: 1.05; margin: 0 0 24px; font-weight: 700; } .ix-pin__text { color: var(--ix-muted); font-size: clamp(16px, 1.5vw, 20px); line-height: 1.55; margin: 0; max-width: 640px; margin-inline: auto; opacity: 0; /* GSAP la lleva de 0 a 1 con el scroll */ } /* ======================================================== 3. PARALLAX ======================================================== */ .ix-parallax { background: var(--ix-bg-2); /* GSAP cambiará este color al progresar */ overflow: hidden; flex-direction: column; gap: 24px; position: relative; } .ix-parallax__layer { position: relative; width: 100%; max-width: 1200px; pointer-events: none; } /* Capa de fondo — texto muy grande, semitransparente */ .ix-parallax__layer--bg { position: absolute; top: 20%; left: 0; right: 0; text-align: center; z-index: 0; } .ix-parallax__layer--bg span { display: inline-block; font-family: 'Kanit', sans-serif; font-style: italic; font-weight: 700; font-size: clamp(80px, 18vw, 280px); color: rgba(255,255,255,.04); letter-spacing: -0.04em; line-height: 1; will-change: transform; } /* Capa intermedia — título principal */ .ix-parallax__layer--mid { position: relative; z-index: 2; text-align: center; } .ix-parallax__title { font-size: clamp(40px, 6vw, 92px); font-weight: 700; line-height: 1.05; margin: 0; will-change: transform; } /* Capa superficial */ .ix-parallax__layer--fg { position: relative; z-index: 3; text-align: center; margin-top: 24px; } .ix-parallax__sub { color: var(--ix-muted); font-size: clamp(16px, 1.6vw, 22px); margin: 0; will-change: transform; } /* ======================================================== 4. OUTRO ======================================================== */ .ix-outro { background: radial-gradient(ellipse at center top, rgba(224,71,61,.25), transparent 65%), var(--ix-bg-1); text-align: center; } .ix-outro__inner { max-width: 720px; } .ix-outro__eyebrow { font-family: 'Roboto Mono', monospace; font-size: 13px; letter-spacing: .35em; color: var(--ix-accent-2); text-transform: uppercase; margin: 0 0 16px; } .ix-outro__title { font-size: clamp(40px, 6vw, 84px); line-height: 1.04; margin: 0 0 24px; font-weight: 700; } .ix-outro__sub { color: var(--ix-muted); font-size: 18px; margin: 0 0 36px; } .ix-outro__ctas { display: inline-flex; gap: 16px; flex-wrap: wrap; justify-content: center; } /* Estado inicial de los elementos de outro: ocultos hasta el reveal */ .ix-outro [data-ix="outro-item"] { opacity: 0; transform: translateY(28px); } .ix-btn { display: inline-block; padding: 14px 28px; border-radius: var(--ix-radius); font-weight: 500; font-size: 16px; text-decoration: none; transition: transform .2s var(--ix-easing), box-shadow .2s var(--ix-easing); } .ix-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.4); } .ix-btn--primary { background: var(--ix-accent); color: #fff; } .ix-btn--ghost { color: var(--ix-fg); border: 1px solid rgba(255,255,255,.2); } /* ======================================================== Responsive / móvil ======================================================== * En móvil táctil: - Reducimos altura del pin (no se queda toda la vida fija) - Reducimos intensidad del parallax - El JS desactiva ScrollTrigger.pin via matchMedia - Lenis se desactiva si detectamos touch (lo hace inmersiva.js) */ @media (max-width: 768px) { .ix-section { min-height: auto; padding: 64px 20px; } .ix-pin__stage { height: auto; min-height: 80vh; } .ix-pin__circle { width: 80vmin; height: 80vmin; opacity: .35; } .ix-parallax { padding: 80px 20px; } .ix-parallax__layer--bg { position: relative; top: 0; margin-bottom: -40px; } } /* Si el usuario prefiere movimiento reducido, neutralizamos todo */ @media (prefers-reduced-motion: reduce) { .ix-hero__bg, .ix-hero__cue { animation: none; } .ix-hero__eyebrow, .ix-hero__title, .ix-hero__sub, .ix-hero__cue, .ix-pin__text, .ix-outro [data-ix="outro-item"] { opacity: 1 !important; transform: none !important; } }