/**
 * BVQ Blog Grid — tbo Soluciones Digitales
 */

.bvq-bg {
	--bvq-columns: 3;
	--bvq-gap: 24px;
	--bvq-split: 42%;
	--bvq-split-gap: 32px;
	--bvq-bento-row: 200px;
	--bvq-sticky-top: 24px;
	--bvq-border: rgba(0, 0, 0, .08);
	--bvq-muted: rgba(0, 0, 0, .55);
	--bvq-accent: #12274a;
	--bvq-on-accent: #fff;
	position: relative;
}

.bvq-bg *,
.bvq-bg *::before,
.bvq-bg *::after {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------------
 * Pestañas
 * ------------------------------------------------------------------ */

.bvq-bg__filters {
	margin-bottom: 32px;
}

/*
 * Con el buscador dentro, el bloque se parte en dos: fechas a la izquierda y
 * buscador en el hueco de la derecha. El buscador es hermano del contenedor
 * que el AJAX repinta, así que nunca pierde el foco al filtrar.
 */
.bvq-bg__filters--with-search {
	display: flex;
	align-items: flex-start;
	gap: 24px;
}

.bvq-bg__filters--with-search .bvq-bg__filters-main {
	flex: 1 1 auto;
	min-width: 0;
}

.bvq-bg__filters--with-search .bvq-bg__filters-aside {
	flex: 0 1 340px;
	min-width: 0;
}

.bvq-bg__filters--with-search .bvq-bg__search {
	max-width: none;
}

/* Sin años ni meses que mostrar, el buscador se queda solo y a lo ancho. */
.bvq-bg__filters.is-empty .bvq-bg__filters-main {
	display: none;
}

.bvq-bg__filters.is-empty .bvq-bg__filters-aside {
	flex-basis: 100%;
}

@media (max-width: 767px) {
	.bvq-bg__filters--with-search {
		flex-direction: column;
	}

	.bvq-bg__filters--with-search .bvq-bg__filters-aside {
		flex-basis: auto;
		width: 100%;
	}
}

/* Caja del bloque de fechas, con su rótulo encima. */
.bvq-bg__filters--boxed {
	padding: 22px 26px;
	border: 1px solid var(--bvq-border);
	border-radius: 18px;
	background: #fff;
}

.bvq-bg__filters-label {
	display: block;
	margin-bottom: 16px;
	color: var(--bvq-muted);
	font-size: .72em;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/*
 * Meses «en texto»: sin pastilla, como una línea de enlaces bajo los años.
 * El activo se distingue por peso y color, no por fondo.
 */
.bvq-bg__filters--months-plain .bvq-bg__tabs--months {
	gap: 22px;
	margin-top: 18px;
}

.bvq-bg__filters--months-plain .bvq-bg__tab--month {
	padding: 0;
	border: 0;
	background: none;
	color: var(--bvq-muted);
}

.bvq-bg__filters--months-plain .bvq-bg__tab--month:hover {
	color: var(--bvq-accent);
}

.bvq-bg__filters--months-plain .bvq-bg__tab--month.is-active {
	background: none;
	color: var(--bvq-accent);
	font-weight: 700;
}

.bvq-bg__tabs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.bvq-bg__tabs[hidden] {
	display: none;
}

.bvq-bg__tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font: inherit;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.bvq-bg__tab:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.bvq-bg__filters--boxed .bvq-bg__tabs--years .bvq-bg__tab {
	padding: 10px 20px;
	border-color: var(--bvq-border);
}

.bvq-bg__tab.is-active {
	background: rgba(0, 0, 0, .07);
	font-weight: 600;
}

.bvq-bg__filters--boxed .bvq-bg__tabs--years .bvq-bg__tab.is-active {
	background: var(--bvq-accent);
	border-color: var(--bvq-accent);
	color: var(--bvq-on-accent);
}

.bvq-bg__tab-count {
	font-size: .8em;
	opacity: .7;
}

.bvq-bg__tabs--months,
.bvq-bg__tabs--years[data-bvq-years] {
	margin-top: 12px;
	font-size: .95em;
}

/* Deslizamiento horizontal en móvil. */
@media (max-width: 767px) {
	.bvq-tabs-scroll-yes .bvq-bg__tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.bvq-tabs-scroll-yes .bvq-bg__tabs::-webkit-scrollbar {
		display: none;
	}

	.bvq-tabs-scroll-yes .bvq-bg__tab {
		flex: 0 0 auto;
	}
}

/* ---------------------------------------------------------------------
 * Pastillas de filtro (término / autor)
 * ------------------------------------------------------------------ */

.bvq-bg__vfilters {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 32px;
}

/* Caja opcional alrededor del buscador y las pastillas. */
.bvq-bg__vfilters--boxed {
	padding: 16px 18px;
	border: 1px solid var(--bvq-border);
	border-radius: 18px;
	background: rgba(0, 0, 0, .02);
}

.bvq-bg__search {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 560px;
}

.bvq-bg__search-input {
	width: 100%;
	min-width: 0;
	padding: 13px 46px 13px 22px;
	border: 1px solid var(--bvq-border);
	border-radius: 999px;
	background: #fff;
	color: inherit;
	font: inherit;
	line-height: 1.3;
	appearance: none;
}

.bvq-bg__search-input::placeholder {
	color: var(--bvq-muted);
}

.bvq-bg__search-input:focus {
	outline: 2px solid var(--bvq-accent);
	outline-offset: -1px;
}

/* La lupa se superpone al campo, dentro del redondeo. */
.bvq-bg__search-submit {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--bvq-muted);
	cursor: pointer;
	transition: color .2s ease, background-color .2s ease;
}

.bvq-bg__search-submit:hover {
	color: var(--bvq-accent);
	background: rgba(0, 0, 0, .05);
}

.bvq-bg__vfilter-reset {
	align-self: flex-start;
	color: inherit;
	font-size: .85em;
	text-decoration: underline;
	opacity: .75;
	cursor: pointer;
}

.bvq-bg__vfilter-reset:hover {
	opacity: 1;
}

.bvq-bg__vfilter-reset.is-hidden {
	display: none;
}

.bvq-bg__vfilter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.bvq-bg__vfilter-label {
	font-size: .8em;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	opacity: .7;
}

.bvq-bg__pills {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	flex: 1 1 auto;
}

.bvq-bg__pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 22px;
	border: 1px solid var(--bvq-border);
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font: inherit;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.bvq-bg__pill:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.bvq-bg__pill:hover {
	border-color: currentColor;
}

/* Sólida en el color de acento. Se cambia entero desde Estilo → Pastillas de
 * filtro, incluido el color del texto sobre el fondo activo. */
.bvq-bg__pill.is-active {
	background: var(--bvq-accent);
	border-color: var(--bvq-accent);
	color: var(--bvq-on-accent);
	font-weight: 600;
}

.bvq-bg__pill-count {
	font-size: .8em;
	opacity: .7;
}

@media (max-width: 767px) {
	.bvq-tabs-scroll-yes .bvq-bg__pills {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.bvq-tabs-scroll-yes .bvq-bg__pills::-webkit-scrollbar {
		display: none;
	}

	.bvq-tabs-scroll-yes .bvq-bg__pill {
		flex: 0 0 auto;
	}
}

/* ---------------------------------------------------------------------
 * Estructura general
 * ------------------------------------------------------------------ */

.bvq-bg__body {
	position: relative;
}

.bvq-bg__main {
	min-width: 0;
}

.bvq-bg.is-loading .bvq-bg__main {
	opacity: .45;
	pointer-events: none;
	transition: opacity .2s ease;
}

.bvq-bg__empty {
	padding: 40px 20px;
	border: 1px dashed var(--bvq-border);
	border-radius: 12px;
	text-align: center;
	color: var(--bvq-muted);
}

.bvq-bg__credit {
	margin-top: 24px;
	font-size: .8em;
	text-align: center;
	opacity: .7;
}

.bvq-bg__credit a {
	color: inherit;
	text-decoration: none;
}

.bvq-bg__credit a:hover {
	text-decoration: underline;
}

/* ---------------------------------------------------------------------
 * Card
 * ------------------------------------------------------------------ */

.bvq-bg__card {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
	transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, border-color .25s ease;
}

.bvq-bg--card-boxed .bvq-bg__card {
	border: 1px solid var(--bvq-border);
	background: #fff;
}

.bvq-bg--card-clean .bvq-bg__card {
	background: transparent;
}

.bvq-bg--card-clean .bvq-bg__card-content {
	padding-left: 0;
	padding-right: 0;
}

/*
 * El enlace que cubre toda la card va POR DEBAJO del contenido: el contenido
 * ignora el puntero (pointer-events: none) para que los clics lleguen hasta
 * aquí, salvo en sus propios enlaces, que sí lo recuperan.
 */
.bvq-bg__card-overlay-link {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.bvq-bg__card-content {
	position: relative;
	z-index: 2;
	padding: 20px;
	pointer-events: none;
}

.bvq-bg__card-content a,
.bvq-bg__card-content button {
	pointer-events: auto;
}

.bvq-bg:not(.bvq-bg--linkable) .bvq-bg__card-content {
	pointer-events: auto;
}

/* Media. */
.bvq-bg__card-media {
	position: relative;
	overflow: hidden;
	margin: 0;
	background: rgba(0, 0, 0, .04);
}

.bvq-bg__card-media > a {
	display: block;
	width: 100%;
	height: 100%;
}

.bvq-bg__card-media--ratio {
	aspect-ratio: var(--bvq-ratio, 16 / 9);
}

.bvq-bg__card-media::after {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease;
}

.bvq-bg__card-img {
	display: block;
	transition: transform .4s ease;
}

/*
 * El ajuste de la imagen se fuerza desde el propio widget: casi todos los temas
 * declaran `img { height: auto }` —a menudo con !important— y eso dejaba la
 * imagen a su altura natural con una franja vacía debajo del recuadro.
 */
.bvq-bg .bvq-bg__card-media .bvq-bg__card-img {
	width: 100% !important;
	max-width: none;
	/* Contra un contenedor de altura automática esto se resuelve como `auto`,
	   así que vale igual con proporción fija, con alto propio y sin ninguno. */
	height: 100% !important;
	object-fit: var(--bvq-fit, cover);
	object-position: var(--bvq-fit-pos, center);
}

/*
 * La ampliación se declara por contexto (listado o post fijado) mediante
 * --bvq-zoom, para que cada uno pueda llevar la suya. Sin valor, scale(1) no
 * hace nada.
 */
.bvq-bg__card:hover .bvq-bg__card-img {
	transform: scale(var(--bvq-zoom, 1));
}

.bvq-hover-lift .bvq-bg__card:hover {
	transform: translateY(-4px);
}

.bvq-hover-zoom .bvq-bg__card:hover {
	transform: scale(1.02);
}

/* Contenido. */
.bvq-bg__card-terms {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 10px;
}

.bvq-bg__card-term {
	display: inline-block;
	color: inherit;
	font-size: .78em;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	opacity: .8;
}

.bvq-bg__card-title {
	margin: 0 0 10px;
	line-height: 1.3;
}

.bvq-bg__card-title a {
	color: inherit;
	text-decoration: none;
}

.bvq-bg__card-excerpt {
	margin-bottom: 16px;
	color: var(--bvq-muted);
	line-height: 1.6;
}

.bvq-bg__card-excerpt p {
	margin: 0;
}

.bvq-bg__card-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
	color: var(--bvq-muted);
	font-size: .85em;
}

.bvq-bg__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.bvq-bg__card-avatar {
	border-radius: 50%;
	vertical-align: middle;
}

.bvq-bg__meta-sep {
	opacity: .5;
}

/* Fila inferior: metadatos (si van al pie) y botón, uno a cada lado. */
.bvq-bg__card-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: auto;
}

.bvq-bg__card-bottom .bvq-bg__card-meta {
	margin-bottom: 0;
}

.bvq-bg__card-footer {
	margin-left: auto;
}

.bvq-bg__card-bottom > .bvq-bg__card-footer:only-child {
	margin-left: 0;
}

.bvq-bg__button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border: 1px solid var(--bvq-border);
	border-radius: 8px;
	color: inherit;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.bvq-bg__button-icon {
	transition: transform .2s ease;
}

.bvq-bg__button:hover .bvq-bg__button-icon {
	transform: translateX(3px);
}

.bvq-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.bvq-bg__button--arrow {
	justify-content: center;
	min-width: 56px;
	padding-left: 0;
	padding-right: 0;
}

/* Altura de las cards: igualada por fila o ajustada al contenido. */
.bvq-cards-stretch .bvq-bg__card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.bvq-cards-stretch .bvq-bg__card-content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

/*
 * Sin igualar, las celdas de la rejilla no deben estirar la card: si no, queda
 * un recuadro vacío bajo el contenido cuando la card vecina es más alta.
 */
.bvq-cards-auto .bvq-bg__list--grid,
.bvq-cards-auto .bvq-bg__list--bento,
.bvq-cards-auto .bvq-bg__list--angled-cards {
	align-items: start;
}

/* Skin «overlay»: texto sobre la imagen. */
.bvq-bg--card-overlay .bvq-bg__card {
	display: block;
	color: #fff;
}

.bvq-bg--card-overlay .bvq-bg__card-media {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
}

.bvq-bg--card-overlay .bvq-bg__card-media::after {
	opacity: 1;
	background: linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .25) 55%, rgba(0, 0, 0, 0) 100%);
}

.bvq-bg--card-overlay .bvq-bg__card-content {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 320px;
}

.bvq-bg--card-overlay .bvq-bg__card-excerpt,
.bvq-bg--card-overlay .bvq-bg__card-meta {
	color: rgba(255, 255, 255, .85);
}

/* ---------------------------------------------------------------------
 * Plantilla: grid
 * ------------------------------------------------------------------ */

/*
 * --bvq-cols-d/t/m los emite el widget solo cuando hay menos entradas que
 * columnas. Sin ellos manda --bvq-columns, que es lo que fija Elementor en cada
 * breakpoint.
 */
.bvq-bg__list--grid {
	display: grid;
	grid-template-columns: repeat(var(--bvq-cols-d, var(--bvq-columns)), minmax(0, 1fr));
	gap: var(--bvq-gap);
}

/* ---------------------------------------------------------------------
 * Plantilla: masonry
 * ------------------------------------------------------------------ */

.bvq-bg__list--masonry {
	column-count: var(--bvq-cols-d, var(--bvq-columns));
	column-gap: var(--bvq-gap);
}

@media (max-width: 1024px) {
	.bvq-bg__list--grid {
		grid-template-columns: repeat(var(--bvq-cols-t, var(--bvq-columns)), minmax(0, 1fr));
	}

	.bvq-bg__list--masonry {
		column-count: var(--bvq-cols-t, var(--bvq-columns));
	}
}

@media (max-width: 767px) {
	.bvq-bg__list--grid {
		grid-template-columns: repeat(var(--bvq-cols-m, var(--bvq-columns)), minmax(0, 1fr));
	}

	.bvq-bg__list--masonry {
		column-count: var(--bvq-cols-m, var(--bvq-columns));
	}
}

.bvq-bg__list--masonry .bvq-bg__card {
	display: inline-block;
	width: 100%;
	margin-bottom: var(--bvq-gap);
	break-inside: avoid;
}

/* ---------------------------------------------------------------------
 * Plantilla: lista
 * ------------------------------------------------------------------ */

.bvq-bg__list--list {
	display: flex;
	flex-direction: column;
	gap: var(--bvq-gap);
}

.bvq-bg__list--list .bvq-bg__card {
	display: flex;
	flex-direction: row;
	align-items: stretch;
}

.bvq-bg__list--list .bvq-bg__card-media {
	flex: 0 0 35%;
	max-width: 35%;
}

.bvq-bg__list--list .bvq-bg__card-media--ratio {
	aspect-ratio: auto;
}

.bvq-bg__list--list .bvq-bg__card-content {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.bvq-bg__list--media-right .bvq-bg__card {
	flex-direction: row-reverse;
}

.bvq-bg__list--media-none .bvq-bg__card-media {
	display: none;
}

@media (max-width: 767px) {
	.bvq-bg__list--list .bvq-bg__card {
		flex-direction: column;
	}

	.bvq-bg__list--list .bvq-bg__card-media {
		flex: 0 0 auto !important;
		max-width: 100% !important;
		aspect-ratio: var(--bvq-ratio, 16 / 9);
	}
}

/* ---------------------------------------------------------------------
 * Plantilla: tarjetas diagonales
 * ------------------------------------------------------------------ */

.bvq-bg__list--angled-cards {
	display: grid;
	grid-template-columns: repeat(var(--bvq-cols-d, var(--bvq-columns)), minmax(0, 1fr));
	gap: var(--bvq-gap);
	align-items: start;
}

.bvq-bg__list--angled-cards .bvq-bg__card {
	min-height: 540px;
	background: #fff;
	border: 1px solid var(--bvq-border);
	border-radius: 0;
	box-shadow: 0 1px 0 rgba(0, 0, 0, .02);
	padding-top: 20px;
}

.bvq-bg__list--angled-cards .bvq-bg__card-media,
.bvq-bg__list--angled-cards .bvq-bg__card-media--ratio {
	position: absolute;
	top: 20px;
	right: 20px;
	width: min(58%, 240px);
	height: 42%;
	margin: 0;
	aspect-ratio: auto;
	clip-path: polygon(0 0, 100% 0, 100% 100%);
	background: rgba(0, 0, 0, .04);
}

.bvq-bg__list--angled-cards .bvq-bg__card-content {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 100%;
	padding: 44% 28px 28px;
}

.bvq-bg__list--angled-cards .bvq-bg__card-terms {
	margin-bottom: 16px;
	font-size: .78em;
	letter-spacing: .14em;
}

.bvq-bg__list--angled-cards .bvq-bg__card-title {
	margin-bottom: 18px;
	font-size: clamp(1.7rem, 2vw, 2.5rem);
	line-height: 1.08;
}

.bvq-bg__list--angled-cards .bvq-bg__card-excerpt {
	max-width: 78%;
	font-size: 1.03rem;
}

.bvq-bg__list--angled-cards .bvq-bg__card-meta,
.bvq-bg__list--angled-cards .bvq-bg__card-footer {
	display: none;
}

/* ---------------------------------------------------------------------
 * Plantilla: lista editorial oscura
 * ------------------------------------------------------------------ */

.bvq-bg__list--dark-list {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 12px 0 4px;
	background: #242f45;
	color: #fff;
	counter-reset: bvq-dark-row;
}

.bvq-bg__list--dark-list .bvq-bg__card {
	display: grid;
	grid-template-columns: 72px minmax(210px, 280px) minmax(0, 1fr) auto;
	gap: 24px 32px;
	align-items: center;
	padding: 34px 28px;
	border-top: 1px solid rgba(255, 255, 255, .14);
	border-radius: 0;
	background: transparent;
	color: inherit;
	box-shadow: none;
}

.bvq-bg__list--dark-list .bvq-bg__card:first-child {
	border-top: 0;
}

.bvq-bg__list--dark-list .bvq-bg__card::before {
	counter-increment: bvq-dark-row;
	content: counter(bvq-dark-row, decimal-leading-zero);
	grid-column: 1;
	color: rgba(255, 255, 255, .9);
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: .04em;
}

.bvq-bg__list--dark-list .bvq-bg__card-media,
.bvq-bg__list--dark-list .bvq-bg__card-media--ratio {
	grid-column: 2;
	width: 100%;
	height: 96px;
	margin: 0;
	border-radius: 999px;
	aspect-ratio: auto;
}

.bvq-bg__list--dark-list .bvq-bg__card-content {
	grid-column: 3 / -1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 32px;
	row-gap: 12px;
	align-items: center;
	padding: 0;
}

.bvq-bg__list--dark-list .bvq-bg__card-terms,
.bvq-bg__list--dark-list .bvq-bg__card-meta {
	display: none;
}

.bvq-bg__list--dark-list .bvq-bg__card-title {
	grid-column: 1;
	margin: 0;
	font-size: clamp(1.8rem, 2.8vw, 3.1rem);
	line-height: .98;
	color: #fff;
}

.bvq-bg__list--dark-list .bvq-bg__card-excerpt {
	grid-column: 1;
	max-width: 56rem;
	margin-bottom: 0;
	color: rgba(255, 255, 255, .8);
	font-size: 1.05rem;
}

.bvq-bg__list--dark-list .bvq-bg__card-bottom {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
	justify-self: end;
	margin-left: 0;
	display: flex;
	justify-content: flex-end;
}

.bvq-bg__list--dark-list .bvq-bg__button {
	width: 58px;
	height: 58px;
	padding: 0;
	border-radius: 50%;
	border-color: rgba(255, 255, 255, .28);
	background: transparent;
	color: #fff;
	justify-content: center;
}

.bvq-bg__list--dark-list .bvq-bg__button-icon {
	font-size: 1.2rem;
	line-height: 1;
}

@media (max-width: 1024px) {
	.bvq-bg__list--angled-cards {
		grid-template-columns: repeat(var(--bvq-cols-t, var(--bvq-columns)), minmax(0, 1fr));
	}

	.bvq-bg__list--dark-list .bvq-bg__card {
		grid-template-columns: 56px minmax(170px, 240px) minmax(0, 1fr);
	}

	.bvq-bg__list--dark-list .bvq-bg__card-bottom {
		grid-column: 2;
		grid-row: 1 / span 2;
	}
}

@media (max-width: 767px) {
	.bvq-bg__list--angled-cards {
		grid-template-columns: 1fr;
	}

	.bvq-bg__list--angled-cards .bvq-bg__card {
		min-height: 460px;
	}

	.bvq-bg__list--angled-cards .bvq-bg__card-media,
	.bvq-bg__list--angled-cards .bvq-bg__card-media--ratio {
		width: min(72%, 240px);
		height: 34%;
	}

	.bvq-bg__list--angled-cards .bvq-bg__card-content {
		padding: 40% 20px 24px;
	}

	.bvq-bg__list--angled-cards .bvq-bg__card-excerpt {
		max-width: 100%;
	}

	.bvq-bg__list--dark-list {
		padding: 0;
	}

	.bvq-bg__list--dark-list .bvq-bg__card {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		padding: 24px 20px;
	}

	.bvq-bg__list--dark-list .bvq-bg__card::before {
		grid-column: auto;
	}

	.bvq-bg__list--dark-list .bvq-bg__card-media,
	.bvq-bg__list--dark-list .bvq-bg__card-media--ratio {
		grid-column: auto;
		width: 100%;
		height: 180px;
	}

	.bvq-bg__list--dark-list .bvq-bg__card-content {
		display: block;
		grid-column: auto;
	}

	.bvq-bg__list--dark-list .bvq-bg__card-title {
		margin-top: 0;
	}

	.bvq-bg__list--dark-list .bvq-bg__card-footer {
		grid-column: auto;
		grid-row: auto;
		justify-self: start;
		margin-top: 6px;
	}
}

/* ---------------------------------------------------------------------
 * Plantilla: bento
 * ------------------------------------------------------------------ */

.bvq-bg__list--bento {
	display: grid;
	grid-template-columns: repeat(var(--bvq-cols-d, var(--bvq-columns)), minmax(0, 1fr));
	grid-auto-rows: var(--bvq-bento-row);
	gap: var(--bvq-gap);
}

@media (max-width: 1024px) {
	.bvq-bg__list--bento {
		grid-template-columns: repeat(var(--bvq-cols-t, var(--bvq-columns)), minmax(0, 1fr));
	}
}

.bvq-bg__list--bento .bvq-bg__card {
	height: 100%;
}

/* Presentación apilada: la imagen se estira hasta llenar la celda. */
.bvq-bg__list--bento-cell-stacked .bvq-bg__card-media,
.bvq-bg__list--bento-cell-stacked .bvq-bg__card-media--ratio {
	flex: 1 1 auto;
	aspect-ratio: auto;
	min-height: 0;
}

.bvq-bg__list--bento .bvq-bg__card-content {
	min-height: 0;
}

/*
 * Presentación a card completa: la imagen cubre toda la celda y el texto va
 * encima. Es lo que hace que un bento se vea bien, porque las celdas tienen
 * proporciones muy distintas entre sí y una imagen con su propio alto nunca
 * encaja en todas.
 */
.bvq-bg__list--bento-cell-overlay .bvq-bg__card {
	display: block;
	position: relative;
}

.bvq-bg__list--bento-cell-overlay .bvq-bg__card-media,
.bvq-bg__list--bento-cell-overlay .bvq-bg__card-media--ratio {
	position: absolute;
	inset: 0;
	margin: 0;
	height: 100%;
	aspect-ratio: auto;
}

.bvq-bg__list--bento-cell-overlay .bvq-bg__card-content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
}

/* Sin imagen no hay nada que velar ni sobre lo que escribir en blanco. */
.bvq-bg__list--bento-cell-overlay .bvq-bg__card:not(.bvq-bg__card--no-media) {
	color: #fff;
}

.bvq-bg__list--bento-cell-overlay .bvq-bg__card:not(.bvq-bg__card--no-media) .bvq-bg__card-media::after {
	opacity: 1;
	background: linear-gradient(to top, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .3) 55%, rgba(0, 0, 0, 0) 100%);
}

.bvq-bg__list--bento-cell-overlay .bvq-bg__card:not(.bvq-bg__card--no-media) .bvq-bg__card-excerpt,
.bvq-bg__list--bento-cell-overlay .bvq-bg__card:not(.bvq-bg__card--no-media) .bvq-bg__card-meta {
	color: rgba(255, 255, 255, .85);
}

/* Patrón D: composición editorial tipo portada. */
.bvq-bg__list--bento-d {
	grid-auto-rows: clamp(180px, 18vw, 250px);
	align-items: stretch;
}

.bvq-bg__list--bento-d .bvq-bg__card {
	overflow: hidden;
	border: 1px solid rgba(18, 40, 80, .12);
	border-radius: 28px;
	background: #fff;
	box-shadow: 0 18px 40px rgba(15, 23, 42, .06);
	color: #19233a;
}

.bvq-bg__list--bento-d .bvq-bg__card-media,
.bvq-bg__list--bento-d .bvq-bg__card-media--ratio {
	position: relative;
	inset: auto;
	margin: 0;
	width: 100%;
	height: auto;
	aspect-ratio: auto;
	background: #dfe6f1;
}

.bvq-bg__list--bento-d .bvq-bg__card-content {
	position: relative;
	z-index: 2;
	padding: 26px 30px 30px;
	min-height: 0;
	color: inherit;
}

.bvq-bg__list--bento-d .bvq-bg__card-terms {
	margin-bottom: 14px;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .18em;
	color: #2957c5;
}

.bvq-bg__list--bento-d .bvq-bg__card-title {
	margin-bottom: 18px;
	font-size: clamp(1.9rem, 3vw, 3.9rem);
	line-height: .96;
	letter-spacing: -.04em;
}

.bvq-bg__list--bento-d .bvq-bg__card-excerpt {
	max-width: 42rem;
	margin-bottom: 20px;
	color: #667085;
	font-size: 1.08rem;
	line-height: 1.55;
}

.bvq-bg__list--bento-d .bvq-bg__card-meta {
	margin-bottom: 14px;
	color: #6b7280;
	font-size: .85rem;
}

.bvq-bg__list--bento-d .bvq-bg__card-bottom {
	margin-top: 0;
}

.bvq-bg__list--bento-d .bvq-bg__button {
	border: 0;
	background: transparent;
	padding: 0;
	border-radius: 0;
	font-weight: 700;
	color: #19233a;
}

.bvq-bg__list--bento-d .bvq-bg__button-icon {
	font-size: 1rem;
}

.bvq-bg__list--bento-d .bvq-bg__card:nth-child(3n + 1) {
	grid-column: span 2;
	grid-row: span 2;
	display: flex;
	flex-direction: column;
}

.bvq-bg__list--bento-d .bvq-bg__card:nth-child(3n + 1) .bvq-bg__card-media,
.bvq-bg__list--bento-d .bvq-bg__card:nth-child(3n + 1) .bvq-bg__card-media--ratio {
	flex: 1 1 auto;
	aspect-ratio: 16 / 10;
	min-height: 60%;
}

.bvq-bg__list--bento-d .bvq-bg__card:nth-child(3n + 1) .bvq-bg__card-content {
	padding-top: 22px;
	margin-top: auto;
}

.bvq-bg__list--bento-d .bvq-bg__card:nth-child(3n + 1) .bvq-bg__card-title {
	font-size: clamp(2.4rem, 4vw, 4.8rem);
	max-width: 14ch;
}

.bvq-bg__list--bento-d .bvq-bg__card:nth-child(3n + 2),
.bvq-bg__list--bento-d .bvq-bg__card:nth-child(3n + 3) {
	grid-column: span 2;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	align-items: stretch;
	min-height: 100%;
}

.bvq-bg__list--bento-d .bvq-bg__card:nth-child(3n + 2) .bvq-bg__card-content,
.bvq-bg__list--bento-d .bvq-bg__card:nth-child(3n + 3) .bvq-bg__card-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 28px;
}

.bvq-bg__list--bento-d .bvq-bg__card:nth-child(3n + 2) .bvq-bg__card-media,
.bvq-bg__list--bento-d .bvq-bg__card:nth-child(3n + 2) .bvq-bg__card-media--ratio,
.bvq-bg__list--bento-d .bvq-bg__card:nth-child(3n + 3) .bvq-bg__card-media,
.bvq-bg__list--bento-d .bvq-bg__card:nth-child(3n + 3) .bvq-bg__card-media--ratio {
	min-height: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.bvq-bg__list--bento-d .bvq-bg__card:nth-child(3n + 2) .bvq-bg__card-title,
.bvq-bg__list--bento-d .bvq-bg__card:nth-child(3n + 3) .bvq-bg__card-title {
	font-size: clamp(1.4rem, 2vw, 2.4rem);
	margin-bottom: 14px;
}

.bvq-bg__list--bento-d .bvq-bg__card:nth-child(3n + 2) .bvq-bg__card-excerpt,
.bvq-bg__list--bento-d .bvq-bg__card:nth-child(3n + 3) .bvq-bg__card-excerpt {
	max-width: 100%;
	font-size: .98rem;
}

.bvq-bg__list--bento-d .bvq-bg__card:nth-child(3n + 2) .bvq-bg__card-footer,
.bvq-bg__list--bento-d .bvq-bg__card:nth-child(3n + 3) .bvq-bg__card-footer {
	margin-top: 8px;
}

.bvq-bg__list--bento-d .bvq-bg__card:nth-child(3n + 2) .bvq-bg__card-bottom,
.bvq-bg__list--bento-d .bvq-bg__card:nth-child(3n + 3) .bvq-bg__card-bottom {
	margin-top: auto;
}

/*
 * Patrón A: bloques de cuatro celdas que llenan exactamente una rejilla de 4x2
 * — una grande de 2x2, una ancha de 2x1 y dos pequeñas—. Pensado para 4
 * columnas; con otro número sigue funcionando, pero deja de encajar al milímetro.
 */
.bvq-bg__list--bento-a .bvq-bg__card:nth-child(4n + 1) {
	grid-column: span 2;
	grid-row: span 2;
}

.bvq-bg__list--bento-a .bvq-bg__card:nth-child(4n + 2) {
	grid-column: span 2;
}

/* Patrón B: alternancia en zigzag. */
.bvq-bg__list--bento-b .bvq-bg__card:nth-child(4n + 1),
.bvq-bg__list--bento-b .bvq-bg__card:nth-child(4n + 4) {
	grid-column: span 2;
}

/* Patrón C: mosaico irregular. */
.bvq-bg__list--bento-c .bvq-bg__card:nth-child(6n + 1) {
	grid-row: span 2;
}

.bvq-bg__list--bento-c .bvq-bg__card:nth-child(6n + 4) {
	grid-column: span 2;
}

/*
 * Con una o dos entradas ningún patrón encaja: cualquier celda que ocupe dos
 * tramos deja un hueco. Se igualan todas y las columnas ya vienen recortadas
 * desde el servidor. Va después de los patrones para ganarles por orden.
 */
.bvq-bg__list--bento-sparse .bvq-bg__card {
	grid-column: span 1;
	grid-row: span 1;
}

@media (max-width: 767px) {
	.bvq-bg__list--bento {
		grid-auto-rows: auto;
	}

	.bvq-bg__list--bento .bvq-bg__card {
		grid-column: span 1 !important;
		grid-row: span 1 !important;
	}

	.bvq-bg__list--bento-d {
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
	}

	.bvq-bg__list--bento-d .bvq-bg__card,
	.bvq-bg__list--bento-d .bvq-bg__card:nth-child(3n + 1),
	.bvq-bg__list--bento-d .bvq-bg__card:nth-child(3n + 2),
	.bvq-bg__list--bento-d .bvq-bg__card:nth-child(3n + 3) {
		grid-column: span 1 !important;
		grid-row: span 1 !important;
		display: flex;
		flex-direction: column;
	}

	.bvq-bg__list--bento-d .bvq-bg__card-media,
	.bvq-bg__list--bento-d .bvq-bg__card-media--ratio {
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 10;
	}

	.bvq-bg__list--bento-d .bvq-bg__card-content {
		padding: 22px 20px 24px;
	}

	.bvq-bg__list--bento-d .bvq-bg__card-title {
		font-size: clamp(1.5rem, 6vw, 2.2rem);
		max-width: 100%;
	}

	.bvq-bg__list--bento-d .bvq-bg__card-excerpt {
		font-size: .98rem;
	}

	.bvq-bg__list--bento-cell-stacked .bvq-bg__card-media {
		aspect-ratio: var(--bvq-ratio, 16 / 9);
	}

	/* La imagen va posicionada, así que la celda no tiene alto propio. */
	.bvq-bg__list--bento-cell-overlay .bvq-bg__card {
		min-height: var(--bvq-bento-row);
	}
}

/* ---------------------------------------------------------------------
 * Entrada única: imagen a un lado, contenido al otro, a todo el ancho
 *
 * Dos situaciones lo activan: una sola card en una rejilla, o —en «post fijado
 * + listado»— que la única entrada del periodo se haya ido al hueco destacado
 * y el listado quede vacío.
 * ------------------------------------------------------------------ */

.bvq-bg__list--solo {
	display: block;
}

.bvq-bg--solo-featured .bvq-bg__main {
	display: none;
}

.bvq-bg--solo-featured.bvq-bg--layout-featured_split .bvq-bg__body,
.bvq-bg--solo-featured.bvq-bg--layout-featured_split.bvq-bg--featured-right .bvq-bg__body {
	grid-template-columns: minmax(0, 1fr);
}

.bvq-bg--solo-featured .bvq-bg__featured {
	position: static;
}

.bvq-bg__list--solo .bvq-bg__card,
.bvq-bg--solo-featured .bvq-bg__featured .bvq-bg__card {
	display: grid;
	grid-template-columns: var(--bvq-solo-media, 38%) minmax(0, 1fr);
	gap: var(--bvq-solo-gap, 48px);
	align-items: center;
}

.bvq-bg__list--solo-right .bvq-bg__card,
.bvq-bg--solo-featured.bvq-bg--featured-right .bvq-bg__featured .bvq-bg__card {
	grid-template-columns: minmax(0, 1fr) var(--bvq-solo-media, 38%);
}

.bvq-bg__list--solo-right .bvq-bg__card-media,
.bvq-bg--solo-featured.bvq-bg--featured-right .bvq-bg__featured .bvq-bg__card-media {
	order: 2;
}

/*
 * La proporción usa su propia variable: el ratio normal de la card llega como
 * estilo inline y ganaría siempre a la hoja de estilos.
 */
.bvq-bg__list--solo .bvq-bg__card-media,
.bvq-bg__list--solo .bvq-bg__card-media--ratio,
.bvq-bg--solo-featured .bvq-bg__featured .bvq-bg__card-media,
.bvq-bg--solo-featured .bvq-bg__featured .bvq-bg__card-media--ratio {
	aspect-ratio: var(--bvq-solo-ratio, 4 / 5);
	height: auto;
	min-height: 0;
}

.bvq-bg__list--solo .bvq-bg__card-content,
.bvq-bg--solo-featured .bvq-bg__featured .bvq-bg__card-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 0;
}

/* Sin imagen no hay nada que colocar al lado: el texto ocupa todo. */
.bvq-bg__list--solo .bvq-bg__card--no-media .bvq-bg__card-content,
.bvq-bg--solo-featured .bvq-bg__featured .bvq-bg__card--no-media .bvq-bg__card-content {
	grid-column: 1 / -1;
}

@media (max-width: 767px) {
	.bvq-bg__list--solo .bvq-bg__card,
	.bvq-bg__list--solo-right .bvq-bg__card,
	.bvq-bg--solo-featured .bvq-bg__featured .bvq-bg__card,
	.bvq-bg--solo-featured.bvq-bg--featured-right .bvq-bg__featured .bvq-bg__card {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--bvq-gap);
	}

	.bvq-bg__list--solo-right .bvq-bg__card-media,
	.bvq-bg--solo-featured.bvq-bg--featured-right .bvq-bg__featured .bvq-bg__card-media {
		order: 0;
	}
}

/* ---------------------------------------------------------------------
 * Plantilla: post fijado + listado
 * ------------------------------------------------------------------ */

.bvq-bg--layout-featured_split .bvq-bg__body {
	display: grid;
	grid-template-columns: var(--bvq-split) minmax(0, 1fr);
	gap: var(--bvq-split-gap);
	align-items: start;
}

.bvq-bg--layout-featured_split.bvq-bg--featured-right .bvq-bg__body {
	grid-template-columns: minmax(0, 1fr) var(--bvq-split);
}

.bvq-bg--layout-featured_split.bvq-bg--featured-right .bvq-bg__featured {
	order: 2;
}

.bvq-bg__featured {
	min-width: 0;
}

/*
 * Periodo sin entrada destacada: la columna se retira y el listado ocupa todo
 * el ancho, en vez de dejar un hueco vacío.
 */
.bvq-bg--no-featured .bvq-bg__featured {
	display: none;
}

.bvq-bg--no-featured.bvq-bg--layout-featured_split .bvq-bg__body,
.bvq-bg--no-featured.bvq-bg--layout-featured_split.bvq-bg--featured-right .bvq-bg__body {
	grid-template-columns: minmax(0, 1fr);
}

.bvq-feat-sticky-yes .bvq-bg--layout-featured_split .bvq-bg__featured {
	position: sticky;
	top: var(--bvq-sticky-top);
}

.bvq-bg__featured--inline {
	margin-bottom: var(--bvq-gap);
}

/* Apilado responsive del diseño dividido. */
@media (max-width: 1024px) {
	.bvq-stack-tablet .bvq-bg--layout-featured_split .bvq-bg__body {
		grid-template-columns: minmax(0, 1fr);
	}

	.bvq-stack-tablet .bvq-bg--layout-featured_split .bvq-bg__featured {
		order: 0;
	}

	.bvq-stack-tablet .bvq-bg--layout-featured_split .bvq-bg__featured {
		position: static;
	}
}

@media (max-width: 767px) {
	.bvq-stack-mobile .bvq-bg--layout-featured_split .bvq-bg__body,
	.bvq-stack-tablet .bvq-bg--layout-featured_split .bvq-bg__body {
		grid-template-columns: minmax(0, 1fr);
	}

	.bvq-stack-mobile .bvq-bg--layout-featured_split .bvq-bg__featured {
		order: 0;
		position: static;
	}
}

/*
 * El listado dentro del diseño dividido usa la rejilla normal, pero a una sola
 * columna por defecto: redeclara --bvq-columns en el propio elemento para no
 * heredar el valor general del widget.
 */
.bvq-bg--layout-featured_split .bvq-bg__list {
	--bvq-columns: 1;
	display: grid;
	grid-template-columns: repeat(var(--bvq-columns), minmax(0, 1fr));
	gap: var(--bvq-gap);
}

/* ---------------------------------------------------------------------
 * Paginación
 * ------------------------------------------------------------------ */

.bvq-bg__pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 32px;
}

.bvq-bg__page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	padding: 8px 12px;
	border: 1px solid var(--bvq-border);
	border-radius: 8px;
	background: transparent;
	color: inherit;
	font: inherit;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.bvq-bg__page--dots {
	border-color: transparent;
	cursor: default;
}

.bvq-bg__page.is-disabled {
	opacity: .4;
	cursor: not-allowed;
}

.bvq-bg__page.is-active {
	font-weight: 600;
}

.bvq-bg__page-prefix {
	margin-right: 4px;
	opacity: .7;
}

.bvq-bg__load-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 12px 28px;
	border: 1px solid var(--bvq-border);
	border-radius: 8px;
	background: transparent;
	color: inherit;
	font: inherit;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.bvq-bg__load-more.is-loading {
	pointer-events: none;
	opacity: .7;
}

.bvq-bg__spinner {
	display: none;
	width: 14px;
	height: 14px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: bvq-spin .7s linear infinite;
}

.bvq-bg__load-more.is-loading .bvq-bg__spinner {
	display: inline-block;
}

.bvq-bg__pagination--infinite .bvq-bg__load-more {
	opacity: .6;
}

@keyframes bvq-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.bvq-bg *,
	.bvq-bg *::before,
	.bvq-bg *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}

/* Aparición de las cards nuevas. */
.bvq-bg__card.bvq-is-new {
	animation: bvq-fade-in .35s ease both;
}

@keyframes bvq-fade-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* ---------------------------------------------------------------------
 * Galería de vídeos
 * ------------------------------------------------------------------ */

.bvq-vg {
	--bvq-vg-columns: 3;
	--bvq-vg-gap: 24px;
	--bvq-vg-ratio: 16/9;
	--bvq-vg-play: 64px;

	display: grid;
	grid-template-columns: repeat(var(--bvq-vg-columns), minmax(0, 1fr));
	gap: var(--bvq-vg-gap);
}

.bvq-vg *,
.bvq-vg *::before,
.bvq-vg *::after {
	box-sizing: border-box;
}

.bvq-vg__card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 14px;
	background: #fff;
}

.bvq-vg__media {
	position: relative;
	aspect-ratio: var(--bvq-vg-ratio);
	background: rgba(0, 0, 0, .08);
}

/* El disparador cubre toda la miniatura: se pulsa en cualquier punto. */
.bvq-vg__trigger {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.bvq-vg__poster {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bvq-vg__poster--empty {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, rgba(0, 0, 0, .12), rgba(0, 0, 0, .04));
}

.bvq-vg__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--bvq-vg-play);
	height: var(--bvq-vg-play);
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: #12274a;
	transition: transform .2s ease, background-color .2s ease;
}

.bvq-vg__play svg {
	width: 45%;
	height: 45%;
}

.bvq-vg__trigger:hover .bvq-vg__play {
	transform: translate(-50%, -50%) scale(1.08);
	background: #fff;
}

.bvq-vg__trigger:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: -3px;
}

/* Reproductor ya insertado: ocupa el sitio de la miniatura. */
.bvq-vg__media iframe,
.bvq-vg__media video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	background: #000;
}

.bvq-vg__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 22px 24px 24px;
}

.bvq-vg__meta {
	margin: 0;
	color: #1f5fa9;
	font-size: .72em;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.bvq-vg__sep {
	margin: 0 .35em;
}

.bvq-vg__title {
	margin: 0;
	font-size: 1.28em;
	line-height: 1.25;
	font-weight: 700;
}

.bvq-vg__cta {
	align-self: flex-start;
	margin-top: 4px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.bvq-vg__arrow {
	transition: transform .2s ease;
}

.bvq-vg__cta:hover .bvq-vg__arrow {
	transform: translateX(4px);
}

/* Con el vídeo en marcha, el enlace ya no aporta nada. */
.bvq-vg__card.is-playing .bvq-vg__cta {
	display: none;
}

@media (max-width: 1024px) {
	.bvq-vg {
		--bvq-vg-columns: 2;
	}
}

@media (max-width: 640px) {
	.bvq-vg {
		--bvq-vg-columns: 1;
	}
}

/* ---------------------------------------------------------------------
 * Plantilla «destacado a dos columnas»
 *
 * Reaprovecha la rejilla de «entrada única»; aquí solo se ajusta el aire,
 * el distintivo sobre la imagen y la fila de metadatos.
 * ------------------------------------------------------------------ */

.bvq-bg__list--spotlight .bvq-bg__card {
	align-items: center;
	gap: var(--bvq-solo-gap, 64px);
}

.bvq-bg__list--spotlight .bvq-bg__card-content {
	padding: 0;
}

/* Contenedor del distintivo: solo existe cuando hay algo que superponer. */
.bvq-bg__media-wrap {
	position: relative;
	display: block;
	height: 100%;
}

.bvq-bg__badge {
	position: absolute;
	left: 24px;
	bottom: 24px;
	z-index: 2;
	padding: 10px 20px;
	border-radius: 999px;
	background: #f4c430;
	color: #12274a;
	font-size: .72em;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1;
}

/* Categoría y fecha comparten fila, con un punto de color entre medias. */
.bvq-bg__list--spotlight .bvq-bg__card-terms,
.bvq-bg__list--spotlight .bvq-bg__card-meta {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: .78em;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.bvq-bg__list--spotlight .bvq-bg__card-terms::after {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #f4c430;
}

.bvq-bg__list--spotlight .bvq-bg__card-title {
	margin: 18px 0 0;
	font-size: clamp(1.9em, 3.4vw, 3em);
	line-height: 1.1;
	letter-spacing: -.01em;
}

.bvq-bg__list--spotlight .bvq-bg__card-excerpt {
	margin-top: 22px;
	font-size: 1.06em;
	line-height: 1.65;
}

.bvq-bg__list--spotlight .bvq-bg__card-bottom {
	margin-top: 32px;
}

/* Botón sólido tipo pastilla, como en la maqueta. */
.bvq-bg__list--spotlight .bvq-bg__button {
	padding: 15px 30px;
	border-radius: 999px;
	background: var(--bvq-accent);
	color: var(--bvq-on-accent);
	font-weight: 700;
	text-decoration: none;
}

.bvq-bg__list--spotlight .bvq-bg__button:hover {
	opacity: .92;
}

.bvq-bg__list--spotlight .bvq-bg__card-media,
.bvq-bg__list--spotlight .bvq-bg__card-media--ratio {
	border-radius: 18px;
	overflow: hidden;
}

@media (max-width: 767px) {
	.bvq-bg__list--spotlight .bvq-bg__card {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	/* En una columna la imagen va siempre primero, sea cual sea el lado. */
	.bvq-bg__list--spotlight .bvq-bg__card-media,
	.bvq-bg__list--spotlight .bvq-bg__media-wrap {
		order: -1;
	}

	.bvq-bg__badge {
		left: 16px;
		bottom: 16px;
	}
}