/**
 * Configurador de cursos — Academia Guiu.
 * Estilos neutros, pensados para heredar la tipografía del tema.
 */

/* Colores tomados del kit de Elementor del sitio, con valor de reserva por si
   el kit cambia de identificadores. En :root y no en .ag-configurador porque
   el plugin pinta cosas fuera de ese contenedor (carrito y checkout).

	 6bc7e01 → #1D2448  azul marino de la marca
	 9411226 → #FE8A5C  coral de la marca
	 8d20bcb → #4A4A4A  texto
	 text    → #7A7A7A  texto secundario                                    */
:root {
	--ag-azul: var( --e-global-color-6bc7e01, #1D2448 );
	--ag-acento: var( --e-global-color-9411226, #FE8A5C );
	--ag-texto: var( --e-global-color-8d20bcb, #4A4A4A );
	--ag-texto-suave: var( --e-global-color-text, #7A7A7A );
	--ag-borde: #e2e5eb;
}

/* Todo el plugin hereda la tipografía del tema; no impone ninguna propia. */
.ag-configurador,
.ag-chips,
.ag-chip {
	font-family: inherit;
}

.ag-configurador {
	margin: 0 0 1.75rem;
}

.ag-bloque {
	border: 0;
	margin: 0 0 1.75rem;
	padding: 0;
}

.ag-titulo {
	color: var( --ag-azul );
	font-size: 1.05rem;
	font-weight: 600;
	margin: 0 0 .3rem;
	padding: 0;
}

.ag-ayuda {
	color: var( --ag-texto-suave );
	font-size: .875rem;
	margin: 0 0 .9rem;
}

.ag-asignaturas {
	display: grid;
	gap: .5rem;
	grid-template-columns: repeat( auto-fill, minmax( 210px, 1fr ) );
}

.ag-opciones {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.ag-opciones-modo {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) );
}

/* Opciones ---------------------------------------------------------------- */

.ag-check,
.ag-radio {
	align-items: center;
	background: #fff;
	border: 1px solid var( --ag-borde );
	border-radius: 8px;
	cursor: pointer;
	display: flex;
	gap: .65rem;
	line-height: 1.35;
	padding: .75rem .9rem;
	transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

/* `display: flex` gana al atributo hidden, así que sin esto una asignatura
   oculta por no impartirse en el turno elegido se seguiría viendo. */
.ag-check[hidden],
.ag-radio[hidden] {
	display: none !important;
}

.ag-check:hover,
.ag-radio:hover {
	border-color: #aeb6c2;
}

.ag-check:has( input:checked ),
.ag-radio:has( input:checked ) {
	border-color: var( --ag-acento );
}

.ag-check input,
.ag-radio input {
	accent-color: var( --ag-acento );
	flex: 0 0 auto;
	margin: 0;
}

.ag-radio-ancho span {
	display: flex;
	flex-direction: column;
	gap: .1rem;
}

.ag-radio-ancho small {
	color: var( --ag-texto-suave );
	font-size: .8rem;
	line-height: 1.3;
}

.ag-select {
	border: 1px solid var( --ag-borde );
	border-radius: 8px;
	max-width: 320px;
	padding: .7rem .8rem;
	width: 100%;
}

/* Contador de asignaturas ------------------------------------------------- */

.ag-contador {
	color: var( --ag-texto-suave );
	font-size: .85rem;
	margin: .8rem 0 0;
}

.ag-contador-activo {
	color: var( --ag-acento );
	font-weight: 600;
}

/* Total ------------------------------------------------------------------- */

.ag-total {
	border-top: 1px solid var( --ag-borde );
	margin: 0 0 1.35rem;
	padding: 1.15rem 0 0;
}

.ag-total-etiqueta {
	color: var( --ag-texto-suave );
	display: block;
	font-size: .8rem;
	margin-bottom: .1rem;
}

.ag-total-cifra {
	color: var( --ag-azul );
	font-size: 2.15rem;
	font-weight: 700;
	line-height: 1.1;
}

.ag-total-cifra .woocommerce-Price-amount {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
}

.ag-total-desglose {
	color: var( --ag-texto );
	font-size: .9rem;
	list-style: none;
	margin: .7rem 0 0;
	padding: 0;
}

.ag-total-desglose li + li {
	margin-top: .2rem;
}

.ag-pendiente {
	color: var( --ag-texto-suave );
	font-size: .875rem;
	margin: .7rem 0 0;
}

.ag-aviso {
	color: #b42318;
	font-size: .9rem;
	margin: .6rem 0 0;
}

.ag-cargando .ag-total-cifra {
	opacity: .4;
	transition: opacity .12s ease;
}

/* Botones de compra ------------------------------------------------------- */

/* Un botón bloqueado no lleva color de marca atenuado: se pinta en gris neutro
   para que se lea de un vistazo que todavía no se puede pulsar. El !important
   es necesario porque tanto WooCommerce como el kit de Elementor definen el
   color de fondo de los botones con más peso que una clase suelta. */
.woocommerce div.product form.cart button.ag-deshabilitado,
.woocommerce button.button.ag-deshabilitado,
button.ag-deshabilitado.ag-deshabilitado,
.single_add_to_cart_button.ag-deshabilitado {
	background-color: #eceef1 !important;
	background-image: none !important;
	border-color: #e0e3e8 !important;
	box-shadow: none !important;
	color: #a2a8b4 !important;
	cursor: not-allowed;
	opacity: 1;
}

/* Asignaturas en carrito, checkout y pedido -------------------------------- */

/* El carrito de bloques pinta los datos de línea en una sola fila separados
   por barras («4 asignaturas: … / Incluye: …»). Aquí cada dato va en su
   propia línea y se anulan los separadores. */
.wc-block-components-product-details {
	list-style: none;
	margin: .6rem 0 0;
	padding: 0;
}

.wc-block-components-product-details li {
	display: block;
	margin: 0 0 .5rem;
	padding: 0;
}

.wc-block-components-product-details li:last-child {
	margin-bottom: 0;
}

.wc-block-components-product-details::before,
.wc-block-components-product-details::after,
.wc-block-components-product-details *::before,
.wc-block-components-product-details *::after {
	content: none !important;
}

.wc-block-components-product-details__name,
.woocommerce-cart .variation dt,
.woocommerce-checkout .variation dt {
	color: var( --ag-texto-suave );
	display: block !important;
	font-size: .78rem;
	font-weight: 400;
	letter-spacing: .02em;
	margin: 0 0 .3rem;
	opacity: 1;
	text-transform: uppercase;
}

.wc-block-components-product-details__value {
	color: var( --ag-texto );
	display: block !important;
}

/* Las asignaturas, como etiquetas ---------------------------------------- */

.ag-chips {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem;
}

.ag-chip {
	background: var( --ag-acento );
	border: 0;
	border-radius: 4px;
	color: #fff;
	display: inline-block;
	font-size: .82rem;
	font-weight: 500;
	line-height: 1.5;
	padding: .22rem .6rem;
	white-space: nowrap;
}

/* WooCommerce envuelve los datos de línea en <p>, que aquí sobra. */
.ag-chips p,
dd:has( .ag-chips ) p {
	margin: 0;
}

/* Avisos de WooCommerce ---------------------------------------------------- */

/* El aviso «se ha añadido a tu carrito» salía a todo el ancho de la ventana,
   con el texto saliéndose por la izquierda y el botón pegado al borde. Se
   limita al ancho del contenido y se coloca en dos columnas que se apilan en
   móvil, para que no se corte nunca. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	align-items: center;
	background: #f7f8fa;
	border: 1px solid var( --ag-borde );
	border-radius: 6px;
	box-sizing: border-box;
	color: var( --ag-texto );
	display: flex;
	flex-wrap: wrap;
	font-size: .95rem;
	gap: .75rem 1rem;
	justify-content: space-between;
	line-height: 1.45;
	margin: 0 auto 1.5rem;
	max-width: 1140px;
	padding: .95rem 1.15rem;
	width: 100%;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	display: none;
}

.woocommerce-error {
	background: #fdf4f3;
	border-color: #f0cfcb;
	color: #8a2b22;
}

/* El enlace «Ver carrito» va a la derecha y no se parte en dos líneas. */
.woocommerce-message .button,
.woocommerce-info .button {
	background-color: var( --ag-azul ) !important;
	border: 0 !important;
	border-radius: 4px !important;
	color: #fff !important;
	flex: 0 0 auto;
	float: none !important;
	font-size: .9rem !important;
	margin: 0 !important;
	order: 2;
	padding: .55rem 1.1rem !important;
	white-space: nowrap;
}

/* Que el texto pueda encoger sin desbordarse. */
.woocommerce-message,
.woocommerce-info {
	overflow-wrap: anywhere;
}

@media ( max-width: 600px ) {
	.woocommerce-message,
	.woocommerce-info,
	.woocommerce-error {
		align-items: stretch;
		flex-direction: column;
	}

	.woocommerce-message .button,
	.woocommerce-info .button {
		text-align: center;
	}
}

/* Barra fija del carrito --------------------------------------------------- */

/* El contenedor se imprime siempre para que WooCommerce pueda reemplazarlo por
   AJAX; queda vacío cuando no hay nada en el carrito y entonces no se ve. */
#ag-barra-carrito:empty {
	display: none;
}

.ag-barra {
	background: #fff;
	border-top: 1px solid var( --ag-borde );
	bottom: 0;
	box-shadow: 0 -2px 12px rgba( 29, 36, 72, .08 );
	left: 0;
	position: fixed;
	right: 0;
	z-index: 9990;
}

.ag-barra-interior {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: .75rem 1.5rem;
	justify-content: space-between;
	margin: 0 auto;
	max-width: 1140px;
	padding: .8rem 1.25rem;
}

/* El resumen es el botón que despliega el detalle. El tema pinta los <button>
   con su propio color de marca, así que aquí se fuerza el azul. */
/* Coral de la marca con texto en blanco, por decisión de diseño. */
.ag-barra button.ag-barra-datos,
button.ag-barra-datos.ag-barra-datos {
	background-color: var( --ag-acento ) !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 5px;
	box-shadow: none !important;
	color: #fff !important;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: .1rem;
	line-height: 1.3;
	min-width: 0;
	padding: .55rem 1rem !important;
	text-align: left;
	transition: background-color .15s ease;
}

.ag-barra button.ag-barra-datos:hover,
button.ag-barra-datos.ag-barra-datos:hover {
	background-color: #f57840 !important;
}

.ag-barra-concepto {
	align-items: center;
	color: #fff;
	display: flex;
	font-size: .8rem;
	gap: .35rem;
	opacity: .9;
}

.ag-barra-flecha {
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-bottom: 5px solid #fff;
	display: inline-block;
	transition: transform .18s ease;
}

.ag-abierto .ag-barra-flecha {
	transform: rotate( 180deg );
}

/* Panel desplegable ------------------------------------------------------- */

.ag-panel {
	border-bottom: 1px solid var( --ag-borde );
	max-height: min( 55vh, 420px );
	overflow-y: auto;
}

.ag-panel-interior {
	margin: 0 auto;
	max-width: 1140px;
	padding: 1rem 1.25rem .5rem;
}

.ag-panel-titulo {
	color: var( --ag-texto-suave );
	font-size: .78rem;
	letter-spacing: .02em;
	margin: 0 0 .6rem;
	text-transform: uppercase;
}

.ag-panel-lineas {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ag-panel-linea {
	align-items: center;
	border-top: 1px solid var( --ag-borde );
	display: flex;
	gap: 1rem;
	padding: .75rem 0;
}

.ag-panel-linea:first-child {
	border-top: 0;
}

.ag-panel-info {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	flex: 1 1 auto;
	min-width: 0;
}

.ag-panel-curso {
	color: var( --ag-azul );
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}

.ag-panel-curso:hover {
	color: var( --ag-azul );
	text-decoration: underline;
}

.ag-panel-detalle {
	color: var( --ag-texto-suave );
	font-size: .82rem;
	line-height: 1.35;
}

.ag-panel-precio {
	color: var( --ag-azul );
	flex: 0 0 auto;
	font-weight: 600;
	white-space: nowrap;
}

/* También lleva !important: el tema colorea todos los <button>. */
.ag-panel button.ag-panel-quitar,
button.ag-panel-quitar.ag-panel-quitar {
	background-color: transparent !important;
	background-image: none !important;
	border: 1px solid var( --ag-borde ) !important;
	border-radius: 4px;
	box-shadow: none !important;
	color: var( --ag-texto-suave ) !important;
	cursor: pointer;
	flex: 0 0 auto;
	font-size: 1.15rem;
	line-height: 1;
	padding: .25rem .5rem !important;
	transition: border-color .15s ease, color .15s ease;
}

.ag-panel button.ag-panel-quitar:hover,
button.ag-panel-quitar.ag-panel-quitar:hover {
	border-color: #c9584c !important;
	color: #c9584c !important;
}

.ag-panel-quitar.ag-quitando {
	cursor: wait;
	opacity: .5;
}

.ag-barra-total {
	color: #fff;
	font-size: 1.3rem;
	font-weight: 700;
}

.ag-barra-total .woocommerce-Price-amount {
	color: inherit;
	font-size: inherit;
	font-weight: inherit;
}

.ag-barra-acciones {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
}

.ag-barra-secundario,
.ag-barra-principal {
	border-radius: 4px;
	display: inline-block;
	font-size: .92rem;
	font-weight: 600;
	padding: .65rem 1.25rem;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease;
	white-space: nowrap;
}

/* Los dos botones son enlaces, y el kit de Elementor pinta TODOS los enlaces
   con `.elementor-kit-771 a { color: … }`. Ese selector pesa más que una clase
   suelta, así que se llevaba por delante el blanco del botón principal y lo
   dejaba azul marino sobre azul marino: invisible.

   Por eso los selectores llevan aquí el ancestro y el elemento: para ganar sin
   recurrir a !important. Si algún día se toca el kit, esto sigue funcionando. */

.ag-barra a.ag-barra-secundario {
	background-color: #fff;
	border: 1px solid var( --ag-borde );
	color: var( --ag-azul );
}

.ag-barra a.ag-barra-secundario:hover,
.ag-barra a.ag-barra-secundario:focus-visible {
	background-color: #fff;
	border-color: var( --ag-azul );
	color: var( --ag-azul );
}

.ag-barra a.ag-barra-principal {
	background-color: var( --ag-azul );
	border: 1px solid var( --ag-azul );
	color: #fff;
}

.ag-barra a.ag-barra-principal:hover,
.ag-barra a.ag-barra-principal:focus-visible {
	background-color: #131a35;
	border-color: #131a35;
	color: #fff;
}

/* Deja sitio al pie para que la barra no tape el último bloque. */
body:has( .ag-barra ) {
	padding-bottom: 5.5rem;
}

@media ( max-width: 600px ) {

	/* Todo en una línea. Antes las acciones ocupaban el 100% y caían a una
	   segunda fila, así que la barra robaba el doble de pantalla. */
	.ag-barra-interior {
		flex-wrap: nowrap;
		gap: .5rem;
		padding: .55rem .75rem;
	}

	.ag-barra button.ag-barra-datos,
	button.ag-barra-datos.ag-barra-datos {
		flex: 0 1 auto;
		min-width: 0;
		padding: .35rem .6rem;
	}

	.ag-barra-concepto {
		font-size: .7rem;
	}

	.ag-barra-total {
		font-size: 1.05rem;
	}

	.ag-barra-acciones {
		flex: 0 0 auto;
		flex-wrap: nowrap;
		gap: .4rem;
	}

	/* «Ver carrito» se cae en pantallas estrechas: no cabe con lo demás y su
	   función ya la cubre el panel, que despliega la selección con su precio y
	   el botón de quitar. Lo que no puede faltar es el paso a la inscripción. */
	.ag-barra a.ag-barra-secundario {
		display: none;
	}

	.ag-barra a.ag-barra-principal {
		font-size: .85rem;
		padding: .6rem .9rem;
		white-space: nowrap;
	}

	body:has( .ag-barra ) {
		padding-bottom: 5.5rem;
	}
}

/* Checkout por pasos ------------------------------------------------------- */

.ag-pasos-indicador {
	counter-reset: none;
	display: flex;
	gap: .5rem;
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
}

.ag-pasos-item {
	align-items: center;
	border-top: 3px solid var( --ag-borde );
	color: var( --ag-texto-suave );
	display: flex;
	flex: 1 1 0;
	gap: .5rem;
	padding: .7rem 0 0;
}

.ag-pasos-numero {
	align-items: center;
	background: var( --ag-borde );
	border-radius: 50%;
	color: #fff;
	display: flex;
	flex: 0 0 auto;
	font-size: .8rem;
	font-weight: 700;
	height: 1.55rem;
	justify-content: center;
	width: 1.55rem;
}

.ag-pasos-texto {
	font-size: .88rem;
	line-height: 1.3;
}

.ag-pasos-item.ag-activo {
	border-top-color: var( --ag-acento );
	color: var( --ag-azul );
}

.ag-pasos-item.ag-activo .ag-pasos-numero {
	background: var( --ag-acento );
}

.ag-pasos-item.ag-activo .ag-pasos-texto {
	font-weight: 600;
}

.ag-pasos-item.ag-hecho {
	border-top-color: var( --ag-azul );
	color: var( --ag-azul );
}

.ag-pasos-item.ag-hecho .ag-pasos-numero {
	background: var( --ag-azul );
}

/* Contenido de cada paso -------------------------------------------------- */

.ag-paso-titulo {
	color: var( --ag-azul );
	font-size: 1.15rem;
	margin: 0 0 .25rem;
}

.ag-paso-ayuda {
	color: var( --ag-texto-suave );
	font-size: .9rem;
	margin: 0 0 1.25rem;
}

/* Campo obligatorio sin rellenar al intentar avanzar. */
.form-row.ag-falta input,
.form-row.ag-falta select {
	border-color: #c9584c !important;
}

/* Botones de navegación --------------------------------------------------- */

.ag-paso-botones {
	display: flex;
	gap: .7rem;
	justify-content: flex-end;
	margin: 1.75rem 0 0;
}

.ag-paso-botones button {
	border-radius: 4px;
	cursor: pointer;
	font-size: .95rem;
	font-weight: 600;
	padding: .8rem 1.7rem;
}

.checkout button.ag-paso-siguiente,
button.ag-paso-siguiente.ag-paso-siguiente {
	background-color: var( --ag-azul ) !important;
	background-image: none !important;
	border: 1px solid var( --ag-azul ) !important;
	color: #fff !important;
}

.checkout button.ag-paso-siguiente:hover,
button.ag-paso-siguiente.ag-paso-siguiente:hover {
	background-color: #131a35 !important;
}

.checkout button.ag-paso-atras,
button.ag-paso-atras.ag-paso-atras {
	background-color: transparent !important;
	background-image: none !important;
	border: 1px solid var( --ag-borde ) !important;
	color: var( --ag-texto ) !important;
}

@media ( max-width: 600px ) {
	.ag-pasos-indicador {
		gap: .35rem;
	}

	.ag-pasos-texto {
		display: none;
	}

	.ag-paso-botones {
		flex-direction: column-reverse;
	}

	.ag-paso-botones button {
		width: 100%;
	}
}

/* Botón de las páginas de curso ------------------------------------------- */

.ag-cta {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: .85rem;
}

.ag-boton {
	background: var( --ag-acento, #FE8A5C );
	border-radius: 6px;
	color: #fff;
	display: inline-block;
	font-weight: 600;
	padding: .85rem 1.6rem;
	text-decoration: none;
	transition: filter .15s ease;
}

.ag-boton:hover {
	color: #fff;
	filter: brightness( .92 );
}

.ag-cta-precio {
	color: var( --ag-texto-suave );
	font-size: .9rem;
}

@media ( max-width: 600px ) {
	.ag-asignaturas,
	.ag-opciones-modo {
		grid-template-columns: 1fr;
	}

	.ag-total-cifra {
		font-size: 1.7rem;
	}
}


/* Un alumno por curso en el checkout -------------------------------------- */

/* WooCommerce maqueta sus campos con `float` (.form-row-first / -last). Al
   meterlos en un contenedor propio el flotado se escapa y descoloca lo que
   viene detrás: por eso el botón «Continuar» aparecía flotando en mitad del
   formulario. Aquí se anula el float y se usa una rejilla de dos columnas. */
.ag-alumno-campos {
	column-gap: 1.35rem;
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}

.ag-alumno-campos .form-row {
	float: none !important;
	margin: 0 0 1.15rem !important;
	padding: 0 !important;
	width: auto !important;
}

.ag-alumno-campos .form-row-wide,
.ag-alumno-curso {
	grid-column: 1 / -1;
}

.ag-alumno-campos label {
	display: block;
	font-size: .9rem;
	margin-bottom: .3rem;
}

.ag-alumno-campos .woocommerce-input-wrapper {
	display: block;
	width: 100%;
}

.ag-alumno-campos input,
.ag-alumno-campos select {
	box-sizing: border-box;
	width: 100%;
}

/* La ayuda del campo la pinta WooCommerce como bocadillo flotante y se
   solapaba con los campos de al lado. Aquí va como texto normal debajo. */
.ag-alumno-campos .description {
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var( --ag-texto-suave ) !important;
	display: block !important;
	font-size: .8rem;
	margin-top: .3rem;
	opacity: 1 !important;
	padding: 0 !important;
	position: static !important;
	width: auto !important;
}

.ag-alumno-campos .description::before,
.ag-alumno-campos .description::after {
	display: none !important;
}

.ag-alumno-campos + .ag-alumno-campos {
	border-top: 1px solid var( --ag-borde );
	margin-top: 1.6rem;
	padding-top: 1.6rem;
}

/* `display: grid` gana al atributo hidden, así que un bloque oculto seguiría
   viéndose. Pasa con los bloques de tutor, que nacen ocultos y solo aparecen
   cuando el alumno es menor. */
.ag-alumno-campos[hidden] {
	display: none !important;
}

/* -------------------------------------------------------- Consentimientos */

/* Fondo blanco y no gris: un bloque gris se lee como «desactivado» y estos
   permisos sí se pueden marcar. */
.ag-consentimientos {
	background: #fff;
	border: 1px solid var( --ag-borde );
	border-radius: 10px;
	margin: .35rem 0 1.5rem;
	padding: 1.15rem 1.25rem .35rem;
}

.ag-consentimientos-titulo {
	color: var( --ag-azul );
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 .25rem;
}

.ag-consentimientos-nota {
	color: var( --ag-texto-suave );
	font-size: .82rem;
	line-height: 1.5;
	margin: 0 0 .35rem;
	max-width: 60ch;
}

/* Cada permiso es una fila separada por una línea fina. Sin recuadros ni
   franjas de color: son permisos, no opciones que compitan entre sí. */
.ag-consentimiento {
	border-top: 1px solid #eef0f4;
	margin: 0 !important;
	padding: 0 !important;
}

/* WooCommerce envuelve la casilla en un span en línea; sin esto, la rejilla del
   label queda dentro de una caja en línea y el ancho no llega al 100 %. */
.ag-consentimiento .woocommerce-input-wrapper {
	display: block;
	width: 100%;
}

.ag-consentimiento label {
	align-items: flex-start;
	color: var( --ag-texto );
	cursor: pointer;
	display: grid !important;
	font-size: .9rem;
	font-weight: 400;
	gap: .7rem;
	grid-template-columns: auto 1fr;
	line-height: 1.5;
	margin: 0 !important;
	padding: .85rem .25rem;
	transition: color .15s ease;
}

.ag-consentimiento label:hover {
	color: var( --ag-azul );
}

/* El título ya dice que son opcionales y la nota lo repite: el «(opcional)»
   que WooCommerce añade a cada etiqueta sobra tres veces. */
.ag-consentimiento .optional {
	display: none;
}

/* Casilla propia: la del navegador sale azul de sistema y aquí desentona. */
.ag-consentimiento input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	background: #fff;
	border: 2px solid #c9cfda;
	border-radius: 5px;
	cursor: pointer;
	flex: none;
	height: 20px;
	margin: .1rem 0 0 !important;
	position: relative;
	transition: border-color .15s ease, background-color .15s ease;
	width: 20px !important;
}

.ag-consentimiento label:hover input[type="checkbox"] {
	border-color: var( --ag-acento );
}

.ag-consentimiento input[type="checkbox"]:checked {
	background: var( --ag-acento );
	border-color: var( --ag-acento );
}

/* La marca de verificación, dibujada con dos lados de un borde girado: sin
   imagen que cargar y nítida en cualquier pantalla. */
.ag-consentimiento input[type="checkbox"]:checked::after {
	border: solid #fff;
	border-width: 0 2px 2px 0;
	content: '';
	height: 9px;
	left: 5px;
	position: absolute;
	top: 2px;
	transform: rotate( 45deg );
	width: 5px;
}

.ag-consentimiento input[type="checkbox"]:focus-visible {
	outline: 2px solid var( --ag-azul );
	outline-offset: 2px;
}

/* ------------------------------------------------------------ Tutor legal */

/* El bloque del tutor se abre con el nombre del alumno al que acompaña, para
   que con dos hermanos se sepa de quién es cada juego de datos. */
.ag-tutor-de {
	color: var( --ag-acento );
	font-weight: 700;
}

.ag-tutor-de:empty {
	display: none;
}

.ag-alumno-curso {
	align-items: center;
	color: var( --ag-azul );
	display: flex;
	font-weight: 600;
	gap: .55rem;
	margin: 0 0 1rem;
}

.ag-alumno-numero {
	align-items: center;
	background: var( --ag-acento );
	border-radius: 50%;
	color: #fff;
	display: flex;
	flex: 0 0 auto;
	font-size: .8rem;
	height: 1.5rem;
	justify-content: center;
	width: 1.5rem;
}

/* Cada paso limpia sus propios flotados, para que los botones de navegación
   queden siempre debajo del contenido y no encima de él. */
.ag-paso-checkout::after {
	clear: both;
	content: '';
	display: table;
}

.ag-paso-botones {
	clear: both;
}

/* WooCommerce marca en rojo los campos obligatorios nada más cargar. Se deja
   el aviso solo para cuando el alumno ya ha intentado avanzar. */
.ag-paso-checkout .form-row.woocommerce-invalid:not( .ag-falta ) label,
.ag-paso-checkout .form-row.woocommerce-invalid:not( .ag-falta ) .required {
	color: inherit;
}

.ag-paso-checkout .form-row.woocommerce-invalid:not( .ag-falta ) input,
.ag-paso-checkout .form-row.woocommerce-validated input {
	border-color: var( --ag-borde );
}

.ag-paso-checkout .form-row.ag-falta label {
	color: #b42318;
}

@media ( max-width: 600px ) {
	.ag-alumno-campos {
		grid-template-columns: 1fr;
	}
}

/* Resumen del pedido en el checkout ---------------------------------------- */

.ag-resumen-linea {
	align-items: flex-start;
	display: flex;
	gap: .75rem;
}

.ag-resumen-linea .ag-resumen-foto,
.ag-resumen-linea img {
	border: 1px solid var( --ag-borde );
	border-radius: 4px;
	flex: 0 0 auto;
	height: auto;
	margin: 0;
	width: 56px;
}

.ag-resumen-nombre {
	color: var( --ag-azul );
	font-weight: 600;
	line-height: 1.35;
	min-width: 0;
}

/* Bloque de pago ----------------------------------------------------------- */

/* El tema lo pinta en morado, que no es de la academia. Se pasa al azul
   corporativo con un fondo apenas teñido para que no compita con el resumen. */
.woocommerce-checkout #payment,
.woocommerce-checkout ul.wc_payment_methods {
	background: #f6f8fb !important;
	border: 1px solid var( --ag-borde ) !important;
	border-radius: 8px;
}

.woocommerce-checkout #payment ul.payment_methods {
	border-bottom: 1px solid var( --ag-borde );
}

.woocommerce-checkout #payment div.payment_box {
	background: #fff !important;
	border: 1px solid var( --ag-borde );
	border-radius: 6px;
	color: var( --ag-texto ) !important;
}

/* WooCommerce dibuja un pico sobre la caja de descripción con el mismo color
   de fondo; al cambiarlo hay que cambiar el pico o se queda de otro color. */
.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: #fff !important;
}

.woocommerce-checkout #payment label {
	color: var( --ag-azul );
	font-weight: 600;
}

.woocommerce-checkout #payment input[type="radio"] {
	accent-color: var( --ag-acento );
}

/* Botón de confirmar el pedido -------------------------------------------- */

.woocommerce-checkout #payment #place_order,
button#place_order.button,
#place_order.ag-principal {
	background-color: var( --ag-azul ) !important;
	background-image: none !important;
	border: 1px solid var( --ag-azul ) !important;
	border-radius: 5px !important;
	color: #fff !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
	padding: .9rem 2rem !important;
}

.woocommerce-checkout #payment #place_order:hover,
button#place_order.button:hover {
	background-color: #131a35 !important;
	color: #fff !important;
}

/* Formularios de Contact Form 7 ------------------------------------------- */

/* Replica el formulario de academiaguiu.com: caja blanca, dos columnas, sin
   etiquetas encima (solo placeholders) y pie con el checkbox legal a la
   izquierda y el botón coral a la derecha. */

.ag-cf7 {
	background: #fff;
	box-sizing: border-box;
	margin: 0 auto;
	max-width: 1100px;
	padding: 2.25rem 2.5rem;
	width: 100%;
}

.ag-cf7-fila {
	column-gap: 1.5rem;
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	margin-bottom: 1.1rem;
}

.ag-cf7-ancha {
	grid-template-columns: 1fr;
}

/* CF7 envuelve cada campo en <span class="wpcf7-form-control-wrap">. */
.ag-cf7 .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

.ag-cf7 input[type="text"],
.ag-cf7 input[type="email"],
.ag-cf7 input[type="tel"],
.ag-cf7 select,
.ag-cf7 textarea {
	background: #fff;
	border: 1px solid var( --ag-azul );
	border-radius: 3px;
	box-sizing: border-box;
	color: var( --ag-texto );
	font-family: inherit;
	font-size: .95rem;
	padding: .85rem 1rem;
	width: 100%;
}

.ag-cf7 textarea {
	min-height: 190px;
	resize: vertical;
}

.ag-cf7 input::placeholder,
.ag-cf7 textarea::placeholder {
	color: #9aa1ad;
	opacity: 1;
}

.ag-cf7 input:focus,
.ag-cf7 select:focus,
.ag-cf7 textarea:focus {
	border-color: var( --ag-acento );
	outline: 0;
}

/* Pie: legal a la izquierda, botón a la derecha ---------------------------- */

.ag-cf7-pie {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
	margin-top: 1.6rem;
}

.ag-cf7-legal {
	color: var( --ag-texto );
	flex: 1 1 320px;
	font-size: .88rem;
	line-height: 1.4;
}

.ag-cf7-legal .wpcf7-list-item {
	margin: 0;
}

.ag-cf7-legal a {
	color: var( --ag-azul );
	text-decoration: underline;
}

.ag-cf7-legal input[type="checkbox"] {
	accent-color: var( --ag-acento );
	margin-right: .45rem;
	transform: translateY( 1px );
}

/* Botón coral redondeado, como el de su web. Lleva !important porque el tema
   y el kit de Elementor colorean todos los submit. */
.ag-cf7 input[type="submit"],
.ag-cf7 .wpcf7-submit,
input.wpcf7-submit.wpcf7-submit {
	background-color: var( --ag-acento ) !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 999px !important;
	color: #fff !important;
	cursor: pointer;
	font-size: 1rem !important;
	font-weight: 600 !important;
	min-width: 170px;
	padding: .85rem 2.2rem !important;
	transition: background-color .15s ease;
}

.ag-cf7 input[type="submit"]:hover,
input.wpcf7-submit.wpcf7-submit:hover {
	background-color: #f57840 !important;
}

/* Avisos de CF7 ----------------------------------------------------------- */

.ag-cf7 .wpcf7-not-valid-tip {
	color: #b42318;
	font-size: .82rem;
	margin-top: .3rem;
}

.ag-cf7 .wpcf7-not-valid {
	border-color: #b42318 !important;
}

.wpcf7 form .wpcf7-response-output {
	border-radius: 6px;
	border-width: 1px;
	font-size: .92rem;
	margin: 1.25rem 0 0;
	padding: .9rem 1.1rem;
}

.wpcf7 form.sent .wpcf7-response-output {
	background: #f2f9f4;
	border-color: #b7dcc2;
	color: #245c34;
}

@media ( max-width: 782px ) {
	.ag-cf7 {
		padding: 1.5rem 1.25rem;
	}

	.ag-cf7-fila {
		grid-template-columns: 1fr;
		margin-bottom: 0;
	}

	.ag-cf7-fila > * {
		margin-bottom: 1rem;
	}

	.ag-cf7-pie {
		flex-direction: column;
		align-items: stretch;
	}

	/* En horizontal, ese 320px de la casilla legal es un ancho mínimo y hace
	   que el botón caiga a la línea siguiente cuando no cabe. Al apilarse en
	   columna el eje cambia, y esos mismos 320px pasan a ser ALTO: dejaban un
	   hueco enorme entre la casilla y el botón. En vertical basta con que cada
	   uno ocupe lo suyo. */
	.ag-cf7-pie > .ag-cf7-legal,
	.ag-cf7-pie > .ag-cf7-boton {
		flex: 0 0 auto;
	}

	.ag-cf7 input[type="submit"] {
		width: 100%;
	}
}

/* Si algún día wpautop volviera a activarse en estos formularios, esto evita
   que la maquetación se rompa del todo: el <p> heredaría la rejilla y los <br>
   no separarían los campos. */
.ag-cf7-fila > p {
	display: contents;
	margin: 0;
}

.ag-cf7-fila br {
	display: none;
}

/* Checkout en móvil ------------------------------------------------------- */

@media ( max-width: 782px ) {

	/* Indicador de pasos: sin los títulos solo quedan tres números sueltos y
	   no se entiende dónde estás. Se deja el del paso actual. */
	.ag-pasos-indicador {
		gap: .5rem;
	}

	.ag-pasos-item.ag-activo .ag-pasos-texto {
		display: block;
		font-size: .82rem;
	}

	.ag-pasos-item {
		gap: .4rem;
		padding-top: .6rem;
	}

	.ag-pasos-numero {
		font-size: .75rem;
		height: 1.4rem;
		width: 1.4rem;
	}

	/* Resumen del pedido: la tabla de WooCommerce parte el nombre del curso
	   letra a letra en pantallas estrechas. Se convierte en bloques apilados. */
	.woocommerce-checkout-review-order-table,
	.woocommerce-checkout-review-order-table tbody,
	.woocommerce-checkout-review-order-table tfoot,
	.woocommerce-checkout-review-order-table tr,
	.woocommerce-checkout-review-order-table th,
	.woocommerce-checkout-review-order-table td {
		display: block;
		width: auto;
	}

	.woocommerce-checkout-review-order-table thead {
		display: none;
	}

	.woocommerce-checkout-review-order-table .cart_item {
		border-bottom: 1px solid var( --ag-borde );
		padding: .9rem 0;
	}

	.woocommerce-checkout-review-order-table .product-name {
		padding-bottom: .35rem !important;
	}

	.woocommerce-checkout-review-order-table .product-total {
		font-weight: 600;
		padding-top: 0 !important;
		text-align: left !important;
	}

	/* Subtotal y total en dos columnas, que son pares de dato y cifra. */
	.woocommerce-checkout-review-order-table tfoot tr {
		display: flex;
		justify-content: space-between;
		padding: .5rem 0;
	}

	.woocommerce-checkout-review-order-table tfoot th,
	.woocommerce-checkout-review-order-table tfoot td {
		padding: 0 !important;
		text-align: left !important;
	}

	.ag-resumen-linea {
		align-items: center;
	}

	/* Métodos de pago: el radio y su texto en la misma línea. */
	.woocommerce-checkout #payment ul.payment_methods li {
		align-items: flex-start;
		display: flex;
		flex-wrap: wrap;
		gap: .5rem;
		padding: .75rem .9rem;
	}

	.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] {
		flex: 0 0 auto;
		margin: .2rem 0 0;
	}

	.woocommerce-checkout #payment ul.payment_methods li label {
		flex: 1 1 auto;
		margin: 0;
	}

	.woocommerce-checkout #payment ul.payment_methods li img {
		max-height: 22px;
		width: auto;
	}

	.woocommerce-checkout #payment div.payment_box {
		flex: 1 1 100%;
		margin-top: .5rem;
	}

	/* El botón de pagar, a ancho completo: es la acción principal. */
	.woocommerce-checkout #payment #place_order {
		width: 100%;
	}
}

/* Migas de pan ------------------------------------------------------------- */

/* Van dentro de la cabecera, sobre la foto oscura, así que van en blanco.
   El color se pone con el ancestro por delante (`.ag-migas a`) porque el kit
   de Elementor pinta TODOS los enlaces con `.elementor-kit-771 a`, que pesa
   más que una clase suelta: sin eso, las migas salían en azul marino. */

.ag-migas-envoltorio {
	margin-top: .5rem;
}

.ag-migas-lista {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: .3rem .5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ag-migas,
.ag-migas .ag-migas-paso {
	color: #fff;
}

.ag-migas-paso {
	font-size: .82rem;
	line-height: 1.4;
	margin: 0;
	opacity: .85;
}

.ag-migas-paso + .ag-migas-paso::before {
	content: '›';
	display: inline-block;
	margin-right: .5rem;
	opacity: .6;
}

.ag-migas .ag-migas-paso a,
.ag-migas a.ag-migas-enlace {
	color: #fff;
	text-decoration: none;
}

.ag-migas .ag-migas-paso a:hover,
.ag-migas .ag-migas-paso a:focus-visible {
	color: #fff;
	text-decoration: underline;
}

.ag-migas-actual {
	font-weight: 600;
	opacity: 1;
}

@media ( max-width: 782px ) {

	.ag-migas-paso {
		font-size: .78rem;
	}
}

/* Carrito vacío ------------------------------------------------------------ */

/* El estado vacío venía sin salida: una carita triste, un separador de puntos y
   los cuatro productos más recientes. Ahora explica qué hacer y ofrece por
   dónde seguir. */

.wc-block-cart__empty-cart__title {
	color: var( --ag-azul );
	font-size: 1.6rem;
	font-weight: 700;
	margin-bottom: .6rem;
}

.ag-carrito-vacio-texto {
	color: var( --ag-texto );
	margin: 0 auto 1.8rem;
	max-width: 46ch;
}

.ag-carrito-vacio-botones {
	margin-bottom: 3.5rem;
}

.ag-carrito-vacio-botones .wp-block-button__link {
	border-radius: 5px;
	font-size: .95rem;
	font-weight: 600;
	padding: .85rem 1.5rem;
}

.ag-boton-principal .wp-block-button__link {
	background-color: var( --ag-azul );
	color: #fff;
}

.ag-boton-principal .wp-block-button__link:hover {
	background-color: #131a35;
	color: #fff;
}

.ag-boton-secundario .wp-block-button__link {
	background-color: transparent;
	border: 1px solid var( --ag-borde );
	color: var( --ag-azul );
}

.ag-boton-secundario .wp-block-button__link:hover {
	border-color: var( --ag-azul );
	color: var( --ag-azul );
}

.ag-carrito-vacio-sugerencias {
	color: var( --ag-azul );
	font-size: 1.15rem;
	font-weight: 700;
	margin-bottom: 1.6rem;
}

/* Los «Añadir al carrito» de las sugerencias salían descoloridos.
   Sin el ancestro `.wp-block-woocommerce-empty-cart-block`: Elementor pinta el
   bloque desde su propio widget y esa clase no llega al HTML, así que un
   selector que dependiera de ella no casaba nunca. */
.wc-block-grid__product-add-to-cart .wp-block-button__link,
.wc-block-grid__product-add-to-cart a.add_to_cart_button {
	background-color: var( --ag-acento );
	border-radius: 5px;
	color: #fff;
	font-size: .88rem;
	font-weight: 600;
	opacity: 1;
	padding: .6rem 1.1rem;
}

.wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.wc-block-grid__product-add-to-cart a.add_to_cart_button:hover {
	background-color: var( --ag-azul );
	color: #fff;
}

.wc-block-grid__product-title {
	color: var( --ag-azul );
	font-weight: 600;
}

@media ( max-width: 782px ) {

	.ag-carrito-vacio-botones {
		flex-direction: column;
	}

	.ag-carrito-vacio-botones .wp-block-button {
		width: 100%;
	}

	.ag-carrito-vacio-botones .wp-block-button__link {
		display: block;
		text-align: center;
	}
}

/* Carrito de bloques ------------------------------------------------------- */

/* El bloque del carrito llega con la clase `alignwide`, que le mete
   `margin: 0 -80px` para desbordar a propósito del ancho del contenido. Aquí
   estorba: va dentro de un contenedor de Elementor que ya decide el ancho, así
   que ese desbordamiento lo sacaba de la caja —comprobado en el navegador: el
   bloque empezaba 80px a la izquierda de su padre—. En móvil eso dejaba los
   rótulos «Cupones» y «Total estimado» cortados por la izquierda.

   Se anula en todos los anchos, no solo en móvil: en escritorio pasaba igual,
   solo que allí sobraba sitio y no se notaba. */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-cart.alignwide {
	margin-left: 0;
	margin-right: 0;
	max-width: 100%;
}

/* WooCommerce trae el carrito de bloques con su propio aspecto neutro. Aquí se
   ajusta a la identidad de la academia y se le da jerarquía: lo importante es
   el curso y lo que incluye, no el precio unitario repetido. */

.wc-block-cart {
	margin-bottom: 3rem;
}

.wc-block-cart-items {
	border-bottom: 0;
}

.wc-block-cart-items__header {
	border-bottom: 1px solid var( --ag-borde );
	color: var( --ag-texto-suave );
	font-size: .75rem;
	letter-spacing: .06em;
	padding-bottom: .8rem;
}

/* Sin !important en el relleno: en móvil, WooCommerce convierte la fila en una
   rejilla con su propio espaciado y forzarlo aquí se lo rompía. */
.wc-block-cart-items__row {
	border-bottom: 1px solid var( --ag-borde ) !important;
	padding: 1.4rem 0;
}

/* Imagen del curso: mayor, cuadrada y con esquinas suaves. */
.wc-block-cart-item__image img {
	aspect-ratio: 1 / 1;
	border: 1px solid var( --ag-borde );
	border-radius: 8px;
	height: auto;
	object-fit: cover;
	width: 88px;
}

/* Nombre del curso: azul de la marca, sin el subrayado ni el rosa del tema. */
.wc-block-cart .wc-block-components-product-name {
	color: var( --ag-azul ) !important;
	font-size: 1.02rem;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
}

.wc-block-cart .wc-block-components-product-name:hover {
	color: var( --ag-acento ) !important;
}

/* El precio unitario repetido bajo el nombre resta más que suma cuando la
   fila ya muestra el total a la derecha. */
.wc-block-cart-item__prices {
	color: var( --ag-texto-suave );
	font-size: .85rem;
}

.wc-block-cart-item__total-price-and-sale-badge-wrapper .wc-block-components-product-price {
	color: var( --ag-azul );
	font-size: 1.05rem;
	font-weight: 700;
}

.wc-block-components-product-metadata {
	font-size: .88rem;
	margin-top: .5rem;
	opacity: 1;
}

/* Papelera: discreta hasta que se busca. */
.wc-block-cart-item__remove-link {
	color: var( --ag-texto-suave ) !important;
	font-size: .82rem !important;
	opacity: 1 !important;
	text-decoration: none !important;
}

.wc-block-cart-item__remove-link:hover {
	color: #c9584c !important;
}

/* Columna de totales ------------------------------------------------------- */

.wc-block-cart__sidebar .wc-block-components-sidebar {
	background: #f7f8fa;
	border: 1px solid var( --ag-borde );
	border-radius: 10px;
	padding: 1.4rem 1.5rem;
}

.wc-block-cart__sidebar .wp-block-woocommerce-cart-order-summary-heading-block {
	color: var( --ag-azul );
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0;
	margin-bottom: .9rem;
	text-transform: none;
}

.wc-block-components-totals-item__label {
	color: var( --ag-texto );
}

.wc-block-components-totals-footer-item {
	border-top: 1px solid var( --ag-borde );
	padding-top: .9rem;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var( --ag-azul );
	font-size: 1.2rem;
	font-weight: 700;
}

/* Botón de finalizar: azul de la marca, no el gris de serie. */
.wc-block-cart__submit-button,
.wc-block-cart__submit-container a.wc-block-cart__submit-button {
	background-color: var( --ag-azul ) !important;
	border: 0 !important;
	border-radius: 5px !important;
	color: #fff !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
	padding: 1rem 1.5rem !important;
	transition: background-color .15s ease;
}

.wc-block-cart__submit-button:hover {
	background-color: #131a35 !important;
}

@media ( max-width: 782px ) {

	/* Aquí NO se toca la disposición de las filas: de eso se encarga
	   WooCommerce con sus clases `is-mobile`, y competir con ellas montaba el
	   precio encima del título. Solo se ajusta lo que su hoja no cubre. */

	/* Las dos columnas son hijas de un contenedor flex. Por defecto un hijo
	   flex no encoge por debajo del ancho de su contenido (`min-width: auto`),
	   así que la tabla de cursos empujaba y el bloque se salía por los lados.
	   `min-width: 0` es lo que les permite encogerse de verdad. */
	.wc-block-cart__main,
	.wc-block-cart__sidebar {
		max-width: 100%;
		min-width: 0;
		padding-left: 0;
		padding-right: 0;
	}

	/* Y que la tabla reparta el ancho disponible en vez de exigir el que
	   necesitan sus celdas. */
	.wc-block-cart table.wc-block-cart-items {
		table-layout: fixed;
		width: 100%;
	}

	.wc-block-cart table.wc-block-cart-items td {
		overflow-wrap: anywhere;
	}

	.wc-block-cart-item__image img {
		width: 72px;
	}

	/* El total de la línea se sale por la derecha en pantallas estrechas:
	   medido en el navegador, empieza en 279px dentro de una fila de 282 y se
	   desborda 78px. No se pierde nada quitándolo: el mismo importe ya está
	   debajo del nombre del curso y otra vez en «Total estimado».

	   Va con el selector completo porque la hoja de WooCommerce le pone
	   `display: flex` con el mismo peso y, al cargar después, ganaba ella. Con
	   el recorrido entero se gana sin recurrir a !important. */
	.wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row td.wc-block-cart-item__total {
		display: none;
	}

	.wc-block-cart__sidebar .wc-block-components-sidebar {
		padding: 1.1rem 1.15rem;
	}

	.wc-block-cart__submit-button,
	.wc-block-cart__submit-container a.wc-block-cart__submit-button {
		width: 100%;
	}
}