/*
	Autor: 
		PUM! estudio

	Index:
		0 -- Variables
		1 -- Main
		2 -- Layers
		3 -- Boxes
			-- Slider
*/

@charset "UTF-8";




/* 0 -- Variables */

:root {
	--box-p-t-l: var(--unit-40);
	--box-p-b-l: var(--unit-40);
	--box-p-t: var(--unit-30);
	--box-p-b: var(--unit-30);
	--box-p-t-s: var(--unit-20);
	--box-p-b-s: var(--unit-20);

	@media ( max-width: 720px ) { 
		--box-p-t-l: var(--unit-30);
		--box-p-b-l: var(--unit-30);
		--box-p-t: var(--unit-20);
		--box-p-b: var(--unit-20);
		--box-p-t-s: var(--unit-10);
		--box-p-b-s: var(--unit-10);
	} 
}




/* 1 -- Main */

.main img,
.main video { display: block; width: 100%;}




/* 2 -- Layers */

.layers { position: relative; color: var(--c-white);}
.layers-fg { position: relative; z-index: 2;}
.layers-bg { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; overflow: hidden;}
.layers-bg img,
.layers-bg video { width: 100%; height: 100%; object-fit: cover;}
.layers-bg::after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--c-black); opacity: .4; }




/* 3 -- Boxes */

.box { padding-top: var(--box-p-t); padding-bottom: var(--box-p-b);}
.box.box-l { padding-top: var(--box-p-t-l); padding-bottom: var(--box-p-b-l);}
.box.box-s { padding-top: var(--box-p-t-s); padding-bottom: var(--box-p-b-s);}

.box-of-h { overflow: hidden;}

/* -- Particles */

.box-particles { position: relative; overflow: scroll; width: 100%; height: 100dvh;}
.box-particles-in { position: absolute; top: 0; left: 0; z-index: 3; width: 100%; height: auto; min-height: 100%; padding: var(--unit-10); pointer-events: none;}
.box-particles-in a,
.box-particles-in button { pointer-events: all; text-decoration: none;}
.box-particles .txt-h2 { max-width: 80rem;}

.unit-particle { width: 100%; height: 100%; }
.unit-particles-h { min-height: 26rem; max-height: 80rem; position: relative; display: flex; align-items: center; justify-content: center;}

.unit-particles-h svg { position: absolute; width: auto; max-height: 100%; max-width: 100%;}

.popup-active .box-particles-in button[data-popup] { color: var(--c-crema);}

@container style(--size-m: true) {
	.box-particles { overflow: scroll;}
	.box-particles-in { padding: var(--unit-10) var(--unit-8) var(--unit-5);}
}


/* The end -- :P */