/* login.css — Kai-Cart Management System El login ya no es una pantalla suelta: es la primera pantalla de un recorrido de scroll continuo (estilo "product film"), con un mismo lienzo navy vivo (orbes que respiran + spotlight que sigue el cursor + grano cinematográfico) detrás de TODO el documento — login arriba, y debajo secciones que cuentan qué hace el sistema con capturas reales. Elegante y con movimiento sutil, no neón/futurista. Tokens definidos localmente con los MISMOS valores que base.css (no un @import) para que este archivo siga autocontenido. */ :root { --brand-orange: #F26A1B; --brand-orange-dark: #D45A0F; --brand-blue: #1E6FA8; --brand-blue-soft: #5FB3E8; --bg-primary: #FAFAFA; --bg-white: #FFFFFF; --text-primary:#0D1B2A; --text-muted: #8A9BB0; --border-color:#E4EAF0; --error-bg: #FFF5F5; --error-text: #C53030; --error-border:#FEB2B2; --radius-md: 0.75rem; --radius-lg: 1.125rem; --font-body: 'DM Sans', sans-serif; --font-heading: 'Plus Jakarta Sans', sans-serif; /* Actualizadas por login.js con la posición del cursor (0-100%) */ --mx: 50%; --my: 40%; } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { overflow-x: hidden; } body { font-family: var(--font-body); min-height: 100vh; -webkit-font-smoothing: antialiased; background: #05080f; overflow-x: hidden; } /* ═══════════════════════════ CURSOR A MEDIDA — login.js lo activa solo en desktop con mouse real y sin reduced-motion (agrega .custom-cursor-on en ). El panel del formulario queda afuera a propósito: ahí el cursor sigue siendo nativo (I-beam en los inputs, etc.) para no restarle previsibilidad a la parte funcional del login — el cursor a medida es para el resto, la parte "showroom" de la página. ═══════════════════════════ */ body.custom-cursor-on { cursor: none; } body.custom-cursor-on .login-form-panel, body.custom-cursor-on .login-form-panel * { cursor: auto; } body.custom-cursor-on .login-form-panel button, body.custom-cursor-on .login-form-panel .toggle-password { cursor: pointer; } .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; border-radius: 50%; pointer-events: none; z-index: 60; opacity: 0; transition: opacity 0.3s ease; } body.custom-cursor-on .cursor-dot, body.custom-cursor-on .cursor-ring { opacity: 1; } .cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #fff; will-change: transform; } .cursor-ring { width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1px solid rgba(242,106,27,0.45); transition: opacity 0.3s ease, transform 0.2s cubic-bezier(0.23,1,0.32,1), border-color 0.2s, background 0.2s; will-change: transform; } .cursor-ring.is-active { border-color: rgba(242,106,27,0.75); background: rgba(242,106,27,0.1); } /* Cuando el panel del formulario está bajo el cursor, ocultamos también el cursor a medida (además de restaurar el nativo vía body.*) para que no queden dos cursores superpuestos. */ body.custom-cursor-on.cursor-over-form .cursor-dot, body.custom-cursor-on.cursor-over-form .cursor-ring { opacity: 0; } /* ─── Botones con barrido de brillo (shimmer) — mismo mecanismo que el brillo del logo, aplicado a los CTA principales para que se sientan "vivos" incluso sin interacción. ─── */ .shimmer { position: relative; overflow: hidden; } .shimmer::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent, rgba(255,255,255,0.16), transparent); transform: rotate(45deg) translateX(-100%); animation: shimmerSweep 5s ease-in-out infinite; pointer-events: none; } @keyframes shimmerSweep { 0%, 40% { transform: rotate(45deg) translateX(-120%); } 60%, 100% { transform: rotate(45deg) translateX(120%); } } /* ═══════════════════════════ LIENZO VIVO GLOBAL — fixed a nivel de body, cubre siempre el viewport completo sin moverse con el scroll (el contenido "flota" sobre él). Es lo que hace que login + secciones de abajo se sientan una sola pieza continua en vez de bloques cortados. Orbes con deriva lenta por CSS + spotlight/parallax atado al cursor en cualquier punto del documento (login.js) + grano fino. Nada de esto depende del scroll en sí — el movimiento es continuo, para la sensación "hipnótica pero elegante" sin animaciones bruscas ni colores saturados tipo neón. ═══════════════════════════ */ .page-backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } /* Shader WebGL — base del lienzo (ruido fluido tipo "aurora", glow de mouse y acento de color por sección, todo animado por login.js). Si login.js confirma que WebGL inicializó bien, agrega .shader-active en .page-backdrop y esta capa pasa a ser la única de fondo; si no, se queda en opacity:0 y la capa de respaldo (orbes/aura/partículas/ spotlight de abajo) sigue siendo el fondo, como ya funcionaba antes. */ .page-shader { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.2s ease; } .page-backdrop.shader-active .page-shader { opacity: 1; } .page-backdrop.shader-active .login-page-orbs, .page-backdrop.shader-active .login-page-aura, .page-backdrop.shader-active .login-page-particles, .page-backdrop.shader-active .login-page-spotlight { display: none; } .login-page-orbs { position: absolute; inset: 0; /* Sin transition: el movimiento (cursor + scroll + pulso de velocidad) se recalcula por login.js en un loop continuo con su propio suavizado (lerp) — una transition de CSS encima duplicaría el suavizado y se sentiría "goma". */ will-change: transform; } .login-page-orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.55; will-change: transform; } .login-page-orb--a { width: 46vw; height: 46vw; max-width: 620px; max-height: 620px; top: -14%; left: -10%; background: radial-gradient(circle, rgba(242,106,27,0.5) 0%, transparent 70%); animation: orbDriftA 24s ease-in-out infinite alternate; } .login-page-orb--b { width: 40vw; height: 40vw; max-width: 560px; max-height: 560px; bottom: -18%; right: -8%; background: radial-gradient(circle, rgba(30,111,168,0.45) 0%, transparent 70%); animation: orbDriftB 30s ease-in-out infinite alternate; } .login-page-orb--c { width: 26vw; height: 26vw; max-width: 380px; max-height: 380px; top: 38%; left: 55%; background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 72%); animation: orbDriftC 20s ease-in-out infinite alternate; } @keyframes orbDriftA { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(4%, 6%, 0) scale(1.08); } } @keyframes orbDriftB { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-5%, -4%, 0) scale(1.1); } } @keyframes orbDriftC { from { transform: translate3d(0,0,0) scale(0.94); } to { transform: translate3d(-6%, 5%, 0) scale(1); } } /* Orbe de acento — su posición/color/opacidad los setea login.js según la sección activa (naranja/azul, según data-accent de la fila en pantalla), con transition en CSS para que el cambio sea una deriva suave de ~1.4s, no un salto. Es lo que hace que el fondo "viaje" con el contenido en vez de quedar estático detrás de todo el scroll. */ .login-page-orb--accent { width: 34vw; height: 34vw; max-width: 480px; max-height: 480px; top: 30%; left: 50%; opacity: 0; background: radial-gradient(circle, rgba(242,106,27,0.42) 0%, transparent 70%); transition: transform 1.4s cubic-bezier(0.22,1,0.36,1), opacity 1.1s ease, background 1.4s ease; } /* Aura giratoria — capa extra, muy sutil, detrás de los orbes. Rotación lentísima (mixblend screen) para que el fondo nunca se sienta del todo quieto, sin llegar a "neón" (opacidad bajísima). */ .login-page-aura { position: absolute; inset: -25%; background: conic-gradient(from 0deg at 50% 50%, rgba(242,106,27,0.05), rgba(30,111,168,0.06), rgba(242,106,27,0.05)); mix-blend-mode: screen; opacity: 0.6; animation: auraSpin 90s linear infinite; will-change: transform; } @keyframes auraSpin { to { transform: rotate(360deg); } } /* Partículas — puntos finos que derivan hacia arriba muy lento, dan profundidad al lienzo (como polvo/estrellas suspendidas) sin ser protagonistas. Generadas por login.js con valores random por partícula vía custom properties. */ .login-page-particles { position: absolute; inset: 0; overflow: hidden; } .particle { position: absolute; bottom: -5%; left: var(--p-left, 50%); width: var(--p-size, 3px); height: var(--p-size, 3px); border-radius: 50%; background: var(--p-color, rgba(255,255,255,0.5)); opacity: 0; filter: blur(0.4px); animation: particleFloat var(--p-duration, 22s) linear infinite; animation-delay: var(--p-delay, 0s); will-change: transform, opacity; } @keyframes particleFloat { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 8% { opacity: var(--p-opacity, 0.45); } 92% { opacity: var(--p-opacity, 0.45); } 100% { transform: translate3d(var(--p-drift, 24px), -112vh, 0); opacity: 0; } } /* Grano sutil — textura fina en vez de una grilla de puntos técnica, se siente más cinematográfico/premium. SVG feTurbulence embebido como data-uri, sin pedir ningún recurso externo. */ .login-page-grain { position: absolute; inset: -10%; opacity: 0.035; mix-blend-mode: overlay; 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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Spotlight que sigue el cursor (posición seteada en --mx/--my por login.js en , para que llegue por herencia a este elemento aunque ya no comparta padre directo con #loginPage) — mismo recurso que usan los productos premium de referencia, acá muy sutil. */ .login-page-spotlight { position: absolute; inset: 0; background: radial-gradient(600px circle at var(--mx) var(--my), rgba(255,255,255,0.05), transparent 60%); transition: background 0.15s ease-out; } /* ═══════════════════════════ HERO — primera pantalla (login). Ocupa exactamente un viewport para que la sección de abajo arranque justo donde termina. ═══════════════════════════ */ .login-page { position: relative; z-index: 1; height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.5rem; perspective: 1400px; } /* ═══════════════════════════ TARJETA ═══════════════════════════ */ .login-card { position: relative; z-index: 1; display: flex; width: 100%; max-width: 960px; border-radius: 1.75rem; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 30px 80px rgba(0,0,0,0.55), 0 10px 30px rgba(0,0,0,0.35); animation: cardIn 0.7s cubic-bezier(0.16,1,0.3,1) forwards; transform-style: preserve-3d; transition: transform 0.35s cubic-bezier(0.22,1,0.36,1); will-change: transform; } @keyframes cardIn { from { opacity: 0; transform: translateY(26px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ─── Panel de marca ─── */ .login-brand-panel { flex: 0 0 45%; background: #0D1B2A; position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; padding: 2.75rem; } .login-brand-content { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 1.1rem; } /* Entrada escalonada — cada elemento aparece un poco después que el anterior, sensación de "coreografía" en vez de todo apareciendo junto. */ .login-brand-content > * { opacity: 0; animation: revealUp 0.6s cubic-bezier(0.16,1,0.3,1) forwards; } .login-brand-content > *:nth-child(1) { animation-delay: 0.05s; } .login-brand-content > *:nth-child(2) { animation-delay: 0.14s; } .login-brand-content > *:nth-child(3) { animation-delay: 0.22s; } .login-brand-content > *:nth-child(4) { animation-delay: 0.30s; } .login-brand-content > *:nth-child(5) { animation-delay: 0.38s; } .login-brand-features li { opacity: 0; animation: revealUp 0.6s cubic-bezier(0.16,1,0.3,1) forwards; } .login-brand-features li:nth-child(1) { animation-delay: 0.46s; } .login-brand-features li:nth-child(2) { animation-delay: 0.53s; } .login-brand-features li:nth-child(3) { animation-delay: 0.6s; } @keyframes revealUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .login-brand-lockup { display: flex; align-items: center; gap: 0.7rem; } /* ─── Logo completo (mismo PNG que usa el sidebar real, transparencia real — va directo sobre el navy, sin badge ni caja alrededor) ─── */ .login-brand-panel .logo { display: flex; align-items: center; position: relative; overflow: hidden; width: fit-content; border-radius: 10px; padding: 4px 6px; margin-left: -6px; } .logo-img { height: 48px; width: auto; object-fit: contain; position: relative; z-index: 1; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5)) brightness(1.08) saturate(1.1); } /* Barrido de brillo periódico — mismo mecanismo que el sidebar real (disparado desde login.js), para que se sienta el mismo producto. */ .logo-shine { position: absolute; top: -20%; left: -120%; width: 60%; height: 140%; background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,0.35) 50%, transparent 80%); transform: skewX(-15deg); z-index: 2; pointer-events: none; opacity: 0; } .logo-shine.sweep { animation: logoSweep 0.7s ease-in-out forwards; } @keyframes logoSweep { 0% { left: -120%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: 140%; opacity: 0; } } .login-brand-pill { display: inline-flex; width: fit-content; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand-orange); background: rgba(242,106,27,0.12); border: 1px solid rgba(242,106,27,0.26); padding: 0.3rem 0.7rem; border-radius: 999px; } .login-brand-tagline { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 700; line-height: 1.3; color: #fff; letter-spacing: -0.3px; } .login-brand-sub { font-size: 0.875rem; line-height: 1.55; color: rgba(255,255,255,0.55); max-width: 34ch; } .login-brand-features { display: flex; flex-direction: column; gap: 0.85rem; list-style: none; margin-top: 0.4rem; } .login-brand-features li { display: flex; align-items: flex-start; gap: 0.75rem; } .login-brand-features li div { display: flex; flex-direction: column; gap: 0.1rem; } .login-brand-features strong { font-family: var(--font-heading); font-size: 0.85rem; font-weight: 700; color: #fff; } .login-brand-features li span { font-size: 0.78rem; color: rgba(255,255,255,0.5); line-height: 1.4; } .login-feature-ic { width: 32px; height: 32px; border-radius: 0.55rem; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); color: var(--brand-orange); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .login-brand-footer { position: relative; z-index: 1; font-size: 0.7rem; color: rgba(255,255,255,0.32); border-top: 1px solid rgba(255,255,255,0.08); padding-top: 1.25rem; opacity: 0; animation: revealUp 0.6s cubic-bezier(0.16,1,0.3,1) forwards; animation-delay: 0.66s; } /* ═══════════════════════════ PANEL DE FORMULARIO ═══════════════════════════ */ .login-form-panel { flex: 1; display: flex; align-items: center; justify-content: center; background: var(--bg-white); padding: 2.75rem 2.5rem; } .login-form-wrap { width: 100%; max-width: 340px; opacity: 0; animation: revealUp 0.6s cubic-bezier(0.16,1,0.3,1) forwards; animation-delay: 0.3s; } .login-header { margin-bottom: 1.6rem; } .login-header h2 { font-family: var(--font-heading); font-size: 1.4rem; font-weight: 700; color: var(--text-primary); letter-spacing: -0.4px; margin-bottom: 0.3rem; } .login-header p { color: var(--text-muted); font-size: 0.85rem; } /* ─── Error ─── */ .alert-error { background: var(--error-bg); color: var(--error-text); padding: 0.7rem 0.9rem; border-radius: var(--radius-md); font-size: 0.8125rem; margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.5rem; border: 1px solid var(--error-border); animation: shake 0.35s ease; } @keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } } /* ─── Éxito (ej. contraseña restablecida) ─── */ .alert-success { background: #F0FDF4; color: #15803D; padding: 0.7rem 0.9rem; border-radius: var(--radius-md); font-size: 0.8125rem; margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.5rem; border: 1px solid #BBF7D0; } /* ─── Info (flujo de recuperar contraseña) ─── */ .alert-info { background: #EBF5FC; color: var(--brand-blue); padding: 0.7rem 0.9rem; border-radius: var(--radius-md); font-size: 0.8125rem; margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.5rem; border: 1px solid rgba(30,111,168,0.25); } /* ─── Código de verificación — más grande y espaciado para leerlo rápido ─── */ .codigo-input { letter-spacing: 0.5em; font-size: 1.15rem !important; font-weight: 700; text-align: center; padding-left: 1rem !important; } /* ─── Form ─── */ .login-form { display: flex; flex-direction: column; gap: 0.95rem; } .form-group { display: flex; flex-direction: column; gap: 0.4rem; } .form-group label { font-size: 0.8rem; font-weight: 600; color: var(--text-primary); } .input-wrapper { position: relative; display: flex; align-items: center; } .input-icon { position: absolute; left: 0.9rem; color: var(--text-muted); pointer-events: none; transition: color 0.2s; } .input-wrapper input { width: 100%; padding: 0.75rem 1rem 0.75rem 2.7rem; font-size: max(16px, 0.88rem); font-family: var(--font-body); background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-md); color: var(--text-primary); transition: border-color 0.2s, box-shadow 0.2s, background 0.2s; outline: none; min-height: 42px; } .input-wrapper input::placeholder { color: var(--text-muted); } .input-wrapper input:focus { border-color: var(--brand-orange); background: #fff; box-shadow: 0 0 0 3px rgba(242,106,27,0.12); } .input-wrapper:focus-within .input-icon { color: var(--brand-orange); } .toggle-password { position: absolute; right: 0.9rem; background: none; border: none; cursor: pointer; color: var(--text-muted); display: flex; align-items: center; transition: color 0.2s; padding: 0; } .toggle-password:hover { color: var(--brand-blue); } /* ─── Submit ─── */ .btn-login { background: linear-gradient(135deg, var(--brand-orange) 0%, var(--brand-orange-dark) 100%); color: #fff; border: none; border-radius: var(--radius-md); padding: 0.85rem; font-size: 0.9rem; font-weight: 700; font-family: var(--font-heading); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 0.4rem; transition: all 0.22s; box-shadow: 0 4px 14px rgba(242,106,27,0.3); letter-spacing: 0.01em; } .btn-login:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(242,106,27,0.4); } .btn-login:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(242,106,27,0.25); } .btn-login svg { transition: transform 0.2s; } .btn-login:hover svg { transform: translateX(3px); } .btn-login--cta { width: 100%; max-width: 280px; padding: 0.95rem 1.5rem; } /* ─── Footer ─── */ .login-footer { margin-top: 1.75rem; text-align: center; font-size: 0.7rem; color: var(--text-muted); border-top: 1px solid var(--border-color); padding-top: 1.1rem; } .login-footer a, .login-links-row a { color: var(--brand-blue); text-decoration: none; font-weight: 600; } .login-footer a:hover, .login-links-row a:hover { text-decoration: underline; } .login-links-row { display: flex; align-items: center; justify-content: space-between; margin-top: 0.9rem; font-size: 0.78rem; } .login-forgot-link { display: block; text-align: right; font-size: 0.78rem; margin-top: -0.35rem; } .login-forgot-link a { color: var(--brand-blue); text-decoration: none; font-weight: 600; } .login-forgot-link a:hover { text-decoration: underline; } /* ─── Cue de scroll — invita a bajar, se apaga apenas el usuario scrollea ─── */ .scroll-cue { position: absolute; left: 50%; bottom: 2rem; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.55); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; animation: revealUp 0.6s cubic-bezier(0.16,1,0.3,1) forwards, cueBounce 2.2s ease-in-out infinite; animation-delay: 0.9s, 1.9s; transform: translateX(-50%); transition: opacity 0.35s ease, border-color 0.2s, color 0.2s, background 0.2s; } .scroll-cue:hover { border-color: rgba(242,106,27,0.4); color: var(--brand-orange); background: rgba(242,106,27,0.08); } .scroll-cue.is-hidden { opacity: 0 !important; pointer-events: none; } @keyframes cueBounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(6px); } } /* ═══════════════════════════ SHOWCASE — recorrido debajo del login, mismo lienzo vivo detrás (page-backdrop), acá solo el contenido "flota" encima. ═══════════════════════════ */ .showcase { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8rem; padding: 0 1.5rem 8rem; } .showcase-intro, .showcase-row, .showcase-close { width: 100%; max-width: 1100px; margin: 0 auto; } /* Reveal genérico (fade + translate) — usado en bloques simples de texto. Las filas de showcase tienen su propia coreografía más abajo. */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); } .reveal.is-in { opacity: 1; transform: translateY(0); } /* ─── Statement de apertura ─── */ .showcase-intro { padding-top: 6rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.15rem; } .showcase-kicker { display: inline-flex; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--brand-orange); background: rgba(242,106,27,0.12); border: 1px solid rgba(242,106,27,0.26); padding: 0.3rem 0.75rem; border-radius: 999px; } .showcase-heading { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.28; letter-spacing: -0.6px; color: #fff; max-width: 780px; } .showcase-sub { font-size: 1rem; line-height: 1.6; color: rgba(255,255,255,0.55); max-width: 50ch; } /* ─── Filas de pantallas ─── */ .showcase-row { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 3.5rem; align-items: center; } .showcase-row--reverse { grid-template-columns: 1.15fr 0.85fr; } .showcase-text { display: flex; flex-direction: column; gap: 1rem; opacity: 0; transform: translateY(18px); transition: opacity 0.75s cubic-bezier(0.16,1,0.3,1), transform 0.75s cubic-bezier(0.16,1,0.3,1); } .showcase-row.is-in .showcase-text { opacity: 1; transform: translateY(0); } .showcase-row-kicker { font-family: var(--font-heading); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-orange); } .showcase-row[data-accent="blue"] .showcase-row-kicker { color: var(--brand-blue-soft); } .showcase-text h3 { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.3; color: #fff; letter-spacing: -0.3px; } /* Reveal palabra por palabra en los títulos grandes (el statement de apertura y el h3 de cada fila) — login.js envuelve cada palabra en .word > .word-inner; cada una "sube" con un pequeño delay escalonado (--i, seteado por JS) cuando el bloque contenedor entra en viewport. Motion editorial tipo antigravity, sin tocar el resto del texto. */ .showcase-heading .word, .showcase-text h3 .word { display: inline-block; overflow: hidden; vertical-align: top; } .showcase-heading .word-inner, .showcase-text h3 .word-inner { display: inline-block; transform: translateY(112%); transition: transform 0.85s cubic-bezier(0.16,1,0.3,1); transition-delay: calc(var(--i, 0) * 38ms); } .showcase-intro.is-in .showcase-heading .word-inner, .showcase-row.is-in .showcase-text h3 .word-inner { transform: translateY(0); } .showcase-text > p { font-size: 0.95rem; line-height: 1.65; color: rgba(255,255,255,0.55); max-width: 42ch; } .showcase-bullets { list-style: none; display: flex; flex-direction: column; gap: 0.65rem; margin-top: 0.3rem; } .showcase-bullets li { display: flex; align-items: flex-start; gap: 0.65rem; font-size: 0.88rem; line-height: 1.5; color: rgba(255,255,255,0.72); } .showcase-bullet-ic { width: 21px; height: 21px; margin-top: 1px; border-radius: 50%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); color: var(--brand-orange); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .showcase-row[data-accent="blue"] .showcase-bullet-ic { color: var(--brand-blue-soft); } /* Wrapper de media — recibe el parallax continuo atado a scroll + un leve flotado idle (seno continuo, ambos vía transform inline de login.js), separado del device-frame para no pisar la transición de asentamiento (tilt→flat) que se dispara al entrar en viewport. Dos animaciones distintas en dos elementos distintos, para que nunca se pisen. */ .showcase-media { position: relative; display: flex; justify-content: center; will-change: transform; } .device-frame { position: relative; width: 100%; max-width: 560px; border-radius: 1rem; overflow: hidden; background: linear-gradient(160deg, #101c2c, #0a141f); border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 30px 70px rgba(0,0,0,0.5), 0 8px 20px rgba(0,0,0,0.35); opacity: 0; transform: perspective(1200px) rotateY(9deg) rotateX(3deg) scale(0.93); transition: transform 1.1s cubic-bezier(0.16,1,0.3,1), opacity 1s ease; will-change: transform, opacity; } .showcase-row--reverse .device-frame { transform: perspective(1200px) rotateY(-9deg) rotateX(3deg) scale(0.93); } .showcase-row.is-in .device-frame { opacity: 1; transform: perspective(1200px) rotateY(0deg) rotateX(0deg) scale(1); } .showcase-row[data-accent="orange"] .device-frame { box-shadow: 0 30px 70px rgba(0,0,0,0.5), 0 8px 20px rgba(0,0,0,0.35), 0 0 90px -30px rgba(242,106,27,0.4); } .showcase-row[data-accent="blue"] .device-frame { box-shadow: 0 30px 70px rgba(0,0,0,0.5), 0 8px 20px rgba(0,0,0,0.35), 0 0 90px -30px rgba(95,179,232,0.35); } .device-frame-bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.65rem 0.8rem; background: rgba(255,255,255,0.03); border-bottom: 1px solid rgba(255,255,255,0.06); } .device-frame-bar span:not(.device-frame-url) { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.16); } .device-frame-url { margin-left: 0.5rem; font-size: 0.68rem; color: rgba(255,255,255,0.35); font-family: var(--font-body); letter-spacing: 0.02em; } .device-frame img { display: block; width: 100%; height: auto; } /* ─── Cierre ─── */ .showcase-close { padding-top: 3rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.2rem; } .showcase-close h2 { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.2rem); color: #fff; letter-spacing: -0.4px; } .showcase-close > p { font-size: 0.95rem; line-height: 1.6; color: rgba(255,255,255,0.55); max-width: 46ch; } .showcase-footer { margin-top: 1.25rem; font-size: 0.72rem; color: rgba(255,255,255,0.3); } /* ─── CTA flotante persistente ─── */ .scroll-fab { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 5; display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.1rem; border: none; border-radius: 999px; cursor: pointer; font-family: var(--font-heading); font-weight: 700; font-size: 0.82rem; color: #fff; background: linear-gradient(135deg, var(--brand-orange) 0%, var(--brand-orange-dark) 100%); box-shadow: 0 8px 24px rgba(242,106,27,0.35), 0 0 0 1px rgba(255,255,255,0.08); opacity: 0; transform: translateY(14px) scale(0.92); pointer-events: none; transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s; } .scroll-fab.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .scroll-fab:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 12px 30px rgba(242,106,27,0.45), 0 0 0 1px rgba(255,255,255,0.1); } .scroll-fab svg { transition: transform 0.2s; } .scroll-fab:hover svg { transform: translateX(2px); } /* ─── Riel de progreso — refuerza el "recorrido" (como los puntos de sección de antigravity.google) y duplica como navegación rápida. La línea de fondo es fija; el fill y el punto activo los actualiza login.js en cada frame según cuánto se scrolleó. Solo desktop ancho — en pantallas chicas compite demasiado con el resto de la UI. ─── */ .scroll-rail { position: fixed; right: 1.9rem; top: 50%; transform: translateY(-50%); z-index: 5; width: 10px; height: 224px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; } .scroll-rail-line { position: absolute; top: 4px; bottom: 4px; left: 50%; width: 2px; transform: translateX(-50%); background: rgba(255,255,255,0.12); border-radius: 1px; overflow: hidden; } .scroll-rail-fill { position: absolute; top: 0; left: 0; width: 100%; height: 0%; background: linear-gradient(180deg, var(--brand-orange), var(--brand-blue-soft)); border-radius: 1px; } .scroll-rail-dot { position: relative; z-index: 1; width: 22px; height: 22px; border-radius: 50%; border: none; background: none; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; } .scroll-rail-dot span { display: block; width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.28); box-shadow: 0 0 0 3px rgba(5,8,15,0.4); transition: background 0.25s, transform 0.25s, box-shadow 0.25s; } .scroll-rail-dot:hover span { background: rgba(255,255,255,0.55); } .scroll-rail-dot.is-active span { background: var(--brand-orange); transform: scale(1.4); box-shadow: 0 0 0 3px rgba(5,8,15,0.4), 0 0 12px rgba(242,106,27,0.65); } .scroll-rail-dot.is-active[data-target="row-1"] span { background: var(--brand-blue-soft); box-shadow: 0 0 0 3px rgba(5,8,15,0.4), 0 0 12px rgba(95,179,232,0.6); } @media (max-width: 1100px) { .scroll-rail { display: none; } } /* ═══════════════════════════ RESPONSIVE — la tarjeta pasa a columna, el panel de marca se achica a una franja compacta (logo + bajada) en vez de desaparecer. Sin tilt/ parallax en mobile (no hay cursor, y con dedo se sentiría raro). Las filas de showcase se apilan, orden de documento tal cual está escrito. ═══════════════════════════ */ @media (max-width: 900px) { .login-page { padding: 1.25rem; perspective: none; height: auto; min-height: 100vh; } .login-card { flex-direction: column; border-radius: 1.25rem; transform: none !important; } .login-brand-panel { padding: 1.75rem; gap: 1rem; } .login-brand-content { gap: 0.75rem; } .login-brand-sub, .login-brand-features, .login-brand-footer { display: none; } .login-brand-tagline { font-size: 1.15rem; } .login-form-panel { padding: 2rem 1.5rem; } .scroll-cue { display: none; } .showcase { gap: 5rem; padding: 0 1.25rem 5rem; } .showcase-intro { padding-top: 3.5rem; } .showcase-row { grid-template-columns: 1fr; gap: 1.75rem; } .showcase-row--reverse { grid-template-columns: 1fr; } .showcase-text { max-width: none; } .showcase-text > p { max-width: none; } .device-frame { max-width: 100%; } .scroll-fab { right: 1rem; bottom: 1rem; padding: 0.65rem 0.9rem; font-size: 0.78rem; } } @media (max-width: 420px) { .login-form-wrap { max-width: none; } } /* Nota: esta página no tiene un bloque @media (prefers-reduced-motion) a propósito — es una decisión consciente del dueño del producto (ver comentario al inicio de login.js). El movimiento nunca es brusco ni parpadeante (nada de flashes ni parallax violento de scroll-jacking), así que el riesgo real para usuarios sensibles es bajo. */