/* ============================================================ LOS CUATRO WIDGETS A · WhatsApp flotante (incluido en la web) B · WhatsApp + burbuja que vuelve C · Tarjeta que se abre sola desde la barra (20 s) D · Chat con panel a la derecha Cada bloque se muestra solo si tiene su data-v. ============================================================ */ /* nadie se ve hasta que el selector lo enciende */ .wg{display:none} body[data-v="a"] .wg-a, body[data-v="b"] .wg-b, body[data-v="c"] .wg-c, body[data-v="d"] .wg-d{display:block} /* ============================================================ A y B · el botón flotante de WhatsApp ============================================================ */ .wa{position:fixed; right:24px; bottom:24px; z-index:60} .wa-btn{ width:60px; height:60px; border-radius:50%; border:0; cursor:pointer; background:#25D366; display:grid; place-items:center; padding:0; box-shadow:0 6px 22px -4px rgba(0,0,0,.30), 0 2px 6px rgba(0,0,0,.12); transition:transform .16s ease, box-shadow .16s ease; } .wa-btn:hover{transform:scale(1.06); box-shadow:0 10px 28px -4px rgba(0,0,0,.36)} .wa-btn svg{width:32px; height:32px; fill:#fff} /* pulso suave para que el ojo lo encuentre */ .wa-btn::before{ content:""; position:absolute; inset:0; border-radius:50%; border:2px solid #25D366; animation:wa-pulso 2.6s ease-out infinite; } @keyframes wa-pulso{ 0%{transform:scale(1); opacity:.55} 70%{transform:scale(1.55); opacity:0} 100%{opacity:0} } /* --- la burbuja (solo variante B) --- */ .wa-burbuja{ position:absolute; right:74px; bottom:8px; width:max-content; max-width:262px; background:#fff; color:#14100C; border:1px solid rgba(20,16,12,.10); border-radius:14px 14px 4px 14px; padding:13px 15px; box-shadow:0 14px 34px -10px rgba(0,0,0,.26); font-size:14px; line-height:1.42; opacity:0; visibility:hidden; pointer-events:none; transform:translateX(10px) scale(.96); transform-origin:bottom right; transition:opacity .2s ease, transform .24s cubic-bezier(.5,1,.89,1), visibility .24s; } .wa-burbuja.on{opacity:1; visibility:visible; pointer-events:auto; transform:translateX(0) scale(1)} .wa-burbuja b{display:block; font-weight:600; margin-bottom:2px} .wa-burbuja span{color:#7C756B; font-size:13px} .wa-cerrar{ position:absolute; top:-8px; left:-8px; width:22px; height:22px; border-radius:50%; background:#fff; border:1px solid rgba(20,16,12,.12); color:#7C756B; cursor:pointer; font-size:14px; line-height:1; padding:0; display:grid; place-items:center; box-shadow:0 2px 6px rgba(0,0,0,.10); } .wa-cerrar:hover{color:#14100C} /* el globito de "1 mensaje" */ .wa-punto{ position:absolute; top:-2px; right:-2px; width:20px; height:20px; border-radius:50%; background:#E5484D; color:#fff; font-size:11px; font-weight:600; display:none; place-items:center; border:2px solid var(--papel,#FBF8F3); } .wa-punto.on{display:grid} /* ============================================================ C · la tarjeta que se abre sola desde la barra (medidas y tiempos calcados del análisis de leadarc.io) ============================================================ */ .ct{position:relative; display:none} body[data-v="c"] .ct{display:block} .ct-trigger{ height:36px; display:inline-flex; align-items:center; gap:9px; padding:0 14px 0 5px; background:#fff; border:1px solid rgba(20,16,12,.10); border-radius:10px; box-shadow:0 1px 2px rgba(0,0,0,.04); cursor:pointer; color:#262626; font-family:inherit; font-size:14px; font-weight:500; line-height:1; white-space:nowrap; transition:background .15s, border-color .15s; } .ct-trigger:hover, .ct.abierto .ct-trigger{background:#fafafa; border-color:rgba(20,16,12,.18)} .ct-dots{ width:26px; height:26px; flex:none; border-radius:7px; background:#F0EDE8; display:flex; align-items:center; justify-content:center; gap:2.5px; } .ct-dots i{ width:4px; height:4px; border-radius:9999px; background:#7C756B; animation:ct-typing 1.3s ease-in-out infinite; } .ct-dots i:nth-child(2){animation-delay:.16s} .ct-dots i:nth-child(3){animation-delay:.32s} @keyframes ct-typing{ 0%,72%,100%{transform:translateY(0); opacity:.32} 36%{transform:translateY(-3px); opacity:1} } .ct-menu{ position:absolute; top:calc(100% + 10px); right:0; width:300px; box-sizing:border-box; background:#fff; color:#171717; border:1px solid rgba(20,16,12,.10); border-radius:16px; box-shadow:0 16px 40px -10px rgba(0,0,0,.22); padding:6px; z-index:90; transform-origin:top right; transition:opacity .16s ease, transform .18s cubic-bezier(.5,1,.89,1), visibility .18s; opacity:0; transform:translateY(-6px) scale(.98); pointer-events:none; visibility:hidden; text-align:left; } .ct.abierto .ct-menu{opacity:1; transform:translateY(0) scale(1); pointer-events:auto; visibility:visible} /* el puente invisible: deja que el mouse baje del botón a la tarjeta */ .ct-menu::before{content:""; position:absolute; top:-12px; left:0; right:0; height:12px} .ct-caret{ position:absolute; top:-5px; right:22px; width:10px; height:10px; background:#fff; border-left:1px solid rgba(20,16,12,.10); border-top:1px solid rgba(20,16,12,.10); transform:rotate(45deg); border-top-left-radius:2px; } .ct-head{display:flex; align-items:center; gap:12px; padding:10px} .ct-av{width:40px; height:40px; flex:none; border-radius:50%; object-fit:cover; object-position:50% 40%} .ct-title{font-size:14px; font-weight:500; color:#171717; line-height:1.2} .ct-title span{color:#7C756B; font-weight:400} .ct-sub{font-size:12px; color:#7C756B; line-height:1.25; margin-top:2px} .ct-numrow{display:flex; align-items:center; gap:6px; margin-top:6px} .ct-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; color:#7C756B; line-height:1; letter-spacing:-.01em} .ct-copy{ width:22px; height:22px; border:0; background:none; cursor:pointer; padding:0; display:grid; place-items:center; color:#A29B91; } .ct-copy:hover{color:#14100C} .ct-copy .ic-check{display:none} .ct-copy.ok .ic-copy{display:none} .ct-copy.ok .ic-check{display:block} .ct-div{height:1px; background:rgba(20,16,12,.08); margin:6px 8px} .ct-item{ display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:10px; text-decoration:none; color:#171717; cursor:pointer; transition:background .15s; } .ct-item:hover{background:#F6F3EE} .ct-ic{width:34px; height:34px; flex:none; border-radius:9px; background:#F3F0EB; display:grid; place-items:center} .ct-ic svg{width:17px; height:17px} .ct-label{flex:1; min-width:0; font-size:14px; font-weight:500} .ct-arrow{color:#7C756B; opacity:.5; flex:none; width:14px; height:14px} /* versión móvil: barra abajo, y esta NUNCA se abre sola. Se enciende únicamente dentro del @media de abajo: si se dejara colgada de una clase .wg-* le ganaría por especificidad a este display:none y saldría también en escritorio. */ .ct-movil{ display:none !important; position:fixed; left:0; right:0; bottom:0; z-index:60; background:rgba(251,248,243,.94); backdrop-filter:blur(12px); border-top:1px solid var(--linea); padding:12px 16px; gap:10px; align-items:center; } .ct-movil .btn{flex:1; height:44px; justify-content:center} /* ============================================================ D · el chat con panel a la derecha ============================================================ */ .cb-btn{ position:fixed; right:24px; bottom:24px; z-index:60; width:60px; height:60px; border-radius:50%; border:0; cursor:pointer; background:var(--tinta,#14100C); display:grid; place-items:center; padding:0; box-shadow:0 6px 22px -4px rgba(0,0,0,.32), 0 2px 6px rgba(0,0,0,.14); transition:transform .16s ease, opacity .2s ease; } .cb-btn:hover{transform:scale(1.06)} .cb-btn svg{width:26px; height:26px; stroke:#F4EFE7; fill:none; stroke-width:1.7} body.cb-on .cb-btn{opacity:0; pointer-events:none; transform:scale(.85)} .cb-punto{ position:absolute; top:-2px; right:-2px; min-width:20px; height:20px; padding:0 5px; border-radius:10px; background:#E5484D; color:#fff; font-size:11px; font-weight:600; display:grid; place-items:center; border:2px solid var(--papel,#FBF8F3); } .cb-panel{ position:fixed; right:0; top:0; bottom:0; z-index:95; width:min(400px,100vw); background:#fff; display:flex; flex-direction:column; border-left:1px solid var(--linea); box-shadow:-18px 0 46px -18px rgba(0,0,0,.30); transform:translateX(100%); transition:transform .34s cubic-bezier(.32,.72,.35,1); } body.cb-on .cb-panel{transform:translateX(0)} .cb-head{ display:flex; align-items:center; gap:12px; padding:16px 18px; background:var(--tinta,#14100C); color:var(--crema,#F4EFE7); flex:none; } .cb-av{width:38px; height:38px; border-radius:50%; object-fit:cover; flex:none} .cb-quien{flex:1; min-width:0} .cb-quien b{display:block; font-size:14.5px; font-weight:600; letter-spacing:-.01em} .cb-estado{font-size:12px; color:rgba(244,239,231,.66); display:flex; align-items:center; gap:6px; margin-top:1px} .cb-estado i{width:7px; height:7px; border-radius:50%; background:#3CCB7F; flex:none} .cb-x{background:none; border:0; color:rgba(244,239,231,.72); cursor:pointer; font-size:22px; line-height:1; padding:4px 2px} .cb-x:hover{color:#fff} .cb-hilo{flex:1; overflow-y:auto; padding:20px 18px; background:#FBF9F6; display:flex; flex-direction:column; gap:12px} .cb-msj{max-width:82%; font-size:14.5px; line-height:1.5; padding:11px 14px; border-radius:16px; white-space:pre-line} .cb-bot{align-self:flex-start; background:#fff; border:1px solid var(--linea,rgba(20,16,12,.10)); border-bottom-left-radius:5px} .cb-yo{align-self:flex-end; background:var(--cuero,#A2612F); color:#fff; border-bottom-right-radius:5px} .cb-msj a{color:inherit; text-decoration:underline} .cb-escribe{align-self:flex-start; display:flex; gap:4px; padding:13px 15px; background:#fff; border:1px solid var(--linea,rgba(20,16,12,.10)); border-radius:16px; border-bottom-left-radius:5px} .cb-escribe i{width:5px; height:5px; border-radius:50%; background:#B9B1A6; animation:ct-typing 1.3s ease-in-out infinite} .cb-escribe i:nth-child(2){animation-delay:.16s} .cb-escribe i:nth-child(3){animation-delay:.32s} .cb-chips{display:flex; flex-wrap:wrap; gap:7px; padding:0 18px 12px; background:#FBF9F6; flex:none} .cb-chip{ border:1px solid rgba(20,16,12,.14); background:#fff; color:var(--tinta,#14100C); border-radius:999px; padding:7px 13px; font-size:13px; font-family:inherit; cursor:pointer; transition:background .14s, border-color .14s; } .cb-chip:hover{background:var(--tinta,#14100C); color:#fff; border-color:var(--tinta,#14100C)} .cb-pie{display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--linea); flex:none; background:#fff} .cb-input{ flex:1; min-width:0; height:42px; padding:0 14px; font-size:14.5px; font-family:inherit; border:1px solid rgba(20,16,12,.14); border-radius:999px; outline:none; background:#FBF9F6; } .cb-input:focus{border-color:var(--cuero,#A2612F); background:#fff} .cb-enviar{ width:42px; height:42px; flex:none; border-radius:50%; border:0; cursor:pointer; background:var(--cuero,#A2612F); display:grid; place-items:center; } .cb-enviar:hover{background:var(--cuero-h,#8C5127)} .cb-enviar svg{width:18px; height:18px; stroke:#fff; fill:none; stroke-width:2} .cb-hand{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:2px; align-self:flex-start; height:38px; padding:0 16px; background:#25D366; color:#fff; text-decoration:none; border-radius:999px; font-size:13.5px; font-weight:600; } .cb-hand svg{width:16px; height:16px; fill:#fff} /* ============================================================ EL SELECTOR (esto NO va en el sitio del cliente) ============================================================ */ .sel{ position:fixed; left:20px; bottom:20px; z-index:98; width:284px; background:rgba(20,16,12,.95); color:var(--crema,#F4EFE7); border:1px solid rgba(244,239,231,.14); border-radius:12px; box-shadow:0 20px 48px -14px rgba(0,0,0,.55); backdrop-filter:blur(10px); overflow:hidden; font-size:13px; } .sel-cab{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 14px; border-bottom:1px solid rgba(244,239,231,.12); cursor:pointer; } .sel-cab b{font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:600} .sel-tog{background:none; border:0; color:rgba(244,239,231,.6); cursor:pointer; font-size:15px; line-height:1; padding:0} .sel-cuerpo{padding:7px} .sel.min .sel-cuerpo{display:none} .sel-op{ display:block; width:100%; text-align:left; background:none; cursor:pointer; border:1px solid transparent; border-radius:8px; padding:9px 11px; color:inherit; font-family:inherit; font-size:13px; line-height:1.35; } .sel-op:hover{background:rgba(244,239,231,.07)} .sel-op.on{background:rgba(162,97,47,.24); border-color:rgba(162,97,47,.62)} .sel-op b{display:block; font-weight:600; margin-bottom:1px} .sel-op span{color:rgba(244,239,231,.56); font-size:11.5px} .sel-op em{font-style:normal; color:#E8B87A; font-size:11.5px; font-weight:600} .sel-nota{ padding:9px 12px; border-top:1px solid rgba(244,239,231,.12); color:rgba(244,239,231,.5); font-size:11px; line-height:1.45; } .sel-nota a{color:rgba(244,239,231,.75)} @media (max-width:820px){ .sel{left:12px; right:12px; bottom:12px; width:auto} body[data-v="c"] .ct-movil{display:flex !important} body[data-v="c"] .ct{display:none} .cb-panel{width:100vw} .wa{bottom:88px} .cb-btn{bottom:88px} } @media (prefers-reduced-motion:reduce){ .ct-dots i,.cb-escribe i,.wa-btn::before{animation:none; opacity:.7} .cb-panel,.ct-menu,.wa-burbuja{transition:none} }