.integracion {
	overflow: hidden;
    display: inline-flex;
    flex-wrap: wrap;
}

.integracion .integracion_page {
    max-height: 0vw;
    overflow-y: hidden;
    overflow-x: hidden;
    width: 90vw;
    padding: 5vw;
	padding-bottom: 0vw;
    display: inline-block;
	position: relative;
}

.integracion .integracion_page.active {
    max-height: 1000000vh;
    min-height: calc(100vh - 10vw);
	padding-bottom: 5vw;
}

.integracion .bg {
	width: 100vw;
	margin-left: -5vw;
	margin-top: -5vw;
	height: 40vh;
	position: absolute;
}

.integracion .bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.15;
}

.integracion .maintitle {
	position: relative;
}

.integracion .bg .deg {
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0vw;
	background: linear-gradient(0deg, var(--bg-color) 0%, rgba(0,0,0,0) 50%, var(--bg-color) 100%);
}

.integracion .programacion .punto {
	padding: 4vw;
	background: var(--bgs-color);
	position: relative;
	border-radius: 3vw;
	margin-bottom: 4vw;
}

.integracion .programacion .punto .img {
	width: 10vw;
	height: 10vw;
	background: var(--bgt-color);
	display: inline-grid;
	place-items: center;
	border-radius: 3vw;
	position: absolute;
}

.integracion .programacion .punto .img img {
	width: 5vw;
	position: absolute;
	filter: invert(100%);
}

.integracion .programacion .punto .text {
	display: inline-grid;
	place-items: center;
	height: 10vw;
	padding-left: 13vw;
	vertical-align: top;
}

.integracion .programacion .punto .text b {
	padding: 1.5vw;
	padding-left: 2.5vw;
	padding-right: 2.5vw;
	background: var(--main-color);
	border-radius: 10vw;
	font-size: var(--fs);
	position: absolute;
	right: 4vw;
}

.integracion .balotas {
	position: relative;
}

.integracion .balotas div {
	width: 20vw;
	height: 12vw;
	display: inline-grid;
	background: var(--bgs-color);
	place-items: center;
	margin-left: 2vw;
	border-radius: 3vw;
}

.integracion .balotas div:first-of-type {
	margin-left: 0vw;
	background: var(--main-color);
	font-weight: bold;
	color: white;
}

.integracion .balotas span {
	text-align: center;
	margin-top: 6vw;
	display: block;
}

.integracion .tablero {
	background: var(--bgs-color);
	padding: 3vw;
	position: relative;
	padding-top: 0vw;
	margin-top: 6vw;
	border-radius: 3vw;
}

.integracion .tablero table {
	overflow: hidden;
	border-radius: 3vw;
}

.integracion .tablero table th {
	height: 14vw;
}

.integracion .tablero table td {
	width: 16vw;
	height: 10vw;
	text-align: center;
	background: var(--bgt-color);
	opacity: 0.25;
}

.integracion .tablero table td.check {
	background: var(--main-color);
	color: white;
	font-weight: bold;
	opacity: 1;
}

.integracion .carton {
	width: 84vw;
	overflow: hidden;
	position: relative;
	background: var(--bgs-color);
	border-radius: 3vw;
	padding: 3vw;
}

.integracion .carton .lights {
	width: 100%;
	left: 0vw;
	top: -6vw;
	position: absolute;
}

.integracion .carton table {
	margin-top: 15vw;
}

.integracion .carton table th {
	height: 14vw;
}

.integracion .carton table td {
	width: 17vw;
	height: 17vw;
	background: var(--bgt-color);
	text-align: center;
	transition: 0.2s;
}

.integracion .carton table td.check {
	background: var(--main-color);
	color: white;
	font-weight: bold;
}

.integracion .clear {
	margin-top: 4vw;
}

.integracion .clear button {
	width: 100%;
}