/**
 * Global CTA: tab lateral fijo (desktop) + píldora inferior fija (mobile).
 * El modal usa modal.css. Tokens desde theme.json.
 */

.ipx-global-cta *,
.ipx-global-cta *::before,
.ipx-global-cta *::after {
	box-sizing: border-box;
}

.ipx-global-cta__icon {
	display: inline-flex;
	line-height: 0;
}
.ipx-global-cta__icon svg { display: block; }

/* <button> no hereda la fuente por defecto (sin reset global en el tema). */
.ipx-global-cta__tab,
.ipx-global-cta__pill,
.ipx-header__cta {
	font-family: var(--wp--preset--font-family--montserrat);
}

/* ---------- Tab lateral (desktop) ---------- */
.ipx-global-cta--desktop {
	display: none;
}
@media (min-width: 768px) {
	.ipx-global-cta--desktop {
		display: block;
		position: fixed;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
		z-index: 50;
	}
	.ipx-global-cta__tab {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 0.5rem;
		max-width: 220px;
		padding: 0.5rem 1.25rem 0.5rem 0.75rem;
		font-size: 0.875rem;
		font-weight: 600;
		line-height: 1.15;
		text-align: left;
		color: var(--wp--preset--color--white);
		background: var(--wp--preset--color--ipla-lightblue);
		border: 1px solid var(--wp--preset--color--white);
		border-right: 0;
		border-radius: 0.5rem 0 0 0.5rem;
		cursor: pointer;
		transition: background-color 0.1s ease-in, color 0.1s ease-in, transform 0.1s ease-in;
	}
	.ipx-global-cta__tab:hover {
		background: var(--wp--preset--color--white);
		color: var(--wp--preset--color--ipla-blue);
		transform: translateX(-4px);
	}
}

/* ---------- Píldora inferior (mobile) ---------- */
.ipx-global-cta--bottom {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 50;
	display: flex;
	justify-content: center;
	width: 100%;
	padding: 1.25rem 1rem 1rem;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
	pointer-events: none;
}
@media (min-width: 768px) {
	.ipx-global-cta--bottom { display: none; }
}
.ipx-global-cta__pill {
	pointer-events: auto;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1.25rem;
	font-size: 0.875rem;
	font-weight: 600;
	white-space: nowrap;
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--ipla-lightblue);
	border: 1px solid var(--wp--preset--color--white);
	border-radius: 9999px;
	box-shadow: 0 4px 12px rgba(6, 6, 49, 0.3);
	cursor: pointer;
	transition: background-color 0.1s ease-in, color 0.1s ease-in;
}
.ipx-global-cta__pill:hover {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ipla-blue);
}

/* ---------- Botón del header mobile (gemelo, vive en .ipx-header) ---------- */
.ipx-header__cta {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.5rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--ipla-lightblue);
	border: 1px solid var(--wp--preset--color--white);
	border-radius: 0.5rem;
	cursor: pointer;
}
@media (min-width: 768px) {
	.ipx-header__cta { display: none; }
}

/* El form HubSpot dentro del modal. */
.ipx-global-cta__form { min-height: 320px; }