que envuelve al formulario. Es la preferida: no toca el , asi que no molesta al resto de la aplicacion. Es la que se usa en las SPA. body.lu-fondo la clase va directo en el . Comoda cuando la pagina de ingreso es un archivo aparte (login.php). */ .lu-pantalla, body.lu-fondo { min-height: 100vh; margin: 0; display: grid; place-items: center; padding: 1.5rem; box-sizing: border-box; color: var(--lu-texto); background: radial-gradient(900px 520px at 50% -8%, rgba(88,166,255,.10), transparent 70%), radial-gradient(700px 420px at 100% 105%, rgba(37,99,235,.09), transparent 70%), var(--lu-fondo); } /* Grilla decorativa, apagandose hacia los bordes. */ .lu-pantalla::before, body.lu-fondo::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(88,166,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(88,166,255,.05) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(circle at 50% 42%, #000 0%, transparent 72%); mask-image: radial-gradient(circle at 50% 42%, #000 0%, transparent 72%); } /* Mientras corre la intro, lo de abajo esta pero no se ve ni se toca. La clase la pone y la saca el JS: si el JS no corre, se ve todo igual. */ body.lu-con-intro .lu-login { opacity: 0; pointer-events: none; } /* ===================================================================== 2. LA MARCA VECTORIZADA ===================================================================== */ .lu-marca { display: block; width: min(42vw, 168px); height: auto; overflow: visible; /* los puntos entran desde afuera del dibujo */ } .lu-marca-chica { width: 42px; flex: 0 0 42px; } .lu-marca-mini { width: 16px; flex: 0 0 16px; } /* Hueco que rellena el JS: */ [data-lu-marca] { display: block; line-height: 0; flex: 0 0 auto; } /* ===================================================================== 3. LA INTRO ===================================================================== */ .lu-intro { position: fixed; inset: 0; z-index: 99999; display: grid; place-items: center; background: var(--lu-fondo); color: var(--lu-texto); overflow: hidden; cursor: pointer; font-family: -apple-system, "Segoe UI", Roboto, system-ui, sans-serif; transition: opacity .45s ease, transform .45s ease; } .lu-intro.lu-fuera { opacity: 0; transform: scale(1.07); } .lu-halo { position: absolute; inset: 0; background: radial-gradient(520px 520px at 50% 44%, rgba(59,122,228,.20), transparent 70%); opacity: 0; animation: lu-halo 2.6s ease-out .9s forwards; } @keyframes lu-halo { 0% { opacity: 0; transform: scale(.6); } 35% { opacity: 1; } 100% { opacity: .45; transform: scale(1); } } .lu-centro { position: relative; text-align: center; } .lu-marca-caja { position: relative; display: inline-block; } /* Cada punto entra desde su propia direccion, agrandado y desenfocado, como si viniera de atras de la pantalla. --dx/--dy los pone el JS. */ .lu-intro .lu-marca circle { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; animation: lu-punto .62s cubic-bezier(.16,.9,.3,1) forwards; animation-delay: calc(var(--i) * 55ms); } @keyframes lu-punto { 0% { opacity: 0; transform: translate(calc(var(--dx) * 1px), calc(var(--dy) * 1px)) scale(4.2); filter: blur(4px); } 55% { opacity: 1; } 100% { opacity: 1; transform: translate(0, 0) scale(1); filter: blur(0); } } /* Onda al aterrizar el punto grande, justo sobre el. */ .lu-onda { position: absolute; left: 75.2%; top: 88.3%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 1px solid var(--lu-azul); border-radius: 50%; opacity: 0; animation: lu-onda 1.1s ease-out 1.42s; } @keyframes lu-onda { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(11); } } .lu-palabra { position: relative; margin-top: 1.4rem; overflow: hidden; } .lu-lucchini { font-size: clamp(2rem, 8vw, 3.1rem); font-weight: 700; letter-spacing: .16em; line-height: 1; perspective: 600px; } .lu-lucchini span { display: inline-block; opacity: 0; animation: lu-letra .55s cubic-bezier(.16,.9,.3,1) forwards; animation-delay: calc(1.55s + var(--l) * 62ms); } @keyframes lu-letra { 0% { opacity: 0; transform: translateY(16px) rotateX(-75deg); filter: blur(6px); } 100% { opacity: 1; transform: none; filter: blur(0); } } .lu-soluciones { margin-top: .35rem; font-size: clamp(.85rem, 3vw, 1.15rem); font-weight: 600; letter-spacing: .3em; color: var(--lu-azul); opacity: 0; animation: lu-subir .7s ease-out 2.15s forwards; } /* Barrido de luz sobre la palabra, una sola pasada. */ .lu-palabra::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 40%, rgba(140,188,255,.5) 50%, transparent 60%); transform: translateX(-120%); animation: lu-barrido 1.1s ease-out 2.25s; } @keyframes lu-barrido { to { transform: translateX(120%); } } .lu-barra { width: 0; height: 1px; margin: 1.5rem auto .9rem; background: linear-gradient(90deg, transparent, var(--lu-azul), transparent); animation: lu-barra .8s ease-out 2.4s forwards; } @keyframes lu-barra { to { width: min(80vw, 340px); } } .lu-pie { font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--lu-tenue); opacity: 0; animation: lu-subir .7s ease-out 2.6s forwards; } @keyframes lu-subir { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: none; } } .lu-saltar { position: absolute; right: 1.2rem; bottom: 1.2rem; background: transparent; border: 1px solid var(--lu-borde); border-radius: 20px; padding: .3rem .9rem; font: inherit; font-size: .72rem; letter-spacing: .1em; color: var(--lu-tenue); cursor: pointer; opacity: 0; animation: lu-subir .5s ease-out 1s forwards; } .lu-saltar:hover { color: var(--lu-texto); border-color: var(--lu-azul); } /* ===================================================================== 4. EL RECUADRO DEL FORMULARIO ===================================================================== */ .lu-login { position: relative; z-index: 1; width: 100%; max-width: 400px; margin: 0 auto; padding: 2.25rem 2rem 1.5rem; color: var(--lu-texto); background: linear-gradient(180deg, rgba(28,35,44,.94), rgba(22,27,34,.94)); border: 1px solid rgba(88,166,255,.20); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.55), 0 0 70px rgba(88,166,255,.06); font-family: -apple-system, "Segoe UI", Roboto, system-ui, sans-serif; } /* Entra cuando la intro se va, no antes: si no, la animacion pasaria tapada por la intro y no la veria nadie. */ .lu-login.lu-entrando { animation: lu-entra .6s cubic-bezier(.16,.9,.3,1) both; } @keyframes lu-entra { 0% { opacity: 0; transform: translateY(16px); } 100% { opacity: 1; transform: none; } } /* Escuadras en dos esquinas. */ .lu-login::before, .lu-login::after { content: ""; position: absolute; width: 26px; height: 26px; border: 1px solid var(--lu-azul); opacity: .55; pointer-events: none; } .lu-login::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; border-radius: 12px 0 0 0; } .lu-login::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; border-radius: 0 0 12px 0; } .lu-encabezado { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.75rem; } .lu-titulo { font-weight: 700; letter-spacing: .06em; font-size: 1.15rem; line-height: 1.2; margin: 0; } .lu-titulo-fino { font-weight: 300; color: var(--lu-tenue); margin-left: 3px; } .lu-sub { display: flex; align-items: center; gap: .4rem; margin: .2rem 0 0; font-size: .74rem; color: var(--lu-tenue); } /* Punto verde que late: señal de que el sistema esta vivo. */ .lu-vivo { width: 6px; height: 6px; border-radius: 50%; background: #3fb950; animation: lu-latido 2.4s infinite; } @keyframes lu-latido { 0% { box-shadow: 0 0 0 0 rgba(63,185,80,.6); } 70% { box-shadow: 0 0 0 6px rgba(63,185,80,0); } 100% { box-shadow: 0 0 0 0 rgba(63,185,80,0); } } /* ---- Campos ---------------------------------------------------------- */ .lu-login label, .lu-etiqueta { display: block; margin-bottom: .35rem; font-size: .8rem; color: var(--lu-tenue); } .lu-login input[type="text"], .lu-login input[type="email"], .lu-login input[type="password"], .lu-login select { width: 100%; height: 44px; padding: 0 .9rem; color: var(--lu-texto); background: var(--lu-fondo); border: 1px solid var(--lu-borde); border-radius: 8px; font: inherit; outline: none; box-sizing: border-box; } .lu-login input:focus, .lu-login select:focus { border-color: var(--lu-azul); box-shadow: 0 0 0 3px rgba(88,166,255,.2); } .lu-login input::placeholder { color: #5a636e; } .lu-campo { margin-bottom: 1rem; } /* Campo con icono adentro: el icono va ANTES del input en el HTML. */ .lu-campo-icono { position: relative; } .lu-campo-icono > svg, .lu-campo-icono > i { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--lu-tenue); font-size: .95rem; pointer-events: none; } .lu-campo-icono input { padding-left: 2.4rem !important; } /* Boton de "mostrar contraseña", adentro del campo, a la derecha. */ .lu-ojo { position: absolute; right: .55rem; top: 50%; transform: translateY(-50%); padding: .3rem .4rem; border: 0; background: transparent; color: var(--lu-tenue); font-size: .95rem; line-height: 1; cursor: pointer; } .lu-ojo:hover { color: var(--lu-texto); } /* Al campo que tiene el ojo se le agrega la clase lu-campo-ojo, para que el texto no pase por abajo del boton. */ .lu-campo-ojo input { padding-right: 2.6rem !important; } .lu-campo-icono:focus-within > svg, .lu-campo-icono:focus-within > i { color: var(--lu-azul); } /* ---- Boton ----------------------------------------------------------- */ .lu-boton { display: flex; align-items: center; justify-content: center; gap: .4rem; width: 100%; height: 44px; margin-top: .5rem; border: 0; border-radius: 8px; color: #fff; font: inherit; font-weight: 600; letter-spacing: .04em; cursor: pointer; background: linear-gradient(90deg, #2f6fe0, #1e4fd8); transition: box-shadow .2s ease, transform .1s ease; } .lu-boton:hover { background: linear-gradient(90deg, #3b7ae4, #2559e6); box-shadow: 0 0 22px rgba(88,166,255,.35); } .lu-boton:active { transform: translateY(1px); } .lu-boton:disabled { opacity: .6; cursor: default; box-shadow: none; } /* ---- Avisos y pie ---------------------------------------------------- */ .lu-error { margin: 0 0 1rem; padding: .7rem .9rem; border: 1px solid rgba(248,81,73,.35); border-radius: 8px; background: rgba(248,81,73,.14); color: #ffb4b0; font-size: .85rem; } .lu-ok { margin: 0 0 1rem; padding: .7rem .9rem; border: 1px solid rgba(63,185,80,.35); border-radius: 8px; background: rgba(63,185,80,.14); color: #7ee08c; font-size: .85rem; } .lu-aviso { margin: 0 0 1rem; padding: .7rem .9rem; border: 1px solid rgba(210,153,34,.35); border-radius: 8px; background: rgba(210,153,34,.14); color: #e8c26a; font-size: .82rem; } .lu-enlace { color: var(--lu-azul); text-decoration: none; } .lu-enlace:hover { text-decoration: underline; } .lu-login-pie { margin: 1.4rem 0 0; text-align: center; font-size: .7rem; letter-spacing: .06em; color: var(--lu-tenue); opacity: .75; } /* ===================================================================== 5. MENOS MOVIMIENTO El JS ya evita mostrar la intro; esto es por si algo se cuela. ===================================================================== */ @media (prefers-reduced-motion: reduce) { .lu-intro, .lu-intro *, .lu-login { animation: none !important; transition: none !important; } .lu-intro .lu-marca circle, .lu-soluciones, .lu-pie, .lu-saltar { opacity: 1; } .lu-barra { width: min(80vw, 340px); } }