/* ==========================================================================
   Output — CSS custom del child theme
   Regla de oro: aquí SOLO lo que no puedas resolver desde Elementor.
   Cuanto menos pongas, más liviano el sitio. Los widgets custom sí viven aquí.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Variables de marca (paleta Output). Úsalas también en tus widgets.
   -------------------------------------------------------------------------- */
:root {
	--output-pink: #ec1e63;
	--output-blue-deep: #1a3570;
	--output-blue: #2a52c9;
	--output-bg: #0d0d12;
	--output-card-bg: #14141a;
}

/* --------------------------------------------------------------------------
   Neutraliza el reset agresivo del tema padre sobre button:hover / :focus.
   hello-elementor/assets/css/reset.css pone background-color:#c36 en todos
   los botones. Nuestro custom.css carga después, así que aquí lo revertimos
   con la misma especificidad y el cascade nos da la victoria.
   -------------------------------------------------------------------------- */
button:focus,
button:hover,
[type=button]:focus,
[type=button]:hover,
[type=submit]:focus,
[type=submit]:hover {
	background-color: #6f7fd8;
	color: #fff;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   Widget: Artist Card
   -------------------------------------------------------------------------- */
.output-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 12px;
	background: var(--output-card-bg);
}

.output-card__media img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	aspect-ratio: 3 / 4;
}

.output-card__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px;
}

.output-card__date {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--output-pink);
}

.output-card__name {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1.1;
	color: #fff;
}

.output-card__venue {
	font-size: 0.85rem;
	color: #fff;
	opacity: 0.7;
}

.output-card__btn {
	align-self: flex-start;
	margin-top: 12px;
	padding: 10px 22px;
	border-radius: 999px;
	background: var(--output-pink);
	color: #fff;
	font-size: 0.85rem;
	font-weight: 700;
	text-decoration: none;
	transition: transform 0.15s ease, filter 0.15s ease;
}

.output-card__btn:hover {
	filter: brightness(1.1);
	transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Widget: Concerts Slider — "Próximas Emociones"
   -------------------------------------------------------------------------- */

/* Sección */
.output-cs {
	width: 100%;
	padding: 60px 0;
}

/* Header: título + flechas */
.output-cs__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 32px;
}

.output-cs__title-wrap {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.output-cs__title {
	margin: 0;
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 800;
	line-height: 1;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.output-cs__title-accent {
	color: var(--output-pink);
}

.output-cs__title-line {
	--output-title-line-solid: #7b2444;
	--output-title-line-effect: #ff5d96;
	position: relative;
	display: block;
	width: 140px;
	height: 18px;
	overflow: hidden;
	background: var(--output-title-line-solid);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 24' preserveAspectRatio='none'%3E%3Cpath d='M0 12 H18 C23 12 25 10 30 10 S37 14 42 14 S49 5 54 5 S61 19 66 19 S73 3 78 3 S85 17 90 17 S97 8 102 8 S109 14 114 14 S121 11 126 11 H140' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 24' preserveAspectRatio='none'%3E%3Cpath d='M0 12 H18 C23 12 25 10 30 10 S37 14 42 14 S49 5 54 5 S61 19 66 19 S73 3 78 3 S85 17 90 17 S97 8 102 8 S109 14 114 14 S121 11 126 11 H140' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
	mask-repeat: no-repeat;
	mask-size: 100% 100%;
}

.output-cs__title-line::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 72%;
	height: 100%;
	background: linear-gradient(90deg, var(--output-title-line-effect) 0%, var(--output-title-line-effect) 32%, transparent 100%);
	filter: drop-shadow(0 0 4px var(--output-title-line-effect));
	animation: output-title-line-travel 2.8s linear infinite;
	will-change: transform, opacity;
}

@keyframes output-title-line-travel {
	0%, 16% {
		opacity: 0;
		transform: translateX(140%);
	}
	20% {
		opacity: 1;
	}
	82% {
		opacity: 1;
		transform: translateX(-100%);
	}
	88%, 100% {
		opacity: 0;
		transform: translateX(-110%);
	}
}

/* Flechas de navegación */
.output-cs__nav {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
	padding-top: 4px;
}

.output-cs__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1.5px solid var(--output-pink);
	background: transparent;
	color: #fff;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

.output-cs__arrow:hover {
	background: var(--output-pink);
}

.output-cs__arrow.swiper-button-disabled {
	opacity: 0.35;
	pointer-events: none;
}

/*
 * Swiper recorta el contenido que sale de su viewport. Reservamos espacio
 * arriba para que la elevacion de la tarjeta en hover no quede cortada.
 * overflow:hidden garantiza que las slides no se apilen verticalmente si el
 * CSS de Swiper se carga tarde o en un orden inesperado.
 */
.output-cs__swiper {
	padding-top: 4px;
	margin-top: -4px;
	overflow: hidden;
}

.output-cs__swiper .swiper-wrapper {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	width: 100%;
	height: 100%;
}

.output-cs__swiper .swiper-slide {
	flex-shrink: 0;
	height: auto;
}

/* Tarjeta */
.output-cs__card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: 3 / 4;
	border-radius: 12px;
	overflow: hidden;
	background-size: cover;
	background-position: center top;
	border: 1px solid rgba(236, 30, 99, 0.25);
	cursor: pointer;
	transition: transform 0.25s ease, border-color 0.25s ease;
}

/* Gradiente inferior */
.output-cs__card::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		transparent 30%,
		rgba(0, 0, 0, 0.55) 55%,
		rgba(0, 0, 0, 0.92) 100%
	);
	pointer-events: none;
}

/* Badge de fecha (esquina superior izquierda) */
.output-cs__date-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 52px;
	padding: 8px 10px;
	border-radius: 6px;
	background: var(--output-pink);
	line-height: 1;
	text-align: center;
}

.output-cs__day {
	display: block;
	font-size: 1.6rem;
	font-weight: 900;
	color: #fff;
	line-height: 1;
}

.output-cs__month {
	display: block;
	font-size: 0.65rem;
	font-weight: 700;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-top: 2px;
}

.output-cs__year {
	display: block;
	font-size: 0.65rem;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.8);
	letter-spacing: 0.03em;
}

/* Cuerpo inferior de la tarjeta */
.output-cs__card-body {
	position: relative;
	z-index: 2;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.output-cs__artist {
	margin: 0;
	font-size: clamp(1.4rem, 3vw, 1.75rem);
	font-weight: 900;
	line-height: 1;
	color: #fff;
	text-transform: uppercase;
}

.output-cs__tour {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--output-pink);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.output-cs__location {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.75);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Link invisible que cubre toda la tarjeta */
.output-cs__card-link {
	position: absolute;
	inset: 0;
	z-index: 3;
}

/* Hover en la tarjeta */
.output-cs__card:hover {
	border-color: var(--output-pink);
	transform: translateY(-3px);
}

/* Footer con botón */
.output-cs__footer {
	display: flex;
	justify-content: center;
	margin-top: 40px;
}

.output-cs__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 32px;
	border-radius: 999px;
	border: 1.5px solid #fff;
	background: transparent;
	color: #fff;
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.output-cs__btn:hover {
	background: var(--output-pink);
	border-color: var(--output-pink);
	color: #fff;
}

/* --------------------------------------------------------------------------
   Widget: Linea degradada animada
   -------------------------------------------------------------------------- */

/* Garantiza que el widget nunca colapse cuando el container
   padre tiene align-items != stretch (ej: center). */
.elementor-widget-output_gradient_line,
.elementor-widget-output_gradient_line .elementor-widget-container {
	width: 100%;
}

.output-gradient-line-wrap {
	display: flex;
	width: 100%;
}

.output-gradient-line {
	--output-line-start: #5e263d;
	--output-line-end: #f34783;
	--output-line-speed: 3.5s;
	--output-line-glow: 8px;
	--output-wave-height: 36px;
	position: relative;
	height: max(20px, var(--output-wave-height));
	overflow: hidden;
	background: linear-gradient(90deg, transparent 0%, var(--output-line-start) 38%, var(--output-line-end) 100%);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none'%3E%3Cpath d='M0 30 C12 30 14 28 22 28 S32 34 40 34 S50 18 58 18 S68 44 76 44 S86 8 94 8 S104 52 112 52 S122 20 130 20 S140 38 148 38 S158 27 166 27 S176 32 184 32 S194 29 202 29 S212 31 220 31 S230 24 238 24 S248 40 256 40 S266 13 274 13 S284 48 292 48 S302 21 310 21 S320 36 328 36 S338 27 346 27 S356 32 364 32 S374 30 400 30' fill='none' stroke='black' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none'%3E%3Cpath d='M0 30 C12 30 14 28 22 28 S32 34 40 34 S50 18 58 18 S68 44 76 44 S86 8 94 8 S104 52 112 52 S122 20 130 20 S140 38 148 38 S158 27 166 27 S176 32 184 32 S194 29 202 29 S212 31 220 31 S230 24 238 24 S248 40 256 40 S266 13 274 13 S284 48 292 48 S302 21 310 21 S320 36 328 36 S338 27 346 27 S356 32 364 32 S374 30 400 30' fill='none' stroke='black' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
	mask-repeat: no-repeat;
	mask-size: 100% 100%;
}

/* Al viajar a la derecha, el color nace a la izquierda y se desvanece a la derecha. */
.output-gradient-line--to-right {
	background: linear-gradient(270deg, transparent 0%, var(--output-line-start) 38%, var(--output-line-end) 100%);
}

.output-gradient-line::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 55%;
	height: 100%;
	background: linear-gradient(90deg, transparent 0%, var(--output-line-end) 55%, transparent 100%);
	filter: drop-shadow(0 0 var(--output-line-glow) var(--output-line-end));
	animation: output-line-right-to-left var(--output-line-speed) linear infinite;
	will-change: transform;
}

.output-gradient-line--to-right::after {
	animation-direction: reverse;
}

@keyframes output-line-right-to-left {
	from { transform: translateX(190%); }
	to { transform: translateX(-190%); }
}

@media (prefers-reduced-motion: reduce) {
	.output-cs__title-line::after {
		animation: none;
		transform: none;
		opacity: 1;
	}

	.output-gradient-line::after {
		animation: none;
		transform: translateX(70%);
	}
}

/* --------------------------------------------------------------------------
   Widget: Contador automatico de conciertos
   -------------------------------------------------------------------------- */

.output-countdown-widget {
	width: 100%;
	text-align: center;
}

.output-countdown {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 18px;
	width: 100%;
}

.output-countdown__unit {
	display: flex;
	flex: 0 1 150px;
	flex-direction: column;
	align-items: center;
	min-width: 0;
}

.output-countdown__number,
.output-countdown__separator {
	font-size: 58px;
	font-weight: 500;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.output-countdown__number {
	display: block;
	color: #fff;
}

.output-countdown__separator {
	flex: 0 0 auto;
	color: var(--output-pink);
}

.output-countdown__label {
	display: block;
	margin-top: 18px;
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
}

.output-countdown__concert {
	margin-bottom: 18px;
	color: #fff;
	font-weight: 700;
	text-transform: uppercase;
}

.output-countdown__empty {
	margin: 0;
	color: #fff;
	text-align: center;
}

@media (max-width: 767px) {
	.output-countdown {
		gap: 7px;
	}

	.output-countdown__unit {
		flex-basis: 72px;
	}

	.output-countdown__number,
	.output-countdown__separator {
		font-size: clamp(28px, 10vw, 48px);
	}

	.output-countdown__label {
		margin-top: 12px;
		font-size: 9px;
	}
}

/* --------------------------------------------------------------------------
   Widget: Output Steps — "Cómo comprar"
   -------------------------------------------------------------------------- */

.output-steps {
	width: 100%;
}

.output-steps__list {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	align-items: flex-start;
}

.output-steps__item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 0 8px;
	position: relative;
}

/* Segmento izquierdo: desde el borde del item hasta el borde izquierdo del ícono (50% - 32px) */
.output-steps__item::before {
	content: '';
	position: absolute;
	top: 80px;
	left: 0;
	right: calc(50% + 32px);
	height: 1px;
	background: rgba(236, 30, 99, 0.3);
}

/* Segmento derecho: desde el borde derecho del ícono (50% + 32px) hasta el borde del item */
.output-steps__item::after {
	content: '';
	position: absolute;
	top: 80px;
	left: calc(50% + 32px);
	right: 0;
	height: 1px;
	background: rgba(236, 30, 99, 0.3);
}

/* Primer item: sin segmento izquierdo */
.output-steps__item:first-child::before {
	display: none;
}

/* Último item: sin segmento derecho */
.output-steps__item:last-child::after {
	display: none;
}

.output-steps__head {
	position: relative;
	margin-bottom: 16px;
}

.output-steps__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 1.5px solid #ec1e63;
	background-color: #0d0d12;
	color: #ec1e63;
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1;
}

.output-steps__icon-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 12px;
	border: 1px solid rgba(236, 30, 99, 0.2);
	background-color: #1a1228;
	margin-bottom: 16px;
	color: #fff;
	font-size: 1.375rem;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.output-steps__icon-wrap svg {
	width: 22px;
	height: 22px;
	fill: #fff;
}

/* Paso destacado */
.output-steps__item--highlight .output-steps__icon-wrap {
	background-color: rgba(236, 30, 99, 0.15);
	border-color: #ec1e63;
}

/* Textos */
.output-steps__title {
	margin: 0 0 8px;
	font-size: 0.9rem;
	font-weight: 700;
	color: #fff;
	line-height: 1.3;
}

.output-steps__desc {
	margin: 0;
	font-size: 0.78rem;
	color: rgba(255, 255, 255, 0.6);
	line-height: 1.55;
}

.output-steps__desc a {
	color: #ec1e63;
	text-decoration: none;
}

/* Nota al pie */
.output-steps__note {
	margin: 28px 0 0;
	text-align: center;
	font-size: 0.78rem;
	color: rgba(255, 255, 255, 0.45);
	line-height: 1.5;
}

.output-steps__note strong,
.output-steps__note a {
	color: #ec1e63;
	font-weight: 600;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   Widget: Concerts Grid — "Todas las Emociones"
   -------------------------------------------------------------------------- */

.output-cg {
	width: 100%;
	padding: 60px 0;
}

/* Header */
.output-cg__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 32px;
	flex-wrap: wrap;
}

.output-cg__title-wrap {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.output-cg__title {
	margin: 0;
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 800;
	line-height: 1;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.output-cg__title-accent {
	color: var(--output-pink);
}

/* Onda decorativa: misma animación que el slider */
.output-cg__title-line {
	--output-title-line-solid: #7b2444;
	--output-title-line-effect: #ff5d96;
	position: relative;
	display: block;
	width: 140px;
	height: 18px;
	overflow: hidden;
	background: var(--output-title-line-solid);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 24' preserveAspectRatio='none'%3E%3Cpath d='M0 12 H18 C23 12 25 10 30 10 S37 14 42 14 S49 5 54 5 S61 19 66 19 S73 3 78 3 S85 17 90 17 S97 8 102 8 S109 14 114 14 S121 11 126 11 H140' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 24' preserveAspectRatio='none'%3E%3Cpath d='M0 12 H18 C23 12 25 10 30 10 S37 14 42 14 S49 5 54 5 S61 19 66 19 S73 3 78 3 S85 17 90 17 S97 8 102 8 S109 14 114 14 S121 11 126 11 H140' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
	mask-repeat: no-repeat;
	mask-size: 100% 100%;
}

.output-cg__title-line::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 72%;
	height: 100%;
	background: linear-gradient(90deg, var(--output-title-line-effect) 0%, var(--output-title-line-effect) 32%, transparent 100%);
	filter: drop-shadow(0 0 4px var(--output-title-line-effect));
	animation: output-title-line-travel 2.8s linear infinite;
	will-change: transform, opacity;
}

/* Contador */
.output-cg__count {
	margin: 0;
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.6);
	text-align: right;
	line-height: 1.4;
}

.output-cg__count strong {
	color: #5F73D8;
	font-weight: 700;
}

/* Grid de tarjetas */
.output-cg__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

/* Tarjeta */
.output-cg__card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: 3 / 4;
	border-radius: 8px;
	overflow: hidden;
	background-size: cover;
	background-position: center top;
	transition: transform 0.25s ease;
}

.output-cg__card--hidden {
	display: none;
}

/* Gradiente oscuro sobre la imagen */
.output-cg__card::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		transparent 20%,
		rgba(0, 0, 0, 0.4) 45%,
		rgba(0, 0, 0, 0.88) 75%,
		rgba(0, 0, 0, 0.96) 100%
	);
	pointer-events: none;
}

.output-cg__card:hover {
	transform: translateY(-3px);
}

/* Cuerpo inferior */
.output-cg__card-body {
	position: relative;
	z-index: 2;
	padding: 18px 16px 16px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.output-cg__artist {
	margin: 0;
	font-size: clamp(1.5rem, 2.5vw, 2rem);
	font-weight: 900;
	line-height: 1;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

.output-cg__tour {
	margin: 0;
	font-size: 0.72rem;
	font-weight: 700;
	color: #5F73D8;
	text-transform: uppercase;
	letter-spacing: 0.07em;
}

/* Sección de fechas/ciudades */
.output-cg__dates {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 8px 0 10px;
}

/* Un grupo por ciudad: pin + nombre → fechas → botón opcional */
.output-cg__city-group {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.output-cg__city-dates {
	display: flex;
	flex-wrap: wrap;
	gap: 1px 12px;
}

.output-cg__loc-row {
	display: flex;
	align-items: center;
	gap: 5px;
}

.output-cg__pin {
	color: #5F73D8;
	flex-shrink: 0;
}

.output-cg__city {
	font-size: 0.72rem;
	font-weight: 700;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1;
}

.output-cg__date-label {
	display: block;
	font-size: 0.72rem;
	font-weight: 700;
	color: #5F73D8;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding-left: 15px;
}

/* Segmented control de ciudad (modo multi-ciudad) */
.output-cg__city-tabs {
	display: flex;
	margin: 10px 0 8px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 7px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.04);
}

.output-cg__city-tab {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 8px 6px;
	border-radius: 0;
	background: transparent;
	border: none;
	border-right: 1px solid rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.45);
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.18s, color 0.18s;
}

.output-cg__city-tab:last-child {
	border-right: none;
}

.output-cg__tab-pin {
	flex-shrink: 0;
	color: rgba(255, 255, 255, 0.2);
	transition: color 0.18s;
}

.output-cg__city-tab--active {
	background-color: var(--cg-tab-active-bg, #3D4D9C);
	color: #fff;
}

.output-cg__city-tab--active .output-cg__tab-pin {
	color: rgba(255, 255, 255, 0.8);
}

.output-cg__city-tab:hover:not(.output-cg__city-tab--active) {
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.75);
}

.output-cg__city-tab:hover:not(.output-cg__city-tab--active) .output-cg__tab-pin {
	color: rgba(255, 255, 255, 0.4);
}

/* Área de detalle de la ciudad activa */
.output-cg__active-city {
	margin: 12px 0 4px;
	text-align: center;
}

.output-cg__loc-row--center {
	justify-content: center;
}

.output-cg__active-city-name {
	font-size: 0.95rem;
	font-weight: 800;
}

.output-cg__active-city-dates {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	margin-top: 2px;
}

.output-cg__active-city-dates .output-cg__date-label {
	padding-left: 0;
	font-size: 0.78rem;
	color: #5F73D8;
}

/* Botones de compra: global y por ciudad comparten base visual */
.output-cg__buy-btn,
.output-cg__city-btn {
	--cg-btn-bg:           #3D4D9C;
	--cg-btn-bg-hover:     #6F7FD8;
	--cg-btn-color:        #fff;
	--cg-btn-color-hover:  #fff;
	--cg-btn-radius:       10px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 10px 14px;
	border-radius: var(--cg-btn-radius);
	background-color: var(--cg-btn-bg);
	border: none;
	color: var(--cg-btn-color);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.15s ease;
}

.output-cg__buy-btn {
	margin-top: 6px;
}

.output-cg__city-btn {
	margin-top: 5px;
	align-self: flex-start;
}

.output-cg__buy-btn:hover,
.output-cg__city-btn:hover {
	background-color: var(--cg-btn-bg-hover);
	color: var(--cg-btn-color-hover);
	transform: translateY(-1px);
}

.output-cg__btn-icon {
	flex-shrink: 0;
}

/* Footer — botón "ver más" */
.output-cg__footer {
	display: flex;
	justify-content: center;
	margin-top: 40px;
}

.output-cg__load-more {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 36px;
	border-radius: 999px;
	border: 1.5px solid #fff;
	background: transparent;
	color: #fff;
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.output-cg__load-more:hover {
	background: #3D4D9C;
	border-color: #3D4D9C;
}

.output-cg__lm-icon {
	flex-shrink: 0;
}

/* Responsive */
@media (max-width: 1023px) {
	.output-cg__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 599px) {
	.output-cg__grid {
		grid-template-columns: 1fr;
	}

	.output-cg__header {
		flex-direction: column;
		align-items: flex-start;
	}

	.output-cg__count {
		text-align: left;
	}
}

@media (prefers-reduced-motion: reduce) {
	.output-cg__title-line::after {
		animation: none;
		transform: none;
		opacity: 1;
	}
}

/* --------------------------------------------------------------------------
   Utilidad: texto degradado blanco → rosa Output
   Uso: pegar "output-text-gradient" en Advanced → CSS Classes en Elementor.
   Funciona en headings, párrafos y cualquier widget de texto.
   -------------------------------------------------------------------------- */
.output-text-gradient,
.output-text-gradient * {
	background: linear-gradient(90deg, #ffffff 0%, #EC768A 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* --------------------------------------------------------------------------
   Widget: Outpoints Tier — FAN / VIP / LEGEND
   -------------------------------------------------------------------------- */

/* Elementor carga su CSS después del render inicial — !important garantiza que
   nuestra regla de ancho siempre gane sin importar el orden de carga. */
.elementor-widget-output_outpoints_tier {
	width: 100% !important;
	align-self: stretch !important;
}

.elementor-widget-output_outpoints_tier .elementor-widget-container {
	width: 100% !important;
}

.output-ot {
	width: 100% !important;
}

/* ── Desktop: Swiper no inicializado → CSS Grid ──────────────────────────── */
.output-ot__swiper {
	width: 100%;
}

.output-ot__swiper:not(.swiper-initialized) .swiper-wrapper {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.output-ot__swiper:not(.swiper-initialized) .swiper-slide {
	width: auto !important;
	margin: 0 !important;
}

@media (max-width: 1023px) {
	.output-ot__swiper:not(.swiper-initialized) .swiper-wrapper {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ── Mobile: Swiper activo → slider real ────────────────────────────────── */
@media (max-width: 639px) {
	.output-ot__swiper {
		overflow: hidden;
	}
}

/* Pagination dots — solo visibles cuando Swiper está activo */
.output-ot__pagination {
	display: none;
	text-align: center;
	margin-top: 20px;
}

.output-ot__swiper.swiper-initialized .output-ot__pagination {
	display: block;
}

.output-ot__pagination .swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	background: rgba(255, 255, 255, 0.35);
	opacity: 1;
	transition: background 0.2s ease, transform 0.2s ease;
}

.output-ot__pagination .swiper-pagination-bullet-active {
	background: #ec1e63;
	transform: scale(1.3);
}

/* ── Slide / Item ────────────────────────────────────────────────────────── */
.output-ot__item {
	position: relative;
	display: flex;
	flex-direction: column;
	padding-top: 22px;
	box-sizing: border-box;
	min-width: 0;
	height: 100%;
}

/* Badge "MÁS POPULAR" centrado sobre la tarjeta */
.output-ot__badge {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	padding: 5px 18px;
	border-radius: 999px;
	background-color: #ec1e63;
	color: #fff;
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Tarjeta base — height:100% para llenar el alto del swiper-slide */
.output-ot__card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 28px 22px 22px;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.07);
	background-image: radial-gradient(at top left, rgba(17,22,52,0.95) 0%, rgba(5,8,23,0.98) 100%);
	height: 100%;
	min-width: 0;
}

/* Tarjeta destacada: borde rosa */
.output-ot__card--featured {
	border-color: #ec1e63;
}

/* Contenedor del ícono */
.output-ot__icon-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	border: 1px solid rgba(236, 30, 99, 0.25);
	background-color: #1e1e2a;
	color: rgba(255, 255, 255, 0.65);
	margin-bottom: 22px;
	flex-shrink: 0;
}

/* Tamaño base del ícono — FA usa <i>, SVG custom usa <svg> */
.output-ot__icon-wrap i {
	font-size: 22px;
	line-height: 1;
}

.output-ot__icon-wrap svg {
	width: 22px;
	height: 22px;
}

/* Ícono del tier destacado */
.output-ot__icon-wrap--featured {
	background-color: rgba(236, 30, 99, 0.15);
	border-color: #ec1e63;
	color: #ec1e63;
}

/* Nombre del nivel */
.output-ot__name {
	margin: 0 0 6px;
	font-size: clamp(2rem, 3.5vw, 2.75rem);
	font-weight: 900;
	line-height: 1;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

/* Rango de puntos */
.output-ot__range {
	margin: 0 0 22px;
	font-size: 0.9rem;
	font-weight: 700;
	color: #ec1e63;
	letter-spacing: 0.01em;
}

/* Lista de beneficios — ocupa el espacio disponible para
   que el botón quede siempre al fondo de la tarjeta */
.output-ot__benefits {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 11px;
	flex-grow: 1;
	padding-bottom: 24px;
}

.output-ot__benefit {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 0.85rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.82);
	line-height: 1.45;
}

.output-ot__check {
	flex-shrink: 0;
	color: #ec1e63;
	font-weight: 800;
	font-size: 0.85rem;
	margin-top: 1px;
}

/* Botón CTA — ancho completo, siempre al pie de la tarjeta */
.output-ot__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 13px 20px;
	border-radius: 10px;
	border: 1.5px solid rgba(255, 255, 255, 0.6);
	background: transparent;
	color: #fff;
	font-size: 0.85rem;
	font-weight: 700;
	text-decoration: none;
	text-align: center;
	letter-spacing: 0.04em;
	transition: background 0.2s ease, border-color 0.2s ease;
	margin-top: auto;
}

.output-ot__btn:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: #fff;
}

/* Botón del tier destacado: degradado rosa */
.output-ot__btn--featured {
	border: none;
	background-image: linear-gradient(90deg, #ff78a5 0%, #e64e7d 100%);
	color: #fff;
}

.output-ot__btn--featured:hover {
	filter: brightness(1.1);
	transform: translateY(-1px);
}

/* Mobile: peek del siguiente slide */
@media (max-width: 639px) {
	.output-ot__name {
		font-size: clamp(1.6rem, 7vw, 2rem);
	}
}

/* Mobile — stack vertical */
@media (max-width: 767px) {
	.output-steps__list {
		flex-direction: column;
		gap: 28px;
	}

	.output-steps__item {
		flex-direction: row;
		text-align: left;
		align-items: flex-start;
		gap: 16px;
		padding: 0;
	}

	.output-steps__item::before,
	.output-steps__item::after {
		display: none;
	}

	.output-steps__head {
		margin-bottom: 0;
		flex-shrink: 0;
		padding-top: 4px;
	}

	.output-steps__icon-wrap {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Widget: Milestones Timeline — "Hitos y Momentos"

   Cómo funciona la línea:
   Cada .output-mt__slide genera su segmento de línea vía ::before (left:0
   right:0). Con spaceBetween:0 en Swiper los segmentos se tocan y forman
   una línea continua. El cálculo del top es:
     year (16px height) + ruler gap (10px) + mitad del dot (6px) = 32px.
   -------------------------------------------------------------------------- */

.output-mt {
	width: 100%;
	padding: 60px 0;
}

/*
 * Defensa contra el timing issue de Swiper (mismo patrón que Concerts Slider).
 * Si el CSS de Swiper se carga tarde o el JS no llega a inicializar, sin estas
 * reglas las slides se apilan verticalmente. Forzamos row + nowrap y width auto
 * en cada slide para que el layout se vea correcto siempre.
 */
.output-mt__swiper {
	overflow: hidden;
}

.output-mt__swiper .swiper-wrapper {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	width: 100%;
}

.output-mt__swiper .swiper-slide {
	flex-shrink: 0;
	height: auto;
	width: auto;
}

/* Header: título + flechas */
.output-mt__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 40px;
}

.output-mt__title {
	margin: 0;
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 800;
	line-height: 1;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.output-mt__title-accent {
	color: var(--output-pink);
}

/* Flechas (misma forma que Concerts Slider) */
.output-mt__nav {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
	padding-top: 4px;
}

.output-mt__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1.5px solid var(--output-pink);
	background: transparent;
	color: #fff;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.2s ease;
}

.output-mt__arrow:hover {
	background: var(--output-pink);
}

.output-mt__arrow.swiper-button-disabled {
	opacity: 0.35;
	pointer-events: none;
}

/* Slide */
.output-mt__slide {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

/*
 * Segmento de línea horizontal. left:0 / right:0 abarca el ancho total del
 * slide. Con spaceBetween:0 los segmentos de slides adyacentes se tocan y
 * forman una línea continua.
 * top: 16px (año) + 10px (gap flex) + 6px (mitad dot 12px) = 32px.
 */
.output-mt__slide::before {
	content: '';
	position: absolute;
	top: 32px;
	left: 0;
	right: 0;
	height: 2px;
	background: rgba(255, 255, 255, 0.12);
	z-index: 0;
	pointer-events: none;
}

/* Ruler: año + punto, apilados y centrados */
.output-mt__ruler {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 0 16px 16px;
	position: relative;
	z-index: 1;
}

.output-mt__year {
	height: 16px;
	line-height: 16px;
	font-size: 0.85rem;
	font-weight: 800;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.output-mt__dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: var(--output-pink);
	box-shadow: 0 0 0 3px rgba(236, 30, 99, 0.25);
	flex-shrink: 0;
	position: relative;
	z-index: 2;
}

/* Tarjeta (imagen + texto) */
.output-mt__card {
	padding: 0 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.output-mt__thumb {
	aspect-ratio: 3 / 4;
	background-size: cover;
	background-position: center top;
	background-color: #1a1a26;
	border-radius: 8px;
	overflow: hidden;
	transition: transform 0.25s ease;
}

.output-mt__slide:hover .output-mt__thumb {
	transform: translateY(-3px);
}

.output-mt__thumb--empty {
	background: linear-gradient(135deg, #1a1a26 0%, #2a1a2e 100%);
}

.output-mt__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.output-mt__artist {
	display: block;
	font-size: 0.875rem;
	font-weight: 800;
	color: #fff;
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-transform: uppercase;
}

.output-mt__venue,
.output-mt__city {
	display: block;
	font-size: 0.75rem;
	color: rgba(255, 255, 255, 0.65);
	line-height: 1.4;
}

@media (max-width: 599px) {
	.output-mt__header {
		flex-direction: column;
		align-items: flex-start;
	}

	.output-mt__nav {
		padding-top: 0;
	}
}

/* ================================================================
   Widget: Album Gallery — "Álbumes por Concierto"
   ================================================================ */

.output-ag {
	width: 100%;
	padding: 60px 0;
}

/* Header */
.output-ag__header {
	margin-bottom: 2rem;
}

.output-ag__title-wrap {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex-wrap: wrap;
}

.output-ag__title {
	margin: 0;
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 800;
	line-height: 1;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.output-ag__title-accent {
	color: #5F73D8;
}

.output-ag__title-line {
	flex: 1;
	min-width: 60px;
	height: 3px;
	background: #5F73D8;
	border-radius: 2px;
	position: relative;
	overflow: hidden;
}

.output-ag__title-line::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent 0%, #fff 50%, transparent 100%);
	animation: output-title-line-travel 2.5s linear infinite;
}

/* Filters */
.output-ag__filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-bottom: 2rem;
}

.output-ag__filter-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	flex: 1;
}

.output-ag__filter {
	display: inline-flex;
	align-items: center;
	padding: 0.3em 1em;
	border-radius: 99px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: transparent;
	color: rgba(255, 255, 255, 0.65);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.output-ag__filter--active {
	background-color: #3D4D9C;
	border-color: #3D4D9C;
	color: #fff;
}

.output-ag__filter:hover:not(.output-ag__filter--active) {
	border-color: rgba(255, 255, 255, 0.55);
	color: #fff;
}

.output-ag__filter-controls {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-shrink: 0;
}

.output-ag__artist-select {
	appearance: none;
	-webkit-appearance: none;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 8px;
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 0.45em 1em 0.45em 0.85em;
	cursor: pointer;
	min-width: 120px;
	transition: border-color 0.2s;
}

.output-ag__artist-select:focus {
	outline: none;
	border-color: #5F73D8;
}

.output-ag__artist-select option {
	background: #14141a;
	color: #fff;
}

.output-ag__search-wrap {
	position: relative;
}

.output-ag__search-icon {
	position: absolute;
	left: 1rem;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	color: rgba(255, 255, 255, 0.55);
	pointer-events: none;
}

.output-ag__search {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 8px;
	color: #fff;
	font-size: 0.85rem;
	padding: 0.55em 1em 0.55em 2.8em !important;
	width: 240px !important;
	transition: border-color 0.2s;
	box-sizing: border-box;
}

.output-ag__search::placeholder {
	color: rgba(255, 255, 255, 0.35);
}

.output-ag__search:focus {
	outline: none;
	border-color: #5F73D8;
}

/* Grid */
.output-ag__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.output-ag__card--hidden {
	display: none;
}

.output-ag__card--filtered-out {
	display: none !important;
}

/* Card */
.output-ag__card {
	position: relative;
	padding-top: 22px; /* alto exacto de la pestaña, sin superposición */
}

.output-ag__card-link {
	display: block;
	background: linear-gradient(135deg, #22222d 0%, #14141a 60%, #0f0f16 100%);
	border-radius: 0 10px 10px 10px !important;
	overflow: hidden;
	text-decoration: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	min-height: 260px;
}

/* Pestaña única estilo carpeta — alineada al borde izquierdo de la card */
.output-ag__tab {
	position: absolute;
	top: 0;
	left: 0;
	width: 90px;
	height: 22px;
	border-radius: 12px 12px 0 0;
	background: linear-gradient(180deg, #7B8EE8 0%, #5F73D8 100%);
	z-index: 2;
	pointer-events: none;
	box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.08) inset;
	transition: transform 0.25s ease;
}

/* Hover en el article: card + pestaña se levantan sincronizadamente */
.output-ag__card:hover .output-ag__card-link,
.output-ag__card:hover .output-ag__tab {
	transform: translateY(-5px);
}

.output-ag__card:hover .output-ag__card-link {
	box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45);
}

/* Body — layout tipo carpeta, con más aire y meta apilada */
.output-ag__body {
	padding: 1.75rem 1.5rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	height: 100%;
}

.output-ag__prefix {
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	color: #5F73D8;
	text-transform: uppercase;
	line-height: 1;
	margin-bottom: 0.35rem;
}

.output-ag__artist {
	display: block;
	font-size: 1.35rem;
	font-weight: 900;
	letter-spacing: -0.02em;
	color: #fff;
	text-transform: uppercase;
	line-height: 1.1;
}

.output-ag__meta {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	margin-top: 0.9rem;
}

.output-ag__city,
.output-ag__date {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.72);
	font-weight: 500;
}

.output-ag__footer-row {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-top: auto;
	padding-top: 1rem;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.output-ag__count {
	font-size: 0.78rem;
	font-weight: 700;
	color: #5F73D8;
}

.output-ag__cta {
	font-size: 0.8rem;
	font-weight: 700;
	color: #5F73D8;
	letter-spacing: 0.02em;
	transition: opacity 0.2s;
}

.output-ag__card-link:hover .output-ag__cta {
	opacity: 0.8;
}

/* Footer / load more */
.output-ag__footer {
	display: flex;
	justify-content: center;
	margin-top: 2.5rem;
}

.output-ag__load-more {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75em 2.5em;
	border: 1px solid #fff;
	border-radius: 99px;
	background: transparent;
	color: #fff;
	font-size: 0.88rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.output-ag__load-more:hover {
	background: #3D4D9C;
	border-color: #3D4D9C;
}

/* Responsive */
@media (max-width: 900px) {
	.output-ag__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.output-ag__filter-controls {
		width: 100%;
	}

	.output-ag__search {
		width: 100%;
	}
}

@media (max-width: 560px) {
	.output-ag__grid {
		grid-template-columns: 1fr;
	}

	.output-ag__filters {
		flex-direction: column;
		align-items: flex-start;
	}
}