/* S1GNAL — widget de voz. Sistema de marca v3 (ver BRAND-GUIDELINES.md). * * REGLA DE MARCA: esta es una cápsula fija — no se re-pinta para combinar * con el sitio anfitrión. Antes de "corregir" los colores para que hagan * juego con un cliente, lee "Cómo debe verse en el sitio de un cliente". * * Ritmo vertical en Fibonacci (55·89·144·34·89·34), escala tipográfica en * pasos φ y la cápsula del símbolo en proporción φ²:1. * * Posición: pásale VoiceWidgetConfig.position = "left" cuando el sitio del * cliente ya tenga algo en la esquina inferior derecha — el caso más común * en México es un botón flotante de WhatsApp. * * Modo adaptativo: data-signal-theme="adaptive" en (servicio pagado) * hace que la cápsula tome los colores del sitio. El wordmark, el símbolo y * el escáner NUNCA cambian de color, ni siquiera en ese modo. */ /* Doto va incrustada (7 KB) para que el widget sea autocontenido: sin archivo extra que copiar, sin CDN y sin chocar con la CSP del cliente. */ @font-face { font-family: "S1GNAL Doto"; src: url("data:font/woff2;base64,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") format("woff2"); font-weight: 100 900; font-display: block; } .signal-launcher, .signal-panel { /* Color: LEDs sobre negro CRT */ --sg-amber: #FFB000; --sg-hot: #FFE7B0; --sg-dim: #8A5A00; --sg-off: #3D2A05; --sg-black: #0A0A08; --sg-ink: #050504; --sg-phosphor: #E8E4D8; --sg-steel: #8C8A80; --sg-line: rgba(255, 176, 0, .18); /* Espaciado Fibonacci */ --sg-1: 8px; --sg-2: 13px; --sg-3: 21px; --sg-4: 34px; --sg-5: 55px; --sg-display: "S1GNAL Doto", monospace; --sg-mono: "IBM Plex Mono", ui-monospace, monospace; --sg-text: "Space Grotesk", system-ui, -apple-system, sans-serif; --sg-ease: cubic-bezier(.2, .8, .2, 1); font-family: var(--sg-text); box-sizing: border-box; } .signal-launcher *, .signal-panel * { box-sizing: border-box; } /* ---------- Símbolo de marca: "La Ranura" ---------- * La barra del escáner reducida a marca, en proporción φ² : 1 (2.618). * Sustituye al botón de encendido: ese isotipo es de Origin One y ataba el * producto a un solo dueño. Los segmentos los pinta voice-widget.js con la * misma rampa de color del escáner grande, así marca y motivo nunca se * desincronizan. */ .mk-slit { position: relative; flex: 0 0 auto; width: 42px; /* 42 / 16 = 2.625 ≈ φ² */ height: 16px; display: flex; align-items: center; gap: 2px; padding: 0 4px; border: 1px solid rgba(255, 176, 0, .42); border-radius: 999px; background: var(--sg-ink); } .mk-slit i { display: block; flex: 1 1 0; height: 7px; border-radius: 1px; background: var(--sg-off); } /* ---------- Launcher ---------- * Es una píldora, no un botón cuadrado: la etiqueta "HABLAR" siempre * visible es lo único que le dice al visitante para qué sirve. Un ícono * solo no lo comunica — y en móvil no hay hover que lo revele. */ .signal-launcher { position: fixed; right: var(--sg-3); bottom: var(--sg-3); z-index: 2147483000; /* por encima de banners y chats del sitio anfitrión */ height: 56px; padding: 0 var(--sg-3) 0 var(--sg-2); display: flex; align-items: center; gap: var(--sg-1); border: 1px solid rgba(255, 176, 0, .45); border-radius: 999px; background: rgba(10, 10, 8, .97); color: var(--sg-phosphor); box-shadow: 0 14px 34px rgba(0, 0, 0, .5), 0 0 20px rgba(255, 176, 0, .09); cursor: pointer; transition: transform .2s var(--sg-ease), border-color .2s ease, box-shadow .2s ease, opacity .16s ease; } .signal-launcher:hover, .signal-launcher:focus-visible { transform: translateY(-2px); border-color: rgba(255, 176, 0, .85); box-shadow: 0 18px 40px rgba(0, 0, 0, .55), 0 0 26px rgba(255, 176, 0, .16); outline: none; } .signal-launcher:focus-visible { outline: 2px solid var(--sg-amber); outline-offset: 3px; } .signal-launcher.is-hidden { opacity: 0; pointer-events: none; transform: scale(.9); } /* La etiqueta es la afordancia principal: dice qué pasa al tocar. */ .signal-launcher .launcher-action { font-family: var(--sg-mono); font-size: 12px; letter-spacing: .2em; color: var(--sg-amber); white-space: nowrap; } /* Respiración de espera: mucho más lenta y tenue que el barrido activo. Sirve para que el ojo lo encuentre, no para simular que está escuchando — por eso es opacidad, no movimiento del haz (ver BRAND-GUIDELINES.md). */ /* El launcher corre el mismo barrido lento de reposo, pintado por JS — no una animación CSS aparte, para que marca y escáner sean el mismo gesto. */ /* ---------- Panel ---------- * Altura = suma Fibonacci de sus bandas: 55 + 89 + 144 + 34 + 89 + 34. */ .signal-panel { position: fixed; right: var(--sg-3); bottom: var(--sg-3); z-index: 2147483001; width: 420px; height: 610px; overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--sg-line); border-radius: 16px; background: var(--sg-black); color: var(--sg-phosphor); box-shadow: 0 24px 80px rgba(0, 0, 0, .6); transform-origin: bottom right; opacity: 0; transform: translateY(12px) scale(.96); pointer-events: none; visibility: hidden; transition: opacity .2s ease, transform .26s var(--sg-ease), visibility 0s linear .26s; } .signal-panel::before { content: ""; position: absolute; left: var(--sg-3); top: 0; width: 62px; height: 2px; background: var(--sg-amber); box-shadow: 0 0 10px rgba(255, 176, 0, .45); } .signal-panel.is-open { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .2s ease, transform .26s var(--sg-ease), visibility 0s; } /* --- Cabecera (55) --- */ .signal-panel .panel-head { height: var(--sg-5); flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--sg-2) 0 var(--sg-3); border-bottom: 1px solid var(--sg-line); } .signal-panel .lockup { font-family: var(--sg-display); font-weight: 700; font-size: 23px; letter-spacing: .04em; color: var(--sg-phosphor); } .signal-panel .lockup b { color: var(--sg-amber); font-weight: 700; } .signal-panel .head-right { display: flex; align-items: center; gap: var(--sg-1); } .signal-panel .status { display: flex; align-items: center; gap: 6px; font-family: var(--sg-mono); font-size: 8px; letter-spacing: .14em; color: var(--sg-steel); } .signal-panel .status-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--sg-amber); box-shadow: 0 0 7px rgba(255, 176, 0, .7); } .signal-panel .close { width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--sg-steel); font: inherit; font-size: 20px; line-height: 1; cursor: pointer; } .signal-panel .close:hover, .signal-panel .close:focus-visible { background: rgba(255, 176, 0, .1); color: var(--sg-phosphor); outline: none; } /* --- Escáner (89) --- */ .signal-panel .reactor-wrap { height: 144px; flex: 0 0 auto; padding: var(--sg-2) var(--sg-3) var(--sg-1); } .signal-panel .reactor { position: relative; height: 100%; border-radius: 6px; background: var(--sg-ink); box-shadow: inset 0 0 0 1px rgba(255, 176, 0, .12); display: flex; align-items: center; padding: 0 var(--sg-2); } /* Esquinas HUD: marcan el instrumento, no cada elemento. */ .signal-panel .reactor::before, .signal-panel .reactor::after { content: ""; position: absolute; width: 10px; height: 10px; opacity: .65; pointer-events: none; } .signal-panel .reactor::before { top: 5px; left: 5px; border-top: 2px solid var(--sg-amber); border-left: 2px solid var(--sg-amber); } .signal-panel .reactor::after { bottom: 5px; right: 5px; border-bottom: 2px solid var(--sg-amber); border-right: 2px solid var(--sg-amber); } /* Los segmentos son de altura fija y solo cambian color/brillo. El barrido lo calcula voice-widget.js (sinusoide + gaussiana + estela de fósforo); sin transición CSS, porque el JS escribe un valor por frame y encima una transición lo emborronaría. */ .signal-panel .voice-pixels { position: absolute; inset: 0 var(--sg-2); display: flex; align-items: center; gap: 3px; margin-bottom: 14px; } .signal-panel .voice-pixels i { display: block; flex: 1 1 0; height: 26px; border-radius: 2px; background: var(--sg-off); } .signal-panel .axis { display: none; } .signal-panel .reactor-state { position: absolute; left: 0; right: 0; bottom: 7px; text-align: center; font-family: var(--sg-mono); font-size: 8px; letter-spacing: .18em; color: var(--sg-dim); } .signal-panel .reactor.thinking .voice-pixels { opacity: .85; } /* --- Conversación (144) --- */ .signal-panel .conversation { height: 178px; flex: 0 0 auto; margin: 0 var(--sg-3); padding: var(--sg-2) 0 var(--sg-1); overflow: auto; scrollbar-width: none; } .signal-panel .conversation::-webkit-scrollbar { display: none; } .signal-panel .speaker { margin-bottom: 6px; font-family: var(--sg-mono); font-size: 8px; letter-spacing: .16em; color: var(--sg-amber); } .signal-panel .message { margin: 0; padding-left: var(--sg-2); border-left: 2px solid var(--sg-dim); color: var(--sg-phosphor); font-size: 16.5px; line-height: 1.5; } .signal-panel .user-line { margin: 0 0 var(--sg-1); color: var(--sg-steel); font-family: var(--sg-mono); font-size: 12px; line-height: 1.55; } .signal-panel .user-line b { color: var(--sg-dim); font-weight: 400; } /* --- Sugerencias (34) --- */ .signal-panel .chips { height: var(--sg-4); flex: 0 0 auto; display: flex; gap: 6px; padding: 0 var(--sg-3); overflow: hidden; } .signal-panel .chip { height: 34px; padding: 0 var(--sg-3); border: 1px solid rgba(232, 228, 216, .14); border-radius: 999px; background: transparent; color: var(--sg-steel); font: inherit; font-size: 12.5px; white-space: nowrap; cursor: pointer; transition: border-color .16s ease, color .16s ease; } .signal-panel .chip:hover, .signal-panel .chip:focus-visible { border-color: rgba(255, 176, 0, .5); color: var(--sg-phosphor); outline: none; } /* --- Controles (89) --- */ .signal-panel .control-zone { height: 89px; flex: 0 0 auto; margin-top: auto; padding: 0 var(--sg-3); display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: var(--sg-2); } .signal-panel .utility { width: 44px; height: 44px; border: 1px solid rgba(232, 228, 216, .14); border-radius: 10px; background: transparent; color: var(--sg-steel); font-family: var(--sg-mono); font-size: 10px; cursor: pointer; transition: border-color .16s ease, color .16s ease; } .signal-panel .utility:hover, .signal-panel .utility:focus-visible { border-color: rgba(255, 176, 0, .45); color: var(--sg-phosphor); outline: none; } .signal-panel .utility:disabled { opacity: .35; cursor: default; } .signal-panel .voice-control { display: flex; flex-direction: column; align-items: center; gap: 6px; } .signal-panel .voice-label { font-family: var(--sg-mono); font-size: 9px; letter-spacing: .18em; color: var(--sg-steel); } .signal-panel .talk { width: 62px; height: 62px; display: grid; place-items: center; border: 1px solid rgba(255, 176, 0, .6); border-radius: 50%; background: var(--sg-ink); color: var(--sg-amber); cursor: pointer; box-shadow: 0 0 0 5px rgba(255, 176, 0, .04); transition: transform .18s var(--sg-ease), background .18s ease, box-shadow .18s ease; } .signal-panel .talk:hover, .signal-panel .talk:focus-visible { transform: scale(1.05); border-color: var(--sg-amber); outline: none; } .signal-panel .talk.listening { background: var(--sg-amber); color: #17130a; box-shadow: 0 0 0 6px rgba(255, 176, 0, .1), 0 0 26px rgba(255, 176, 0, .28); } .signal-panel .talk-reactor { height: 20px; display: flex; align-items: center; gap: 2px; } .signal-panel .talk-reactor i { width: 2px; height: 6px; background: currentColor; border-radius: 1px; } .signal-panel .talk-reactor i:nth-child(2), .signal-panel .talk-reactor i:nth-child(4) { height: 12px; } .signal-panel .talk-reactor i:nth-child(3) { height: 19px; } /* --- Aviso (34) --- */ .signal-panel .notice { height: var(--sg-4); flex: 0 0 auto; margin: 0; padding: 0 var(--sg-3) var(--sg-2); color: #6E6C64; font-size: 10px; line-height: 1.45; text-align: center; } /* ---------- Posición: esquina inferior izquierda ---------- * Para cuando el sitio del cliente ya tiene algo en la esquina derecha * (típico en México: botón flotante de WhatsApp). */ .signal-launcher.pos-left { right: auto; left: var(--sg-3); } .signal-panel.pos-left { right: auto; left: var(--sg-3); transform-origin: bottom left; } .signal-panel.pos-left::before { left: auto; right: var(--sg-3); } @media (max-width: 640px) { .signal-launcher { right: var(--sg-2); bottom: calc(var(--sg-2) + env(safe-area-inset-bottom)); } .signal-launcher.pos-left { left: var(--sg-2); right: auto; } .signal-panel { right: var(--sg-2); bottom: calc(var(--sg-2) + env(safe-area-inset-bottom)); width: min(420px, calc(100vw - 26px)); max-height: calc(100dvh - 26px); } .signal-panel.pos-left { left: var(--sg-2); right: auto; } } @media (max-width: 340px) { .signal-panel { width: calc(100vw - 16px); height: 410px; } .signal-panel .chips { display: none; } .signal-panel .conversation { height: 128px; } } @media (prefers-reduced-motion: reduce) { .signal-launcher, .signal-panel { transition-duration: .01ms !important; } } /* ---------- Modo adaptativo (servicio pagado) ---------- * Existe para reventa white-label. Aun así el wordmark, el símbolo y el * escáner conservan Signal Amber: son el ancla de reconocimiento. */ [data-signal-theme="adaptive"] .signal-launcher, [data-signal-theme="adaptive"] .signal-panel { background: var(--signal-surface, rgba(10, 10, 8, .97)); border-color: var(--signal-surface-border, rgba(255, 176, 0, .45)); } /* ---------- CTA de producto (solo en el sitio de Origin One) ---------- * Lead-gen propio: NO se entrega a los clientes que instalan el widget en su * web — a ellos no les sirve anunciar a Origin One. En el producto va apagado * por defecto y se activa con VoiceWidgetConfig.productLink. */ .signal-panel .panel-cta{ flex:0 0 auto; height:44px; display:flex; align-items:center; justify-content:center; gap:6px; margin:0 var(--sg-3); border:1px solid rgba(255,176,0,.4); border-radius:999px; color:var(--sg-amber); background:transparent; font-family:var(--sg-mono); font-size:11px; letter-spacing:.1em; transition:background .16s ease, border-color .16s ease; } .signal-panel .panel-cta:hover, .signal-panel .panel-cta:focus-visible{ background:rgba(255,176,0,.1); border-color:var(--sg-amber); outline:none; } /* El aviso se aprieta un poco para que el panel no crezca. */ .signal-panel .panel-cta + .notice{padding-top:10px;height:auto} /* ---------- Morph: el launcher se convierte en el panel ---------- * No es un fundido. Se mide la caja del launcher y la del panel, el panel * arranca con la geometría del launcher y viaja hasta la suya (FLIP). El * contenido no se estira porque entra cuando la caja ya llegó. * * Las variables --mx/--my/--msx/--msy las escribe el JS antes de abrir. */ .signal-panel.is-morphing { visibility: visible; opacity: 1; pointer-events: none; border-radius: 999px; transform: translate(var(--mx, 0px), var(--my, 0px)) scale(var(--msx, 1), var(--msy, 1)); transform-origin: top left; transition: none; } .signal-panel.is-open.is-morphing { transform: none; border-radius: 16px; pointer-events: auto; /* Rápido y con un punto de rebote: 380 ms se siente instantáneo pero se ve. */ transition: transform .38s cubic-bezier(.16, 1.02, .3, 1), border-radius .3s ease-out .06s; } /* El contenido espera a que la caja aterrice: si entrara antes, se vería estirado por el escalado no uniforme. */ .signal-panel.is-morphing > * { opacity: 0; transform: translateY(7px); } .signal-panel.is-open.is-morphing > * { opacity: 1; transform: none; transition: opacity .22s ease-out, transform .28s cubic-bezier(.2, .9, .3, 1); } .signal-panel.is-open.is-morphing > *:nth-child(1) { transition-delay: .16s; } .signal-panel.is-open.is-morphing > *:nth-child(2) { transition-delay: .21s; } .signal-panel.is-open.is-morphing > *:nth-child(3) { transition-delay: .25s; } .signal-panel.is-open.is-morphing > *:nth-child(4) { transition-delay: .29s; } .signal-panel.is-open.is-morphing > *:nth-child(5) { transition-delay: .32s; } .signal-panel.is-open.is-morphing > *:nth-child(6) { transition-delay: .35s; } /* El launcher se apaga rápido: para el ojo, se transformó. */ .signal-launcher.is-hidden { opacity: 0; transform: scale(.94); pointer-events: none; transition: opacity .1s ease, transform .1s ease; } /* Los LED se encienden del centro hacia afuera cuando la caja ya llegó. El retraso por LED lo escribe el JS con --ignite. */ .signal-panel.is-igniting .voice-pixels i { animation: sg-ignite .5s cubic-bezier(.2, .9, .3, 1) both; animation-delay: var(--ignite, 0s); } @keyframes sg-ignite { 0% { opacity: 0; transform: scaleY(.2); } 55% { opacity: 1; transform: scaleY(1.18); } 100% { opacity: 1; transform: scaleY(1); } } @media (prefers-reduced-motion: reduce) { .signal-panel.is-open.is-morphing, .signal-panel.is-open.is-morphing > * { transition-duration: .01ms; transition-delay: 0s; } .signal-panel.is-igniting .voice-pixels i { animation: none; } }