:root{ --bg:#0b0d10; --panel:rgba(255,255,255,.035); --panel-border:rgba(255,255,255,.09); --input:rgba(255,255,255,.045); --input-border:rgba(255,255,255,.12); --ink:#eef1f4; --muted:#8b939e; --hint:rgba(139,147,158,.75); --teal:#00d2be; --pink:#f5c6c0; --mustard:#e3b34e; --violet:#9d8cff; } *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} html{overflow-x:hidden} body{ font-family:'Manrope',system-ui,sans-serif;color:var(--ink); background:var(--bg);overflow-x:hidden;overflow-y:auto; } /* grano de ruido global */ body::before{ content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.35; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.02 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); } .wrap{ width:100%;padding:0 clamp(24px,4vw,64px);position:relative;z-index:2; min-height:100vh;min-height:100dvh; display:flex;flex-direction:column; gap:clamp(4px,1vh,12px); } /* Mientras Firebase confirma si ya hay sesión, no mostramos la landing (evita el flash) ni nada más que un loader mínimo. firebase-auth.js agrega "auth-ready" al apenas sabe si mostrar la landing o entrar directo con la animación. Si algo falla, hay un timeout de seguridad en firebase-auth.js que igual revela la landing. */ body:not(.auth-ready) .wrap{display:none} #bootLoading{ position:fixed;inset:0;z-index:5000;display:flex;align-items:center;justify-content:center; background:var(--bg); } body.auth-ready #bootLoading{display:none} .boot-mark{ width:42px;height:42px;border-radius:13px; background:linear-gradient(135deg,var(--teal),#0a7c72); display:flex;align-items:center;justify-content:center; font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:15px;color:#04211e; box-shadow:0 0 18px rgba(0,210,190,.45); animation:bootPulse 1.2s ease-in-out infinite; } @keyframes bootPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.12);opacity:.7}} @media (prefers-reduced-motion: reduce){.boot-mark{animation:none}} /* ================= NAV ================= */ .nav{display:flex;align-items:center;justify-content:space-between;padding:clamp(10px,2.5vh,20px) 0;flex-shrink:0} .wordmark{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;letter-spacing:2.5px;display:flex;align-items:center;gap:10px} .wordmark .mark{width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,var(--teal),#0a7c72); box-shadow:0 0 18px rgba(0,210,190,.45);display:flex;align-items:center;justify-content:center;font-size:12px;color:#04211e;font-weight:800} .wordmark em{font-style:normal;color:var(--teal)} /* ================= HERO ================= */ .hero{ position:relative;flex:1;min-height:0;display:grid; grid-template-columns:1.1fr .9fr;gap:clamp(16px,3vw,40px);align-items:center; padding:0; } @media(max-width:820px){ .hero{grid-template-columns:1fr} .heropanel{display:none} } .hero::before{ content:"";position:absolute;inset:-120px -50vw 0;z-index:-1; background: radial-gradient(800px 520px at 68% 30%, rgba(0,210,190,.14), transparent 62%), radial-gradient(500px 400px at 10% 80%, rgba(245,198,192,.06), transparent 60%); } .hero::after{ content:"";position:absolute;inset:0 -50vw;z-index:-1; background-image:radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px); background-size:30px 30px; mask-image:radial-gradient(700px 500px at 60% 40%, #000 30%, transparent 75%); opacity:.5; } .eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:800;letter-spacing:3px;color:var(--muted);margin-bottom:clamp(8px,1.8vh,20px)} .eyebrow::before{content:"";width:28px;height:1px;background:var(--teal)} .eyebrow i{width:6px;height:6px;border-radius:50%} .eyebrow i:nth-of-type(1){background:var(--teal)} .eyebrow i:nth-of-type(2){background:var(--pink)} .eyebrow i:nth-of-type(3){background:var(--mustard)} h1{ font-family:'Space Grotesk',sans-serif;font-size:clamp(26px,4vw + 3vh,68px); font-weight:700;letter-spacing:-1.5px;line-height:1.05; } h1 span{background:linear-gradient(90deg,var(--teal),#7ee8dd);-webkit-background-clip:text;background-clip:text;color:transparent} .hero .tag{color:var(--muted);font-size:clamp(12.5px,1.1vw + 1vh,16.5px);margin:clamp(10px,2vh,22px) 0 clamp(14px,2.6vh,32px);max-width:480px;line-height:1.6} .cta-row{display:flex;gap:14px;flex-wrap:wrap} .btn{ font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:13px;letter-spacing:1.5px; padding:clamp(11px,1.8vh,15px) 28px;border-radius:12px;cursor:pointer;border:none; background:linear-gradient(135deg,var(--teal),#0aa396);color:#04211e; box-shadow:0 10px 30px rgba(0,210,190,.3);transition:transform .2s,box-shadow .2s; } .btn:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,210,190,.4)} .btn.ghost{background:transparent;border:1px solid var(--panel-border);color:var(--ink);box-shadow:none} .btn.ghost:hover{border-color:var(--teal)} /* panel flotante en el hero */ .heropanel{perspective:1100px} .quote{ transform:rotateY(-9deg) rotateX(3deg); background:linear-gradient(165deg,rgba(255,255,255,.06),rgba(255,255,255,.02)); border:1px solid rgba(0,210,190,.28); border-radius:20px;backdrop-filter:blur(16px); padding:clamp(16px,2.6vh,26px) clamp(16px,2.6vh,26px) clamp(14px,2.2vh,22px); max-width:360px;margin-left:auto; box-shadow:0 40px 80px rgba(0,0,0,.5), 0 0 50px rgba(0,210,190,.12); animation:float 6s ease-in-out infinite; } @keyframes float{0%,100%{transform:rotateY(-9deg) rotateX(3deg) translateY(0)}50%{transform:rotateY(-9deg) rotateX(3deg) translateY(-12px)}} @media (prefers-reduced-motion: reduce){.quote{animation:none}} .quote .qt{font-family:'Space Grotesk',sans-serif;font-size:10px;font-weight:600;letter-spacing:3px;color:var(--muted); margin-bottom:16px;display:flex;align-items:center;gap:8px} .quote .qt i{width:7px;height:7px;border-radius:2px;transform:rotate(45deg);background:var(--teal);box-shadow:0 0 8px var(--teal)} .quote .ln{display:flex;justify-content:space-between;font-size:12px;padding:5px 0} .quote .ln span:first-child{color:var(--muted)} .quote .ln span:last-child{font-family:'Space Grotesk',sans-serif;font-weight:600} .quote .big{ margin-top:14px;border-radius:12px;padding:13px 16px; background:linear-gradient(135deg,rgba(0,210,190,.16),rgba(0,210,190,.04)); border:1px solid rgba(0,210,190,.45); } .quote .big .l{font-size:9px;font-weight:800;letter-spacing:2.5px;color:var(--teal)} .quote .big .a{font-family:'Space Grotesk',sans-serif;font-size:26px;font-weight:700;margin-top:2px;text-shadow:0 0 24px rgba(0,210,190,.4)} /* stats con números grandes */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1.2vw,14px);position:relative;z-index:3;flex-shrink:0} .stat{ background:var(--panel);border:1px solid var(--panel-border);border-radius:16px; backdrop-filter:blur(14px);padding:clamp(10px,1.8vh,22px) clamp(8px,1.6vw,24px);text-align:center; transition:transform .2s,border-color .2s; } .stat:hover{transform:translateY(-4px);border-color:rgba(0,210,190,.3)} .stat .n{font-family:'Space Grotesk',sans-serif;font-size:clamp(18px,1.6vw + 1.4vh,34px);font-weight:700;color:var(--teal)} .stat:nth-child(2) .n{color:var(--pink)} .stat:nth-child(3) .n{color:var(--mustard)} .stat:nth-child(4) .n{color:var(--violet)} .stat .l{font-size:clamp(8px,.7vw + .6vh,10.5px);font-weight:800;letter-spacing:1.2px;color:var(--muted);margin-top:4px} .footer{padding:clamp(10px,2vh,20px) 0;text-align:center;font-family:'Space Grotesk',sans-serif; font-size:10.5px;letter-spacing:3px;color:#3a4048;font-weight:700;flex-shrink:0} .footer em{font-style:normal;color:var(--teal);opacity:.7} .footer a{color:inherit;text-decoration:none} .footer a:hover em{opacity:1;text-decoration:underline}