/**
 * partículas + peças flutuantes (ícones da seção Serviços)
 */
body {
	overflow-x: hidden;
}

/* Peças flutuantes: atrás do conteúdo, acompanham o scroll, movimento estilo Tetris */
.tetris-floating {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	z-index: 1;
	overflow: hidden;
	opacity: 0;
	transition: opacity 0.5s ease-out;
}
.tetris-floating.ativo {
	opacity: 1;
}

@media (max-width: 767px) {
	.tetris-floating {
		display: none !important;
	}
}
.tetris-peca-pos {
	position: absolute;
	will-change: transform;
	z-index: 2;
	overflow: visible;
}
.tetris-peca {
	position: absolute;
	top: 0;
	left: 0;
	width: 9.8vw;
	min-width: 78px;
	max-width: 135px;
	height: 9.8vw;
	min-height: 78px;
	max-height: 135px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	opacity: 0.28;
	will-change: transform;
}
.tetris-peca.peca-roxa {
	background-image: url(../images/peca-roxa.svg);
}
.tetris-peca.peca-verde {
	background-image: url(../images/peca-verde.svg);
}
.tetris-peca.peca-magenta {
	background-image: url(../images/peca-magenta.svg);
}
.tetris-peca.peca-laranja {
	background-image: url(../images/peca-laranja.svg);
}
.tetris-peca.peca-amarela {
	background-image: url(../images/peca-amarela.svg);
}

/* Rastro das peças (descida e rotação) – simula o movimento, fade out */
.tetris-rastro {
	position: absolute;
	pointer-events: none;
	z-index: 1;
	opacity: 0.22;
	transition: opacity 0.5s ease-out;
	will-change: opacity;
}
.tetris-rastro.fadeout {
	opacity: 0;
}
.tetris-rastro.peca-roxa { background-image: url(../images/peca-roxa.svg); }
.tetris-rastro.peca-verde { background-image: url(../images/peca-verde.svg); }
.tetris-rastro.peca-magenta { background-image: url(../images/peca-magenta.svg); }
.tetris-rastro.peca-laranja { background-image: url(../images/peca-laranja.svg); }
.tetris-rastro.peca-amarela { background-image: url(../images/peca-amarela.svg); }

/* Container das peças posicionado em relação à página (legado) */
.site {
	position: relative;
}

.boson-container {
	position: absolute;
	left: 50%; /* mesmo do case-box  */
	transform: translateX(-50%); /* mesmo do case-box  */
	width: 88%; /* mesmo do case-box  */
	top: var(--tetris-margin-top, 80px);
	z-index: 50; /* acima do hero (0–2) e seções (2–10) para as peças aparecerem */
	opacity: 0.3;
	transition: opacity 0.6s ease-out;
	pointer-events: none;
}
.boson {
	width: var(--bloco-lado);
	padding-top: var(--bloco-lado);
	position: absolute;
	top: 0;
	z-index: 1;
	opacity: 1;
	transition: 0.8s opacity cubic-bezier(.04,.81,.62,.93);
}
.boson.oculta {
	visibility: hidden;
	opacity: 0;
}
.boson.encaixada {
	visibility: hidden;
}
.case-box .boson {
	z-index: 1;
}
.boson .inner {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}
.boson .inner:before,
.boson .inner:after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}
.boson .inner:before {
	width: 100%;
}
.boson .inner:after {
	height: 100%;
}
.boson.up-1 .inner:before,
.boson.down-1 .inner:before {
	height: 100%;
}
.boson.up-2 .inner:before,
.boson.down-2 .inner:before {
	height: 200%;
}
.boson.up-3 .inner:before,
.boson.down-3 .inner:before,
.boson.middle-3 .inner:before {
	height: 300%;
}

.boson.left-1 .inner:after,
.boson.right-1 .inner:after {
	width: 100%;
}
.boson.left-2 .inner:after,
.boson.right-2 .inner:after {
	width: 200%;
}
.boson.left-3 .inner:after,
.boson.right-3 .inner:after,
.boson.center-3 .inner:after {
	width: 300%;
}
.boson.left-4 .inner:after,
.boson.right-4 .inner:after,
.boson.center-4 .inner:after {
	width: 400%;
}
.boson.left-4 .inner:after {
	left: auto;
	right: 0;
}

.maisz {
	z-index: 999;
}

/**
 * construção
 */
.up-1 .inner:before,
.up-2 .inner:before,
.up-3 .inner:before {
	bottom: 0;
	top: auto;
}
.down-1 .inner:before,
.down-2 .inner:before,
.down-3 .inner:before {
	top: 0;
	bottom: auto;
}
.left-1 .inner:after,
.left-2 .inner:after,
.left-3 .inner:after {
	right: 0;
	left: auto;
}
.right-1 .inner:after,
.right-2 .inner:after,
.right-3 .inner:after {
	left: 0;
	right: auto;
}
.middle-3 .inner:before {
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}
.center-3 .inner:after {
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}

/**
 * posição
 */

.top-0 { transform: translateY(0); }
.top-1 { transform: translateY(150%); }
.top-2 { transform: translateY(300%); }
.top-3 { transform: translateY(450%); }
.top-4 { transform: translateY(600%); }
.top-5 { transform: translateY(750%); }
.top-6 { transform: translateY(900%); }
.top-7 { transform: translateY(1050%); }
.top-8 { transform: translateY(1200%); }
.top-9 { transform: translateY(1350%); }
.top-10 { transform: translateY(1500%); }
.top-11 { transform: translateY(1650%); }
.top-12 { transform: translateY(1800%); }
.top-13 { transform: translateY(1950%); }
.top-14 { transform: translateY(2100%); }
.top-15 { transform: translateY(2250%); }

.top-menos-0 { transform: translateY(0); }
.top-menos-1 { transform: translateY(-150%); }
.top-menos-2 { transform: translateY(-300%); }
.top-menos-3 { transform: translateY(-450%); }
.top-menos-4 { transform: translateY(-600%); }
.top-menos-5 { transform: translateY(-750%); }
.top-menos-6 { transform: translateY(-900%); }
.top-menos-7 { transform: translateY(-1050%); }
.top-menos-8 { transform: translateY(-1200%); }
.top-menos-9 { transform: translateY(-1350%); }
.top-menos-10 { transform: translateY(-1500%); }
.top-menos-11 { transform: translateY(-1650%); }
.top-menos-12 { transform: translateY(-1800%); }
.top-menos-13 { transform: translateY(-1950%); }
.top-menos-14 { transform: translateY(-2100%); }
.top-menos-15 { transform: translateY(-2250%); }

.forcar-top-0 { transform: translateY(0); }

.push-1  { left: var(--bloco-lado); }
.push-2  { left: calc( var(--bloco-lado) * 2 ); }
.push-3  { left: calc( var(--bloco-lado) * 3 ); }
.push-4  { left: calc( var(--bloco-lado) * 4 ); }
.push-5  { left: calc( var(--bloco-lado) * 5 ); }
.push-6  { left: calc( var(--bloco-lado) * 6 ); }
.push-7  { left: calc( var(--bloco-lado) * 7 ); }
.push-8  { left: calc( var(--bloco-lado) * 8 ); }
.push-9  { left: calc( var(--bloco-lado) * 9 ); }
.push-10 { left: calc( var(--bloco-lado) * 10 ); }
.push-11 { left: calc( var(--bloco-lado) * 11 ); }
.push-12 { left: calc( var(--bloco-lado) * 12 ); }

.ang-0 { transform: rotate(0deg); }
.ang-90 { transform: rotate(90deg); }
.ang-180 { transform: rotate(180deg); }
.ang-270 { transform: rotate(270deg); }

.ang-after-0 .inner:after { transform: rotate(0deg) translate(25%, -50%); }
.ang-after-90 .inner:after { transform: rotate(90deg) translate(25%, -50%); }
.ang-after-180 .inner:after { transform: rotate(180deg) translate(25%, -50%); }
.ang-after-270 .inner:after { transform: rotate(270deg) translate(25%, -50%); }
.ang-after-0.left-2 .inner:after { transform: rotate(0deg) translate(25%, 50%); }
.ang-after-90.left-2 .inner:after { transform: rotate(90deg) translate(25%, 50%); }
.ang-after-180.left-2 .inner:after { transform: rotate(180deg) translate(25%, 50%); }
.ang-after-270.left-2 .inner:after { transform: rotate(270deg) translate(25%, 50%); }
.pull-before .inner:before { transform: translateX(-100%); }

.ang-0.top-5 { transform: rotate(0deg) translateX(500%); }
.ang-90.top-5 { transform: rotate(90deg) translateX(500%); }
.ang-180.top-5 { transform: rotate(180deg) translateX(500%); }
.ang-270.top-5 { transform: rotate(270deg) translateX(500%); }


/**
 * cores
 */
.magenta,
.magenta .inner:before,
.magenta .inner:after {
	background: var(--magenta);
}
.verde,
.verde .inner:before,
.verde .inner:after {
	background: var(--verde);
}
.roxo,
.roxo .inner:before,
.roxo .inner:after {
	background: var(--roxo);
}
.amarelo,
.amarelo .inner:before,
.amarelo .inner:after {
	background: var(--amarelo);
}
.laranja,
.laranja .inner:before,
.laranja .inner:after {
	background: var(--laranja);
}
.preto,
.preto .inner:before,
.preto .inner:after {
	background: var(--preto);
}

/**
 * comportamento
 */
.fadeout {
	opacity: 0;
}

/**
 * Tetris Slots - containers de encaixe para peças
 */
[data-tetris-slot] {
	width: var(--bloco-lado);
	height: var(--bloco-lado);
	position: relative;
	opacity: 0;
	pointer-events: none;
	z-index: 1;
	margin: 0 auto;
}

[data-tetris-slot] .boson {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

[data-tetris-slot] .slot-inner {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-tetris-slot] .slot-inner:before,
[data-tetris-slot] .slot-inner:after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}

[data-tetris-slot] .slot-inner:before {
	width: 100%;
}

[data-tetris-slot] .slot-inner:after {
	height: 100%;
}

/* Aplicar as mesmas classes de forma às peças dos slots */
[data-tetris-slot] .up-1 .slot-inner:before,
[data-tetris-slot] .down-1 .slot-inner:before {
	height: 100%;
}
[data-tetris-slot] .up-2 .slot-inner:before,
[data-tetris-slot] .down-2 .slot-inner:before {
	height: 200%;
}
[data-tetris-slot] .up-3 .slot-inner:before,
[data-tetris-slot] .down-3 .slot-inner:before,
[data-tetris-slot] .middle-3 .slot-inner:before {
	height: 300%;
}

[data-tetris-slot] .left-1 .slot-inner:after,
[data-tetris-slot] .right-1 .slot-inner:after {
	width: 100%;
}
[data-tetris-slot] .left-2 .slot-inner:after,
[data-tetris-slot] .right-2 .slot-inner:after {
	width: 200%;
}
[data-tetris-slot] .left-3 .slot-inner:after,
[data-tetris-slot] .right-3 .slot-inner:after,
[data-tetris-slot] .center-3 .slot-inner:after {
	width: 300%;
}
[data-tetris-slot] .left-4 .slot-inner:after,
[data-tetris-slot] .right-4 .slot-inner:after,
[data-tetris-slot] .center-4 .slot-inner:after {
	width: 400%;
}
[data-tetris-slot] .left-4 .slot-inner:after {
	left: auto;
	right: 0;
}

[data-tetris-slot] .up-1 .slot-inner:before,
[data-tetris-slot] .up-2 .slot-inner:before,
[data-tetris-slot] .up-3 .slot-inner:before {
	bottom: 0;
	top: auto;
}
[data-tetris-slot] .down-1 .slot-inner:before,
[data-tetris-slot] .down-2 .slot-inner:before,
[data-tetris-slot] .down-3 .slot-inner:before {
	top: 0;
	bottom: auto;
}
[data-tetris-slot] .left-1 .slot-inner:after,
[data-tetris-slot] .left-2 .slot-inner:after,
[data-tetris-slot] .left-3 .slot-inner:after {
	right: 0;
	left: auto;
}
[data-tetris-slot] .right-1 .slot-inner:after,
[data-tetris-slot] .right-2 .slot-inner:after,
[data-tetris-slot] .right-3 .slot-inner:after {
	left: 0;
	right: auto;
}
[data-tetris-slot] .middle-3 .slot-inner:before {
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}
[data-tetris-slot] .center-3 .slot-inner:after {
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}

/* Aplicar cores aos slots */
[data-tetris-slot] .magenta .slot-inner:before,
[data-tetris-slot] .magenta .slot-inner:after {
	background: var(--magenta);
}
[data-tetris-slot] .verde .slot-inner:before,
[data-tetris-slot] .verde .slot-inner:after {
	background: var(--verde);
}
[data-tetris-slot] .roxo .slot-inner:before,
[data-tetris-slot] .roxo .slot-inner:after {
	background: var(--roxo);
}
[data-tetris-slot] .amarelo .slot-inner:before,
[data-tetris-slot] .amarelo .slot-inner:after {
	background: var(--amarelo);
}
[data-tetris-slot] .laranja .slot-inner:before,
[data-tetris-slot] .laranja .slot-inner:after {
	background: var(--laranja);
}
[data-tetris-slot] .preto .slot-inner:before,
[data-tetris-slot] .preto .slot-inner:after {
	background: var(--preto);
}

/* Rotação dos slots */
[data-tetris-slot] .ang-0 .slot-inner { transform: rotate(0deg); }
[data-tetris-slot] .ang-90 .slot-inner { transform: rotate(90deg); }
[data-tetris-slot] .ang-180 .slot-inner { transform: rotate(180deg); }
[data-tetris-slot] .ang-270 .slot-inner { transform: rotate(270deg); }

/* Estado encaixado */
[data-tetris-slot].encaixada {
	opacity: 1;
}

/* Seções com slots de tetris */
[data-tetris-section] {
	position: relative;
}

/**
 * Tetris Target - pequeno quadrado antes dos títulos de seção (DEPRECATED - manter para compatibilidade)
 */
.tetris-target {
	width: var(--bloco-lado);
	height: var(--bloco-lado);
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	margin-top: -50px;
	opacity: 0;
	pointer-events: none;
	z-index: 1;
}

.tetris-target .boson {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

/* Targets específicos */
#clientes {
	position: relative;
}

#servicos {
	position: relative;
}

#case-secao-0 {
	position: relative;
}


@media (min-width: 481px) and (max-width: 690px) {
	.omitir-481-690 {
		display: none;
	}
}

@media (max-width: 768px) {
	.boson-container {
		display: none !important;
		visibility: hidden !important;
		opacity: 0 !important;
	}
	.boson {
		display: none !important;
	}
}

@media (max-width: 480px) {
	.boson-container {
		display: none !important;
		visibility: hidden !important;
	}
	.omitir-0-480:not(.forcar-top-0) {
		display: none;
	}
}