/*
 Theme Name:   Branng Theme Bricks BUilder
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Branng
 Author URI:   https://branng.com
 Template:     bricks
 Version:      1.6
 Text Domain:  bricks
*/

/* ─── Lenis smooth scroll ─────────────────────────────────────────────────── */
html.lenis,
html.lenis body {
	height: auto;
}

.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
	overscroll-behavior: contain;
}

.lenis.lenis-stopped {
	overflow: hidden;
}

.lenis.lenis-scrolling iframe {
	pointer-events: none;
}

/* ─── Utilidades ──────────────────────────────────────────────────────────── */
.bricks-button {
	cursor: pointer;
}

/* ─── Cursor personalizado: hover sobre enlaces en .m-itemSpecialProjects ─── */
.m-specialProjectsCursor {
	position: fixed;
	top: 0;
	left: 0;
	width: 80px;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 200px;
	background-color: var(--color-amarillo-base, #fff76b);
	pointer-events: none;
	z-index: 9999;
	opacity: 0;
	transform: scale(0.6);
	will-change: transform, opacity;
}

.m-specialProjectsCursor__label {
	font-size: var(--fs-xs, 13px);
	line-height: var(--lh-xs, 20px);
	color: var(--color-choco-base, #1c180d);
	text-transform: uppercase;
	text-align: center;
	white-space: nowrap;
}

/* ─── Sliders Splide arrastrables: cursor de mano al hacer drag & drop ────── */
.splide--draggable {
	cursor: grab;
}

.splide--draggable:active {
	cursor: grabbing;
}

/* ─── CPT Proyectos: ancho del contenedor de contenido Gutenberg ──────────── */
body.single-cpt_projects .brxe-post-content {
	max-width: 1600px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

/* ─── Elemento Bricks "Antes / Después": comparador de imágenes ───────────── */
/* Solo estructura aquí: color/tamaño se controlan desde el panel de estilos
   de Bricks (bricks/elements/before-after.php) y no deben duplicarse aquí,
   para no competir en cascada con el CSS que Bricks genera por instancia. */
.m-beforeAfter {
	--maf-start: 50%;
	display: block;
	width: 100%;
}

.m-beforeAfter__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	user-select: none;
}

.m-beforeAfter__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

.m-beforeAfter__img--before {
	clip-path: inset(0 calc(100% - var(--maf-start)) 0 0);
}

.m-beforeAfter__label {
	position: absolute;
	top: 16px;
	padding: 6px 14px;
	border-radius: 0;
	font-size: var(--fs-xs, 13px);
	line-height: var(--lh-xs, 20px);
	white-space: nowrap;
	pointer-events: none;
	z-index: 2;
}

.m-beforeAfter__label--before {
	left: 16px;
}

.m-beforeAfter__label--after {
	right: 16px;
}

.m-beforeAfter__divider {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--maf-start);
	transform: translateX(-50%);
	z-index: 3;
	pointer-events: none;
}

.m-beforeAfter__handle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	border-radius: 50%;
	cursor: ew-resize;
	touch-action: none;
	pointer-events: auto;
}

.m-beforeAfter__handle:focus-visible {
	outline: 2px solid var(--color-amarillo-base, #fff76b);
	outline-offset: 2px;
}

.m-beforeAfter__chevron {
	width: 8px;
	height: 14px;
	flex: none;
}

.m-beforeAfter__frame--dragging,
.m-beforeAfter__frame--dragging .m-beforeAfter__handle {
	cursor: ew-resize;
}