/* Botón flotante de WhatsApp: abajo a la derecha; al pulsarlo, tarjeta con soporte (grupo gratis) o contratar/pagar.
   Brillo suave solo al aparecer (un destello y dos ondas), nada de parpadeos. */
.bgt-wa { --wa: #25d366; --wa-d: #128c4a; position: fixed; right: 22px; bottom: 22px; z-index: 115; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; font-family: var(--f-body); pointer-events: none; }
.bgt-wa > * { pointer-events: auto; }

.bgt-wa__btn { position: relative; display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 20px 0 8px; border: 0; border-radius: 999px; cursor: pointer; color: #fff; background: linear-gradient(180deg, #2fe07a, var(--wa) 55%, var(--wa-d)); box-shadow: 0 10px 28px -8px #25d36699, 0 2px 0 #ffffff33 inset; font: 600 15px/1 var(--f-display); letter-spacing: .02em; overflow: hidden; overflow: clip; /* clip: el destello no lo convierte en zona desplazable (descentraba el icono) */ transition: padding .35s ease, gap .35s ease, transform .2s ease, box-shadow .2s ease; animation: bgtWaIn .5s cubic-bezier(.2, .9, .3, 1.2) both .6s; }
.bgt-wa__btn:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -8px #25d366b3, 0 2px 0 #ffffff33 inset; }
.bgt-wa__btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.bgt-wa__glyph { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: #ffffff26; }
.bgt-wa__glyph svg { width: 23px; height: 23px; fill: currentColor; }
.bgt-wa__label { white-space: nowrap; min-width: 0; overflow: hidden; max-width: 220px; opacity: 1; transition: max-width .35s ease, opacity .25s ease; }
/* Destello: una pasada de luz al aparecer */
.bgt-wa__btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, #ffffff80 48%, transparent 66%); transform: translateX(-120%); animation: bgtWaShine 1.1s ease-out 1.3s 1 both; pointer-events: none; }
/* Ondas: dos aros que se abren y desaparecen */
.bgt-wa__btn::before { content: ""; position: absolute; left: 8px; top: 8px; width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 0 0 0 #25d36699; animation: bgtWaRing 1.6s ease-out 1.5s 2; pointer-events: none; }

/* Plegado (al bajar por la página): solo el círculo */
.bgt-wa.is-mini .bgt-wa__btn { padding: 0 8px; gap: 0; }
.bgt-wa.is-mini .bgt-wa__label { max-width: 0; opacity: 0; }
.bgt-wa.is-open .bgt-wa__btn { padding: 0 8px; gap: 0; }
.bgt-wa.is-open .bgt-wa__label { max-width: 0; opacity: 0; }

/* Tarjeta */
.bgt-wa__card { width: min(340px, calc(100vw - 32px)); background: var(--panel-2); border: 1px solid var(--line-hi); border-radius: 16px; padding: 14px; box-shadow: 0 24px 60px -18px #000c; transform-origin: bottom right; animation: bgtWaCard .22s ease-out both; }
.bgt-wa__card[hidden] { display: none; }
.bgt-wa__head { display: flex; align-items: center; justify-content: space-between; margin: 2px 2px 10px; }
.bgt-wa__head strong { font: 600 16px/1.2 var(--f-display); color: var(--text); letter-spacing: .02em; }
.bgt-wa__x { width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--mute); font-size: 22px; line-height: 1; cursor: pointer; }
.bgt-wa__x:hover { background: var(--panel); color: var(--text); }
.bgt-wa__op { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); color: var(--text) !important; text-decoration: none !important; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.bgt-wa__op + .bgt-wa__op { margin-top: 8px; }
.bgt-wa__op:hover, .bgt-wa__op:focus-visible { border-color: var(--wa); background: #0f1a17; transform: translateX(-2px); outline: none; }
.bgt-wa__ico { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 10px; }
.bgt-wa__ico svg { width: 21px; height: 21px; }
.bgt-wa__ico--sop { background: #25d36622; color: var(--wa); }
.bgt-wa__ico--ven { background: #f2a33a22; color: var(--orange); }
.bgt-wa__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.bgt-wa__txt b { font: 600 14.5px/1.25 var(--f-body); }
.bgt-wa__txt em { font: 700 10.5px/1 var(--f-display); font-style: normal; text-transform: uppercase; letter-spacing: .06em; color: #06240f; background: var(--wa); border-radius: 5px; padding: 3px 6px; margin-left: 6px; vertical-align: 2px; }
.bgt-wa__txt small { font-size: 13px; line-height: 1.35; color: var(--mute); }
.bgt-wa__go { color: var(--dim); font-size: 22px; line-height: 1; }

/* Discord: la misma píldora que WhatsApp, en el morado de Discord, encima; se pliega igual al bajar */
.bgt-wa__dc { position: relative; display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 20px 0 8px; border-radius: 999px; color: #fff !important; text-decoration: none !important; background: linear-gradient(180deg, #7984f5, #5865f2 55%, #4752c4); box-shadow: 0 10px 28px -8px #5865f299, 0 2px 0 #ffffff2e inset; font: 600 15px/1 var(--f-display); letter-spacing: .02em; overflow: hidden; overflow: clip; transition: padding .35s ease, gap .35s ease, transform .2s ease, box-shadow .2s ease; animation: bgtWaIn .5s cubic-bezier(.2, .9, .3, 1.2) both .45s; }
.bgt-wa__dc::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, #ffffff70 48%, transparent 66%); transform: translateX(-120%); animation: bgtWaShine 1.1s ease-out 1.1s 1 both; pointer-events: none; }
.bgt-wa__dc:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -8px #5865f2cc, 0 2px 0 #ffffff2e inset; }
.bgt-wa__dc:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.bgt-wa__dc-ico { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: #ffffff26; }
.bgt-wa__dc-ico svg { width: 23px; height: 23px; fill: currentColor; }
.bgt-wa__dc-label { white-space: nowrap; min-width: 0; overflow: hidden; max-width: 220px; opacity: 1; transition: max-width .35s ease, opacity .25s ease; }
.bgt-wa.is-mini .bgt-wa__dc { padding: 0 8px; gap: 0; }
.bgt-wa.is-mini .bgt-wa__dc-label { max-width: 0; opacity: 0; }
.bgt-wa.is-open .bgt-wa__dc { display: none; }

@keyframes bgtWaIn { from { opacity: 0; transform: translateY(16px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes bgtWaShine { to { transform: translateX(120%); } }
@keyframes bgtWaRing { 0% { box-shadow: 0 0 0 0 #25d36699; } 100% { box-shadow: 0 0 0 18px #25d36600; } }
@keyframes bgtWaCard { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }

/* Móvil: solo el círculo, encima de la barra de abajo */
@media (max-width: 640px) {
	.bgt-wa { right: 14px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
	.bgt-wa__btn { height: 52px; padding: 0 6px; gap: 0; }
	.bgt-wa__glyph { width: 40px; height: 40px; background: transparent; }
	.bgt-wa__glyph svg { width: 26px; height: 26px; }
	.bgt-wa__btn::before { left: 6px; top: 6px; }
	.bgt-wa__label { max-width: 0; opacity: 0; }
	.bgt-wa { gap: 10px; }
	.bgt-wa__dc { height: 52px; padding: 0 6px; gap: 0; }
	.bgt-wa__dc-ico { background: transparent; }
	.bgt-wa__dc-ico svg { width: 25px; height: 25px; }
	.bgt-wa__dc-label { max-width: 0; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.bgt-wa__btn, .bgt-wa__card, .bgt-wa__dc { animation: none; }
	.bgt-wa__btn::after, .bgt-wa__btn::before, .bgt-wa__dc::after { animation: none; display: none; }
}
@media print { .bgt-wa { display: none; } }