.mvs-videos {
	--mvs-bg-card: #1a1510;
	--mvs-text: #f3ebdd;
	--mvs-text-dim: rgba(243, 235, 221, .62);
	--mvs-accent: #b08d57;
	--mvs-accent-soft: rgba(176, 141, 87, .35);
	--mvs-overlay: #060504;
	--mvs-font-heading: "Cinzel", Georgia, "Times New Roman", serif;
	--mvs-font-label: "Jost", "Helvetica Neue", Arial, sans-serif;

	font-family: var(--mvs-font-label);
}
.mvs-videos *,
.mvs-videos *::before,
.mvs-videos *::after {
	box-sizing: border-box;
}

.mvs-header {
	text-align: center;
	margin: 0 0 26px;
}
.mvs-eyebrow {
	font-family: var(--mvs-font-label);
	font-weight: 300;
	font-size: 11px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--mvs-accent);
	margin-bottom: 8px;
}
.mvs-title-h {
	font-family: var(--mvs-font-heading);
	font-weight: 400;
	font-size: clamp(22px, 3vw, 32px);
	letter-spacing: .04em;
	color: var(--mvs-text);
}

.mvs-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}
.mvs-grid.mvs-cols-1 { grid-template-columns: 1fr; }
.mvs-grid.mvs-cols-2 { grid-template-columns: repeat(2, 1fr); }
.mvs-grid.mvs-cols-3 { grid-template-columns: repeat(3, 1fr); }
.mvs-grid.mvs-cols-4 { grid-template-columns: repeat(4, 1fr); }
.mvs-grid.mvs-cols-5 { grid-template-columns: repeat(5, 1fr); }

@media (max-width: 880px) {
	.mvs-grid.mvs-cols-3,
	.mvs-grid.mvs-cols-4,
	.mvs-grid.mvs-cols-5 {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 540px) {
	.mvs-grid {
		grid-template-columns: 1fr !important;
	}
}

.mvs-card {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	text-align: left;
	cursor: pointer;
	color: var(--mvs-text);
	font-family: inherit;
	display: block;
	width: 100%;
}

.mvs-thumb {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 10px;
	overflow: hidden;
	background: var(--mvs-bg-card);
	border: 1px solid var(--mvs-accent-soft);
	box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
	transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease, border-color .35s ease;
}

/* Shorts: la miniatura es vertical de verdad (detectado de la imagen real,
   no de lo que declara la API). Forzarla dentro de un recuadro 16:9 la
   recortaría feo — cada tarjeta usa la proporción que le corresponde,
   así una grilla con formato="todos" mezcla ambas sin romper ninguna. */
.mvs-card.mvs-vert .mvs-thumb {
	aspect-ratio: 9 / 16;
}
.mvs-card:hover .mvs-thumb,
.mvs-card:focus-visible .mvs-thumb {
	transform: translateY(-4px) scale(1.012);
	border-color: var(--mvs-accent);
	box-shadow: 0 0 0 1px var(--mvs-accent-soft), 0 24px 50px rgba(0, 0, 0, .6);
}
.mvs-card:focus-visible {
	outline: none;
}

.mvs-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: saturate(.96);
	transition: transform .6s ease;
}
.mvs-card:hover .mvs-img {
	transform: scale(1.035);
}

.mvs-play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}
.mvs-play::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(6, 5, 4, 0) 40%, rgba(6, 5, 4, .55) 100%);
}
.mvs-play svg {
	position: relative;
	width: 58px;
	height: 58px;
	padding: 0;
	border-radius: 50%;
	background: rgba(11, 11, 11, .55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: 1px solid rgba(243, 235, 221, .35);
	transition: all .25s ease;
}
.mvs-card:hover .mvs-play svg,
.mvs-card:focus-visible .mvs-play svg {
	border-color: var(--mvs-accent);
	background: rgba(11, 11, 11, .78);
	transform: scale(1.06);
}

.mvs-card-title {
	display: block;
	margin-top: 12px;
	font-family: var(--mvs-font-label);
	font-weight: 400;
	font-size: 15px;
	line-height: 1.4;
	color: var(--mvs-text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Video al final de un artículo (inyectado por MVS_Articulo). No lleva
   .wrap propio: ya vive dentro de la columna de contenido del artículo,
   que el tema ya limita en ancho. Espaciado a tono con el que usa el
   Sello del Autor justo antes (--msa-space-top: 72px). */
.mvs-articulo-video {
	margin-top: 72px;
	margin-bottom: 8px;
	max-width: 640px;
	margin-inline: auto;
	clear: both;
}

/* Lightbox */
.mvs-lightbox {
	position: fixed;
	inset: 0;
	background: rgba(6, 5, 4, .94);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease;
	z-index: 99999;
	padding: 60px 20px;
	font-family: "Jost", "Helvetica Neue", Arial, sans-serif;
}
.mvs-lightbox.is-open {
	opacity: 1;
	pointer-events: auto;
}
.mvs-lb-frame-wrap {
	position: relative;
	width: min(1100px, 100%);
	aspect-ratio: 16 / 9;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid rgba(176, 141, 87, .35);
	box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
	background: #000;
}
.mvs-lb-frame-wrap iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.mvs-lb-close {
	position: absolute;
	top: 18px;
	right: 24px;
	font-size: 34px;
	color: #f3ebdd;
	background: none;
	border: none;
	cursor: pointer;
	line-height: 1;
	z-index: 2;
}
.mvs-lb-close:hover {
	color: #b08d57;
}

/* La animación de aparición (".reveal" / ".reveal.is-in") la define
   theme.css y la dispara theme.js del tema padre — no hace falta
   redefinirla acá, las tarjetas la heredan solo por llevar la clase. */