@keyframes anim {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.intro {
	--padding: 6rem;
	--header-padding: 1.75rem;

	position: relative;
	overflow: hidden;
	padding: calc(var(--padding) + var(--header-padding)) 0 var(--padding);
	background: linear-gradient(102.9deg, #888e91 0%, #afb3b6 50%, #b2b7b7 100%);
	min-height: 58rem;

	.fullwidth-title {
		font-size: 17vw;
		line-height: 0.9;
		margin-bottom: 4rem;
	}

	.hero-image {
		display: flex;
		justify-content: center;
		position: absolute;
		left: 50%;
		bottom: 0;
		translate: -50% 0;
		width: 100%;
		height: 42rem;

		img {
			width: auto;
			height: 100%;
			object-fit: cover;
			object-position: 45%;
		}
	}

	.circle-container {
		display: none;
		position: absolute;
    top: 50%;
    right: 1rem;
		padding: 0.5rem;
		border: 1px solid var(--color-white);
		border-radius: 50em;
		z-index: 1;

		.circle {
			--bg-color: oklch(from var(--color-primary) l c h / 0.7);
			position: relative;
			width: 200px;
			height: 200px;

			.text {
				width: 100%;
				height: 100%;
				position: absolute;
				border-radius: 50em;
				background-color: var(--bg-color);
				outline: 0.5rem solid var(--bg-color);
				animation: anim 10s linear infinite;

				span {
					position: absolute;
					left: 50%;
					font-family: monospace;
					font-size: var(--text-xl);
					transform-origin: 0 100px;
				}
			}
		}

    img {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      filter: brightness(0) invert(1);
      padding: 4rem;
    }
	}

  .scroll-more-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    position: absolute;
    left: 50%;
    bottom: 2rem;
    translate: -50% 0;
    border: none;
    background: none;
    font-size: var(--text-lg);
    color: var(--color-white);

    .btn-container {
      padding: 1.375rem 1.125rem;
      border: 1px solid oklch(from var(--color-black) l c h / 0.3);
      background-color: oklch(from var(--color-white) l c h / 0.2);
      border-radius: 50em;
    }

    .scroll-more-arrow {
      width: 1em;
      color: var(--color-white);
    }
  }

	@media (width >= 576px) {
		min-height: 60rem;
	}
	@media (width >= 768px) {
		.fullwidth-title {
			font-size: 9.15vw;
		}
		.circle-container {
			display: inline-flex;
		}
	}
	@media (width >= 992px) {
		.fullwidth-title {
			line-height: 1;
		}
	}
	@media (width >= 1200px) {
		.fullwidth-title {
			font-size: 9.35vw;
		}
	}
	@media (width >= 1400px) {
		--header-padding: 4.75rem;
		.fullwidth-title {
			font-size: 9.4vw;
		}
	}
}

.amenities-section {
	padding: 3.5rem 0;
}


.proyecto-section {
	padding: 3.5rem 0;

	.custom-letter {
		position: relative;
		display: flex;
		align-items: center;
		margin-bottom: 2rem;
	
		.letter {
			display: inline-flex;
			width: 100%;
			height: 100%;
			font-size: 20rem;
			font-weight: 700;
			line-height: 0.7;
			color: transparent;
			-webkit-text-stroke: 2px var(--color-neutral-2);
		}
	
		.title {
			position: absolute;
			display: flex;
			flex-direction: column;
			font-size: var(--text-6xl);
			padding-top: 5rem;
			padding-left: 5rem;
	
			span:last-child {
				font-size: var(--text-8xl);
			}
		}
	}

	@media (width >= 576px) {
		.letter {
			font-size: 25rem;
			-webkit-text-stroke: 1px var(--color-neutral-2);
		}
		.title {
			font-size: var(--text-8xl);
			padding-top: 4rem;
			padding-left: 7rem;
			span:last-child {
				font-size: var(--text-9xl);
			}
		}
	}
}


.video-section {
	padding: 3.5rem 0;
	.open-modal {
		scale: 0.9;
		border: none;
		background: none;
		color: var(--color-white);
		outline: none;
		transition: all 0.15s;

		&:hover,
		&:focus-visible {
			color: var(--color-primary);
			scale: 1;
		}
	}
}


.location-section {
	padding: 4rem 0;
	overflow-x: hidden;

	.title {
		font-size: var(--text-5xl);
	}

	.leaflet-tile-pane {
		filter: grayscale(100%) invert(1);
	}
	.leaflet-bottom.leaflet-right {
		display: none;
	}
	.leaflet-top, .leaflet-bottom {
		z-index: 998;
	}
	
	@media (width >= 768px) {
		.title {
			font-size: var(--text-6xl);
		}
	}

	@media (width >= 1200px) {
		.title {
			font-size: var(--text-7xl);
		}
	}

	@media (width >= 1400px) {
		.title {
			font-size: 80px;
		}
	}
}


.cta-section {
	position: relative;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: end;
	padding: 6rem 0;
	margin: 4rem 0;
	min-height: 40rem;

	.bg-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.bg-overlay {
		position: absolute;
		inset: 0;
		background-color: rgba(0, 0, 0, 0.4);
	}
	
	.title {
		font-size: var(--text-4xl);
		text-wrap: balance;
		margin-bottom: 3rem;
	}

	@media (width >= 768px) {
		.title {
			font-size: var(--text-5xl);
		}
	}

	@media (width >= 1200px) {
		min-height: 48rem;

		.title {
			font-size: var(--text-7xl);
		}
	}
}

.beneficios-section {
	position: relative;
	padding: 4rem 0;

	.bg-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.content-col {
		padding: 6rem 1rem 9rem;
		background-color: oklch(from var(--color-black) l c h / 0.7);
	}

	.title {
		font-size: var(--text-5xl);
	}

	.beneficios-container {
		position: relative;
		padding-top: 4rem;
		margin-top: -8rem;
	}

	@media (width >= 1200px) {
		.empty-col {
			min-height: 46rem;
		}
		.content-col {
			padding: 12rem 4rem 16rem;
		}
		.title {
			font-size: var(--text-7xl);
		}
		.beneficios-container {
			position: relative;
			margin-top: -12rem;
		}
	}
}


.contact-section {
	padding: 6rem 0;

	.title {
		font-size: var(--text-5xl);
		text-align: center;
	}

	.iconboxes-row {
		order: 1;
	}

	.contact-form-container {
		padding: 2rem;
		background-color: var(--color-neutral-3);
		border-radius: 0.625rem;
	}
	
	@media (width >= 768px) {
		.title {
			font-size: var(--text-7xl);
		}

		.contact-form-container {
			padding: 3rem;
		}
	}

	@media (width >= 992px) {
		.iconboxes-row {
			order: 0;
		}
	}
}