/* ==========================================================================

   SURF ITACARÉ — LUXURY BOUTIQUE & RESORT STYLING

   Concept: Barefoot Luxury, High Society, Ultra-Private Villa Buyout

   Brand Accent: #848867

   Wide & Immersive Responsive Architecture

   ========================================================================== */



/* Prevent horizontal scrollbars globally & enforce 100% full width without breaking position: sticky */
html {
	overflow-x: clip;
}

body {
	overflow-x: clip;
	overflow-y: visible;
	width: 100%;
	margin: 0;
	padding: 0;
}



/* Override Hello Elementor theme.css max-width constraint on site-main */

body .site-main,

body:not([class*="elementor-page-"]) .site-main,

main#primary,

#primary,

.site-main {

	max-width: 100% !important;

	width: 100% !important;

	margin: 0 !important;

	padding: 0 !important;

	margin-inline-start: 0 !important;

	margin-inline-end: 0 !important;

	padding-inline-start: 0 !important;

	padding-inline-end: 0 !important;

}



/* Header & Navigation */

.surf-header {

	position: fixed;

	top: 0;

	left: 0;

	right: 0;

	z-index: 1000;

	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

	padding: 26px 0;

	background: transparent;

}



.surf-header.scrolled {

	padding: 14px 0;

	background: rgba(251, 249, 245, 0.96);

	backdrop-filter: blur(18px);

	-webkit-backdrop-filter: blur(18px);

	border-bottom: 1px solid rgba(58, 68, 40, 0.15);

	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.04);

}



.surf-header-container {

	max-width: 1720px;

	width: 93%;

	margin: 0 auto;

	display: grid;

	grid-template-columns: 1fr auto 1fr;

	align-items: center;

}



/* Logo handling — left extreme */

.surf-logo-link {

	display: inline-flex;

	align-items: center;

	text-decoration: none;

	height: 52px;

	justify-self: start;

}



.surf-logo-img {

	height: 52px;

	width: auto;

	object-fit: contain;

	transition: opacity 0.3s ease;

}



.surf-logo-link:hover .surf-logo-img {

	transform: scale(1.05);

}



/* Navigation Container — centered */

.surf-nav {

	justify-self: center;

}



/* Nav links */

.surf-nav-menu {

	display: flex;

	align-items: center;

	justify-content: center;

	gap: 32px;

	list-style: none;

	margin: 0;

	padding: 0;

}



.surf-nav-link {

	font-family: var(--surf-font-sans);

	font-size: 0.86rem;

	font-weight: 500;

	letter-spacing: 0.08em;

	text-transform: uppercase;

	text-decoration: none;

	color: #ffffff;

	position: relative;

	transition: color 0.3s ease;

	padding: 8px 0;

	display: inline-flex;

	align-items: center;

}



.surf-nav-link:hover,

.surf-nav-link:focus,

.surf-nav-link:active,

.surf-nav a:hover,

.surf-nav a:focus,

.surf-nav a:active,

.surf-nav-item-dropdown:hover > .surf-nav-link {

	color: var(--surf-accent, #848867) !important;

}



.surf-nav-link:hover .surf-nav-chevron,

.surf-nav-item-dropdown:hover .surf-nav-chevron {

	color: var(--surf-accent, #848867) !important;

}



.surf-nav-link::after {

	content: '';

	position: absolute;

	bottom: 0;

	left: 0;

	width: 0;

	height: 1.5px;

	background-color: var(--surf-accent, #848867);

	transition: width 0.3s ease;

}



.surf-nav-link:hover::after {

	width: 100%;

}



.surf-header.scrolled .surf-nav-link {

	color: var(--surf-dark);

}



.surf-header.scrolled .surf-nav-link:hover,

.surf-header.scrolled .surf-nav-link:focus,

.surf-header.scrolled .surf-nav-link:active,

.surf-header.scrolled .surf-nav-item-dropdown:hover > .surf-nav-link {

	color: var(--surf-accent, #848867) !important;

}



/* Nav Item Dropdown */

.surf-nav-item-dropdown {

	position: relative;

}



.surf-nav-dropdown-toggle {

	gap: 6px;

}



.surf-nav-chevron {

	transition: transform 0.25s ease;

}



.surf-nav-item-dropdown:hover .surf-nav-chevron {

	transform: rotate(180deg);

}



.surf-nav-submenu {

	position: absolute;

	top: 100%;

	left: 50%;

	transform: translateX(-50%) translateY(12px);

	min-width: 250px;

	background: var(--surf-cream, #f7f2e8);

	border: 1px solid var(--surf-sand-border, #e6dfd5);

	border-radius: 8px;

	box-shadow: 0 16px 36px rgba(18, 18, 18, 0.12);

	padding: 8px;

	list-style: none;

	opacity: 0;

	visibility: hidden;

	pointer-events: none;

	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);

	z-index: 1000;

}



.surf-nav-submenu::before {

	content: '';

	position: absolute;

	top: -14px;

	left: 0;

	right: 0;

	height: 16px;

}



.surf-nav-item-dropdown:hover .surf-nav-submenu,

.surf-nav-item-dropdown:focus-within .surf-nav-submenu {

	opacity: 1;

	visibility: visible;

	pointer-events: auto;

	transform: translateX(-50%) translateY(4px);

}



.surf-nav-submenu li {

	margin: 0;

	padding: 0;

}



.surf-nav-sublink {

	display: block;

	padding: 10px 14px;

	border-radius: 6px;

	text-decoration: none;

	transition: all 0.2s ease;

}



.surf-nav-sublink .sub-title {

	display: block;

	font-family: var(--surf-font-sans);

	font-size: 0.86rem;

	font-weight: 600;

	color: var(--surf-dark, #121212);

	text-transform: uppercase;

	letter-spacing: 0.05em;

	transition: color 0.2s ease;

}



.surf-nav-sublink .sub-desc {

	display: block;

	font-size: 0.75rem;

	color: #5e6649;

	margin-top: 2px;

	text-transform: none;

	letter-spacing: 0;

}



.surf-nav-sublink:hover {

	background-color: var(--surf-sand-light, #faf8f5);

}



.surf-nav-sublink:hover .sub-title,

.surf-nav-sublink:focus .sub-title {

	color: var(--surf-accent, #848867) !important;

}



/* Header Actions (Language switch & mobile burger) — right extreme */

.surf-header-action-wrap {

	display: flex;

	align-items: center;

	gap: 16px;

	justify-self: end;

}



.surf-header-cta {

	padding: 12px 28px;

	font-size: 0.8rem;

	letter-spacing: 0.14em;

}



/* Burger Mobile Button */

.surf-burger {

	display: none;

	background: none;

	border: none;

	cursor: pointer;

	padding: 10px;

	flex-direction: column;

	gap: 6px;

	z-index: 1002;

}



.surf-burger span {

	display: block;

	width: 28px;

	height: 2px;

	background-color: var(--surf-cream, #f7f2e8);

	transition: all 0.3s ease;

}



.surf-header.scrolled .surf-burger span {

	background-color: var(--surf-dark);

}



/* Mobile Drawer Menu */

.surf-mobile-drawer {

	position: fixed;

	top: 0;

	right: -100%;

	width: 100%;

	height: 100vh;

	background-color: var(--surf-light);

	z-index: 1001;

	display: flex;

	flex-direction: column;

	justify-content: center;

	align-items: center;

	padding: 40px 24px;

	transition: right 0.45s cubic-bezier(0.16, 1, 0.3, 1);

	box-shadow: -10px 0 30px rgba(0,0,0,0.12);

}



.surf-mobile-drawer.open {

	right: 0;

}



.surf-mobile-nav {

	list-style: none;

	padding: 0;

	margin: 0;

	text-align: center;

	display: flex;

	flex-direction: column;

	gap: 30px;

}



.surf-mobile-nav a {

	font-family: var(--surf-font-serif);

	font-size: clamp(1.8rem, 5vw, 2.4rem);

	color: var(--surf-dark);

	text-decoration: none;

	transition: color 0.3s ease;

}



.surf-mobile-nav a:hover,

.surf-mobile-nav a:focus {

	color: var(--surf-accent, #848867) !important;

}



/* Main Container & Sections — WIDE ARCHITECTURE */

.surf-container {

	max-width: 1720px;

	width: 93%;

	margin: 0 auto;

	padding: 0 20px;

	box-sizing: border-box;

}



.surf-section {
	padding: 130px 0;
	position: relative;
	background-color: var(--surf-cream, #f7f2e8);
}



.surf-section-sand {

	background-color: var(--surf-sand);

}



.surf-section-dark {

	background-color: var(--surf-dark);

	color: #ffffff;

}



.surf-section-dark h2, 

.surf-section-dark h3, 

.surf-section-dark p {

	color: #ffffff;

}



/* Taglines & Section Headers */

.surf-section-intro {

	text-align: center;

	max-width: 1100px;

	margin: 0 auto 64px;

}



.surf-eyebrow {

	display: inline-block;

	font-family: var(--surf-font-sans);

	font-size: 0.82rem;

	font-weight: 600;

	letter-spacing: 0.22em;

	text-transform: uppercase;

	color: var(--surf-accent);

	margin-bottom: 18px;

	position: relative;

}



.surf-title {

	font-size: clamp(2.4rem, 4.5vw, 4.2rem);

	font-weight: 400;

	line-height: 1.12;

	margin-bottom: 24px;

	letter-spacing: -0.02em;

}



.surf-subtitle {

	font-size: clamp(1.05rem, 1.4vw, 1.25rem);

	color: var(--surf-text-muted);

	line-height: 1.85;

	max-width: 900px;

	margin: 0 auto;

}



/* HERO SECTION — 100% FULL WIDTH BACKGROUND */

.surf-hero {

	width: 100% !important;

	max-width: 100% !important;

	min-height: 100vh;

	position: relative;

	display: flex;

	align-items: center;

	justify-content: center;

	color: #ffffff;

	padding: 160px 24px 100px;

	overflow: hidden;

	box-sizing: border-box;

	margin: 0 !important;

}



.surf-hero-bg {

	position: absolute;

	top: 0;

	left: 0;

	right: 0;

	bottom: 0;

	width: 100% !important;

	height: 100% !important;

	min-width: 100% !important;

	min-height: 100% !important;

	object-fit: cover !important;

	object-position: center !important;

	z-index: 1;

	transform: scale(1.02);

}



.surf-hero-overlay {

	position: absolute;

	top: 0;

	left: 0;

	right: 0;

	bottom: 0;

	width: 100% !important;

	height: 100% !important;

	background: linear-gradient(180deg, rgba(14, 14, 14, 0.45) 0%, rgba(14, 14, 14, 0.70) 100%);

	z-index: 2;

}



.surf-hero-content {

	position: relative;

	z-index: 3;

	text-align: center;

	max-width: 1240px;

	width: 100%;

	margin: 0 auto;

}



.surf-hero-eyebrow {

	display: inline-flex;

	align-items: center;

	gap: 12px;

	padding: 10px 24px;

	border: 1px solid rgba(255, 255, 255, 0.35);

	border-radius: 50px;

	background: rgba(255, 255, 255, 0.08);

	backdrop-filter: blur(12px);

	font-size: clamp(0.72rem, 1vw, 0.85rem);

	letter-spacing: 0.22em;

	text-transform: uppercase;

	margin-bottom: 32px;

	color: #ffffff;

}



.surf-hero-eyebrow span.dot {

	width: 7px;

	height: 7px;

	border-radius: 50%;

	background-color: var(--surf-accent);

}



.surf-hero-title {

	font-family: var(--surf-font-serif);

	font-size: clamp(2.8rem, 6.2vw, 5.5rem);

	font-weight: 300;

	line-height: 1.08;

	margin-bottom: 28px;

	color: #ffffff;

	letter-spacing: -0.025em;

}



.surf-hero-title-italic {

	font-style: italic;

	font-weight: 300;

	color: #f5ede4;

}



.surf-hero-lead {

	font-size: clamp(1.08rem, 1.8vw, 1.35rem);

	color: rgba(255, 255, 255, 0.9);

	line-height: 1.75;

	max-width: 860px;

	margin: 0 auto 48px;

	font-weight: 300;

}



.surf-hero-actions {

	display: flex;

	gap: 20px;

	justify-content: center;

	align-items: center;

	flex-wrap: wrap;

}



/* Feature Grid — 2 Rows x 2 Columns */

.surf-grid-pillars {

	display: grid;

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

	gap: 32px;

	max-width: 1240px;

	margin: 40px auto 0;

}



.surf-card {
	background: var(--surf-cream, #f7f2e8);
	box-shadow: 0 6px 24px rgba(0,0,0,0.04);

	border: 1px solid var(--surf-sand-border);

	padding: 44px 32px;

	border-radius: var(--surf-radius);

	transition: var(--surf-transition);

	display: flex;

	flex-direction: column;

	justify-content: space-between;

}



.surf-card:hover {

	transform: translateY(-8px);

	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.06);

	border-color: var(--surf-accent);

}



.surf-card-icon {

	width: 56px;

	height: 56px;

	border-radius: 50%;

	background: var(--surf-accent-light);

	color: var(--surf-accent);

	display: flex;

	align-items: center;

	justify-content: center;

	margin-bottom: 24px;

	font-size: 1.5rem;

}



.surf-card h3 {

	font-size: 1.65rem;

	margin-bottom: 16px;

	color: var(--surf-dark);

}



.surf-card p {

	color: var(--surf-text-muted);

	font-size: 1rem;

	line-height: 1.8;

	margin: 0 0 24px;

}



.surf-card-footer {

	margin-top: auto;

}



/* Split Showcases (Villa & Surf Coaching) */

.surf-split-showcase {

	display: grid;

	grid-template-columns: 1fr 1.25fr;

	gap: 80px;

	align-items: center;

}



.surf-split-reverse {

	grid-template-columns: 1fr 1.15fr;

}



/* Coaching Dual Photos Layout */

.surf-coaching-dual-photos {

	display: flex;

	flex-direction: column;

	gap: 20px;

}



.coaching-photo-item {

	position: relative;

	overflow: hidden;

	border-radius: var(--surf-radius);

	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);

}



.coaching-photo-item img {

	width: 100%;

	height: 100%;

	object-fit: cover;

	display: block;

	transition: transform 0.6s ease;

}



/* Foto 1: acción en el mar */

.coaching-photo-1 {

	height: 330px;

}

.coaching-photo-1 img {

	object-position: center 35%;

}



/* Foto 2: James Mathina (vertical) — cara y torso */

.coaching-photo-2 {

	height: 270px;

}

.coaching-photo-2 img {

	object-position: center 15%;

}



.coaching-photo-item:hover img {

	transform: scale(1.03);

}



.surf-split-lead {

	color: var(--surf-text-muted);

	font-size: 1.12rem;

	line-height: 1.85;

	margin-bottom: 28px;

}



.surf-feature-list {

	list-style: none;

	padding: 0;

	margin: 0 0 36px;

	line-height: 2.3;

	font-size: 1.05rem;

	color: var(--surf-dark);

}



/* Gallery Mosaic for Vila Jubarte */

.surf-gallery-mosaic {

	display: grid;

	grid-template-columns: 1fr 1fr;

	gap: 20px;

}



.mosaic-item {

	overflow: hidden;

	border-radius: var(--surf-radius);

	box-shadow: 0 12px 30px rgba(0,0,0,0.06);

}



.mosaic-item img {

	width: 100%;

	height: 100%;

	object-fit: cover;

	display: block;

	transition: transform 0.6s ease;

}



.mosaic-item:hover img {

	transform: scale(1.04);

}



.mosaic-item-1, .mosaic-item-2 {

	height: 280px;

}



.mosaic-item-3 {

	grid-column: span 2;

	height: 320px;

}



.surf-feature-img {

	width: 100%;

	height: 600px;

	object-fit: cover;

	border-radius: var(--surf-radius);

	box-shadow: 0 24px 50px rgba(0,0,0,0.09);

}



/* Levels Stack */

.surf-levels-stack {

	display: flex;

	flex-direction: column;

	gap: 20px;

	margin-bottom: 36px;

}



.surf-level-card {

	border-left: 3px solid var(--surf-accent);

	padding: 6px 0 6px 20px;

}



.surf-level-card strong {

	display: block;

	font-size: 1.15rem;

	color: var(--surf-dark);

	margin-bottom: 6px;

}



.surf-level-card span {

	color: var(--surf-text-muted);

	font-size: 0.98rem;

	line-height: 1.7;

	display: block;

}



/* Destinations Grid */

.surf-destinations-grid {

	display: grid;

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

	gap: 32px;

}



.surf-destination-card {

	background: rgba(255,255,255,0.05);

	border: 1px solid rgba(255,255,255,0.12);

	border-radius: var(--surf-radius);

	overflow: hidden;

	transition: var(--surf-transition);

}



.surf-destination-card:hover {

	transform: translateY(-6px);

	border-color: var(--surf-accent);

}



.surf-destination-card img {

	width: 100%;

	height: 240px;

	object-fit: cover;

	object-position: center 30%;

	display: block;

	transition: transform 0.5s ease;

}



.surf-destination-card:hover img {

	transform: scale(1.04);

}



.surf-destination-card .dest-content {

	padding: 24px;

}



.surf-destination-card h4 {

	color: #ffffff;

	font-size: 1.3rem;

	margin: 0 0 10px;

}



.surf-destination-card p {

	color: #cbd5e1;

	font-size: 0.95rem;

	line-height: 1.7;

	margin: 0;

}



/* Badges */

.surf-buyout-badge {

	display: inline-flex;

	align-items: center;

	gap: 10px;

	padding: 6px 18px;

	background: var(--surf-accent-light);

	color: var(--surf-accent);

	font-size: 0.8rem;

	font-weight: 600;

	letter-spacing: 0.14em;

	text-transform: uppercase;

	border-radius: 30px;

}



.starlink-badge {

	display: inline-flex;

	align-items: center;

	gap: 8px;

	padding: 6px 16px;

	background: rgba(40, 54, 45, 0.08);

	border: 1px solid rgba(40, 54, 45, 0.2);

	border-radius: 20px;

	font-size: 0.78rem;

	color: var(--surf-jungle);

	font-weight: 600;

	letter-spacing: 0.06em;

}



.starlink-badge::before {

	content: '';

	display: inline-block;

	width: 7px;

	height: 7px;

	border-radius: 50%;

	background-color: #10b981;

	box-shadow: 0 0 8px #10b981;

}



/* Footer Styling */

.surf-footer {
	background: rgba(251, 249, 245, 0.96) !important;
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	color: var(--surf-text-muted, #5e6649);
	padding: 110px 0 40px;
	border-top: 1px solid rgba(58, 68, 40, 0.15) !important;
	box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.04);
}

.surf-footer a {
	color: var(--surf-dark, #121212) !important;
	text-decoration: none;
	transition: color 0.3s ease;
}



.surf-footer a:hover {

	color: var(--surf-accent);

}



.surf-footer-grid {

	display: grid;

	grid-template-columns: 2.2fr 1fr 1fr 1.6fr;

	gap: 60px;

	margin-bottom: 90px;

}



.surf-footer-bottom {

	border-top: 1px solid rgba(255, 255, 255, 0.08);

	padding-top: 36px;

	display: flex;

	justify-content: space-between;

	align-items: center;

	flex-wrap: wrap;

	gap: 20px;

	font-size: 0.9rem;

}



/* ==========================================================================

   RESPONSIVE BREAKPOINTS (Fluid & Flawless UX across all screens)

   ========================================================================== */



@media (max-width: 1400px) {

	.surf-grid-pillars {

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

	}

	.surf-split-showcase, .surf-split-reverse {

		gap: 50px;

	}

}



@media (max-width: 1100px) {

	.surf-header-container {

		display: flex;

		justify-content: space-between;

	}

	.surf-nav,

	.surf-nav-menu, 

	.surf-header-cta {

		display: none;

	}

	.surf-burger {

		display: flex;

	}

	.surf-split-showcase, .surf-split-reverse {

		grid-template-columns: 1fr;

		gap: 40px;

	}

	.surf-split-reverse .surf-split-content {

		order: 1;

	}

	.surf-split-reverse .surf-split-gallery {

		order: 2;

	}

	.surf-feature-img {

		height: 420px;

	}

	.surf-footer-grid {

		grid-template-columns: 1fr 1fr;

		gap: 40px;

	}

}



@media (max-width: 768px) {

	.surf-section {

		padding: 70px 0;

	}

	.surf-hero {

		padding: 130px 20px 80px;

		min-height: 90vh;

	}

	.surf-hero-actions {

		flex-direction: column;

		width: 100%;

	}

	.surf-hero-actions .surf-btn {

		width: 100%;

		box-sizing: border-box;

	}

	.surf-grid-pillars {

		grid-template-columns: 1fr;

	}

	.surf-destinations-grid {

		grid-template-columns: 1fr;

	}

	.surf-gallery-mosaic {

		grid-template-columns: 1fr;

	}

	.mosaic-item-1, .mosaic-item-2, .mosaic-item-3 {

		grid-column: span 1;

		height: 240px;

	}

	.surf-footer-grid {

		grid-template-columns: 1fr;

		gap: 36px;

	}

	.surf-footer-bottom {

		flex-direction: column;

		text-align: center;

	}

	.surf-container,

	.surf-editorial-container {

		width: 100%;

		padding: 0 16px;

	}

	.surf-amenities-section {

		padding: 70px 0;

	}

}



@media (max-width: 480px) {

	.surf-container,

	.surf-editorial-container {

		width: 100%;

		padding: 0 12px;

	}

	.surf-hero-eyebrow {

		font-size: 0.7rem;

		letter-spacing: 0.1em;

		padding: 6px 14px;

	}

	.surf-card {

		padding: 28px 16px;

	}

}



/* ==========================================================================

   Language Switcher Dropdown (PT / EN / ES)

   ========================================================================== */

.surf-lang-dropdown {

	position: relative;

	display: inline-block;

	font-family: var(--surf-font-sans);

}



.surf-lang-toggle * {
	pointer-events: none;
}

.surf-lang-toggle {
	display: inline-flex;

	align-items: center;

	gap: 7px;

	padding: 8px 14px;

	background: rgba(255, 255, 255, 0.08);

	border: 1px solid rgba(255, 255, 255, 0.24);

	border-radius: 4px;

	color: #ffffff;

	font-family: var(--surf-font-sans);

	font-size: 0.78rem;

	font-weight: 600;

	letter-spacing: 0.08em;

	cursor: pointer;

	transition: all 0.3s ease;

	backdrop-filter: blur(8px);

	-webkit-backdrop-filter: blur(8px);

}



.surf-lang-toggle:hover {

	border-color: var(--surf-accent);

	background: rgba(255, 255, 255, 0.16);

}



.surf-lang-flag {

	font-size: 1.05rem;

	line-height: 1;

}



.surf-lang-chevron {

	transition: transform 0.3s ease;

	opacity: 0.8;

}



.surf-lang-dropdown.open .surf-lang-chevron {

	transform: rotate(180deg);

}



/* Header scrolled state adaptations */

.surf-header.scrolled .surf-lang-toggle {

	background: rgba(0, 0, 0, 0.03);

	border-color: rgba(0, 0, 0, 0.14);

	color: var(--surf-dark);

}



.surf-header.scrolled .surf-lang-toggle:hover {

	border-color: var(--surf-accent);

	background: rgba(58, 68, 40, 0.08);

}



/* Dropdown Menu */

.surf-lang-menu {

	position: absolute;

	top: calc(100% + 8px);

	right: 0;

	min-width: 180px;

	background: #3a4428;

	border: 1px solid rgba(255, 255, 255, 0.14);

	border-radius: 6px;

	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);

	padding: 6px 0;

	margin: 0;

	list-style: none;

	opacity: 0;

	visibility: hidden;

	transform: translateY(-8px);

	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;

	z-index: 1010;

	backdrop-filter: blur(12px);

	-webkit-backdrop-filter: blur(12px);

}



.surf-header.scrolled .surf-lang-menu {
	background: var(--surf-cream, #f7f2e8);
	border-color: rgba(0, 0, 0, 0.1);
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12);
}

.surf-lang-dropdown.open .surf-lang-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);

}



.surf-lang-item {

	margin: 0;

	padding: 0;

}



.surf-lang-link {

	display: flex;

	align-items: center;

	gap: 10px;

	padding: 9px 16px;

	color: #e2e8f0;

	text-decoration: none;

	font-size: 0.82rem;

	font-weight: 500;

	letter-spacing: 0.04em;

	transition: all 0.2s ease;

}



.surf-header.scrolled .surf-lang-link {

	color: #334155;

}



.surf-lang-link:hover {

	background: rgba(58, 68, 40, 0.18);

	color: #ffffff;

}



.surf-header.scrolled .surf-lang-link:hover {

	background: rgba(58, 68, 40, 0.12);

	color: var(--surf-accent);

}



.surf-lang-item.active .surf-lang-link {

	color: var(--surf-accent);

	font-weight: 700;

}



.surf-lang-item-flag {

	font-size: 1.1rem;

	line-height: 1;

}



.surf-lang-item-name {

	flex: 1;

}



.surf-lang-item-code {

	font-size: 0.72rem;

	opacity: 0.6;

	letter-spacing: 0.08em;

	font-family: monospace;

}



.surf-lang-check {

	font-size: 0.8rem;

	color: var(--surf-accent);

	margin-left: 4px;

}



/* Mobile Drawer Language Switcher */

.surf-mobile-lang-wrap {

	margin-bottom: 24px;

	display: flex;

	justify-content: center;

	width: 100%;

}



.surf-mobile-lang-wrap .surf-lang-toggle {

	background: rgba(0, 0, 0, 0.05);

	border-color: rgba(0, 0, 0, 0.15);

	color: var(--surf-dark);

	padding: 10px 20px;

	font-size: 0.9rem;

}



.surf-mobile-lang-wrap .surf-lang-menu {

	position: static;

	transform: none;

	opacity: 1;

	visibility: visible;

	margin-top: 10px;

	background: var(--surf-cream, #f7f2e8);

	border: 1px solid rgba(0, 0, 0, 0.1);

	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);

	display: none;

	width: 220px;

}



.surf-mobile-lang-wrap .surf-lang-dropdown.open .surf-lang-menu {

	display: block;

}



.surf-mobile-lang-wrap .surf-lang-link {

	color: var(--surf-dark);

	padding: 12px 18px;

	font-size: 0.9rem;

}



/* Mobile Drawer Submenu & Groups */

.surf-mobile-nav-group {

	border-top: 1px solid rgba(0, 0, 0, 0.07);

	border-bottom: 1px solid rgba(0, 0, 0, 0.07);

	padding: 12px 0;

	margin: 6px 0;

	width: 100%;

}



.surf-mobile-group-title {

	display: block;

	font-size: 0.75rem;

	font-weight: 700;

	letter-spacing: 0.12em;

	text-transform: uppercase;

	color: var(--surf-accent, #848867);

	margin-bottom: 10px;

}



.surf-mobile-sub {

	list-style: none;

	padding: 0 0 0 10px;

	margin: 0;

	display: flex;

	flex-direction: column;

	gap: 12px;

}



.surf-mobile-sub a {

	font-size: 0.96rem;

	font-weight: 500;

	color: var(--surf-dark, #121212);

	text-decoration: none;

	display: block;

	padding: 4px 0;

	transition: color 0.25s ease;

}



.surf-mobile-sub a:hover,

.surf-mobile-sub a:focus {

	color: var(--surf-accent, #848867) !important;

}



/* ==========================================================================

   SUBPAGE STYLES (Reservas, Itacaré, Vila Jubarte)

   ========================================================================== */



.surf-page-hero {

	position: relative;

	width: 100%;

	min-height: 480px;

	display: flex;

	align-items: center;

	justify-content: center;

	overflow: hidden;

	padding: 140px 24px 80px;

	box-sizing: border-box;

}



.surf-page-hero-bg {

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	object-fit: cover;

	z-index: 1;

}



.surf-page-hero-overlay {

	position: absolute;

	top: 0;

	left: 0;

	right: 0;

	bottom: 0;

	background: linear-gradient(180deg, rgba(18, 18, 18, 0.72) 0%, rgba(18, 18, 18, 0.88) 100%);

	z-index: 2;

}



.surf-page-hero-content {

	position: relative;

	z-index: 3;

	text-align: center;

	max-width: 960px;

	margin: 0 auto;

	color: #ffffff;

}



.surf-page-hero-eyebrow {

	display: inline-block;

	font-family: var(--surf-font-sans);

	font-size: 0.82rem;

	font-weight: 600;

	letter-spacing: 0.16em;

	text-transform: uppercase;

	color: #e6dfd5;

	margin-bottom: 14px;

}



.surf-page-hero-title {

	font-family: var(--surf-font-serif);

	font-size: clamp(2.4rem, 5vw, 3.8rem);

	font-weight: 400;

	line-height: 1.15;

	color: #ffffff;

	margin: 0 0 18px;

}



.surf-page-hero-lead {

	font-size: clamp(1rem, 1.8vw, 1.2rem);

	line-height: 1.65;

	color: #e2ded8;

	max-width: 820px;

	margin: 0 auto;

}



/* Trust Pill Badges */

.surf-trust-pills {

	display: flex;

	flex-wrap: wrap;

	justify-content: center;

	gap: 14px;

	margin-top: 28px;

}



.surf-trust-pill {

	display: inline-flex;

	align-items: center;

	gap: 8px;

	padding: 8px 16px;

	background: rgba(255, 255, 255, 0.12);

	backdrop-filter: blur(8px);

	border: 1px solid rgba(255, 255, 255, 0.2);

	border-radius: 30px;

	font-size: 0.84rem;

	font-weight: 500;

	color: #ffffff;

	letter-spacing: 0.03em;

}



/* Editorial Content Sections & Standard Wide Architecture */

.surf-editorial-container {

	max-width: 1720px;

	width: 93%;

	margin: 0 auto;

	padding: 0 20px;

	box-sizing: border-box;

}



.surf-editorial-grid-2col {

	display: grid;

	grid-template-columns: 1fr 1.15fr;

	gap: 70px;

	align-items: center;

	margin-bottom: 90px;

}



.surf-editorial-grid-2col.reverse {

	direction: rtl;

}



.surf-editorial-grid-2col.reverse > * {

	direction: ltr;

}



.surf-editorial-text h3 {

	font-family: var(--surf-font-serif);

	font-size: clamp(1.8rem, 3.2vw, 2.5rem);

	font-weight: 400;

	color: var(--surf-dark, #121212);

	line-height: 1.25;

	margin: 0 0 20px;

}



.surf-editorial-text p {

	font-size: 1.05rem;

	line-height: 1.8;

	color: #3a4428;

	margin: 0 0 20px;

}



.surf-quote-badge {

	background: var(--surf-sand-light, #faf8f5);

	border-left: 4px solid var(--surf-accent, #848867);

	padding: 18px 22px;

	border-radius: 0 8px 8px 0;

	font-size: 0.96rem;

	line-height: 1.65;

	color: var(--surf-dark, #121212);

	margin-top: 24px;

}



.surf-editorial-media {

	position: relative;

	width: 100%;

	overflow: hidden;

	border-radius: 8px;

	box-shadow: 0 16px 40px rgba(18, 18, 18, 0.08);

}



.surf-editorial-media img {

	width: 100%;

	height: 100%;

	max-height: 420px;

	object-fit: cover;

	object-position: center 65%;

	display: block;

	border-radius: 8px;

}



/* Amenities Grid for Vila Jubarte */

.surf-amenities-section {

	background-color: var(--surf-sand-light, #faf8f5);

	padding: 110px 0;

}



.surf-amenities-grid {

	display: grid;

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

	gap: 28px;

	margin-top: 40px;

}



.surf-amenity-card {

	background: var(--surf-cream, #f7f2e8);

	border: 1px solid var(--surf-sand-border, #e6dfd5);

	border-radius: 12px;

	padding: 32px 26px;

	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);

	box-shadow: 0 8px 24px rgba(18, 18, 18, 0.04);

}



.surf-amenity-card.has-img {

	padding: 0;

	overflow: hidden;

	display: flex;

	flex-direction: column;

}



.surf-amenity-card:hover {

	transform: translateY(-6px);

	box-shadow: 0 16px 36px rgba(58, 68, 40, 0.14);

}



/* Image Box inside Amenity Card */

.surf-amenity-img-wrap {

	position: relative;

	width: 100%;

	height: 220px;

	overflow: hidden;

	background: #f0ebe4;

	flex-shrink: 0;

}



.surf-amenity-img-wrap img {

	width: 100%;

	height: 100%;

	object-fit: cover;

	object-position: center 55%;

	display: block;

	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);

}



.surf-amenity-img-wrap img[src*="starlink"] {

	object-position: center 85%;

}



.surf-amenity-img-wrap img[src*="amenity-gourmet"],
.surf-amenity-img-wrap img[src*="amenity-jardim"] {
	object-position: center 75%;
}

.surf-amenity-img-wrap img[src*="villa-05"] {
	object-position: center 30%;
}

.surf-amenity-img-wrap img[src*="villa-deck"] {
	object-position: center 60%;
}



.surf-amenity-card:hover .surf-amenity-img-wrap img {

	transform: scale(1.05);

}



.surf-amenity-body {

	padding: 24px 26px 30px;

	display: flex;

	flex-direction: column;

	flex-grow: 1;

}



.surf-amenity-card.has-img .surf-amenity-icon {

	width: 46px;

	height: 46px;

	border-radius: 50%;

	background: var(--surf-cream, #f7f2e8);

	border: 2px solid #ffffff;

	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);

	display: inline-flex;

	align-items: center;

	justify-content: center;

	margin-top: -46px;

	margin-bottom: 16px;

	position: relative;

	z-index: 3;

}



.surf-amenity-card.has-img .surf-amenity-icon svg {

	width: 22px;

	height: 22px;

	stroke: var(--surf-accent, #848867);

	display: block;

}



.surf-amenity-icon {

	width: 48px;

	height: 48px;

	border-radius: 50%;

	background: var(--surf-accent-light, #f4eee9);

	display: inline-flex;

	align-items: center;

	justify-content: center;

	margin-bottom: 18px;

}



.surf-amenity-icon svg {

	width: 24px;

	height: 24px;

	stroke: var(--surf-accent, #848867);

	display: block;

}



.surf-amenity-card h4 {

	font-family: var(--surf-font-sans);

	font-size: 1.15rem;

	font-weight: 600;

	color: var(--surf-dark, #121212);

	margin: 0 0 10px;

}



.surf-amenity-card p {

	font-size: 0.92rem;

	line-height: 1.65;

	color: #5e6649;

	margin: 0;

}



/* Gallery Photo Grid */

.surf-photo-grid-3 {

	display: grid;

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

	gap: 24px;

	margin: 50px 0;

}



.surf-photo-item {

	position: relative;

	overflow: hidden;

	border-radius: 8px;

	aspect-ratio: 4 / 3;

}



.surf-photo-item img {

	width: 100%;

	height: 100%;

	object-fit: cover;

	transition: transform 0.5s ease;

}



.surf-photo-item:hover img {

	transform: scale(1.05);

}



/* Shared CTA Banner */

.surf-cta-banner {

	background: linear-gradient(135deg, #2e3620 0%, #3a4428 100%);

	padding: 90px 24px;

	text-align: center;

	color: #ffffff;

}



.surf-cta-banner-inner {

	max-width: 820px;

	margin: 0 auto;

}



.surf-cta-banner .surf-eyebrow {

	color: #e6dfd5;

}



.surf-cta-banner h2 {

	font-family: var(--surf-font-serif);

	font-size: clamp(2rem, 4vw, 3rem);

	font-weight: 400;

	color: #ffffff;

	margin: 12px 0 18px;

	line-height: 1.2;

}



.surf-cta-banner p {

	font-size: 1.1rem;

	line-height: 1.7;

	color: #e4e2d0;

	margin: 0 auto 32px;

	max-width: 700px;

}



@media (max-width: 960px) {

	.surf-editorial-grid-2col {

		grid-template-columns: 1fr;

		gap: 36px;

	}

	.surf-editorial-grid-2col.reverse {

		direction: ltr;

	}

	.surf-amenities-grid {

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

	}

	.surf-photo-grid-3 {

		grid-template-columns: 1fr;

	}

}



@media (max-width: 600px) {

	.surf-amenities-grid {

		grid-template-columns: 1fr;

	}

	.surf-page-hero {

		min-height: 400px;

		padding: 120px 16px 60px;

	}

}



/* ==========================================================================

   SURF COACHING INTERACTIVE COMPONENTS (Gallery, FAQ, Videos)

   ========================================================================== */



/* 1. Spots Gallery */

.surf-spots-interactive-gallery {

	max-width: 1200px;

	margin: 0 auto;

}



.surf-spot-main-view {

	position: relative;

	width: 100%;

	height: 520px;

	border-radius: 12px;

	overflow: hidden;

	box-shadow: 0 16px 40px rgba(18, 18, 18, 0.1);

	background-color: #121212;

}



.surf-spot-main-view img {

	width: 100%;

	height: 100%;

	object-fit: cover;

	transition: opacity 0.25s ease-in-out;

}



.surf-spot-caption-overlay {

	position: absolute;

	bottom: 0;

	left: 0;

	right: 0;

	padding: 40px 32px 28px;

	background: linear-gradient(180deg, transparent 0%, rgba(18, 18, 18, 0.88) 100%);

	color: #ffffff;

}



.surf-spot-title {

	display: block;

	font-family: var(--surf-font-serif);

	font-size: 1.8rem;

	font-weight: 400;

	margin-bottom: 6px;

	color: #ffffff;

}



.surf-spot-desc {

	font-size: 0.98rem;

	line-height: 1.55;

	color: #e2ded8;

	margin: 0;

	max-width: 800px;

}



.surf-spot-thumbs-grid {

	display: grid;

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

	gap: 16px;

	margin-top: 18px;

}



.surf-spot-thumb {

	position: relative;

	background: var(--surf-cream, #f7f2e8);

	border: 2px solid transparent;

	border-radius: 8px;

	padding: 0;

	cursor: pointer;

	overflow: hidden;

	opacity: 0.65;

	transition: all 0.25s ease;

	text-align: left;

	display: flex;

	flex-direction: column;

}



.surf-spot-thumb img {

	width: 100%;

	height: 110px;

	object-fit: cover;

	object-position: center 30%;

	display: block;

}



.surf-spot-thumb .thumb-name {

	display: block;

	padding: 10px 12px;

	font-size: 0.88rem;

	font-weight: 600;

	color: var(--surf-dark, #121212);

	background: var(--surf-cream, #f7f2e8);

}



.surf-spot-thumb:hover {

	opacity: 0.95;

	transform: translateY(-2px);

}



.surf-spot-thumb.active {

	opacity: 1;

	border-color: var(--surf-accent, #848867);

	box-shadow: 0 4px 16px rgba(58, 68, 40, 0.2);

}



.surf-spot-thumb.active .thumb-name {

	color: var(--surf-accent, #848867);

}



/* Spot Timer Progress Bar */

.surf-spot-thumb .thumb-progress {

	position: absolute;

	bottom: 0;

	left: 0;

	height: 3px;

	width: 0%;

	background-color: var(--surf-accent, #848867);

	z-index: 5;

	pointer-events: none;

}



.surf-spot-thumb.active.timer-running .thumb-progress {

	animation: surfSpotProgressAnim 5.5s linear forwards;

}



@keyframes surfSpotProgressAnim {

	from {

		width: 0%;

	}

	to {

		width: 100%;

	}

}



/* 2. FAQ Accordion */

.surf-faq-container {

	max-width: 900px;

	margin: 0 auto;

}



.surf-faq-item {

	background: var(--surf-cream, #f7f2e8);

	border: 1px solid var(--surf-sand-border, #e6dfd5);

	border-radius: 10px;

	margin-bottom: 14px;

	overflow: hidden;

	transition: border-color 0.2s ease, box-shadow 0.2s ease;

}



.surf-faq-item[open] {

	border-color: var(--surf-accent, #848867);

	box-shadow: 0 8px 24px rgba(18, 18, 18, 0.04);

}



.surf-faq-question {

	padding: 22px 28px;

	font-size: 1.06rem;

	font-weight: 600;

	color: var(--surf-dark, #121212);

	cursor: pointer;

	display: flex;

	justify-content: space-between;

	align-items: center;

	gap: 16px;

	list-style: none;

	user-select: none;

	transition: color 0.2s ease;

}



.surf-faq-question::-webkit-details-marker {

	display: none;

}



.surf-faq-icon {

	flex-shrink: 0;

	color: var(--surf-accent, #848867);

	transition: transform 0.25s ease;

}



.surf-faq-item[open] .surf-faq-icon {

	transform: rotate(180deg);

}



.surf-faq-answer {

	padding: 0 28px 24px 28px;

	color: #3a4428;

	font-size: 0.98rem;

	line-height: 1.75;

}



.surf-faq-answer p {

	margin: 0;

}



/* 3. Video Showcase */

.surf-video-player-section {

	max-width: 1200px;

	margin: 0 auto;

}



.surf-video-screen {

	position: relative;

	width: 100%;

	aspect-ratio: 16 / 9;

	max-height: 560px;

	border-radius: 12px;

	overflow: hidden;

	background-color: #000000;

	box-shadow: 0 16px 40px rgba(18, 18, 18, 0.15);

	cursor: pointer;

}



.surf-video-screen img {

	width: 100%;

	height: 100%;

	object-fit: cover;

}



.surf-video-play-btn {

	position: absolute;

	top: 50%;

	left: 50%;

	transform: translate(-50%, -50%);

	width: 80px;

	height: 80px;

	background: rgba(18, 18, 18, 0.85);

	border: 2px solid rgba(255, 255, 255, 0.4);

	border-radius: 50%;

	display: flex;

	align-items: center;

	justify-content: center;

	color: #ffffff;

	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);

	transition: all 0.3s ease;

	z-index: 2;

}



.surf-video-play-btn svg {

	margin-left: 4px;

	fill: currentColor;

}



.surf-video-screen:hover .surf-video-play-btn {

	transform: translate(-50%, -50%) scale(1.1);

	background: var(--surf-accent, #848867);

	border-color: #ffffff;

}



.surf-video-thumbs-grid {

	display: grid;

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

	gap: 16px;

	margin-top: 18px;

}



.surf-video-thumb {

	background: var(--surf-cream, #f7f2e8);

	border: 2px solid transparent;

	border-radius: 8px;

	padding: 0;

	cursor: pointer;

	overflow: hidden;

	opacity: 0.65;

	transition: all 0.25s ease;

	text-align: left;

	display: flex;

	flex-direction: column;

}



.surf-video-thumb .thumb-poster {

	width: 100%;

	height: 110px;

	overflow: hidden;

}



.surf-video-thumb .thumb-poster img {

	width: 100%;

	height: 100%;

	object-fit: cover;

	object-position: center;

	display: block;

}



.surf-video-thumb .thumb-label {

	display: block;

	padding: 10px 12px;

	font-size: 0.84rem;

	font-weight: 600;

	color: var(--surf-dark, #121212);

	background: var(--surf-cream, #f7f2e8);

	white-space: nowrap;

	overflow: hidden;

	text-overflow: ellipsis;

}



.surf-video-thumb:hover {

	opacity: 0.95;

	transform: translateY(-2px);

}



.surf-video-thumb.active {

	opacity: 1;

	border-color: var(--surf-accent, #848867);

	box-shadow: 0 4px 16px rgba(58, 68, 40, 0.2);

}



.surf-video-thumb.active .thumb-label {

	color: var(--surf-accent, #848867);

}



/* Responsive for Gallery & Videos */

@media (max-width: 900px) {

	.surf-spot-main-view {

		height: 380px;

	}

	.surf-spot-thumbs-grid,

	.surf-video-thumbs-grid {

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

	}

}



@media (max-width: 600px) {

	.surf-spot-main-view {

		height: 280px;

	}

	.surf-spot-caption-overlay {

		padding: 20px 16px;

	}

	.surf-spot-title {

		font-size: 1.3rem;

	}

	.surf-spot-desc {

		font-size: 0.85rem;

	}

	.surf-faq-question {

		padding: 16px 18px;

		font-size: 0.96rem;

	}

	.surf-faq-answer {

		padding: 0 18px 18px;

		font-size: 0.9rem;

	}

	.surf-video-play-btn {

		width: 60px;

		height: 60px;

	}

	.surf-video-play-btn svg {

		width: 26px;

		height: 26px;

	}

}



/* ==========================================================================

   FLOATING WHATSAPP BUTTON (BOTTOM RIGHT)

   ========================================================================== */



.surf-wa-float-wrap {

	position: fixed;

	bottom: 28px;

	right: 28px;

	z-index: 999999;

	display: flex;

	align-items: center;

	pointer-events: none;

}



.surf-wa-float-btn {

	position: relative;

	width: 62px;

	height: 62px;

	border-radius: 50%;

	background: #25D366;

	display: flex;

	align-items: center;

	justify-content: center;

	color: #ffffff;

	box-shadow: 0 10px 28px rgba(37, 211, 102, 0.45), 0 4px 12px rgba(0, 0, 0, 0.15);

	text-decoration: none;

	transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;

	pointer-events: auto;

}



.surf-wa-float-btn:hover {

	transform: scale(1.08) translateY(-3px);

	box-shadow: 0 14px 34px rgba(37, 211, 102, 0.6), 0 6px 16px rgba(0, 0, 0, 0.2);

}



.surf-wa-float-icon {

	position: relative;

	z-index: 2;

	display: flex;

	align-items: center;

	justify-content: center;

}



.surf-wa-float-pulse {

	position: absolute;

	top: 0;

	left: 0;

	right: 0;

	bottom: 0;

	border-radius: 50%;

	border: 2px solid #25D366;

	opacity: 0.8;

	animation: surfWaPulseAnim 2.6s infinite cubic-bezier(0.25, 1, 0.5, 1);

	pointer-events: none;

	z-index: 1;

}



@keyframes surfWaPulseAnim {

	0% {

		transform: scale(1);

		opacity: 0.8;

	}

	70% {

		transform: scale(1.45);

		opacity: 0;

	}

	100% {

		transform: scale(1.45);

		opacity: 0;

	}

}



.surf-wa-float-tooltip {

	position: absolute;

	right: 76px;

	white-space: nowrap;

	background: rgba(18, 18, 18, 0.92);

	backdrop-filter: blur(8px);

	color: #ffffff;

	font-family: var(--surf-font-sans);

	font-size: 0.86rem;

	font-weight: 500;

	letter-spacing: 0.02em;

	padding: 8px 16px;

	border-radius: 20px;

	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);

	opacity: 0;

	visibility: hidden;

	transform: translateX(10px);

	transition: all 0.25s ease;

	pointer-events: none;

}



.surf-wa-float-btn:hover .surf-wa-float-tooltip {

	opacity: 1;

	visibility: visible;

	transform: translateX(0);

}



@media (max-width: 768px) {

	.surf-wa-float-wrap {

		bottom: 20px;

		right: 18px;

	}

	.surf-wa-float-btn {

		width: 54px;

		height: 54px;

	}

	.surf-wa-float-btn svg {

		width: 30px;

		height: 30px;

	}

	.surf-wa-float-tooltip {

		display: none;

	}

}



/* ==========================================================================

   HIGH SOCIETY LUXURY ENHANCEMENTS (v1.6.0)

   - Background Video Loops

   - SVG Icon Alignment & Colors

   - Guest Reviews Grid

   - Whale Cinematic Banner

   - Villa 6-Photo HD Gallery

   - Coach Video Card

   ========================================================================== */



/* Hero & Page Hero Video Loops */

.surf-hero-video,

.surf-page-hero-video {

	position: absolute;

	top: 0;

	left: 0;

	width: 100% !important;

	height: 100% !important;

	object-fit: cover !important;

	object-position: center !important;

	z-index: 1;

	pointer-events: none;

}



.surf-hero-video {

	transform: scale(1.02);

}



/* SVG Icons in Cards & Amenities */

.surf-card-icon svg {

	width: 28px;

	height: 28px;

	stroke: var(--surf-accent, #848867);

	display: block;

}



.surf-amenity-icon {

	width: 48px;

	height: 48px;

	border-radius: 50%;

	background: var(--surf-accent-light, #f4eee9);

	display: inline-flex;

	align-items: center;

	justify-content: center;

	margin-bottom: 18px;

}



.surf-amenity-icon svg {

	width: 24px;

	height: 24px;

	stroke: var(--surf-accent, #848867);

	display: block;

}



/* Luxury Reviews Grid */

.surf-reviews-grid {

	display: grid;

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

	gap: 32px;

	margin-top: 48px;

}



.surf-review-card {

	background: var(--surf-cream, #f7f2e8);

	border: 1px solid var(--surf-sand-border, #e6dfd5);

	border-radius: 10px;

	padding: 42px 32px 36px;

	display: flex;

	flex-direction: column;

	justify-content: space-between;

	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);

	transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.surf-review-card:hover {

	transform: translateY(-5px);

	box-shadow: 0 18px 45px rgba(58, 68, 40, 0.12);

}



.surf-review-stars {

	color: #d4af37;

	font-size: 1.1rem;

	letter-spacing: 0.25em;

	margin-bottom: 22px;

}



.surf-review-quote {

	font-family: var(--surf-font-serif);

	font-size: 1.15rem;

	line-height: 1.7;

	color: var(--surf-dark, #121212);

	font-style: italic;

	margin: 0 0 28px 0;

	padding: 0;

	border: none;

}



.surf-review-author-wrap {

	display: flex;

	align-items: center;

	gap: 14px;

	border-top: 1px solid var(--surf-sand-border, #e6dfd5);

	padding-top: 20px;

}



.surf-review-avatar {

	width: 44px;

	height: 44px;

	border-radius: 50%;

	background: linear-gradient(135deg, var(--surf-accent, #848867), #6e7253);

	color: #ffffff;

	display: flex;

	align-items: center;

	justify-content: center;

	font-family: var(--surf-font-sans);

	font-weight: 700;

	font-size: 0.85rem;

	letter-spacing: 0.05em;

	flex-shrink: 0;

}



.surf-review-meta strong {

	display: block;

	font-family: var(--surf-font-sans);

	font-size: 0.92rem;

	font-weight: 600;

	color: var(--surf-dark, #121212);

}



.surf-review-meta span {

	display: block;

	font-size: 0.78rem;

	color: var(--surf-text-muted, #5e6649);

	margin-top: 2px;

}



/* Baleias Jubarte Cinematic Video Banner */

.surf-whale-banner {

	position: relative;

	width: 100%;

	min-height: 520px;

	display: flex;

	align-items: center;

	justify-content: center;

	overflow: hidden;

	box-sizing: border-box;

	padding: 80px 24px;

	color: #ffffff;

}



.surf-whale-video {

	position: absolute;

	top: 0;

	left: 0;

	width: 100% !important;

	height: 100% !important;

	object-fit: cover !important;

	object-position: center !important;

	z-index: 1;

	pointer-events: none;

}



.surf-whale-overlay {

	position: absolute;

	top: 0;

	left: 0;

	right: 0;

	bottom: 0;

	background: linear-gradient(180deg, rgba(14, 14, 14, 0.45) 0%, rgba(14, 14, 14, 0.78) 100%);

	z-index: 2;

}



.surf-whale-content {

	position: relative;

	z-index: 3;

	text-align: center;

	max-width: 860px;

	margin: 0 auto;

}



.surf-whale-badge {

	display: inline-flex;

	align-items: center;

	padding: 8px 20px;

	border-radius: 50px;

	background: rgba(255, 255, 255, 0.12);

	backdrop-filter: blur(10px);

	font-size: 0.82rem;

	letter-spacing: 0.16em;

	text-transform: uppercase;

	color: #d1fae5;

	border: 1px solid rgba(209, 250, 229, 0.3);

	margin-bottom: 22px;

}



.surf-whale-content h2 {

	font-family: var(--surf-font-serif);

	font-size: clamp(2.2rem, 4.5vw, 3.8rem);

	font-weight: 300;

	line-height: 1.15;

	color: #ffffff;

	margin: 0 0 18px;

}



.surf-whale-content p {

	font-size: clamp(1.05rem, 1.6vw, 1.22rem);

	line-height: 1.75;

	color: #e2ded8;

	margin: 0 auto;

	max-width: 740px;

}



/* Villa 6-Photo Editorial Grid */

.surf-photo-grid-6 {

	display: grid;

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

	gap: 20px;

	margin-top: 48px;

}



.surf-photo-grid-6 .surf-photo-item {

	overflow: hidden;

	border-radius: 8px;

	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);

	position: relative;

}



.surf-photo-grid-6 .surf-photo-item img {

	width: 100%;

	height: 280px;

	object-fit: cover;

	object-position: center top;

	display: block;

	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);

}



.surf-photo-grid-6 .surf-photo-item:hover img {

	transform: scale(1.04);

}



/* Coach Video Card in Editorial Split */

.surf-coach-media-wrap {

	position: relative;

	border-radius: 8px;

	overflow: hidden;

	box-shadow: 0 14px 35px rgba(0, 0, 0, 0.1);

	min-height: 420px;

}



.surf-coach-video-card {

	width: 100%;

	height: 100%;

	min-height: 420px;

	object-fit: cover;

	display: block;

}



/* Responsive adjustments */

@media (max-width: 992px) {

	.surf-reviews-grid {

		grid-template-columns: 1fr;

		gap: 24px;

	}

	.surf-photo-grid-6 {

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

		gap: 16px;

	}

}



@media (max-width: 600px) {

	.surf-photo-grid-6 {

		grid-template-columns: 1fr;

	}

	.surf-photo-grid-6 .surf-photo-item img {

		height: 220px;

	}

	.surf-whale-banner {

		min-height: 440px;

		padding: 60px 16px;

	}

}













/* ==========================================================================

   SCROLL REVEAL � Entrance Animations (v1.7.0)

   Applied via IntersectionObserver � data-reveal attribute on elements

   ========================================================================== */



[data-reveal] {

	opacity: 0;

	transform: translateY(28px);

	transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),

	            transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);

	will-change: opacity, transform;

}



[data-reveal].revealed {

	opacity: 1;

	transform: translateY(0);

}



[data-reveal-delay="1"] { transition-delay: 0.10s; }

[data-reveal-delay="2"] { transition-delay: 0.20s; }

[data-reveal-delay="3"] { transition-delay: 0.30s; }

[data-reveal-delay="4"] { transition-delay: 0.40s; }



@media (prefers-reduced-motion: reduce) {

	[data-reveal] {

		opacity: 1;

		transform: none;

		transition: none;

	}

}



/* ==========================================================================

   SECTION PADDING REFINEMENT (v1.7.0)

   ========================================================================== */



.surf-section {

	padding: 100px 0;

}



.surf-amenities-section {

	padding: 100px 0;

}



.surf-cta-banner {

	padding: 80px 24px;

}



#depoimentos.surf-section {

	padding: 90px 0;

}



@media (max-width: 768px) {

	.surf-section,

	.surf-amenities-section {

		padding: 70px 0;

	}

	.surf-cta-banner {

		padding: 60px 20px;

	}

}





/* ==========================================================================

   BUTTON HOVER & UNDERLINE OVERRIDES — OLIVE GREEN (#848867)

   ========================================================================== */

:root {

	--surf-accent-hover: #848867;

}



/* Primary, Secondary & Outline Button Hover States */

.surf-btn:hover,

button.surf-btn:hover,

a.surf-btn:hover,

.surf-btn-outline:hover,

.surf-btn-outline-white:hover,

.surf-hero-actions .surf-btn:hover,

.surf-booking-widget .surf-btn:hover,

input[type="submit"]:hover,

.surf-btn:focus,

.surf-btn:active {

	background-color: #848867 !important;

	border-color: #848867 !important;

	color: #ffffff !important;

	box-shadow: 0 10px 25px rgba(132, 136, 103, 0.35) !important;

}



/* Nav Link Hover Underlines & Text Link Underlines */

.surf-nav-link::after {

	background-color: #848867 !important;

}



.surf-nav-link:hover::after,

.surf-nav-link.active::after {

	background-color: #848867 !important;

	width: 100% !important;

}



.surf-nav-link:hover,

.surf-nav a:hover,

.surf-nav-item-dropdown:hover > .surf-nav-link,

.surf-header.scrolled .surf-nav-link:hover,

.surf-header.scrolled .surf-nav-item-dropdown:hover > .surf-nav-link,

.surf-nav-sublink:hover .sub-title,

.surf-footer a:hover,

.surf-mobile-nav a:hover {

	color: #848867 !important;

}



/* Accent Underlines & Borders on Hover */

.surf-spot-thumb:hover,

.surf-video-thumb:hover,

.surf-lang-toggle:hover,

.surf-header.scrolled .surf-lang-toggle:hover {

	border-color: #848867 !important;

}



/* Video Play Button Hover */

.surf-video-screen:hover .surf-video-play-btn {

	background: #848867 !important;

}





/* Secondary Button Styles (Verde Oliva Transparent Outline) */

.surf-btn-outline {

	background-color: transparent !important;

	color: #2e3620 !important;

	border: 1.5px solid #848867 !important;

}



.surf-btn-outline:hover {

	background-color: #848867 !important;

	color: #ffffff !important;

	border-color: #848867 !important;

	box-shadow: 0 8px 20px rgba(132, 136, 103, 0.3) !important;

}



.surf-btn-outline-white {

	background-color: transparent !important;

	color: #ffffff !important;

	border: 1.5px solid rgba(255, 255, 255, 0.6) !important;

}



.surf-btn-outline-white:hover {

	background-color: #848867 !important;

	color: #ffffff !important;

	border-color: #848867 !important;

	box-shadow: 0 8px 20px rgba(132, 136, 103, 0.35) !important;

}



/* ==========================================================================

   FOOTER — same background as the (scrolled/solid) navigation bar

   Nav: .surf-header.scrolled { background: rgba(251, 249, 245, 0.96) }

   Text/link colors adapted for contrast on the light background

   (!important needed to override inline styles in footer.php)

   ========================================================================== */

.surf-footer {
	background: rgba(251, 249, 245, 0.96) !important;
	background-color: rgba(251, 249, 245, 0.96) !important;
	backdrop-filter: blur(18px) !important;
	-webkit-backdrop-filter: blur(18px) !important;
	border-top: 1px solid rgba(58, 68, 40, 0.15) !important;
	box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.04) !important;
	color: var(--surf-text-muted, #5e6649);
}



.surf-footer a {

	color: var(--surf-dark, #121212);

}



.surf-footer h4 {

	color: var(--surf-dark, #121212) !important;

}



.surf-footer p,

.surf-footer ul {

	color: var(--surf-text-muted, #5e6649) !important;

}



.surf-footer .starlink-badge {

	background: rgba(40, 54, 45, 0.08) !important;

	border-color: rgba(40, 54, 45, 0.2) !important;

	color: var(--surf-jungle, #28362d) !important;

}



.surf-footer .surf-footer-bottom {

	border-top-color: rgba(58, 68, 40, 0.15);

	color: var(--surf-text-muted, #5e6649);

}



.surf-footer .surf-footer-bottom div[style] {

	color: var(--surf-text-muted, #5e6649) !important;

}



.surf-footer .surf-footer-bottom span[style] {

	color: var(--surf-dark, #121212) !important;

}



/* Keep the WhatsApp button white-on-green */

.surf-footer a.surf-btn,

.surf-footer a.surf-btn:hover {

	color: #ffffff !important;

}

/* Mobile Drawer Close Button (Top-Right Olive Green) */
.surf-mobile-drawer .surf-drawer-close,
button.surf-drawer-close,
.surf-drawer-close {
	position: absolute !important;
	top: 24px !important;
	right: 24px !important;
	width: 44px !important;
	height: 44px !important;
	min-width: 44px !important;

/* Language Switcher Fix for Non-Homepage Headers */
body:not(.home) .surf-header:not(.scrolled) .surf-lang-toggle {
    color: var(--surf-dark);
    border-color: rgba(0, 0, 0, 0.15);
    background: rgba(0, 0, 0, 0.03);
}

/* ==========================================================================
   GLOBAL HELLO ELEMENTOR RESET NEUTRALIZER
   Prevents #c36 pink leaks on generic links, buttons and outlines
   ========================================================================== */
a {
	color: inherit;
}

[type="button"],
[type="submit"],
[type="reset"],
button {
	border: none;
	color: inherit;
	background-color: transparent;
}

[type="button"]:hover,
[type="button"]:focus,
[type="submit"]:hover,
[type="submit"]:focus,
button:hover,
button:focus {
	color: inherit;
	background-color: transparent;
}