body {
	background: var(--color-black);
	box-sizing: border-box;
	color: var(--color-text-01);
	font-family: 'General Sans', sans-serif;
	font-weight: 500;
	letter-spacing: var(--letter-spacing);
	line-height: 0;
	margin: 0;
	padding: 0;
	position: relative;
	width: 100%;
}

.body--black {
	background: rgb(var(--color-black));
	color: var(--color-text-02);
}

.body--mist {
	background: rgb(var(--color-mist-01));
	color: var(--color-text-03);
}

.body--black .title {
	color: var(--color-text-02);
}

.body--mist .title {
	color: var(--color-text-01);
}

.body--mist .subtitle {
	color: var(--color-text-03);
}

svg {
	height: 100%;
	width: 100%;
}

p {
	line-height: inherit;
}

	p:not(:last-child) {
		padding-bottom: calc(1em * 1.25);
	}
	
p a {
	opacity: 0.2;
}

@media (hover: hover) {
	
	p a {
		transition: opacity 0.4s ease;
	}
	
	p a:hover {
		opacity: 1;
	}
	
}

ul,
li {
	list-style: none;
}

a {
	cursor: pointer;
}

sup {
	vertical-align: super;
	font-size: 64%;
	line-height: 1;
}

b,
strong {
	font-weight: 600;
}

.mask {
	position: relative;
	overflow: hidden;
}

.fit--cover {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.fit--contain {
	height: 100%;
	object-fit: contain;
	width: 100%;
}

.tt--ab {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

.text--center {
	text-align: center;
}

.hidden {
	color: transparent;
	user-select: none;
}

.none {
	display: none;
}

.no--scrollbar {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

	.no--scrollbar::-webkit-scrollbar {
		display: none;
	}

.wrp {
	box-sizing: border-box;
	padding: 0 var(--grid-margin);
	width: 100%;
}

.row {
	display: flex;
	flex-flow: wrap;
	margin-left: -.5rem;
	margin-right: -.5rem;
	width: calc(100% + 1rem);
	margin-left: calc(0px - var(--grid-gap) / 2);
	margin-right: calc(0px - var(--grid-gap) / 2);
	width: calc(100% + var(--grid-gap));
}

.col,[class*="col--"] {
	box-sizing: border-box;
	padding-left: calc(var(--grid-gap) / 2);
	padding-right: calc(var(--grid-gap) / 2);
	position: relative;
}

.full__page {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 100vh;
	width: 100%;
}

.full--width {
	width: 100vw;
}

.full--height {
	height: 100vh;
}

@media (hover: none) {
	
	.full--height {
		height: 100svh;
	}
	
}

#scroll__container {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 100vh;
	position: relative;
	width: 100vw;
	z-index: 1;
}

 .page__container {
	 min-height: 100vh;
 }

.main__container:not(.home__page) .page__container {
	margin-top: var(--header-height);
	position: relative;
}

.button {
	border-radius: 1rem;
	box-sizing: border-box;
	display: inline-block;
	font-family: 'Martian Mono';
	font-weight: 400;
	font-size: clamp(0.4375rem, var(--s-08), 0.75rem);
	letter-spacing: 0.01em;
	line-height: 1.6;
	height: fit-content;
	padding: var(--s-06) var(--s-16);
	position: relative;
	overflow: hidden;
	text-transform: uppercase;
	transition: background-color 0.4s var(--link-handle), color 0.4s var(--link-handle);
}

.button:not(.button--tag) {
	cursor: pointer;
}

.button--tag {
	align-items: center;
	display: inline-flex;
	gap: var(--s-06);
	padding: var(--s-06) var(--s-16) var(--s-06) var(--s-08);
}

.tag__icon {
	display: block;
	height: clamp(0.625rem, var(--s-12), 1.125rem);
	width: clamp(0.625rem, var(--s-12), 1.125rem);
}

.tags__container {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-10);
}

.button--white {
	background: rgb(var(--color-mist-01));
	color: rgb(var(--color-black));
}

.button--dark-grey {
	background: rgb(var(--color-mist-05));
	color: rgb(var(--color-mist-01));
}

.button--dark-grey .tag__icon {
	fill: rgb(var(--color-mist-01));
}

.button--light-grey {
	background: rgb(var(--color-mist-03));
	color: rgb(var(--color-black));
}

.button--orange {
	background: rgb(var(--color-orange));
	color: rgb(var(--color-black));
}

.button__full {
	align-items: center;
	border-top: solid 1px var(--color-black);
	display: flex;
	font-weight: 600;
	justify-content: space-between;
	padding: var(--grid-margin) calc(var(--grid-margin) * 1.5) var(--grid-margin) var(--grid-margin);
	position: relative;
	transition: color 0.6s var(--link-handle);
}

.button__full > div {
	position: relative;
	z-index: 1;
}

.background--pink .button__full {
	background: var(--color-pink-01);
}

.link--double {
	display: inline-flex;
	font-size: clamp(0.75rem, var(--s-14), 1.125rem);
	font-weight: 600;
	gap: var(--s-05);
	line-height: 1.25;
	margin: calc(0px - var(--s-10));
	position: relative;
	padding: var(--s-10);
}

.link--double > .underline {
	position: relative;
}

.link--arrow > span {
	display: block;
}

.button > .link--arrow > span:first-child,
.link--double > .link--arrow > span:first-child {
	left: -100%;
	position: absolute;
	top: 0;
}

	
	.link--double .underline:first-child:before,
	.link--double .underline:after {
		content: '';
		background: currentcolor;
		bottom: 0;
		height: 1px;
		left: 0;
		position: absolute;
		width: 100%;
	}
	
	.link--double .underline:after {
		transform-origin: right;
		transform: scaleX(0);
	}
	
	.link--double .underline:before {
		transform-origin: left;
		transform: scaleX(1);
	}

.link--out {
	position: relative;
}

.text__description ul {
	padding-left: var(--s-20);
}

.text__description li {
	position: relative;
}

	.text__description li:before {
		background: currentcolor;
		border-radius: 50%;
		content: '';
		height: var(--s-04);
		left: calc(0px - var(--s-16));
		position: absolute;
		top: var(--s-10);
		width: var(--s-04);
	}

.title > .mask,
.title > .mask > span {
	display: block;
}

.grid {
	display: grid;
	column-gap: var(--grid-gutter);
}

.grid__inner {
	box-sizing: border-box;
}

.grid--layout {
	grid-template-columns: repeat(var(--grid-columns), 1fr);
}

.grid--12 {
	grid-template-columns: repeat(12, 1fr);
}

.grid--6 {
	grid-template-columns: repeat(6, 1fr);
}

.grid--4 {
	grid-template-columns: repeat(4, 1fr);
}

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

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

.pt--xxlarge {
	padding-top: max(var(--s-160), 20vh);
}

.pb--xxlarge {
	padding-bottom: max(var(--s-160), 20vh);
}

.pt--xlarge {
	padding-top: max(var(--s-120), 15vh);
}

.pb--xlarge {
	padding-bottom: max(var(--s-120), 15vh);
}

.pt--large {
	padding-top: max(var(--s-96), 10vh);
}

.pb--large {
	padding-bottom: max(var(--s-96), 10vh);
}

.pt--medium {
	padding-top: var(--s-64);
}

.pb--medium {
	padding-bottom: var(--s-64);
}

.pt--small {
	padding-top: var(--s-48);
}

.pb--small {
	padding-bottom: var(--s-48);
}

.pt--xsmall {
	padding-top: var(--s-32);
}

.pb--xsmall {
	padding-bottom: var(--s-32);
}

.pt--margin {
	padding-top: var(--grid-margin);
}

.pb--margin {
	padding-bottom: var(--grid-margin);
}

.pt--title {
	padding-top: var(--s-12);
}

.pb--title {
	padding-bottom: var(--s-12);
}

.square--ratio {
	aspect-ratio: 1 / 1;
}

@media (max-width: 980px) and (min-width: 681px) {
	
	.pt--xxlarge {
		padding-top: var(--s-120);
	}
	
	.pb--xxlarge {
		padding-bottom: var(--s-120);
	}
	
	.pt--xlarge {
		padding-top: var(--s-104);
	}
	
	.pb--xlarge {
		padding-bottom: var(--s-104);
	}
	
	.pt--large {
		padding-top: var(--s-80);
	}
	
	.pb--large {
		padding-bottom: var(--s-80);
	}
	
	.pt--medium {
		padding-top: var(--s-56);
	}
	
	.pb--medium {
		padding-bottom: var(--s-56);
	}
	
	.pt--small {
		padding-top: var(--s-32);
	}
	
	.pb--small {
		padding-bottom: var(--s-32);
	}
	
	.pt--xsmall {
		padding-top: var(--s-24);
	}
	
	.pb--xsmall {
		padding-bottom: var(--s-24);
	}
	
	.grid-tl--2 {
		grid-template-columns: repeat(2, 1fr);	
	}
	
	.grid-tl--1 {
		grid-template-columns: 1fr;	
	}
	
	.slide__arrow {
		height: var(--s-24);
		width: var(--s-24);
	}
	
}

@media (max-width: 980px) and (min-width: 681px) {
	
	.grid--4,
	.grid--3 {
		grid-template-columns: repeat(2, 1fr);
	}

}

@media (max-width: 980px) {
	
	.grid--4 {
		grid-template-columns: repeat(2, 1fr);	
	}
	
}

@media (max-width: 680px) {
	
	.pt--xxlarge {
		padding-top: var(--s-96);
	}
	
	.pb--xxlarge {
		padding-bottom: var(--s-96);
	}
	
	
	.pt--xlarge {
		padding-top: var(--s-80);
	}
	
	.pb--xlarge {
		padding-bottom: var(--s-80);
	}
	
	.pt--large {
		padding-top: var(--s-64);
	}
	
	.pb--large {
		padding-bottom: var(--s-64);
	}
	
	.pt--medium {
		padding-top: var(--s-48);
	}
	
	.pb--medium {
		padding-bottom: var(--s-48);
	}
	
	.pt--small {
		padding-top: var(--s-24);
	}
	
	.pb--small {
		padding-bottom: var(--s-24);
	}
	
	.pt--xsmall {
		padding-top: var(--s-16);
	}
	
	.pb--xsmall {
		padding-bottom: var(--s-16);
	}
	
	.grid-ml--2 {
		grid-template-columns: repeat(2, 1fr);	
	}
	
	.grid-ml--1 {
		grid-template-columns: 1fr;	
		column-gap: 0;
	}
	
	.grid--2,
	.grid--3 {
		grid-template-columns: 1fr;
	}
	
}

/** TEXT SYLES **/

.w--400 {
	font-weight: 400;
}

.w--500 {
	font-weight: 500;
}

.w--600 {
	font-weight: 600;
}

.w--700 {
	font-weight: 700;
}

.title + .btn {
	margin-top: var(--s-40);
}

.link--out,
.link--underline {
	display: inline-block;
	position: relative;
}

	.link--underline:before {
		background: currentcolor;
		bottom: 0;
		content: '';
		height: 1px;
		left: 0;
		transform-origin: right;
		transform: scaleX(0);
		position: absolute;
		transition: transform 0.4s ease;
		width: 100%;
	}

.link--underline.current {
	pointer-events: none;
}

.link--underline.current:before {
	transform-origin: left;
	transform: scaleX(1);
}
	
@media (hover: hover) {
	
    .link--underline:hover::before {
        transform-origin: left;
        transform: scaleX(1);
    }

}

.section__line--left {
	position: relative;
}

	.section__line--left:before {
		background: rgb(var(--color-mist-05));
		content: '';
		height: 100%;
		left: calc(0px - var(--grid-gutter) / 2);
		position: absolute;
		top: 0;
		transition: transform 1.2s var(--transition-handle);
		width: 1px;
	}
	
	.hide.section__line--left:before {
		transform-origin: top;
		transform: scale(0);
	}
	

/* Next */

.section__next {
	background: rgb(var(--color-mist-02));
	color: rgb(var(--color-black));
	padding: var(--grid-margin) 0;
}

.next__image {
	aspect-ratio: 16 / 9;
	display: block;
}

.next__link {
	display: inline-block;
}

.section__next .next__label {
    color: rgb(var(--color-black));
	margin-bottom: var(--s-20);
}

.next__title {
	color: rgb(var(--color-black)) !important;
	display: flex;
	flex-direction: column;
	opacity: 0.2;
	transition: opacity 0.4s ease;
}

.next__title > span {
	display: block;
}

@media (hover: hover) {
	
	.next__link:hover .next__title {
		opacity: 1;
	}
	
}

/* Bars */

.bar__container {
	width: 100%;
	transform: scaleY(0);
	transition: transform 1.2s ease;
	z-index: 3;
}

.page--in .bar__container {
	transform: scaleY(1);
}

.bars--absolute {
	position: absolute;
}

.bars--relative {
	position: relative;
}

.bar__container__inner {
	display: grid;
	grid-template-columns: repeat(var(--grid-columns), 1fr);
	column-gap: var(--grid-gutter);
}

.layout__bar {
	height: clamp(0.625rem, var(--s-12), 1rem);
	position: relative;
	pointer-events: none;
}

	.layout__bar:before {
		bottom: 0;
		content: '';
		height: 100%;
		left: calc(0px - var(--grid-gutter) / 2);
		position: absolute;
		min-width: 1px;
		max-width: 1px;
		width: 1px;
	}
	
	.bars--grey .layout__bar:before {
		background: rgb(var(--color-mist-05));
	}
	
	.bars--black .layout__bar:before {
		background: rgb(var(--color-black));
	}
	
@media (min-width: 681px) and (orientation: landscape) {
	
	.layout__bar--13 {
		bottom: 0;
		position: absolute;
		right: 0;
		width: 1px;
	}
	
}

@media (min-width: 981px) {
	
	.bars--mobile {
		display: none;	
	}
	
}
	
@media (max-width: 980px) and (min-width: 681px) and (orientation: portrait) {
	
	.layout__bar--10,
	.layout__bar--11,
	.layout__bar--12,
	.layout__bar--13 {
		display: none;
	}
	
	.layout__bar--9 {
		bottom: 0;
		position: absolute;
		right: 0;
		width: 1px;
	}
	
}

@media (max-width: 680px) {
	
	.layout__bar--6,
	.layout__bar--7,
	.layout__bar--8,
	.layout__bar--9,
	.layout__bar--10,
	.layout__bar--11,
	.layout__bar--12,
	.layout__bar--13 {
		display: none;
	}
	
	.layout__bar--5 {
		bottom: 0;
		position: absolute;
		right: 0;
		width: 1px;
	}
	
}


/* Proyectos */

@media (max-width: 680px) {

	.hero__title,
	section:first-of-type .section__title {
		padding-top: var(--s-80);
	}

}



.grid--3__item {
	position: relative;
}

.grid__item__img {
	background: rgb(var(--color-black));
	position: relative;
	overflow: hidden;
}

.ratio--1 {
	aspect-ratio: 1 / 1;
}

.grid__item__img img {
	transition: opacity 1.2s var(--transition-handle);
}

.grid--4__item.hide .grid__item__img img,
.grid--3__item.hide .grid__item__img img,
.grid--2__item.hide .grid__item__img img {
	opacity: 0;
}

.grid__item__title {
	padding-top: var(--s-12);
}

.grid__item__title + .grid__item__text,
.grid__item__img + .grid__item__text {
	margin-top: calc(1em * 1.25);
}

.grid__item__title,
.grid__item__text {
	transition: opacity 1.2s var(--transition-handle);
}

.grid--3__item.hide .grid__item__title,
.grid--3__item.hide .grid__item__text {
	opacity: 0;
}

.project__process .grid__item__text {
	color: rgb(var(--color-mist-04));
}

.project__process .grid__item__title {
	color: rgb(var(--color-mist-01));
}

.about__team .grid__item__text {
	color: rgb(var(--color-mist-03));
}

.about__team .grid__item__title {
	color: rgb(var(--color-black));
}

@media (min-width: 981px) {
	
	.grid--3__item:nth-child(3n + 4) {
		padding-top: var(--s-64);
	}
	
	.grid--3__item:nth-child(3n + 5),
	.grid--3__item:nth-child(3n + 6) {
		margin-top: var(--s-64);
	}
	
		.grid--3__item:nth-child(2):before,
		.grid--3__item:nth-child(3):before,
		.grid--3__item:nth-child(3n + 5):before,
		.grid--3__item:nth-child(3n + 6):before {
			background: rgb(var(--color-mist-05));
			content: '';
			height: 100%;
			left: calc(0px - var(--grid-gutter) / 2);
			position: absolute;
			top: 0;
			transform-origin: bottom;
			transition: transform 1.2s var(--transition-handle);
			width: 1px;
		}
		
		.grid--3__item.hide:before {
			transform: scaleY(0)
		}
	
	.grid--3__item:nth-last-child(3) {
		padding-bottom: var(--s-64);
	}
	
	.grid--3__item:nth-last-child(1),
	.grid--3__item:nth-last-child(2) {
		margin-bottom: var(--s-64);
	}
	
}

@media (max-width: 980px) and (min-width: 681px) {

	.grid--3__item:nth-child(2n + 3) {
		padding-top: var(--s-64);
	}
	
	.grid--3__item:nth-child(2n + 4),
	.grid--2__item + .grid--2__item  {
		margin-top: var(--s-64);
	}
	
		.grid--3__item:nth-child(2n + 2):before,
		.grid--3__item:nth-child(2n + 4):before {
			background: rgb(var(--color-mist-05));
			content: '';
			height: 100%;
			left: calc(0px - var(--grid-gutter) / 2);
			position: absolute;
			top: 0;
			width: 1px;
		}
	
	.grid--3__item:nth-last-child(2) {
		padding-bottom: var(--s-64);
	}
	
	.grid--3__item:nth-last-child(1) {
		margin-bottom: var(--s-64);
	}
	
}

@media (max-width: 680px) {

	.grid--3__item + .grid--3__item,
	.grid--2__item + .grid--2__item {
		margin-top: var(--s-56);
	}
	
	.grid--3__item:last-child {
		padding-bottom: var(--s-56);
	}

}


/* Sketches */

.section__sketch {
	align-items: center;
	display: flex;
	background: rgb(var(--color-black));
	justify-content: center;
	position: relative;
	overflow: hidden;
}

.sketch__img {
	position: relative;
}

.ss-1 {
	fill:#FFFFFF;
	opacity: 0;
}

.ss-2 {
	fill: none;
	stroke:#FFFFFF;
	stroke-miterlimit: 10;
	stroke-dasharray: 1;
}

.ss-3 {
    visibility:hidden;
	fill: none;
	stroke:#FFFFFF;
	stroke-miterlimit: 10;
	stroke-dasharray: 6;
}

.sketch__text {
	color: rgb(var(--color-mist-01));
	opacity: 0;
	position: absolute;
	transition: opacity 1.2s var(--transition-handle);
}

.sketch__diagram .ss-2 {
	stroke-dashoffset: 1;
	transition: stroke-dashoffset 2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.startsvg .sketch__diagram .ss-2 {
	stroke-dashoffset: 0;
}

.startsvg .sketch__diagram .ss-1 {
	opacity: 1;
	transition: opacity 0.8s var(--transition-handle) 1.6s;
}

.startsvg .sketch__diagram .ss-3 {
	visibility: visible;
}

.startsvg .sketch__text {
	opacity: 1;
}

@media (min-width: 981px) {
	
	.section__sketch {
		height: 100vh;
		width: 100%;	
	}
	
	.sketch__img {
		aspect-ratio: 2 / 1;
		height: auto;
		width: 100%;
		max-width: 88.889vw;
	}
	
}

@media (max-width: 980px) {
	
	.section__sketch {
		height: 100vw;
		width: 100%;	
	}
	
	.sketch__img {
		aspect-ratio: 1 / 1;
		height: 100%;
		width: auto;
		max-width: 100vw;
		transform: translateX(-50%);
	}
	
	.sketch__img svg {
		height: 100%;
		width: auto !important;
	}
	
	.sketch__diagram .ss-3 {
		opacity: 0;
	}
	
	.startsvg .sketch__diagram .ss-3 {
		opacity: 1;
		transition: opacity 2s var(--transition-handle) 1.6s;
	}
	
}

@media (max-width: 980px) and (min-width: 681px) {
	
	.section__sketch {
		padding-top: var(--s-104);
	}
	
}

@media (max-width: 680px) {

	.section__sketch {
		padding: var(--s-80) 0;
	}

}

/* PROVISIONAL */

.prov__page .logo__link {
	fill: rgb(var(--color-mist-01));
	height: auto;
	position: absolute;
	right: var(--grid-margin);
	top: var(--grid-margin);
}

.prov__page .main__logo {
	width: var(--s-80);
}

.prov__page .title:not(.subtitle),
.prov__page .hero__description b,
.prov__page .hero__description strong {
	color: rgb(var(--color-mist-01));
}

.prov__page .hero__description {
	color: rgb(var(--color-mist-03));
}

.prov__page .bar__container {
	height: auto !important;
}

.prov__page .about__hero > .pt--title {
	display: flex;
	flex-direction: column;
}