:root{ --black:#0F0F0F;--green:#C7FF2E;--white:#FFFFFF;--charcoal:#2E2E2E; --gray:#808080;--bg:#FFFFFF;--field:#F1F1EF;--line:#EAEAE8; /* Una sola tipografía en todo: Sora. (--mono se mantiene como alias por compatibilidad) */ --disp:'Sora',sans-serif;--mono:'Sora',sans-serif; } *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body{font-family:var(--disp);background:var(--bg);color:var(--black);-webkit-font-smoothing:antialiased; display:flex;flex-direction:column;min-height:100vh;overflow-x:hidden} nav{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:28px 40px} .logo{font-family:var(--disp);font-weight:600;font-size:25px;letter-spacing:-0.02em;display:inline-flex;align-items:center;color:var(--black);line-height:1} .logo .pill{background:var(--green);color:#0F0F0F;font-weight:700;font-size:0.62em;letter-spacing:-0.005em;border-radius:0.3em;padding:0.16em 0.4em 0.2em;margin-left:0.18em;line-height:1;display:inline-flex;align-items:center} .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:0.2em;color:var(--gray);text-transform:uppercase;margin-bottom:16px} /* versión corta del eyebrow (solo móvil): palabras separadas por punto lima, estilo "en línea" */ .eb-short{display:none;text-align:center} .eb-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--green);margin:0 9px;vertical-align:middle} .nav-right{display:flex;align-items:center;gap:28px} .nav-label{font-family:var(--mono);font-size:11px;letter-spacing:0.22em;color:var(--gray);text-transform:uppercase} .btn-fichar{background:var(--black);color:#fff;border:none;font-family:var(--disp);font-weight:700;font-size:15px; padding:13px 22px;border-radius:40px;cursor:pointer;transition:transform .25s;text-decoration:none;display:inline-flex;align-items:center} .btn-fichar:hover{transform:translateY(-2px)} .btn-contacta{background:transparent;color:var(--black);border:1px solid var(--line);font-family:var(--disp);font-weight:600;font-size:15px; padding:12px 20px;border-radius:40px;cursor:pointer;transition:transform .25s,background .2s,border-color .2s;text-decoration:none;display:inline-flex;align-items:center} .btn-contacta:hover{transform:translateY(-2px);background:var(--green);color:#0F0F0F;border-color:var(--green)} /* ===== Intro gamificada por scroll ===== Sin JS (o móvil): #hero en flujo normal, .pin centra el contenido como antes (todo visible). Con JS (html.js, desktop): #hero alto + .pin sticky 100vh; el scroll scrubbea el orbe y revela fases. */ #hero{position:relative;z-index:2} .pin{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center; padding:96px 24px 70px;text-align:center;min-height:100vh} .intro-hint{display:none} /* gamificado (lo activa orb.js añadiendo .js a ) */ html.gamified,html.gamified body{height:auto} /* libera el height:100% para que #hero pueda crecer */ html.gamified #hero{flex:none;height:260vh} html.gamified .pin{position:sticky;top:0;height:100vh;height:100dvh;min-height:0;overflow:hidden;justify-content:center} html.gamified .ph{opacity:0;transform:translateY(18px);will-change:opacity,transform} html.gamified .corner-cta{opacity:0} /* los CTAs de esquina aparecen al final (orb.js) */ html.gamified .intro-hint{display:flex;flex-direction:column;align-items:center;gap:14px} /* intro-hint: el copy + flecha de scroll bajo el orbe en el primer pantallazo */ .hero-inner{display:flex;flex-direction:column;align-items:center;width:100%;will-change:transform} .hero-top{display:flex;flex-direction:column;align-items:center;width:100%} .intro-hint{position:absolute;left:50%;top:calc(50% + 215px);transform:translateX(-50%);z-index:5;pointer-events:none} .ihint-copy{font-family:var(--disp);font-weight:600;font-size:clamp(18px,2.4vw,24px);color:var(--black);letter-spacing:-0.01em;display:inline-flex;align-items:center;gap:2px} .scroll-arrow{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:none;background:var(--green);color:#0F0F0F;box-shadow:0 12px 26px -14px rgba(199,255,46,.85);animation:bob 1.6s ease-in-out infinite} .scroll-arrow svg{width:18px;height:18px} /* ===== Modo chat (tras la 1ª respuesta): orbe pequeño arriba + conversación tipo WhatsApp ===== Lo activa orb.js añadiendo .chatting a . La página deja de scrollear; el chat scrollea dentro. */ html.chatting{height:auto} html.chatting body{overflow:hidden;height:100vh;height:100dvh;height:var(--vvh,100dvh)} html.chatting #hero{height:100vh;height:100dvh;height:var(--vvh,100dvh)} html.chatting .pin{position:fixed;top:var(--vv-top,0px);left:0;right:0;height:100vh;height:100dvh;height:var(--vvh,100dvh);min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-start;padding:78px 24px 100px;z-index:5} html.chatting .hero-inner{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:flex-start;transform:none} html.chatting .orb-wrap{width:78px;height:78px;margin:0 auto 6px;animation:none} html.chatting .orb-wrap::after{display:none} html.chatting .orb-glow{opacity:.5} html.chatting .eyebrow,html.chatting h1,html.chatting .intro-hint,html.chatting .note{display:none} html.chatting .stage{flex:1;display:flex;flex-direction:column;min-height:0;width:min(720px,94vw);margin:4px auto 0} html.chatting .presence{margin-bottom:12px} html.chatting #chat{flex:1;overflow-y:auto;min-height:0;margin-bottom:12px;padding:2px 2px 0} html.chatting .pills{margin-top:12px} /* iOS: mientras se escribe (teclado abierto) ocultamos CTAs flotantes y chips, y damos sitio al chat */ .kb .corner-cta{display:none} html.chatting.kb .pin{padding-bottom:14px} html.chatting.kb .pills{display:none} @media(max-width:560px){html.chatting .pin{padding:74px 16px 84px}html.chatting .orb-wrap{width:62px;height:62px;margin-bottom:4px}} @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}} /* Orbe = vídeo de la esfera: el interior es plasma verde volumétrico que se revuelve (vida 3D real, no iluminación superficial). La cara no gira. Al pasar el cursor el interior acelera y el orbe se inclina en 3D hacia el ratón (parallax). */ .orb-wrap{position:relative;width:380px;height:380px;margin:0 auto 14px;animation:floaty 9s ease-in-out infinite; transition:width .6s cubic-bezier(.2,.8,.2,1),height .6s cubic-bezier(.2,.8,.2,1),margin .6s cubic-bezier(.2,.8,.2,1)} .orb-wrap::after{content:"";position:absolute;left:50%;bottom:6%;transform:translateX(-50%);width:52%;height:7%;background:radial-gradient(ellipse,rgba(0,0,0,.16),transparent 70%);filter:blur(7px);z-index:-1} @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} /* halo de energía detrás del orbe: late despacio y, vía --gx/--gy (orb.js), deriva un pelín hacia el cursor */ .orb-glow{position:absolute;inset:-6%;z-index:0;border-radius:50%;pointer-events:none; background:radial-gradient(circle at 50% 50%,rgba(199,255,46,.42),rgba(199,255,46,.10) 45%,transparent 68%); filter:blur(20px);opacity:.55;transform:translate(var(--gx,0),var(--gy,0)); transition:opacity .6s ease,transform .5s cubic-bezier(.2,.8,.2,1);animation:glowpulse 6.5s ease-in-out infinite} @keyframes glowpulse{0%,100%{opacity:.45}50%{opacity:.72}} /* el vídeo: recorte cuadrado + máscara circular que lo funde en el blanco; inclinación 3D vía --rx/--ry (orb.js) */ #mjOrb{position:relative;z-index:1;width:100%;height:100%;display:block;object-fit:cover;object-position:50% 47%; -webkit-mask:radial-gradient(circle closest-side at 50% 47%,#000 86%,rgba(0,0,0,.45) 95%,transparent 100%); mask:radial-gradient(circle closest-side at 50% 47%,#000 86%,rgba(0,0,0,.45) 95%,transparent 100%); transform:perspective(760px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d; transition:filter .5s ease;will-change:transform,filter} .orb-wrap:hover #mjOrb{filter:brightness(1.06) saturate(1.08)} .orb-wrap:hover .orb-glow{opacity:.9} @media(prefers-reduced-motion:reduce){.orb-wrap,#mjOrb,.orb-glow{animation:none}} h1{font-weight:800;font-size:clamp(30px,4.3vw,46px);line-height:1.05;letter-spacing:-0.03em;white-space:nowrap;margin:0 auto} h1 .dot{color:var(--green)}h1 .io{color:var(--gray)} /* "monje.io" en el título se muestra como el logo (pastilla lima), escalando con el h1 */ h1 .logo-h1{display:inline;font-size:1em;font-weight:800;letter-spacing:inherit} h1 .logo-h1 .pill{display:inline-block;vertical-align:0.1em;font-size:0.5em;font-weight:800;letter-spacing:-0.01em; padding:0.16em 0.36em 0.2em;margin-left:0.12em;border-radius:0.34em;line-height:1} /* "monje.io" dentro del copy de la intro */ .logo-ihint{display:inline-flex;font-size:1em;font-weight:700;letter-spacing:-0.01em;vertical-align:baseline} .logo-ihint .pill{font-size:0.62em;font-weight:700} .stage{width:min(720px,92vw);margin:30px auto 0} #chat{display:flex;flex-direction:column;gap:11px;margin-bottom:16px} .msg{max-width:80%;padding:13px 17px;border-radius:20px;font-size:15.5px;line-height:1.42;text-align:left; animation:pop .35s cubic-bezier(.2,.8,.2,1) both} @keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .msg.user{align-self:flex-end;background:#ECECEA;border-bottom-right-radius:7px} .msg.bot{align-self:flex-start;background:var(--black);color:#F4F4F2;border-bottom-left-radius:7px} .msg.bot b{color:var(--green)} .bot-row{align-self:flex-start;display:flex;align-items:flex-end;gap:9px;max-width:85%;animation:pop .35s cubic-bezier(.2,.8,.2,1) both} .bot-row .msg,.bot-row .typing{align-self:flex-end;max-width:none;animation:none} .bubble-ava{width:28px;height:28px;border-radius:50%;overflow:hidden;border:1.5px solid var(--green);flex:none;margin-bottom:2px} .bubble-ava img{width:100%;height:100%;object-fit:cover;display:block} .typing{align-self:flex-start;background:var(--black);padding:15px 18px;border-radius:20px;border-bottom-left-radius:7px;display:flex;gap:5px} .typing span{width:7px;height:7px;border-radius:50%;background:#7d7d7d;animation:blink 1.2s infinite} .typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s} @keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}} form.composer{display:flex;align-items:center;gap:10px;background:var(--field);border-radius:46px;padding:8px 8px 8px 26px} form.composer input{flex:1;border:none;outline:none;font-family:var(--disp);font-size:17px;background:transparent;color:var(--black)} form.composer input::placeholder{color:#9b9b97} .send{flex:none;width:48px;height:48px;border-radius:50%;border:none;background:var(--green);cursor:pointer;display:grid;place-items:center;transition:transform .2s} .send:hover{transform:scale(1.06)}.send svg{width:20px;height:20px} .pills{display:grid;grid-template-columns:1fr 1fr;gap:11px;max-width:540px;margin:18px auto 0} .pill{font-family:var(--disp);font-weight:500;font-size:15px;background:var(--white);border:1px solid var(--line); padding:10px 20px;border-radius:30px;cursor:pointer;transition:all .22s} .pill:hover{background:var(--black);color:#fff;border-color:var(--black);transform:translateY(-2px)} /* chips con micro-descripción (2 líneas, minimalista) */ .pills .pill{display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left;padding:11px 18px;border-radius:14px} .pills .pill b{font-weight:600;font-size:15px;letter-spacing:-0.01em} .pills .pill span{font-size:11px;color:var(--gray);font-weight:400;line-height:1.25} .pills .pill:hover span{color:#bdbdba} .cta-card{margin-top:4px;background:var(--white);border:1px solid var(--line);border-radius:22px;padding:18px 20px; display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left;animation:pop .4s both; box-shadow:0 20px 50px -34px rgba(0,0,0,.4)} .cta-card h3{font-size:17px;font-weight:700;letter-spacing:-0.01em} .cta-card p{font-family:var(--mono);font-size:10.5px;letter-spacing:0.13em;color:var(--gray);margin-top:5px;text-transform:uppercase} .cta-btn{flex:none;background:var(--green);color:var(--black);font-family:var(--disp);font-weight:700;font-size:15px; border:none;padding:14px 22px;border-radius:40px;cursor:pointer;text-decoration:none;transition:transform .2s} .cta-btn:hover{transform:translateY(-2px)} .presence{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:16px} .presence .ava{width:36px;height:36px;border-radius:50%;overflow:hidden;border:2px solid var(--green);flex:none} .presence .ava img{width:100%;height:100%;object-fit:cover;display:block} .presence .who{display:flex;flex-direction:column;line-height:1.12;text-align:left} .presence .who b{font-size:14px;font-weight:700} .presence .who span{font-size:11px;color:var(--gray)} .presence .status{margin-left:4px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--gray);display:flex;align-items:center;gap:6px} .presence .live{width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 1.8s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(199,255,46,.55)}70%{box-shadow:0 0 0 8px rgba(199,255,46,0)}100%{box-shadow:0 0 0 0 rgba(199,255,46,0)}} .note{margin:14px auto 0;font-size:13px;color:var(--gray);max-width:52ch;line-height:1.5} .note b{color:var(--charcoal);font-weight:600} /* ===== CTAs flotantes en las esquinas (sin footer), en verde lima de marca ===== */ .corner-cta{position:fixed;bottom:28px;z-index:40} /* Fichar a Monje — abajo izquierda */ .fichar-fab{left:28px;background:var(--green);color:#0F0F0F;font-family:var(--disp);font-weight:700;font-size:15px; text-decoration:none;display:inline-flex;align-items:center;padding:14px 24px;border-radius:40px; box-shadow:0 16px 34px -16px rgba(199,255,46,.85);transition:transform .2s} .fichar-fab:hover{transform:translateY(-2px)} /* WhatsApp — abajo derecha (botón flotante + popup) */ .wa-fab{right:28px;display:flex;align-items:center;gap:12px} .wa-btn{width:58px;height:58px;border-radius:50%;background:var(--green);color:#0F0F0F;display:grid;place-items:center;flex:none; box-shadow:0 16px 34px -14px rgba(199,255,46,.8);transition:transform .2s;animation:wapulse 2.6s ease-in-out infinite} .wa-btn:hover{transform:scale(1.07)} .wa-btn svg{width:34px;height:34px} @keyframes wapulse{0%{box-shadow:0 16px 34px -14px rgba(199,255,46,.8),0 0 0 0 rgba(199,255,46,.5)}70%{box-shadow:0 16px 34px -14px rgba(199,255,46,.8),0 0 0 14px rgba(199,255,46,0)}100%{box-shadow:0 16px 34px -14px rgba(199,255,46,.8),0 0 0 0 rgba(199,255,46,0)}} .wa-pop{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:9px 14px;font-size:13px;font-weight:500;color:var(--charcoal); box-shadow:0 14px 34px -22px rgba(0,0,0,.5);white-space:nowrap;opacity:0;transform:translateX(10px);pointer-events:none;transition:opacity .25s,transform .25s} .wa-fab:hover .wa-pop{opacity:1;transform:translateX(0)} @media(max-width:560px){.corner-cta{bottom:18px}.fichar-fab{left:18px;font-size:13px;padding:12px 18px}.wa-fab{right:18px}.wa-btn{width:52px;height:52px}.wa-btn svg{width:30px;height:30px}.wa-pop{display:none}} .reveal{opacity:0;transform:translateY(16px);animation:rise .8s cubic-bezier(.2,.8,.2,1) forwards} @keyframes rise{to{opacity:1;transform:none}} .d1{animation-delay:.05s}.d2{animation-delay:.18s}.d3{animation-delay:.34s}.d4{animation-delay:.5s} @media(max-width:560px){nav{padding:16px}.nav-label{display:none}.orb-wrap{width:190px;height:190px}.cta-card{flex-direction:column;align-items:flex-start} .nav-right{gap:8px}.btn-fichar,.btn-contacta{font-size:12px;padding:9px 13px;white-space:nowrap}.logo{font-size:21px} /* titular en UNA línea, escalando con el ancho */ h1{white-space:nowrap;font-size:clamp(15px,5vw,30px);line-height:1.1;max-width:none} .eyebrow{margin-bottom:10px}.eb-full{display:none}.eb-short{display:block}.stage{margin:14px auto 0}.note{font-size:12px;margin-top:10px;line-height:1.45} /* input: texto más pequeño para que entre el placeholder */ form.composer{padding:7px 7px 7px 18px} form.composer input{font-size:15px} .send{width:44px;height:44px} /* chips 2×2 equilibrados */ .pills{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px} .pill{font-size:14px;padding:10px 12px} html.gamified .intro-hint{top:calc(50% + 128px)} /* móvil: dos grupos con aire — arriba orbe+características+pregunta, abajo Alex+input+chips. padding-bottom amplio para que la nota no choque con los CTAs flotantes */ html.gamified .pin{padding:64px 16px 84px} html.gamified .hero-inner{flex:1 1 auto;min-height:0;justify-content:space-between} .hero-top{gap:6px}}