/* CreatixNova Core · WhatsApp dinámico. Colores en variables para cambiarlos fácil. */
.cnx-wa{
	--wa-green:#25D366;
	--wa-acc:#3B36FF;
	--wa-bg:#141519;
	--wa-card:#1F2026;
	--wa-line:rgba(255,255,255,.08);
	--wa-txt:#F4F4F5;
	--wa-mut:rgba(244,244,245,.62);
	--wa-gap:24px;
	position:fixed;right:var(--wa-gap);bottom:var(--wa-gap);z-index:9990;
	font-family:"Familjen Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
	-webkit-font-smoothing:antialiased;
}
.cnx-wa *,.cnx-wa *::before,.cnx-wa *::after{box-sizing:border-box}
.cnx-wa [hidden]{display:none!important}

/* Botón */
.cnx-wa__btn{
	position:relative;display:grid;place-items:center;width:62px;height:62px;padding:0;margin:0 0 0 auto;
	border:0;border-radius:50%;background:var(--wa-green);color:#fff;cursor:pointer;
	box-shadow:0 10px 30px -6px rgba(37,211,102,.55),0 0 0 4px rgba(20,21,25,.9);
	transition:transform .35s cubic-bezier(.2,.9,.3,1.3),background-color .3s;
}
.cnx-wa__btn:hover{transform:scale(1.06)}
.cnx-wa__btn:focus-visible{outline:3px solid var(--wa-acc);outline-offset:4px}
.cnx-wa__btn svg{grid-area:1/1;transition:transform .35s ease,opacity .25s ease}
.cnx-wa__x{opacity:0;transform:rotate(-90deg) scale(.6)}
.cnx-wa[data-state="open"] .cnx-wa__btn{background:var(--wa-acc);box-shadow:0 10px 30px -6px rgba(59,54,255,.6),0 0 0 4px rgba(20,21,25,.9)}
.cnx-wa[data-state="open"] .cnx-wa__logo{opacity:0;transform:rotate(90deg) scale(.6)}
.cnx-wa[data-state="open"] .cnx-wa__x{opacity:1;transform:none}
.cnx-wa__ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--wa-green);opacity:0;pointer-events:none;animation:cnxWaRing 3.2s ease-out infinite}
.cnx-wa__ring::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--wa-acc);opacity:0;animation:cnxWaRing 3.2s ease-out 1.1s infinite}
.cnx-wa[data-state="open"] .cnx-wa__ring{display:none}
@keyframes cnxWaRing{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(1.65);opacity:0}}
.cnx-wa__badge{
	position:absolute;top:-2px;right:-2px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;
	background:var(--wa-acc);color:#fff;font:700 11px/20px "Quicksand",sans-serif;font-style:normal;text-align:center;
	box-shadow:0 0 0 2px var(--wa-bg);transform:scale(0);transition:transform .3s cubic-bezier(.2,.9,.3,1.4)
}
.cnx-wa.has-badge .cnx-wa__badge{transform:scale(1)}

/* Globo de invitación */
.cnx-wa__teaser{
	position:absolute;right:0;bottom:78px;display:flex;align-items:flex-start;gap:6px;max-width:260px;
	animation:cnxWaIn .45s cubic-bezier(.2,.9,.3,1.2) both
}
.cnx-wa__teaser-txt{
	position:relative;width:max-content;max-width:min(250px,calc(100vw - 80px));padding:12px 16px;border:1px solid var(--wa-line);border-radius:16px 16px 4px 16px;
	background:#fff;color:#141519;font:600 14px/1.4 "Quicksand",sans-serif;text-align:left;cursor:pointer;
	box-shadow:0 16px 40px -12px rgba(0,0,0,.45)
}
.cnx-wa__teaser-txt::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:var(--wa-green);vertical-align:1px;box-shadow:0 0 0 3px rgba(37,211,102,.2)}
.cnx-wa__teaser-x{
	flex:0 0 auto;width:24px;height:24px;padding:0;border:0;border-radius:50%;
	background:rgba(20,21,25,.85);color:#fff;font:400 16px/24px sans-serif;cursor:pointer
}

/* Panel */
.cnx-wa__panel{
	position:absolute;right:0;bottom:80px;width:368px;max-width:calc(100vw - 2 * var(--wa-gap));
	max-height:min(640px,calc(100vh - 120px));display:flex;flex-direction:column;overflow:hidden;
	border:1px solid var(--wa-line);border-radius:22px;background:var(--wa-bg);color:var(--wa-txt);
	box-shadow:0 30px 80px -20px rgba(0,0,0,.7),0 0 0 1px rgba(59,54,255,.08);
	transform-origin:calc(100% - 31px) calc(100% + 40px);
	animation:cnxWaPop .42s cubic-bezier(.2,.9,.25,1.15) both
}
@keyframes cnxWaPop{from{opacity:0;transform:translateY(16px) scale(.9)}to{opacity:1;transform:none}}
@keyframes cnxWaIn{from{opacity:0;transform:translateY(10px) scale(.95)}to{opacity:1;transform:none}}

.cnx-wa__head{
	position:relative;display:flex;align-items:center;gap:12px;padding:18px 16px 18px 18px;
	background:linear-gradient(120deg,#3B36FF 0%,#5C64FF 60%,#2C14FF 130%);
}
.cnx-wa__head::after{content:"";position:absolute;inset:0;background:radial-gradient(120px 80px at 85% 0%,rgba(255,255,255,.25),transparent 70%);pointer-events:none}
.cnx-wa__avatar{position:relative;flex:0 0 48px;width:48px;height:48px;border-radius:50%;background:#141519;box-shadow:0 0 0 2px rgba(255,255,255,.9)}
.cnx-wa__avatar img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
.cnx-wa__dot{position:absolute;right:0;bottom:1px;width:12px;height:12px;border-radius:50%;background:var(--wa-green);box-shadow:0 0 0 2px #5C64FF}
.cnx-wa.is-off .cnx-wa__dot{background:#9CA3AF}
.cnx-wa__who{display:flex;flex-direction:column;min-width:0;color:#fff}
.cnx-wa__who strong{font:700 16px/1.25 "Quicksand",sans-serif}
.cnx-wa__who{flex:1 1 auto}
.cnx-wa__status{display:block;max-width:100%;font-size:13px;line-height:1.4;opacity:.92;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cnx-wa__close{
	position:relative;z-index:1;margin-left:auto;display:grid;place-items:center;width:34px;height:34px;padding:0;
	border:0;border-radius:50%;background:rgba(20,21,25,.22);color:#fff;cursor:pointer;transition:background-color .25s
}
.cnx-wa__close:hover{background:rgba(20,21,25,.45)}

.cnx-wa__body{flex:1 1 auto;overflow:auto;padding:18px 16px 8px;
	background:
		radial-gradient(circle at 1px 1px,rgba(255,255,255,.05) 1px,transparent 0) 0 0/18px 18px,
		var(--wa-bg);
	scrollbar-width:thin
}
.cnx-wa__typing{display:inline-flex;gap:4px;padding:12px 14px;border-radius:4px 16px 16px 16px;background:var(--wa-card)}
.cnx-wa__typing i{width:6px;height:6px;border-radius:50%;background:var(--wa-mut);animation:cnxWaDot 1s infinite}
.cnx-wa__typing i:nth-child(2){animation-delay:.15s}.cnx-wa__typing i:nth-child(3){animation-delay:.3s}
@keyframes cnxWaDot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.cnx-wa__bubble{
	margin:0;max-width:92%;padding:12px 14px;border-radius:4px 16px 16px 16px;background:var(--wa-card);
	font-size:15px;line-height:1.5;color:var(--wa-txt);
	animation:cnxWaIn .35s ease both
}
.cnx-wa__ask{margin:16px 2px 10px;font:600 12px/1 "Quicksand",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--wa-mut)}
.cnx-wa__list{display:grid;gap:7px;margin:0;padding:0;list-style:none}
.cnx-wa__list .cnx-wa__opt{padding:9px 12px}
.cnx-wa__list .cnx-wa__ico{flex-basis:36px;width:36px;height:36px;border-radius:10px}
.cnx-wa__body .cnx-wa__bubble{font-size:14.5px;padding:11px 14px}
.cnx-wa__body .cnx-wa__ask{margin:14px 2px 10px}
@media (max-height:760px){.cnx-wa__list .cnx-wa__txt small{display:none}}
.cnx-wa__list li{margin:0;animation:cnxWaIn .4s cubic-bezier(.2,.9,.3,1.1) both;animation-delay:calc(var(--i) * 60ms + .1s)}
.cnx-wa__opt{
	position:relative;display:flex;align-items:center;gap:12px;padding:12px 12px 12px 12px;border:1px solid var(--wa-line);border-radius:14px;
	background:rgba(255,255,255,.025);color:var(--wa-txt)!important;text-decoration:none!important;
	transition:border-color .25s,background-color .25s,transform .25s
}
.cnx-wa__opt:hover,.cnx-wa__opt:focus-visible{border-color:rgba(59,54,255,.65);background:rgba(59,54,255,.08);transform:translateX(-2px);outline:none}
.cnx-wa__ico{flex:0 0 40px;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(59,54,255,.12);color:var(--wa-acc);transition:background-color .25s,color .25s}
.cnx-wa__opt:hover .cnx-wa__ico{background:var(--wa-acc);color:#fff}
.cnx-wa__txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.cnx-wa__txt strong{font:600 14.5px/1.3 "Quicksand",sans-serif}
.cnx-wa__txt small{font-size:13px;line-height:1.35;color:var(--wa-mut)}
.cnx-wa__go{margin-left:auto;color:var(--wa-mut);transition:transform .25s,color .25s}
.cnx-wa__opt:hover .cnx-wa__go{transform:translateX(3px);color:var(--wa-acc)}
.cnx-wa__opt.is-rec{border-color:rgba(59,54,255,.55);background:rgba(59,54,255,.07)}
.cnx-wa__opt.is-rec::before{
	content:"Recomendado";position:absolute;top:-9px;right:12px;padding:2px 8px;border-radius:6px;
	background:var(--wa-acc);color:#fff;font:700 10px/1.4 "Quicksand",sans-serif;letter-spacing:.04em;text-transform:uppercase
}
.cnx-wa__foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 12px;padding:12px 16px 14px;border-top:1px solid var(--wa-line);font-size:12px;line-height:1.4;color:var(--wa-mut)}
.cnx-wa__foot a{color:var(--wa-acc)!important;text-decoration:none;font-weight:600}
.cnx-wa__foot a:hover{text-decoration:underline}

@media (max-width:767px){
	.cnx-wa{--wa-gap:16px}
	.cnx-wa__btn{width:56px;height:56px}
	.cnx-wa__panel{position:fixed;left:12px;right:12px;bottom:84px;width:auto;max-width:none;max-height:calc(100dvh - 110px)}
	.cnx-wa__teaser{bottom:70px}
}
@media (prefers-reduced-motion:reduce){
	.cnx-wa *,.cnx-wa *::before,.cnx-wa *::after{animation:none!important;transition:none!important}
}

/* ===== v2 ===== */
/* Botones a prueba del tema (Astra pinta los botones de azul al pasar el puntero) */
.cnx-wa .cnx-wa__btn,.cnx-wa .cnx-wa__btn:hover,.cnx-wa .cnx-wa__btn:focus{background:var(--wa-green)!important;color:#fff!important;border:0!important}
.cnx-wa[data-state="open"] .cnx-wa__btn,.cnx-wa[data-state="open"] .cnx-wa__btn:hover{background:var(--wa-acc)!important}
.cnx-wa .cnx-wa__close,.cnx-wa .cnx-wa__close:focus{background:rgba(20,21,25,.25)!important;color:#fff!important;border:0!important}
.cnx-wa .cnx-wa__close:hover{background:rgba(20,21,25,.5)!important;color:#fff!important}
.cnx-wa .cnx-wa__teaser-x,.cnx-wa .cnx-wa__teaser-x:hover,.cnx-wa .cnx-wa__teaser-x:focus{background:rgba(20,21,25,.85)!important;color:#fff!important;border:0!important}
/* Avatar: logo transparente sobre círculo oscuro */
.cnx-wa__avatar{background:radial-gradient(circle at 30% 30%,#171945,#0e0f11)}
.cnx-wa__avatar img{object-fit:contain;padding:7px}
/* Globo de invitación futurista: borde en degradado que se mueve, estado en línea y mensajes que se escriben solos */
.cnx-wa .cnx-wa__teaser-txt,.cnx-wa .cnx-wa__teaser-txt:hover,.cnx-wa .cnx-wa__teaser-txt:focus{
	display:flex;flex-direction:column;gap:6px;width:270px;max-width:calc(100vw - 90px);padding:14px 16px;
	border:1.5px solid transparent!important;border-radius:18px 18px 4px 18px;
	background:linear-gradient(#141519,#141519) padding-box,linear-gradient(120deg,#2307F2,#5C64FF,#25D366,#2307F2) border-box!important;
	background-size:100% 100%,300% 300%!important;color:#fff!important;text-align:left;
	box-shadow:0 18px 40px -12px rgba(35,7,242,.55);animation:cnxWaBorder 6s linear infinite}
.cnx-wa .cnx-wa__teaser-txt::before{display:none}
@keyframes cnxWaBorder{to{background-position:0 0,300% 0}}
.cnx-wa__t-head{display:flex;align-items:center;gap:8px;font:600 11px/1.2 "Familjen Grotesk",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.cnx-wa__t-head i{width:8px;height:8px;border-radius:50%;background:#25D366;box-shadow:0 0 0 0 rgba(37,211,102,.6);animation:cnxWaPulse 1.8s ease-out infinite}
.cnx-wa.is-off .cnx-wa__t-head i{background:#9CA3AF;animation:none}
@keyframes cnxWaPulse{to{box-shadow:0 0 0 8px rgba(37,211,102,0)}}
.cnx-wa__t-msg{min-height:2.7em;font:600 16px/1.35 "Quicksand",sans-serif;color:#fff}
.cnx-wa__t-msg::after{content:"";display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-2px;background:#5C64FF;animation:cnxWaCaret 1s steps(1) infinite}
@keyframes cnxWaCaret{50%{opacity:0}}
.cnx-wa__t-cta{font:700 13px/1 "Familjen Grotesk",sans-serif;color:#8A99FF}
.cnx-wa__t-cta b{display:inline-block;transition:transform .3s}
.cnx-wa__teaser-txt:hover .cnx-wa__t-cta b{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){.cnx-wa .cnx-wa__teaser-txt{animation:none}}

/* ===== v3 · estado en vivo ===== */
/* Luz en el botón: verde parpadeante en horario, ámbar fuera de horario */
.cnx-wa__btn::after{content:"";position:absolute;left:1px;bottom:3px;width:15px;height:15px;border-radius:50%;
	background:#2BFF88;border:2.5px solid #0E0F11;box-shadow:0 0 0 0 rgba(43,255,136,.7);animation:cnxWaLive 1.3s ease-out infinite;pointer-events:none}
.cnx-wa.is-off .cnx-wa__btn::after{background:#FFB020;animation:cnxWaAway 2.6s ease-in-out infinite}
.cnx-wa[data-state="open"] .cnx-wa__btn::after{display:none}
@keyframes cnxWaLive{0%{box-shadow:0 0 0 0 rgba(43,255,136,.75);opacity:1}50%{opacity:.55}100%{box-shadow:0 0 0 10px rgba(43,255,136,0);opacity:1}}
@keyframes cnxWaAway{50%{opacity:.45}}
/* Chip de estado dentro del globo */
.cnx-wa__live{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;padding:4px 10px 4px 8px;border-radius:999px;
	font:700 11px/1.2 "Familjen Grotesk",sans-serif;letter-spacing:.1em;text-transform:uppercase;
	color:#2BFF88;background:rgba(43,255,136,.1);border:1px solid rgba(43,255,136,.45);
	animation:cnxWaChip 2.6s ease-in-out infinite}
.cnx-wa__live i{width:8px;height:8px;border-radius:50%;background:#2BFF88;animation:cnxWaLive 1.3s ease-out infinite}
.cnx-wa.is-off .cnx-wa__live{color:#FFB020;background:rgba(255,176,32,.1);border-color:rgba(255,176,32,.45);animation:none}
.cnx-wa.is-off .cnx-wa__live i{background:#FFB020;animation:cnxWaAway 2.6s ease-in-out infinite}
@keyframes cnxWaChip{50%{box-shadow:0 0 18px -2px rgba(43,255,136,.55)}}
.cnx-wa.is-off .cnx-wa__avatar::after,.cnx-wa.is-off .cnx-wa__dot{background:#FFB020!important}
@media (prefers-reduced-motion:reduce){.cnx-wa__btn::after,.cnx-wa__live,.cnx-wa__live i{animation:none!important}}