.zbl-form-wrap {
	max-width: 400px;
	margin: 2rem auto;
	padding: 1.75rem 1.5rem;
	background: #f5fafb;
	border: 1px solid #cdeef2;
	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: #192b5d;
}

/* 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: #192b5d;
}

.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: #192b5d;
	box-shadow: 0 0 0 3px rgba(84, 201, 214, 0.25);
}

/* Select (país) — solo lo pinta la variante 'landing', ver form-template.php */
.zbl-field select {
	width: 100%;
	padding: 0.65rem 0.85rem;
	border: 1px solid #ddd;
	border-radius: 8px;
	box-sizing: border-box;
	font-size: 0.95rem;
	background: #fff;
	cursor: pointer;
}

.zbl-field select:focus {
	outline: none;
	border-color: #192b5d;
	box-shadow: 0 0 0 3px rgba(84, 201, 214, 0.25);
}

/* Radio "¿Quieres recibir información comercial?" (solo variante 'landing') */
.zbl-field--radio-group {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	flex-wrap: wrap;
}

.zbl-field--radio-group-label {
	flex: 1 1 100%;
	font-weight: 600;
	font-size: 0.9rem;
	margin-bottom: 0.15rem;
	color: #192b5d;
}

.zbl-radio {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.9rem;
	font-weight: 400;
	cursor: pointer;
}

.zbl-radio input {
	accent-color: #192b5d;
}

/* Checkbox de política de privacidad (solo variante 'landing') */
.zbl-field--checkbox {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 0 0 1rem;
}

.zbl-field--checkbox input {
	width: 18px;
	height: 18px;
	min-width: 18px;
	margin-top: 2px;
	accent-color: #192b5d;
	cursor: pointer;
}

.zbl-field--checkbox label {
	font-size: 0.8rem;
	font-weight: 400;
	color: #5b5f66;
	line-height: 1.4;
}

.zbl-field--checkbox a {
	color: #192b5d;
	text-decoration: underline;
}

.zbl-form-fineprint {
	text-align: center;
	font-size: 0.72rem;
	color: #8a8d91;
	margin: 1.1rem 0 0;
}

/* Modo debug (?debug=1): overlay a pantalla completa con los payloads exactos
   que se habrían enviado, ver form.js renderDebugOverlay(). */
.zbl-debug-overlay {
	position: fixed;
	inset: 0;
	z-index: 999999;
	background: #101216;
	color: #d7dadf;
	overflow-y: auto;
	padding: 1.5rem;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

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

.zbl-debug-overlay__header {
	position: sticky;
	top: -1.5rem;
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	margin: -1.5rem -1.5rem 1.5rem;
	padding: 1.5rem;
	background: #101216;
	border-bottom: 1px solid #2c2f36;
	z-index: 1;
}

.zbl-debug-overlay__back {
	flex: none;
	background: #192b5d;
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 0.55rem 1.1rem;
	font-size: 0.85rem;
	font-family: inherit;
	cursor: pointer;
}

.zbl-debug-overlay__back:hover {
	background: #0f1d45;
}

.zbl-debug-overlay__title {
	font-size: 0.85rem;
	color: #6fd88a;
}

.zbl-debug-overlay__section {
	max-width: 900px;
	margin: 0 0 1.75rem;
}

.zbl-debug-overlay__section h3 {
	font-size: 0.8rem;
	color: #9aa0a8;
	margin: 0 0 0.5rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.zbl-debug-overlay__section pre {
	background: #1c1c1e;
	border: 1px dashed #6fd88a;
	border-radius: 8px;
	padding: 1rem;
	font-size: 0.8rem;
	line-height: 1.5;
	white-space: pre-wrap;
	word-break: break-word;
	margin: 0;
	color: #6fd88a;
}

/* Panel de éxito (solo variante 'landing') — sustituye al <form> tras un envío
   correcto, ver assets/js/form.js. */
.zbl-success {
	position: relative;
	padding: 8px 6px 4px;
	text-align: center;
}

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

.zbl-success-close {
	position: absolute;
	top: -8px;
	right: -8px;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.06);
	color: #192b5d;
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.zbl-success-close:hover {
	background: rgba(0, 0, 0, 0.12);
}

.zbl-success-icon {
	width: 64px;
	height: 64px;
	margin: 4px auto 16px;
	display: block;
}

.zbl-success-title {
	margin: 0 0 10px;
	font-size: 1.15rem;
	font-weight: 700;
	color: #192b5d;
}

.zbl-success-text {
	margin: 0 0 22px;
	font-size: 0.88rem;
	color: #5b5f66;
	line-height: 1.5;
}

.zbl-success-accept {
	display: block;
	width: 100%;
	padding: 0.85rem 1.5rem;
	border: 0;
	border-radius: 999px;
	background: #ffae0c;
	color: #192b5d;
	font-weight: 700;
	font-size: 0.95rem;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.zbl-success-accept:hover {
	background: #f29f00;
}

.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: #ffae0c;
	color: #192b5d;
	font-weight: 700;
	font-size: 0.95rem;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.zbl-form-submit:hover:not(:disabled) {
	background: #f29f00;
	color: #192b5d !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(25, 43, 93, 0.3);
	border-top-color: #192b5d;
	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: #5b6a8a;
}

.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: #192b5d !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: #192b5d !important;
}