@import url('https://fonts.googleapis.com/css2?family=Krub:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&family=Outfit:wght@100..900&display=swap');

:root {
	--page-w: 80rem;

	--fon-t: "Outfit", serif;
	--fon-h: "Krub", serif;

	--sca-t: 1rem;
	--sca-h: 1rem;
	--sca-lh: 1.1em;
	--sca-mar: 1rem;
	--sca-pad: 2.5rem;

	--ratio: .5;

	--fon-w1: 400;
	--fon-w5: 400;
	--fon-w7: 400;
	--fon-w9: 400;

	--col-dar: #0a1f0e;
	--col-dar-op25: #0a1f0e44;
	--col-bg: #f4f3ee;
	--col-lig: #e8e6dd;
	--col-sep: #e8e6dd;
	--col-pri: #0c644c;
	--col-pri-op75: #0c644cBF;
	--col-pri-bg: #1c3d36;
	--col-acc: #50c878;
	--col-acc-bg: #0c644c;

	--col-red: #F03D3E;
	--col-gre: #007B40;

	--col-grad-v: linear-gradient(180deg, var(--col-dar) 0%, var(--col-pri) 100%);

	--rad-s: .375rem;
	--rad-m: .5rem;
	--rad-l: .75rem;
	--rad-bt: .375rem;

	--sha-s: none;
	--sha-m: none;
	--sha-l: none;
	--sha-i: inset 0 .125rem .25rem 0 var(--col-dar-op25);

	--ani-f: all 500ms cubic-bezier(.7,0,.3,1);
}

.header {
	color: var(--col-bg);
	position: fixed;
	background: #1c3d36ee;
}
.header .bt.bt-g {
	background: transparent;
}

.section.featured {
	margin-top: 0;
	height: 100vh;
}
.featured .content {
	padding-bottom: 0;
	text-align: left;
	margin-left: 0;
	max-width: 40rem;
}
.featured .content h1 span {
	color: var(--col-acc);
}
.featured .content .bt {
	background: var(--col-acc);
	color: var(--col-dar);
}
.featured .content .bt.bt-g {
	background: transparent;
	color: var(--col-acc);
	margin-left: .5rem;
}

.main h6,
.main .bg h6 {
	text-transform: uppercase;
	font-weight: 600;
	color: var(--col-acc);
	letter-spacing: .2em;
	margin-bottom: 2.5rem;
}
.main p {
	color: #6f7a70;
}
.main .bg p {
	color: #ffffff88;
}
.main h2 {
	font-weight: 900;
}
.main h2 + p {
	font-weight: 300;
}

.page > h6,
.page > h2, 
.page > p  {
	text-align: left;
	max-width: 40rem;
	margin-left: 0;
	text-wrap: balance;
}
#variables .card {
	background: #fff;
}
#variables .card .icon {
	display: block;
	height: 4rem;
}
#variables .card h3 {
	font-weight: 500;
}
#variables .card p {
	text-wrap: balance;
}
@media (min-width: 960px) {
	#variables .card p {
		min-height: 5.5em;
	}
}

#como-trabajamos .card {
	border-color: transparent;
	background: var(--col-acc-bg);
	margin-top: 1rem;
}
#como-trabajamos .card img {
	display: block;
	height: 4rem;
}
#como-trabajamos .card .icon {
	display: block;
	height: 6rem;
	margin-top: -5.5rem;
}
#como-trabajamos .card h3 {
	font-weight: 500;
}
#como-trabajamos .card p {
	text-wrap: balance;
}
@media (min-width: 960px) {
	#como-trabajamos .card p {
		min-height: 5.5em;
	}
}

#capacidades ul {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
	margin-top: 2.5rem;
}
#capacidades ul li.card {
	padding: 1.5rem 1.625rem 1.5rem 2rem;
	margin: 0;
	background: #fff;
}
#capacidades ul li.card:before {
	content:'';
	position: absolute;
	left: 1.125rem;
	height: 50%;
	top: 50%;
	transform: translateY(-50%);
	width: 2px;
	background: var(--col-acc);
}


#experiencia {
	background: radial-gradient(ellipse 80% 60% at 10% 20%,var(--col-pri-bg) 0%,#0a1f0e 60%);
}
#experiencia h5 {
	font-size: 1rem;
	width: fit-content;
	padding: .75rem 1rem;
	background: #0c644c44;
	border: solid 1px var(--col-acc);
	border-radius: var(--rad-m);
	text-wrap: uppercase;
	font-weight: 500;
	color: var(--col-acc);
	margin-bottom: 1.5rem;
}
#experiencia h3 {
	font-weight: bold;
	color: var(--col-acc);
}
#experiencia h3 + p {
	font-size: 1.125rem;
	font-weight: 300;
}
#experiencia ul {
	margin-top: 2rem;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}
#experiencia ul li:before {
	content: '';
	display: inline-block;
	vertical-align: middle;
	border-top: solid 1px var(--col-acc);
	width: 1.5em;
	margin-right: .5em;
}

#proceso h2 {
	text-align: center;
	margin-left: auto;
}
#proceso ol {
	display: flex;
	margin-top: 2.5rem;
	gap: 1.5rem;
	position: relative;
}
#proceso ol:before {
	content: '';
	position: absolute;
	left: 6rem;
	right: 6rem;
	top: 3rem;
	border-top: solid 1px var(--col-acc);
} 
#proceso ol li {
	flex: 1;
	text-align: center;
	position: relative;
	z-index: 1;
}
#proceso ol li h3 {
	font-size: 1.25rem;
	font-weight: 600;
	margin-bottom: .25rem;
}
#proceso ol li h3 span {
	display: block;
	font-size: 1.5rem;
	width: 6rem;
	line-height: 6rem;
	border-radius: 6rem;
	background: #fff;
	border: solid 1px var(--col-acc);
	color: var(--col-acc);
	margin: 0 auto 1rem;
}

#escalas {
	background-repeat: no-repeat;
	background-position:-20% 150%;
	background-size: 60% auto;
	background-image: url("data:image/svg+xml,%3Csvg width='67' height='70' viewBox='0 0 67 70' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21.0099 19.2081C18.7484 18.6812 5.48576 13.394 4.2707 13.394C2.95414 13.394 2.07195 13.4373 1.12558 15.0061C0.528495 15.9973 0.597159 20.7127 0.577754 22.2114C0.564319 23.3235 0.389673 23.7519 0.395644 25.9058C0.398629 27.4105 0.209056 28.2076 0.21652 29.6033C0.225476 31.0557 0.150841 32.123 0.0523225 33.3156C-0.0476885 34.5292 0.0911328 35.9055 0.0164977 37.1578C-0.2089 40.9135 1.90178 41.7449 4.72597 43.9526C6.24405 45.1378 7.58301 46.1424 9.12945 47.3008L18.0155 54.097C17.2468 54.2762 11.8611 57.0705 10.4326 57.793C9.67279 58.1781 8.8533 58.9871 8.8533 60.0887C8.8533 61.4665 9.75041 62.1352 10.4833 62.8637L14.7689 67.3881C16.6825 69.8973 18.7156 68.9897 21.5846 68.4135C22.9026 68.1478 24.1848 67.9299 25.4312 67.6791C34.1307 65.9327 31.2871 66.0715 40.6434 67.9433C41.9883 68.212 43.2153 68.4897 44.4692 68.6986C45.2096 68.821 45.7484 68.93 46.3992 69.0599C50.2176 69.8256 49.7996 69.239 53.303 65.5983L56.3854 62.1606C57.19 61.2799 57.1333 61.0008 57.1333 59.9126C57.1333 57.7064 52.888 57.0391 52.0237 55.8599L60.8904 51.334C65.7178 48.9233 64.7341 48.074 65.5163 42.3927L66.5462 32.4976C66.8866 30.0332 68.1121 24.4938 64.0042 24.4938L56.2511 25.7267C56.2511 23.1488 54.6882 21.1934 53.4314 18.6782C50.7564 13.3254 47.6352 7.70085 45.0334 2.40773C43.9497 0.203008 43.2496 0 41.4494 0C39.8508 0 38.5118 1.7793 37.1773 3.1287C36.6594 3.65264 36.3563 3.8049 35.8518 4.27062C34.9845 5.0722 34.2337 5.89468 33.3903 6.74254L28.2748 11.4938C27.4076 12.3506 26.6777 13.0985 25.8149 13.9657C24.2057 15.5823 22.3578 16.6586 21.0114 19.2051L21.0099 19.2081Z' fill='%230E241F'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M42.4314 3.69141L52.1609 23.625C52.4639 24.2444 52.4027 24.9087 52.0713 25.5117L33.4573 59.317L42.4314 3.69141ZM63.7249 28.224L62.2859 44.9348C62.2411 45.4542 61.9426 45.8573 61.4873 46.111L34.7664 61.0709L63.7249 28.2225V28.224ZM54.0088 60.8485L48.6754 66.6536C48.5097 66.8342 48.2799 66.9118 48.0395 66.8626L34.5112 64.0279L54.0088 60.8485ZM11.8848 60.4544L18.8781 56.9525C19.096 56.8436 19.3319 56.86 19.5468 56.9749L32.1945 63.7428L11.8848 60.4544ZM4.48098 16.9227L20.9156 22.8293C21.4261 23.0129 21.759 23.4563 21.9157 24.0384L31.69 60.4066L4.47949 16.9212L4.48098 16.9227Z' fill='%231B3530'/%3E%3C/svg%3E%0A");
}
#escalas h3 {
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--col-acc);
	margin-bottom: 0;
}
#escalas p {
	text-wrap: balance;
}
#escalas p + h3 {
	margin-top: 2rem;
}

#cta {
	background-image: url(../images/cta-bg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	padding-bottom: calc(var(--sca-pad) * 4);;
}
#cta h2,
#cta p {
	text-align: center;
	margin-left: auto;
}
#cta h2 span {
	color: var(--col-acc);
}

#contacto {
	margin-top: 0;
}

.form {
	max-width: 50rem;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
	margin-top: 2.5rem;
}
.form .field {
	margin: 0;
}
.form .field.x2 {
	grid-column: span 2;
}
.main .form .field * {
	background: transparent;
	border: solid 1px var(--col-pri);
}
.main .form .field *,
.main .form .field *::placeholder {
	color: var(--col-bg);
}
.main .form .bt {
	background: var(--col-acc);
	color: var(--col-dar);
}

footer.footer {
	border: none;
	color: #ffffff66;
	background: var(--col-dar);
}
footer.footer img {
	display: block;
	height: 2.5rem;
	margin-bottom: 1rem;
}
footer.footer h6 {
	color: var(--col-acc);
	font-weight: 500;
	margin-bottom: 1rem;
}
footer.footer ul,
footer.footer p {
	line-height: 1.5em;
	margin-bottom: 2rem;
}
footer.footer .bt.bt-g {
	background: transparent;
}
.colophon {
	margin-top: 3rem;
	padding-top: 3rem;
	border-top: solid 1px var(--col-pri);
}
.colophon p + p {
	float: right;
}

@media (max-width: 960px) {
	.featured h1 {
		font-size: 12vw;
	}
	.featured p {
		margin-bottom: 2rem;
	}
	#capacidades ul {
		grid-template-columns: repeat(2, 1fr);
	}
	#experiencia ul {
		grid-template-columns: repeat(1, 1fr);
	}
	#proceso ol {
		flex-direction: column;
		gap: 3rem;
	}
	#proceso ol li {
		text-align: left;
		padding-left: 8rem;
		position: relative;
	}
	#proceso ol li h3 span {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		text-align: center;
	}
	#proceso ol li p {
		margin: 0;
	}
	#proceso ol:before {
		left: 3rem;
		top: 5rem;
		bottom: 5rem;
		border: none;
		border-left: solid 1px var(--col-acc);
	}
	.colophon p + p {
		float: none;
	}
	.header nav {
		background: var(--col-pri-bg);
		border: none;
	}
}