/*
 * Bonsai Music — Landing
 * Estilos de los once bloques. Las variables de color, tipografía y ancho
 * las inyecta el plugin desde el panel de administración.
 */

/* ==========================================================================
   1. Base y utilidades
   ========================================================================== */

.bm,
.bm * {
	box-sizing: border-box;
}

.bm {
	--bm-gutter: clamp(20px, 5vw, 64px);
	--bm-radio: 14px;
	--bm-borde: rgba(255, 255, 255, .1);
	--bm-borde-primario: rgba(var(--bm-primario-rgb), .45);
	--bm-transicion: .4s cubic-bezier(.22, .61, .36, 1);

	position: relative;
	background: var(--bm-fondo);
	color: var(--bm-texto);
	font-family: var(--bm-texto-font);
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

:where(.bm img) {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Imágenes que deben cubrir por completo su contenedor. */
.bm-hero__img,
.bm-cta__img,
.bm-exp__img,
.bm-cf__img,
.bm-sobre__img,
.bm-colabora__img,
.bm-explora__img,
.bm-obra__img,
.bm-espacio__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Imágenes de apoyo de los bloques 1, 2, 3, 8, 9 y 10. El encaje, la escala y
 * la alineación se controlan desde el panel: el bloque imprime las variables
 * en su atributo `style` y aquí se consumen.
 */
.bm-hero__img,
.bm-cta__img,
.bm-exp__img,
.bm-cf__img,
.bm-sobre__img,
.bm-colabora__img {
	object-fit: var(--bm-img-fit, cover);
	object-position: var(--bm-img-x, 50%) var(--bm-img-y, 50%);
	transform: scale(var(--bm-img-escala, 1));
	transform-origin: var(--bm-img-x, 50%) var(--bm-img-y, 50%);
}

:where(.bm a) {
	color: inherit;
	text-decoration: none;
}

:where(.bm p) {
	margin: 0 0 1em;
}

:where(.bm p:last-child) {
	margin-bottom: 0;
}

:where(.bm h1, .bm h2, .bm h3) {
	margin: 0;
	font-family: var(--bm-titulos);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -.02em;
}

:where(.bm button) {
	font: inherit;
	color: inherit;
	cursor: pointer;
}

/* Contenedor de 1440 px: el corte de diseño del prototipo. */
.bm-wrap {
	width: 100%;
	max-width: var(--bm-ancho);
	margin-inline: auto;
	padding-inline: var(--bm-gutter);
}

.bm .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.bm-destacado {
	color: var(--bm-primario);
}

/* Cada línea de un titular multilínea es un bloque propio y animable. */
.bm-linea {
	display: block;
}

.bm-display {
	font-family: var(--bm-display);
	font-weight: 400;
	letter-spacing: -.01em;
}

.bm-icono {
	display: block;
	flex: none;
}

/* Etiquetas monoespaciadas del prototipo. */
.bm-etiqueta {
	margin: 0 0 20px;
	color: var(--bm-primario);
	font-family: var(--bm-mono);
	font-size: clamp(11px, 1.1vw, 13px);
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	line-height: 1.4;
}

.bm-etiqueta--ancha {
	letter-spacing: .3em;
}

.bm-etiqueta--centro {
	text-align: center;
}

.bm-etiqueta--meta {
	margin: clamp(30px, 3.4vw, 46px) 0 16px;
	letter-spacing: .16em;
}

.bm-etiqueta--mini {
	margin-bottom: 10px;
	font-size: 10px;
	letter-spacing: .16em;
}

/* Cabeceras centradas de sección. */
.bm-cabecera {
	max-width: 780px;
	margin: 0 auto clamp(48px, 6vw, 76px);
	text-align: center;
}

.bm-cabecera__raya {
	display: block;
	width: 54px;
	height: 1px;
	margin: 0 auto 22px;
	background: var(--bm-primario);
	opacity: .75;
}

.bm-titulo {
	font-size: clamp(30px, 4.4vw, 52px);
	line-height: 1.08;
}

.bm-titulo--xl {
	font-size: clamp(32px, 5.4vw, 64px);
}

/* Titular ancho: cabe en una sola línea a partir de tablet. */
.bm-cabecera--ancha {
	max-width: 1080px;
}

.bm-cabecera--ancha .bm-sub {
	max-width: 80ch;
}

.bm-titulo--izq {
	text-align: left;
}

.bm-titulo--suave .bm-destacado {
	color: var(--bm-texto);
}

.bm-titulo--suave {
	color: rgba(255, 255, 255, .82);
}

.bm-sub {
	max-width: 62ch;
	margin: 20px auto 0;
	color: var(--bm-texto-2);
	font-size: clamp(15px, 1.4vw, 17px);
	line-height: 1.6;
}

.bm-sub--izq {
	margin-inline: 0;
	text-align: left;
}

/* ==========================================================================
   2. Botones y enlaces
   ========================================================================== */

.bm-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 54px;
	padding: 15px 32px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: var(--bm-texto-font);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	transition: transform var(--bm-transicion), box-shadow var(--bm-transicion),
		background-color var(--bm-transicion), border-color var(--bm-transicion), color var(--bm-transicion);
}

.bm-btn--primario {
	background: linear-gradient(100deg, var(--bm-primario) 0%, var(--bm-primario-2) 100%);
	color: #fff;
	box-shadow: 0 8px 30px rgba(var(--bm-primario-rgb), .32);
}

.bm-btn--primario:hover,
.bm-btn--primario:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 12px 40px rgba(var(--bm-primario-rgb), .48);
}

.bm-btn--suave {
	background: linear-gradient(100deg, rgba(var(--bm-primario-rgb), .92), var(--bm-primario-2));
	box-shadow: 0 8px 26px rgba(var(--bm-primario-rgb), .26);
}

.bm-btn--borde {
	border-color: var(--bm-borde-primario);
	background: transparent;
	color: var(--bm-texto);
}

.bm-btn--borde:hover,
.bm-btn--borde:focus-visible {
	border-color: var(--bm-primario);
	background: rgba(var(--bm-primario-rgb), .1);
	transform: translateY(-2px);
}

/* Variante rectangular del bloque de cierre y de colaboraciones. */
.bm-btn--recto {
	border-radius: 2px;
}

.bm-btn--mono {
	color: var(--bm-primario);
	font-family: var(--bm-mono);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	border-radius: 4px;
}

.bm-btn--ancho {
	width: 100%;
}

.bm-btn__play {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .22);
}

.bm-btn__play .bm-icono {
	margin-left: 2px;
}

.bm-btn__spinner {
	display: none;
	width: 18px;
	height: 18px;
	border: 2px solid rgba(255, 255, 255, .35);
	border-top-color: currentColor;
	border-radius: 50%;
	animation: bm-girar .7s linear infinite;
}

.bm-btn.is-cargando {
	pointer-events: none;
	opacity: .75;
}

.bm-btn.is-cargando .bm-btn__texto {
	opacity: .6;
}

.bm-btn.is-cargando .bm-btn__spinner {
	display: block;
}

@keyframes bm-girar {
	to { transform: rotate(360deg); }
}

.bm-enlace {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--bm-primario);
	font-size: 16px;
	transition: gap var(--bm-transicion), color var(--bm-transicion);
}

.bm-enlace:hover,
.bm-enlace:focus-visible {
	gap: 14px;
	color: var(--bm-primario-2);
}

.bm-enlace--card {
	margin-top: auto;
	padding-top: 18px;
	font-size: 15px;
}

.bm :focus-visible {
	outline: 2px solid var(--bm-primario-2);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ==========================================================================
   3. Bloque 1 — Hero
   ========================================================================== */

.bm-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: var(--bm-alto, min(100svh, 900px));
	padding: 120px 0 90px;
	overflow: hidden;
}

.bm-hero__fondo {
	position: absolute;
	inset: 0;
	z-index: 0;
}



/* Degradado que funde la imagen con el negro por la izquierda y por abajo. */
.bm-hero__velo {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, var(--bm-fondo) 0%, rgba(0, 0, 0, .92) 26%, rgba(0, 0, 0, .35) 52%, transparent 72%),
		linear-gradient(0deg, var(--bm-fondo) 0%, transparent 34%);
}

.bm-hero__inner {
	position: relative;
	z-index: 1;
}

.bm-hero__texto {
	max-width: 680px;
}

/* Calibrado para que el titular caiga en tres líneas, como en el diseño. */
.bm-hero__titulo {
	font-size: clamp(34px, 4.3vw, 62px);
	font-weight: 400;
	line-height: 1.14;
}

.bm-hero__sub {
	max-width: 46ch;
	margin: 28px 0 40px;
	color: rgba(255, 255, 255, .86);
	font-size: clamp(15px, 1.5vw, 18px);
	line-height: 1.55;
}

.bm-hero__botones {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
}

.bm-hero__flecha {
	position: absolute;
	bottom: 26px;
	left: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-left: -22px;
	color: var(--bm-primario);
	animation: bm-flotar 2.4s ease-in-out infinite;
}

@keyframes bm-flotar {
	0%, 100% { transform: translateY(0); opacity: .85; }
	50% { transform: translateY(8px); opacity: 1; }
}

/* --- Navegación ---------------------------------------------------------- */

.bm-nav {
	position: absolute;
	inset: 0 0 auto;
	z-index: 20;
	transition: background-color var(--bm-transicion), backdrop-filter var(--bm-transicion),
		border-color var(--bm-transicion), padding var(--bm-transicion);
	border-bottom: 1px solid transparent;
}

.bm-nav.is-fija {
	position: fixed;
	background: rgba(0, 0, 0, .84);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom-color: var(--bm-borde);
}

.bm-nav__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 88px;
}

.bm-nav.is-fija .bm-nav__inner {
	min-height: 68px;
}

.bm-logo {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	flex: none;
}

.bm-logo__marca {
	width: 40px;
	height: 40px;
	color: var(--bm-primario);
	flex: none;
}

.bm-logo__img {
	max-height: 46px;
	width: auto;
}

.bm-logo__texto {
	font-size: clamp(22px, 2.2vw, 30px);
	line-height: 1;
	white-space: nowrap;
}

.bm-logo__texto em {
	color: var(--bm-primario);
	font-style: normal;
}

.bm-nav__menu {
	display: flex;
	align-items: center;
	gap: clamp(18px, 2.6vw, 44px);
}

.bm-nav__menu a {
	position: relative;
	padding: 6px 0;
	color: rgba(255, 255, 255, .92);
	font-family: var(--bm-titulos);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: color var(--bm-transicion);
}

.bm-nav__menu a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: 0;
	height: 1px;
	background: var(--bm-primario);
	transition: right var(--bm-transicion);
}

.bm-nav__menu a:hover,
.bm-nav__menu a:focus-visible {
	color: var(--bm-primario);
}

.bm-nav__menu a:hover::after,
.bm-nav__menu a:focus-visible::after {
	right: 0;
}

.bm-nav__toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid var(--bm-borde);
	border-radius: 10px;
	background: rgba(0, 0, 0, .35);
}

.bm-nav__toggle span {
	display: block;
	width: 20px;
	height: 2px;
	margin-inline: auto;
	background: var(--bm-texto);
	border-radius: 2px;
	transition: transform .3s ease, opacity .2s ease;
}

.bm-nav__toggle[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.bm-nav__toggle[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.bm-nav__toggle[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   4. Bloque 2 — Experiencia sonora
   ========================================================================== */

/*
 * Los bloques 2, 3, 8 y 9 comparten estructura: una imagen a sangre por un
 * lado y el texto por el otro. La imagen se posiciona en absoluto para
 * ocupar toda la altura del bloque, como en el diseño original.
 */
.bm-exp,
.bm-cf,
.bm-sobre,
.bm-colabora {
	padding: 0;
}

.bm-exp__grid,
.bm-cf__grid,
.bm-sobre__grid,
.bm-colabora__grid {
	display: grid;
	align-items: center;
	gap: clamp(30px, 5vw, 70px);
	max-width: var(--bm-ancho);
	min-height: var(--bm-alto, min(84svh, 760px));
	margin-inline: auto;
}

.bm-exp__media,
.bm-cf__media,
.bm-sobre__media,
.bm-colabora__media {
	position: relative;
	align-self: var(--bm-media-align, stretch);
	min-height: var(--bm-media-min, 420px);
	/* La proporción es la de la propia imagen: así no hay que recortarla. */
	aspect-ratio: var(--bm-media-ratio, auto);
	max-height: 100%;
	overflow: hidden;
}

.bm-exp__img,
.bm-cf__img,
.bm-sobre__img,
.bm-colabora__img {
	position: absolute;
	inset: 0;
}

/* Degradado que funde el borde interior de la imagen con el fondo. */
.bm-exp__media::after,
.bm-cf__media::after,
.bm-sobre__media::after,
.bm-colabora__media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.bm-exp__contenido,
.bm-cf__contenido,
.bm-sobre__contenido,
.bm-colabora__contenido {
	padding-block: clamp(52px, 6vw, 88px);
}

/* --- Bloque 2: imagen a la izquierda ------------------------------------- */

.bm-exp__grid {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	padding-right: var(--bm-gutter);
}



.bm-exp__media::after {
	background: linear-gradient(90deg, transparent 55%, var(--bm-fondo) 100%);
}

.bm-exp__titulo {
	font-size: clamp(34px, 4.6vw, 62px);
	line-height: 1.06;
}

.bm-exp__texto {
	max-width: 52ch;
	margin: 22px 0 0;
	color: rgba(255, 255, 255, .82);
	font-size: clamp(15px, 1.35vw, 18px);
}

.bm-exp__acciones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 22px;
	margin-top: 30px;
}

.bm-exp__escuchar {
	padding-inline: 34px;
}

.bm-compartir {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 12px 4px 12px 24px;
	border: 0;
	background: none;
	color: var(--bm-texto);
	font-size: 16px;
	transition: color var(--bm-transicion);
}

.bm-compartir::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 1px;
	height: 26px;
	margin-top: -13px;
	background: var(--bm-borde);
}

.bm-compartir .bm-icono {
	color: var(--bm-primario);
}

.bm-compartir:hover,
.bm-compartir:focus-visible {
	color: var(--bm-primario);
}

.bm-exp__pie {
	margin-top: 34px;
	color: rgba(255, 255, 255, .55);
	font-size: 14px;
}

/* --- Reproductor --------------------------------------------------------- */

.bm-player {
	padding: 22px 26px 18px;
	border: 1px solid var(--bm-borde);
	border-radius: 18px;
	background: rgba(255, 255, 255, .025);
}

.bm-player.is-vacio {
	opacity: .55;
}

.bm-player__titulo {
	margin: 0 0 16px;
	font-family: var(--bm-titulos);
	font-size: clamp(16px, 1.5vw, 19px);
	font-weight: 500;
}

.bm-player__fila {
	display: flex;
	align-items: center;
	gap: 20px;
}

.bm-player__boton {
	position: relative;
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	flex: none;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--bm-primario), var(--bm-primario-2));
	color: #fff;
	box-shadow: 0 6px 22px rgba(var(--bm-primario-rgb), .38);
	transition: transform var(--bm-transicion), box-shadow var(--bm-transicion);
}

.bm-player__boton:hover:not(:disabled),
.bm-player__boton:focus-visible {
	transform: scale(1.06);
	box-shadow: 0 8px 30px rgba(var(--bm-primario-rgb), .52);
}

.bm-player__boton:disabled {
	cursor: not-allowed;
	filter: grayscale(.5);
	box-shadow: none;
}

.bm-player__icono {
	display: grid;
	place-items: center;
}

.bm-player__icono--play {
	margin-left: 3px;
}

.bm-player__icono--pausa,
.bm-player__icono--mute {
	display: none;
}

.bm-player.is-sonando .bm-player__icono--play {
	display: none;
}

.bm-player.is-sonando .bm-player__icono--pausa {
	display: grid;
}

.bm-player.is-mudo .bm-player__icono--vol {
	display: none;
}

.bm-player.is-mudo .bm-player__icono--mute {
	display: grid;
}

.bm-player__cargando {
	display: none;
	position: absolute;
	inset: -4px;
	border: 2px solid transparent;
	border-top-color: rgba(255, 255, 255, .9);
	border-radius: 50%;
	animation: bm-girar .8s linear infinite;
}

.bm-player.is-cargando .bm-player__cargando {
	display: block;
}

/* Espectro de barras: la capa activa se recorta según el progreso. */
.bm-player__ondas {
	position: relative;
	flex: 1;
	min-width: 0;
	height: 56px;
	cursor: pointer;
	touch-action: none;
}

/* Audio servido sin soporte de rangos: no se puede saltar a otra posición. */
.bm-player.is-sin-busqueda .bm-player__ondas,
.bm-player.is-sin-busqueda .bm-player__linea {
	cursor: default;
}

.bm-player.is-sin-busqueda .bm-player__punto {
	display: none;
}

.bm-player__barras {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2px;
	pointer-events: none;
}

.bm-player__barras span {
	flex: 1;
	min-width: 1px;
	height: var(--bm-h);
	border-radius: 2px;
	background: rgba(var(--bm-primario-rgb), .32);
	transition: background-color .2s ease;
}

.bm-player__barras--activas {
	width: 0;
	overflow: hidden;
	transition: width .12s linear;
}

.bm-player__barras--activas span {
	background: var(--bm-primario);
	box-shadow: 0 0 6px rgba(var(--bm-primario-rgb), .5);
}

.bm-player__barras--activas .bm-player__barras {
	width: 100%;
}

.bm-player__pista {
	margin: 14px 0 10px;
}

.bm-player__linea {
	position: relative;
	height: 3px;
	border-radius: 3px;
	background: rgba(255, 255, 255, .16);
	cursor: pointer;
	touch-action: none;
}

.bm-player__relleno {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0;
	border-radius: 3px;
	background: var(--bm-primario);
	transition: width .12s linear;
}

.bm-player__punto {
	position: absolute;
	top: 50%;
	left: 0;
	width: 11px;
	height: 11px;
	margin: -5.5px 0 0 -5.5px;
	border-radius: 50%;
	background: var(--bm-primario);
	box-shadow: 0 0 10px rgba(var(--bm-primario-rgb), .8);
	transition: left .12s linear, transform .2s ease;
}

.bm-player__linea:hover .bm-player__punto {
	transform: scale(1.25);
}

.bm-player__pie {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.bm-player__tiempo {
	margin: 0;
	color: rgba(255, 255, 255, .72);
	font-family: var(--bm-mono);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

.bm-player__volumen {
	display: flex;
	align-items: center;
	gap: 12px;
}

.bm-player__mute {
	display: grid;
	place-items: center;
	padding: 4px;
	border: 0;
	background: none;
	color: rgba(255, 255, 255, .85);
	transition: color var(--bm-transicion);
}

.bm-player__mute:hover {
	color: var(--bm-primario);
}

.bm-player__rango {
	width: clamp(70px, 12vw, 110px);
	height: 18px;
	margin: 0;
	padding: 0;
	background: none;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

.bm-player__rango::-webkit-slider-runnable-track {
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(
		to right,
		var(--bm-primario) 0%,
		var(--bm-primario) var(--bm-vol, 100%),
		rgba(255, 255, 255, .2) var(--bm-vol, 100%),
		rgba(255, 255, 255, .2) 100%
	);
}

.bm-player__rango::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	width: 11px;
	height: 11px;
	margin-top: -4.5px;
	border: 0;
	border-radius: 50%;
	background: var(--bm-primario);
}

.bm-player__rango::-moz-range-track {
	height: 2px;
	border-radius: 2px;
	background: rgba(255, 255, 255, .2);
}

.bm-player__rango::-moz-range-progress {
	height: 2px;
	border-radius: 2px;
	background: var(--bm-primario);
}

.bm-player__rango::-moz-range-thumb {
	width: 11px;
	height: 11px;
	border: 0;
	border-radius: 50%;
	background: var(--bm-primario);
}

/* ==========================================================================
   5. Bloque 3 — Cómo funciona
   ========================================================================== */

/* --- Bloque 3: imagen a la derecha --------------------------------------- */

.bm-cf__grid {
	grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
	gap: clamp(30px, 4vw, 60px);
	padding-left: var(--bm-gutter);
}

.bm-cf__titulo {
	font-size: clamp(34px, 5vw, 66px);
	line-height: 1.05;
}

.bm-cf__texto {
	max-width: 54ch;
	margin-top: 30px;
	color: rgba(255, 255, 255, .84);
	font-size: clamp(15px, 1.35vw, 17px);
	line-height: 1.75;
}

.bm-cf__texto p + p {
	margin-top: 22px;
}

.bm-cf__datos {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(26px, 4vw, 54px);
	margin-top: clamp(34px, 4.5vw, 56px);
}

.bm-cf__dato {
	padding-left: 22px;
	border-left: 1px solid var(--bm-primario);
}

.bm-cf__dato-tit {
	margin: 0 0 8px;
	color: var(--bm-primario);
	font-size: clamp(19px, 2vw, 26px);
	font-weight: 700;
	letter-spacing: .01em;
	text-transform: uppercase;
	line-height: 1.1;
}

.bm-cf__dato-sub {
	margin: 0;
	color: rgba(255, 255, 255, .88);
	font-family: var(--bm-mono);
	font-size: clamp(11px, 1.1vw, 13px);
	letter-spacing: .12em;
	text-transform: uppercase;
}



.bm-cf__media::after {
	background: linear-gradient(270deg, transparent 60%, var(--bm-fondo) 100%);
}

/* ==========================================================================
   6. Bloque 4 — El proceso
   ========================================================================== */

.bm-proceso {
	padding: clamp(64px, 8vw, 116px) 0;
	background:
		radial-gradient(ellipse 70% 45% at 50% 55%, rgba(var(--bm-primario-rgb), .07), transparent 70%),
		var(--bm-fondo);
}

/*
 * Cuatro tarjetas con tres ondas de unión intercaladas: por eso el patrón
 * de columnas alterna la tarjeta (1fr) y el conector (auto).
 */
.bm-proceso__pasos {
	display: grid;
	grid-template-columns:
		minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: stretch;
	gap: 0;
}

.bm-proceso__paso {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: clamp(26px, 2.6vw, 38px) clamp(16px, 1.8vw, 26px) clamp(30px, 3vw, 42px);
	border: 1px solid rgba(var(--bm-primario-rgb), .34);
	border-radius: var(--bm-radio);
	background: linear-gradient(180deg, rgba(var(--bm-primario-rgb), .045), transparent 60%);
	text-align: center;
	transition: border-color var(--bm-transicion), transform var(--bm-transicion), box-shadow var(--bm-transicion);
}

.bm-proceso__paso:hover {
	transform: translateY(-4px);
	border-color: rgba(var(--bm-primario-rgb), .7);
	box-shadow: 0 16px 44px rgba(var(--bm-primario-rgb), .16);
}

.bm-proceso__num {
	color: transparent;
	font-family: var(--bm-titulos);
	font-size: clamp(46px, 5.4vw, 72px);
	font-weight: 600;
	line-height: 1;
	letter-spacing: .02em;
	-webkit-text-stroke: 1.4px rgba(var(--bm-primario-rgb), .75);
}

.bm-proceso__icono {
	width: clamp(112px, 12vw, 158px);
	margin: clamp(14px, 2vw, 26px) 0 clamp(18px, 2.4vw, 30px);
	color: var(--bm-primario);
}

.bm-proceso__svg {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 0 8px rgba(var(--bm-primario-rgb), .35));
}

.bm-proceso__tit {
	margin: 0 0 14px;
	font-size: clamp(15px, 1.5vw, 19px);
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.bm-proceso__txt {
	max-width: 30ch;
	margin: 0;
	color: var(--bm-texto-2);
	font-size: clamp(13px, 1.15vw, 15px);
	line-height: 1.6;
}

/* Onda luminosa que enlaza cada par de tarjetas. */
.bm-proceso__union {
	display: grid;
	place-items: center;
	width: clamp(24px, 3vw, 46px);
	margin-inline: -1px;
	color: var(--bm-primario);
}

.bm-onda--union {
	width: 100%;
	height: 34px;
	filter: drop-shadow(0 0 5px rgba(var(--bm-primario-rgb), .8));
}

.bm-proceso__pie {
	margin-top: clamp(40px, 5vw, 62px);
	text-align: center;
}

.bm-proceso__pie p {
	margin: 20px 0 0;
	color: rgba(255, 255, 255, .88);
	font-size: clamp(15px, 1.4vw, 18px);
}

.bm-proceso__latido {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	color: var(--bm-primario);
}

.bm-proceso__latido svg {
	width: 60px;
	height: 30px;
	filter: drop-shadow(0 0 5px rgba(var(--bm-primario-rgb), .7));
}

.bm-proceso__linea {
	width: clamp(80px, 18vw, 250px);
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(var(--bm-primario-rgb), .8));
}

.bm-proceso__linea:last-child {
	background: linear-gradient(270deg, transparent, rgba(var(--bm-primario-rgb), .8));
}

/* ==========================================================================
   7. Bloque 5 — Próximas exploraciones
   ========================================================================== */

.bm-explora {
	padding: clamp(60px, 8vw, 108px) 0;
}

.bm-explora__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(14px, 1.6vw, 22px);
}

.bm-explora__card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 4px;
	background: var(--bm-superficie);
	transition: transform var(--bm-transicion), box-shadow var(--bm-transicion);
}

.bm-explora__card:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 50px rgba(0, 0, 0, .6);
}

.bm-explora__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.bm-explora__img {
	transition: transform .8s cubic-bezier(.22, .61, .36, 1);
}

.bm-explora__card:hover .bm-explora__img {
	transform: scale(1.05);
}

/* Haz de ondas magenta superpuesto a la foto, como en el prototipo. */
.bm-onda--card {
	position: absolute;
	left: -4%;
	top: 46%;
	width: 108%;
	height: 72px;
	color: var(--bm-primario);
	opacity: .85;
	mix-blend-mode: screen;
	pointer-events: none;
}

.bm-explora__cuerpo {
	display: flex;
	flex-direction: column;
	padding: clamp(20px, 2.2vw, 28px);
}

.bm-explora__tit {
	margin: 0 0 12px;
	font-size: clamp(19px, 2vw, 26px);
	font-weight: 600;
}

.bm-explora__txt {
	margin: 0;
	color: var(--bm-texto-2);
	font-size: clamp(14px, 1.2vw, 16px);
	line-height: 1.6;
}

/* --- Formulario de newsletter -------------------------------------------- */

.bm-news {
	margin-top: clamp(48px, 6vw, 76px);
	text-align: center;
}

.bm-news__titulo {
	margin: 0 0 12px;
	font-size: clamp(23px, 2.8vw, 34px);
	font-weight: 600;
}

.bm-news__texto {
	max-width: 66ch;
	margin: 0 auto 32px;
	color: var(--bm-texto-2);
	font-size: clamp(14px, 1.3vw, 17px);
}

.bm-form--news {
	max-width: 1000px;
	margin-inline: auto;
}

.bm-form__fila {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.05fr);
	gap: 16px;
}

.bm-campo {
	display: block;
	min-width: 0;
	text-align: left;
}

.bm-campo > span:not(.screen-reader-text) {
	display: block;
	margin-bottom: 8px;
	color: var(--bm-texto-2);
	font-size: 13px;
	letter-spacing: .02em;
}

.bm-campo input,
.bm-campo textarea {
	width: 100%;
	min-height: 58px;
	padding: 16px 20px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 4px;
	background: rgba(255, 255, 255, .02);
	color: var(--bm-texto);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.4;
	transition: border-color var(--bm-transicion), background-color var(--bm-transicion), box-shadow var(--bm-transicion);
}

.bm-campo textarea {
	min-height: 120px;
	resize: vertical;
}

.bm-campo input::placeholder,
.bm-campo textarea::placeholder {
	color: rgba(255, 255, 255, .42);
}

.bm-campo input:focus,
.bm-campo textarea:focus {
	outline: 0;
	border-color: var(--bm-primario);
	background: rgba(var(--bm-primario-rgb), .05);
	box-shadow: 0 0 0 3px rgba(var(--bm-primario-rgb), .16);
}

.bm-campo.is-error input,
.bm-campo.is-error textarea {
	border-color: #ff5a5a;
}

.bm-form--news .bm-btn {
	min-height: 58px;
}

.bm-trampa {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.bm-legal {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-top: 20px;
	color: var(--bm-texto-2);
	font-size: 13px;
	line-height: 1.5;
	text-align: left;
	cursor: pointer;
}

.bm-legal input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.bm-legal__caja {
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	flex: none;
	margin-top: 1px;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 4px;
	color: transparent;
	transition: border-color var(--bm-transicion), background-color var(--bm-transicion), color var(--bm-transicion);
}

.bm-legal input:checked + .bm-legal__caja {
	border-color: var(--bm-primario);
	background: var(--bm-primario);
	color: #fff;
}

.bm-legal input:focus-visible + .bm-legal__caja {
	outline: 2px solid var(--bm-primario-2);
	outline-offset: 2px;
}

.bm-legal.is-error .bm-legal__caja {
	border-color: #ff5a5a;
}

.bm-form__aviso {
	margin: 18px 0 0;
	min-height: 22px;
	font-size: 14px;
	text-align: center;
}

.bm-form__aviso.is-ok {
	color: #5ee6a8;
}

.bm-form__aviso.is-error {
	color: #ff7b7b;
}

/* ==========================================================================
   8. Bloque 6 — Colección
   ========================================================================== */

.bm-coleccion {
	padding: clamp(60px, 8vw, 104px) 0;
}

.bm-coleccion__cabecera {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: clamp(32px, 4vw, 48px);
}

.bm-coleccion__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(14px, 1.6vw, 22px);
}

.bm-obra {
	overflow: hidden;
	border-radius: 4px;
	background: var(--bm-superficie);
	transition: transform var(--bm-transicion), box-shadow var(--bm-transicion);
}

.bm-obra:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 50px rgba(0, 0, 0, .65);
}

.bm-obra__link {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.bm-obra__media {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: #0a0a0a;
}

.bm-obra__img {
	transition: transform .8s cubic-bezier(.22, .61, .36, 1);
}

.bm-obra:hover .bm-obra__img {
	transform: scale(1.04);
}

.bm-obra__cuerpo {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: clamp(20px, 2.2vw, 28px);
}

.bm-obra__tit {
	margin: 0 0 10px;
	font-size: clamp(18px, 1.8vw, 23px);
	font-weight: 500;
}

.bm-obra__txt {
	margin: 0;
	color: var(--bm-texto-2);
	font-size: clamp(13px, 1.15vw, 15px);
	line-height: 1.6;
}

.bm-obra__precio {
	margin: 12px 0 0;
	color: var(--bm-texto);
	font-family: var(--bm-mono);
	font-size: 15px;
}

.bm-obra__precio del {
	opacity: .55;
	margin-right: 6px;
}

/* ==========================================================================
   9. Bloque 7 — En tu espacio
   ========================================================================== */

.bm-espacios {
	position: relative;
	padding: clamp(60px, 8vw, 108px) 0;
	overflow: hidden;
}

.bm-espacios__deco {
	position: absolute;
	width: clamp(280px, 38vw, 620px);
	color: var(--bm-primario);
	opacity: .85;
	pointer-events: none;
}

.bm-espacios__deco svg {
	width: 100%;
	height: auto;
}

.bm-espacios__deco--tr {
	top: 0;
	right: 0;
}

.bm-espacios__deco--bl {
	bottom: 0;
	left: 0;
	transform: rotate(180deg);
}

.bm-espacios__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 1.8vw, 24px);
}

.bm-espacio {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--bm-borde);
	border-radius: var(--bm-radio);
	background: rgba(255, 255, 255, .022);
	transition: transform var(--bm-transicion), border-color var(--bm-transicion), box-shadow var(--bm-transicion);
}

.bm-espacio:hover {
	transform: translateY(-5px);
	border-color: rgba(var(--bm-primario-rgb), .45);
	box-shadow: 0 20px 50px rgba(0, 0, 0, .55);
}

.bm-espacio__media {
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.bm-espacio__img {
	transition: transform .8s cubic-bezier(.22, .61, .36, 1);
}

.bm-espacio:hover .bm-espacio__img {
	transform: scale(1.04);
}

.bm-espacio__cuerpo {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	padding: clamp(20px, 2.2vw, 28px);
}

.bm-espacio__icono {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	flex: none;
	border: 1px solid rgba(var(--bm-primario-rgb), .55);
	border-radius: 50%;
	color: var(--bm-primario);
	background: radial-gradient(circle, rgba(var(--bm-primario-rgb), .12), transparent 70%);
}

.bm-espacio__tit {
	margin: 0 0 8px;
	font-size: clamp(17px, 1.7vw, 22px);
	font-weight: 500;
}

.bm-espacio__txt {
	margin: 0;
	color: var(--bm-texto-2);
	font-size: clamp(13px, 1.2vw, 15px);
	line-height: 1.6;
}

.bm-espacios__cta {
	margin-top: clamp(44px, 5.5vw, 72px);
	text-align: center;
}

.bm-espacios__cta-tit {
	margin: 0 0 10px;
	font-size: clamp(21px, 2.6vw, 32px);
	font-weight: 600;
}

.bm-espacios__cta-txt {
	margin: 0 0 30px;
	color: var(--bm-texto-2);
	font-size: clamp(14px, 1.3vw, 17px);
}

/* ==========================================================================
   10. Bloque 8 — Sobre el proyecto
   ========================================================================== */

/* --- Bloque 8: imagen a la izquierda ------------------------------------- */

.bm-sobre__grid {
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: clamp(30px, 4vw, 64px);
	padding-right: var(--bm-gutter);
}



.bm-sobre__media::after {
	background: linear-gradient(90deg, transparent 60%, var(--bm-fondo) 100%);
}

.bm-sobre__titulo {
	font-size: clamp(28px, 3.4vw, 46px);
	font-weight: 400;
	line-height: 1.16;
	letter-spacing: -.015em;
}

.bm-sobre__texto {
	max-width: 54ch;
	margin: 26px 0 0;
	color: rgba(255, 255, 255, .82);
	font-size: clamp(14px, 1.3vw, 17px);
	line-height: 1.7;
}

.bm-sobre__nombre {
	margin: clamp(38px, 4.5vw, 58px) 0 0;
	font-size: clamp(23px, 2.5vw, 33px);
	font-weight: 400;
	letter-spacing: -.01em;
}

.bm-sobre__raya {
	display: block;
	width: 64px;
	height: 1px;
	margin: 16px 0 22px;
	background: rgba(255, 255, 255, .3);
}

.bm-sobre__bio {
	max-width: 52ch;
	margin: 0 0 32px;
	color: rgba(255, 255, 255, .8);
	font-size: clamp(14px, 1.25vw, 16px);
	line-height: 1.75;
}

/* ==========================================================================
   11. Bloque 9 — Colaboraciones
   ========================================================================== */

/* --- Bloque 9: imagen a la izquierda ------------------------------------- */

.bm-colabora__grid {
	grid-template-columns: minmax(0, 1.34fr) minmax(0, .86fr);
	gap: clamp(24px, 3vw, 48px);
	padding-right: var(--bm-gutter);
}



/* Calibrado para que el titular caiga en dos líneas dentro de su columna. */
.bm-colabora__contenido .bm-titulo {
	font-size: clamp(30px, 3.9vw, 56px);
}

.bm-colabora__txt {
	max-width: 48ch;
	margin: clamp(24px, 2.6vw, 34px) 0 0;
	color: rgba(255, 255, 255, .84);
	font-size: clamp(15px, 1.35vw, 18px);
	line-height: 1.65;
}

.bm-colabora__raya {
	display: block;
	width: 52px;
	height: 2px;
	margin: 30px 0;
	background: var(--bm-primario);
}

.bm-colabora__contenido .bm-btn {
	margin-top: 34px;
}

/* ==========================================================================
   12. Bloque 10 — Cierre
   ========================================================================== */

.bm-cta {
	position: relative;
	display: flex;
	align-items: center;
	min-height: var(--bm-alto, min(88svh, 780px));
	padding: clamp(70px, 9vw, 120px) 0;
	overflow: hidden;
}

.bm-cta__fondo {
	position: absolute;
	inset: 0;
	z-index: 0;
}



.bm-cta__velo {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, var(--bm-fondo) 0%, rgba(0, 0, 0, .9) 30%, rgba(0, 0, 0, .3) 55%, transparent 74%),
		linear-gradient(0deg, rgba(0, 0, 0, .7), transparent 45%);
}

.bm-cta__inner {
	position: relative;
	z-index: 1;
}

.bm-cta__texto {
	max-width: 600px;
}

.bm-cta__titulo {
	font-size: clamp(34px, 4.6vw, 62px);
	font-weight: 400;
	line-height: 1.12;
	letter-spacing: -.02em;
}

.bm-cta__sub {
	margin: 26px 0 36px;
	color: rgba(255, 255, 255, .88);
	font-size: clamp(15px, 1.5vw, 19px);
}

.bm-cta__botones {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.bm-cta__botones .bm-btn {
	min-width: 220px;
}

.bm-cta__pie {
	margin: clamp(34px, 4vw, 54px) 0 0;
	color: rgba(255, 255, 255, .5);
	font-family: var(--bm-mono);
	font-size: clamp(11px, 1.05vw, 13px);
	letter-spacing: .18em;
	text-transform: uppercase;
}

/* ==========================================================================
   13. Bloque 11 — Pie de página
   ========================================================================== */

.bm-footer {
	position: relative;
	padding: clamp(56px, 7vw, 92px) 0 clamp(28px, 3vw, 40px);
	border-top: 1px solid var(--bm-borde);
	background-color: #070707;
}

.bm-footer::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--bm-textura, none);
	background-size: cover;
	background-position: center;
	opacity: .3;
	pointer-events: none;
}

.bm-footer > * {
	position: relative;
}

.bm-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 70px);
	padding-bottom: clamp(40px, 5vw, 64px);
}

.bm-footer__logo {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 26px;
}

.bm-footer__logo .bm-logo__marca {
	width: 34px;
	height: 34px;
}

.bm-footer__logo span {
	font-family: var(--bm-titulos);
	font-size: clamp(20px, 2.2vw, 29px);
	font-weight: 500;
	letter-spacing: .22em;
	line-height: 1;
}

.bm-footer__bajada {
	margin: 0 0 24px;
	color: var(--bm-texto-2);
	font-size: clamp(14px, 1.25vw, 16px);
}

.bm-footer__texto {
	max-width: 34ch;
	margin: 0;
	color: rgba(255, 255, 255, .88);
	font-size: clamp(15px, 1.4vw, 18px);
	line-height: 1.6;
}

.bm-footer__col-tit {
	margin: 0 0 24px;
	color: var(--bm-primario);
	font-family: var(--bm-titulos);
	font-size: clamp(13px, 1.2vw, 16px);
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.bm-footer__col ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bm-footer__col li + li {
	margin-top: 14px;
}

.bm-footer__col a {
	color: rgba(255, 255, 255, .88);
	font-size: clamp(14px, 1.3vw, 17px);
	transition: color var(--bm-transicion);
}

.bm-footer__col a:hover,
.bm-footer__col a:focus-visible {
	color: var(--bm-primario);
}

.bm-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-top: clamp(20px, 2.4vw, 30px);
	border-top: 1px solid var(--bm-borde);
	color: rgba(255, 255, 255, .5);
	font-size: 14px;
}

.bm-footer__legal p {
	margin: 0;
}

.bm-footer__legal-links {
	display: flex;
	gap: clamp(20px, 3vw, 44px);
}

.bm-footer__legal a:hover,
.bm-footer__legal a:focus-visible {
	color: var(--bm-texto);
}

/* ==========================================================================
   14. Ventana de contacto
   ========================================================================== */

.bm-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
	padding: 20px;
}

.bm-modal[hidden] {
	display: none;
}

.bm-modal__fondo {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .82);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	animation: bm-aparecer .25s ease;
}

.bm-modal__caja {
	position: relative;
	width: min(620px, 100%);
	max-height: min(88svh, 820px);
	overflow-y: auto;
	padding: clamp(28px, 4vw, 44px);
	border: 1px solid var(--bm-borde);
	border-radius: 16px;
	background: #0b0b0b;
	animation: bm-subir .35s cubic-bezier(.22, .61, .36, 1);
	overscroll-behavior: contain;
}

@keyframes bm-aparecer {
	from { opacity: 0; }
}

@keyframes bm-subir {
	from { opacity: 0; transform: translateY(22px); }
}

.bm-modal__cerrar {
	position: absolute;
	top: 14px;
	right: 14px;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid var(--bm-borde);
	border-radius: 50%;
	background: transparent;
	color: var(--bm-texto);
	transition: border-color var(--bm-transicion), color var(--bm-transicion), transform var(--bm-transicion);
}

.bm-modal__cerrar:hover {
	border-color: var(--bm-primario);
	color: var(--bm-primario);
	transform: rotate(90deg);
}

.bm-modal__titulo {
	margin: 0 0 10px;
	padding-right: 46px;
	font-size: clamp(22px, 2.6vw, 30px);
	font-weight: 600;
}

.bm-modal__texto {
	margin: 0 0 28px;
	color: var(--bm-texto-2);
	font-size: 15px;
}

.bm-form--modal {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.bm-form--modal .bm-campo--ancho,
.bm-form--modal .bm-legal,
.bm-form--modal .bm-btn,
.bm-form--modal .bm-form__aviso {
	grid-column: 1 / -1;
}

/* ==========================================================================
   15. Sonido ambiente
   ========================================================================== */

.bm-ambiente {
	position: fixed;
	bottom: clamp(16px, 3vw, 28px);
	z-index: 9990;
	display: flex;
	align-items: center;
	gap: 10px;
}

.bm-ambiente[hidden] {
	display: none;
}

.bm-ambiente--der {
	right: clamp(16px, 3vw, 28px);
	flex-direction: row-reverse;
}

.bm-ambiente--izq {
	left: clamp(16px, 3vw, 28px);
}

.bm-ambiente__boton {
	position: relative;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 1px solid rgba(var(--bm-primario-rgb), .5);
	border-radius: 50%;
	background: rgba(10, 10, 10, .88);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: var(--bm-primario);
	box-shadow: 0 6px 24px rgba(0, 0, 0, .5);
	transition: transform var(--bm-transicion), border-color var(--bm-transicion), box-shadow var(--bm-transicion);
}

.bm-ambiente__boton:hover,
.bm-ambiente__boton:focus-visible {
	transform: scale(1.06);
	border-color: var(--bm-primario);
	box-shadow: 0 8px 30px rgba(var(--bm-primario-rgb), .38);
}

.bm-ambiente__ondas {
	display: none;
	align-items: center;
	gap: 3px;
	height: 20px;
}

.bm-ambiente__ondas span {
	width: 3px;
	border-radius: 2px;
	background: var(--bm-primario);
	animation: bm-vibrar 1s ease-in-out infinite;
}

.bm-ambiente__ondas span:nth-child(1) { height: 8px;  animation-delay: 0s; }
.bm-ambiente__ondas span:nth-child(2) { height: 16px; animation-delay: .18s; }
.bm-ambiente__ondas span:nth-child(3) { height: 11px; animation-delay: .36s; }
.bm-ambiente__ondas span:nth-child(4) { height: 18px; animation-delay: .12s; }

@keyframes bm-vibrar {
	0%, 100% { transform: scaleY(.45); }
	50% { transform: scaleY(1); }
}

.bm-ambiente.is-sonando .bm-ambiente__ondas {
	display: flex;
}

.bm-ambiente.is-sonando .bm-ambiente__icono {
	display: none;
}

.bm-ambiente__panel {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid transparent;
	border-radius: 14px;
	background: rgba(10, 10, 10, .92);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	opacity: 0;
	transition: max-width var(--bm-transicion), opacity var(--bm-transicion), padding var(--bm-transicion);
}

.bm-ambiente.is-sonando .bm-ambiente__panel,
.bm-ambiente:hover .bm-ambiente__panel,
.bm-ambiente:focus-within .bm-ambiente__panel {
	max-width: 280px;
	padding: 12px 16px;
	border-color: var(--bm-borde);
	opacity: 1;
}

.bm-ambiente__titulo {
	margin: 0;
	color: var(--bm-texto);
	font-size: 13px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bm-ambiente__controles {
	display: flex;
	align-items: center;
	gap: 10px;
}

.bm-ambiente__controles button {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: rgba(255, 255, 255, .07);
	color: var(--bm-texto);
	transition: background-color var(--bm-transicion), color var(--bm-transicion);
}

.bm-ambiente__controles button:hover {
	background: rgba(var(--bm-primario-rgb), .22);
	color: var(--bm-primario);
}

.bm-ambiente__controles input[type="range"] {
	width: 90px;
	height: 18px;
	margin: 0;
	background: none;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}

.bm-ambiente__controles input[type="range"]::-webkit-slider-runnable-track {
	height: 2px;
	border-radius: 2px;
	background: rgba(255, 255, 255, .2);
}

.bm-ambiente__controles input[type="range"]::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	width: 10px;
	height: 10px;
	margin-top: -4px;
	border: 0;
	border-radius: 50%;
	background: var(--bm-primario);
}

.bm-ambiente__controles input[type="range"]::-moz-range-track {
	height: 2px;
	border-radius: 2px;
	background: rgba(255, 255, 255, .2);
}

.bm-ambiente__controles input[type="range"]::-moz-range-thumb {
	width: 10px;
	height: 10px;
	border: 0;
	border-radius: 50%;
	background: var(--bm-primario);
}

/* ==========================================================================
   16. Animaciones de entrada
   ========================================================================== */

.bm-anim {
	opacity: 1;
}

/* Solo se ocultan si el JavaScript confirma que va a animarlas. */
.bm-animar .bm-anim {
	opacity: 0;
	transform: translateY(26px);
}

.bm-animar .bm-anim.is-visible {
	opacity: 1;
	transform: none;
	transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .36, 1);
	transition-delay: calc(var(--bm-i, 0) * .09s);
}

/* ==========================================================================
   17. Adaptación a tablet y móvil
   ========================================================================== */

/* --- Tablet grande ------------------------------------------------------- */
@media (max-width: 1200px) {

	.bm-coleccion__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bm-proceso__pasos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px;
	}

	/* Con dos columnas la onda de unión ya no tiene sentido. */
	.bm-proceso__union {
		display: none;
	}
}

/* --- Tablet -------------------------------------------------------------- */
@media (max-width: 1024px) {

	.bm-explora__grid,
	.bm-espacios__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bm-form__fila {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bm-form--news .bm-btn {
		grid-column: 1 / -1;
	}

	.bm-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.bm-footer__marca {
		grid-column: 1 / -1;
	}
}

/* --- Punto de quiebre principal: se apilan las columnas ------------------ */
@media (max-width: 900px) {

	.bm-nav__menu {
		position: fixed;
		inset: 0 0 auto;
		z-index: 30;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 96px 24px 32px;
		background: rgba(5, 5, 5, .98);
		backdrop-filter: blur(16px);
		-webkit-backdrop-filter: blur(16px);
		border-bottom: 1px solid var(--bm-borde);
		transform: translateY(-100%);
		visibility: hidden;
		transition: transform .35s cubic-bezier(.22, .61, .36, 1), visibility .35s;
	}

	.bm-nav__menu.is-abierto {
		transform: translateY(0);
		visibility: visible;
	}

	.bm-nav__menu a {
		padding: 16px 4px;
		border-bottom: 1px solid rgba(255, 255, 255, .07);
		font-size: 15px;
	}

	.bm-nav__menu a::after {
		display: none;
	}

	.bm-nav__toggle {
		position: relative;
		z-index: 40;
		display: flex;
	}

	/*
	 * En vertical el texto se coloca arriba y el bonsái ocupa la mitad
	 * inferior, en vez de quedar detrás del titular.
	 */
	.bm-hero {
		justify-content: flex-start;
		min-height: 100svh;
		padding: 122px 0 40px;
	}

	/* El recorte vertical es fuerte: se encuadra sobre el bonsái. */
	.bm-hero__img {
		object-position: 74% bottom;
	}

	.bm-hero__velo {
		background:
			linear-gradient(180deg, var(--bm-fondo) 6%, rgba(0, 0, 0, .9) 40%, rgba(0, 0, 0, .35) 72%, rgba(0, 0, 0, .55) 100%);
	}

	.bm-hero__texto {
		max-width: none;
	}

	.bm-hero__flecha {
		display: none;
	}

	/* En vertical la imagen pasa a ser una banda encima del texto. */
	.bm-exp__grid,
	.bm-cf__grid,
	.bm-sobre__grid,
	.bm-colabora__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		min-height: 0;
		padding-inline: var(--bm-gutter);
	}

	.bm-exp__media,
	.bm-cf__media,
	.bm-sobre__media,
	.bm-colabora__media {
		position: relative;
		min-height: 0;
		aspect-ratio: var(--bm-media-ratio, 4 / 3);
		margin-inline: calc(var(--bm-gutter) * -1);
	}

	.bm-sobre__media {
		aspect-ratio: var(--bm-media-ratio, 1 / 1);
	}

	.bm-exp__media::after,
	.bm-cf__media::after,
	.bm-sobre__media::after,
	.bm-colabora__media::after {
		background: linear-gradient(0deg, var(--bm-fondo) 2%, transparent 42%);
	}

	.bm-exp__contenido,
	.bm-cf__contenido,
	.bm-sobre__contenido,
	.bm-colabora__contenido {
		padding-block: clamp(30px, 6vw, 52px) clamp(52px, 9vw, 78px);
	}

	/* La imagen va debajo del texto en los bloques 3 y 8. */
	.bm-cf__contenido,
	.bm-sobre__contenido {
		order: -1;
	}

	.bm-cta {
		min-height: auto;
		align-items: flex-end;
		padding-top: clamp(200px, 52vw, 340px);
	}

	.bm-cta__img {
		object-position: 72% center;
	}

	.bm-cta__velo {
		background:
			linear-gradient(0deg, var(--bm-fondo) 26%, rgba(0, 0, 0, .78) 52%, rgba(0, 0, 0, .3) 100%);
	}

	.bm-cta__texto {
		max-width: none;
	}

	.bm-coleccion__cabecera {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* --- Móvil --------------------------------------------------------------- */
@media (max-width: 700px) {

	.bm {
		font-size: 15px;
	}

	.bm-explora__grid,
	.bm-espacios__grid,
	.bm-coleccion__grid,
	.bm-proceso__pasos {
		grid-template-columns: minmax(0, 1fr);
	}

	.bm-form__fila,
	.bm-form--modal {
		grid-template-columns: minmax(0, 1fr);
	}

	.bm-footer__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 36px;
	}

	.bm-footer__legal {
		flex-direction: column;
		align-items: flex-start;
	}

	.bm-hero__botones .bm-btn,
	.bm-cta__botones .bm-btn {
		flex: 1 1 100%;
		min-width: 0;
	}

	.bm-cf__datos {
		flex-direction: column;
		gap: 22px;
	}

	.bm-espacio__cuerpo {
		flex-direction: column;
		gap: 14px;
	}

	/* El reproductor se reordena para que las ondas ocupen todo el ancho. */
	.bm-player {
		padding: 18px 18px 14px;
	}

	.bm-player__fila {
		gap: 14px;
	}

	.bm-player__boton {
		width: 52px;
		height: 52px;
	}

	.bm-player__ondas {
		height: 46px;
	}

	.bm-player__pie {
		flex-wrap: wrap;
		gap: 12px;
	}

	.bm-exp__acciones {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
	}

	.bm-exp__escuchar {
		width: 100%;
	}

	.bm-compartir {
		justify-content: center;
		padding-left: 4px;
	}

	.bm-compartir::before {
		display: none;
	}

	.bm-espacios__deco {
		opacity: .3;
	}

	.bm-modal {
		padding: 0;
		align-items: flex-end;
	}

	.bm-modal__caja {
		width: 100%;
		max-height: 92svh;
		border-radius: 18px 18px 0 0;
	}

	.bm-ambiente__panel {
		display: none;
	}
}

@media (max-width: 400px) {

	.bm-logo__marca {
		width: 32px;
		height: 32px;
	}

	.bm-logo__texto {
		font-size: 20px;
	}
}

/* ==========================================================================
   18. Preferencias del sistema
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	.bm *,
	.bm *::before,
	.bm *::after,
	.bm-modal *,
	.bm-ambiente * {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}

	.bm-animar .bm-anim {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-contrast: more) {

	.bm-sub,
	.bm-explora__txt,
	.bm-obra__txt,
	.bm-espacio__txt,
	.bm-proceso__txt {
		color: #e6e6e6;
	}

	.bm-espacio,
	.bm-proceso__paso {
		border-color: rgba(255, 255, 255, .4);
	}
}

@media print {

	.bm-nav,
	.bm-ambiente,
	.bm-modal,
	.bm-hero__flecha,
	.bm-player {
		display: none !important;
	}

	.bm {
		background: #fff;
		color: #000;
	}
}

/* ==========================================================================
   19. Compatibilidad con el tema del sitio
   ==========================================================================

   La landing es un bloque oscuro dentro de una página que el tema pinta en
   claro, y casi todos los temas fijan `color` directamente sobre los titulares
   y los enlaces. En almabonsai.cl llegan a hacerlo tres capas a la vez: el
   tema (`.entry-content h2`), el CSS del personalizador y Elementor, que es
   quien envuelve el shortcode. El resultado es que los titulares heredan el
   gris del tema en lugar del blanco del bloque.

   Aquí se restablecen los colores del diseño. Se usa `!important` a propósito:
   es la única forma de imponerlos sin conocer de antemano la especificidad de
   cada tema, y el alcance está limitado al contenedor `.bm`, de modo que no
   afecta a nada fuera de la landing.

   Esto no impide personalizar los colores: todos salen de las variables que
   se editan en «Bonsai Music → General y diseño».
   ========================================================================== */

/*
 * Punto de partida: heredar el color del bloque, no el del tema.
 *
 * `span` queda fuera a propósito: hay piezas del diseño que dependen de su
 * propio color, como el número en contorno de los pasos, que es transparente
 * con el trazo magenta, o la casilla de consentimiento. Forzarles `inherit`
 * las volvería visibles.
 */
.bm :where(h1, h2, h3, h4, h5, h6, a, button, p, li, strong, em) {
	color: inherit !important;
}

.bm :where(a) {
	text-decoration: none !important;
}

/* --- Textos secundarios --------------------------------------------------- */

.bm .bm-sub,
.bm .bm-explora__txt,
.bm .bm-obra__txt,
.bm .bm-espacio__txt,
.bm .bm-proceso__txt,
.bm .bm-news__texto,
.bm .bm-espacios__cta-txt,
.bm .bm-modal__texto,
.bm .bm-legal__texto,
.bm .bm-campo > span {
	color: var(--bm-texto-2) !important;
}

.bm .bm-hero__sub,
.bm .bm-exp__texto,
.bm .bm-colabora__txt {
	color: rgba(255, 255, 255, .84) !important;
}

.bm .bm-cf__texto,
.bm .bm-sobre__texto,
.bm .bm-sobre__bio {
	color: rgba(255, 255, 255, .82) !important;
}

.bm .bm-exp__pie,
.bm .bm-cta__pie,
.bm .bm-footer__legal,
.bm .bm-footer__legal a {
	color: rgba(255, 255, 255, .5) !important;
}

.bm .bm-cta__sub,
.bm .bm-cf__dato-sub {
	color: rgba(255, 255, 255, .88) !important;
}

.bm .bm-footer__bajada {
	color: var(--bm-texto-2) !important;
}

.bm .bm-nav__menu a,
.bm .bm-footer__col a,
.bm .bm-footer__texto {
	color: rgba(255, 255, 255, .9) !important;
}

.bm .bm-titulo--suave {
	color: rgba(255, 255, 255, .82) !important;
}

.bm .bm-player__tiempo,
.bm .bm-player__mute {
	color: rgba(255, 255, 255, .8) !important;
}

/* --- Magenta de marca ----------------------------------------------------- */

.bm .bm-etiqueta,
.bm .bm-destacado,
.bm .bm-enlace,
.bm .bm-hero__flecha,
.bm .bm-footer__col-tit,
.bm .bm-cf__dato-tit,
.bm .bm-logo__texto em,
.bm .bm-btn--mono,
.bm .bm-compartir .bm-icono,
.bm .bm-espacio__icono {
	color: var(--bm-primario) !important;
}

.bm .bm-titulo--suave .bm-destacado {
	color: var(--bm-texto) !important;
}

/* --- Botones -------------------------------------------------------------- */

.bm .bm-btn--primario,
.bm .bm-player__boton {
	color: #fff !important;
}

/* --- Estados -------------------------------------------------------------- */

.bm .bm-nav__menu a:hover,
.bm .bm-nav__menu a:focus-visible,
.bm .bm-footer__col a:hover,
.bm .bm-footer__col a:focus-visible,
.bm .bm-compartir:hover,
.bm .bm-compartir:focus-visible,
.bm .bm-player__mute:hover,
.bm .bm-modal__cerrar:hover {
	color: var(--bm-primario) !important;
}

.bm .bm-enlace:hover,
.bm .bm-enlace:focus-visible {
	color: var(--bm-primario-2) !important;
}

.bm .bm-footer__legal a:hover,
.bm .bm-footer__legal a:focus-visible {
	color: var(--bm-texto) !important;
}

.bm .bm-form__aviso.is-ok {
	color: #5ee6a8 !important;
}

.bm .bm-form__aviso.is-error {
	color: #ff7b7b !important;
}

/* --- Formularios ---------------------------------------------------------- */

/* Los campos también reciben estilos del tema y del constructor de páginas. */
.bm .bm-campo input,
.bm .bm-campo textarea {
	color: var(--bm-texto) !important;
	background: rgba(255, 255, 255, .02) !important;
	border: 1px solid rgba(255, 255, 255, .18) !important;
	border-radius: 4px !important;
}

.bm .bm-campo input:focus,
.bm .bm-campo textarea:focus {
	border-color: var(--bm-primario) !important;
	background: rgba(var(--bm-primario-rgb), .05) !important;
}

.bm .bm-campo.is-error input,
.bm .bm-campo.is-error textarea {
	border-color: #ff5a5a !important;
}

/* El fondo del bloque debe ganar al del tema y al del constructor. */
.bm {
	background-color: var(--bm-fondo);
}

/* --- Titulares ------------------------------------------------------------ */

/*
 * Los temas suelen imponer su propia tipografía a los titulares, y algunos
 * también los pasan a mayúsculas. El diseño de la landing no lleva versalitas
 * en los titulares, así que se restablece todo.
 */
.bm.bm :where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--bm-titulos) !important;
	text-transform: none !important;
	font-style: normal !important;
}

.bm.bm .bm-display {
	font-family: var(--bm-display) !important;
}

.bm.bm .bm-etiqueta,
.bm.bm .bm-cf__dato-sub,
.bm.bm .bm-cta__pie,
.bm.bm .bm-player__tiempo,
.bm.bm .bm-btn--mono {
	font-family: var(--bm-mono) !important;
	text-transform: uppercase !important;
}

.bm.bm .bm-cf__dato-tit,
.bm.bm .bm-proceso__tit,
.bm.bm .bm-footer__col-tit {
	text-transform: uppercase !important;
}

.bm.bm .bm-footer__logo span {
	font-family: var(--bm-titulos) !important;
}

/* El resto de textos también hereda la tipografía del tema si no se fija. */
.bm.bm :where(p, li, input, textarea, select) {
	font-family: var(--bm-texto-font);
}

/*
 * Estos elementos heredan del contexto en lugar de fijar una familia: los
 * titulares multilínea se componen de `span`, y darles la tipografía de texto
 * los sacaría de la serif del titular.
 */
.bm.bm :where(a, button, span, strong, em, label) {
	font-family: inherit;
}

.bm.bm .bm-cf__dato-tit {
	font-family: var(--bm-display) !important;
}

/* --- Botones -------------------------------------------------------------- */

/*
 * Los temas suelen estirar los botones a todo el ancho y pasarlos a
 * mayúsculas. Con el botón ocupando el 100 %, la fila de acciones del bloque 2
 * se partía en dos y «Compartir esta experiencia» caía debajo.
 */
.bm.bm .bm-btn,
.bm.bm .bm-compartir,
.bm.bm .bm-player__boton,
.bm.bm .bm-player__mute,
.bm.bm .bm-modal__cerrar,
.bm.bm .bm-nav__toggle {
	width: auto !important;
	min-width: 0 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	line-height: 1.2 !important;
	text-decoration: none !important;
	text-shadow: none !important;
}

.bm.bm .bm-btn {
	max-width: 100% !important;
	font-weight: 500 !important;
}

.bm.bm .bm-compartir {
	font-weight: 400 !important;
}

/* Las excepciones del diseño se redeclaran con la misma especificidad. */
.bm.bm .bm-btn--ancho {
	width: 100% !important;
}

.bm.bm .bm-btn--mono {
	font-weight: 700 !important;
	letter-spacing: .14em !important;
	text-transform: uppercase !important;
}

.bm.bm .bm-player__boton,
.bm.bm .bm-player__mute,
.bm.bm .bm-modal__cerrar {
	flex: none !important;
}

/* La fila de acciones no debe partirse mientras quepa. */
.bm.bm .bm-exp__acciones {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: center !important;
}

/* --- Imágenes ------------------------------------------------------------- */

/*
 * Casi todos los temas y constructores declaran `img { height: auto }`, a
 * menudo con `!important`. Eso impide que las imágenes de apoyo llenen su
 * área y las deja a su altura natural, con huecos alrededor.
 */
.bm .bm-hero__img,
.bm .bm-cta__img,
.bm .bm-exp__img,
.bm .bm-cf__img,
.bm .bm-sobre__img,
.bm .bm-colabora__img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	object-fit: var(--bm-img-fit, cover) !important;
	object-position: var(--bm-img-x, 50%) var(--bm-img-y, 50%) !important;
	transform: scale(var(--bm-img-escala, 1)) !important;
}

/* Imágenes de tarjeta: llenan su marco, que tiene la proporción fijada. */
.bm .bm-explora__img,
.bm .bm-obra__img,
.bm .bm-espacio__img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	border-radius: 0 !important;
	object-fit: cover !important;
}

/* El contenedor recorta la imagen cuando se amplía con la escala. */
.bm .bm-exp__media,
.bm .bm-cf__media,
.bm .bm-sobre__media,
.bm .bm-colabora__media,
.bm .bm-hero__fondo,
.bm .bm-cta__fondo {
	overflow: hidden !important;
}

/* `picture` no debe introducir su propia caja entre el marco y la imagen. */
.bm picture {
	display: contents !important;
}

/* --- Adaptación a móvil dentro de la capa de compatibilidad -------------- */

/*
 * Las reglas de arriba llevan `!important`, así que el comportamiento móvil
 * debe repetirse aquí con la misma especificidad para poder ganar.
 */
@media (max-width: 700px) {

	.bm.bm .bm-exp__acciones {
		flex-direction: column !important;
		align-items: stretch !important;
	}

	.bm.bm .bm-exp__escuchar,
	.bm.bm .bm-hero__botones .bm-btn,
	.bm.bm .bm-cta__botones .bm-btn {
		width: 100% !important;
		max-width: none !important;
	}

	.bm.bm .bm-compartir {
		justify-content: center !important;
	}
}

/* --- Encaje «contener»: el marco se ajusta a la imagen ------------------- */

/*
 * Cuando la imagen se muestra completa no tiene sentido estirar su marco a
 * toda la altura del bloque: se centra y el bloque respira.
 */
.bm.bm .bm-exp__media,
.bm.bm .bm-cf__media,
.bm.bm .bm-sobre__media,
.bm.bm .bm-colabora__media {
	align-self: var(--bm-media-align, stretch) !important;
	min-height: var(--bm-media-min, 420px) !important;
	aspect-ratio: var(--bm-media-ratio, auto) !important;
	max-height: 100% !important;
}

.bm-exp__grid,
.bm-cf__grid,
.bm-sobre__grid,
.bm-colabora__grid {
	align-items: center;
}

@media (max-width: 900px) {

	.bm.bm .bm-exp__media,
	.bm.bm .bm-cf__media,
	.bm.bm .bm-sobre__media,
	.bm.bm .bm-colabora__media {
		align-self: stretch !important;
		min-height: 0 !important;
		max-height: none !important;
		aspect-ratio: var(--bm-media-ratio, 4 / 3) !important;
	}
}