/* ============================================================================ RavencoreX — Flotante de WhatsApp (rcx-wa) Compañero de /js/rcx-whatsapp.js. El JS construye TODO el marcado; acá sólo vive el aspecto. Ningún HTML del sitio contiene nodos de este componente: las páginas cargan estas dos líneas y nada más. Alcance: todo el sitio (EN y ES), incluidos blog y MAG. Es un canal de contacto, no una promoción. ---------------------------------------------------------------------------- DE DÓNDE SALE ESTE ASPECTO ---------------------------------------------------------------------------- Pedido del owner (2026-08-16): "seguí el look and feel de CoreWhapp para esto, me gusta más". La referencia es el widget en producción de corewhapp.ai, cuyo fuente vive en corewhapp/landing/src/components/ WhatsAppBubble.tsx. De ahí se toma la estructura completa: · panel de 304px (19rem) con esquinas muy redondeadas y sombra amplia · CABECERA verde bosque a ancho completo: avatar circular translúcido, nombre en blanco fuerte, línea de estado con punto verde claro, equis discreta a la derecha · CUERPO claro: el mensaje dentro de una caja gris muy clara con la esquina superior izquierda achicada (la "cola" de la burbuja de chat) · CTA a ancho completo, píldora, verde, ícono + texto en blanco centrados · disco flotante circular verde con el glifo en blanco Lo que NO se copia es el uso literal del #25D366 de WhatsApp para el CTA: ver abajo. Y donde CoreWhapp usa emoji en el saludo, acá no (regla de marca). ---------------------------------------------------------------------------- TAMAÑOS DEL GLIFO ---------------------------------------------------------------------------- Segundo pedido del owner (2026-08-16): "que el ícono sea el mismo que CoreWhapp". Los dos glifos se copiaron tal cual del componente y viven en rcx-whatsapp.js; acá sólo se decide a qué tamaño va cada uno. El cambio no es de escala sino de DIBUJO. El anterior era whatsapp-logo-fill de Phosphor: una mancha llena. El de CoreWhapp es el glifo clásico de la marca: un ANILLO de 2,2 unidades sobre 32 con el auricular adentro. Ocupan casi la misma caja (80% del viewBox contra 81%), pero el anillo pesa bastante menos, así que a igual medida se lee más chico. De ahí que cada uno suba dos píxeles respecto de lo que había: caja antes ahora proporción avatar (círculo de 36) 20 22 61% CTA (junto a texto de 14) 18 20 el h-5 de la referencia disco (56) 30 32 57%, escala 1:1 del viewBox disco ≤480px (52) 28 30 58% equis (caja de toque de 40) 16 20 escala 1:1 del viewBox Los dos casos de escala 1:1 no son coincidencia: cuando el px coincide con la unidad del dibujo, un trazo de 2 unidades mide 2px justos y no cae entre dos píxeles. En la equis, que son dos rectas puras, la diferencia se ve. Ninguna caja de toque se movió: la equis sigue midiendo 40×40 y el disco 56 (52 en móvil). Creció el glifo adentro, no el control. ---------------------------------------------------------------------------- POR QUÉ ESTE PANEL NO ES DE VIDRIO ---------------------------------------------------------------------------- El vidrio esmerilado es material de marca y lo lleva todo el sitio, así que la versión anterior de este panel lo usaba. Se sale de esa regla acá por dos razones concretas. La primera es el pedido: la referencia es una tarjeta de chat opaca, y un panel translúcido con el texto de la página cruzándolo por detrás no se lee como una conversación. La segunda es que ya no quedaba vidrio que ver: entre la cabecera verde opaca y la burbuja gris del mensaje, lo translúcido se reducía a los 16px de aire del borde. De paso desaparecen los dos respaldos que el vidrio obligaba a mantener (@supports para navegador sin backdrop-filter y prefers-reduced-transparency) y el costo de pintar un blur permanente sobre contenido que scrollea. Es la misma excepción acotada que ya se aplica al color y al radio: acá no se dibuja superficie de RavencoreX. Fuera de este archivo el vidrio sigue. ---------------------------------------------------------------------------- LOS TRES VERDES Y POR QUÉ NO SON EL #25D366 DE WHATSAPP ---------------------------------------------------------------------------- El verde de marca de WhatsApp mide 1,98:1 contra blanco. Sobre él, un texto blanco de 14px queda muy por debajo del 4,5:1 que pide WCAG 1.4.3 para texto normal, y como superficie tampoco llega al 3:1 de WCAG 1.4.11 para identificar un control. Es exactamente el problema que ya se resolvió una vez en este código base cuando el CTA primario tuvo que bajar de azure-500 a azure-700 porque el blanco sobre azure-500 medía 3,80:1 (ver .rcx-btn--primary en components.css). El criterio que quedó de aquella vez —conservar el color de marca y mover el tono lo mínimo indispensable— se aplica acá igual: se toma el #25D366, se fija su matiz (H 142,4°) y su saturación (S 70,2%) y se baja SÓLO la luminosidad hasta cruzar el umbral que corresponde a cada rol. rol token valor blanco carbón CTA (lleva texto → 4,5:1) --rcx-wa-verde-texto #188741 4,58 3,64 CTA en hover --rcx-wa-verde-hover #157539 5,78 2,89 disco y punto (sin texto) --rcx-wa-verde #1ca24e 3,32 5,00 cabecera (teal de WhatsApp) --rcx-wa-teal #075e54 7,67 2,16 punto de estado --rcx-wa-verde-claro #34d17e 1,99 8,35 (#25d366 de referencia) 1,98 8,37 · --rcx-wa-verde-texto → relleno del CTA. Es el mismo verde de WhatsApp con la luminosidad bajada de 48,6% a 31,0%, ni un peldaño más: 4,58:1 contra blanco, apenas por encima del piso de 4,5. Bajar a 30% daría 4,88 y ya sería mover el tono más de lo necesario. Sigue leyéndose como WhatsApp porque es literalmente el mismo matiz. · --rcx-wa-verde → disco y punto de la cabecera. Como superficie sin texto encima su umbral es 3:1, no 4,5, así que puede quedarse más cerca del original: 3,32:1 contra blanco y 5,00:1 contra carbón. No se lo sube más hacia el #25D366 porque el flotante aparece también sobre las secciones gris claro del sitio (#f2f2f2) y ahí ya mide 2,96 — subirlo lo hundiría. · --rcx-wa-teal → cabecera. Es el verde bosque propio de la app de WhatsApp, no un derivado del #25D366. Blanco encima mide 7,67:1 (AAA), así que va tal cual. · --rcx-wa-verde-claro → sólo el punto de "En línea", que vive sobre la cabecera oscura: 3,86:1 contra el teal, por encima del 3:1 que pide un objeto gráfico. Nunca sobre fondo claro. Si alguien quiere volver al #25D366 exacto en el CTA, el precio es una etiqueta blanca que la mitad de la gente con baja visión no puede leer. ---------------------------------------------------------------------------- RADIO ---------------------------------------------------------------------------- La regla de marca es radius 0 (esquinas vivas) con la excepción de los botones .rcx-btn en 8px. Este componente es la segunda excepción, y es una excepción con regla propia y explícita, no una barra libre: panel 18px · burbuja del mensaje 12px (4px arriba a la izquierda, la cola) · CTA píldora · avatar, punto y disco círculo El fundamento es el mismo que ya justificaba el disco redondo: acá no se está dibujando superficie de RavencoreX sino la de un producto de mensajería que el visitante ya conoce de memoria. Un panel de chat con esquinas vivas y un botón cuadrado no se leen como WhatsApp, y el widget entero depende de que se lea como WhatsApp en el primer vistazo. Fuera de este archivo la regla sigue siendo radius 0. ============================================================================ */ .rcx-wa { /* Verdes del componente. Viven acá y no en design-tokens.css a propósito: son color de un tercero (WhatsApp), no paleta de RavencoreX, y no deben poder usarse desde otra parte del sitio por accidente. */ --rcx-wa-verde: #1ca24e; --rcx-wa-verde-texto: #188741; --rcx-wa-verde-hover: #157539; --rcx-wa-verde-claro: #34d17e; --rcx-wa-teal: #075e54; /* El cuerpo del panel es siempre superficie clara, pase lo que pase alrededor. Se fijan acá y no se leen de --color-text para que un [data-theme="dark"] en un ancestro no deje el mensaje en blanco sobre blanco. */ --rcx-wa-papel: #ffffff; /* --color-neutral-0 */ --rcx-wa-burbuja: #f2f2f2; /* --color-neutral-50 */ --rcx-wa-tinta: #1a1f24; /* --color-neutral-800, 14,9:1 sobre la burbuja */ --rcx-wa-margen: var(--space-md); /* 24px */ --rcx-wa-disco: 56px; position: fixed; right: var(--rcx-wa-margen); bottom: var(--rcx-wa-margen); /* Debajo de --z-nav (1000) a propósito. El drawer móvil es hijo del wrapper sticky del navbar, que sí está en 1000 y tiene fondo opaco: con el menú abierto el flotante queda tapado, que es lo que corresponde. Lo mismo con el modal de video de custom-overrides.css (10000) y con el overlay del navbar legacy de Webflow. */ z-index: 998; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-xs); /* 12px entre burbuja y disco */ font-family: var(--font-body); /* El contenedor no debe comerse los clics de la página en el hueco que deja entre la burbuja y el disco. */ pointer-events: none; } .rcx-wa > * { pointer-events: auto; } /* ============================================================================ PANEL ============================================================================ */ .rcx-wa__panel { position: relative; /* 304px es el ancho de la referencia (19rem). A 320px de viewport con 16px de margen a cada lado quedan 288px exactos: el tope de min() está calculado para que nunca haya desborde horizontal. */ width: min(304px, calc(100vw - var(--rcx-wa-margen) * 2)); border-radius: 18px; /* overflow oculto para que el verde de la cabecera muera contra la curva del panel en vez de desbordarla. */ overflow: hidden; /* Sin borde, como la referencia: en su lugar un aro de 1px casi imperceptible —el ring-1 ring-black/5 de CoreWhapp, tintado a carbón— que le da filo al canto sin dibujar una línea. Va por box-shadow y no por border para que no quede una raya clara cruzando la cabecera oscura. Después, la sombra en dos partes de la escala: una corta y una larga y amplia que lo despega. */ box-shadow: 0 0 0 1px rgba(26, 31, 36, 0.05), var(--shadow-sm), var(--shadow-lg); background: var(--rcx-wa-papel); color: var(--rcx-wa-tinta); /* Sólo translate, nunca scale. Un scale() en el panel encoge también a sus hijos mientras dura la transición, y cualquier herramienta que mida el render en ese instante lee áreas de toque falsas: scripts/qa-movil.py reportaba la equis como 39px cuando en reposo mide 40 clavados. Un desplazamiento no altera getBoundingClientRect en ancho ni en alto. */ transform: translateY(8px); opacity: 0; transition: opacity var(--duration-modal) var(--easing-out), transform var(--duration-modal) var(--easing-out); } .rcx-wa__panel.is-open { opacity: 1; transform: none; } /* ============================================================================ CABECERA — avatar · RavencoreX / En línea · equis ============================================================================ */ .rcx-wa__head { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-sm); background: var(--rcx-wa-teal); color: var(--color-neutral-0); } /* Avatar: círculo de blanco al 15% sobre el teal, con el glifo de WhatsApp adentro. Es lo que hace que la cabecera se lea como una conversación y no como una barra de título. */ .rcx-wa__avatar { flex: none; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255, 255, 255, 0.15); } .rcx-wa__avatar svg { width: 22px; height: 22px; } /* ver TAMAÑOS DEL GLIFO */ .rcx-wa__ident { min-width: 0; /* deja que el nombre elida si hiciera falta */ display: flex; flex-direction: column; gap: 2px; } .rcx-wa__brand { font-size: var(--text-body-sm); /* 14px */ font-weight: var(--weight-semibold); line-height: var(--leading-h5); letter-spacing: var(--tracking-normal); color: var(--color-neutral-0); /* 7,67:1 sobre el teal — AAA */ } .rcx-wa__status { display: inline-flex; align-items: center; gap: var(--space-3xs); font-size: var(--text-label); /* 12px — el piso legible del sitio */ font-weight: var(--weight-medium); line-height: var(--leading-h5); /* Menos contraste que el nombre pero todavía 5,55:1 sobre el teal. La jerarquía se hace con peso y color, que es lo que queda cuando la escala no puede bajar de 12px. */ color: rgba(255, 255, 255, 0.80); } .rcx-wa__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rcx-wa-verde-claro); /* 3,86:1 sobre el teal */ flex: none; } /* ---- cerrar --------------------------------------------------------------- */ .rcx-wa__close { /* margin-left auto lo empuja al canto derecho de la cabecera; el negativo compensa el aire propio de la caja de toque para que el ícono quede ópticamente alineado con los 16px de padding, no la caja. */ margin-left: auto; margin-right: -10px; /* 40x40 y no 24: es el piso que mide scripts/qa-movil.py para áreas de toque. El ícono queda chico y discreto, la caja grande. */ flex: none; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: rgba(255, 255, 255, 0.80); /* 5,55:1 sobre el teal */ cursor: pointer; transition: color var(--duration-hover) var(--easing-out), background-color var(--duration-hover) var(--easing-out); } .rcx-wa__close:hover, .rcx-wa__close:focus-visible { color: var(--color-neutral-0); background: rgba(255, 255, 255, 0.15); } /* 20px = el ancho del viewBox de la equis, así que la unidad del dibujo cae exactamente sobre el píxel: el trazo de 2 unidades mide 2px justos y los dos palos quedan filosos sin depender de la densidad de pantalla. */ .rcx-wa__close svg { width: 20px; height: 20px; } /* ============================================================================ CUERPO — mensaje + CTA ============================================================================ */ .rcx-wa__body { padding: var(--space-sm); background: var(--rcx-wa-papel); } /* El mensaje va dentro de una burbuja de chat: gris muy claro, 12px de radio y la esquina superior izquierda achicada a 4px, que es la cola que apunta al avatar de la cabecera. */ .rcx-wa__msg { margin: 0 0 var(--space-xs); padding: var(--space-2xs) var(--space-xs); border-radius: 12px; border-top-left-radius: 4px; background: var(--rcx-wa-burbuja); font-size: var(--text-body-sm); /* 14px */ font-weight: var(--weight-body); line-height: var(--leading-body); /* 1,6 — interlineado holgado */ color: var(--rcx-wa-tinta); /* 14,9:1 — es el contenido, no un rótulo */ } /* ---- CTA ------------------------------------------------------------------ */ .rcx-wa__cta { display: flex; align-items: center; justify-content: center; gap: var(--space-2xs); width: 100%; min-height: 44px; /* área de toque cómoda */ padding: var(--space-xs) var(--space-sm); border: 0; border-radius: 999px; /* píldora, ver cabecera */ background: var(--rcx-wa-verde-texto); color: var(--color-neutral-0); /* 4,58:1 — AA para texto normal */ font-family: var(--font-body); font-size: var(--text-body-sm); font-weight: var(--weight-semibold); line-height: 1; letter-spacing: var(--tracking-caption); text-decoration: none; white-space: nowrap; /* la etiqueta no envuelve: son dos palabras */ cursor: pointer; transition: background-color var(--duration-hover) var(--easing-out); } /* El selector va con el bloque repetido a propósito. base.css:111 tiene un a:not([class*="btn"]):hover { color: var(--color-azure-500) } que pinta de azure CUALQUIER enlace del sitio que no lleve "btn" en la clase, y con especificidad (0,2,1) le gana a un .rcx-wa__cta:hover (0,2,0): la etiqueta del CTA se ponía azul sobre el verde al pasar el mouse. Se repite la clase para llegar a (0,3,0) en vez de renombrar el componente a algo con "btn" adentro, que sería esconder el problema detrás de un nombre. */ .rcx-wa .rcx-wa__cta:hover, .rcx-wa .rcx-wa__cta:focus-visible { background: var(--rcx-wa-verde-hover); color: var(--color-neutral-0); } .rcx-wa__cta svg { width: 20px; height: 20px; flex: none; } /* ver TAMAÑOS DEL GLIFO */ /* ============================================================================ DISCO ============================================================================ */ .rcx-wa__fab { width: var(--rcx-wa-disco); height: var(--rcx-wa-disco); display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; /* excepción de marca, ver cabecera */ background: var(--rcx-wa-verde); color: var(--color-neutral-0); cursor: pointer; box-shadow: var(--shadow-md); transition: background-color var(--duration-hover) var(--easing-out), transform var(--duration-hover) var(--easing-out); -webkit-appearance: none; appearance: none; } .rcx-wa__fab:hover { background: var(--rcx-wa-verde-texto); transform: translateY(-2px); } /* 32px = el ancho del viewBox, o sea escala 1:1. Es además el 57% del disco de 56, que es donde WhatsApp para su propio botón. Ver TAMAÑOS DEL GLIFO. */ .rcx-wa__fab svg { width: 32px; height: 32px; } /* Foco: el mismo anillo tokenizado del resto del sitio. El flotante vive sobre fondo desconocido, así que se usa el azure oscuro por defecto y las superficies oscuras lo cambian por su cuenta vía --rcx-focus-ring. Dentro de la cabecera y del CTA el fondo lo pone el propio componente, así que ahí el anillo va en blanco: es lo único que se ve sobre el teal y sobre el verde. */ .rcx-wa__fab:focus-visible { outline: 2px solid var(--rcx-focus-ring, var(--color-azure-900)); outline-offset: 2px; } .rcx-wa__close:focus-visible { outline: 2px solid var(--color-neutral-0); outline-offset: -2px; } .rcx-wa__cta:focus-visible { outline: 2px solid var(--rcx-focus-ring, var(--color-azure-900)); outline-offset: 2px; } /* ============================================================================ PANTALLAS CHICAS ============================================================================ */ @media (max-width: 480px) { .rcx-wa { --rcx-wa-margen: var(--space-sm); /* 16px */ --rcx-wa-disco: 52px; /* sigue arriba de los 44 de toque */ } .rcx-wa__fab svg { width: 30px; height: 30px; } /* 58% del disco de 52 */ } /* ============================================================================ MOVIMIENTO ============================================================================ */ /* Con prefers-reduced-motion la burbuja SIGUE asomando —el mensaje es contenido, no decoración— pero llega sin desplazamiento ni escala: sólo un fundido corto, que es lo que la preferencia tolera. El disco pierde el levantamiento del hover. */ @media (prefers-reduced-motion: reduce) { .rcx-wa__panel { transform: none; transition: opacity var(--duration-hover) var(--easing-out); } .rcx-wa__panel.is-open { transform: none; } .rcx-wa__fab { transition: background-color var(--duration-hover) var(--easing-out); } .rcx-wa__fab:hover { transform: none; } } /* No tiene nada que hacer en el papel. */ @media print { .rcx-wa { display: none !important; } }