:root { --blue: #3D86FF; --green: #22C55E; --yellow: #F59E0B; --red: #EF4444; --ease: cubic-bezier(.2,.8,.2,1); --spring: cubic-bezier(.34,1.45,.5,1); }
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body { overflow: hidden; color: #fff; font: 15px/1.5 Inter, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased;
  background: radial-gradient(120% 120% at 15% 0%, #0D3A8F 0%, #0D2345 40%, #071A36 70%, #06142B 100%); }
canvas#net { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }
.glow { position: fixed; border-radius: 50%; filter: blur(100px); opacity: .5; pointer-events: none; animation: float 22s ease-in-out infinite alternate; z-index: 0; }
.g1 { width: 46vw; height: 46vw; background: #1769FF; left: -12vw; top: -18vw; }
.g2 { width: 40vw; height: 40vw; background: #0B84F3; right: -14vw; bottom: -16vw; animation-duration: 28s; opacity: .32; }
.g3 { width: 28vw; height: 28vw; background: #073B91; right: 22vw; top: -10vw; animation-duration: 34s; opacity: .3; }
@keyframes float { to { transform: translate3d(6vw, 5vw, 0) scale(1.15); } }

.stage { position: relative; z-index: 2; height: 100%; display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 4vw; padding: 4vh 6vw; max-width: 1500px; margin: 0 auto; }
.hero { position: relative; max-width: 640px; animation: up 1s var(--ease) both; }
@keyframes up { from { opacity: 0; transform: translateY(26px); } }
.logo-row { display: flex; align-items: center; gap: 12px; font-weight: 700; letter-spacing: -.3px; margin-bottom: 30px; opacity: .95; }
.logo-row img { border-radius: 12px; filter: drop-shadow(0 6px 16px rgba(0,0,0,.4)); }
h1 { font-size: clamp(34px, 4.6vw, 62px); line-height: 1.04; letter-spacing: -2.2px; font-weight: 800; }
h1 em { font-style: normal; background: linear-gradient(100deg, #7FB0FF, #3D86FF 45%, #0B84F3); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.caret { display: inline-block; width: 4px; height: .86em; margin-left: 6px; vertical-align: -.08em; border-radius: 2px; background: #3D86FF; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hero p { margin-top: 22px; font-size: 17px; color: rgba(255,255,255,.72); max-width: 520px; line-height: 1.6; }
.feats { list-style: none; padding: 0; display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; }
.feats li { padding: 14px 18px; border-radius: 20px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); backdrop-filter: blur(14px); transition: transform .4s var(--spring), background .3s; }
.feats li:hover { transform: translateY(-5px); background: rgba(255,255,255,.12); }
.feats b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.6px; background: linear-gradient(90deg, #fff, #9ad0ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.feats span { font-size: 12px; color: rgba(255,255,255,.62); line-height: 1.35; display: block; margin-top: 2px; }

.chips { position: absolute; inset: -40px -60px -40px -60px; pointer-events: none; }
.chip { position: absolute; padding: 8px 14px; border-radius: 99px; font-size: 12.5px; font-weight: 650; white-space: nowrap; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2), 0 10px 30px rgba(0,0,0,.25); backdrop-filter: blur(16px); animation: bob 7s ease-in-out infinite; transform: translate(var(--px, 0), var(--py, 0)); }
.chip i { display: inline-block; margin-right: 6px; vertical-align: -1px; }
.star { color: #F59E0B; font-style: normal; } .wa { width: 12px; height: 12px; border-radius: 50%; background: #25d366; box-shadow: 0 0 10px #25d366; } .medal { width: 12px; height: 12px; border-radius: 50%; background: linear-gradient(135deg, #f9dc7a, #e0a21a); }
.c1 { right: -6%; top: -2%; animation-delay: -1s; } .c2 { right: -16%; top: 30%; animation-delay: -3s; } .c3 { right: -10%; bottom: 8%; animation-delay: -5s; background: rgba(23,105,255,.3); }
.c4 { left: 52%; top: -4%; animation-delay: -2s; } .c5 { left: 58%; bottom: -6%; animation-delay: -4s; background: rgba(239,68,68,.25); }
@keyframes bob { 50% { transform: translate(var(--px, 0), calc(var(--py, 0px) - 14px)); } }

.card-wrap { perspective: 1200px; justify-self: center; width: min(430px, 100%); animation: up 1s var(--ease) .15s both; }
.card { position: relative; border-radius: 34px; padding: 2px; transform-style: preserve-3d; transition: transform .25s var(--ease); background: linear-gradient(160deg, rgba(255,255,255,.2), rgba(255,255,255,.05)); box-shadow: 0 40px 100px rgba(0,0,0,.5); }
.ring { position: absolute; inset: -2px; border-radius: 36px; padding: 2px; pointer-events: none; background: conic-gradient(from var(--a, 0deg), transparent 0 55%, #8ec5ff 72%, #7dffc4 85%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin 5s linear infinite; }
@property --a { syntax: "<angle>"; initial-value: 0deg; inherits: false; } @keyframes spin { to { --a: 360deg; } }
.card-in { position: relative; border-radius: 32px; padding: 38px 34px 28px; background: linear-gradient(165deg, rgba(20,28,70,.88), rgba(10,15,42,.92)); backdrop-filter: blur(30px) saturate(160%); transition: opacity .4s, transform .5s var(--ease); }
.mark { width: 72px; height: 72px; border-radius: 20px; display: grid; place-items: center; margin-bottom: 20px; background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.04)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 12px 30px rgba(77,143,247,.35); animation: pulse 3.4s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 14px 46px rgba(125,255,196,.45); transform: translateY(-3px); } }
.card h2 { font-size: 27px; letter-spacing: -.9px; font-weight: 800; } .sub { margin-top: 5px; color: rgba(255,255,255,.62); font-size: 14px; margin-bottom: 26px; }

.field { position: relative; display: block; margin-bottom: 14px; }
.field > svg { position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; margin-top: -10px; fill: none; stroke: rgba(255,255,255,.5); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: stroke .25s, transform .4s var(--spring); pointer-events: none; }
.field input { width: 100%; height: 58px; padding: 22px 48px 6px 48px; border: 0; outline: 0; border-radius: 18px; color: #fff; font-size: 16px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.12); transition: background .25s, box-shadow .25s; }
.field input:-webkit-autofill { -webkit-text-fill-color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.12), inset 0 0 0 100px #1a2560; }
.field span { position: absolute; left: 48px; top: 19px; font-size: 15px; color: rgba(255,255,255,.55); pointer-events: none; transition: all .25s var(--ease); transform-origin: left; }
.field input:focus + span, .field input:not(:placeholder-shown) + span { transform: translateY(-11px) scale(.76); color: #9ad0ff; }
.field input:focus { background: rgba(255,255,255,.11); box-shadow: inset 0 0 0 1.5px #6aa6ff, 0 0 0 5px rgba(77,143,247,.22); }
.field:focus-within > svg { stroke: #9ad0ff; transform: scale(1.12); }
#eye { position: absolute; right: 10px; top: 50%; width: 38px; height: 38px; margin-top: -19px; border: 0; border-radius: 12px; background: none; cursor: pointer; display: grid; place-items: center; }
#eye svg { width: 20px; height: 20px; fill: none; stroke: rgba(255,255,255,.55); stroke-width: 1.8; stroke-linecap: round; } #eye:hover svg { stroke: #fff; } #eye .slash { stroke-dasharray: 26; stroke-dashoffset: 26; transition: stroke-dashoffset .35s var(--ease); } #eye.on .slash { stroke-dashoffset: 0; }
.field.shake { animation: shake .5s; } @keyframes shake { 20%, 60% { transform: translateX(-9px); } 40%, 80% { transform: translateX(9px); } }
.opts { margin: 6px 2px 16px; }
.remember { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; color: rgba(255,255,255,.75); cursor: pointer; user-select: none; }
.remember input { position: absolute; opacity: 0; } .remember .box { width: 22px; height: 22px; border-radius: 8px; display: grid; place-items: center; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.2); transition: all .3s var(--spring); }
.remember .box svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset .3s var(--ease) .05s; }
.remember input:checked + .box { background: linear-gradient(135deg, #3D86FF, #1769FF); box-shadow: 0 6px 16px rgba(23,105,255,.5); transform: scale(1.08); } .remember input:checked + .box svg { stroke-dashoffset: 0; } .remember input:focus-visible + .box { outline: 3px solid rgba(255,255,255,.5); }
.err { margin-bottom: 14px; padding: 11px 14px; border-radius: 14px; font-size: 13.5px; color: #ffb4ab; background: rgba(239,68,68,.15); box-shadow: inset 0 0 0 1px rgba(239,68,68,.3); animation: pop .4s var(--spring); } @keyframes pop { from { opacity: 0; transform: scale(.92); } }
.go { position: relative; overflow: hidden; width: 100%; height: 58px; border: 0; border-radius: 18px; cursor: pointer; color: #fff; font: 700 16.5px Inter, sans-serif; letter-spacing: -.2px; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(100deg, #3b82f6, #2563eb 40%, #7c3aed); background-size: 160% 100%; box-shadow: 0 16px 40px rgba(59,130,246,.5), inset 0 1px 0 rgba(255,255,255,.35); transition: transform .3s var(--spring), box-shadow .3s, background-position .6s; }
.go:hover { background-position: 100% 0; transform: translateY(-2px); box-shadow: 0 22px 54px rgba(99,102,241,.6), inset 0 1px 0 rgba(255,255,255,.35); } .go:active { transform: scale(.97); }
.go::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-120%); animation: sweep 3.5s ease-in-out infinite; }
@keyframes sweep { 60%, 100% { transform: translateX(120%); } }
.go svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--spring); } .go:hover .arrow { transform: translateX(5px); }
.go .spin, .go .ok { display: none; } .go .spin { width: 22px; height: 22px; border-radius: 50%; border: 3px solid rgba(255,255,255,.35); border-top-color: #fff; animation: rot .7s linear infinite; } @keyframes rot { to { transform: rotate(360deg); } }
.go.loading .lbl, .go.loading .arrow { display: none; } .go.loading .spin { display: block; }
.go.done { background: linear-gradient(100deg, #22c55e, #16a34a); } .go.done .lbl, .go.done .arrow, .go.done .spin { display: none; } .go.done .ok { display: block; width: 28px; height: 28px; stroke-dasharray: 26; animation: tick .5s var(--ease) both; } @keyframes tick { from { stroke-dashoffset: 26; } to { stroke-dashoffset: 0; } }
.foot { margin-top: 18px; text-align: center; font-size: 12px; color: rgba(255,255,255,.4); }
body.leaving .card-in { opacity: 0; transform: scale(.94); } body.leaving .hero { transition: all .7s var(--ease); opacity: 0; transform: translateY(-20px); }
.flash { position: fixed; inset: 0; z-index: 9; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 50%, #fff, #9ad0ff 40%, transparent 70%); transition: opacity .5s; } .flash.on { opacity: .9; }

@media (max-width: 960px) { body { overflow: auto; } .stage { grid-template-columns: 1fr; padding: 28px 22px; height: auto; min-height: 100%; } .hero { display: none; } .card-wrap { margin: 6vh auto; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; } }

.logo-row img { height: 46px; width: auto; border-radius: 0; filter: drop-shadow(0 6px 18px rgba(0,0,0,.45)); }

/* marca UP!CHAT/Up Company */
body { font-family: Inter, -apple-system, "Segoe UI", sans-serif; }
.upmark { display: inline-flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
.upmark svg { width: 44px; height: 44px; filter: drop-shadow(0 8px 20px rgba(23, 105, 255, .5)); }
.wm { font-family: Poppins, Inter, sans-serif; font-size: 30px; line-height: 1; letter-spacing: -.02em; }
.wm b { font-weight: 700; } .wm i { font-style: normal; font-weight: 700; color: #3D86FF; } .wm span { font-weight: 500; }
h1 { font-family: Poppins, Inter, sans-serif; font-weight: 700; letter-spacing: -.035em; }
.mark .upmark svg { width: 52px; height: 52px; }