/* Reset local — nunca globalizamos box-sizing en todo el sitio para no
   pisar el CSS del tema; solo dentro de nuestros propios componentes. */
.whatsgrowth-floating,
.whatsgrowth-floating *,
.whatsgrowth-form,
.whatsgrowth-form *,
.whatsgrowth-confirmation,
.whatsgrowth-confirmation * {
	box-sizing: border-box;
}

/* ============================================================
 * GLOBO FLOTANTE
 * ============================================================ */

@media (max-width: 782px) {
	.wgw-hide-mobile { display: none !important; }
}
@media (min-width: 783px) {
	.wgw-hide-desktop { display: none !important; }
}

.whatsgrowth-floating {
	position: fixed;
	bottom: calc(20px + env(safe-area-inset-bottom, 0px));
	right: calc(20px + env(safe-area-inset-right, 0px));
	z-index: 9999;
	display: flex;
	flex-direction: column-reverse;
	align-items: flex-end;
	gap: 12px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	transition: transform 0.2s ease;
}

.whatsgrowth-floating--left {
	right: auto;
	left: calc(20px + env(safe-area-inset-left, 0px));
	align-items: flex-start;
}

.whatsgrowth-floating__toggle {
	width: var(--wgw-btn-size, 58px);
	height: var(--wgw-btn-size, 58px);
	background: var(--wgw-gradient, var(--wgw-primary, #25d366)) !important;
	border: none !important;
	border-radius: 50% !important;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
	cursor: pointer;
	padding: 0 !important;
	appearance: none;
	-webkit-appearance: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.whatsgrowth-floating__toggle:hover {
	transform: scale(1.06);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

.whatsgrowth-floating__toggle svg {
	width: 28px;
	height: 28px;
	display: block;
	flex-shrink: 0;
}

.whatsgrowth-floating__toggle--pill {
	width: auto;
	height: calc(var(--wgw-btn-size, 58px) * 0.862);
	border-radius: var(--wgw-pill-radius, 25px) !important;
	padding: 0 20px 0 16px !important;
	gap: 10px;
}

.whatsgrowth-floating__toggle--pill svg {
	width: 24px;
	height: 24px;
}

.whatsgrowth-floating__toggle-label {
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
}

.whatsgrowth-floating.is-open .whatsgrowth-floating__toggle,
.whatsgrowth-floating.is-closing .whatsgrowth-floating__toggle {
	display: none;
}

@keyframes whatsgrowth-pulse {
	0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--wgw-pulse-color, var(--wgw-primary, #25d366)) 70%, transparent); }
	70%  { box-shadow: 0 0 0 20px color-mix(in srgb, var(--wgw-pulse-color, var(--wgw-primary, #25d366)) 0%, transparent); }
	100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--wgw-pulse-color, var(--wgw-primary, #25d366)) 0%, transparent); }
}

.whatsgrowth-floating__toggle--pulse {
	animation: whatsgrowth-pulse var(--wgw-pulse-speed, 1.8s) infinite;
}

.whatsgrowth-floating__toggle--glow {
	position: relative;
}

.whatsgrowth-floating__toggle--glow::before {
	content: "";
	position: absolute;
	inset: var(--wgw-glow-inset, -6px);
	border-radius: 50%;
	background: var(--wgw-pulse-color, var(--wgw-primary, #25d366));
	filter: blur(var(--wgw-glow-blur, 6px));
	z-index: -1;
	animation: whatsgrowth-glow-breathe var(--wgw-pulse-speed, 1.8s) ease-in-out infinite;
}

@keyframes whatsgrowth-glow-breathe {
	0%, 100% { opacity: 0.25; transform: scale(0.9); }
	50%      { opacity: 0.6; transform: scale(var(--wgw-glow-max-scale, 1.1)); }
}

/* Botón de enviar: pulso y brillo hacia AFUERA, como en el globo, pero
   en una capa POR DETRÁS de los campos. La capa es un ::before con
   z-index:-1, y el form crea su propio contexto (isolation) para que
   esa capa quede encima del fondo del form y debajo de campos, textos
   y del propio botón — nunca tapa nada. El alcance máximo (~12px) cabe
   en el padding de 18px del panel, así el scroll no lo recorta. */
.whatsgrowth-form {
	isolation: isolate;
}

.whatsgrowth-form__submit.whatsgrowth-floating__toggle--pulse,
.whatsgrowth-form__submit.whatsgrowth-floating__toggle--glow,
.whatsgrowth-leave__stay.whatsgrowth-floating__toggle--pulse,
.whatsgrowth-leave__stay.whatsgrowth-floating__toggle--glow {
	position: relative;
	animation: none;
}

.whatsgrowth-form__submit.whatsgrowth-floating__toggle--pulse::before,
.whatsgrowth-leave__stay.whatsgrowth-floating__toggle--pulse::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 8px;
	z-index: -1;
	pointer-events: none;
	animation: whatsgrowth-submit-pulse var(--wgw-pulse-speed, 1.8s) infinite;
}

@keyframes whatsgrowth-submit-pulse {
	0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--wgw-pulse-color, var(--wgw-primary, #25d366)) 70%, transparent); }
	70%  { box-shadow: 0 0 0 12px color-mix(in srgb, var(--wgw-pulse-color, var(--wgw-primary, #25d366)) 0%, transparent); }
	100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--wgw-pulse-color, var(--wgw-primary, #25d366)) 0%, transparent); }
}

/* Brillo: sin escala (en un botón ancho,
escalar 10% lo sacaría del
   panel); respira con la opacidad. Tamaño chico/mediano/grande ≈
   5/10/17px de alcance. */
.whatsgrowth-form__submit.whatsgrowth-floating__toggle--glow::before,
escalar 10% lo sacaría del
   panel); respira con la opacidad. Tamaño chico/mediano/grande ≈
   5/10/17px de alcance. */
.whatsgrowth-leave__stay.whatsgrowth-floating__toggle--glow::before {
	inset: calc(var(--wgw-glow-inset, -6px) * 0.7);
	border-radius: 10px;
	pointer-events: none;
	animation: whatsgrowth-submit-glow var(--wgw-pulse-speed, 1.8s) ease-in-out infinite;
}

@keyframes whatsgrowth-submit-glow {
	0%, 100% { opacity: 0.25; }
	50%      { opacity: 0.75; }
}

/* Contorno RGB en el botón de enviar: por dentro, por la misma razón
   que el pulso (el contenedor con scroll recortaría el contorno). */
.whatsgrowth-form__submit.whatsgrowth-floating__toggle--rainbow {
	animation-name: whatsgrowth-rainbow-inset;
}

@keyframes whatsgrowth-rainbow-inset {
	0%   { box-shadow: inset 0 0 0 3px var(--wgw-rainbow-1, #25d366); }
	20%  { box-shadow: inset 0 0 0 3px var(--wgw-rainbow-2, #25d366); }
	40%  { box-shadow: inset 0 0 0 3px var(--wgw-rainbow-3, var(--wgw-rainbow-1, #25d366)); }
	60%  { box-shadow: inset 0 0 0 3px var(--wgw-rainbow-4, var(--wgw-rainbow-1, #25d366)); }
	80%  { box-shadow: inset 0 0 0 3px var(--wgw-rainbow-5, var(--wgw-rainbow-1, #25d366)); }
	100% { box-shadow: inset 0 0 0 3px var(--wgw-rainbow-1, #25d366); }
}

@keyframes whatsgrowth-rainbow {
	0%   { box-shadow: 0 0 0 4px var(--wgw-rainbow-1, #25d366); }
	20%  { box-shadow: 0 0 0 4px var(--wgw-rainbow-2, #25d366); }
	40%  { box-shadow: 0 0 0 4px var(--wgw-rainbow-3, var(--wgw-rainbow-1, #25d366)); }
	60%  { box-shadow: 0 0 0 4px var(--wgw-rainbow-4, var(--wgw-rainbow-1, #25d366)); }
	80%  { box-shadow: 0 0 0 4px var(--wgw-rainbow-5, var(--wgw-rainbow-1, #25d366)); }
	100% { box-shadow: 0 0 0 4px var(--wgw-rainbow-1, #25d366); }
}

.whatsgrowth-floating__toggle--rainbow {
	animation: whatsgrowth-rainbow var(--wgw-pulse-speed, 2.4s) linear infinite;
}

@keyframes whatsgrowth-breathe {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.12); }
}

.whatsgrowth-floating__toggle--breathe {
	animation: whatsgrowth-breathe var(--wgw-pulse-speed, 1.8s) ease-in-out infinite;
}

/* Rebote: dos saltos y una pausa, para llamar la atención sin cansar. */
@keyframes whatsgrowth-bounce {
	0%, 40%, 100% { transform: translateY(0); }
	12% { transform: translateY(-12px); }
	24% { transform: translateY(0); }
	32% { transform: translateY(-5px); }
}

.whatsgrowth-floating__toggle--bounce {
	/* Velocidad Normal (1.8 s) = 2.4 s por ciclo; Lenta y Rápida escalan. */
	animation: whatsgrowth-bounce calc(var(--wgw-pulse-speed, 1.8s) * 1.333) ease-in-out infinite;
}

/* Carrito: dos ruedas que giran bajo el botón y un leve traqueteo,
 * como si fuera rodando. */
@keyframes whatsgrowth-cart-ride {
	0%, 50%, 100% { transform: translateY(0); }
	25% { transform: translateY(-1.5px); }
	75% { transform: translateY(-0.5px); }
}

@keyframes whatsgrowth-wheel-spin {
	to { transform: rotate(360deg); }
}

.whatsgrowth-floating__toggle--cart {
	position: relative;
	overflow: visible;
	animation: whatsgrowth-cart-ride calc(var(--wgw-pulse-speed, 1.8s) * 0.25) linear infinite;
}

.whatsgrowth-floating__toggle--cart::before,
.whatsgrowth-floating__toggle--cart::after {
	content: "";
	position: absolute;
	bottom: -8px;
	width: 17px;
	height: 17px;
	box-sizing: border-box;
	border-radius: 50%;
	border: 2.5px solid #111827;
	background:
		radial-gradient(circle, #e5e7eb 0 2px, transparent 2.5px),
		conic-gradient(#374151 0 25%, #9ca3af 0 50%, #374151 0 75%, #9ca3af 0);
	animation: whatsgrowth-wheel-spin calc(var(--wgw-pulse-speed, 1.8s) * 0.4) linear infinite;
	z-index: 2;
	pointer-events: none;
}

.whatsgrowth-floating__toggle--cart::before { left: 16%; }
.whatsgrowth-floating__toggle--cart::after  { right: 16%; }

/* En el círculo, las ruedas van más juntas. */
.whatsgrowth-floating__toggle--cart:not(.whatsgrowth-floating__toggle--pill)::before { left: 8%; }
.whatsgrowth-floating__toggle--cart:not(.whatsgrowth-floating__toggle--pill)::after  { right: 8%; }

/* Doble clase: la regla base del globo (más abajo) también define
 * animation y, con la misma especificidad, ganaba y anulaba el rebote. */
.whatsgrowth-greeting-bubble.whatsgrowth-greeting-bubble--bounce {
	animation: whatsgrowth-panel-in 0.25s ease-out, whatsgrowth-bounce var(--wgw-greeting-bounce-speed, 2.4s) ease-in-out 0.6s infinite;
}

@media (prefers-reduced-motion: reduce) {
	.whatsgrowth-floating__toggle--bounce,
	.whatsgrowth-floating__toggle--cart,
	.whatsgrowth-floating__toggle--cart::before,
	.whatsgrowth-floating__toggle--cart::after { animation: none; }
	.whatsgrowth-greeting-bubble.whatsgrowth-greeting-bubble--bounce { animation: whatsgrowth-panel-in 0.25s ease-out; }
}

@keyframes whatsgrowth-fire {
	0%   { box-shadow: 0 0 8px 2px #ff6b00, 0 0 16px 4px #ff3d00; transform: scale(1); }
	15%  { box-shadow: 0 0 10px 3px #ffae00, 0 0 20px 6px #ff6b00; transform: scale(1.03); }
	30%  { box-shadow: 0 0 6px 2px #ff3d00, 0 0 14px 4px #ffae00; transform: scale(0.98); }
	45%  { box-shadow: 0 0 12px 4px #ff6b00, 0 0 22px 6px #ff3d00; transform: scale(1.05); }
	60%  { box-shadow: 0 0 8px 2px #ffae00, 0 0 16px 5px #ff6b00; transform: scale(1); }
	75%  { box-shadow: 0 0 10px 3px #ff3d00, 0 0 18px 5px #ffae00; transform: scale(1.02); }
	90%  { box-shadow: 0 0 7px 2px #ff6b00, 0 0 15px 4px #ff3d00; transform: scale(0.99); }
	100% { box-shadow: 0 0 8px 2px #ff6b00, 0 0 16px 4px #ff3d00; transform: scale(1); }
}

.whatsgrowth-floating__toggle--fire {
	/* Velocidad Normal (1.8 s) = 1.2 s, como siempre; Lenta y Rápida escalan. */
	animation: whatsgrowth-fire calc(var(--wgw-pulse-speed, 1.8s) * 0.667) infinite;
}

.whatsgrowth-floating__toggle--coin {
	position: relative;
	overflow: hidden;
	animation: whatsgrowth-coin-scale var(--wgw-pulse-speed, 1.6s) ease-in-out infinite;
}

.whatsgrowth-floating__toggle--coin::after {
	content: "";
	position: absolute;
	top: -50%;
	left: -60%;
	width: 14%;
	height: 200%;
	background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.75), transparent);
	transform: rotate(20deg);
	animation: whatsgrowth-coin-shine var(--wgw-pulse-speed, 1.6s) linear infinite;
}

@keyframes whatsgrowth-coin-shine {
	0%   { left: -60%; }
	100% { left: 140%; }
}

@keyframes whatsgrowth-coin-scale {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.08); }
}

.whatsgrowth-floating__toggle--smoke {
	position: relative;
}

.whatsgrowth-floating__toggle--smoke::before,
.whatsgrowth-floating__toggle--smoke::after {
	content: "";
	position: absolute;
	bottom: 5%;
	width: calc(55% * var(--wgw-smoke-scale, 1));
	height: calc(55% * var(--wgw-smoke-scale, 1));
	border-radius: 50%;
	background: radial-gradient(ellipse at center, var(--wgw-pulse-color, rgba(255, 255, 255, 0.75)) 0%, transparent 72%);
	filter: blur(4px);
	z-index: -1;
	opacity: 0;
}

.whatsgrowth-floating__toggle--smoke::before {
	left: 8%;
	animation: whatsgrowth-smoke-rise var(--wgw-pulse-speed, 2.6s) ease-out infinite;
}

.whatsgrowth-floating__toggle--smoke::after {
	right: 5%;
	width: calc(42% * var(--wgw-smoke-scale, 1));
	height: calc(42% * var(--wgw-smoke-scale, 1));
	animation: whatsgrowth-smoke-rise var(--wgw-pulse-speed, 2.6s) ease-out infinite;
	animation-delay: calc(var(--wgw-pulse-speed, 2.6s) / -2);
}

@keyframes whatsgrowth-smoke-rise {
	0%   { transform: translateY(0) scale(0.6); opacity: 0; }
	15%  { opacity: var(--wgw-smoke-opacity, 0.55); }
	100% { transform: translateY(-170%) scale(1.7); opacity: 0; }
}

/* Humo en el botón de enviar: las volutas suben DENTRO del botón.
   isolation:isolate crea un contexto propio, así el z-index:-1 queda
   encima del fondo del botón pero debajo del texto, y overflow:hidden
   evita que el humo se salga hacia los campos del formulario. */
.whatsgrowth-form__submit.whatsgrowth-floating__toggle--smoke {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.whatsgrowth-form__submit.whatsgrowth-floating__toggle--smoke::before,
.whatsgrowth-form__submit.whatsgrowth-floating__toggle--smoke::after {
	background: radial-gradient(ellipse at center, var(--wgw-pulse-color, rgba(255, 255, 255, 0.75)) 0%, transparent 72%);
	bottom: -40%;
	width: calc(44px * var(--wgw-smoke-scale, 1));
	height: calc(44px * var(--wgw-smoke-scale, 1));
}

.whatsgrowth-form__submit.whatsgrowth-floating__toggle--smoke::before { left: 18%; }
.whatsgrowth-form__submit.whatsgrowth-floating__toggle--smoke::after  { right: 20%; }

/* Letrero: texto que se desliza como en una marquesina, para textos
   de botón más largos de lo que cabe cómodo en la píldora. */
.whatsgrowth-floating__toggle-label--letrero {
	display: inline-block;
	max-width: 100px;
	overflow: hidden;
	white-space: nowrap;
	vertical-align: middle;
	mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.whatsgrowth-letrero-inner {
	display: inline-block;
	padding-left: 100%;
	animation: whatsgrowth-letrero-scroll 6s linear infinite;
}

@keyframes whatsgrowth-letrero-scroll {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-200%); }
}

/* Trazo: un "cometa" de luz recorriendo el contorno del botón sin
   parar — funciona en cualquier forma/tamaño porque usa un degradado
   cónico enmascarado, no depende de medir el perímetro real. */
.whatsgrowth-floating__toggle--trazo {
	position: relative;
}

.whatsgrowth-floating__toggle--trazo::before {
	content: "";
	position: absolute;
	inset: -3px;
	border-radius: 50%;
	padding: 3px;
	background: conic-gradient(from var(--wgw-trazo-angle, 0deg), transparent 0%, var(--wgw-trazo-color, var(--wgw-primary, #25d366)) 12%, transparent 26%);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	animation: whatsgrowth-trazo-rotate var(--wgw-trazo-speed, 3s) linear infinite;
	pointer-events: none;
}

.whatsgrowth-floating__toggle--pill.whatsgrowth-floating__toggle--trazo::before {
	border-radius: calc(var(--wgw-pill-radius, 25px) + 3px);
}

.whatsgrowth-form__submit.whatsgrowth-floating__toggle--trazo::before {
	border-radius: 11px;
}

@property --wgw-trazo-angle {
	syntax: '<angle>';
	initial-value: 0deg;
	inherits: false;
}

@keyframes whatsgrowth-trazo-rotate {
	to { --wgw-trazo-angle: 360deg; }
}

.whatsgrowth-greeting-bubble {
	background: #fff;
	color: #111827;
	padding: 10px 16px;
	border-radius: 12px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
	font-size: 13px;
	max-width: 220px;
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	animation: whatsgrowth-panel-in 0.25s ease-out;
}

.whatsgrowth-greeting-bubble[hidden] {
	display: none !important;
}

.whatsgrowth-status-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
}

/* Bolita de estatus: misma animación que su tarjeta en el editor.
   Ninguna desvanece la bolita (antes "Pulso" y "Respiración" bajaban la
   opacidad y parecía que desaparecía a ratos).
   - Pulso: un anillo sale de la bolita y se desvanece.
   - Respiración: la bolita crece y regresa, sin perder color.
   - Brillo: un halo suave que aparece y se apaga alrededor. */
.whatsgrowth-status-dot--pulse {
	animation: whatsgrowth-status-dot-pulse 1.6s ease-out infinite;
}

.whatsgrowth-status-dot--breathe {
	animation: whatsgrowth-status-dot-breathe 1.8s ease-in-out infinite;
}

.whatsgrowth-status-dot--glow {
	animation: whatsgrowth-status-dot-glow 1.8s ease-in-out infinite;
}

@keyframes whatsgrowth-status-dot-pulse {
	0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--wgw-status-dot-color, #25d366) 60%, transparent); }
	70%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--wgw-status-dot-color, #25d366) 0%, transparent); }
	100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--wgw-status-dot-color, #25d366) 0%, transparent); }
}

@keyframes whatsgrowth-status-dot-breathe {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.35); }
}

@keyframes whatsgrowth-status-dot-glow {
	0%, 100% { box-shadow: 0 0 2px 0 color-mix(in srgb, var(--wgw-status-dot-color, #25d366) 35%, transparent); }
	50%      { box-shadow: 0 0 8px 3px color-mix(in srgb, var(--wgw-status-dot-color, #25d366) 75%, transparent); }
}

.whatsgrowth-greeting-bubble::after {
	content: "";
	position: absolute;
	bottom: -7px;
	right: 22px;
	width: 14px;
	height: 14px;
	background: #fff;
	transform: rotate(45deg);
	box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.06);
}

.whatsgrowth-floating--left .whatsgrowth-greeting-bubble::after {
	right: auto;
	left: 22px;
}

/* Globo sin piquito (opción del widget). */
.whatsgrowth-greeting-bubble--no-tail::after {
	display: none;
}

.whatsgrowth-greeting-bubble__close {
	background: none;
	border: none;
	color: #9ca3af;
	cursor: pointer;
	font-size: 14px;
	padding: 6px;
	margin: -6px -6px -6px 0;
	line-height: 1;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}

.whatsgrowth-greeting-bubble__close:hover {
	background: #f3f4f6;
	color: #374151;
}

/* ============================================================
 * PANEL (tipo chat)
 * ============================================================ */

.whatsgrowth-floating__panel {
	width: 320px;
	max-width: calc(100vw - 40px);
	background: #fff;
	border-radius: var(--wgw-panel-radius, 16px);
	box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22);
	overflow: hidden;
	position: relative;
	animation: whatsgrowth-panel-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.whatsgrowth-scroll-shadow {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 40px;
	background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.28));
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s ease;
	z-index: 2;
}

.whatsgrowth-scroll-shadow.is-visible {
	opacity: 1;
}

@keyframes whatsgrowth-panel-in {
	from { opacity: 0; transform: translateY(16px) scale(0.98); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes whatsgrowth-panel-out {
	from { opacity: 1; transform: translateY(0) scale(1); }
	to   { opacity: 0; transform: translateY(16px) scale(0.98); }
}

.whatsgrowth-floating.is-closing .whatsgrowth-floating__panel {
	animation: whatsgrowth-panel-out 0.18s cubic-bezier(0.4, 0, 1, 1) forwards;
}

.whatsgrowth-floating__panel-header {
	background: var(--wgw-window-bg, var(--wgw-gradient, var(--wgw-window, var(--wgw-primary, #25d366))));
	color: #fff;
	padding: 16px 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-weight: 600;
	font-size: 15px;
}

.whatsgrowth-floating__close {
	background-color: rgba(255, 255, 255, 0.18) !important;
	background-image: none !important;
	border: none !important;
	color: #fff !important;
	font-size: 14px;
	cursor: pointer;
	line-height: 1;
	width: 26px;
	height: 26px;
	border-radius: 50% !important;
	display: flex;
	align-items: center;
	justify-content: center;
	appearance: none;
	-webkit-appearance: none;
	transition: background 0.15s ease;
}

.whatsgrowth-floating__close:hover {
	background: rgba(255, 255, 255, 0.32);
}

.whatsgrowth-floating__panel .whatsgrowth-form {
	padding: 18px;
	max-width: none;
	margin: 0;
	max-height: 60vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	/* Deja ver un poco del siguiente campo asomando en el borde —
	   es la señal visual de "aquí hay más" sin depender de que el
	   navegador dibuje una barra de scroll visible en móvil. */
	scrollbar-width: thin;
}

.whatsgrowth-floating__panel .whatsgrowth-form::-webkit-scrollbar {
	width: 5px;
}

.whatsgrowth-floating__panel .whatsgrowth-form::-webkit-scrollbar-thumb {
	background: #d1d5db;
	border-radius: 10px;
}

.whatsgrowth-required-mark {
	color: #dc2626;
}

.whatsgrowth-form__consent {
	margin-bottom: 14px;
	font-size: 12px;
	color: #6b7280;
	line-height: 1.4;
}

.whatsgrowth-form__consent label {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	cursor: pointer;
}

.whatsgrowth-form__consent input[type="checkbox"] {
	margin-top: 2px;
	flex-shrink: 0;
}

.whatsgrowth-form__consent a {
	color: var(--wgw-primary, #25d366);
	font-weight: 600;
}

/* ============================================================
 * FORM (embebido y dentro del panel flotante)
 * ============================================================ */

.whatsgrowth-form {
	max-width: 420px;
	margin: 0 auto;
	font-family: inherit;
}

.whatsgrowth-form__title {
	margin: 0 0 16px;
	font-size: 17px;
	font-weight: 600;
	color: #111827;
}

.whatsgrowth-form__field {
	margin-bottom: 18px;
}

.whatsgrowth-form__field label {
	display: block !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #4b5563 !important;
	margin: 0 0 8px !important;
	padding: 0 !important;
	line-height: 1.3 !important;
	letter-spacing: 0.01em;
}

.whatsgrowth-form__field input,
.whatsgrowth-form__field textarea,
.whatsgrowth-form__field select {
	width: 100%;
	padding: 11px 13px;
	border: 1.5px solid #e5e7eb;
	border-radius: 8px;
	font-size: 14px;
	color: #111827;
	background: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.whatsgrowth-form__field select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 36px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.24 4.25a.75.75 0 01-1.06 0L5.21 8.29a.75.75 0 01.02-1.08z' clip-rule='evenodd'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px;
	cursor: pointer;
}

.whatsgrowth-form__field input::placeholder,
.whatsgrowth-form__field textarea::placeholder {
	color: #9ca3af;
}

.whatsgrowth-form__field input:focus,
.whatsgrowth-form__field textarea:focus,
.whatsgrowth-form__field select:focus,
.whatsgrowth-form__field .wgw-force-focus {
	outline: none;
	border-color: var(--wgw-focus, var(--wgw-primary, #25d366));
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wgw-focus, var(--wgw-primary, #25d366)) 20%, transparent);
}

/* Campos de opción (radio / casillas). Van después de las reglas
   genéricas de .whatsgrowth-form__field para ganarles: aquí la
   etiqueta de cada opción no es bloque ni negrita, y el input no
   ocupa el 100% del ancho. */
.whatsgrowth-form__field--choice .whatsgrowth-form__field-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #4b5563;
	margin: 0 0 8px;
	line-height: 1.3;
	letter-spacing: 0.01em;
}

.whatsgrowth-choices {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.whatsgrowth-form__field .whatsgrowth-choice {
	display: flex !important;
	align-items: flex-start;
	gap: 10px;
	margin: 0 !important;
	font-weight: 400 !important;
	font-size: 14px !important;
	color: #111827 !important;
	line-height: 1.35 !important;
	cursor: pointer;
}

.whatsgrowth-form__field .whatsgrowth-choice input {
	width: 18px;
	height: 18px;
	min-width: 18px;
	margin: 0;
	padding: 0;
	border: 1.5px solid #d1d5db;
	box-shadow: none;
	accent-color: var(--wgw-focus, var(--wgw-primary, #25d366));
	cursor: pointer;
}

.whatsgrowth-form__field .whatsgrowth-choice input:focus-visible {
	outline: 2px solid var(--wgw-focus, var(--wgw-primary, #25d366));
	outline-offset: 2px;
	box-shadow: none;
}

.whatsgrowth-form__field textarea {
	resize: vertical;
	min-height: 72px;
	font-family: inherit;
}

.whatsgrowth-form__submit {
	background: var(--wgw-button-bg, var(--wgw-gradient, var(--wgw-button, var(--wgw-primary, #25d366)))) !important;
	color: #fff !important;
	border: none !important;
	padding: 13px 20px;
	border-radius: 8px !important;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	width: 100%;
	margin-top: 4px;
	appearance: none;
	-webkit-appearance: none;
	transition: background 0.15s ease;
}

.whatsgrowth-form__submit:hover {
	filter: brightness(0.9);
}

.whatsgrowth-form__submit:active {
	transform: translateY(1px);
}

/* ============================================================
 * BOTÓN EXTERNO — [wappgrowth_open_button]. Estilo mínimo de
 * cortesía; se sobreescribe fácil con la clase que le pases o
 * el CSS del tema, ya que puede vivir en cualquier parte del sitio.
 * ============================================================ */

.wappgrowth-open-button {
	background-color: var(--wgw-primary, #25d366);
	color: #fff;
	border: none;
	padding: 12px 22px;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.wappgrowth-open-button:hover {
	filter: brightness(0.9);
}

/* ============================================================
 * CONFIRMACIÓN POST-ENVÍO
 * ============================================================ */

.whatsgrowth-confirmation {
	text-align: center;
	padding: 20px 18px 18px;
}

.whatsgrowth-confirmation__emoji {
	font-size: 36px;
	line-height: 1;
	margin-bottom: 10px;
}

.whatsgrowth-confirmation__text {
	font-size: 14px;
	color: #374151;
	margin: 0 0 14px;
	line-height: 1.5;
	font-weight: 500;
}

.whatsgrowth-confirmation__toggle-fallback {
	background: none !important;
	border: none !important;
	color: #6b7280 !important;
	font-size: 13px;
	text-decoration: underline;
	cursor: pointer;
	padding: 4px !important;
	appearance: none;
	-webkit-appearance: none;
}

.whatsgrowth-confirmation__toggle-fallback:hover {
	color: #374151 !important;
}

.whatsgrowth-confirmation__fallback {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid #f0f1f3;
}

.whatsgrowth-confirmation__retry,
.whatsgrowth-confirmation__resend {
	display: block;
	width: 100%;
	padding: 11px;
	border-radius: 8px;
	font-size: 13px;
	cursor: pointer;
	margin-bottom: 8px;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.whatsgrowth-confirmation__retry {
	background-color: #fff !important;
	background-image: none !important;
	color: var(--wgw-primary, #1da851) !important;
	border: 1.5px solid var(--wgw-primary, #25d366) !important;
	font-weight: 600;
	appearance: none;
	-webkit-appearance: none;
}

.whatsgrowth-confirmation__retry:hover {
	background-color: #f0fdf5 !important;
}

.whatsgrowth-confirmation__resend {
	background: none !important;
	background-image: none !important;
	color: #6b7280 !important;
	border: none !important;
	margin-bottom: 0;
	font-size: 13px;
	text-decoration: underline;
	appearance: none;
	-webkit-appearance: none;
}

.whatsgrowth-confirmation__resend:hover {
	color: #374151 !important;
}

/* ============================================================
 * PANTALLA DE AGRADECIMIENTO — estilos configurables por widget
 * (pestaña Agradecimiento). Selectores con más especificidad que
 * los de arriba para ganarles a sus !important; los widgets sin
 * configurar se ven igual que siempre porque los defaults
 * reproducen ese mismo look.
 * ============================================================ */

/* Borde de la ventana: se dibuja alrededor de TODA la ventana (header
   incluido) mientras se ve la pantalla de agradecimiento — igual que en
   la vista previa. Las variables vienen del contenedor del widget. */
.whatsgrowth-floating__panel:has(.whatsgrowth-confirmation--outlined:not([hidden])) {
	box-shadow: 0 0 0 var(--wgw-confirm-outline-w, 2px) var(--wgw-confirm-outline, var(--wgw-primary, #25d366)), 0 12px 36px rgba(0, 0, 0, 0.22);
}

.whatsgrowth-embed:has(.whatsgrowth-confirmation--outlined:not([hidden])) {
	box-shadow: 0 0 0 var(--wgw-confirm-outline-w, 2px) var(--wgw-confirm-outline, var(--wgw-primary, #25d366));
	border-radius: 12px;
}

.whatsgrowth-confirmation .wgw-cbtn {
	display: block;
	width: 100%;
	padding: 11px !important;
	border-radius: 8px !important;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	margin-bottom: 8px;
	appearance: none;
	-webkit-appearance: none;
	text-decoration: none;
	transition: filter 0.15s ease, background-color 0.15s ease;
}

.whatsgrowth-confirmation .wgw-cbtn:last-child {
	margin-bottom: 0;
}

.whatsgrowth-confirmation .wgw-cbtn--solid {
	background: var(--wgw-cbtn-color) !important;
	color: var(--wgw-cbtn-text, #fff) !important;
	border: 1.5px solid var(--wgw-cbtn-color) !important;
}

.whatsgrowth-confirmation .wgw-cbtn--gradient {
	background: var(--wgw-cbtn-gradient, var(--wgw-cbtn-color)) !important;
	color: var(--wgw-cbtn-text, #fff) !important;
	border: none !important;
}

.whatsgrowth-confirmation .wgw-cbtn--outline {
	background: #fff !important;
	color: var(--wgw-cbtn-color) !important;
	border: 1.5px solid var(--wgw-cbtn-color) !important;
}

.whatsgrowth-confirmation .wgw-cbtn--text {
	background: none !important;
	color: var(--wgw-cbtn-color) !important;
	border: none !important;
	font-weight: 400;
	text-decoration: underline;
}

.whatsgrowth-confirmation .wgw-cbtn--solid:hover,
.whatsgrowth-confirmation .wgw-cbtn--gradient:hover {
	filter: brightness(0.92);
}

.whatsgrowth-confirmation .wgw-cbtn--outline:hover {
	background: color-mix(in srgb, var(--wgw-cbtn-color) 8%, #fff) !important;
}

.whatsgrowth-confirmation .wgw-cbtn--text:hover {
	filter: brightness(0.75);
}

/* Primera pantalla: fondo, color de texto y tamaño del emoji. */
.whatsgrowth-confirmation--filled {
	background: var(--wgw-confirm-bg, #fff);
}

.whatsgrowth-confirmation .whatsgrowth-confirmation__text {
	color: var(--wgw-confirm-text, #374151);
}

.whatsgrowth-confirmation .whatsgrowth-confirmation__emoji {
	font-size: var(--wgw-confirm-emoji, 36px);
}

/* El enlace "¿No se abrió WhatsApp?" en estilo texto: centrado y del
   ancho de su texto, como siempre; en los demás estilos, botón completo. */
.whatsgrowth-confirmation .whatsgrowth-confirmation__toggle-fallback.wgw-cbtn--text {
	display: inline-block;
	width: auto;
	padding: 4px !important;
	margin-bottom: 0;
}

/* ============================================================
 * VENTANA DE REFUERZO DE INTENCIÓN — aparece al enviar el form
 * (si el widget la tiene activa) y pide deslizar para confirmar.
 * Toma el color del botón de envío.
 * ============================================================ */

.whatsgrowth-intent {
	padding: 22px 18px 18px;
	text-align: center;
	animation: whatsgrowth-panel-in 0.22s ease-out;
}

.whatsgrowth-intent[hidden] {
	display: none !important;
}

.whatsgrowth-intent__title {
	margin: 0 0 6px !important;
	font-size: 15px;
	font-weight: 700;
	color: #111827;
	line-height: 1.3;
}

.whatsgrowth-intent__text {
	margin: 0 0 18px !important;
	font-size: 14px;
	color: #374151;
	line-height: 1.45;
}

.whatsgrowth-slider {
	--wgw-slider-solid: var(--wgw-slider-color, var(--wgw-button, var(--wgw-primary, #25d366)));
	position: relative;
	height: 52px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--wgw-slider-solid) 14%, #fff);
	box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--wgw-slider-solid) 35%, transparent);
	overflow: hidden;
	user-select: none;
	-webkit-user-select: none;
	touch-action: none;
}

.whatsgrowth-slider__fill {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 52px;
	border-radius: 999px;
	background: var(--wgw-slider-color, var(--wgw-button-bg, var(--wgw-gradient, var(--wgw-slider-solid))));
	opacity: 0.25;
	pointer-events: none;
}

.whatsgrowth-slider__label {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-left: 40px;
	font-size: 13px;
	font-weight: 600;
	color: color-mix(in srgb, var(--wgw-slider-solid) 70%, #111827);
	/* El texto se desvanece conforme avanza el botón. */
	opacity: calc(1 - var(--wgw-slider-progress, 0) * 1.4);
	pointer-events: none;
	animation: whatsgrowth-slider-hint 2.4s ease-in-out infinite;
}

@keyframes whatsgrowth-slider-hint {
	0%, 100% { transform: translateX(0); }
	50%      { transform: translateX(6px); }
}

.whatsgrowth-slider__knob {
	position: absolute !important;
	top: 4px;
	left: 4px;
	width: 44px !important;
	height: 44px !important;
	min-height: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	background: var(--wgw-slider-color, var(--wgw-button-bg, var(--wgw-gradient, var(--wgw-slider-solid)))) !important;
	color: #fff !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
	cursor: grab;
	touch-action: none;
	transition: transform 0.25s ease;
	z-index: 1;
}

.whatsgrowth-slider.is-dragging .whatsgrowth-slider__knob {
	cursor: grabbing;
	transition: none;
}

.whatsgrowth-slider.is-dragging .whatsgrowth-slider__label {
	animation: none;
}

.whatsgrowth-slider__knob:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--wgw-slider-solid) 45%, transparent);
	outline-offset: 2px;
}

.whatsgrowth-slider.is-done .whatsgrowth-slider__fill {
	opacity: 0.45;
}

.whatsgrowth-intent__back {
	display: inline-block;
	margin-top: 14px !important;
	padding: 4px !important;
	background: none !important;
	border: none !important;
	color: #6b7280 !important;
	font-size: 13px !important;
	text-decoration: underline;
	cursor: pointer;
	box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.whatsgrowth-slider__label { animation: none; }
	.whatsgrowth-slider__knob { transition: none; }
}

.whatsgrowth-slider__fill {
	transition: width 0.25s ease;
}

.whatsgrowth-slider.is-dragging .whatsgrowth-slider__fill {
	transition: none;
}

/* Botón "Abrir WhatsApp" — solo aparece cuando el navegador bloqueó la
   apertura automática. Es un enlace real: tocarlo siempre funciona. */
.whatsgrowth-confirmation__open {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin: 4px 0 6px;
	padding: 13px 16px !important;
	border-radius: 10px !important;
	background: var(--wgw-button-bg, var(--wgw-gradient, var(--wgw-button, var(--wgw-primary, #25d366)))) !important;
	color: #fff !important;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	box-sizing: border-box;
}

/* Estilo propio del botón (Agradecimiento → Si el navegador bloquea WhatsApp). */
.whatsgrowth-confirmation__open.whatsgrowth-confirmation__open--solid {
	background: var(--wgw-open-color) !important;
	color: var(--wgw-open-text, #fff) !important;
}

.whatsgrowth-confirmation__open.whatsgrowth-confirmation__open--gradient {
	background: var(--wgw-open-gradient) !important;
	color: var(--wgw-open-text, #fff) !important;
}

.whatsgrowth-confirmation__open.whatsgrowth-confirmation__open--outline {
	background: transparent !important;
	color: var(--wgw-open-color) !important;
	border: 2px solid var(--wgw-open-color) !important;
	box-shadow: none;
}

.whatsgrowth-confirmation__open[hidden] {
	display: none !important;
}

.whatsgrowth-confirmation__open:hover {
	filter: brightness(0.94);
}

/* ============================================================
 * Business hours (Pro)
 * ============================================================ */
.wappgrowth-offhours-hidden {
	display: none !important;
}

.wappgrowth-offhours-notice {
	margin: 12px 12px 0;
	padding: 10px 12px;
	border-radius: 8px;
	background: #fff7e6;
	border: 1px solid #f5d38a;
	color: #5c4400;
	font-size: 13px;
	line-height: 1.4;
}

.whatsgrowth-embed > .wappgrowth-offhours-notice {
	margin: 0 0 12px;
}

.wappgrowth-offhours-notice[hidden] {
	display: none !important;
}

.whatsgrowth-status-dot.wappgrowth-dot-offline {
	background: var(--wappgrowth-dot-offline, #9ca3af) !important;
	--wgw-status-dot-color: var(--wappgrowth-dot-offline, #9ca3af);
	animation: none !important;
	box-shadow: none !important;
}

img.whatsgrowth-status-dot.wappgrowth-dot-offline {
	filter: grayscale(1);
	opacity: 0.7;
}

/* ============================================================
 * Stacked links (several ways to reach you on one widget)
 * ============================================================ */

/* Another WhatsApp stacked as a link: its own button never shows. */
.wappgrowth-in-group .whatsgrowth-toggle-wrap,
.wappgrowth-in-group .whatsgrowth-greeting-bubble,
.wappgrowth-in-group > a[href*="wappgrowth.com"] {
	display: none !important;
}

.whatsgrowth-floating__toggle {
	position: relative;
}

.wappgrowth-group {
	display: none; /* JS turns it on once there's more than one option */
	flex-direction: column;
	align-items: flex-end;
	pointer-events: none; /* only the items take clicks, never the empty area */
}

.whatsgrowth-floating.has-stack .wappgrowth-group {
	display: flex;
}

.whatsgrowth-floating--left .wappgrowth-group {
	align-items: flex-start;
}

/* While a form is open the menu steps aside. */
.whatsgrowth-floating.is-open .wappgrowth-group,
.whatsgrowth-floating.has-open-member .wappgrowth-group {
	display: none !important;
}

.wappgrowth-group__items {
	display: flex;
	flex-direction: column;
	align-items: inherit;
	pointer-events: none;
}

.wappgrowth-group__item {
	appearance: none;
	-webkit-appearance: none;
	border: none;
	padding: 0;
	margin: 0;
	background: none;
	cursor: pointer;
	font: inherit;
	display: flex;
	align-items: center;
	gap: 10px;
	text-align: left;
	text-decoration: none !important;
	color: inherit;
}

.wappgrowth-group__item[hidden] {
	display: none !important;
}

.whatsgrowth-floating--left .wappgrowth-group__item {
	flex-direction: row-reverse;
}

.wappgrowth-group__text {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
	min-width: 0;
}

.wappgrowth-group__label {
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wappgrowth-group__sub {
	font-size: 11px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wappgrowth-group__sub:empty {
	display: none;
}

.wappgrowth-group__avatar {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	overflow: hidden;
	color: #fff;
	background: var(--wgw-item, var(--wgw-primary, #25d366));
}

.wappgrowth-group__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.wappgrowth-group__item.is-offline .wappgrowth-group__avatar {
	filter: grayscale(0.85);
	opacity: 0.75;
}

/* ---------- Bubbles: unfold from the widget's own button ---------- */

.wappgrowth-group--bubbles .wappgrowth-group__items {
	gap: 12px;
	padding: 0 calc((var(--wgw-btn-size, 58px) - 48px) / 2);
	margin-bottom: 2px;
}

.wappgrowth-group--bubbles .wappgrowth-group__avatar {
	width: 48px;
	height: 48px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
	transition: transform 0.15s ease;
}

.wappgrowth-group--bubbles .wappgrowth-group__text {
	background: #fff;
	color: #111827;
	padding: 7px 12px;
	border-radius: 10px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
	max-width: 200px;
	font-size: 13px;
}

.wappgrowth-group--bubbles .wappgrowth-group__sub {
	color: #6b7280;
	margin-top: 2px;
}

.wappgrowth-group--bubbles .wappgrowth-group__item {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(calc(14px + var(--d, 0) * 10px)) scale(0.6);
	transform-origin: right bottom;
	transition:
		opacity 0.18s ease,
		transform 0.18s ease,
		visibility 0s linear 0.18s;
}

.whatsgrowth-floating--left .wappgrowth-group--bubbles .wappgrowth-group__item {
	transform-origin: left bottom;
}

.is-stack-open .wappgrowth-group--bubbles .wappgrowth-group__item {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: none;
	/* closest to the button comes out first */
	transition:
		opacity 0.22s ease calc(var(--d, 0) * 55ms),
		transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--d, 0) * 55ms),
		visibility 0s;
}

.wappgrowth-group--bubbles .wappgrowth-group__item:hover .wappgrowth-group__avatar,
.wappgrowth-group--bubbles .wappgrowth-group__item:focus-visible .wappgrowth-group__avatar {
	transform: scale(1.08);
}

/* The widget's button: a count badge, and an X while the menu is open. */
.wappgrowth-stack-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	box-sizing: border-box;
	border-radius: 10px;
	background: #fff;
	color: var(--wgw-primary, #25d366);
	font-size: 12px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.whatsgrowth-floating--left .wappgrowth-stack-badge {
	right: auto;
	left: -4px;
}

.whatsgrowth-floating:not(.has-stack) .wappgrowth-stack-badge,
.whatsgrowth-floating:not(.has-stack) .wappgrowth-toggle-x {
	display: none;
}

.wappgrowth-toggle-x {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	opacity: 0;
	transform: rotate(-90deg) scale(0.5);
	transition: transform 0.28s ease, opacity 0.2s ease;
	pointer-events: none;
}

.is-stack-open .whatsgrowth-floating__toggle > :not(.wappgrowth-toggle-x),
.has-open-member .whatsgrowth-floating__toggle > :not(.wappgrowth-toggle-x) {
	visibility: hidden;
}

.is-stack-open .wappgrowth-toggle-x,
.has-open-member .wappgrowth-toggle-x {
	opacity: 1;
	transform: none;
}

.is-stack-open .wappgrowth-stack-badge {
	opacity: 0;
	transform: scale(0.5);
}

/* ---------- Pills: a stacked deck replaces the button ----------
 * Each pill carries the button's own classes (pill or cushion), so it has
 * exactly the same height, radius, padding, font and effect. Here we only
 * add the deck behaviour. */

.has-stack-pills .whatsgrowth-toggle-wrap {
	display: none !important;
}

.wappgrowth-group--pills .wappgrowth-group__items {
	pointer-events: auto;
	align-items: stretch; /* every pill as wide as the widest: a tidy deck */
}

.wappgrowth-group--pills .wappgrowth-group__item {
	position: relative;
	z-index: calc(1 + var(--i, 0));
	flex-direction: row-reverse; /* icon first, then text — like the button */
	justify-content: center;
	min-width: 150px;
	box-sizing: border-box;
	color: #fff !important;
	transform-origin: right bottom;
	/* back pills: a bit narrower, like a deck of cards */
	transform: scale(calc(1 - var(--d, 0) * 0.04));
	transition:
		margin-top 0.32s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.2s ease;
}

/* Extra links keep their own color; the main one keeps the button's (gradient included). */
.wappgrowth-group--pills .wappgrowth-group__item:not([data-wappgrowth-main]) {
	background: var(--wgw-item, var(--wgw-primary, #25d366)) !important;
}

.whatsgrowth-floating--left .wappgrowth-group--pills .wappgrowth-group__item {
	transform-origin: left bottom;
}

.wappgrowth-group--pills .wappgrowth-group__item:not([hidden]) ~ .wappgrowth-group__item {
	/* each pill peeks above the next: enough to read its name */
	margin-top: calc(var(--wgw-btn-size, 58px) * -0.26);
}

.wappgrowth-group--pills .wappgrowth-group__text {
	align-items: flex-start;
}

.wappgrowth-group--pills .wappgrowth-group__sub {
	display: none; /* the button height has no room: shown as a tooltip */
}

.wappgrowth-group--pills .wappgrowth-group__avatar {
	width: auto;
	height: auto;
	background: transparent;
	border-radius: 0;
	overflow: visible;
}

.wappgrowth-group--pills .wappgrowth-group__avatar img {
	width: 26px;
	height: 26px;
	border-radius: 50%;
}

.wappgrowth-group--pills .wappgrowth-group__item.is-offline {
	opacity: 0.7;
}

.is-spread .wappgrowth-group--pills .wappgrowth-group__item {
	transform: none;
}

.is-spread .wappgrowth-group--pills .wappgrowth-group__item:not([hidden]) ~ .wappgrowth-group__item {
	margin-top: 8px;
}

@media (hover: hover) {
	.wappgrowth-group--pills .wappgrowth-group__items:hover .wappgrowth-group__item,
	.wappgrowth-group--pills .wappgrowth-group__items:focus-within .wappgrowth-group__item {
		transform: none;
	}
	.wappgrowth-group--pills .wappgrowth-group__items:hover .wappgrowth-group__item:not([hidden]) ~ .wappgrowth-group__item,
	.wappgrowth-group--pills .wappgrowth-group__items:focus-within .wappgrowth-group__item:not([hidden]) ~ .wappgrowth-group__item {
		margin-top: 8px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wappgrowth-group__item,
	.wappgrowth-toggle-x,
	.wappgrowth-group__sub {
		transition: none !important;
	}
}

/* ============================================================
 * Cushion button + shrink on scroll
 * ============================================================ */

/* Cushion (Freemius-like): clearly taller than the pill and almost as
 * tall as it is half-wide, big soft corners (~45% of its height), compact
 * horizontal padding, bold text and a soft "puffy" depth. */
.whatsgrowth-floating__toggle--cushion {
	height: calc(var(--wgw-btn-size, 58px) * 1.24);
	min-width: calc(var(--wgw-btn-size, 58px) * 2.1);
	border-radius: calc(var(--wgw-btn-size, 58px) * 0.55) !important;
	padding: 0 24px 0 22px !important;
	gap: 12px;
	box-shadow:
		0 10px 28px rgba(0, 0, 0, 0.2),
		0 2px 6px rgba(0, 0, 0, 0.12),
		inset 0 1px 0 rgba(255, 255, 255, 0.25),
		inset 0 -2px 0 rgba(0, 0, 0, 0.08);
}

.whatsgrowth-floating__toggle--cushion svg {
	width: 32px;
	height: 32px;
}

.whatsgrowth-floating__toggle--cushion .whatsgrowth-floating__toggle-label {
	font-size: 17px;
	font-weight: 700;
}

.wappgrowth-toggle-chevron {
	display: none;
	color: #fff;
	flex-shrink: 0;
	order: -1; /* takes the icon's place, before the text */
}

/* Cushion stays visible while its panel is open and works as "minimize". */
.whatsgrowth-floating.is-open .whatsgrowth-floating__toggle--cushion,
.whatsgrowth-floating.is-closing .whatsgrowth-floating__toggle--cushion {
	display: flex;
}

.whatsgrowth-floating.is-open .whatsgrowth-floating__toggle--cushion > :not(.whatsgrowth-floating__toggle-label):not(.wappgrowth-toggle-chevron),
.whatsgrowth-floating.is-open .whatsgrowth-toggle-icon-outside {
	display: none !important;
}

.whatsgrowth-floating.is-open .whatsgrowth-floating__toggle--cushion .wappgrowth-toggle-chevron {
	display: flex;
}

/* Shrink to a circle while scrolling down (JS adds .is-shrunk). */
.whatsgrowth-floating__toggle[data-wappgrowth-shrink] {
	transition:
		padding 0.32s cubic-bezier(0.22, 1, 0.36, 1),
		gap 0.32s cubic-bezier(0.22, 1, 0.36, 1),
		border-radius 0.32s ease,
		height 0.32s ease,
		transform 0.15s ease,
		box-shadow 0.15s ease;
}

.whatsgrowth-floating__toggle[data-wappgrowth-shrink] .whatsgrowth-floating__toggle-label {
	display: inline-block;
	max-width: 260px;
	overflow: hidden;
	transition: max-width 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}

.whatsgrowth-floating__toggle[data-wappgrowth-shrink] {
	--wgw-shrink-d: var(--wgw-btn-size, 58px);
}

/* La píldora mide 0.862 del tamaño: al encogerse conserva su alto (ya no
 * crece hacia arriba) y queda tan ancha como alta. */
.whatsgrowth-floating__toggle--pill[data-wappgrowth-shrink]:not(.whatsgrowth-floating__toggle--cushion) {
	--wgw-shrink-d: calc(var(--wgw-btn-size, 58px) * 0.862);
}

.whatsgrowth-floating__toggle[data-wappgrowth-shrink].is-shrunk {
	gap: 0;
	min-width: 0 !important;
	padding: 0 calc((var(--wgw-shrink-d) - var(--wgw-icon-w, 28px)) / 2) !important;
	/* Píldora redonda → círculo perfecto; con poco redondeo, conserva el suyo. */
	border-radius: var(--wgw-shrink-radius, 50%) !important;
}

.whatsgrowth-floating__toggle--cushion[data-wappgrowth-shrink].is-shrunk {
	height: var(--wgw-shrink-d);
}

.whatsgrowth-floating__toggle[data-wappgrowth-shrink].is-shrunk .whatsgrowth-floating__toggle-label {
	max-width: 0;
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.whatsgrowth-floating__toggle[data-wappgrowth-shrink],
	.whatsgrowth-floating__toggle[data-wappgrowth-shrink] .whatsgrowth-floating__toggle-label {
		transition: none;
	}
}

/* First option: the button's own icon. In bubbles it's fitted into the
 * 48px circle; in pills it's left exactly as on the button. */
.wappgrowth-group--bubbles .wappgrowth-group__avatar--icon > *,
.wappgrowth-group--bubbles .wappgrowth-group__avatar--icon svg,
.wappgrowth-group--bubbles .wappgrowth-group__avatar--icon img {
	max-width: 30px !important;
	max-height: 30px !important;
	width: 30px !important;
	height: 30px !important;
	object-fit: contain;
}

/* Status by time: the dot takes the color of the current status. */
.whatsgrowth-status-dot.wappgrowth-dot-status {
	background: var(--wappgrowth-dot-color, #25d366) !important;
	--wgw-status-dot-color: var(--wappgrowth-dot-color, #25d366);
}

/* ============================================================
 * Contador (número con límite) y fechas de llegada y salida
 * ============================================================ */
.whatsgrowth-form__field--counter .whatsgrowth-form__field-label,
.whatsgrowth-form__field--daterange .whatsgrowth-form__field-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #4b5563;
	margin: 0 0 8px;
	line-height: 1.3;
}

.whatsgrowth-counter {
	display: inline-flex;
	align-items: stretch;
	border: 1.5px solid #e5e7eb;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
}

.whatsgrowth-form__field .whatsgrowth-counter input {
	touch-action: manipulation;
	width: 56px;
	border: none;
	border-radius: 0;
	text-align: center;
	padding: 10px 4px;
	-moz-appearance: textfield;
	appearance: textfield;
}

.whatsgrowth-counter input::-webkit-outer-spin-button,
.whatsgrowth-counter input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.whatsgrowth-form__field .whatsgrowth-counter input:focus {
	box-shadow: none;
}

.whatsgrowth-counter:focus-within {
	border-color: var(--wgw-focus, var(--wgw-primary, #25d366));
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wgw-focus, var(--wgw-primary, #25d366)) 20%, transparent);
}

/* Los temas suelen pintar todos los <button> (fondo, borde, mayúsculas,
 * hover blanco…): aquí se fija el look del contador en todos sus estados. */
.whatsgrowth-counter .whatsgrowth-counter__btn,
.whatsgrowth-counter .whatsgrowth-counter__btn:focus {
	width: 44px !important;
	min-width: 0 !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	background: #f3f4f6 !important;
	color: #111827 !important;
	font-family: inherit !important;
	font-size: 18px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	/* Sin la espera de "doble toque para zoom": el número cambia al instante. */
	touch-action: manipulation;
	transition: background-color 0.15s ease;
}

.whatsgrowth-counter .whatsgrowth-counter__btn:hover,
.whatsgrowth-counter .whatsgrowth-counter__btn:active {
	background: #e5e7eb !important;
	color: #111827 !important;
}

.whatsgrowth-counter .whatsgrowth-counter__btn:focus-visible {
	outline: 2px solid var(--wgw-focus, var(--wgw-primary, #25d366)) !important;
	outline-offset: -2px;
}

.whatsgrowth-counter .whatsgrowth-counter__btn:disabled {
	background: #f9fafb !important;
	color: #d1d5db !important;
	cursor: default;
}

/* En celular el hover se queda "pegado" después de tocar: ahí no se usa. */
@media (hover: none) {
	.whatsgrowth-counter .whatsgrowth-counter__btn:hover {
		background: #f3f4f6 !important;
	}
	.whatsgrowth-counter .whatsgrowth-counter__btn:disabled:hover {
		background: #f9fafb !important;
	}
}

.whatsgrowth-daterange {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 12px;
}

.whatsgrowth-daterange__part {
	display: block;
	min-width: 0;
}

/* iOS le da al input de fecha un ancho mínimo propio y centra el texto:
 * sin esto, la segunda fecha se salía del panel y lo desbordaba. */
.whatsgrowth-form__field .whatsgrowth-daterange input[type="date"] {
	display: block;
	width: 100%;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
	padding: 11px 10px;
	font-size: 14px;
	text-align: left;
	min-height: 44px;
}

.whatsgrowth-daterange input[type="date"]::-webkit-date-and-time-value {
	text-align: left;
}

/* Muy angosto: una fecha debajo de la otra. */
@media (max-width: 340px) {
	.whatsgrowth-daterange {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Red de seguridad: nada dentro del form ensancha el panel. */
.whatsgrowth-form__field {
	min-width: 0;
	max-width: 100%;
}

.whatsgrowth-daterange__caption {
	display: block;
	font-size: 12px;
	color: #6b7280;
	margin-bottom: 4px;
}


/* Badge "⚡ WappGrowth": debajo del botón, sin ocupar lugar. Con el panel
 * abierto el botón se oculta, así que se pega al borde del lado del widget
 * (antes quedaba centrado en un punto del borde y se salía de la pantalla). */
.wappgrowth-badge {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 3px;
	white-space: nowrap;
	font-size: 10px;
	line-height: 1;
	color: #8a8a8a !important;
	text-decoration: none !important;
	opacity: 0.85;
}

.whatsgrowth-floating.is-open .wappgrowth-badge,
.whatsgrowth-floating.is-closing .wappgrowth-badge {
	left: auto;
	right: 0;
	transform: none;
}

.whatsgrowth-floating--left.is-open .wappgrowth-badge,
.whatsgrowth-floating--left.is-closing .wappgrowth-badge {
	left: 0;
	right: auto;
}


/* Color del encabezado mientras se ve el aviso de cierre. */
.whatsgrowth-floating__panel-header.is-leave-header {
	background: var(--wgw-leave-header) !important;
}

/* Encabezado propio de la pantalla de agradecimiento. */
.whatsgrowth-floating__panel-header.is-thanks.has-thanks-color {
	background: var(--wgw-thanks-header) !important;
}

/* ============================================================
 * Aviso al cerrar con el formulario a medias
 * ============================================================ */
.whatsgrowth-leave {
	padding: 26px 20px 20px;
	text-align: center;
	background: var(--wgw-leave-bg, transparent);
	animation: whatsgrowth-panel-in 0.22s ease-out;
}

.whatsgrowth-leave[hidden] {
	display: none !important;
}

.whatsgrowth-leave__title {
	margin: 0 0 8px !important;
	font-size: 17px;
	font-weight: 700;
	color: var(--wgw-leave-title-color, #111827);
}

.whatsgrowth-leave__text {
	margin: 0 0 18px !important;
	font-size: 14px;
	line-height: 1.45;
	color: #4b5563;
}

.whatsgrowth-leave .whatsgrowth-leave__stay,
.whatsgrowth-leave .whatsgrowth-leave__exit {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	border-radius: 10px !important;
	font-family: inherit !important;
	font-size: 15px !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	cursor: pointer;
	touch-action: manipulation;
	box-sizing: border-box;
}

.whatsgrowth-leave .whatsgrowth-leave__stay {
	padding: 13px 16px !important;
	border: none !important;
	background: var(--wgw-leave-stay, var(--wgw-button-bg, var(--wgw-gradient, var(--wgw-button, var(--wgw-primary, #25d366))))) !important;
	color: var(--wgw-leave-stay-text, #fff) !important;
	font-weight: 700 !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.whatsgrowth-leave .whatsgrowth-leave__stay {
	position: relative;
}

/* Efectos en "Seguir llenando": igual que en el botón de enviar, en una
 * capa por detrás del botón (el aviso crea su propio contexto). */
.whatsgrowth-leave {
	isolation: isolate;
}

.whatsgrowth-leave--stay-outline .whatsgrowth-leave__stay {
	background: transparent !important;
	border: 2px solid var(--wgw-leave-stay, var(--wgw-button, var(--wgw-primary, #25d366))) !important;
	color: var(--wgw-leave-stay, var(--wgw-button, var(--wgw-primary, #25d366))) !important;
	box-shadow: none;
}

/* Modo rápido: el título del panel cambia al aviso con un pequeño
 * "empujón" para que se note. */
@keyframes whatsgrowth-header-nudge {
	0%, 100% { transform: translateX(0); }
	20% { transform: translateX(-4px); }
	40% { transform: translateX(4px); }
	60% { transform: translateX(-2px); }
	80% { transform: translateX(2px); }
}

.whatsgrowth-floating__panel-header.is-leave-warning [data-wgw-header-title],
.whatsgrowth-floating__panel-header.is-leave-warning #wgw-preview-panel-title {
	display: inline-block;
	animation: whatsgrowth-header-nudge 0.45s ease-in-out;
}

.whatsgrowth-leave .whatsgrowth-leave__exit {
	margin-top: 8px !important;
	padding: 10px 16px !important;
	border: none !important;
	background: transparent !important;
	color: var(--wgw-leave-exit, #6b7280) !important;
	font-weight: 500 !important;
	box-shadow: none !important;
}

.whatsgrowth-leave .whatsgrowth-leave__exit:hover {
	color: #111827 !important;
}


/* iPhone hace zoom a toda la página si un campo tiene letra de menos de
 * 16 px. En pantallas táctiles los campos usan 16 px: sin zoom al abrir el
 * panel, al tocar un campo o al regresar del aviso de cierre. */
@media (hover: none) and (pointer: coarse) {
	.whatsgrowth-form__field input,
	.whatsgrowth-form__field select,
	.whatsgrowth-form__field textarea,
	.whatsgrowth-form__field .whatsgrowth-daterange input[type="date"] {
		font-size: 16px !important;
	}
}


/* ============================================================
 * Efectos de carita (Carita, Gatito, Perrito)
 * ============================================================ */
.wgw-face .wgw-face__eye {
	transform-box: fill-box;
	transform-origin: center;
}

.wgw-face .wgw-face__eyes {
	/* Casi sin retraso: la mirada sigue al cursor en tiempo real. */
	transition: transform 0.03s linear;
}

/* Perrito: la lengua se mueve sola (si la carita tiene alguna animación). */
.wgw-face .wgw-face__tongue {
	transform-box: fill-box;
	transform-origin: 50% 0;
}

.wgw-face--blink .wgw-face__tongue,
.wgw-face--follow .wgw-face__tongue {
	animation: wgw-face-tongue 0.9s ease-in-out infinite;
}

@keyframes wgw-face-tongue {
	0%, 100% { transform: rotate(-7deg) scaleY(1); }
	50% { transform: rotate(7deg) scaleY(1.08); }
}

/* Perrito: "sonreír" es ladrar: dos brinquitos rápidos con la boca abierta. */
.wgw-face--dog.wgw-face--blink .wgw-face__body {
	animation-name: wgw-face-bark;
}

@keyframes wgw-face-bark {
	0%, 50%, 88%, 100% { transform: translateY(0); }
	54% { transform: translateY(-2.2px); }
	58% { transform: translateY(0); }
	64% { transform: translateY(-2.2px); }
	68% { transform: translateY(0); }
}

.wgw-face .wgw-face__mouth--b {
	opacity: 0;
}

/* Parpadea y sonríe, con un saltito mientras sonríe. */
.wgw-face--blink .wgw-face__eye {
	animation: wgw-face-blink 4s infinite;
}

.wgw-face--blink .wgw-face__body {
	animation: wgw-face-hop 4s infinite;
}

@keyframes wgw-face-hop {
	0%, 50%, 88%, 100% { transform: translateY(0); }
	56% { transform: translateY(-1.8px); }
	62% { transform: translateY(0); }
	68% { transform: translateY(-1.1px); }
	74% { transform: translateY(0); }
}

.wgw-face--blink .wgw-face__mouth--a {
	animation: wgw-face-mouth-a 4s infinite;
}

.wgw-face--blink .wgw-face__mouth--b {
	animation: wgw-face-mouth-b 4s infinite;
}

/* Solo sigue el cursor (sin "parpadea y sonríe"): parpadea de vez en cuando. */
.wgw-face--follow:not(.wgw-face--blink) .wgw-face__eye {
	animation: wgw-face-blink 5s infinite;
}

@keyframes wgw-face-blink {
	0%, 42%, 48%, 100% { transform: scaleY(1); }
	45% { transform: scaleY(0.12); }
}

@keyframes wgw-face-mouth-a {
	0%, 48% { opacity: 1; }
	53%, 86% { opacity: 0; }
	91%, 100% { opacity: 1; }
}

@keyframes wgw-face-mouth-b {
	0%, 48% { opacity: 0; }
	53%, 86% { opacity: 1; }
	91%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.wgw-face .wgw-face__eye,
	.wgw-face .wgw-face__body,
	.wgw-face .wgw-face__tongue,
	.wgw-face .wgw-face__mouth--a,
	.wgw-face .wgw-face__mouth--b {
		animation: none !important;
	}
}

/* Tarjetas del editor: la carita sobre el punto verde. */
.wgw-effect-preview--face,
.wgw-effect-preview--cat,
.wgw-effect-preview--dog,
.wgw-effect-preview--robot {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
}


/* ============================================================
 * Pestaña lateral: pegada al borde; al pasar el mouse (o con el
 * primer toque en celular) se estira y muestra el nombre.
 * ============================================================ */
.whatsgrowth-floating--tab {
	right: 0 !important;
}

.whatsgrowth-floating--tab.whatsgrowth-floating--left {
	left: 0 !important;
	right: auto !important;
}

.whatsgrowth-floating--tab .whatsgrowth-floating__panel {
	margin-right: 14px;
}

.whatsgrowth-floating--tab.whatsgrowth-floating--left .whatsgrowth-floating__panel {
	margin-right: 0;
	margin-left: 14px;
}

.whatsgrowth-floating--tab .whatsgrowth-greeting-bubble {
	margin-right: 12px;
}

.whatsgrowth-floating__toggle.whatsgrowth-floating__toggle--tab {
	--wgw-tab-r: min(var(--wgw-pill-radius, 25px), calc(var(--wgw-btn-size, 58px) / 2));
	height: var(--wgw-btn-size, 58px) !important;
	min-width: 0 !important;
	border-radius: var(--wgw-tab-r) 0 0 var(--wgw-tab-r) !important;
	padding: 0 14px 0 calc((var(--wgw-btn-size, 58px) - var(--wgw-icon-w, 32px)) / 2) !important;
	gap: 0 !important;
	justify-content: flex-start !important;
	transition: padding 0.3s cubic-bezier(0.22, 1, 0.36, 1), gap 0.3s ease, box-shadow 0.2s ease;
}

.whatsgrowth-floating--left .whatsgrowth-floating__toggle.whatsgrowth-floating__toggle--tab {
	border-radius: 0 var(--wgw-tab-r) var(--wgw-tab-r) 0 !important;
	padding: 0 calc((var(--wgw-btn-size, 58px) - var(--wgw-icon-w, 32px)) / 2) 0 14px !important;
	flex-direction: row-reverse;
}

.whatsgrowth-floating__toggle--tab .whatsgrowth-floating__toggle-label {
	display: inline-block;
	max-width: 0;
	opacity: 0;
	overflow: hidden;
	white-space: nowrap;
	transition: max-width 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
}

.whatsgrowth-floating__toggle--tab.is-expanded,
.whatsgrowth-floating__toggle--tab:focus-visible {
	gap: 10px !important;
	padding-right: 20px !important;
}

.whatsgrowth-floating__toggle--tab.is-expanded .whatsgrowth-floating__toggle-label,
.whatsgrowth-floating__toggle--tab:focus-visible .whatsgrowth-floating__toggle-label {
	max-width: 240px;
	opacity: 1;
}

@media (hover: hover) {
	.whatsgrowth-floating__toggle--tab:hover {
		gap: 10px !important;
		padding-right: 20px !important;
	}
	.whatsgrowth-floating__toggle--tab:hover .whatsgrowth-floating__toggle-label {
		max-width: 240px;
		opacity: 1;
	}
	.whatsgrowth-floating--left .whatsgrowth-floating__toggle--tab:hover {
		padding-left: 20px !important;
		padding-right: calc((var(--wgw-btn-size, 58px) - var(--wgw-icon-w, 32px)) / 2) !important;
	}
}

.whatsgrowth-floating--left .whatsgrowth-floating__toggle--tab.is-expanded {
	padding-left: 20px !important;
	padding-right: calc((var(--wgw-btn-size, 58px) - var(--wgw-icon-w, 32px)) / 2) !important;
}

/* Varias pestañas (enlaces apilados): una debajo de otra, siempre a la
 * vista, cada una se estira por su cuenta. */
.whatsgrowth-floating--tab .wappgrowth-group--pills .wappgrowth-group__items {
	align-items: flex-end;
	gap: 8px;
}

.whatsgrowth-floating--tab.whatsgrowth-floating--left .wappgrowth-group--pills .wappgrowth-group__items {
	align-items: flex-start;
}

.whatsgrowth-floating--tab .wappgrowth-group--pills .wappgrowth-group__item {
	--wgw-icon-w: 26px;
	transform: none !important;
	margin-top: 0 !important;
	min-width: 0 !important;
}

.whatsgrowth-floating--tab.whatsgrowth-floating--left .wappgrowth-group--pills .wappgrowth-group__item {
	flex-direction: row;
}

@media (prefers-reduced-motion: reduce) {
	.whatsgrowth-floating__toggle--tab,
	.whatsgrowth-floating__toggle--tab .whatsgrowth-floating__toggle-label {
		transition: none;
	}
}


/* Píldoras siempre separadas (Enlaces → "Mantenerlas compactas" apagado). */
.wappgrowth-group--spread.wappgrowth-group--pills .wappgrowth-group__item {
	transform: none !important;
}

.wappgrowth-group--spread.wappgrowth-group--pills .wappgrowth-group__item:not([hidden]) ~ .wappgrowth-group__item {
	margin-top: 8px !important;
}

/* Mazo compacto: en las píldoras de atrás el texto sube un poco para
 * leerse en la parte que asoma; al separarse vuelve a su lugar. */
.wappgrowth-group--pills:not(.wappgrowth-group--spread) .wappgrowth-group__item .wappgrowth-group__text {
	transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.wappgrowth-group--pills:not(.wappgrowth-group--spread) .wappgrowth-group__item .wappgrowth-group__avatar {
	transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.whatsgrowth-floating:not(.whatsgrowth-floating--tab):not(.is-spread) .wappgrowth-group--pills:not(.wappgrowth-group--spread) .wappgrowth-group__item:not(:last-child) .wappgrowth-group__text,
.whatsgrowth-floating:not(.whatsgrowth-floating--tab):not(.is-spread) .wappgrowth-group--pills:not(.wappgrowth-group--spread) .wappgrowth-group__item:not(:last-child) .wappgrowth-group__avatar {
	transform: translateY(calc(var(--wgw-btn-size, 58px) * -0.11));
}

@media (hover: hover) {
	.wappgrowth-group--pills .wappgrowth-group__items:hover .wappgrowth-group__item .wappgrowth-group__text,
	.wappgrowth-group--pills .wappgrowth-group__items:focus-within .wappgrowth-group__item .wappgrowth-group__text,
	.wappgrowth-group--pills .wappgrowth-group__items:hover .wappgrowth-group__item .wappgrowth-group__avatar,
	.wappgrowth-group--pills .wappgrowth-group__items:focus-within .wappgrowth-group__item .wappgrowth-group__avatar {
		transform: none !important;
	}
}

/* Pestañas casi pegadas. */
.whatsgrowth-floating--tab .wappgrowth-group--tight .wappgrowth-group__items {
	gap: 2px;
}


/* Píldoras apiladas + "encoger a círculo": al bajar con scroll se ve solo
 * el botón principal encogido; al detenerse o subir vuelven las píldoras. */
.whatsgrowth-floating.has-stack-pills.is-shrunk-stack .wappgrowth-group {
	display: none !important;
}

.whatsgrowth-floating.has-stack-pills.is-shrunk-stack .whatsgrowth-toggle-wrap {
	display: inline-flex !important;
}

/* Pestañas apiladas: todas del mismo tamaño (el ícono principal ya no la hace más ancha). */
.whatsgrowth-floating--tab .wappgrowth-group__avatar svg,
.whatsgrowth-floating--tab .wappgrowth-group__avatar img,
.whatsgrowth-floating--tab .wappgrowth-group__avatar dotlottie-wc,
.whatsgrowth-floating--tab .wappgrowth-group__avatar .wgw-face {
	width: 26px !important;
	height: 26px !important;
}

.whatsgrowth-floating--tab .wappgrowth-group__avatar span:not(.wgw-face) {
	font-size: 22px !important;
	line-height: 26px;
}