/**
 * Pantallas del embudo: selector de personas (paso 2) y planes (paso 3).
 *
 * Los colores salen de variables para poder retematizar sin tocar las reglas.
 *
 * Todas las declaraciones llevan !important a propósito: estas pantallas viven
 * dentro de plantillas de Elementor, cuyos estilos base de botones, enlaces,
 * títulos y listas ganan por especificidad. Las variables del bloque de abajo
 * son la excepción, así se puede seguir retematizando desde fuera sin pelear.
 */

:root {
	--aqs-blue: #0075c9;
	--aqs-blue-dark: #002e7d;
	--aqs-blue-light: #e8f4fc;
	--aqs-cyan: #00a6e7;
	--aqs-pink-dark: #EB235A;
	--aqs-border: #AEAEAE;
	--aqs-muted: #686868;
	--aqs-surface: #ffffff;
	--aqs-black: #000000;
	--aqs-green: #35ca6c;
	--aqs-radius: 8px;
	--aqs-radius-summary: 10px;
	--aqs-plans-gap: 16px;
	--aqs-badge-height: 22px;
	--aqs-badge-gap: 8px;
	--aqs-radio-top: 2px;
	--aqs-radio-right: 4px;
	--aqs-radio-size: 18px;
	/* Padding de la tarjeta de resumen. El botón lo compensa con margen
	   negativo para sobresalir a los lados, así que van juntos. */
	--aqs-summary-padding: 24px;
	/* X 4, Y 4, blur 6, spread 0, #000000 al 26%. */
	--aqs-summary-shadow: 4px 4px 6px 0 rgba(0, 0, 0, 0.26);
}

.aqs-step-button {
	display: inline-block !important;
	padding: 14px 32px !important;
	border: 0 !important;
	border-radius: var(--aqs-radius-summary) !important;
	background-color: var(--aqs-pink-dark) !important;
	background-image: none !important;
	color: #fff !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	text-align: center !important;
	text-decoration: none !important;
	transition: background-color 0.2s ease !important;
}

.aqs-step-button:hover,
.aqs-step-button:focus {
	background-color: var(--aqs-pink-dark) !important;
	color: #fff !important;
}

.aqs-step-button[aria-disabled="true"] {
	opacity: 0.45 !important;
	cursor: not-allowed !important;
}

/* -------------------------------------------------------------------------
 * Paso 2: personas
 * ------------------------------------------------------------------------- */
.aqs-personas__options {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 12px !important;
	margin-bottom: 32px !important;
}

.aqs-personas__option {
	flex: 0 1 auto !important;
	min-width: 126px !important;
	padding: 12px 8px !important;
	border: 1px solid var(--aqs-border) !important;
	border-radius: var(--aqs-radius) !important;
	background-color: var(--aqs-surface) !important;
	background-image: none !important;
	color: var(--aqs-blue-dark) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	cursor: pointer !important;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}

.aqs-personas__option:hover {
	border-color: var(--aqs-blue) !important;
}

.aqs-personas__option.is-selected {
	border-color: var(--aqs-blue-dark) !important;
	background-color: var(--aqs-blue-dark) !important;
	color: #fff !important;
}

.aqs-personas__next {
	min-width: 260px !important;
}

/* -------------------------------------------------------------------------
 * Paso 3: planes + resumen
 * ------------------------------------------------------------------------- */

.aqs-plans__title {
	margin: 0 0 8px !important;
	color: var(--aqs-blue-dark) !important;
}

.aqs-plans__subtitle {
	margin: 0 0 24px !important;
	color: var(--aqs-blue) !important;
}

.aqs-plan-saving {
	color: var(--aqs-cyan) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
}

.aqs-plans__list {
	display: flex !important;
	flex-direction: column !important;
	gap: var(--aqs-plans-gap) !important;
}

.aqs-plans__item {
	position: relative !important;
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, auto) auto !important;
	align-items: center !important;
	gap: 16px !important;
	margin: 0 !important;
	padding: 24px 15px 24px 15px !important;
	border: 1px solid var(--aqs-border) !important;
	border-radius: var(--aqs-radius) !important;
	background-color: var(--aqs-surface) !important;
	cursor: pointer !important;
	transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

.aqs-plans__item.is-selected {
	background-color: var(--aqs-blue-light) !important;
}

.aqs-plans__details {
	display: none !important;
}

.aqs-plans__badge {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	padding: 3px 10px !important;
	border-radius: var(--aqs-radius) !important;
	background-color: var(--aqs-cyan) !important;
	color: #fff !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	transform: translateY(calc(-100% - var(--aqs-badge-gap))) !important;
}

.aqs-plans__item.is-recommended {
	margin-top: max(
		0px,
		calc(var(--aqs-badge-height) + var(--aqs-badge-gap) * 2 - var(--aqs-plans-gap))
	) !important;
}

.aqs-plans__item:has(.aqs-plans__radio:focus-visible) {
	outline: 2px solid var(--aqs-blue-dark) !important;
	outline-offset: 2px !important;
}

.aqs-plans__radio {
	position: absolute !important;
	top: var(--aqs-radio-top) !important;
	right: var(--aqs-radio-right) !important;
	z-index: 1 !important;
	width: var(--aqs-radio-size) !important;
	height: var(--aqs-radio-size) !important;
	margin: 0 !important;
	opacity: 0 !important;
	cursor: pointer !important;
}

.aqs-plans__icon {
	position: absolute !important;
	top: var(--aqs-radio-top) !important;
	right: var(--aqs-radio-right) !important;
	width: var(--aqs-radio-size) !important;
	color: var(--aqs-blue-dark) !important;
	font-size: var(--aqs-radio-size) !important;
	line-height: 1 !important;
	text-align: center !important;
}

.aqs-plans__item.is-selected .aqs-plans__icon {
	color: var(--aqs-blue-dark) !important;
}

.aqs-plans__name {
	margin: 0 !important;
	color: var(--aqs-blue-dark) !important;
	font-size: 20px !important;
	font-weight: 700 !important;
}

.aqs-plans__detail {
	color: var(--aqs-black) !important;
	font-size: 15px !important;
}

.aqs-plans__detail i {
	font-size: 10px !important;
	color: var(--aqs-blue-dark) !important;
}

.aqs-plans__detail strong {
	font-weight: 400 !important;
}

.aqs-plans__price {
	color: var(--aqs-blue-dark) !important;
	font-size: 17px !important;
	font-weight: 500 !important;
	white-space: nowrap !important;
}

.aqs-plans__price-old {
	color: var(--aqs-muted) !important;
	font-weight: 400 !important;
	text-decoration: line-through !important;
}

.aqs-plans__mobile {
	box-sizing: border-box !important;
	padding: 10px !important;
	border-radius: var(--aqs-radius) !important;
	background-color: #f5f7fa !important;
}

.aqs-field-has-state {
	position: relative !important;
	--aqs-field-state-top: 50%;
}

.aqs-field-state {
	position: absolute !important;
	top: var(--aqs-field-state-top) !important;
	right: 15px !important;
	font-size: 14px !important;
	line-height: 1 !important;
	transform: translateY(-50%) !important;
}

#form-field-postcode + .aqs-field-state--ok {
	color: var(--aqs-cyan) !important;
}

.aqs-field-state--ko {
	color: var(--aqs-pink-dark) !important;
}

/* Código promocional ------------------------------------------------------ */
.aqs-coupon__label {
	margin: 0 0 8px !important;
	color: var(--aqs-blue-dark) !important;
	font-size: 14px !important;
}

.aqs-coupon__form {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 8px !important;
}

/* El campo es el contexto de posicionamiento de los iconos de estado. */
.aqs-coupon__field {
	position: relative !important;
	flex: 1 1 160px !important;
	min-width: 0 !important;
}

.aqs-coupon__input {
	box-sizing: border-box !important;
	width: 100% !important;
	/* Hueco a la derecha para el icono de estado. */
	padding: 12px 40px 12px 14px !important;
	border: 1px solid var(--aqs-border) !important;
	border-radius: var(--aqs-radius) !important;
	background-color: var(--aqs-surface) !important;
	color: var(--aqs-blue-dark) !important;
	font-size: 15px !important;
}

.aqs-coupon.is-valid .aqs-coupon__input {
	border-color: var(--aqs-green) !important;
}

.aqs-coupon.is-invalid .aqs-coupon__input {
	border-color: var(--aqs-pink-dark) !important;
}

/**
 * Los dos iconos están siempre en el marcado y es la clase del contenedor la que
 * decide cuál se ve. Así no hay que tocar estilos en línea desde el JS ni queda
 * un estado intermedio con los dos visibles.
 */
.aqs-coupon__state {
	position: absolute !important;
	top: 50% !important;
	right: 14px !important;
	display: none !important;
	font-size: 14px !important;
	line-height: 1 !important;
	transform: translateY(-50%) !important;
}

.aqs-coupon.is-valid .aqs-coupon__state--ok {
	display: block !important;
	color: var(--aqs-green) !important;
}

.aqs-coupon.is-invalid .aqs-coupon__state--ko {
	display: block !important;
	color: var(--aqs-pink-dark) !important;
}

.aqs-coupon__button {
	flex: 0 0 auto !important;
	padding: 12px 24px !important;
	border: 1px solid var(--aqs-blue-dark) !important;
	border-radius: var(--aqs-radius) !important;
	background-color: var(--aqs-surface) !important;
	background-image: none !important;
	color: var(--aqs-blue-dark) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	transition: background-color 0.15s ease, color 0.15s ease !important;
}

.aqs-coupon__button:hover:not([disabled]) {
	background-color: var(--aqs-blue-dark) !important;
	color: #fff !important;
}

.aqs-coupon__button[disabled] {
	opacity: 0.5 !important;
	cursor: default !important;
}

.aqs-coupon__message {
	margin: 8px 0 0 !important;
	color: var(--aqs-green) !important;
	font-size: 13px !important;
}

.aqs-coupon__message.is-error {
	color: var(--aqs-pink-dark) !important;
}

/* Resumen ---------------------------------------------------------------- */

.aqs-plans__mobile .aqs-plans__includes-title {
	font-size: 18px !important;
	margin-bottom: 10px !important;
}

.aqs-plans__mobile .aqs-plans__includes {
	margin-bottom: 0 !important;
}

.aqs-plans__mobile li {
  margin-bottom: 0px !important;
}

.aqs-plans__summary {
	position: sticky !important;
	top: 24px !important;
	box-sizing: border-box !important;
	padding: var(--aqs-summary-padding) var(--aqs-summary-padding) 0 !important;
	border-radius: var(--aqs-radius-summary) !important;
	background-color: #f5f7fa !important;
	box-shadow: var(--aqs-summary-shadow) !important;
	overflow: hidden !important;
}

/* Espera durante el pago: el mismo atenuado que Elementor aplica al formulario.
   Los `pointer-events` evitan un segundo envío desde el botón. */
.aqs-plans__summary.is-waiting {
	opacity: 0.45 !important;
	pointer-events: none !important;
}

.aqs-plans__summary-title {
	margin: 0 0 16px !important;
	padding-bottom: 16px !important;
	border-bottom: 1px solid var(--aqs-border) !important;
	color: var(--aqs-blue-dark) !important;
	font-size: 20px !important;
}

.aqs-plans__panel-head {
	display: flex !important;
	align-items: center !important;
	gap: 16px !important;
	margin-bottom: 24px !important;
}

/* Destacada del producto, al lado de la de la variación. */
.aqs-plans__product-image {
	flex: 0 0 auto !important;
	width: 84px !important;
	height: auto !important;
	border-radius: var(--aqs-radius) !important;
}

.aqs-plans__panel-image {
	width: 84px !important;
	height: auto !important;
	border-radius: var(--aqs-radius) !important;
}

.aqs-plans__panel-name {
	margin: 0 !important;
	color: var(--aqs-blue-dark) !important;
	font-size: 20px !important;
	font-weight: 700 !important;
}

.aqs-plans__includes-title {
	margin: 0 0 12px !important;
	color: var(--aqs-blue-dark) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
}

.aqs-plans__includes {
	margin: 0 0 24px !important;
	padding: 0 !important;
	list-style: none !important;
}

.aqs-plans__includes > li {
	display: flex !important;
	align-items: baseline !important;
	gap: 10px !important;
	margin-bottom: 10px !important;
	color: var(--aqs-blue-dark) !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
}

.aqs-plans__includes > li > i {
	flex: 0 0 auto !important;
	color: var(--aqs-green) !important;
	font-size: 10px !important;
}

.aqs-plans__total {
	display: flex !important;
	align-items: baseline !important;
	justify-content: space-between !important;
	gap: 16px !important;
	padding-top: 16px !important;
	border-top: 1px solid var(--aqs-border) !important;
}

.aqs-plans__total-label {
	color: var(--aqs-blue-dark) !important;
	font-size: 18px !important;
	font-weight: 700 !important;
}

.aqs-plans__total-label small {
	display: block !important;
	color: var(--aqs-blue-dark) !important;
	font-size: 12px !important;
	font-weight: 400 !important;
}

.aqs-plans__total-price {
	color: var(--aqs-blue-dark) !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	white-space: nowrap !important;
}

.aqs-plans__next {
	display: block !important;
	box-sizing: border-box !important;
	width: calc(100% + var(--aqs-summary-padding) * 2) !important;
	margin: var(--aqs-summary-padding) calc(var(--aqs-summary-padding) * -1) 0 !important;
}

.aqs-plans__extra {
	margin-top: 24px !important;
	padding-top: 16px !important;
	border-top: 1px solid var(--aqs-border) !important;
	color: var(--aqs-muted) !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
}

.aqs-plans__extra > *:last-child {
	margin-bottom: 0 !important;
}

.aqs-plans__acceptance {
	display: flex !important;
	align-items: flex-start !important;
	gap: 10px !important;
	margin-top: 16px !important;
	color: var(--aqs-muted) !important;
	font-size: 13px !important;
	cursor: pointer !important;
}

.aqs-plans__acceptance-input {
	flex: 0 0 auto !important;
	width: 16px !important;
	height: 16px !important;
	margin: 2px 0 0 !important;
	accent-color: var(--aqs-blue-dark) !important;
	cursor: pointer !important;
}

/**
 * Casilla de aceptación original del formulario.
 *
 * Se oculta a la vista pero se deja en el árbol de foco: es `required`, y con
 * `display: none` el navegador no puede enfocarla para mostrar su mensaje de
 * validación, lo que bloquea el envío del formulario sin decir por qué.
 */
.aqs-acceptance-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
}

/* El botón lleva el marcado de botón de Elementor para poder ser el disparador
   del formulario en el paso 4. Se centra aquí en vez de depender de su CSS. */
.aqs-plans__next .elementor-button-content-wrapper {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.aqs-plans__next .aqs-plans__price-old {
	color: var(--aqs-surface) !important;
}

/* Responsive ------------------------------------------------------------- */
@media (max-width: 1024px) {
	.aqs-plans__summary {
		position: static !important;
	}
}

@media (max-width: 767px) {
	.aqs-plans__item {
		grid-template-columns: minmax(0, 1fr) auto !important;
		gap: 8px 12px !important;
		padding: 24px 15px 24px 15px !important;
	}

	.aqs-plans__name {
		grid-column: 1 / -1 !important;
	}

	.aqs-plans__price {
		justify-self: end !important;
	}

	.aqs-plans__item.is-selected .aqs-plans__icon {
		top: 15px !important;
		right: 15px !important;
	}

	.aqs-plans__summary {
		background-color: transparent !important;
		padding: 0px !important;
		box-shadow: none !important;
	}

	.aqs-plans__price {
		font-size: 20px !important;
	}

	.aqs-plans__summary-title {
		display: none !important;
	}

	.aqs-plans__summary .aqs-plans__panel {
		display: none !important;
	}

	.aqs-plans__next {
		width: 100% !important;
		margin: 0 !important;
		border-radius: var(--aqs-radius) !important;
	}

	.aqs-personas__option {
		flex: 1 1 0 !important;
		min-width: 0 !important;
	}

	.aqs-personas__next {
		display: block !important;
		min-width: 0 !important;
	}

	.aqs-plans__acceptance {
		margin-bottom: 24px !important;
	}

	.aqs-plan-saving {
		margin-bottom: 0px !important;
	}
	
	.aqs-plans__extra {
		margin-top: 0px !important;
		margin-bottom: 24px !important;
		padding-top: 0px !important;
		border-top: none !important;
	}
}