/* ====================================================================== */
/* =========================== Default Screen =========================== */
/* ====================================================================== */

*,
*::after,
*::before {
	background-position: center center;
	background-repeat: no-repeat;
	box-sizing: border-box;
	background-size: cover;
}

:root {
	--main-color: 227, 214, 196;
	--lite-color: 255, 250, 245;
	--half-color: 206, 182, 156;
	--dark-color: 060, 053, 047;
}

html {
	height: 100%;
	scroll-behavior: smooth;
	font-size: 0.6945vw;
	overflow-y: scroll;
	cursor: default;
}

body {
	height: 100%;
	-webkit-font-smoothing: antialiased !important;
	-webkit-text-size-adjust: none !important;
	font-smoothing: antialiased !important;
	color: rgba(35, 31, 32, 1.0);
	line-height: 0;
	padding: 0;
	margin: 0;
}

.setWrapper {
	width: calc(100% - 8.0rem);
	margin: 12.8rem auto;
	position: relative;
}

.setWrapper.isAlt {
	margin: 9.6rem auto;
}

/* ---------------------------------------- */
/* ----- >>> Structure -------------------- */
/* ---------------------------------------- */

header,
footer  {
	width: 100%;
	position: fixed;
	z-index: 1000;
	left: 0;
}

header {
	top: 0;
}

section {
	width: 100%;
	background: rgba(var(--main-color), 1.0);
	overflow: hidden;
}

footer {
	background: rgba(var(--main-color), 1.0);
	color: rgba(var(--dark-color), 1.0);
	bottom: 0;
}

/* ---------------------------------------- */
/* ----- >>> Styles ----------------------- */
/* ---------------------------------------- */

h1		{ font: 400 8.6rem/1.00em 'IvyOra', 	sans-serif; margin: 0 auto; letter-spacing: -0.000em; }
h2		{ font: 400 8.0rem/1.00em 'IvyOra', 	sans-serif; margin: 0 auto; letter-spacing: +0.000em; }
h3		{ font: 400 6.4rem/1.10em 'IvyOra', 	sans-serif; margin: 0 auto; letter-spacing: +0.000em; }
h4		{ font: 400 5.4rem/1.10em 'IvyOra', 	sans-serif; margin: 0 auto; letter-spacing: +0.000em; }
h5		{ font: 400 3.2rem/1.20em 'IvyOra', 	sans-serif; margin: 0 auto; letter-spacing: +0.000em; }
h6		{ font: 400 2.8rem/1.20em 'IvyOra', 	sans-serif; margin: 0 auto; letter-spacing: +0.000em; }
p 		{ font: 300 1.4rem/1.40em 'Helvetica', sans-serif; margin: 0 auto; letter-spacing: +0.010em; }
small { font: 300 1.4rem/1.40em 'Helvetica', sans-serif; margin: 0 auto; letter-spacing: +0.000em; }
a { text-decoration: none;}

address { 
	font: 400 5.1rem/1.00em 'IvyOra', sans-serif;
	letter-spacing: -0.01em;
	flex-direction: column;
	align-items: center;
	color: #231F20;
	display: flex;
}

address > img {
	width: unset !important;
	max-height: 32rem;
	margin: -1.6rem auto;
	position: relative;
	z-index: 0;
}

address > span {
	position: relative;
	z-index: 200;
}

small:before {
	width: 1.6rem;
	height: 0.1rem;
	background: currentColor;
	margin: 1.6rem auto;
	display: block;
	opacity: 0.5;
	content: "";
}

/* ---------------------------------------- */
/* ----- >>> Navegation ------------------- */
/* ---------------------------------------- */

header .setWrapper,
footer .setWrapper {
	justify-content: space-between;
	text-transform: uppercase;
	margin: 3.2rem auto;
	align-items: center;
	display: flex;
}

footer .setWrapper {
	margin: 1.6rem auto;
}

nav > ul {
	font: 300 1.3rem/1.00em 'Helvetica', Helvetica, Arial, sans-serif;
	letter-spacing: 0.1em;
	display: flex;
	gap: 3.2rem;
}

section nav > ul {
	font: 400 5.4rem/1.00em 'IvyOra', Helvetica, Arial, sans-serif;
	letter-spacing: -0.01em;
	flex-direction: column;
	gap: 0.0;
}

section nav > ul > li > a {
	width: 100%;
	padding: 6.8rem 4.8rem;
	display: inline-block;
	position: relative;
}

section nav > ul > li:nth-child(1) > a { background-color: rgba(227, 214, 196, 1.0); color: rgba(var(--dark-color), 1.0);}
section nav > ul > li:nth-child(2) > a { background-color: rgba(060, 053, 047, 1.0); color: rgba(var(--lite-color), 1.0);}
section nav > ul > li:nth-child(3) > a { background-color: rgba(253, 249, 245, 1.0); color: rgba(var(--dark-color), 1.0);}

section nav > ul > li:nth-child(1) > a:hover { background-color: rgba(253, 249, 245, 1.0); color: rgba(var(--dark-color), 1.0);}
section nav > ul > li:nth-child(2) > a:hover { background-color: rgba(233, 225, 213, 1.0); color: rgba(var(--dark-color), 1.0);}
section nav > ul > li:nth-child(3) > a:hover { background-color: rgba(034, 031, 032, 1.0); color: rgba(var(--lite-color), 1.0);}

section nav > ul > li > a:after {
	width: 5.4rem;
	background-image: url(../assets/SVG/SVG_ARW.svg);
	transition: all 0.25s ease-in-out;
	aspect-ratio: 1 / 1;
	position: absolute;
	right: 4.0rem;
	content: "";
}

section nav > ul > li > a:hover:after {
	transform: translateX(25%);
}

section nav > ul > li:nth-child(2) > a:after,
section nav > ul > li:nth-child(3) > a:hover:after {
	filter: invert(100%);
}

section nav > ul > li:nth-child(2):hover > a:after {
	filter: invert(0%);
}

/* ---------------------------------------- */
/* ----- >>> General ---------------------- */
/* ---------------------------------------- */

.isTTU { text-transform: uppercase; }

.isMT000 { margin-top:    00.0rem !important; }
.isMT008 { margin-top:    00.8rem !important; }
.isMT016 { margin-top:    01.6rem !important; }
.isMT032 { margin-top:    03.2rem !important; }
.isMT024 { margin-top:    02.4rem !important; }
.isMT048 { margin-top:    04.8rem !important; }
.isMT064 { margin-top:    06.4rem !important; } 
.isMT072 { margin-top:    07.2rem !important; }
.isMT080 { margin-top:    08.0rem !important; }
.isMT096 { margin-top:    09.6rem !important; }
.isMT112 { margin-top:    11.2rem !important; }
.isMT128 { margin-top:    12.8rem !important; }
.isMT144 { margin-top:    14.4rem !important; }
.isMT160 { margin-top:    16.0rem !important; }
.isMT256 { margin-top:    25.6rem !important; }

.isMB004 { margin-bottom: 00.4rem !important; }
.isMB008 { margin-bottom: 00.8rem !important; }
.isMB016 { margin-bottom: 01.6rem !important; }
.isMB032 { margin-bottom: 03.2rem !important; }
.isMB048 { margin-bottom: 04.8rem !important; }
.isMB054 { margin-bottom: 05.4rem !important; }
.isMB064 { margin-bottom: 06.4rem !important; }
.isMB072 { margin-bottom: 07.2rem !important; }
.isMB080 { margin-bottom: 08.0rem !important; }
.isMB096 { margin-bottom: 09.6rem !important; }
.isMB112 { margin-bottom: 11.2rem !important; }
.isMB128 { margin-bottom: 12.8rem !important; }
.isMB144 { margin-bottom: 14.4rem !important; }
.isMB160 { margin-bottom: 16.0rem !important; }
.isMB192 { margin-bottom: 19.2rem !important; }
.isMB256 { margin-bottom: 25.6rem !important; }

/* ---------------------------------------- */

hero {
	width: 100%;
	aspect-ratio: 16 / 9;
	justify-content: center;
	align-items: center;
	display: flex;
}

/* ---------------------------------------- */

cover {
	width: 100%;
	min-height: 100vh;
	justify-content: center;
	align-items: flex-end;
	position: relative;
	display: flex;
}

cover.isAlt {
	flex-direction: row-reverse;
}

cover > h1 {
	margin-bottom: 9.6rem !important;
	font-size: 14.4rem;
}

cover > column {
	width:  50%;
	height: 100vh;
	justify-content: center;
	align-items: flex-end;
	position: relative;
	overflow: hidden;
	display: flex;
}

cover > column > img {
	object-position: center;
	position: absolute;
	object-fit: cover;
	min-width: 100%;
	height: 100%;
}

cover > column > content {
	margin-bottom: 9.6rem !important;
	width: calc(100% - 25.6rem);
	position: relative;
	z-index: 200;
}

cover > column > content > *:not(p) {
	white-space: nowrap;
	text-align: center;
}

/* ---------------------------------------- */
/* ----- >>> Grid ------------------------- */
/* ---------------------------------------- */

grid {
	padding: 12.8rem 20rem;
}

grid,
grid > item,
grid > item > card  {
	width: 100%;
	text-transform: uppercase;
	flex-direction: column;
	white-space: nowrap;
	text-align: center;
	display: flex;
	gap: 2.4rem;
}

grid > item > card {
	max-width: 36rem;
}

grid > item:nth-child(1n) { align-items: flex-start; }
grid > item:nth-child(2n) { align-items: flex-end;  }

grid > item > card > h6 {
	position: relative;
}

grid > item > card > * > small {
	margin: 0.0rem 1.6rem;
	text-transform: none;
	position: absolute;
	bottom: 0.2rem;
}

grid > item > card > * > small:first-child {
	transform: translateX(calc(-100% - 2.4rem));
	left: 0;
}

grid > item > card > * > small:last-child {
	transform: translateX(calc(100% + 2.4rem));
	left: unset;
	right: 0;
}

grid > item > card > * > small:before {
	display: none;
}

grid > item > card > swiper > items {
	align-items: center;
}

grid > item > card > swiper > items > item > img {
	max-width: 100%;
	max-height: 36rem;
}

grid > item.isAlt > card > swiper:before,
grid > item.isAlt > card > swiper:after {
	width:  100%;
	height: 100%;
	background: #E3D8C9;
	position: absolute;
	content: "";
	left: 0%;
	top: 0%;
}

grid > item.isAlt > card > swiper:before { transform: translate(-4.8rem, +1.6rem) rotate(+5deg) scale(0.8, 0.9); }
grid > item.isAlt > card > swiper:after  { transform: translate(+4.8rem, -4.8rem) rotate(-5deg) scale(0.8, 0.9); }


/* ---------------------------------------- */
/* ----- >>> Prensa ----------------------- */
/* ---------------------------------------- */

press {
	width: 100%;
	border-top: thin solid rgba(var(--main-color), 0.5);
	flex-direction: column;
	display: flex;
}

press > item {
	border-bottom: thin solid rgba(var(--main-color), 0.5);
	padding: 4.8rem 0.0rem;
	align-items: center;
	text-align: center;
	display: flex;
}

press > item > div {
	width: 50%;
}

press > item > div > *:not(img, small) {
	text-transform: uppercase;
	max-width: 48rem;
}

press > item > div > img {
	max-width: 100%;
	max-height: 38rem;
}


.fancybox__caption {
	font: 400 1.3rem/1.00em 'Helvetica', Helvetica, Arial, sans-serif;
	transform: translateY(2.4rem);
	padding: 0.0rem !important;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	position: relative;
}

.fancybox__infobar {
	width: 100%;
	font: 400 1.3rem/4.8rem 'Helvetica', Helvetica, Arial, sans-serif !important;
	position: absolute !important;
	transform: translateY(-100%);
	top: 100dvh;
	left: 0;
}

.fancybox__slide {
	padding: 4.8rem !important;
}

/*
.fancybox__backdrop {
	background: rgba(var(--main-color), 1.0) !important;
}

.f-button svg {
	fil: #F00 !important;
}

/* ---------------------------------------- */
/* ----- >>> Estudio ---------------------- */
/* ---------------------------------------- */

.isAbout {
	text-align: center;
}

.isAbout h2,
.isAbout h3,
.isAbout h4 {
	text-transform: uppercase;
	position: relative;
	max-width: 120rem;
	z-index: 100;
}

.isAbout h2 { font-size: 14.4rem; } 
.isAbout p  { max-width: 048.0rem; }

.isAbout img {
	width:  100%;
	height: auto;
	position: relative;
	z-index: 100;
}

.isAbout .isOFF {
	margin: -6.4rem auto 3.2rem auto;
	position: relative;
	max-width: 40rem;
	z-index: 50;
}

.setBox {
	padding: 19.2rem 0.0rem;
	margin: 0 auto 9.6rem;
	position: relative;
	max-width: 54rem;
}

.setBox:before {
	width: 0.1em;
	height: 100%;
	background: rgba(var(--dark-color), 0.5);
	position: absolute;
	content: "";
	left: 50%;
	top: 0;
}

/* ---------------------------------------- */

gallery {
	width: 100%;
	margin: 12.8rem auto;
	gap: 6.4rem 0.0rem;
	flex-wrap: wrap;
	display: flex;
}

gallery > item {
	justify-content: center;
	align-items: center;
	display: flex;
	width: 25%;
}

gallery > item:nth-child(1) { transform: translate(-020%, -000%); }
gallery > item:nth-child(2) { transform: translate(-020%, -020%); }
gallery > item:nth-child(3) { transform: translate(-020%, +020%); }
gallery > item:nth-child(4) { transform: translate(-005%, -020%); }
gallery > item:nth-child(5) { transform: translate(+000%, -000%); }
gallery > item:nth-child(6) { transform: translate(+005%, -020%); }
gallery > item:nth-child(7) { transform: translate(+015%, +020%); }
gallery > item:nth-child(8) { transform: translate(+020%, +040%); }


gallery > item > img {
	max-width: 16rem;
}

/* ---------------------------------------- */
/* ----- >>> Contacto --------------------- */
/* ---------------------------------------- */

info {
	width: 100%;
	padding: 19.2rem 0.0rem !important;
	margin-bottom: 19.2rem !important;
	flex-direction: column;
	align-items: center;
	position: relative;
	display: flex;
}

info:before {
	width: 0.1em;
	height: 100%;
	background: rgba(var(--dark-color), 0.5);
	position: absolute;
	content: "";
	z-index: 1;
	left: 50%;
	top: 0;
}

info > ul {
	width: 100%;
	justify-content: center;
	margin-bottom: 19.2rem;
	text-align: center;
	display: flex;
}

info > ul > li {
	width: 50%;
	padding: 2.4rem 0.0rem;
	position: relative;
	z-index: 100;
}

info > ul > li > p {
	text-transform: uppercase;
	letter-spacing: 0.1rem;
	margin-top: 1.6rem;
}

info > img {
	width: 100%;
	position: relative;
	max-width: 64rem;
	z-index: 100;
}

/* ---------------------------------------- */

contact {
	font: 400 1.2rem/1.0em 'Helvetica', sans-serif;
	text-transform: uppercase;
	flex-direction: column;
	letter-spacing: 0.1em;
	padding-top: 3.2rem;
	align-items: center;
	text-align: left;
	display: flex;
	gap: 8.0rem;
}

contact > div {
	width: 100%;
}

contact > div > ul {
	justify-content: space-between;
	display: flex;
}

/* ---------------------------------------- */
/* ----- >>> Swiper ----------------------- */
/* ---------------------------------------- */

swiper {
	width: 100%;
	overflow: unset !important;
	position: relative;
}

swiper > items,
swiper > items > item {
	width: 100%;
}


.setPrev,
.setNext {
	width:  2.4rem;
	height: 2.4rem;
	background-image: url(../assets/SVG/SVG_ARW.svg?0003);
	position: absolute;
	cursor: pointer;
	z-index: 200;
	top: 50%;
}

.setPrev { left:  -12.8rem; transform: rotate(+180deg); }
.setNext { right: -12.8rem; transform: rotate(-000deg); }

/* ---------------------------------------- */
/* ----- >>> Media Form ------------------- */
/* ---------------------------------------- */

form {
	position: relative;
	flex-wrap: wrap;
	display: flex;
}

::-webkit-input-placeholder { opacity: 1; color: inherit; text-transform: uppercase; text-align: center }
:-ms-input-placeholder		 { opacity: 1; color: inherit; text-transform: uppercase; text-align: center }
::-moz-placeholder			 { opacity: 1; color: inherit; text-transform: uppercase; text-align: center }
:-moz-placeholder				 { opacity: 1; color: inherit; text-transform: uppercase; text-align: center }


.setInput {
	width: 100%;
	justify-content: space-between;
	align-items: center;
	position: relative;
	display: flex;
}

input, textarea, select, button {
	box-shadow: none !important;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-appearance: none;
	box-sizing: border-box
}

.setOutput,
input, select, textarea, button {
	all: unset;
	width: 100%;
	border-top: thin solid rgba(var(--dark-color), 0.5);
	font: 400 1.4rem/4.8em 'Helvetica', sans-serif;
	padding: 0.0rem 1.8rem;
	letter-spacing: 0.1em;
	position: relative;
	text-align: left;
	resize: none;
}

.setOutput {
	width: 100%;
	min-height: 4.8rem;
	text-transform: uppercase;
	text-align: center;
}

.isWrong,
.setOutput {
	color: #F00;
}

/* ---------------------------------------- */

form button {
	background: rgba(var(--dark-color), 1.0);
	color: rgba(var(--main-color), 1.0);
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
	border: none;
}

/* ---------------------------------------- */
/* ----- >>> Icon Sets -------------------- */
/* ---------------------------------------- */

i {
	width: 2.4rem;
	display: inline-block;
	aspect-ratio: 1 / 1;
}

.isBND {
	width: 9.6rem;
	aspect-ratio: 2.66 / 1;
}

.isBND .isFill {
	fill: currentColor;
}

.isARW {
	width: 1.6rem;
	background-image: url(../assets/SVG/SVG_ARW.svg?0003);
	vertical-align: text-bottom;
	margin-left: 0.8rem;
}

/* ---------------------------------------- */
/* ----- >>> Color Scheme ----------------- */
/* ---------------------------------------- */

body.isAlt {
	color: #D6D4CF;
}

body.isAlt section:not(.isCS01, .isCS02) {
	background: rgba(var(--dark-color), 1.0);
}

.isCS01 { background: rgba(251, 249, 244, 1.00); color: rgba(var(--dark-color), 1.0); }
.isCS02 { background: rgba(238, 231, 220, 1.00); color: rgba(var(--dark-color), 1.0); }
.isCS03 { background: rgba(225, 213, 198, 1.00); color: rgba(var(--dark-color), 1.0); }
.isCS04 { background: rgba(059, 053, 048, 1.00); color: rgba(var(--main-color), 1.0); }

/* ---------------------------------------- */
/* ----- >>> Menu Animation --------------- */
/* ---------------------------------------- */

.setMenu {
	height: 2.4rem;
	position: relative;
	z-index: 20000;
	display: none;
	float: right;
}

.setMenu .setIcon {
	width:  2.4rem;
	height: 1.4rem;
	transform: rotate(0deg);
	margin: 0.4rem auto;
	position: relative;
	transition: .25s;
	cursor: pointer;
	float: right;
}

.setMenu .setIcon span {
	width: 100%;
	height: 0.15rem;
	background: currentColor;
	transform: rotate(0deg);
	border-radius: 3.2rem;
	position: absolute;
	transition: .25s;
	display: block;
	opacity: 1;
	left: 0;
}

.setMenu .setIcon span:nth-child(1) { top: 000%; }
.setMenu .setIcon span:nth-child(2),
.setMenu .setIcon span:nth-child(3) { top: 050%; }
.setMenu .setIcon span:nth-child(4) { top: 100%; }

.setMenu .setIcon.isOpen span:nth-child(1) {
	width: 0%;
	left: 50%;
	top: 8px;
}

.setMenu .setIcon.isOpen span:nth-child(2) {
	transform: rotate(45deg);
}

.setMenu .setIcon.isOpen span:nth-child(3) {
	transform: rotate(-45deg);
}

.setMenu .setIcon.isOpen span:nth-child(4) {
	width: 0%;
	left: 50%;
	top: 8px;
}

/* ---------------------------------------- */
/* ----- >>> Animations ------------------- */
/* ---------------------------------------- */

a,
button {
	transition: all 0.25s ease-in-out;
}

.setWrapper ul > li > a {
	text-decoration: none;
	display: inline-block;
	position: relative;
}

.setWrapper ul > li > a:after {
	border-bottom: 1px solid currentColor;
	transition: transform .25s ease-in-out;
	transform-origin: 0% 50%;
	transform: scaleX(1);
	margin-top: 0.0rem;
	display: block;
	content: "";
}

.setWrapper ul > li > a:after {
	transform: scaleX(0);
}

.setWrapper ul > li > a:hover:after,
.setWrapper ul > li.current-menu-item > a:after  {
	transition:transform .25s ease-in-out;
	transform-origin: 0% 50%;
	transform: scaleX(0);
}

.setWrapper ul > li > a:hover:after,
.setWrapper ul > li.current-menu-item > a:after {
	transform: scaleX(1);
}

/* ---------------------------------------- */
/* ----- >>> CSS Hacks -------------------- */
/* ---------------------------------------- */

*:last-child:not(.setWrapper, .setCard) {
	margin-bottom: 0;
}

/* ---------------------------------------- */
/* ----- >>> Dev Tools -------------------- */
/* ---------------------------------------- */

.isDev * {
	box-shadow: inset 0rem 0rem 0rem 0.05rem #FF1DFF;
}

.isDev .setWrapper {
	background: rgba(255, 0, 0, 0.1);
}