/* Paleta corporativa de inesem (revistadigital), tomada de wp-content/themes/hueman-child/css/header.css:
   #192B5D = azul marino principal (mismo color que .btn-blue-1 / secciones destacadas del theme)
   #54C9D6 = celeste de acento (mismo color que .btn-blue-2 / estados hover)
   Los colores de éxito/error (#32d296 / #f0506e) son los mismos que usa el theme para sus
   propios avisos (ver header.css), para que el mensaje del formulario no desentone. */

.zbl-form-wrap {
	max-width: 400px;
	margin: 2rem auto;
	padding: 1.75rem 1.5rem;
	background: #f4f6fb;
	border: 1px solid rgba(25, 43, 93, 0.18);
	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: #54C9D6;
	box-shadow: 0 0 0 3px rgba(84, 201, 214, 0.25);
}

/* Botón primario del theme (.btn-blue-1): fondo azul marino, texto blanco, borde a juego
   para que el hover (blanco/azul marino, igual que el resto del sitio) no se quede sin borde. */
.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: 1.5px solid #192B5D;
	border-radius: 999px;
	background: #192B5D;
	color: #fff;
	font-weight: 700;
	font-size: 0.95rem;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.zbl-form-submit:hover:not(:disabled) {
	background: #fff;
	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.25);
	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: rgba(25, 43, 93, 0.65);
}

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

/* Mensaje de éxito/error con estilo de tarjeta, mismos colores que usa el theme para sus
   propios avisos (header.css: éxito #32d296/#edfbf6, error #f0506e/#fef4f6). */
.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: #edfbf6;
	border: 1px solid #32d296;
	color: #1a7d3a;
}

.zbl-form-msg.zbl-msg-success .zbl-form-msg-icon {
	background: #32d296;
}

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

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

/* 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;
}

/* Botón flotante en el color corporativo principal (azul marino); hover al celeste de
   acento del theme, igual que los estados hover de sus propios botones .btn-blue-*. */
.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: #192B5D;
	color: #fff;
	font-weight: 700;
	font-size: 0.95rem;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(25, 43, 93, 0.35);
	transition: background-color 0.15s ease;
}

.zbl-modal-trigger:hover {
	background: #54C9D6;
	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(25, 43, 93, 0.2);
	}

	.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. En hueman-child (theme actual de este sitio) no existe .ast-scroll-top, así
   que esta regla simplemente no hace nada aquí — se deja por si el plugin se reutiliza en
   otra instalación con Astra (ver INSTRUCCIONES.md). */
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(25, 43, 93, 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(25, 43, 93, 0.08);
	color: #192B5D !important;
	font-size: 1.35rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.zbl-modal-close:hover {
	background: rgba(25, 43, 93, 0.16);
	color: #192B5D !important;
}