html {
	scroll-behavior: smooth;
}

.nav-link::after{
	position: absolute;
	content: "";
	width: 100%;
	height: 3px;
	top: 100%;
	left: 0;
	background: #fff;
	transition: transform 0.5s;
	transform: scaleX(0);
	transform-origin: right;
  }

  .nav-link-dark::after{
	background: #06B6D4;
  }
  .nav-link:hover::after {
	  transform: scaleX(1);
	  transform-origin: left;
	}
.nav-link-brown::after{
	background: #B98036;
	}

.slide-1, .post-section{
    background: url('/assets/img/home_slide_1.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.slide-2{
    background: url('/assets/img/home_slide_2.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.slide-3{
    background: url('/assets/img/home_slide_3.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.slide-1sr, .post-section{
    background: url('/assets/img/home_slide_1-sr.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.slide-2sr{
    background: url('/assets/img/home_slide_2-sr.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.slide-3sr{
    background: url('/assets/img/home_slide_3-sr.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}


.cliqueable {
	cursor: pointer;
}
.bg-header {
	background-image: url('/assets/img/bg-header/bg-home.png');
	background-color: rgba(0, 0, 0, 0.3);
	background-size: cover;
	background-position: center;
}

.bg-header-sr {
	background-image: url('/assets/img/bg-header/bg-nuestras-casas.jpg');
	background-color: rgba(0, 0, 0, 0.3);
	background-size: cover;
	background-position: center;
	background-blend-mode: multiply;
}

.bg-footer {
	background-image: url('/assets/img/bg-footer.png');
	background-color: rgba(0, 0, 0, 0.3);
	background-size: cover;
	background-position: center;
}

.bg-footer-sr {
	background-image: url('/assets/img/bg-footer-sr.png');
	background-color: rgba(0, 0, 0, 0.3);
	background-size: cover;
	background-position: center;
}

.bg-contacto {
	background-image: url('/assets/img/bg-contacto.jpg');
	background-blend-mode: multiply;
	background-color: rgba(14, 16, 144, 0.5);
	background-size: cover;
	background-position: center;
}

.bg-footer-contacto {
	background-color: rgba(0, 0, 0, 0.4);
}

.icon {
	color: aqua;
}

.icon:hover {
	color: blue;
}

/*Galeria Imagenes Obras*/
.carousel-row--img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	cursor: pointer;
	transition: 0.4s;
}
.carousel-row--img img:hover {
	box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.2),
		0 12px 20px 0 rgba(0, 0, 0, 0.19);
}

.column-box {
	white-space: nowrap;
	background-color: transparent;
	width: 100%;
	overflow: hidden;
}
.column-box .column {
	width: 25%;
	display: inline-block;
	transition: all 1s;
}
.column-box .column img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	cursor: pointer;
}

/* The Modal */
.modal-artistas {
	display: none;
	position: fixed;
	padding: 50px 0;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: rgba(0, 0, 0, 0.8);
}
.modal-artistas.no-select {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.modal-artistas-content {
	margin: auto;
	width: 75%;
	overflow: hidden;
}
@media only screen and (max-width: 37.5em) {
	.modal-artistas-content {
		width: 90%;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
}

@keyframes anime {
	0% {
		opacity: 0;
		transform: scale(0.9);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}

.my-slides {
	display: none;
	height: 60vh;
	transition: all 2s;
	overflow: hidden;
	animation: anime 0.8s ease-in;
	position: relative;
}
@media only screen and (max-width: 56.25em) {
	.my-slides {
		height: 70vh;
	}
}
@media only screen and (max-width: 37.5em) {
	.my-slides {
		height: 60vh;
	}
}
.my-slides img {
	object-fit: contain;
	width: 100%;
	height: 100%;
}
.my-slides--number {
	color: #f2f2f2;
	font-size: 12px;
	padding: 8px 12px;
	position: absolute;
	top: 0;
}

.demo {
	opacity: 0.5;
	transition: all 0.4s;
}
.demo.active,
.demo:hover {
	opacity: 1;
}

/* Caption text */
.caption-container {
	text-align: center;
	background-color: transparent;
	padding: 6px 16px;
	color: white;
}

/* The Close Button */
.close {
	color: white;
	position: absolute;
	top: 10px;
	right: 25px;
	font-size: 35px;
	font-weight: bold;
}
.close:hover,
.close:focus {
	color: #999;
	text-decoration: none;
	cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
	cursor: pointer;
	position: fixed;
	top: 50%;
	width: auto;
	padding: 16px;
	color: white;
	font-weight: bold;
	font-size: 50px;
	transition: 0.6s ease;
	transform: translateY(-50%);
}
@media only screen and (max-width: 37.5em) {
	.prev,
	.next {
		position: fixed;
		top: 95%;
		padding: 10px;
		font-size: 40px;
		transform: translateY(-50%);
	}
}
.prev:active,
.next:active {
	font-size: 30px;
}

/* Position the "next button" to the right */
.next {
	right: 0;
}

.prev {
	left: 0;
}
@media only screen and (max-width: 37.5em) {
	.prev {
		left: 80%;
	}
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
	background-color: rgba(255, 255, 255, 0.1);
}
@media only screen and (max-width: 37.5em) {
	.prev:hover,
	.next:hover {
		background-color: transparent;
	}
}


/*

	MODAL

*/
.modal {
	transition: opacity 0.25s ease;
  }
body.modal-active {
	overflow-x: hidden;
	overflow-y: visible !important;
}

/*

		whatsapp button	

*/

.float{
	position:fixed;
	width:60px;
	height:60px;
	bottom:40px;
	right:40px;
	color:#FFF;
	border-radius:50px;
	text-align:center;
	font-size:30px;
	z-index:100;
}

/* Keep the floating WhatsApp button consistent across every page. */
a[href^="https://wa.me/"][style*="position: fixed"],
a[href^="https://wa.me/"].float {
	background: #25D366 !important;
}

a[href^="https://wa.me/"][style*="position: fixed"] svg,
a[href^="https://wa.me/"].float svg {
	fill: #fff;
}

@media (min-width: 640px) {
    table {
      display: inline-table !important;
    }

    thead tr:not(:first-child) {
      display: none;
    }
  }

  td:not(:last-child) {
    border-bottom: 0;
  }

  th:not(:last-child) {
    border-bottom: 2px solid rgba(0, 0, 0, .1);
  }

/*

	REDESIGN SYSTEM

*/

:root {
	--legacy-cyan: #06b6d4;
	--legacy-cyan-dark: #0e7490;
	--legacy-brown: #b98036;
	--legacy-brown-dark: #784c12;
	--legacy-ink: #1f2a2e;
	--legacy-muted: #65747b;
	--legacy-paper: #f6f1e9;
	--legacy-sand: #efe5d6;
	--legacy-white: #fffdf8;
	--legacy-radius-sm: 14px;
	--legacy-radius-md: 22px;
	--legacy-radius-lg: 34px;
	--legacy-shadow-soft: 0 18px 55px rgba(31, 42, 46, 0.12);
	--legacy-shadow-card: 0 24px 70px rgba(31, 42, 46, 0.16);
}

html {
	background: var(--legacy-paper);
}

body {
	background:
		radial-gradient(circle at top left, rgba(6, 182, 212, 0.12), transparent 30rem),
		linear-gradient(180deg, #fffdf8 0%, var(--legacy-paper) 42%, #fffdf8 100%) !important;
	color: var(--legacy-ink) !important;
	font-feature-settings: "liga" 1, "kern" 1;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

::selection {
	background: rgba(6, 182, 212, 0.22);
	color: var(--legacy-ink);
}

body:has(.text-brown) {
	background:
		radial-gradient(circle at top left, rgba(185, 128, 54, 0.16), transparent 30rem),
		linear-gradient(180deg, #fffdf8 0%, var(--legacy-paper) 42%, #fffdf8 100%) !important;
}

.responsive {
	max-width: min(1120px, calc(100% - 32px));
}

@media (min-width: 1280px) {
	.responsive {
		max-width: min(1180px, calc(100% - 72px));
	}
}

p,
li,
label,
input,
textarea,
select {
	color: inherit;
}

p {
	letter-spacing: -0.01em;
}

.h3 {
	font-size: clamp(0.72rem, 0.68rem + 0.2vw, 0.88rem) !important;
	font-weight: 800 !important;
	letter-spacing: 0.28em !important;
	line-height: 1.35 !important;
	margin-bottom: 0.7rem;
	text-wrap: balance;
}

.h2 {
	font-size: clamp(2.15rem, 1.55rem + 2.2vw, 4.25rem) !important;
	font-weight: 700 !important;
	letter-spacing: -0.045em;
	line-height: 0.98 !important;
	margin-top: 1rem !important;
	text-wrap: balance;
}

section:not(#top):not(#footer) {
	position: relative;
}

section:not(#top):not(#footer).my-20,
section:not(#top):not(#footer) .my-20 {
	margin-top: clamp(4rem, 8vw, 7.5rem) !important;
	margin-bottom: clamp(4rem, 8vw, 7.5rem) !important;
}

/* Header and navigation */
#top > .absolute {
	padding-top: 1rem;
}

#top > .absolute > div:first-child {
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	background: rgba(16, 24, 28, 0.28);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	box-shadow: 0 18px 45px rgba(0, 0, 0, 0.14);
	padding-left: 1.25rem !important;
	padding-right: 1.25rem !important;
}

#top nav {
	border-radius: var(--legacy-radius-md);
	background: transparent !important;
	box-shadow: var(--legacy-shadow-soft) !important;
	overflow: visible;
}

#top nav > div:first-child {
	border: 1px solid rgba(255, 255, 255, 0.78);
	border-radius: var(--legacy-radius-md);
	background: rgba(255, 253, 248, 0.94) !important;
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
}

#top nav a,
#top nav button {
	letter-spacing: 0.02em;
}

#top nav .nav-link {
	font-weight: 800 !important;
	text-transform: uppercase;
	font-size: 0.72rem !important;
}

#top nav .mobile-menu {
	left: 0;
	right: 0;
	top: calc(100% + 0.35rem);
}

#top nav .mobile-menu > div {
	border: 1px solid rgba(255, 255, 255, 0.8);
	border-radius: 0 0 var(--legacy-radius-md) var(--legacy-radius-md);
	background: rgba(255, 253, 248, 0.98) !important;
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
	box-shadow: var(--legacy-shadow-soft);
}

.mobile-menu-btn {
	border-radius: 999px !important;
	background: rgba(6, 182, 212, 0.1) !important;
}

.text-brown.mobile-menu-btn,
body:has(.nav-link-brown) .mobile-menu-btn {
	background: rgba(185, 128, 54, 0.12) !important;
}

/* Hero */
#top .h-screen,
#top .h-56 {
	min-height: min(760px, 100svh);
}

#top .h-56 {
	min-height: clamp(320px, 48vw, 620px);
}

#top .swiper-slide,
.bg-header,
.bg-header-sr,
.bg-contacto {
	background-blend-mode: multiply;
}

.slide-1,
.slide-2,
.slide-3,
.slide-1sr,
.slide-2sr,
.slide-3sr,
.bg-header,
.bg-header-sr,
.bg-contacto {
	background-color: rgba(14, 24, 28, 0.46);
}

#top .swiper-container::after,
.bg-header::after,
.bg-header-sr::after,
.bg-contacto::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0.38) 0%, rgba(0, 0, 0, 0.04) 34%, rgba(0, 0, 0, 0.42) 100%),
		radial-gradient(circle at 20% 42%, rgba(255, 253, 248, 0.18), transparent 32rem);
}

#top .swiper-container > .absolute,
#top .bg-header > div,
#top .bg-header-sr > div,
#top .bg-contacto > div {
	z-index: 2;
}

#top h1:not(.font-palatino) {
	letter-spacing: 0.32em !important;
	font-size: clamp(0.75rem, 0.7rem + 0.25vw, 1rem) !important;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

#top .font-palatino,
#top h2.font-palatino,
#top h1.font-palatino {
	font-size: clamp(3.35rem, 2.3rem + 5.4vw, 8rem) !important;
	font-weight: 700 !important;
	letter-spacing: -0.07em;
	line-height: 0.9 !important;
	max-width: 13ch;
	margin-left: auto;
	margin-right: auto;
	text-shadow: 0 20px 55px rgba(0, 0, 0, 0.42);
}

#top p.text-base.font-semibold.uppercase {
	letter-spacing: 0.24em;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

/* Buttons and booking CTAs */
a.bg-cyan,
button.bg-cyan,
a.bg-brown,
button.bg-brown,
.modal-open.bg-cyan,
.modal-open.bg-brown,
a.hover\:bg-darkcyan,
button.hover\:bg-darkcyan,
a.hover\:bg-darkbrown,
button.hover\:bg-darkbrown {
	border-radius: 999px !important;
	font-weight: 800 !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	box-shadow: 0 16px 36px rgba(6, 182, 212, 0.24);
	transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease !important;
}

a.bg-brown,
button.bg-brown,
.modal-open.bg-brown,
a.hover\:bg-darkbrown,
button.hover\:bg-darkbrown {
	box-shadow: 0 16px 36px rgba(185, 128, 54, 0.24);
}

a.bg-cyan:hover,
button.bg-cyan:hover,
a.bg-brown:hover,
button.bg-brown:hover,
.modal-open:hover {
	transform: translateY(-2px);
	box-shadow: var(--legacy-shadow-card);
}

section.relative.z-50 > div.bg-white,
section.mt-10 > div.bg-white {
	border: 1px solid rgba(255, 255, 255, 0.86);
	border-radius: var(--legacy-radius-lg) !important;
	background: rgba(255, 253, 248, 0.96) !important;
	box-shadow: var(--legacy-shadow-card) !important;
}

section.relative.z-50 h3,
section.mt-10 h3 {
	color: var(--legacy-ink);
	font-weight: 900;
	letter-spacing: 0.18em;
	font-size: 0.82rem;
	text-transform: uppercase;
}

/* Cards, lists, galleries */
.card-service,
.card-cabana {
	border: 1px solid rgba(31, 42, 46, 0.08) !important;
	border-radius: var(--legacy-radius-md);
	background: rgba(255, 253, 248, 0.78);
	box-shadow: 0 12px 42px rgba(31, 42, 46, 0.08);
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.card-service:hover,
.card-cabana:hover {
	transform: translateY(-4px);
	box-shadow: var(--legacy-shadow-card) !important;
	border-color: rgba(6, 182, 212, 0.26) !important;
}

body:has(.text-brown) .card-service:hover,
body:has(.text-brown) .card-cabana:hover {
	border-color: rgba(185, 128, 54, 0.28) !important;
}

.card-service {
	justify-content: center;
	min-height: 170px;
	padding: 2rem !important;
}

.card-service img {
	filter: drop-shadow(0 14px 20px rgba(31, 42, 46, 0.12));
}

.card-cabana {
	padding-bottom: 2rem !important;
	overflow: hidden;
}

.card-cabana img,
.carousel-row--img img,
#galeria .swiper-slide img,
picture img,
#ubicacion img,
#testimonios img:not([src*="svg"]) {
	border-radius: var(--legacy-radius-sm);
}

.card-cabana > img,
.card-cabana > .grid > div:first-child img,
.card-cabana img.shadow-lg {
	border-radius: var(--legacy-radius-md) var(--legacy-radius-md) 0 0;
	transition: transform 0.45s ease;
}

.card-cabana:hover > img,
.card-cabana:hover > .grid > div:first-child img,
.card-cabana:hover img.shadow-lg {
	transform: scale(1.025);
}

#galeria .swiper-container {
	border-radius: var(--legacy-radius-lg);
	background: rgba(255, 253, 248, 0.74);
	box-shadow: var(--legacy-shadow-soft);
	overflow: hidden;
}

#galeria .swiper-slide img {
	width: 100%;
	max-height: 68vh;
	object-fit: cover;
}

.carousel-row--img {
	border-radius: var(--legacy-radius-md);
	overflow: hidden;
	box-shadow: 0 18px 44px rgba(31, 42, 46, 0.1);
}

/* Content blocks */
#info picture img,
#actividades picture img,
#actividades > div img,
#ubicacion img {
	box-shadow: var(--legacy-shadow-soft) !important;
}

#info p,
#actividades p,
#cabanas p,
#nuestras-casas p,
#testimonios p {
	color: var(--legacy-muted);
}

#testimonios .space-y-5 {
	border: 1px solid rgba(31, 42, 46, 0.08);
	border-radius: var(--legacy-radius-md);
	background: rgba(255, 253, 248, 0.72);
	padding: 2rem;
	box-shadow: 0 14px 42px rgba(31, 42, 46, 0.07);
}

#ubicacion a {
	border-radius: var(--legacy-radius-lg);
	overflow: hidden;
}

/* Forms */
input,
textarea,
select {
	border-radius: 12px !important;
	border: 1px solid rgba(31, 42, 46, 0.16) !important;
	background: rgba(255, 253, 248, 0.96) !important;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--legacy-cyan) !important;
	box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.16) !important;
}

body:has(.text-brown) input:focus,
body:has(.text-brown) textarea:focus,
body:has(.text-brown) select:focus {
	border-color: var(--legacy-brown) !important;
	box-shadow: 0 0 0 4px rgba(185, 128, 54, 0.17) !important;
}

.modal-container,
#formulario .bg-white,
.bg-footer-contacto + * {
	border-radius: var(--legacy-radius-md) !important;
}

/* Footer and floating actions */
.bg-footer,
.bg-footer-sr,
.bg-footer-contacto {
	position: relative;
	background-blend-mode: multiply;
	background-color: rgba(12, 18, 20, 0.72) !important;
}

.bg-footer::before,
.bg-footer-sr::before,
.bg-footer-contacto::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(135deg, rgba(6, 182, 212, 0.18), transparent 42%), rgba(0, 0, 0, 0.08);
}

.bg-footer-sr::before,
body:has(.nav-link-brown) .bg-footer::before {
	background: linear-gradient(135deg, rgba(185, 128, 54, 0.2), transparent 42%), rgba(0, 0, 0, 0.08);
}

.bg-footer > div,
.bg-footer-sr > div,
.bg-footer-contacto > div {
	position: relative;
	z-index: 1;
}

.float {
	width: 64px;
	height: 64px;
	bottom: 28px;
	right: 28px;
	border: 1px solid rgba(255, 255, 255, 0.36);
	border-radius: 999px !important;
	box-shadow: 0 22px 45px rgba(0, 0, 0, 0.28) !important;
}

.float:hover {
	transform: translateY(-3px) scale(1.03) !important;
}

/* Responsive refinements */
@media (max-width: 1023px) {
	#top > .absolute {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	#top nav {
		width: min(100%, 680px) !important;
	}

	#top nav > div:first-child {
		border-radius: 999px;
	}

	#top .font-palatino,
	#top h2.font-palatino,
	#top h1.font-palatino {
		max-width: 10ch;
	}

	section.relative.z-50 > div.bg-white,
	section.mt-10 > div.bg-white {
		width: min(92%, 680px) !important;
		padding: 1.35rem !important;
	}
}

@media (max-width: 767px) {
	body {
		font-size: 0.98rem;
	}

	.responsive {
		max-width: calc(100% - 28px);
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.h2 {
		font-size: clamp(2rem, 11vw, 3.2rem) !important;
	}

	.h3 {
		letter-spacing: 0.2em !important;
	}

	#top .h-screen {
		min-height: 720px;
	}

	#top .font-palatino,
	#top h2.font-palatino,
	#top h1.font-palatino {
		font-size: clamp(3.1rem, 15vw, 5rem) !important;
	}

	.card-service,
	.card-cabana,
	#testimonios .space-y-5 {
		border-radius: 20px;
	}

	.card-service {
		min-height: 135px;
		padding: 1.35rem !important;
	}

	.float {
		width: 56px;
		height: 56px;
		bottom: 18px;
		right: 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	::before,
	::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}