/* Home Basketmon — versión Tornados-style (mockup v2 validado).
 *
 * Estética: video hero + tipografía sobria Inter Tight, cards limpias,
 * paleta acento rojo, ritmo de fondos blanco/gris/oscuro.
 *
 * Selectores `bm-section-*` aplicados sobre los <section> Elementor.
 * Selectores `bm-w-*` aplicados sobre los widgets. Todos los !important
 * son obligatorios porque Elementor inyecta CSS inline con alta especificidad.
 */

/* ════════════════════════════════════════════════════════════════
 * BASE / RESET de Elementor para la home
 * ════════════════════════════════════════════════════════════════ */
.page-id-7 .elementor-section { padding-top: 0; padding-bottom: 0; }
.page-id-7 .elementor-widget:not(:last-child) { margin-bottom: 0; }
.page-id-7 .bm-accent,
.page-id-7 .elementor-heading-title .bm-accent {
	color: var(--bm-color-accent) !important;
	display: inline !important;
}

/* Cierre limpio: el wrap del contenido NO añade padding extra entre la última
 * section y el footer. Hello Elementor por defecto suele dejar margen blanco.
 * Aplicamos también a body y al footer para eliminar cualquier margin collapse. */
.page-id-7 #bm-content,
.page-id-7 .bm-site-content,
body.home .bm-site-content {
	margin: 0 !important;
	padding: 0 !important;
}
.page-id-7 .elementor,
.page-id-7 .elementor-section-wrap,
.page-id-7 .elementor-inner,
body.home .elementor-section-wrap {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}
.page-id-7 .elementor-section:last-child,
.page-id-7 .bm-section-cta-final {
	margin-bottom: 0 !important;
}
body.home .bm-site-footer {
	margin-top: 0 !important;
}

/* Fuerza Inter Tight en TODOS los headings de la home (peso 800, no genérico). */
.page-id-7 .elementor-heading-title {
	font-family: var(--bm-font-heading) !important;
	font-weight: 800 !important;
}

/* Eyebrow base — etiqueta pequeña uppercase con barrita roja. */
.elementor-widget-heading.bm-w-eyebrow > .elementor-widget-container,
.elementor-widget-heading.bm-w-eyebrow {
	display: inline-flex;
	align-items: center;
}
.elementor-widget-heading.bm-w-eyebrow .elementor-heading-title {
	font-family: var(--bm-font-body) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.24em !important;  /* TYPE-1: 0.30 → 0.24em, més editorial */
	text-transform: uppercase !important;
	color: var(--bm-color-accent) !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 12px !important;
	margin-bottom: 22px !important;
}
.elementor-widget-heading.bm-w-eyebrow .elementor-heading-title::before {
	content: '';
	width: 48px; height: 1px;
	background: var(--bm-color-accent);
	display: inline-block;
	flex-shrink: 0;
}
.elementor-widget-heading.bm-eyebrow-light .elementor-heading-title {
	color: rgba(255,255,255,0.78) !important;
}

/* Título de sección — Inter Tight 800. Tamaño calibrado para hierarchy sin
 * "scream" — el hero es el único que grita, las secciones respiran. */
.elementor-widget-heading.bm-w-title .elementor-heading-title {
	font-family: var(--bm-font-heading) !important;
	font-size: clamp(36px, 4.4vw, 72px) !important;
	font-weight: 800 !important;
	line-height: 1.04 !important;
	letter-spacing: -0.025em !important;
	margin: 0 !important;
	text-wrap: balance;
}
.elementor-widget-heading .bm-accent { color: var(--bm-color-accent); }

/* Lead text base — selectores muy específicos porque el theme padre y el kit
 * de Elementor pueden sobreescribir. Targets: text-editor widget de Elementor. */
.page-id-7 .bm-w-lead,
.page-id-7 .bm-w-lead .elementor-widget-container,
.page-id-7 .bm-w-lead .elementor-widget-container > *,
.page-id-7 .bm-w-lead p,
.page-id-7 .bm-w-lead li {
	font-family: var(--bm-font-body) !important;
	font-size: 17px !important;
	line-height: 1.65 !important;
	color: var(--bm-color-text-soft) !important;
	max-width: 580px;
}

/* ════════════════════════════════════════════════════════════════
 * 1. HERO con video como widget HTML (no bg_video de Elementor)
 * ════════════════════════════════════════════════════════════════ */
.bm-section-hero.elementor-section {
	min-height: 100vh !important;
	margin-top: -88px;
	padding-top: 168px !important;
	padding-bottom: 80px !important;
	color: #fff;
	position: relative;
	overflow: hidden;
}

/* Ocultar el widget HTML wrap original — el <video> ha sido movido al section
 * directamente por el script inline del widget. */
.bm-section-hero .bm-hero__video-wrap {
	display: none !important;
}

/* El <video> reubicado como primer hijo del .bm-section-hero ocupa todo el
 * background del hero. Sin pointer-events para no bloquear clicks. */
.bm-section-hero > .bm-hero-bg-video {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center center !important;
	display: block !important;
	z-index: 0 !important;
	pointer-events: none;
}

/* El oscurecimiento del hero lo controla ÍNTEGRAMENTE el overlay nativo de
 * Elementor (Estilo → Fondo → Superposició de fons), editable por el cliente con
 * un único slider de opacidad. NO añadir aquí una segunda capa de overlay: dejaría
 * un oscurecimiento fijo que el cliente no podría bajar. La legibilidad del texto
 * se garantiza con el text-shadow de abajo, independiente del nivel de overlay. */
.bm-section-hero .bm-hero__title .elementor-heading-title,
.bm-section-hero .bm-hero__sub {
	text-shadow: 0 2px 24px rgba(15, 15, 18, 0.45);
}
/* Container del hero — el section ya tiene min-height:100vh, el container NO debe
 * duplicarlo (Elementor inyecta min-height:100vh al container por defecto cuando
 * height:min-height está en el section, y eso fuerza espacio extra que descuadra). */
.bm-section-hero > .elementor-container {
	position: relative;
	z-index: 3;
	max-width: 1480px !important;
	min-height: 0 !important;
	height: auto !important;
	align-items: center !important;
	gap: 60px !important;
	flex-wrap: nowrap !important;
}
/* Reparto del grid: PRIMERA columna grande para el título oversized,
 * SEGUNDA columna pequeña justo para la card. Forzamos widths explícitos
 * porque las clases elementor-col-XX tienen specificity 1 y ganan en empate;
 * con !important + width directo vence. */
.bm-section-hero > .elementor-container > .bm-hero__content.elementor-column {
	flex: 0 0 calc(100% - 380px - 60px) !important;
	width: calc(100% - 380px - 60px) !important;
	max-width: calc(100% - 380px - 60px) !important;
}
.bm-section-hero > .elementor-container > .bm-hero__aside.elementor-column {
	flex: 0 0 380px !important;
	width: 380px !important;
	max-width: 380px !important;
	display: flex;
	justify-content: flex-end;
	align-self: flex-end !important;
}
/* Mantener la card alineada a la derecha incluso cuando es más estrecha que la columna. */
.bm-section-hero .bm-hero__aside .bm-hero-card.elementor-section {
	margin-left: auto !important;
}

/* Hero content column — sin max-width: la columna ya tiene su width calculado
 * en el reparto de arriba. Si limitamos a 760px además, el título oversized
 * se corta antes de llegar al borde de la columna. */
.bm-hero__content {
	max-width: none !important;
}

/* Título del hero — más grande aún que el de sección normal.
 * width 720px para forzar el salto de línea exactamente como el mockup. */
.bm-section-hero .bm-hero__title .elementor-heading-title {
	font-size: clamp(48px, 7.2vw, 116px) !important;
	line-height: 0.98 !important;
	color: #FFFFFF !important;
	max-width: 720px !important;
}

/* Lead del hero — FORZAR blanco, varios selectores porque el text-editor
 * widget de Elementor renderiza el contenido en muchos wrappers distintos
 * según versión y settings. */
.bm-section-hero .bm-hero__sub,
.bm-section-hero .bm-hero__sub p,
.bm-section-hero .bm-hero__sub .elementor-widget-container,
.bm-section-hero .bm-hero__sub .elementor-widget-container > *,
.bm-section-hero .bm-hero__sub .elementor-widget-container p {
	color: rgba(255,255,255,0.92) !important;
	font-size: 18px !important;
	line-height: 1.6 !important;
	max-width: 640px;  /* HERO-3: 560 → 640px, més pes al lead */
	font-family: var(--bm-font-body) !important;
}

/* CTAs del hero — inner section wrapper con 1 columna que contiene los 2
 * botones inline. La inner section es BLOCK (newline natural respecto al
 * subtítulo), y dentro los widgets button son inline-block lado a lado. */
.bm-hero__ctas.elementor-section {
	margin-top: 12px !important;
}
.bm-hero__ctas > .elementor-container {
	max-width: none !important;
	padding: 0 !important;
}
.bm-hero__ctas .elementor-column { width: 100% !important; }
.bm-hero__ctas .bm-hero__cta {
	display: inline-block !important;
	width: auto !important;
	margin-right: 14px !important;
	vertical-align: top;
}
.bm-hero__ctas .bm-hero__cta:last-child { margin-right: 0 !important; }
.bm-hero__ctas .bm-hero__cta .elementor-widget-container {
	display: inline-block;
}

/* Botones refinats — el primari pill solid amb pes, el secundari link amb
 * fletxa animada (no ghost outline, que feia el classic AI duo). */
.bm-section-hero .elementor-button {
	transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease !important;
}
/* Botó primari — "VEURE TORNEJOS": pill solid amb una mica més de pes
 * tipogràfic i un padding generós. Letter-spacing literal (no em) per
 * mantenir la cadència visual a totes les mides. */
.bm-hero__cta--primary .elementor-button {
	padding: 20px 40px !important;
	font-size: 14px !important;
	letter-spacing: 2px !important;
	font-weight: 700 !important;
	background: var(--bm-color-accent) !important;
	color: #FFFFFF !important;
	border-radius: 9999px !important;
}
.bm-hero__cta--primary .elementor-button:hover {
	transform: translateY(-2px);
	background: var(--bm-color-accent-hover) !important;
}
/* Botó secundari — pasa de "ghost pill" a link inline amb fletxa que
 * avança al hover. Trenca la simetria "two pills" típica. */
.bm-hero__cta--ghost .elementor-button {
	padding: 20px 8px !important;
	background: transparent !important;
	color: #FFFFFF !important;
	border: 0 !important;
	border-radius: 0 !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	letter-spacing: 1.5px !important;
	text-transform: uppercase !important;
	position: relative;
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
}
.bm-hero__cta--ghost .elementor-button::after {
	content: '→';
	font-size: 18px;
	display: inline-block;
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.bm-hero__cta--ghost .elementor-button::before {
	content: '';
	position: absolute;
	left: 8px;
	right: 8px;
	bottom: 14px;
	height: 1px;
	background: rgba(255,255,255,0.4);
	transition: background-color 0.25s ease;
}
.bm-hero__cta--ghost .elementor-button:hover {
	transform: none;
	color: #FFFFFF !important;
	background: transparent !important;
}
.bm-hero__cta--ghost .elementor-button:hover::after {
	transform: translateX(6px);
}
.bm-hero__cta--ghost .elementor-button:hover::before {
	background: var(--bm-color-accent);
}

/* Iconos sociales — separació generosa al desktop, més continguda en mobile
 * perquè no quedin "solts" amb un blanc gegant entre ells i la pròxima secció. */
.bm-hero__socials-wrap {
	margin-top: 60px !important;
}
@media (max-width: 1100px) {
	.bm-hero__socials-wrap { margin-top: 32px !important; }
}
.bm-hero-socials {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}
.bm-hero-social {
	width: 44px; height: 44px;
	border-radius: 12px;  /* SOCIAL-1: rounded square (no full circle) */
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.14);
	display: grid; place-items: center;
	color: #fff;
	transition: background 0.2s, transform 0.2s, border-color 0.2s, border-radius 0.3s;
}
.bm-hero-social svg { width: 18px; height: 18px; }
.bm-hero-social:hover {
	background: var(--bm-color-accent);
	border-color: var(--bm-color-accent);
	border-radius: 16px;  /* hover → squircle més arrodonit. Microdetall. */
	transform: translateY(-2px);
}

/* Hero card flotante (próximo torneig) — alineado al centro vertical del hero,
 * justo a la derecha del título. NO al bottom. */
.bm-hero__aside {
	align-self: center;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.bm-hero-card.elementor-section {
	background: rgba(15,15,18,0.55) !important;
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	border: 1px solid rgba(255,255,255,0.10);
	border-radius: 20px !important;
	box-shadow: 0 24px 48px rgba(0,0,0,0.35);
	max-width: 360px !important;
	width: 100%;
	transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s;
}
.bm-hero-card.elementor-section:hover {
	transform: translateY(-6px);
	box-shadow: 0 36px 60px rgba(0,0,0,0.5);
}
.bm-hero-card .bm-hero-card__media img {
	border-radius: 14px;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	width: 100%;
}
.bm-hero-card .bm-hero-card__media {
	margin-bottom: 16px !important;
}
.bm-hero-card .bm-hero-card__tag .elementor-heading-title {
	font-family: var(--bm-font-body) !important;
	font-size: 10px !important;
	font-weight: 800 !important;
	letter-spacing: 0.24em !important;
	text-transform: uppercase !important;
	color: var(--bm-color-accent) !important;
	margin-bottom: 8px !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
}
.bm-hero-card .bm-hero-card__tag .elementor-heading-title::before {
	content: '';
	width: 8px; height: 8px;
	background: var(--bm-color-accent);
	border-radius: 50%;
	animation: bm-dot-pulse 1.6s ease-in-out infinite;
}
@keyframes bm-dot-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.4; transform: scale(0.85); }
}
.bm-hero-card .bm-hero-card__title .elementor-heading-title {
	font-family: var(--bm-font-heading) !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	letter-spacing: -0.005em !important;
	color: #fff !important;
	margin-bottom: 6px !important;
}
.bm-hero-card .bm-hero-card__meta p {
	color: rgba(255,255,255,0.7) !important;
	font-size: 13px !important;
	margin: 0 !important;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
.bm-hero-card .bm-hero-card__meta-icon {
	color: var(--bm-color-accent);
	flex-shrink: 0;
	margin-right: 2px;
}
.bm-hero-card .bm-hero-card__meta-sep {
	opacity: 0.4;
	margin: 0 4px;
}

/* ════════════════════════════════════════════════════════════════
 * 2. STATS STRIP — banda cream que cose el flujo del hero al about.
 * Cifra (heading 800) + label uppercase + barrita accent breve que apareix
 * al revelar la secció (4 retards :nth-child). Diferencia visual sense
 * trencar el flux cromàtic global.
 * ════════════════════════════════════════════════════════════════ */
.bm-section-stats.elementor-section {
	/* background: #F6F5F2 !important;  override del background_color inline del seed */
	border-bottom: 1px solid var(--bm-color-border);
}
.bm-section-stats > .elementor-container {
	max-width: 1480px !important;
	padding: 0 !important;
}
.bm-section-stats .bm-stat {
	padding: 52px 32px !important;
	border-right: 1px solid var(--bm-color-border);
	position: relative;
}
.bm-section-stats .bm-stat:last-child {
	border-right: 0;
}
.bm-section-stats .bm-stat__num .elementor-heading-title {
	font-family: var(--bm-font-heading) !important;
	font-size: clamp(40px, 4.5vw, 64px) !important;
	font-weight: 800 !important;
	line-height: 1 !important;
	letter-spacing: -0.028em !important;
	color: var(--bm-color-text) !important;
	margin: 0 !important;
	font-feature-settings: "tnum" 1, "lnum" 1;
	font-variant-numeric: tabular-nums lining-nums;
	position: relative;
	display: inline-block;
}
/* Barrita accent sota la xifra — anchor visual editorial. */
.bm-section-stats .bm-stat__num .elementor-heading-title::after {
	content: '';
	display: block;
	width: 32px;
	height: 2px;
	background: var(--bm-color-accent);
	margin-top: 18px;
}
.bm-section-stats .bm-stat__label .elementor-heading-title {
	font-family: var(--bm-font-body) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.22em !important;
	text-transform: uppercase !important;
	color: var(--bm-color-text-mute) !important;
	margin-top: 20px !important;
}

/* ════════════════════════════════════════════════════════════════
 * 3. ABOUT — Qui som
 * ════════════════════════════════════════════════════════════════ */
.bm-section-about.elementor-section {
	background: #F6F5F2;
}
.bm-section-about > .elementor-container {
	max-width: 1320px !important;
	gap: 80px;
	align-items: center !important;
}
/* Split 55/45 amb la media desplaçada en eix Y → trenca la simetria
 * "AI 50/50" sense rompre la quadrícula. El text agafa el pes lingüístic,
 * la imatge fa contrast vertical. */
.bm-section-about .bm-about__text {
	width: calc(55% - 40px) !important;
	flex: 0 0 calc(55% - 40px) !important;
}
.bm-section-about .bm-about__media {
	width: calc(45% - 40px) !important;
	flex: 0 0 calc(45% - 40px) !important;
	transform: translateY(40px);
}
.bm-about__text .bm-about__title .elementor-heading-title {
	font-size: clamp(36px, 4.4vw, 72px) !important;
	margin-top: 0 !important;
	margin-bottom: 28px !important;
	line-height: 1.04 !important;
	letter-spacing: -0.025em !important;
}
/* El span .bm-accent debe ser INLINE, no inline-block — si no se rompe en
 * línea propia y queda feo (caso "propòsit" partiendo el título en 3 líneas
 * en vez de 2). */
.bm-about__text .bm-about__title .elementor-heading-title .bm-accent {
	display: inline !important;
	color: var(--bm-color-accent) !important;
}
/* Lead del about — máxima especificidad para vencer al kit de Elementor.
 * Selectores explícitos sobre p, ul, ol del widget text-editor. */
.page-id-7 .bm-about__lead,
.page-id-7 .bm-about__lead .elementor-widget-container,
.page-id-7 .bm-about__lead .elementor-widget-container > *,
.page-id-7 .bm-about__lead p,
.page-id-7 .bm-about__lead ul,
.page-id-7 .bm-about__lead li {
	font-family: var(--bm-font-body) !important;
	font-size: 17px !important;
	line-height: 1.7 !important;
	color: var(--bm-color-text-soft) !important;
	max-width: 520px;
}
.page-id-7 .bm-about__lead { margin-top: 0 !important; }
.page-id-7 .bm-about__lead p + p { margin-top: 1em !important; }
.bm-about__text .bm-about__lead p + p { margin-top: 1em !important; }

/* Checklist editorial — sense els ticks rojos circulars (patró feature-SaaS).
 * Cada item té un número discret a l'esquerra, separat per una barrita
 * vertical accent. Llegeix com un manifest de marca, no com pricing tier.
 * counter-reset al <ul> + content: counter() amb format de dues xifres. */
.bm-about__text .bm-about__checklist {
	margin-top: 40px !important;
}
.bm-about__checklist .bm-checklist {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px 32px;
	counter-reset: bm-manifest;
}
.bm-about__checklist .bm-checklist li {
	counter-increment: bm-manifest;
	position: relative;
	padding-left: 56px;
	font-family: var(--bm-font-body);
	font-size: 15px;
	font-weight: 500;
	color: var(--bm-color-text);
	line-height: 1.5;
}
.bm-about__checklist .bm-checklist li::before {
	content: counter(bm-manifest, decimal-leading-zero);
	position: absolute;
	left: 0; top: 1px;
	font-family: var(--bm-font-heading);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--bm-color-accent);
	width: 28px;
	padding-right: 8px;
	border-right: 1px solid var(--bm-color-border);
	text-align: left;
}

.bm-about__text .elementor-widget-button {
	margin-top: 40px !important;
}

/* Media + tag flotante — la imagen debe ser PROMINENTE */
.bm-about__media {
	position: relative;
}
.bm-about__image,
.bm-about__image > .elementor-widget-container,
.bm-about__image > .elementor-widget-container > a,
.bm-about__image > .elementor-widget-container > div {
	width: 100%;
}
.bm-about__image img {
	width: 100% !important;
	height: auto !important;
	max-width: none !important;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 24px;
	display: block;
}
.bm-about-tag.elementor-section {
	position: absolute;
	right: -32px;
	bottom: 56px;
	background: var(--bm-color-accent) !important;
	border-radius: 18px !important;
	box-shadow: 0 24px 56px rgba(var(--bm-color-accent-rgb),0.32);
	min-width: 180px;
	z-index: 2;
}
.bm-about-tag .bm-about-tag__num .elementor-heading-title {
	font-family: var(--bm-font-heading) !important;
	font-size: 52px !important;
	font-weight: 900 !important;
	line-height: 0.9 !important;
	letter-spacing: -0.025em !important;
	color: #FFFFFF !important;
	margin: 0 !important;
}
.bm-about-tag .bm-about-tag__label .elementor-heading-title {
	font-family: var(--bm-font-body) !important;
	font-size: 11px !important;
	font-weight: 800 !important;
	letter-spacing: 0.22em !important;
	text-transform: uppercase !important;
	color: rgba(255,255,255,0.85) !important;
	margin-top: 8px !important;
}

/* ════════════════════════════════════════════════════════════════
 * 4. EVENTS — grid de torneos (shortcode)
 * ════════════════════════════════════════════════════════════════ */
.bm-section-events.elementor-section {
	background: #FFFFFF;
}
.bm-section-events > .elementor-container {
	max-width: 1480px !important;
}
/* Header de Pròxims tornejos — split 2 cols:
 *   IZQ (60%): eyebrow + título grande
 *   DER (40%): párrafo descriptivo + link "Veure tots" inline */
.bm-events__head.elementor-section { margin: 0 !important; }
.bm-events__head > .elementor-container {
	max-width: none !important;
	align-items: flex-end !important;
	gap: 60px !important;
}
.bm-events__title .elementor-heading-title {
	margin-top: 22px !important;
	font-size: clamp(36px, 4.4vw, 72px) !important;
}
.bm-events__head-right { padding-bottom: 4px; }
.bm-events__head-right .bm-w-lead p,
.bm-events__head-right .bm-w-lead .elementor-widget-container > * {
	max-width: 380px;
	margin: 0 0 22px !important;
	font-size: 16px !important;
	line-height: 1.55 !important;
}
/* Link "Veure tots →" — el carácter ya viene en el texto del botón.
 * Subrayado accent persistente que se expande sutilmente en hover. */
.bm-events__see-all { display: inline-block !important; width: auto !important; }
.bm-events__see-all .elementor-button {
	position: relative;
	transition: color 0.25s ease !important;
}
.bm-events__see-all .elementor-button::before {
	content: '';
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 100%;
	height: 2px;
	background: var(--bm-color-accent);
	transform: scaleX(1);
	transform-origin: left;
	transition: transform 0.3s ease;
}
.bm-events__see-all .elementor-button:hover {
	letter-spacing: 0.30em !important;
}

/* Grid del shortcode */
.bm-events-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}
.bm-event-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--bm-color-border);
	border-radius: 20px;
	overflow: hidden;
	text-decoration: none;
	color: var(--bm-color-text);
	transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s, border-color 0.3s;
}
.bm-event-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--bm-shadow-lg);
	border-color: transparent;
}
.bm-event-card:hover .bm-event-card-thumb img {
	transform: scale(1.04);
}
.bm-event-card:hover .bm-event-card-cta__link span {
	transform: translateX(4px);
}
/* ════════════════════════════════════════════════════════════════
 * 5. GALERÍA
 * ════════════════════════════════════════════════════════════════ */
.bm-gallery__grid .gallery {
	display: grid !important;
	grid-template-columns: repeat(12, 1fr) !important;
	grid-auto-rows: 160px !important;
	gap: 16px !important;
}
.bm-gallery__grid .gallery-item {
	max-width: none !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}
/* Distribución masonry para 6 imágenes — 3 por fila × 2 filas (como el mockup):
 *   Fila 1: 5 + 4 + 3 cols = 12
 *   Fila 2: 3 + 5 + 4 cols = 12
 * Cada item ocupa 2 rows del grid (~320px alto). */
.bm-gallery__grid .gallery-item:nth-child(1) { grid-column: span 5; grid-row: span 2; }
.bm-gallery__grid .gallery-item:nth-child(2) { grid-column: span 4; grid-row: span 2; }
.bm-gallery__grid .gallery-item:nth-child(3) { grid-column: span 3; grid-row: span 2; }
.bm-gallery__grid .gallery-item:nth-child(4) { grid-column: span 3; grid-row: span 2; }
.bm-gallery__grid .gallery-item:nth-child(5) { grid-column: span 5; grid-row: span 2; }
.bm-gallery__grid .gallery-item:nth-child(6) { grid-column: span 4; grid-row: span 2; }
/* Cualquier 7º+ cae en 4 cols simétricas */
.bm-gallery__grid .gallery-item:nth-child(n+7) { grid-column: span 4; grid-row: span 2; }
.bm-gallery__grid .gallery-icon {
	width: 100%; height: 100%;
	overflow: hidden;
	border-radius: 18px;
	display: block;
	position: relative;
}
.bm-gallery__grid .gallery-icon img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.bm-gallery__grid .gallery-icon:hover img {
	transform: scale(1.08);
}
/* Compat con el sistema motion reveal-image: los <span> wrappers que añade
 * animations.js no tienen height definido; sin esto, el <img> queda corto
 * y el border-radius del .gallery-icon parece "no cerrarse" por abajo. */
.bm-gallery__grid .gallery-icon .bm-reveal-image,
.bm-gallery__grid .gallery-icon .bm-reveal-image__inner {
	display: block;
	width: 100%;
	height: 100%;
}
.bm-gallery__grid .gallery-icon .bm-reveal-image > .bm-reveal-image__inner > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ════════════════════════════════════════════════════════════════
 * 5b. CAMPS — sustituye a la galería decorativa
 * ════════════════════════════════════════════════════════════════ */
.bm-section-camps.elementor-section {
	background: #F6F5F2;
}
.bm-section-camps > .elementor-container {
	max-width: 1480px !important;
}
.bm-camps__head .bm-w-eyebrow .elementor-heading-title {
	margin-bottom: 12px !important;
}
.bm-camps__title .elementor-heading-title {
	margin-top: 8px !important;
	margin-bottom: 0 !important;
	max-width: 18ch !important;
	line-height: 1.04 !important;
}
.bm-camps__lead .elementor-text-editor {
	color: var(--bm-color-text-soft);
	font-size: 17px !important;
	line-height: 1.55 !important;
	margin-bottom: 12px;
}
.bm-camps__head-right {
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-end !important;
}
@media (max-width: 768px) {
	.bm-camps__head .elementor-container,
	.bm-camps__head > .elementor-container {
		flex-direction: column !important;
	}
	.bm-camps__head-left,
	.bm-camps__head-right {
		width: 100% !important;
	}
}

/* ════════════════════════════════════════════════════════════════
 * 6. CTA FINAL
 * ════════════════════════════════════════════════════════════════ */
/* CTA final — patrón canónico alineado a .bm-archive__cta:
 *   fondo negro plano sin halos decorativos, max-width 720px, título
 *   contenido. Es el modelo del cierre del sitio entero. */
.bm-section-cta-final.elementor-section {
	background: var(--bm-color-text);
	position: relative;
}
.bm-section-cta-final > .elementor-container {
	max-width: 720px !important;
	text-align: center;
}
.bm-section-cta-final .bm-w-eyebrow {
	justify-content: center !important;
}
.bm-section-cta-final .bm-w-eyebrow .elementor-heading-title {
	justify-content: center !important;
	color: rgba(255,255,255,0.6) !important;
	font-size: 13px !important;
	letter-spacing: 0.28em !important;
}
.bm-section-cta-final .bm-w-eyebrow .elementor-heading-title::before {
	display: none;
}
.bm-section-cta-final .bm-cta-final__title .elementor-heading-title {
	font-size: clamp(36px, 5vw, 64px) !important;
	color: #FFFFFF !important;
	font-weight: 900 !important;
	margin-top: 16px !important;
	line-height: 1.05 !important;
	letter-spacing: -0.02em !important;
}
/* Lead del CTA final — alineado al patrón canónico de .bm-archive__cta */
.page-id-7 .bm-section-cta-final .bm-cta-final__lead,
.page-id-7 .bm-section-cta-final .bm-cta-final__lead p,
.page-id-7 .bm-section-cta-final .bm-cta-final__lead .elementor-widget-container,
.page-id-7 .bm-section-cta-final .bm-cta-final__lead .elementor-widget-container > * {
	color: rgba(255,255,255,0.75) !important;
	font-size: 17px !important;
	line-height: 1.55 !important;
	max-width: 560px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	text-align: center !important;
}
.page-id-7 .bm-section-cta-final .bm-cta-final__lead {
	margin-top: 16px !important;
	margin-bottom: 32px !important;
}
.bm-cta-final__buttons.elementor-section {
	margin-top: 16px !important;
}
.bm-cta-final__buttons .elementor-container {
	justify-content: center !important;
	max-width: none !important;
	flex-wrap: wrap !important;
	gap: 14px;
}
.bm-cta-final__buttons > .elementor-container > .elementor-column {
	width: auto !important;
	flex: 0 0 auto !important;
}
/* CTA final — botó primari pill solid amb pes. Secundari passa a link inline
 * amb fletxa animada, trencant la simetria "two pills" classica. */
.bm-cta-final__buttons > .elementor-container > .elementor-column:first-child .elementor-button {
	padding: 20px 40px !important;
	font-size: 14px !important;
	letter-spacing: 2px !important;
	font-weight: 700 !important;
	background: var(--bm-color-accent) !important;
	color: #FFFFFF !important;
	border-radius: 9999px !important;
	transition: background-color 0.25s ease, transform 0.25s ease !important;
}
.bm-cta-final__buttons > .elementor-container > .elementor-column:first-child .elementor-button:hover {
	transform: translateY(-2px);
	background: var(--bm-color-accent-hover) !important;
}
.bm-cta-final__buttons > .elementor-container > .elementor-column:last-child .elementor-button {
	padding: 20px 8px !important;
	background: transparent !important;
	color: #FFFFFF !important;
	border: 0 !important;
	border-radius: 0 !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	letter-spacing: 1.5px !important;
	text-transform: uppercase !important;
	position: relative;
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
	transition: color 0.25s ease;
}
.bm-cta-final__buttons > .elementor-container > .elementor-column:last-child .elementor-button::after {
	content: '→';
	font-size: 18px;
	display: inline-block;
	transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.bm-cta-final__buttons > .elementor-container > .elementor-column:last-child .elementor-button::before {
	content: '';
	position: absolute;
	left: 8px;
	right: 8px;
	bottom: 14px;
	height: 1px;
	background: rgba(255,255,255,0.4);
	transition: background-color 0.25s ease;
}
.bm-cta-final__buttons > .elementor-container > .elementor-column:last-child .elementor-button:hover {
	color: #FFFFFF !important;
	background: transparent !important;
}
.bm-cta-final__buttons > .elementor-container > .elementor-column:last-child .elementor-button:hover::after {
	transform: translateX(6px);
}
.bm-cta-final__buttons > .elementor-container > .elementor-column:last-child .elementor-button:hover::before {
	background: var(--bm-color-accent);
}

/* ════════════════════════════════════════════════════════════════
 * RESPONSIVE
 * ════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
	.bm-section-hero.elementor-section { padding-left: 24px !important; padding-right: 24px !important; padding-top: 128px !important; }
	.bm-section-hero > .elementor-container {
		flex-direction: column !important;
		flex-wrap: wrap !important;  /* override del nowrap fix del desktop */
		gap: 16px !important;
	}
	/* Override del repartiment calc(100% - 380px - 60px) que en mobile dóna negatiu i
	 * col·lapsa la columna del contingut. Aquí tornem a flex-basis: auto + max-width: none
	 * perquè cada columna ocupi tot l'ample disponible. */
	.bm-section-hero > .elementor-container > .bm-hero__content.elementor-column,
	.bm-section-hero > .elementor-container > .bm-hero__aside.elementor-column {
		flex: 1 1 auto !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	.bm-hero__aside { justify-content: center !important; align-self: auto !important; }
	.bm-hero-card.elementor-section { max-width: 400px; margin-top: 16px; margin-left: auto !important; margin-right: auto !important; }
	/* Padding lateral uniforme per a TOTES les seccions de la home en mobile.
	 * Stats i camps tenien 56px inline del seed → els forcem a 24px aquí
	 * perquè el contingut respiri (abans semblava una columna vertical
	 * encaixonada). El container intern de stats no necessita padding extra. */
	.bm-section-stats.elementor-section,
	.bm-section-camps.elementor-section,
	.bm-section-about.elementor-section,
	.bm-section-events.elementor-section,
	.bm-section-cta-final.elementor-section {
		padding-left: 24px !important; padding-right: 24px !important;
	}
	.bm-section-about.elementor-section,
	.bm-section-events.elementor-section,
	.bm-section-cta-final.elementor-section {
		padding-top: 96px !important; padding-bottom: 96px !important;
	}
	.bm-section-stats > .elementor-container { padding: 0 !important; flex-wrap: wrap; }
	.bm-section-stats .bm-stat { width: 50% !important; flex: 0 0 50% !important; padding: 32px 20px !important; }
	.bm-section-stats .bm-stat:nth-child(2) { border-right: 0; }
	.bm-section-stats .bm-stat:nth-child(-n+2) { border-bottom: 1px solid var(--bm-color-border); }
	.bm-section-about > .elementor-container { flex-direction: column !important; gap: 56px; }
	/* Elementor manté flex-basis: calc(55% - 40px) i width inline a les columnes
	 * encara que el container sigui flex-direction: column. Forcem amb el màxim
	 * de especificitat (selector amb tres classes) i tots els eixos del flex. */
	.bm-section-about > .elementor-container > .elementor-column.bm-about__text,
	.bm-section-about > .elementor-container > .elementor-column.bm-about__media {
		width: 100% !important;
		max-width: 100% !important;
		flex: 1 1 100% !important;
	}
	.bm-about-tag.elementor-section { right: 24px; bottom: 24px; }
	.bm-about__checklist .bm-checklist { grid-template-columns: 1fr; }
	.bm-events-grid { grid-template-columns: 1fr; }
	.bm-gallery__grid .gallery { grid-template-columns: repeat(6, 1fr) !important; grid-auto-rows: 140px !important; }
	.bm-gallery__grid .gallery-item:nth-child(n) { grid-column: span 6; grid-row: span 2; }
}
@media (max-width: 640px) {
	.bm-section-hero.elementor-section { padding-top: 112px !important; padding-bottom: 56px !important; min-height: 88vh !important; }
	.bm-section-stats .bm-stat { width: 100% !important; flex: 0 0 100% !important; border-right: 0 !important; border-bottom: 1px solid var(--bm-color-border) !important; }
	.bm-section-stats .bm-stat:last-child { border-bottom: 0 !important; }
}