@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter24pt-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Suisse Mono';
    src: url('../fonts/SuisseIntlMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Suisse Intl';
    src: url('../fonts/SuisseIntl-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* Reset básico */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Eliminar bordes de imágenes */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* Heredar fuentes */
body {
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Reset de listas */
ul,
ol {
  list-style: none;
}

/* Reset de enlaces */
a {
  text-decoration: none;
  color: inherit;
}

/* Reset de botones e inputs */
button,
input,
textarea,
select,
h1, 
p {
  font: inherit;
  margin: 0;
}

:root {
	--font-inter: 'Inter', sans-serif;
	--font-suisse-mono: 'Suisse Mono', monospace;
	--font-suisse: 'Suisse Intl', sans-serif;
	--font-size-title: clamp(3rem, 0.8571rem + 6.8571vw, 6rem);
	--color-text: var(--color-white);
	--color-bg: #fff;
	--color-link: #000;
	--color-link-hover: #5c5c5c;
	--page-padding: 1.5rem;
	--color-white: #fff;
	--color-black: #000;
}

body {
	margin: 0;
	color: var(--color-text);
	background-color: var(--color-bg);
	font-family: "Helvetica Now Var", sans-serif;
	font-optical-sizing: auto;
	font-size: 16px;
	font-weight: 400;
	font-variation-settings: 'wght' 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.custom-cursor {
	position: fixed;
	top: 0;
	left: 0;
	width: 32px;
	height: 32px;
	z-index: 2000;
	border-radius: 50%;
	background: #02FF00;
	pointer-events: none;
	will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
	body[data-cursor-area] {
		cursor: none;
	}
}

@media (hover: none), (pointer: coarse) {
	.custom-cursor {
		display: none;
	}
}

a {
	color: var(--color-link);
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.25s;
}

a:hover {
	opacity: 0.7;
}

h1 {
	font-size: clamp(32px, 3vw, 48px);
	line-height: 1.3;
	font-weight: 600;
	margin: 0;
}

.font-suisse-mono {
	font-family: var(--font-suisse-mono);
}

.font-suisse {
	font-family: var(--font-suisse);
}

.font-inter {
	font-family: var(--font-inter);
}

.text-xs {
	font-size: 0.8125rem;
	line-height: 1.35;
}

.text-2xl {
	font-size: clamp(1.125rem, 3vw, 1.5rem);
	line-height: clamp(1.5rem, 3vw, 2.15rem);
}

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

.uppercase {
	text-transform: uppercase;
}

.relative {
	position: relative;
}

.absolute {
	position: absolute !important;
}

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

.container {
	position: relative;
	width: 100%;
	height: auto;
}

.container__left,
.container__right {
	width: 100%;
	height: auto;
}

.container__right-inner {
	height: auto;
	color: #111;
}

.u-corner-patterns {
	--corner-size: 1.5rem;
	--corner-gap: 4px;
	--corner-outset: 1.5rem;
	--corner-inset: var(--corner-outset);
	--corner-line: 1px;
	--corner-color: #111;

	position: relative;
	overflow: visible;
	background: none;
	isolation: isolate;
}

.u-corner-patterns::before {
	position: absolute;
	inset: calc(var(--corner-outset) * -1);
	z-index: 0;
	content: "";
	pointer-events: none;

	background:
		linear-gradient(var(--corner-color), var(--corner-color)) 0 var(--corner-inset) /
			calc(var(--corner-size) - var(--corner-gap)) var(--corner-line) no-repeat,
		linear-gradient(90deg, var(--corner-color), var(--corner-color)) var(--corner-inset) 0 /
			var(--corner-line) calc(var(--corner-size) - var(--corner-gap)) no-repeat,
		linear-gradient(var(--corner-color), var(--corner-color)) 100% var(--corner-inset) /
			calc(var(--corner-size) - var(--corner-gap)) var(--corner-line) no-repeat,
		linear-gradient(90deg, var(--corner-color), var(--corner-color)) calc(100% - var(--corner-inset)) 0 /
			var(--corner-line) calc(var(--corner-size) - var(--corner-gap)) no-repeat,
		linear-gradient(var(--corner-color), var(--corner-color)) 0 calc(100% - var(--corner-inset)) /
			calc(var(--corner-size) - var(--corner-gap)) var(--corner-line) no-repeat,
		linear-gradient(90deg, var(--corner-color), var(--corner-color)) var(--corner-inset) 100% /
			var(--corner-line) calc(var(--corner-size) - var(--corner-gap)) no-repeat,
		linear-gradient(var(--corner-color), var(--corner-color)) 100% calc(100% - var(--corner-inset)) /
			calc(var(--corner-size) - var(--corner-gap)) var(--corner-line) no-repeat,
		linear-gradient(90deg, var(--corner-color), var(--corner-color)) calc(100% - var(--corner-inset)) 100% /
			var(--corner-line) calc(var(--corner-size) - var(--corner-gap)) no-repeat;
}

.u-corner-patterns > * {
	position: relative;
	z-index: 1;
}

.slider-home {
	position: relative;
	height: 100%;
	width: 100%;
	overflow: hidden;
	background: #111;
	--slide-fade-duration: 180ms;
	cursor: pointer;
}

.slider-home:focus-visible {
	outline: 2px solid var(--color-white);
	outline-offset: -0.5rem;
}

.slider-home__slides,
.custom-slide {
	position: absolute;
	inset: 0;
}

.custom-slide {
	opacity: 0;
	transition: opacity var(--slide-fade-duration) ease;
}

.custom-slide--current {
	opacity: 1;
	z-index: 1;
}

.slider-home__media {
	display: block;
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.slider-home__title {
	position: absolute;
	left: var(--page-padding);
	bottom: var(--page-padding);
	z-index: 1;
	max-width: calc(100% - (var(--page-padding) * 2));
	margin: 0 0 1rem 0;
	color: var(--color-white);
	font-family: var(--font-suisse-mono);
	font-size: clamp(0.9rem, 1.2vw, 1.25rem);
	font-weight: 400;
}

.slider-home[data-theme="dark"] .slider-home__title {
	color: #111;
}

.slider-home[data-theme="light"] .slider-home__title {
	color: var(--color-white);
}

.wysiwyg p {
	margin-bottom: 1rem
}

.block,
.block-hover {
	transition: opacity 0.25s linear;
}

.block {
	width: 100%;
	height: 100%;
	margin-bottom: 1.625rem;
	z-index: 1000;
}

.block-hover p.absolute {
	right: 0;
	bottom: -43px;
}

.block-pd {
	padding: 0.5rem 1rem 0 1rem;
}


.container__right-contact {
	width: max-content;
	bottom: var(--page-padding);
	right: var(--page-padding);
	z-index: 1000;
	margin-top: 7rem;
	margin-bottom: 1rem;
	padding: 24px;
}

.container__right-contact-block {
	line-height: 1.2;
}

.container__right-contact-block:first-child {
	margin-bottom: 0.7rem;
}

.logo {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding: var(--page-padding);
	z-index: 1000;
}

.logo svg {
	width: 100%;
}

@media (min-width: 1024px) {
	.container {
		position: relative;
		display: grid;
		z-index: 1000;
		grid-row-gap: 1rem;
		justify-items: start;
		grid-template-columns: repeat(2, 1fr);
	}

	.container,
	.container__left,
	.container__right {
		height: 100svh;
		min-height: 800px;
	}

	.container__right {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.container__right,
	.container__right-contact {
		padding: 0 5vw;
	}

	.container__right-inner:hover .block-hover {
		opacity: 1;
	}

	.container__right-inner:hover .block {
		opacity: 0;
	}

	.block {
		top: 0;
		left: 50%;
		transform: translateX(-50%);
	}

	.block-hover {
		opacity: 0;
	}
}

@media (max-width: 1024px) {
	.container {
		display: block;
	}

	.container__left,
	.slider-home {
		height: 75svh;
	}

	.container__right {
		margin: 3rem 0 0 0;
	}

	.container__right-contact {
		padding: 0 48px 0 0;
	}

	.block,
	.container__right-contact {
		position: static !important;
		width: 100%;
	}

	.block {
		margin-bottom: 0;
	}

	.u-corner-patterns {
		width: calc(100% - var(--corner-outset) * 2.75);
    	margin: 0 auto;
	}

	.block-pd {
		padding: 1rem 0;
	}

	.block-hover p.absolute {
		right: 1rem;
    	bottom: -55px;
	}

	h1 {
		margin-bottom: 0.6rem;
	}
}