/*
Theme Name: BeCasa V2
Theme URI: https://becasa.es
Author: BeCasa
Author URI: https://becasa.es
Description: BeCasa V2 — block-based theme. Pages and posts can pick from custom templates assembled in the Site Editor (Apariencia → Editor) using BeCasa's ACF blocks plus header/footer template parts.
Version: 1.0.1
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 8.0
Text Domain: becasav2
Tags: full-site-editing, block-templates, custom-blocks
*/

/*
#page-curtain {
  position: fixed;
  inset: 0;
  background: #0D3B3B;
  z-index: 9999;
  transform: translateY(0%);
  pointer-events: none;
  will-change: transform;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
}
  */

.wp-block-columns {
	margin-bottom: 0px !important;
}

.masonry-grid-container
	> .block-editor-inner-blocks
	> .block-editor-block-list__layout {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 200px;
	gap: 20px;
}
.pin-spacer {
	padding-bottom: 0px !important;
	z-index: 99;
	background-color: transparent;
}

/*
html {
	scroll-behavior: auto !important;
}
*/

html,
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overscroll-behavior: none;
}

body {
	background-color: var(--color);
}

.containergsap {
	position: relative;
	z-index: 10;
	background-color: #fff; /* Ensure it's opaque so you can't see the next section yet */
}

/* The section that comes immediately after */
.two_columnscontainergsap + section,
.next-section {
	position: relative;
	z-index: 5; /* Lower than the GSAP container */
	margin-top: -100vh; /* Optional: Pulls it up if you want it pre-positioned */
}

@keyframes scroll-left {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}
}
.animate-scroll-left {
	animation: scroll-left linear infinite;
}

.interface-interface-skeleton__body
	> .admin-ui-navigable-region.interface-interface-skeleton__sidebar:has(
		.interface-complementary-area__fill
	) {
	width: 25vw !important;
}

.interface-interface-skeleton__body
	> .admin-ui-navigable-region.interface-interface-skeleton__sidebar
	> .interface-complementary-area__fill {
	width: 25vw !important;
}

.interface-interface-skeleton__body
	> .admin-ui-navigable-region.interface-interface-skeleton__sidebar
	> .interface-complementary-area__fill
	> .interface-complementary-area.editor-sidebar {
	width: 25vw !important;
}

[data-testimonials-animated-bg] {
	transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty)));
	will-change: transform, filter;
}

[data-testimonials-bg] {
	transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty)));
}

[data-animate] {
	--y: 100%;
	/*pointer-events: none;*/
	transform: translateY(var(--y));
	display: inline-block;
	backface-visibility: hidden;
}

[data-hero-parallax] {
	--x: 0px;
	--y: 0px;
	transform: translate3d(
		var(--x, 0),
		calc(var(--y, 0) + var(--parallax-y, 0)),
		0
	);
}

[data-toggle-marker] {
	height: 100%;
	width: 50%;
	border: 4px solid #fff;
	position: absolute;
	left: 0;
	top: 0;
	background-color: #01201f;
	border-radius: 100px;
	transition: transform ease-in-out 0.3s;
	transform: translateX(var(--index));
}

[data-btn-down]:first-child {
	top: -34px;
	position: relative;
	animation: arrowDownLoop 0.6s linear infinite;
	animation-delay: 0.45s;
}

[data-btn-down]:last-child {
	top: -34px;
	position: relative;
	animation: arrowDownLoop 0.6s linear infinite;
	animation-delay: 0.45s;
}

[data-btn-down]:nth-child(1) {
	/*animation-delay: 0.1s;*/
}

@keyframes arrowDownLoop {
	0% {
		transform: translateY(0);
	}

	100% {
		transform: translateY(34px);
	}
}

.toggle-selector__button {
	padding: 4px 24px;
	font-weight: 400;
	font-size: 16px;
}

.toggle-selector__button__text {
	display: block;
	z-index: 2;
	position: relative;
}

@media (min-width: 768px) {
	.toggle-selector__button__text {
		/*min-width: 160px;*/
	}
}

/* .toggle-selector__button.active {
	color: #01201f;
}

@media (min-width: 1024px) {
	.toggle-selector__button.active {
		background-color: transparent;
	}
} */

.toggle-selector__button--secondary {
	padding: 4px 12px;
	font-weight: 400;
	font-size: 16px;
	border-radius: 100px;
	border: 1px solid rgba(255, 255, 255, 0.5);
}

.toggle-selector__button--secondary.active {
	color: #01201f;
	background-color: white;
	font-weight: 700;
}

@media (min-width: 1024px) {
	.toggle-selector__button--secondary {
		border-radius: none;
		padding: 4px 24px;
		border: 0;
	}

	.toggle-selector__button--secondary.active {
		background-color: transparent;
	}
}

[data-parallax-mask] {
	height: 120%;
	width: 100%;
	position: absolute;
	top: 50%;
	left: 0;
	--y: -50%;
	--m: 0%;
	transform: translateY(calc(var(--y) + var(--m)));
	object-position: center;
	object-fit: cover;
}

/* `will-change: transform` forces a dedicated GPU compositor layer per
 * image. With ~18 parallaxed housing images on a single page that adds
 * up to ~150 MB of GPU memory just for the layers themselves — enough
 * to push iOS Safari over its per-tab budget and trigger a reload. Limit
 * it to devices that ACTUALLY animate the parallax (mouse / fine pointer
 * = desktop) so touch devices skip both the layer promotion AND the
 * ScrollTrigger work entirely (see `initParallax` early-return on
 * `isTouch` in main.js). */
@media (hover: hover) and (pointer: fine) {
	[data-parallax-mask] {
		will-change: transform;
	}
}

[data-video-card-play]:before {
	content: "";
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* MAIN NAV */

#main-nav.active #main-nav-bar {
	backdrop-filter: blur(20px);
	z-index: 999;
}

#main-nav-menu.active {
	display: flex;
}

#menu-toggle.active span:first-child {
	transform: rotate(45deg);
	position: relative;
	top: 4px;
	left: 0;
}

#menu-toggle.active span:last-child {
	transform: rotate(-45deg);
	left: 0px;
	position: relative;
	top: -3px;
}

.menu-open [data-btn-down-wrapper] {
	display: none;
}

.menu-open #menu-toggle span {
	background-color: #efece6;
}

.menu-open #main-nav-logo {
	color: #fff;
}

.menu-open #main-nav-bar {
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.menu-open #main-nav-menu li > a,
.menu-open #main-nav-menu li > span {
	color: #efece6;
}

.menu-open #main-nav-menu .main-nav-bar-cta {
	border-color: #EFECE6;
}

/* html:has(body.menu-open) {
	max-height: var(--maxh);
	overflow: scroll;
}

body.menu-open {
	max-height: var(--maxh);
	overflow: hidden;
} */


html:has(body.search-open),
body.search-open {
	position: relative;
	max-height: 100dvh;
	overflow: hidden;
}


#main-nav-search-close span:first-child {
	transform: rotate(45deg);
	position: relative;
	top: 4px;
	left: 0;
}

#main-nav-search-close span:last-child {
	transform: rotate(-45deg);
	left: 0px;
	position: relative;
	top: -3px;
}

#main-nav-search.active {
	min-height: calc(var(--maxh));

}

#main-nav-search.active [data-main-nav-search-header],
#main-nav-search.active [data-main-nav-search-options] {
	display: flex;
}


/*
.menu-open > section {
	display: none;
}

.menu-open .entry-content > section {
	display: none;
}

.menu-open .hentry > section {
	display: none;
}

.menu-open .wp-block-group > section {
	display: none;
}

.menu-open > footer {
	display: none;
}

.menu-open #sticky-btn {
    display: none;
}*/

.menu-open #level-0-mobile:not(.off) {
	display: block;
}

@media (max-width: 1199px) {
	.menu-open #main-nav-sticky {
		display: flex;
	}
}

@media (min-width: 1200px) {
	.menu-open #level-0-mobile {
		display: none;
	}
}

[data-sticky-bar].active {
	background-color: #013633;
	box-shadow: inset 0 1px 0 0 #345e5c;
	z-index: 9992;
	width: 100%;
}

[data-sticky-bar].active [data-search-bar-opt] {
	display: flex;
}

[data-sticky-bar].active [data-sticky-bar-tag] {
	display: flex;
}

[data-sticky-bar].active [data-sticky-bar-text] {
	display: flex;
}

/* Price reveal — mirrors the [data-sticky-bar-tag] rule above so the
   price paragraph (hidden by the `sticky:hidden` Tailwind utility at the
   1400px+ breakpoint) becomes visible when the bar is activated by a
   Reservar click. */
[data-sticky-bar].active [data-sticky-price] {
	display: block;
}


@media (max-width: 1023px) {

	[data-sticky-bar].active {
		height: 100dvh;
		top: 0;
	}

	/* Scroll lock when the sticky bar is open.
	   The previous version used `body:has([data-sticky-bar].active)
	   { position: fixed; }` — that hung mobile Chrome on activation
	   because `:has()` triggered a global selector re-evaluation +
	   reflow on every Reservar tap. The replacement class is set/
	   removed in JS alongside the `.active` toggle (search
	   `becasa-scroll-lock` in main.js). */
	html.becasa-scroll-lock,
	html.becasa-scroll-lock body {
		overflow: hidden;
	}

	[data-sticky-bar].active {
		top: 0;
		bottom: auto;
		height: 100dvh;
		z-index: 9992;

	}

	[data-sticky-bar].active [data-sticky-bar-header] {
		display: block;
	}

	[data-sticky-bar].active #sticky-close {
		display: flex;
	}
	
	[data-sticky-bar].active [data-sticky-bar-title]{
		display: block;
	}

	#sticky-close span:first-child {
		transform: rotate(45deg);
		position: relative;
		top: 4px;
		left: 0;
	}

	#sticky-close span:last-child {
		transform: rotate(-45deg);
		left: 0px;
		position: relative;
		top: -3px;
	}

}

/* RADIO CUSTOM */

[data-radio-custom]:checked + span > span::before {
	content: "";
	width: 12px;
	height: 12px;
	border-radius: 100%;
	background-color: #025754;
}

[data-checkbox-custom]:checked + span > span::before {
	content: "";
	width: 12px;
	height: 12px;
	background-color: #025754;
}

[data-checkbox-custom]:checked + span > span::after {
	content: "";
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="7" viewBox="0 0 8 7" fill="none"><path d="M0.353516 3.31641L2.85352 5.81641L7.35352 0.316406" stroke="white"/></svg>');
	background-repeat: no-repeat;
	width: 8px;
	height: 8px;
	z-index: 2;
	background-size: contain;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
}

/* FLATPICKR */

.flatpickr-calendar {
	visibility: hidden;
	min-height: 305px;
	border-radius: 24px;
	padding: 16px;
	box-sizing: content-box;
}

.flatpickr-wrapper {
	position: absolute;
	width: 100%;
	bottom: 0;
}

.flatpickr-calendar.static {
	top: 0;
	left: 50%;
	transform: translateY(18px) translateX(-50%);
	position: absolute;
	margin-top: 0;
}

span.flatpickr-weekday {
	font-family: "Basis Grotesque Pro";
	font-size: 12px;
	line-height: 14px;
	font-weight: 400;
	text-transform: uppercase;
	color: #025754;
}

.flatpickr-calendar.static.open {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.flatpickr-rContainer {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.flatpickr-day {
	max-width: none;
	height: 36px;
	line-height: 36px;
	font-family: "Basis Grotesque Pro";
	font-size: 12px;
	line-height: 16px;
	font-weight: 700;
	letter-spacing: 1.5px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.flatpickr-calendar::after,
.flatpickr-calendar::before {
	display: none;
	border-width: 12px;
	left: 50%;
	transform: translateX(-50%);
}

.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus {
	background-color: #025754;
	border: 0;
}

.flatpickr-day.selected.startRange,
.flatpickr-day.selected.endRange {
	border-radius: 100%;
	aspect-ratio: 1;
	width: 36px;
	max-width: 36px;
	background-color: #025754;
	border: 0;
	position: relative;
	z-index: 2;
}

.flatpickr-day.inRange {
	-webkit-box-shadow:
		-5px 0 0 #dbe7e6,
		5px 0 0 #dbe7e6;
	box-shadow:
		-5px 0 0 #dbe7e6,
		5px 0 0 #dbe7e6;
	background: #dbe7e6;
	border-color: #dbe7e6;
}

.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) {
	-webkit-box-shadow: none;
	box-shadow: none;
}

.flatpickr-month .flatpickr-current-month {
	pointer-events: none;
}

.flatpickr-months .flatpickr-month {
	height: auto;
}

.flatpickr-months .flatpickr-month + .flatpickr-month {
	padding-left: 28px;
}

.flatpickr-current-month {
	font-size: 16px;
	line-height: 24px;
	padding: 0;
	left: unset;
	width: unset;
	height: auto;
	transform: none;
	position: relative;
}

.flatpickr-current-month span.cur-month {
	margin: 0;
}

.flatpickr-weekdays {
	gap: 56px;
}

.dayContainer {
	padding: 0 28px 0 0;
}

.dayContainer + .dayContainer {
	padding: 0 0 0 28px;
}

.dayContainer .flatpickr-day:last-child,
.dayContainer .flatpickr-day:has(+ .nextMonthDay) {
	margin-right: auto;
}

.flatpickr-current-month,
.flatpickr-current-month input.cur-year {
	font-weight: 700;
}

.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month {
	left: 16px;
	top: 10px;
}

.flatpickr-months .flatpickr-next-month.flatpickr-next-month {
	right: 16px;
	top: 10px;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
	fill: transparent;
}

@media (min-width: 1024px) {
	.flatpickr-calendar::after,
	.flatpickr-calendar::before {
		display: block;
	}

	.flatpickr-wrapper {
		top: 0;
		bottom: auto;
	}

	.flatpickr-calendar.static {
		top: 0;
		left: 50%;
		transform: translateY(calc(-100% - 18px)) translateX(-50%);
		position: absolute;
		margin-top: 0;
	}
}

@media (min-width: 1024px) {
	#home-search.home-search-sticky {
		position: fixed !important;
		right: 10px;
		top: auto;
		bottom: 130px;
		width: max-content;
	}

	#home-search.home-search-sticky:not(.active) [data-home-search-bar] {
		background-color: transparent;
		backdrop-filter: none;
	}

	#home-search.home-search-sticky:not(.active) [data-home-search-bar-inner] {
		background-color: transparent;
	}

	#home-search.home-search-sticky:not(.active) [data-home-search-bar-opt] {
		display: none;
	}
}

:root :where(.is-layout-flow) > * {
	margin-block-start: 0px !important;
}

.block-editor-block-list__layout.is-root-container
	> :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: none !important;
}

:where(.wp-site-blocks) > :last-child {
	margin-top: 0px;
}

@media (min-width: 1024px) {
	body > footer {
		position: sticky;
		bottom: 0;
	}
}
.block-editor__container [data-toggle-indicator] {
	transform: -50% !important;
}



/* FONT MORPHING */
/*
 * Two text layers crossfade between fonts (roman ↔ italic) on `.is-open`.
 * Both layers sit in the same single-cell CSS grid so the wrapper sizes
 * to the WIDER of the two — without this, the wrapper was sized only by
 * layer-b (position: relative) and layer-a was forced to that width.
 * When layer-a's roman rendering happened to be wider than layer-b's
 * italic rendering (e.g. "Quiénes somos" with PP Kyoto italic vs Basis
 * Grotesque Pro roman), the trailing characters were clipped by the
 * outer <a>'s overflow:hidden — so the user saw "Quiénes" but not "somos".
 */
/*
 * Menu items wrap their two layers in an inner `[data-animate]` span (for
 * the slide-up enter animation); FAQ titles place the two layers directly
 * inside the .morph element. Apply inline-grid to whichever element is
 * the direct parent of the .morph-font layers so both cases get the
 * "wrapper sizes to widest layer" behavior.
 */
.morph [data-animate],
.morph:not(:has([data-animate])) {
	display: inline-grid;
}
.morph .morph-font {
	grid-column: 1;
	grid-row: 1;
	transition: opacity 1.2s ease;
	transform-origin: 0% 50%;
	white-space: nowrap;
}
.morph .morph-font.layer-a { opacity: 1; }
.morph .morph-font.layer-b { opacity: 0; }
.morph.is-open .morph-font.layer-a { opacity: 0; }
.morph.is-open .morph-font.layer-b { opacity: 1; }

/* FIX IOS PROFILE MODULE*/
.profile-module h3,
.profile-module p,
.profile-module [data-card-content] {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    -webkit-font-smoothing: antialiased;
}