/* ============================================================================ EXPERIENCIA DE ENTRADA · CEREBRO ---------------------------------------------------------------------------- Dos piezas nuevas de 2026-08-15, encima del sistema existente (sistema.css): 1. EL DESPERTAR (#dsp) — la página no carga: despierta. Negro absoluto, un punto de luz azul que respira, matices violeta, y las dos frases canónicas antes de disolverse en el núcleo del hero. 2. GABY (#gabyPill) — la entrada a la demo de voz (3 misiones), abajo a la IZQUIERDA (la derecha es de "Siguiente escena" y del orbe guía). El overlay solo existe si lleva .con-despertar — esa clase la pone un gate inline en el ANTES de la primera pintura (sessionStorage + prefers-reduced-motion deciden). Sin JS no hay clase y no hay overlay. ========================================================================== */ /* ===== 1 · EL DESPERTAR ===== */ #dsp{display:none} html.con-despertar{overflow:hidden} html.con-despertar #dsp{ display:block;position:fixed;inset:0;z-index:500;background:#010208; opacity:1;transition:opacity .9s var(--ease,ease)} #dsp.fuera{opacity:0;pointer-events:none} #dsp.rapido{transition-duration:.35s} #dspCv{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.6s ease} #dsp.p2 #dspCv{opacity:1} /* El punto: nace casi imperceptible, respira, y al final es el flare que entrega el relevo al núcleo del hero. Azul referencia → energía violeta. */ #dspPunto{ position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px; border-radius:50%;background:#cfe4ff;opacity:0;transform:scale(.4); box-shadow:0 0 12px 2px rgba(var(--node2-rgb,59,140,255),.9), 0 0 44px 10px rgba(var(--node2-rgb,59,140,255),.45); transition:opacity 1.4s ease} #dsp.p1 #dspPunto{opacity:1;animation:dspRespira 2.6s ease-in-out infinite} #dsp.p2 #dspPunto{ animation:dspRespira 2.1s ease-in-out infinite; box-shadow:0 0 14px 3px rgba(var(--node2-rgb,59,140,255),.85), 0 0 60px 16px rgba(var(--vio-2-rgb,123,61,255),.5), 0 0 130px 40px rgba(var(--vio-2-rgb,123,61,255),.22)} #dsp.fin #dspPunto{ animation:none;transform:scale(30);opacity:0; transition:transform 1.1s cubic-bezier(.2,.6,.2,1),opacity 1s ease .15s} @keyframes dspRespira{ 0%,100%{transform:scale(.85)} 50%{transform:scale(1.35)} } /* Las dos frases. Monoespaciada, aire de sistema, no de marketing. */ .dspTx{ position:absolute;left:50%;top:calc(50% + clamp(64px,12vh,120px));transform:translateX(-50%); margin:0;white-space:nowrap;font-family:var(--mono,monospace); font-size:clamp(.82rem,2.6vw,1.05rem);letter-spacing:.34em;text-indent:.34em; color:var(--txt-2,#dbe6f5);opacity:0;transition:opacity 1s ease;text-align:center} #dsp.t1 #dspT1{opacity:.92} #dsp.t2 #dspT1{opacity:.16;transition-duration:.7s} #dspT2{color:var(--vio,#b98cff);text-shadow:0 0 26px rgba(var(--vio-2-rgb,123,61,255),.55)} #dsp.t2 #dspT2{opacity:1;top:calc(50% + clamp(96px,17vh,168px))} #dsp.fin .dspTx{opacity:0;transition-duration:.5s} /* Saltar: aparece tarde y discreto. Toda la pantalla también salta al toque. */ #dspSkip{ position:absolute;right:22px;bottom:max(20px,env(safe-area-inset-bottom)); padding:9px 15px;border-radius:30px;border:1px solid rgba(140,175,215,.18); background:transparent;color:var(--mut,#a8bcd8);cursor:pointer; font-family:var(--mono,monospace);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase; opacity:0;transition:opacity .8s ease,border-color .3s,color .3s} #dsp.p1 #dspSkip{opacity:.7} #dspSkip:hover{color:var(--txt,#f2f7ff);border-color:rgba(140,175,215,.4)} @media(max-width:620px){ .dspTx{letter-spacing:.22em;text-indent:.22em;font-size:.78rem} } /* ===== 2 · GABY — LA DEMO DE VOZ (3 misiones) ===== */ #gabyPill{ position:fixed;left:26px;bottom:26px;z-index:58;display:inline-flex;align-items:center;gap:10px; padding:11px 17px;border-radius:30px;cursor:pointer; border:1px solid rgba(var(--vio-rgb,185,140,255),.4);background:rgba(7,13,26,.78); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); font-family:var(--mono,monospace);font-size:var(--t-xs,.7rem);letter-spacing:.14em; text-transform:uppercase;color:var(--txt-2,#dbe6f5); box-shadow:0 0 30px -10px rgba(var(--vio-2-rgb,123,61,255),.8); opacity:0;transform:translateY(10px);pointer-events:none; transition:opacity .9s var(--ease,ease),transform .9s var(--ease,ease), border-color .3s,box-shadow .3s} #gabyPill.viva{opacity:1;transform:none;pointer-events:auto} #gabyPill:hover{border-color:var(--vio,#b98cff);box-shadow:0 0 34px -8px rgba(var(--vio-2-rgb,123,61,255),.9)} #gabyPill .pto{ width:9px;height:9px;border-radius:50%;background:var(--vio,#b98cff);flex:none; box-shadow:0 0 10px 2px rgba(var(--vio-2-rgb,123,61,255),.8); animation:dspRespira 2.4s ease-in-out infinite} #gabyPill .mis{color:var(--mut,#a8bcd8);letter-spacing:.3em;text-indent:.3em;font-size:.62rem} #gabyPill .mis b{color:var(--vio,#b98cff);font-weight:600} #gabyPill.agotada{border-color:rgba(255,176,31,.45)} #gabyPill.agotada .pto{background:var(--amber,#ffb01f);box-shadow:0 0 10px 2px rgba(var(--amber-rgb,255,176,31),.7);animation:none} /* La burbuja que suelta Gaby al terminar el despertar, y la carta de CTA cuando la demo no está disponible o se agotaron las misiones. */ #gabyGlobo{ position:fixed;left:26px;bottom:84px;z-index:58;max-width:min(320px,78vw); padding:14px 18px;border-radius:16px;border:1px solid rgba(var(--vio-rgb,185,140,255),.3); background:rgba(6,12,24,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); color:var(--txt-2,#dbe6f5);font-size:.86rem;line-height:1.5; box-shadow:0 12px 44px -16px rgba(0,0,0,.8),0 0 34px -14px rgba(var(--vio-2-rgb,123,61,255),.6); opacity:0;transform:translateY(8px);pointer-events:none; transition:opacity .6s var(--ease,ease),transform .6s var(--ease,ease)} #gabyGlobo.viva{opacity:1;transform:none;pointer-events:auto} #gabyGlobo b{color:var(--vio,#b98cff)} #gabyGlobo a{color:var(--amber,#ffb01f);text-decoration:none;border-bottom:1px solid rgba(var(--amber-rgb,255,176,31),.4)} #gabyGlobo a:hover{border-bottom-color:var(--amber,#ffb01f)} #gabyGlobo .cerrar{ position:absolute;top:6px;right:10px;border:0;background:none;color:var(--mut,#a8bcd8); cursor:pointer;font-size:1rem;line-height:1;padding:4px} @media(max-width:620px){ /* En teléfono el pill se compacta a "GABY ●●●": a lo ancho de 375px no caben dos botones con frase completa (choca con "Siguiente escena"). */ #gabyPill{left:14px;bottom:14px;padding:9px 13px} #gabyPill #gabyLb{display:none} #gabyPill .pto{order:-2} #gabyPill::after{content:"Gaby";letter-spacing:.14em;order:-1} #gabyPill.agotada::after{content:"Demo privada"} #gabyGlobo{left:14px;bottom:66px} } /* El widget de voz vive abajo-izquierda también (se configura en el agente); en pantallas chicas el pill se recoge cuando el widget está montado para no apilar dos botones. */ body.gaby-montada #gabyPill{bottom:96px} @media(max-width:620px){body.gaby-montada #gabyPill{bottom:86px}} @media(prefers-reduced-motion:reduce){ #dspPunto,#gabyPill .pto{animation:none !important} }