/* Sesión 15821. Solo carga con su plantilla.
 * Equivalencias: el sistema ya trae vm-prod, vm-gal, vm-buy, vm-facts.
 * La barra inferior va fuera de .vm-exp: un fixed dentro del contenedor
 * no se ancla a la ventana. */

body.vmx-ses-public {
	background: #0b0a09;
}

/* Con las fuentes bloqueadas, una palabra larga del H1 no cabía en la columna de compra a 1440 y
   ensanchaba la columna a 360 (F8). «anywhere» la parte solo entonces y no fija el ancho mínimo de la
   columna; con la fuente cargada no cambia nada. */
.vmx-ses .vmx-h1 {
	font-size: clamp(40px, 5cqi, 68px);
	overflow-wrap: anywhere;
}

.vmx-ses .vm-buy {
	top: 112px;
}

.vmx-player {
	position: relative;
	aspect-ratio: 3 / 2;
	background: #000;
	overflow: hidden;
}

.vmx-player > img,
.vmx-player > video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vmx-player .vm-playbtn {
	position: absolute;
	left: 16px;
	bottom: 16px;
	border: 0;
	background: transparent;
	color: var(--cream);
	cursor: pointer;
	appearance: none;
	font: inherit;
	min-height: 52px;
	padding: 0;
}

.vmx-aside-note {
	margin-top: 8px;
	font-family: "VM Mono", "VM Mono Fallback", ui-monospace, monospace;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--meta);
}

.vmx-diff {
	display: flex;
	flex-direction: column;
	gap: 6px;
	color: var(--gray);
	font-size: 14px;
}

.vmx-diff a {
	color: var(--cream);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.vmx-near {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
}

.vmx-near a {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.vmx-age {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	color: var(--gray);
}

.vm-exp .vm-age,
.vmx-age .vm-age {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 28px;
	padding: 0 8px;
	background: var(--red);
	color: #fff;
	font-family: "VM Mono", ui-monospace, monospace;
	font-size: 12px;
}

.vmx-sample {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.vmx-sample li {
	aspect-ratio: 1;
	overflow: hidden;
	background: #000;
}

.vmx-sample img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vmx-notes {
	display: flex;
	flex-direction: column;
	margin-top: 28px;
	border-top: 1px solid var(--line2);
}

.vmx-notes li {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	gap: 12px;
	padding: 16px 0;
	border-bottom: 1px solid var(--line);
}

/* Fila con título (ítem 3): título, una raya corta como separador y la descripción debajo. */
.vmx-note {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.vmx-note-t {
	color: var(--cream);
	font-weight: 650;
	font-size: 17px;
	line-height: 1.3;
}

.vmx-note-t::after {
	content: "";
	display: block;
	width: 32px;
	height: 2px;
	margin-top: 10px;
	background: var(--gray);
}

.vmx-note-d {
	color: var(--gray);
}

.vmx-gap {
	margin-top: 28px;
}

/* Espacios entre secciones (ítem 7): una sola escala, 96 px en escritorio y 64 px en celular.
   Las secciones seguidas de la página de sesión ya no suman el relleno de abajo de una y el
   de arriba de la siguiente (antes, unos 200–250 px vacíos). */
.vmx-ses .vm-prod {
	padding-bottom: 96px;
}

.vmx-ses > .vm-sec {
	padding-block: 0 96px;
}

@media (max-width: 980px) {
	.vmx-ses .vm-prod {
		padding-bottom: 64px;
	}

	.vmx-ses > .vm-sec {
		padding-block: 0 64px;
	}
}

.vmx-lines,
.vmx-pills,
.vmx-more {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 20px;
}

.vmx-pills li,
.vmx-lines li,
.vmx-card {
	padding: 16px;
	background: var(--bg1);
	border-top: 3px solid var(--cream);
}

.vmx-more {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.vmx-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	color: inherit;
}

.vmx-price-sm b {
	font-size: 28px;
}

.vmx-epi {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 40px;
	align-items: end;
}

.vmx-dock {
	display: none;
}

@media (max-width: 980px) {
	.vmx-sample {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.vmx-epi,
	.vmx-more {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 980px) {
	.vmx-ses .vm-prod {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.vmx-ses .vm-buy {
		order: -1;
		position: static;
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.vmx-ses .vm-buy .vmx-h1 { order: 1; }
	.vmx-ses .vm-buy .vmx-near { order: 2; }
	.vmx-ses .vm-buy .vm-buybox { order: 3; padding: 16px; }
	.vmx-ses .vm-buy .vm-lead { order: 4; }
	.vmx-ses .vm-buy .vm-facts,
	.vmx-ses .vm-buy .vmx-age,
	.vmx-ses .vm-buy .vm-dim { order: 5; }

	.vmx-ses .vmx-h1 {
		font-size: 34px;
	}

	.vmx-ses .vm-lead {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	body.vmx-ses-public {
		padding-bottom: calc(84px + env(safe-area-inset-bottom));
	}

	.vmx-dock {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 90;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
		background: #141210;
		color: #ece1cf;
		border-top: 1px solid #2a2622;
		font-family: Archivo, "Archivo Fallback", system-ui, sans-serif;
	}

	/* Sin las fuentes, a 360 el precio y el botón no cabían juntos (F8): «MXN» baja de línea y el botón
	   se encoge solo entonces. */
	.vmx-dock .vm-price {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 0 8px;
		min-width: 0;
		margin: 0;
		color: #ece1cf;
	}

	.vmx-dock .vm-price b {
		font-size: 28px;
		line-height: 1;
		font-weight: 800;
	}

	.vmx-dock .vmx-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 0;
		text-align: center;
		min-height: 44px;
		padding: 0 16px;
		background: #ece1cf;
		color: #14110e;
		font-size: 12px;
		font-weight: 650;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		text-decoration: none;
	}
}

body.vm-exp-on:has(#vm-exp-menu:not([hidden])) .vmx-dock {
	visibility: hidden;
}

html:has(body.vmx-ses-on) {
	scroll-padding-top: 104px;
}

@media (max-width: 980px) {
	html:has(body.vmx-ses-public) {
		scroll-padding-bottom: calc(96px + env(safe-area-inset-bottom));
	}
}

@media (prefers-reduced-motion: reduce) {
	.vmx-dock,
	.vmx-dock *,
	.vmx-player,
	.vmx-player * {
		animation: none !important;
		transition: none !important;
	}
}

.vmx-dock .vmx-btn:focus-visible,
.vmx-player .vm-playbtn:focus-visible {
	outline: 2px solid #ece1cf;
	outline-offset: 3px;
}

/* Quien ya compró: «Ver la sesión» con el aspecto del botón primario.
 * La vista de comprador va fuera de .vm-exp, así que los colores van escritos, como en .vmx-dock.
 * En la barra de celular de vm-content el botón ocupa todo el ancho. */
.vmx-ses-owned .vmx-owned-go .vm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	max-width: 100%;
	min-height: 52px;
	padding: 0 22px;
	border: 1px solid transparent;
	border-radius: 2px;
	background: #ece1cf;
	color: #14110e;
	font-family: Archivo, "Archivo Fallback", system-ui, sans-serif;
	font-stretch: 125%;
	font-weight: 650;
	font-size: 13px;
	line-height: 1.2;
	letter-spacing: 0.12em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}

.vmx-ses-owned .vmx-owned-go .vm-btn:hover {
	background: #fff;
	color: #14110e;
}

.vmx-ses-owned .vmx-owned-go .vm-btn:focus-visible {
	outline: 2px solid #ece1cf;
	outline-offset: 3px;
}

.vmx-ses-owned .vm-session-mobile > .vm-session-node {
	grid-column: 1 / -1;
}

.vmx-ses-owned .vm-session-mobile .vmx-owned-go .vm-btn {
	width: 100%;
}

body.vmx-index-on {
	background: #0b0a09;
}

body.vmx-ses-on:not(.page-id-15821) .vm-page-head__title {
	font-family: Archivo, "Archivo Fallback", system-ui, sans-serif;
}

.vmx-index .vmx-h1 {
	font-size: clamp(40px, 5cqi, 68px);
}

.vmx-index .vmx-block {
	margin-top: 48px;
}

.vmx-index .vmx-index-hero {
	margin: 28px 0 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #000;
}

.vmx-index .vmx-index-hero img,
.vmx-index .vmx-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vmx-index .vmx-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.vmx-index .vmx-card figure {
	margin: 0;
	aspect-ratio: 1;
	overflow: hidden;
	background: #000;
}

.vmx-index .vmx-faq details {
	border-top: 1px solid var(--line);
	padding: 16px 0;
}

.vmx-index .vmx-faq details:last-child {
	border-bottom: 1px solid var(--line);
}

.vmx-index .vmx-faq summary {
	cursor: pointer;
	min-height: 44px;
}

@media (max-width: 980px) {
	.vmx-index .vmx-cards {
		grid-template-columns: minmax(0, 1fr);
	}
}