.zbl-form-wrap {
	max-width: 400px;
	margin: 2rem auto;
	padding: 1.75rem 1.5rem;
	background: #fcedee;
	border: 1px solid #d9a9a0;
	border-radius: 16px;
	box-sizing: border-box;
}

.zbl-form-title {
	margin: 0 0 1.25rem;
	font-size: 1.05rem;
	font-weight: 700;
	text-align: center;
	color: #26150f;
}

/* Honeypot: fuera de la pantalla visible, pero presente en el DOM para los bots. */
.zbl-hp-wrap {
	position: absolute;
	left: -9999px;
	top: -9999px;
	height: 0;
	width: 0;
	overflow: hidden;
}

.zbl-field {
	margin: 0 0 1rem;
}

.zbl-field label {
	display: block;
	font-weight: 600;
	font-size: 0.9rem;
	margin-bottom: 0.35rem;
	color: #26150f;
}

.zbl-field input {
	width: 100%;
	padding: 0.65rem 0.85rem;
	border: 1px solid #ddd;
	border-radius: 8px;
	box-sizing: border-box;
	font-size: 0.95rem;
	background: #fff;
}

.zbl-field input::placeholder {
	color: #a3a3a3;
}

.zbl-field input:focus {
	outline: none;
	border-color: #e0335f;
	box-shadow: 0 0 0 3px rgba(224, 51, 95, 0.15);
}

.zbl-form-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	width: 100%;
	margin-top: 0.5rem;
	padding: 0.85rem 1.5rem;
	border: 0;
	border-radius: 999px;
	background: #e0335f;
	color: #fff;
	font-weight: 700;
	font-size: 0.95rem;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.zbl-form-submit:hover:not(:disabled) {
	background: #c22b52;
	color: #fff !important;
}

.zbl-form-submit:disabled {
	opacity: 0.85;
	cursor: not-allowed;
}

/* Spinner: solo visible mientras el botón tiene la clase is-loading. */
.zbl-form-spinner {
	display: none;
	width: 16px;
	height: 16px;
	flex: none;
	border: 2px solid rgba(255, 255, 255, 0.45);
	border-top-color: #fff;
	border-radius: 50%;
	animation: zbl-spin 0.7s linear infinite;
}

.zbl-form-submit.is-loading .zbl-form-spinner {
	display: inline-block;
}

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

/* Aviso de espera: la function del CRM puede tardar varios segundos en responder. */
.zbl-form-hint {
	display: none;
	margin: 0.5rem 0 0;
	font-size: 0.8rem;
	text-align: center;
	color: #8a5b60;
}

.zbl-form.is-submitting .zbl-form-hint {
	display: block;
}

/* Mensaje de éxito/error con estilo de tarjeta, a juego con el formulario. */
.zbl-form-msg {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0.9rem 0 0;
	padding: 0.7rem 0.9rem;
	border-radius: 10px;
	font-size: 0.88rem;
	font-weight: 600;
	text-align: left;
}

.zbl-form-msg[hidden] {
	display: none;
}

.zbl-form-msg-icon {
	flex: none;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: #fff;
	font-size: 0.8rem;
	line-height: 1;
}

.zbl-form-msg.zbl-msg-success {
	background: #e8f6ec;
	border: 1px solid #b8e3c4;
	color: #1a7d3a;
}

.zbl-form-msg.zbl-msg-success .zbl-form-msg-icon {
	background: #2fa84f;
}

.zbl-form-msg.zbl-msg-error {
	background: #fbe9eb;
	border: 1px solid #f0b9c1;
	color: #a8203c;
}

.zbl-form-msg.zbl-msg-error .zbl-form-msg-icon {
	background: #d6425f;
}

/* En escritorio .zbl-modal-bar no hace nada visualmente: el botón flota tal cual, en su
   esquina de siempre. En móvil (ver media query más abajo) se convierte en la barra fija. */
.zbl-modal-bar {
	display: contents;
}

/* Color provisional (negro) a la espera de definir el color final del botón flotante. */
.zbl-modal-trigger {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 9999;
	padding: 0.85rem 1.5rem;
	border: 0;
	border-radius: 999px;
	background: #111111;
	color: #fff;
	font-weight: 700;
	font-size: 0.95rem;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.zbl-modal-trigger:hover {
	background: #000000;
	color: #fff !important;
	animation-play-state: paused;
}

/* Aviso de atención tipo "llamada": un doble pulso rápido cada ~25s, para que el botón
   no pase desapercibido sin ser una animación continua molesta. Pausado al pasar el ratón. */
@keyframes zbl-cta-attention {
	0%, 92%, 100% {
		transform: scale(1);
	}
	93% {
		transform: scale(1.12);
	}
	94% {
		transform: scale(1);
	}
	95% {
		transform: scale(1.12);
	}
	96% {
		transform: scale(1);
	}
}

.zbl-modal-trigger {
	animation: zbl-cta-attention 25s ease-in-out infinite;
}

/* Móvil: barra fija de ancho completo abajo, con el botón centrado dentro, en vez del
   botón flotando suelto en la esquina (patrón típico de CTA fijo en móvil). Sin la
   animación de atención: en una barra a ancho completo, un scale() se ve raro/recortado. */
@media (max-width: 600px) {
	.zbl-modal-bar {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9999;
		justify-content: center;
		padding: 0.6rem 1rem;
		background: #fff;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
	}

	.zbl-modal-trigger {
		position: static;
		width: 100%;
		max-width: 420px;
		box-shadow: none;
		animation: none;
	}
}

/* Evita que el "scroll to top" de Astra se solape con el botón/barra de arriba. Este CSS
   solo se carga en las páginas donde se usa [zbl_form_boton], así que no afecta al resto
   del sitio. */
body .ast-scroll-top {
	bottom: 5.5rem !important;
}

@media (max-width: 600px) {
	body .ast-scroll-top {
		bottom: 6.5rem !important;
	}
}

.zbl-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: rgba(20, 10, 10, 0.55);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.zbl-modal-overlay[hidden] {
	display: none;
}

.zbl-modal-overlay.is-open {
	opacity: 1;
	pointer-events: auto;
}

.zbl-modal-card {
	position: relative;
	width: 100%;
	max-width: 400px;
	max-height: 90vh;
	overflow-y: auto;
	transform: translateY(12px) scale(0.98);
	transition: transform 0.2s ease;
}

.zbl-modal-overlay.is-open .zbl-modal-card {
	transform: translateY(0) scale(1);
}

.zbl-modal-card .zbl-form-wrap {
	margin: 0;
	padding-top: 2.75rem;
}

.zbl-modal-close {
	position: absolute;
	top: 0.6rem;
	right: 0.6rem;
	z-index: 2;
	box-sizing: border-box;
	width: 32px !important;
	height: 32px !important;
	min-width: 32px;
	margin: 0;
	padding: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.06);
	color: #26150f !important;
	font-size: 1.35rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.zbl-modal-close:hover {
	background: rgba(0, 0, 0, 0.12);
	color: #26150f !important;
}