.taquillas-aprendo {
	--at-red: #E11B22;
	--at-red-dark: #BF161C;
	--at-navy: #11265C;
	--at-blue: #2F80ED;
	--at-ink: #5A6779;
	--at-line: #E7ECF3;
	/* Fondo blanco: un panel tintado deja lineas visibles al cortar contra la pagina. */
	--at-bg: #FFFFFF;
	background: var(--at-bg);
	border-radius: 18px;
	padding: 30px 18px 36px;
	color: var(--at-navy);
	font-family: inherit;
	/* El bloque se adapta a SU ancho, no al de la pantalla: el tema suele
	   encerrarlo en una columna mucho mas estrecha que el viewport. */
	container-type: inline-size;
}

/* Ancho completo: [taquillas_aprendo ancho="completo"].
   El desplazamiento lo calcula el JS midiendo la posicion real del contenedor.
   No se puede resolver solo con CSS porque calc(50% - 50vw) da por hecho que el
   contenedor del tema esta centrado en la pantalla, y muchos maquetadores lo
   colocan en una columna desplazada. Sin JS el bloque se queda en su columna,
   que es correcto aunque no ocupe todo el ancho. */
.taquillas-aprendo.is-full {
	border-radius: 0;
}

.taquillas-aprendo,
.taquillas-aprendo *,
.taquillas-aprendo *::before,
.taquillas-aprendo *::after {
	box-sizing: border-box;
}

/* Los temas imponen su propio padding a titulos y parrafos: aqui llegaba un
   padding-top de 27px en cada h3, que descolgaba el texto respecto al icono.
   Se listan solo los elementos que no llevan padding propio, con especificidad
   suficiente para ganarle al tema sin recurrir a !important. */
.taquillas-aprendo .at-head h2,
.taquillas-aprendo .at-head p,
.taquillas-aprendo .at-name,
.taquillas-aprendo .at-price,
.taquillas-aprendo .at-sub,
.taquillas-aprendo .at-features li,
.taquillas-aprendo .at-note,
.taquillas-aprendo .at-cart-head h3,
.taquillas-aprendo .at-empty p,
.taquillas-aprendo .at-line-name,
.taquillas-aprendo .at-line-total,
.taquillas-aprendo .at-subtotal,
.taquillas-aprendo .at-secure {
	padding: 0;
}

.at-head {
	max-width: 840px;
	margin: 0 auto 28px;
	text-align: center;
}

.at-head h2 {
	margin: 0 0 8px;
	font-size: clamp(22px, 3vw, 30px);
	line-height: 1.25;
	font-weight: 800;
	color: var(--at-navy);
}

.at-head p {
	margin: 0;
	font-size: 15px;
	color: var(--at-ink);
}

.at-emoji {
	font-size: 1em;
}

.at-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
	align-items: start;
	max-width: 1220px;
	margin: 0 auto;
}

/* ---------- Tarjetas ---------- */

.at-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid var(--at-line);
	border-radius: 16px;
	padding: 30px 22px 20px;
	box-shadow: 0 1px 2px rgba(17, 38, 92, .05);
}

.at-card.is-featured {
	border: 2px solid var(--at-red);
	box-shadow: 0 12px 30px rgba(225, 27, 34, .10);
}

/* Centrado con left/right 0 + margin auto, no con translateX(-50%): ese ultimo
   deja solo la mitad de la tarjeta para calcular el ancho y parte el texto. */
.at-badge {
	position: absolute;
	top: -13px;
	left: 0;
	right: 0;
	width: max-content;
	margin: 0 auto;
	padding: 5px 14px;
	border-radius: 999px;
	background: var(--at-red);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
}

.at-badge--blue {
	background: var(--at-blue);
}

.at-icon {
	width: 64px;
	height: 64px;
	margin: 4px auto 14px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: #FDE7E8;
	color: var(--at-red);
}

.at-icon--blue {
	background: #E6F0FD;
	color: var(--at-blue);
}

.at-icon svg {
	width: 30px;
	height: 30px;
}

.at-name {
	margin: 0;
	text-align: center;
	font-size: 19px;
	font-weight: 800;
	line-height: 1.3;
	color: var(--at-navy);
}

.at-price {
	margin: 6px 0 4px;
	text-align: center;
	font-size: clamp(26px, 3vw, 32px);
	font-weight: 800;
	line-height: 1.1;
	color: var(--at-navy);
}

.at-price .woocommerce-Price-amount,
.at-price bdi {
	color: inherit;
	font-weight: inherit;
}

.at-sub {
	margin: 0 0 16px;
	min-height: 0;
	text-align: center;
	font-size: 13.5px;
	line-height: 1.4;
	color: var(--at-ink);
}

.at-features {
	list-style: none;
	margin: 0 0 18px;
	padding: 15px 0 0;
	border-top: 1px solid var(--at-line);
	display: grid;
	gap: 9px;
}

.at-features li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 13.5px;
	line-height: 1.35;
	color: #2D3A56;
}

.at-features svg {
	width: 15px;
	height: 15px;
	flex: 0 0 15px;
	margin-top: 2px;
	color: var(--at-red);
}

.at-qty {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: auto 0 14px;
	font-size: 13.5px;
	color: var(--at-ink);
}

.at-stepper {
	display: inline-flex;
	align-items: center;
	background: #fff;
	border: 1px solid var(--at-line);
	border-radius: 10px;
	overflow: hidden;
}

/* Los temas suelen imponer padding, alto y sombras a input/button. Sin este
   reset el numero queda aplastado hasta desaparecer dentro del stepper. */
.at-stepper button,
.at-stepper input {
	padding: 0;
	margin: 0;
	min-width: 0;
	min-height: 0;
	max-width: none;
	border-radius: 0;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	font-family: inherit;
	font-weight: 600;
}

.at-stepper button {
	width: 34px;
	height: 36px;
	flex: 0 0 auto;
	border: 0;
	background: #fff;
	color: var(--at-navy);
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.at-stepper button:hover {
	background: #F2F5FA;
}

.at-stepper input {
	width: 48px;
	height: 36px;
	flex: 0 0 auto;
	border: 0;
	border-left: 1px solid var(--at-line);
	border-right: 1px solid var(--at-line);
	background: #fff;
	text-align: center;
	font-size: 14px;
	line-height: normal;
	color: var(--at-navy);
	-moz-appearance: textfield;
	appearance: textfield;
}

.at-stepper input::-webkit-outer-spin-button,
.at-stepper input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.at-stepper--sm button {
	width: 28px;
	height: 30px;
	font-size: 15px;
}

.at-stepper--sm input {
	width: 48px;
	height: 30px;
	font-size: 13px;
}

.at-btn {
	display: block;
	width: 100%;
	max-width: none;
	min-height: 0;
	margin: 0;
	padding: 13px 16px;
	border: 0;
	border-radius: 10px;
	background: var(--at-red);
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	/* El tema no debe imponer mayusculas ni espaciado a estos botones. */
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background .15s ease, transform .1s ease;
}

.at-btn:hover,
.at-btn:focus {
	background: var(--at-red-dark);
	color: #fff;
}

.at-btn:active {
	transform: translateY(1px);
}

.at-btn[disabled],
.at-btn.is-loading {
	opacity: .6;
	cursor: default;
	pointer-events: none;
}

.at-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 10px 0 0;
	font-size: 11.5px;
	color: #8A94A6;
}

.at-note svg {
	width: 12px;
	height: 12px;
	flex: 0 0 12px;
}

/* ---------- Carrito ---------- */

.at-cart {
	position: static;
	top: 24px;
	background: #fff;
	border: 1px solid var(--at-line);
	border-radius: 16px;
	padding: 18px;
}

.at-cart-head {
	display: flex;
	align-items: center;
	gap: 9px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--at-line);
}

.at-cart-head h3 {
	flex: 1;
	margin: 0;
	font-size: 16px;
	font-weight: 800;
	color: var(--at-navy);
}

.at-cart-head > svg {
	width: 20px;
	height: 20px;
	color: var(--at-navy);
}

.at-count {
	min-width: 26px;
	height: 26px;
	padding: 0 7px;
	border-radius: 50px;
	background: #F1F4F9;
	color: var(--at-navy);
	font-size: 12px;
	font-weight: 700;
	display: grid;
	place-items: center;
}

.taquillas-aprendo.at-has-items .at-count {
	background: var(--at-red);
	color: #fff;
}

.at-msg {
	display: none;
	margin: 12px 0 0;
	padding: 8px 10px;
	border: 1px solid #FDA29B;
	border-radius: 8px;
	background: #FEF3F2;
	color: #B42318;
	font-size: 12.5px;
	line-height: 1.35;
}

.at-msg.is-visible {
	display: block;
}

.at-cart-body {
	min-height: 130px;
	padding: 12px 0;
}

.at-empty {
	display: grid;
	place-items: center;
	gap: 10px;
	padding: 18px 6px;
	text-align: center;
	font-size: 13px;
	color: #98A2B3;
}

.at-empty p {
	margin: 0;
}

.at-empty svg {
	width: 40px;
	height: 40px;
	color: #CBD5E1;
}

.at-lines {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.at-line {
	border: 1px solid var(--at-line);
	border-radius: 10px;
	padding: 10px;
}

.at-line-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
}

.at-line-name {
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--at-navy);
}

.at-remove {
	margin: 0;
	padding: 0 2px;
	min-width: 0;
	min-height: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: #98A2B3;
	font-family: inherit;
	font-size: 18px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.at-remove:hover {
	color: var(--at-red);
}

.at-line-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 8px;
}

.at-line-total {
	font-size: 14px;
	font-weight: 700;
	color: var(--at-navy);
}

.at-cart-foot {
	padding-top: 12px;
	border-top: 1px solid var(--at-line);
}

.at-subtotal {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 12px;
	font-size: 14px;
	color: var(--at-ink);
}

.at-subtotal strong {
	font-size: 18px;
	font-weight: 800;
	color: var(--at-navy);
}

/* Sin productos no se puede ir al checkout. */
.taquillas-aprendo:not(.at-has-items) .at-checkout {
	opacity: .45;
	pointer-events: none;
	cursor: default;
}

.at-pay-logo {
	display: block;
	width: auto;
	max-width: 170px;
	height: auto;
	margin: 14px auto 0;
}

.at-secure {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 10px 0 0;
	font-size: 11.5px;
	color: #8A94A6;
}

.at-secure svg {
	width: 12px;
	height: 12px;
	flex: 0 0 12px;
}

.taquillas-aprendo .at-cart-hint {
	margin: 8px 0 0;
	padding: 0;
	font-size: 11.5px;
	line-height: 1.35;
	text-align: center;
	color: var(--at-ink);
}

.taquillas-aprendo.is-busy {
	opacity: .8;
	pointer-events: none;
}

/* ---------- Modal de cedulas ---------- */

.taquillas-aprendo .at-modal {
	width: min(580px, calc(100vw - 24px));
	max-width: none;
	max-height: calc(100vh - 24px);
	max-height: calc(100dvh - 24px);
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: 18px;
	background: #fff;
	color: var(--at-navy);
	box-shadow: 0 24px 60px rgba(17, 38, 92, .28);
	overflow: hidden;
}

.taquillas-aprendo .at-modal::backdrop {
	background: rgba(17, 38, 92, .55);
}

.at-modal-box {
	display: flex;
	flex-direction: column;
	max-height: inherit;
	margin: 0;
}

.at-modal-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 20px 22px 0;
}

.taquillas-aprendo .at-modal-head h3 {
	margin: 0;
	padding: 0;
	font-size: 19px;
	font-weight: 800;
	line-height: 1.25;
	color: var(--at-navy);
}

.taquillas-aprendo .at-modal-head p {
	margin: 4px 0 0;
	padding: 0;
	font-size: 14px;
	line-height: 1.4;
	color: var(--at-ink);
}

.taquillas-aprendo .at-modal-x {
	display: grid;
	place-items: center;
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	min-height: 0;
	margin: -4px -8px 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	box-shadow: none;
	color: #98A2B3;
	font-family: inherit;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

.taquillas-aprendo .at-modal-x:hover {
	background: #F1F4F9;
	color: var(--at-navy);
}

.at-modal-info {
	padding: 12px 22px 14px;
	border-bottom: 1px solid var(--at-line);
}

.taquillas-aprendo .at-modal-info p {
	margin: 0 0 6px;
	padding: 0;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--at-ink);
}

.taquillas-aprendo .at-modal-info .at-modal-tip {
	color: var(--at-blue);
}

.at-progress {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 10px;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
	color: var(--at-navy);
}

.at-progress-bar {
	flex: 1;
	height: 6px;
	border-radius: 6px;
	background: #F1F4F9;
	overflow: hidden;
}

.at-progress-bar span {
	display: block;
	width: 0;
	height: 100%;
	border-radius: 6px;
	background: #12B76A;
	transition: width .2s ease;
}

.taquillas-aprendo .at-fields {
	flex: 1;
	min-height: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	align-content: start;
	gap: 10px 14px;
	margin: 0;
	padding: 16px 22px;
	list-style: none;
	overflow-y: auto;
}

.taquillas-aprendo .at-field-group {
	grid-column: 1 / -1;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	margin: 6px 0 -2px;
	padding: 0;
	font-size: 13px;
	font-weight: 800;
	color: var(--at-navy);
}

.taquillas-aprendo .at-field-group:first-child {
	margin-top: 0;
}

.at-field-group span {
	font-size: 12px;
	font-weight: 600;
	color: var(--at-ink);
}

.taquillas-aprendo .at-field {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
}

.at-field-num {
	position: absolute;
	left: 8px;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #F1F4F9;
	font-size: 12px;
	font-weight: 700;
	color: var(--at-navy);
	pointer-events: none;
}

.taquillas-aprendo .at-field input {
	display: block;
	width: 100%;
	height: 44px;
	margin: 0;
	padding: 0 12px 0 42px;
	border: 1.5px solid var(--at-line);
	border-radius: 10px;
	background: #fff;
	box-shadow: none;
	color: var(--at-navy);
	font-family: inherit;
	font-size: 15px;
	letter-spacing: .02em;
}

.taquillas-aprendo .at-field input:focus {
	border-color: var(--at-blue);
	outline: 3px solid rgba(47, 128, 237, .18);
	outline-offset: 0;
}

.taquillas-aprendo .at-field input.is-valid {
	border-color: #12B76A;
}

.at-field:has(input.is-valid) .at-field-num {
	background: #12B76A;
	color: #fff;
}

.taquillas-aprendo .at-field input.is-invalid {
	border-color: #F04438;
	background: #FEF3F2;
}

.taquillas-aprendo .at-modal .at-msg {
	margin: 0 22px 10px;
}

.at-modal-foot {
	display: flex;
	gap: 10px;
	padding: 14px 22px 18px;
	border-top: 1px solid var(--at-line);
}

.at-modal-foot .at-btn {
	flex: 1;
}

.taquillas-aprendo .at-modal-back {
	flex: 0 0 auto;
	min-height: 0;
	margin: 0;
	padding: 13px 18px;
	border: 1px solid var(--at-line);
	border-radius: 10px;
	background: #fff;
	box-shadow: none;
	color: var(--at-navy);
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
}

.taquillas-aprendo .at-modal-back:hover {
	background: #F1F4F9;
}

@media (max-width: 480px) {
	.taquillas-aprendo .at-modal {
		width: 100vw;
		max-height: 92vh;
		max-height: 92dvh;
		margin: auto 0 0;
		border-radius: 18px 18px 0 0;
	}

	.at-modal-head,
	.at-modal-info,
	.taquillas-aprendo .at-fields,
	.at-modal-foot {
		padding-left: 16px;
		padding-right: 16px;
	}

	.taquillas-aprendo .at-modal .at-msg {
		margin: 0 16px 10px;
	}
}

/* ---------- Responsive: segun el ancho del bloque, no del viewport ---------- */

/* Bloque estrecho (movil): objetivos tactiles mas grandes. */
@container (max-width: 619px) {
	.at-stepper button {
		width: 44px;
		height: 44px;
		font-size: 19px;
	}

	.at-stepper input {
		width: 56px;
		height: 44px;
		font-size: 15px;
	}

	.at-stepper--sm button {
		width: 40px;
		height: 40px;
		font-size: 17px;
	}

	.at-stepper--sm input {
		width: 48px;
		height: 40px;
		font-size: 14px;
	}

	.at-remove {
		display: grid;
		place-items: center;
		min-width: 40px;
		min-height: 40px;
		margin: -8px -10px 0 0;
		font-size: 22px;
	}
}

@container (min-width: 620px) {
	.at-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.at-sub {
		min-height: 38px;
	}
}

@container (min-width: 1020px) {
	.at-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(260px, 300px);
	}

	.at-cart {
		position: sticky;
	}
}

/* Navegadores sin soporte de container queries: se cae al ancho de pantalla. */
@supports not (container-type: inline-size) {
	@media (min-width: 720px) {
		.at-grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	@media (min-width: 1180px) {
		.at-grid {
			grid-template-columns: repeat(3, minmax(0, 1fr)) 300px;
		}

		.at-cart {
			position: sticky;
		}
	}
}

@media (max-width: 720px) {
	.taquillas-aprendo {
		padding: 24px 12px 28px;
	}

	.at-grid {
		gap: 22px;
	}
}