/*  GENERAL  */

.bg-1  {background: linear-gradient(to bottom, rgba(248, 248, 250, 1) 0%, rgba(255, 255, 255, 1) 100%);}


/* SOBRE OTECH */

.about {
	gap:100px;
}
.about .col {width:100%}

h2 {
	font-size: 45px;
	font-weight: 300;
	letter-spacing: -2.2px;
	line-height: 1.2em;;
}

.about h2 strong {
	display: block;
	font-weight: 800;
}
.about .text p {
	margin-bottom:50px;
}

.about .text a {
	margin-bottom: 20px;
}

.about .img {
	position:relative;
	margin-top:80px;
	gap:30px;
}

.about .img-1, .about .img-2 {
	height:auto;
	object-fit: cover;
	border-radius:20px;
}

.about .img-1 {
	width: 270px;
}

.about .img-2 {
	width: 279px;
}




.about .links {
	gap:10px
}



/* SERVICIOS */

.services {
	position:relative; z-index: 1;
	background: #161C1F;
	padding:50px 20px 150px 20px;
	margin-top:250px;
	color: white;
}

.services .shape {
	position:absolute;
	z-index: 0;
	width:100%
}

.services .shape svg {
	fill: white;
	width:100%;	height:45px;
}

.services .shape.top {
	top:0;
	transform:scaleX(-1);
}

.services .shape.bottom {
	bottom:-2px;
	transform:scaleY(-1);
}

.services .iso {
	position:absolute;
	z-index: 0;
	font-size: 250px;
	transform:rotate(7deg);
	color:#FFFFFF08;
}

.services .ico-1 {
	top:260px; right:52px;
}

.services .ico-2 {
	bottom:217px; left:-20px;
}

.video {
	position:relative;
	z-index: 1;
	cursor: pointer;
	margin-top:-300px;
}

.video img {
	border-radius: 20px;
	box-shadow: 0 20px 34px -15px rgba(0,0,0,.5);
}

.video .ico {
	position:absolute;
	top:50%; left:50%;
	transform:translate(-50%,-50%);
	font-size: 60px;
	opacity: .8;
}

.services .title {
	position: relative;
	width:100%; height: 214px;
	font-size: 84px;
	line-height: 1.2em;
	color:white;
	margin-top:-65px
}

.l1, .l2 {
	position: absolute; z-index: 9;
	left:50%;
}

.l1 {
	transform: translateX(-70%);
	font-weight: 700;
}

.l2 {
	transform:translate(-30px, 80px);
	font-weight: 300;
}

p.big {
	display: block;
	width:50%;
	font-size: 33px;
	font-weight: 400;
	line-height: 1.7em;
}

.services .grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(2, 1fr);
	grid-gap: 40px;
}

.services .card .img {
	display: flex;
	flex-direction:column;
	justify-content: flex-end;
	height:280px;
	padding:20px;
}

.services .card {
	position:relative;
	text-align: left;
}

.services .card img {
	position:absolute;
	top:0; left:0;
	width:100%;
	height:280px;
	object-fit: cover;
	border-radius:10px;
	opacity:0.27;
	transition: var(--trs);
}

.services .card h3 {
	font-size: 19px;
	font-weight: 400;
	line-height: 1.4em;
}

.services .card .content {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4em;
	padding:20px;
}

.services .card:hover img {
	opacity: 1;
}







/* NOTICIAS */
.news {
	position:relative;
}

.news .grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(3, 1fr);
	grid-gap: 60px;
}

.news .card {
	padding-bottom:20px;
	border-bottom:1px solid #0f0f0f;
}

.news .card:last-child {
	border:none;
}

.news .card a:not(.link) {
	display: flex;
	justify-content: space-between;
	gap:20px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4em;
}

.news .card a:not(.link):after {
	content:'\f0da';
	font-family: "Font Awesome 7 Free";
	font-size: 12px;
	font-weight: 900;
}

.news .card p {
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4em;
	color: #838383;
	padding-top:10px;
}



/*  RESPONSIVE  */

@media only screen and (max-width: 1024px) {
	.video {width:90%;}
	p.big {width:80%}
}

@media only screen and (max-width: 768px) {
	.about.flex {flex-direction: column; text-align:center}
	.about .img {justify-content: center;}
	.about .links {align-items:center;}

	.video {margin-top:-200px;}
	.services .title {font-size: 68px;line-height: 1.2em;margin-top:-50px}
	.l2 {margin-top:-15px;}
	p.big {font-size: 30px; line-height: 1.6em;}

	.services .grid {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(3, 1fr);
	}
}

@media only screen and (max-width: 600px) {
	p.big {font-size: 24px; width:90%;}
	.services .grid {
		grid-template-columns: repeat(1, 1fr);
		grid-template-rows: repeat(6, 1fr);
	}

	.news .grid {
		grid-template-columns: repeat(1, 1fr);
		grid-template-rows: repeat(6, 1fr);
		grid-gap: 60px;
	}
}

@media only screen and (max-width:500px) {
	.video {margin-top:-100px;}
	.services .title {font-size: 50px;line-height: 1.2em;margin-top:-45px}
	.l2 {margin-top:-25px;}
}

@media only screen and (max-width: 320px) {
	p.big {font-size: 20px;}
	.services .grid {gap:20px}
}