/* =================================================================== BASE.CSS — FractAIl Web · COSMOS Design System Reset, variables, tipografía, nebulosa, scroll-reveal, grid bg =================================================================== */ *{margin:0;padding:0;box-sizing:border-box} :root{ --bg:#050505; --neon:#00FF87; --cyan:#00BAFF; --amber:#FFBF00; --danger:#FF4545; --dim:#737A8C; --text:#FFFFFF; --cardBg:rgba(22,22,28,0.55); --cardBorder:rgba(64,64,64,0.22); --glass:rgba(20,20,24,0.8); --morado:#6366f1; --purpura:#b48eff; } html{scroll-behavior:smooth} body{ background:var(--bg); color:var(--text); font-family:system-ui,-apple-system,'SF Pro Display','Segoe UI',sans-serif; overflow-x:hidden; -webkit-font-smoothing:antialiased; } body.os-mode{overflow:hidden} /* ===== GRID BACKGROUND — tech feel ===== */ body::before{ content:''; position:fixed;inset:0;z-index:0;pointer-events:none; background-image: linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px); background-size:80px 80px; mask-image:radial-gradient(ellipse 80% 60% at 50% 40%, black 20%, transparent 70%); -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 40%, black 20%, transparent 70%); } /* ===== NEBULOSA — más intensa ===== */ .nebulosa{position:fixed;inset:0;z-index:0;pointer-events:none} .blob{position:absolute;border-radius:50%;filter:blur(120px);animation:bfloat 25s ease-in-out infinite alternate} .b1{width:800px;height:800px;background:radial-gradient(circle,rgba(99,102,241,0.18),rgba(13,5,46,0.5),transparent);top:-15%;left:-10%} .b2{width:650px;height:650px;background:radial-gradient(circle,rgba(0,186,255,0.12),rgba(0,22,44,0.4),transparent);top:30%;right:-8%;animation-delay:-8s} .b3{width:550px;height:550px;background:radial-gradient(circle,rgba(0,255,135,0.08),rgba(0,30,15,0.3),transparent);bottom:-8%;left:25%;animation-delay:-16s} @keyframes bfloat{ 0%{transform:translate(0,0) scale(1)} 33%{transform:translate(60px,-50px) scale(1.12)} 66%{transform:translate(-40px,40px) scale(0.92)} 100%{transform:translate(25px,-25px) scale(1.05)} } canvas#stars{position:fixed;inset:0;z-index:0;pointer-events:none} /* ===== SCROLL REVEAL — progressive enhancement ===== */ /* Default: everything visible. JS adds .rv-ready to to enable animations */ html.rv-ready .rv{ opacity:0; transform:translateY(80px) scale(0.97); filter:blur(6px); transition: opacity 1.2s cubic-bezier(0.16,1,0.3,1), transform 1.2s cubic-bezier(0.16,1,0.3,1), filter 1.2s cubic-bezier(0.16,1,0.3,1); } html.rv-ready .rv.v{ opacity:1; transform:translateY(0) scale(1); filter:blur(0); } .d1{transition-delay:.15s} .d2{transition-delay:.3s} .d3{transition-delay:.45s} .d4{transition-delay:.6s} /* ===== GLOW TEXT ===== */ .glow-green{ text-shadow:0 0 40px rgba(0,255,135,0.25), 0 0 120px rgba(0,255,135,0.08); } .glow-cyan{ text-shadow:0 0 40px rgba(0,186,255,0.25), 0 0 120px rgba(0,186,255,0.08); } /* ===== BUTTONS GLOBALES ===== */ .btn{ display:inline-flex;align-items:center;gap:8px; padding:18px 44px;border-radius:999px; font-size:15px;font-weight:800;letter-spacing:.5px; text-decoration:none;border:none;cursor:pointer; transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s; } .btn:hover{transform:scale(1.06)} .btn-g{background:var(--neon);color:#050505;box-shadow:0 0 30px rgba(0,255,135,0.2)} .btn-g:hover{box-shadow:0 0 60px rgba(0,255,135,0.45)} .btn-o{background:transparent;color:var(--text);border:1.5px solid rgba(255,255,255,0.12)} .btn-o:hover{border-color:rgba(255,255,255,0.35);box-shadow:0 0 30px rgba(255,255,255,0.05)} /* ===== SECTION DIVIDER — glow line ===== */ .section-glow{ width:120px;height:1px;margin:0 auto 80px; background:linear-gradient(90deg,transparent,var(--neon),transparent); opacity:0.3; } /* ===== RESPONSIVE BASE ===== */ @media(max-width:600px){ .btn{padding:14px 28px;font-size:14px} }