/* ==========================================================================
   BONDO PIAYA — Theme Stylesheet
   Aesthetic: Caribbean luxury · editorial · Eunoea-inspired
   ========================================================================== */

:root {
	/* EXACT Eunoea palette */
	--bondo-terracotta-deep: #8A4A35;
	--bondo-terracotta:      #B66E4A;   /* eunoea clay */
	--bondo-clay:            #C57B5A;
	--bondo-blush:           #E8C8B3;
	--bondo-olive:           #9CA084;   /* eunoea sage */

	/* Cream palette (true Eunoea warm cream) */
	--bondo-cream:    #F4EFE6;
	--bondo-paper:    #EFE8DB;
	--bondo-sand:     #E8DFCC;
	--bondo-stone:    #D9CCB3;
	--bondo-ink:      #1F1A14;
	--bondo-charcoal: #2A241C;
	--bondo-mute:     #756656;

	/* Aliases semánticos */
	--bg:        var(--bondo-cream);
	--bg-soft:   var(--bondo-paper);
	--bg-stone:  var(--bondo-stone);
	--text:      var(--bondo-ink);
	--text-mute: var(--bondo-mute);
	--accent:    var(--bondo-terracotta);
	--accent-deep: var(--bondo-terracotta-deep);

	/* Tipografía */
	--font-display: 'Cormorant Garamond', 'Georgia', serif;
	--font-body:    'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* Sizing */
	--container: 1480px;
	--container-narrow: 1080px;
	--gutter: clamp(1.25rem, 4vw, 3.25rem);
	--section-pad: clamp(5rem, 12vw, 11rem);

	/* Tipo escala fluida (más editorial, más grande en display) */
	--fs-xs:    0.72rem;
	--fs-sm:    0.85rem;
	--fs-base:  1rem;
	--fs-lg:    1.125rem;
	--fs-xl:    clamp(1.25rem, 1.5vw, 1.5rem);
	--fs-2xl:   clamp(1.5rem, 2.2vw, 2rem);
	--fs-3xl:   clamp(2rem, 3.5vw, 3rem);
	--fs-4xl:   clamp(2.5rem, 5vw, 4.5rem);
	--fs-5xl:   clamp(3rem, 7vw, 7rem);
	--fs-6xl:   clamp(4rem, 11vw, 11rem);
	--fs-mega:  clamp(6rem, 18vw, 18rem);

	/* Easing */
	--ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--ease-quint:  cubic-bezier(0.83, 0, 0.17, 1);

	/* Header height */
	--header-h: 86px;
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
	font-size: 16px;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	scroll-behavior: smooth;
}
html.lenis, html.lenis body { height: auto; }
html.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

body {
	font-family: var(--font-body);
	font-size: var(--fs-base);
	font-weight: 300;
	line-height: 1.65;
	color: var(--text);
	background: var(--bg);
	overflow-x: hidden;
	min-height: 100vh;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
img { -webkit-user-drag: none; user-select: none; }

a {
	color: inherit;
	text-decoration: none;
	transition: color 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}

button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--bondo-terracotta); color: var(--bondo-cream); }

/* Subtle paper grain */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 1000;
	opacity: 0.03;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' /%3E%3C/svg%3E");
}

.screen-reader-text, .skip-link { position: absolute !important; left: -9999px; }
.skip-link:focus {
	left: 1rem; top: 1rem;
	background: var(--accent-deep); color: var(--bg);
	padding: 0.75rem 1rem; z-index: 9999;
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
	font-family: var(--font-display);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.025em;
	color: var(--text);
}

.h-display {
	font-family: var(--font-display);
	font-weight: 300;
	line-height: 0.95;
	letter-spacing: -0.03em;
}

.h-eyebrow {
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	font-weight: 400;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--accent);
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
}
.h-eyebrow::before {
	content: '';
	width: 28px;
	height: 1px;
	background: currentColor;
}
.h-eyebrow--center { text-align: center; }
.h-eyebrow--center::before { display: none; }

p { max-width: 56ch; }
.p-lead { font-size: var(--fs-lg); line-height: 1.7; color: var(--text-mute); }

em { font-style: italic; }

.h-script {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 300;
}

/* ==========================================================================
   LAYOUT UTILS
   ========================================================================== */
.container {
	max-width: var(--container);
	margin: 0 auto;
	padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-pad); position: relative; }
.section--soft { background: var(--bg-soft); }
.section--stone { background: var(--bg-stone); }
.section--ink {
	background: var(--bondo-ink);
	color: var(--bondo-cream);
}
.section--ink h1, .section--ink h2, .section--ink h3 { color: var(--bondo-cream); }
.section--ink .h-eyebrow { color: var(--bondo-blush); }

/* Section number tag (eunoea) */
.section-num {
	font-family: var(--font-body);
	font-size: 0.75rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--text-mute);
	font-feature-settings: "tnum";
}
.section-num em {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 300;
	font-size: 1.2rem;
	letter-spacing: 0;
	color: var(--accent);
	margin-right: 0.5rem;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	padding: 1rem 1.85rem;
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: 400;
	letter-spacing: 0.04em;
	border-radius: 999px;
	transition: all 0.5s var(--ease-out);
	position: relative;
	overflow: hidden;
	cursor: pointer;
	border: 1px solid transparent;
	white-space: nowrap;
}
.btn svg { transition: transform 0.45s var(--ease-out); flex-shrink: 0; }
.btn:hover svg { transform: translateX(5px); }

.btn--filled {
	background: var(--bondo-ink);
	color: var(--bondo-cream);
}
.btn--filled:hover { background: var(--accent-deep); }

.btn--outline {
	background: transparent;
	color: var(--text);
	border-color: var(--text);
}
.btn--outline:hover { background: var(--text); color: var(--bg); }

.btn--outline.btn--light {
	color: var(--bondo-cream);
	border-color: rgba(246, 240, 231, 0.55);
}
.btn--outline.btn--light:hover {
	background: var(--bondo-cream);
	color: var(--bondo-ink);
	border-color: var(--bondo-cream);
}

.btn--accent { background: var(--accent); color: var(--bondo-cream); }
.btn--accent:hover { background: var(--accent-deep); }

.btn--ghost {
	background: rgba(246, 240, 231, 0.1);
	color: var(--bondo-cream);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-color: rgba(246, 240, 231, 0.3);
}
.btn--ghost:hover { background: var(--bondo-cream); color: var(--bondo-ink); border-color: var(--bondo-cream); }

.btn--lg { padding: 1.2rem 2.4rem; font-size: var(--fs-base); }
.btn--sm { padding: 0.7rem 1.3rem; font-size: 0.78rem; }

.btn--link {
	background: transparent;
	color: var(--text);
	padding: 0.5rem 0;
	border-radius: 0;
	border-bottom: 1px solid currentColor;
}

/* ==========================================================================
   LOADER
   ========================================================================== */
.bondo-loader {
	position: fixed; inset: 0;
	background: var(--bondo-cream);
	z-index: 9999;
	display: grid; place-items: center;
	transition: opacity 0.9s var(--ease-out), visibility 0.9s var(--ease-out);
}
.bondo-loader.is-hidden { opacity: 0; visibility: hidden; }
.bondo-loader__inner { text-align: center; color: var(--accent-deep); }
.bondo-loader__mark {
	width: 92px; height: 92px;
	margin: 0 auto 1.5rem;
	animation: bondoSpin 9s linear infinite;
}
@keyframes bondoSpin { to { transform: rotate(360deg); } }
.bondo-loader__progress {
	width: 220px; height: 1px;
	background: rgba(110, 47, 42, 0.15);
	overflow: hidden;
	position: relative;
}
.bondo-loader__progress span {
	position: absolute; left: 0; top: 0;
	height: 100%; width: 0;
	background: var(--accent-deep);
	animation: bondoLoad 1.7s var(--ease-quint) forwards;
}
@keyframes bondoLoad { to { width: 100%; } }

/* ==========================================================================
   HEADER — Eunoea exact: floating pills L, centered logo, burger R
   ========================================================================== */
.site-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 100;
	padding: 1.25rem var(--gutter);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1.5rem;
	color: var(--bondo-cream);
	pointer-events: none;
	transition: background 0.45s var(--ease-out), padding 0.4s var(--ease-out),
	            color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.site-header > * { pointer-events: auto; }

/* Solid cream bar + thin terracotta divider when over light content */
.site-header.is-light {
	color: var(--text);
	background: var(--bondo-cream);
	padding-top: 0.85rem;
	padding-bottom: 0.85rem;
	box-shadow: 0 1px 0 var(--accent);
}

/* Left: floating pill buttons */
.site-header__left {
	display: flex;
	gap: 0.6rem;
	justify-self: start;
	align-self: start;
}
.header-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.85rem 1.15rem;
	background: var(--bondo-ink);
	color: var(--bondo-cream);
	border: 1px solid var(--bondo-ink);
	border-radius: 999px;
	font-family: var(--font-body);
	font-size: 0.85rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	transition: background 0.45s var(--ease-out), color 0.45s var(--ease-out),
	            border-color 0.45s var(--ease-out), transform 0.35s var(--ease-out),
	            box-shadow 0.45s var(--ease-out);
	box-shadow: 0 4px 24px rgba(31, 26, 20, 0.18);
}
.header-pill--lang {
	gap: 0.4rem;
	padding: 0.7rem 0.95rem;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
}
.header-pill--lang .header-pill__lang {
	opacity: 0.45;
	transition: opacity 0.3s var(--ease-out);
}
.header-pill--lang .header-pill__lang.is-active { opacity: 1; }
.header-pill--lang .header-pill__lang-sep {
	opacity: 0.35;
	margin: 0 0.05rem;
}
.header-pill--lang:hover .header-pill__lang { opacity: 1; }
.header-pill:hover {
	background: var(--accent-deep);
	border-color: var(--accent-deep);
	transform: translateY(-1px);
}
.header-pill svg { flex-shrink: 0; }

/* Pills stay dark in all states (Eunoea behavior) */

/* Center: logo — official Bondo Piaya SVG (inherits color) */
.site-header__logo {
	justify-self: center;
	align-self: start;
	display: inline-flex;
	align-items: center;
	color: inherit;
	transition: opacity 0.35s var(--ease-out);
}
.site-header__logo:hover { opacity: 0.75; }
.site-header__logo img {
	height: 72px;
	width: auto;
	filter: brightness(0) invert(1);
	transition: filter 0.4s var(--ease-out), height 0.4s var(--ease-out);
}
.site-header.is-light .site-header__logo img {
	filter: none;
	height: 56px;
}
.site-header__logo svg {
	height: 78px;
	width: auto;
	color: currentColor;
	display: block;
	transition: color 0.45s var(--ease-out), height 0.4s var(--ease-out);
}
/* On the cream bar, the logo turns terracota (Eunoea signature) */
.site-header.is-light .site-header__logo svg {
	color: var(--accent);
	height: 56px;
}
.site-header__wordmark {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 0.85rem;
	letter-spacing: 0.36em;
	text-transform: uppercase;
	text-indent: 0.36em;
}

/* Right: burger always visible */
.site-header__burger {
	justify-self: end;
	align-self: start;
	width: 56px;
	height: 56px;
	background: var(--bondo-ink);
	color: var(--bondo-cream);
	border: 1px solid var(--bondo-ink);
	border-radius: 999px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	padding: 0;
	box-shadow: 0 4px 24px rgba(31, 26, 20, 0.18);
	transition: background 0.45s var(--ease-out), color 0.45s var(--ease-out),
	            border-color 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}
.site-header__burger:hover { background: var(--accent-deep); border-color: var(--accent-deep); }

/* Burger stays dark in all states */
.site-header__burger span {
	display: block;
	width: 22px;
	height: 1.5px;
	background: currentColor;
	transition: transform 0.4s var(--ease-out), opacity 0.3s;
}
.site-header__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-header__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.site-header__burger span {
	display: block;
	width: 22px; height: 1.5px;
	background: currentColor;
	transition: transform 0.4s var(--ease-out), opacity 0.3s;
}
.site-header__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-header__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile / slide-in menu — Eunoea-style: centered, serif, no underlines */
.mobile-menu {
	position: fixed; inset: 0;
	background: var(--bondo-cream);
	z-index: 99;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.55s var(--ease-out), visibility 0.55s var(--ease-out);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	padding: clamp(2rem, 5vw, 3.5rem) 2rem;
	overflow-y: auto;
}
.mobile-menu[aria-hidden="false"] { opacity: 1; visibility: visible; }

/* Hide the header logo while the mobile menu is open — avoids two logos showing at once */
body:has(.mobile-menu[aria-hidden="false"]) .site-header__logo {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s var(--ease-out);
}

.mobile-menu__brand {
	color: var(--text);
	display: flex;
	justify-content: center;
	width: 100%;
}
.mobile-menu__brand svg,
.mobile-menu__brand img {
	height: 130px;
	width: auto;
	color: var(--text);
	transform: translateY(-12px);
	opacity: 0;
	transition: transform 0.7s var(--ease-out), opacity 0.7s;
	transition-delay: 0.05s;
}
.mobile-menu[aria-hidden="false"] .mobile-menu__brand svg,
.mobile-menu[aria-hidden="false"] .mobile-menu__brand img {
	transform: translateY(0);
	opacity: 1;
}

.mobile-menu__nav {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
}
.mobile-menu__list {
	list-style: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.85rem;
	margin: 0;
	padding: 0;
	text-align: center;
	width: 100%;
}
.mobile-menu__list li a {
	font-family: var(--font-display);
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	font-weight: 400;
	letter-spacing: -0.015em;
	color: var(--text);
	display: inline-block;
	text-decoration: none;
	transform: translateY(20px);
	opacity: 0;
	transition: transform 0.55s var(--ease-out), opacity 0.55s, color 0.3s;
	padding: 0.15rem 0.5rem;
}
.mobile-menu__list li a:hover { color: var(--accent); font-style: italic; }
.mobile-menu[aria-hidden="false"] .mobile-menu__list li a { transform: translateY(0); opacity: 1; }
.mobile-menu[aria-hidden="false"] .mobile-menu__list li:nth-child(1) a { transition-delay: 0.15s; }
.mobile-menu[aria-hidden="false"] .mobile-menu__list li:nth-child(2) a { transition-delay: 0.2s; }
.mobile-menu[aria-hidden="false"] .mobile-menu__list li:nth-child(3) a { transition-delay: 0.25s; }
.mobile-menu[aria-hidden="false"] .mobile-menu__list li:nth-child(4) a { transition-delay: 0.3s; }
.mobile-menu[aria-hidden="false"] .mobile-menu__list li:nth-child(5) a { transition-delay: 0.35s; }
.mobile-menu[aria-hidden="false"] .mobile-menu__list li:nth-child(6) a { transition-delay: 0.4s; }
.mobile-menu[aria-hidden="false"] .mobile-menu__list li:nth-child(7) a { transition-delay: 0.45s; }
.mobile-menu[aria-hidden="false"] .mobile-menu__list li:nth-child(n+8) a { transition-delay: 0.5s; }

.mobile-menu__social {
	display: flex;
	justify-content: center;
	gap: 1.25rem;
	padding-top: 1.25rem;
}
.mobile-menu__social a {
	color: var(--text);
	width: 36px; height: 36px;
	display: grid; place-items: center;
	transition: color 0.3s, transform 0.3s;
}
.mobile-menu__social a:hover { color: var(--accent); transform: translateY(-2px); }

/* ==========================================================================
   SITE CONTENT
   ========================================================================== */
.site-content { min-height: 100vh; }

/* ==========================================================================
   REVEAL ANIMATIONS
   ========================================================================== */
[data-reveal] {
	opacity: 0;
	transition: opacity 1.2s var(--ease-out), transform 1.2s var(--ease-out);
	transition-delay: var(--reveal-delay, 0ms);
	will-change: opacity, transform;
	/* Failsafe: auto-show after 3s even if JS doesn't add .is-visible.
	   Prevents content from being hidden forever on slow networks / JS failures. */
	animation: bondo-reveal-failsafe 1.5s ease 3s forwards;
}
@keyframes bondo-reveal-failsafe {
	to { opacity: 1; transform: none; clip-path: inset(0); }
}
[data-reveal="fade-up"]    { transform: translateY(50px); }
[data-reveal="fade-down"]  { transform: translateY(-50px); }
[data-reveal="fade-left"]  { transform: translateX(50px); }
[data-reveal="fade-right"] { transform: translateX(-50px); }
[data-reveal="fade"]       { transform: none; }
[data-reveal="zoom"]       { transform: scale(0.94); }
[data-reveal="clip"] {
	clip-path: inset(0 0 100% 0);
	transform: none;
	transition: clip-path 1.6s var(--ease-quint);
	opacity: 1;
}
[data-reveal="clip-up"] {
	clip-path: inset(100% 0 0 0);
	transform: none;
	transition: clip-path 1.6s var(--ease-quint);
	opacity: 1;
}
[data-reveal].is-visible {
	opacity: 1;
	transform: none;
	clip-path: inset(0);
}

/* Stagger children */
[data-stagger] > * {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 0.95s var(--ease-out), transform 0.95s var(--ease-out);
}
[data-stagger].is-visible > * { opacity: 1; transform: none; }
[data-stagger].is-visible > *:nth-child(1) { transition-delay: 0ms; }
[data-stagger].is-visible > *:nth-child(2) { transition-delay: 90ms; }
[data-stagger].is-visible > *:nth-child(3) { transition-delay: 180ms; }
[data-stagger].is-visible > *:nth-child(4) { transition-delay: 270ms; }
[data-stagger].is-visible > *:nth-child(5) { transition-delay: 360ms; }
[data-stagger].is-visible > *:nth-child(6) { transition-delay: 450ms; }
[data-stagger].is-visible > *:nth-child(7) { transition-delay: 540ms; }
[data-stagger].is-visible > *:nth-child(8) { transition-delay: 630ms; }

[data-parallax] { will-change: transform; }

/* Word/letter reveal for big titles */
.split-line { overflow: hidden; display: block; }
.split-line__inner {
	display: block;
	transform: translateY(110%);
	transition: transform 1.2s var(--ease-quint);
	transition-delay: var(--line-delay, 0ms);
}
.is-visible .split-line__inner,
[data-reveal="lines"].is-visible .split-line__inner { transform: translateY(0); }

/* ==========================================================================
   MARQUEE — large serif italic, scrolls horizontally
   ========================================================================== */
.bondo-marquee {
	overflow: hidden;
	padding-block: clamp(2rem, 5vw, 4rem);
	background: var(--bg);
	position: relative;
}
.bondo-marquee--ink { background: var(--bondo-ink); color: var(--bondo-blush); }
.bondo-marquee__track {
	display: inline-flex;
	gap: 3rem;
	white-space: nowrap;
	animation: marqueeScroll 38s linear infinite;
	will-change: transform;
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(3.5rem, 10vw, 9rem);
	letter-spacing: -0.025em;
	line-height: 1;
	color: var(--text);
}
.bondo-marquee--ink .bondo-marquee__track { color: var(--bondo-blush); }
.bondo-marquee__track span {
	display: inline-flex;
	align-items: center;
	gap: 3rem;
	padding-right: 3rem;
}
.bondo-marquee__track span::after {
	content: '✦';
	font-style: normal;
	font-size: 0.5em;
	color: var(--accent);
	opacity: 0.7;
}
@keyframes marqueeScroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* ==========================================================================
   HERO SECTION (Eunoea-style: centered, cinematic)
   ========================================================================== */
.hero {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--header-h) 0 0;
	overflow: hidden;
	color: var(--bondo-cream);
	text-align: center;
	/* set by JS: 0 at top, 1 at end of hero */
	--scroll-progress: 0;
	/* pull next section up by 1px to mask any subpixel seam */
	margin-bottom: -1px;
}

/* Scroll-driven cream wash that "wipes" the hero away.
   Always anchors a fully-opaque cream stripe at the very bottom edge
   so the hero blends seamlessly into the cream intro section below. */
.hero::after {
	content: '';
	position: absolute;
	left: 0; right: 0; top: 0;
	bottom: -2px; /* bleed past hero edge so anti-aliasing can't show */
	z-index: 5;
	pointer-events: none;
	background: linear-gradient(
		to top,
		var(--bondo-cream) 0%,
		var(--bondo-cream) calc(2% + var(--scroll-progress) * 58%),
		rgba(244, 239, 230, 0) calc(15% + var(--scroll-progress) * 75%)
	);
	/* opacity grows with scroll, but the bottom stripe is always solid */
	opacity: calc(0.001 + var(--scroll-progress) * 1.1);
	transition: opacity 0.1s linear;
}

/* A second permanent layer: a thin always-on cream gradient at the bottom
   ~12% of the hero, so even at rest the boundary blends. Very subtle. */
.hero__overlay::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 14%;
	background: linear-gradient(to top, var(--bondo-cream) 0%, rgba(244,239,230,0) 100%);
	pointer-events: none;
	opacity: calc(1 - var(--scroll-progress) * 0.5);
}

.hero__slider {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}
.hero__slide {
	position: absolute; inset: 0;
	opacity: 0;
	transition: opacity 1.8s var(--ease-out);
}
.hero__slide.is-active { opacity: 1; }
.hero__slide img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	transform: scale(1.06);
}
.hero__slide.is-active img {
	animation: heroKenburns 9s var(--ease-out) forwards;
}
@keyframes heroKenburns {
	from { transform: scale(1.06) translateY(0); }
	to   { transform: scale(1.16) translateY(-2.5%); }
}

/* Tone tints per slide */
.hero__slide[data-tone="morning"] img { filter: brightness(1.05) saturate(0.95); }
.hero__slide[data-tone="sunset"]  img { filter: brightness(1.0)  saturate(1.05); }
.hero__slide[data-tone="night"]   img { filter: brightness(0.85) saturate(0.9); }

.hero__overlay {
	position: absolute; inset: 0;
	z-index: 1;
	background:
		linear-gradient(180deg,
			rgba(31, 26, 20, 0.55) 0%,
			rgba(31, 26, 20, 0.10) 28%,
			rgba(31, 26, 20, 0.32) 65%,
			rgba(31, 26, 20, 0.78) 100%),
		radial-gradient(ellipse at center, transparent 38%, rgba(31, 26, 20, 0.4) 100%);
	pointer-events: none;
}

.hero__content {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: block;
}

/* Per-slide content blocks — stacked, only is-active is shown */
.hero__slide-content {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.4rem;
	padding: var(--header-h) var(--gutter) 0;
	max-width: var(--container);
	margin: 0 auto;
	left: 0; right: 0;
	text-align: center;
	opacity: 0;
	visibility: hidden;
	transform: translateY(20px);
	transition: opacity 0.9s ease, transform 0.9s ease, visibility 0s linear 0.9s;
	pointer-events: none;
}
.hero__slide-content.is-active {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 0.9s ease, transform 0.9s ease, visibility 0s linear 0s;
	pointer-events: auto;
}

.hero__cta {
	margin-top: 0.6rem;
}

.hero__eyebrow {
	font-size: 0.72rem;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	font-weight: 400;
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
	opacity: 0.95;
}
.hero__eyebrow::before,
.hero__eyebrow::after {
	content: '';
	width: 36px; height: 1px;
	background: currentColor;
	opacity: 0.7;
}

.hero__title {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: clamp(2.2rem, 5.4vw, 5.4rem);
	line-height: 1.08;
	letter-spacing: -0.022em;
	color: inherit;
	margin: 0;
	max-width: 1000px;
	text-wrap: balance;
}
.hero__title-line {
	display: block;
}
.hero__title em {
	font-style: italic;
	font-weight: 300;
	color: inherit;
	margin-left: 0.18em;
}

.hero__subtitle {
	font-size: var(--fs-lg);
	font-weight: 300;
	line-height: 1.7;
	max-width: 540px;
	opacity: 0.9;
	margin: 0 auto;
}

.hero__cta-row {
	display: inline-flex;
	gap: 0.75rem;
	margin-top: 1rem;
	flex-wrap: wrap;
	justify-content: center;
}

.hero__cta {
	background: var(--bondo-cream);
	color: var(--bondo-ink);
	border-color: var(--bondo-cream);
}
.hero__cta:hover {
	background: var(--accent);
	color: var(--bondo-cream);
	border-color: var(--accent);
}

/* Hero content: scroll-driven fade-up */
.hero__content {
	will-change: transform, opacity;
	transform: translateY(calc(var(--scroll-progress) * -80px));
	opacity: calc(1 - var(--scroll-progress) * 1.4);
	transition: opacity 0.1s linear, transform 0.1s linear;
}
.hero__subtitle {
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.65;
	max-width: 640px;
	opacity: 0.92;
	margin: 0 auto;
}

/* Thumbs + arrows fade out faster */
.hero__thumbs,
.hero__arrows {
	will-change: opacity, transform;
	opacity: calc(1 - var(--scroll-progress) * 2);
	transform: translateY(calc(var(--scroll-progress) * 40px));
	transition: opacity 0.1s linear, transform 0.1s linear;
}

/* Slider image: subtle parallax + zoom as you scroll */
.hero__slider {
	will-change: transform;
	transform: scale(calc(1 + var(--scroll-progress) * 0.06)) translateY(calc(var(--scroll-progress) * 30px));
	transition: transform 0.1s linear;
}

.hero__scroll {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.85rem;
	font-size: 0.65rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
}
.hero__scroll-line {
	width: 1px;
	height: 60px;
	background: rgba(246, 240, 231, 0.3);
	position: relative;
	overflow: hidden;
}
.hero__scroll-line::after {
	content: '';
	position: absolute;
	left: 0; top: -100%;
	width: 100%; height: 100%;
	background: var(--bondo-blush);
	animation: heroScroll 2.6s var(--ease-in-out) infinite;
}
@keyframes heroScroll {
	0%   { top: -100%; }
	60%  { top: 100%; }
	100% { top: 100%; }
}

/* Bottom-left thumbnail carousel (Eunoea exact) */
.hero__thumbs {
	position: absolute;
	bottom: clamp(1.5rem, 4vw, 2.5rem);
	left: clamp(1.5rem, 4vw, 2.5rem);
	z-index: 4;
	display: flex;
	gap: 0.5rem;
	padding: 0.4rem;
	background: rgba(244, 239, 230, 0.12);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-radius: 6px;
	border: 1px solid rgba(244, 239, 230, 0.18);
}
.hero__thumb {
	position: relative;
	width: clamp(80px, 10vw, 130px);
	aspect-ratio: 5/3;
	border-radius: 4px;
	overflow: hidden;
	padding: 0;
	cursor: pointer;
	transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
	background: rgba(0, 0, 0, 0.2);
	border: 0;
}
.hero__thumb img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--ease-out), filter 0.4s;
	filter: brightness(0.65) saturate(0.85);
}
.hero__thumb:hover img {
	transform: scale(1.06);
	filter: brightness(0.85) saturate(1);
}
.hero__thumb.is-active {
	transform: translateY(-4px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.hero__thumb.is-active img {
	filter: brightness(1) saturate(1.05);
	transform: scale(1.04);
}
.hero__thumb-label {
	position: absolute;
	left: 0.4rem; bottom: 0.3rem;
	font-family: var(--font-body);
	font-size: 0.62rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bondo-cream);
	z-index: 2;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* Bottom-right prev/next arrows */
.hero__arrows {
	position: absolute;
	bottom: clamp(1.5rem, 4vw, 2.5rem);
	right: clamp(1.5rem, 4vw, 2.5rem);
	z-index: 4;
	display: flex;
	gap: 0.5rem;
}
.hero__arrow {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(244, 239, 230, 0.12);
	border: 1px solid rgba(244, 239, 230, 0.3);
	color: var(--bondo-cream);
	display: grid;
	place-items: center;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	cursor: pointer;
	transition: all 0.35s var(--ease-out);
}
.hero__arrow:hover {
	background: var(--bondo-cream);
	color: var(--bondo-ink);
	border-color: var(--bondo-cream);
}

/* ==========================================================================
   INTRO
   ========================================================================== */
.intro {
	padding-block: var(--section-pad);
	background: var(--bg);
	position: relative;
	z-index: 2; /* sit above hero so the boundary is invisible */
}
.intro__inner {
	max-width: var(--container);
	margin: 0 auto;
	padding-inline: var(--gutter);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(3rem, 8vw, 9rem);
	align-items: center;
}

.intro__media {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 0.85fr;
	gap: 1.25rem;
	align-items: start;
}
.intro__media-main, .intro__media-secondary {
	overflow: hidden;
	border-radius: 4px;
	background: var(--bg-stone);
}
.intro__media-main { aspect-ratio: 3/4; }
.intro__media-secondary {
	aspect-ratio: 1;
	margin-top: 5.5rem;
}
.intro__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 1.6s var(--ease-out);
}
.intro__media:hover img { transform: scale(1.05); }

.intro__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }

.intro__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(1.5rem, 3.2vw, 3rem);
	line-height: 1.12;
	letter-spacing: -0.018em;
	white-space: pre-line;
}
.intro__title em { color: var(--accent); }

.intro__desc {
	font-size: var(--fs-lg);
	color: var(--text-mute);
	line-height: 1.75;
	max-width: 50ch;
}

.intro__features {
	list-style: none;
	padding: 0;
	margin: 1.25rem 0 0.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
	max-width: 60ch;
}
.intro__feature {
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text, currentColor);
	background: rgba(0,0,0,0.04);
	border: 1px solid rgba(0,0,0,0.08);
	padding: 6px 11px;
	border-radius: 999px;
	white-space: nowrap;
}

.intro__decoration {
	position: absolute;
	right: -2rem; top: -2rem;
	width: 140px; height: 140px;
	border: 1px solid var(--accent);
	border-radius: 50%;
	z-index: -1;
	opacity: 0.35;
	pointer-events: none;
}

/* ==========================================================================
   MANIFESTO — Eunoea editorial: huge serif statement + grow-on-scroll image
   ========================================================================== */
.manifesto {
	background: var(--bondo-cream);
	color: var(--text);
	padding-block: clamp(5rem, 11vw, 9rem) clamp(3rem, 6vw, 5rem);
	overflow: hidden;
	position: relative;
}

.manifesto__text-wrap {
	max-width: 1200px;
	margin: 0 auto clamp(4rem, 9vw, 8rem);
	padding-inline: var(--gutter);
}

.manifesto__text {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(1.1rem, 2.4vw, 2.2rem);
	line-height: 1.35;
	letter-spacing: -0.018em;
	text-align: center;
	color: var(--bondo-stone);
	margin: 0;
}

/* Generic word-reveal animation: any element with [data-word-reveal]
   gets its words wrapped in <span class="word"> by JS, then each word
   interpolates from sand → ink based on its own --p (0 → 1) scroll progress. */
[data-word-reveal] .word {
	display: inline-block;
	color: color-mix(
		in srgb,
		var(--bondo-stone) calc((1 - var(--p, 0)) * 100%),
		var(--text)        calc(var(--p, 0) * 100%)
	);
	transition: color 0.18s linear;
	will-change: color;
}
/* Fallback for browsers without color-mix */
@supports not (color: color-mix(in srgb, red, blue)) {
	[data-word-reveal] .word { color: var(--bondo-stone); }
	[data-word-reveal] .word.is-on { color: var(--text); transition: color 0.4s var(--ease-out); }
}

/* Featured image / video that grows from a confined center frame to
   full-bleed (edge to edge) as the user scrolls. --grow goes 0 → 1
   driven by JS via [data-grow]. */
.manifesto__featured {
	--grow: 0;
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow: hidden;
}
.manifesto__featured-frame {
	position: relative;
	overflow: hidden;
	background: var(--bg-stone);
	/* Width: 60vw at rest → 100vw fully grown (full-bleed) */
	width: calc(60vw + var(--grow, 0) * 40vw);
	/* Height: starts shorter, grows taller for cinematic feel */
	height: calc(60vh + var(--grow, 0) * 25vh);
	max-height: 92vh;
	/* Border-radius softens to nearly zero at full-bleed */
	border-radius: calc(14px - var(--grow, 0) * 12px);
	/* Sombra se reduce a medida que crece */
	box-shadow: 0 calc(30px - var(--grow, 0) * 30px) 60px -25px rgba(31, 26, 20, 0.28);
	will-change: width, height, border-radius;
}
.manifesto__featured-frame img,
.manifesto__featured-frame video {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	/* Counter-zoom: starts 1.1, settles 1.0 ("la cámara se asienta") */
	transform: scale(calc(1.1 - var(--grow, 0) * 0.1));
	will-change: transform;
}
.manifesto__caption {
	margin-top: 1.5rem;
	font-size: 0.75rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--text-mute);
	text-align: center;
}

/* ==========================================================================
   RESIDENCIAS — Eunoea brand-intro: title L | tall image | small image + copy + CTA
   ========================================================================== */
.residencias {
	background: var(--bg);
	padding-block: clamp(4rem, 8vw, 7rem);
	position: relative;
}
.residencias__inner {
	max-width: var(--container);
	margin: 0 auto;
	padding-inline: var(--gutter);
	display: grid;
	grid-template-columns: 0.85fr 1.3fr 1fr;
	gap: clamp(1.5rem, 3vw, 3rem);
	align-items: start;
}

.residencias__title-col {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	padding-top: 1rem;
	max-width: 24ch;
}
.residencias__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(0.95rem, 1.4vw, 1.4rem);
	line-height: 1.28;
	letter-spacing: -0.012em;
	color: var(--bondo-stone); /* sand at rest — words animate to ink on scroll */
	margin: 0;
}
.residencias__title em { color: var(--accent); font-style: italic; }

.residencias__image {
	overflow: hidden;
	border-radius: 4px;
	background: var(--bg-stone);
	width: 100%;
}
.residencias__image img {
	width: 100%; height: 100%;
	display: block;
	object-fit: cover;
	transition: transform 1.6s var(--ease-out);
}
.residencias__image:hover img { transform: scale(1.04); }

.residencias__image--main {
	aspect-ratio: 4/5;
	min-height: 460px;
}

.residencias__side-col {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}
.residencias__image--secondary {
	aspect-ratio: 5/4;
	min-height: 280px;
}

.residencias__desc {
	font-size: 0.95rem;
	line-height: 1.75;
	color: var(--text-mute);
	max-width: 38ch;
	margin: 0;
}

.residencias__cta {
	align-self: flex-start;
}

/* ==========================================================================
   APARTAMENTOS — 5×2 explicit grid; center cell spans both rows and grows
   on scroll, revealing a text + CTA overlay (Eunoea "The Residences")
   ========================================================================== */
.apartamentos {
	background: var(--bg);
	padding-block: clamp(4rem, 8vw, 7rem);
	overflow: hidden; /* clip the grow when it spills past the viewport edge */
}
/* Header keeps the centered, padded container */
.apartamentos__header {
	max-width: var(--container);
	margin: 0 auto clamp(3rem, 5vw, 5rem);
	padding-inline: var(--gutter);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}
.apartamentos__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(2rem, 3.6vw, 3.4rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--bondo-stone);
	max-width: 22ch;
	margin: 0;
}

/* 5 cols × 2 rows, FULL-BLEED (touches the viewport edges).
   Cols 1, 3, 5 span both rows (tall). Cols 2 and 4 have stacked top + bottom.
   All 5 columns end at the same baseline. */
.apartamentos__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: 1fr 1fr;
	gap: 0.65rem;
	position: relative;
	width: 100%;
	padding-inline: 0; /* edge to edge */
	height: clamp(520px, 70vh, 780px);
}

.ap-photo {
	overflow: hidden;
	border-radius: 4px;
	background: var(--bg-stone);
}
.ap-photo img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 1.4s var(--ease-out);
}
.ap-photo:hover img { transform: scale(1.05); }

/* Single-image columns span both rows (tall, full gallery height) */
.ap-photo--c1  { grid-column: 1; grid-row: 1 / -1; }
.ap-photo--c5  { grid-column: 5; grid-row: 1 / -1; }
/* Double-image columns: one cell per row */
.ap-photo--c2a { grid-column: 2; grid-row: 1; }
.ap-photo--c2b { grid-column: 2; grid-row: 2; }
.ap-photo--c4a { grid-column: 4; grid-row: 1; }
.ap-photo--c4b { grid-column: 4; grid-row: 2; }

/* CENTER cell: spans both rows. The featured image is ALWAYS visible (no
   fade-in) and grows outward over the side cells as the user scrolls. */
.ap-center {
	--grow: 0;
	grid-column: 3;
	grid-row: 1 / -1;
	position: relative;
	z-index: 10;
}

/* Base img is hidden — featured does all the visible work */
.ap-center__base { display: none; }

/* Featured grow layer. width/height are set DIRECTLY by JS (initGrowOnScroll)
   so we don't depend on browser calc() interpolation. CSS only handles the
   visual decoration (radius, shadow, opacity) tied to --grow. */
.ap-center__featured {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	/* Height matches the cell (= same vertical position as side photos).
	   JS overrides width on scroll (see initGrowOnScroll) */
	width: 22vw;
	height: 100%;
	overflow: hidden;
	border-radius: calc(4px * (1 - var(--grow, 0) * 0.6));
	box-shadow: 0 calc(var(--grow, 0) * 30px) 70px -20px rgba(31, 26, 20, 0.45);
	z-index: 11;
	will-change: width;
}

/* Side photos translate outward as the center grows */
.ap-photo {
	transition: transform 0.18s linear;
	will-change: transform;
}
.ap-center__featured img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}

/* Overlay text + CTA on top of the grown image. Opacity is set by JS directly. */
.ap-center__overlay {
	position: absolute;
	inset: 0;
	z-index: 12;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	color: var(--bondo-cream);
	padding: clamp(1.5rem, 3vw, 2.5rem);
	background:
		radial-gradient(ellipse at center, rgba(31, 26, 20, 0.55) 0%, rgba(31, 26, 20, 0.75) 100%);
	opacity: 0; /* JS sets this from grow */
	pointer-events: none;
	will-change: opacity;
}
.ap-center__desc {
	font-size: clamp(1rem, 1.3vw, 1.25rem);
	line-height: 1.7;
	max-width: 50ch;
	margin: 0 auto 1.75rem;
	font-weight: 300;
	color: var(--bondo-cream);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.ap-center__desc {
	font-size: clamp(0.9rem, 1.1vw, 1.05rem);
	line-height: 1.7;
	max-width: 46ch;
	margin: 0 auto 1.75rem;
	font-weight: 300;
}
.ap-center__cta {
	background: var(--bondo-cream);
	color: var(--bondo-ink);
	border-color: var(--bondo-cream);
}
.ap-center__cta:hover {
	background: var(--accent);
	color: var(--bondo-cream);
	border-color: var(--accent);
}

/* ==========================================================================
   AMENIDADES (Eunoea accordion: title L, copy + CTA R, list + image below)
   ========================================================================== */
.amenidades {
	padding-block: clamp(4rem, 8vw, 7rem);
	background: var(--bg);
	overflow: hidden;
	position: relative;
}
.amenidades__inner {
	max-width: var(--container);
	margin: 0 auto;
	padding-inline: var(--gutter);
}
.amenidades__header {
	display: grid;
	grid-template-columns: 1.4fr 0.6fr;
	gap: 3rem;
	margin-bottom: clamp(3rem, 5vw, 4.5rem);
	align-items: end;
}
.amenidades__header-left {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	max-width: 56ch;
}
.amenidades__header-right {
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
}
.amenidades__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(2rem, 3.6vw, 3.4rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--text);
	margin: 0;
	max-width: 18ch;
}
.amenidades__title em { color: var(--accent); font-style: italic; }
.amenidades__desc {
	font-size: 0.95rem;
	color: var(--text-mute);
	line-height: 1.7;
	max-width: 44ch;
	margin: 0;
}
.amenidades__cta { align-self: flex-start; }

.amenidades__tabs {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 3rem;
	align-items: start; /* image stays anchored at top, doesn't push down with accordion */
	min-height: 0;
}

.amenidades__list {
	list-style: none;
	display: flex; flex-direction: column;
	gap: 0;
	border-top: 1px solid rgba(110, 47, 42, 0.25);
	margin: 0; padding: 0;
}
.amenidades__list li { border-bottom: 1px solid rgba(110, 47, 42, 0.25); }

.amenidad__btn {
	width: 100%;
	padding: 1.4rem 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	background: transparent;
	border: 0;
	font-family: var(--font-display);
	font-size: clamp(1.4rem, 2.4vw, 2rem);
	font-weight: 400;
	color: var(--accent-deep);
	text-align: left;
	cursor: pointer;
	transition: color 0.3s var(--ease-out);
	letter-spacing: -0.015em;
}
.amenidad__name {
	position: relative;
	display: inline-block;
	transition: color 0.3s var(--ease-out);
}
/* Underline that grows when active */
.amenidad__name::after {
	content: '';
	position: absolute;
	left: 0; bottom: -2px;
	width: 0; height: 1px;
	background: currentColor;
	transition: width 0.5s var(--ease-out);
}
.amenidades__list li.is-active .amenidad__name {
	color: var(--accent);
}
.amenidades__list li.is-active .amenidad__name::after {
	width: 100%;
}
.amenidad__btn:hover .amenidad__name { color: var(--bondo-ink); }
.amenidades__list li.is-active .amenidad__btn:hover .amenidad__name { color: var(--accent); }

/* + → × icon */
.amenidad__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--accent-deep);
	flex-shrink: 0;
	transition: color 0.3s var(--ease-out);
}
.amenidad__icon-v {
	transform-origin: center;
	transition: transform 0.45s var(--ease-quint);
}
.amenidades__list li.is-active .amenidad__icon { color: var(--accent); }
.amenidades__list li.is-active .amenidad__icon-v {
	transform: rotate(90deg); /* "+" rotates into being part of "×" — visually closing */
	opacity: 0;
}

/* Description that slides down when active */
.amenidad__desc-wrap {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.55s var(--ease-quint);
}
.amenidades__list li.is-active .amenidad__desc-wrap {
	grid-template-rows: 1fr;
}
.amenidad__desc-inner {
	overflow: hidden;
	transition: padding 0.45s var(--ease-out);
}
.amenidad__desc {
	font-family: var(--font-body);
	font-size: 0.92rem;
	line-height: 1.7;
	color: var(--accent-deep);
	opacity: 0.85;
	margin: 0;
	padding-bottom: 0;
	max-width: 46ch;
}
.amenidades__list li.is-active .amenidad__desc-inner {
	padding-bottom: 1.3rem;
}

.amenidades__visual {
	position: sticky;
	top: calc(var(--header-h) + 1.5rem);
	overflow: hidden;
	border-radius: 4px;
	background: transparent;
	aspect-ratio: 4/3;
	width: 100%;
	align-self: start;
}
.amenidades__visual-img {
	position: absolute; inset: 0;
	opacity: 0;
	transition: opacity 0.8s var(--ease-out);
}
.amenidades__visual-img.is-active { opacity: 1; }
.amenidades__visual-img img {
	width: 100%; height: 100%;
	object-fit: contain;
	object-position: center;
	background: transparent;
}

/* Mobile-only image inside accordion item (hidden on desktop) */
.amenidad__mobile-img {
	display: none;
	margin-top: 1rem;
	border-radius: 4px;
	overflow: hidden;
	aspect-ratio: 4/3;
	background: transparent;
}
.amenidad__mobile-img img {
	width: 100%; height: 100%;
	object-fit: contain;
	object-position: center;
	display: block;
}

.amenidades__cta { margin-top: 3rem; }

/* ==========================================================================
   UBICACIÓN — centered header + full-bleed map embed
   ========================================================================== */
.ubicacion {
	background: var(--bg);
	padding-block: clamp(4rem, 8vw, 7rem) 0;
	overflow: hidden;
}
.ubicacion__header {
	max-width: 900px;
	margin: 0 auto clamp(3rem, 6vw, 5rem);
	padding-inline: var(--gutter);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
}
.ubicacion__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(2rem, 4vw, 3.6rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--bondo-stone);
	max-width: 22ch;
	margin: 0;
}
.ubicacion__title em { color: var(--accent); font-style: italic; }
.ubicacion__desc {
	font-size: 1rem;
	line-height: 1.7;
	color: var(--text-mute);
	max-width: 56ch;
	margin: 0 auto;
}

/* Centered map (not full-bleed) */
.ubicacion__map {
	position: relative;
	max-width: var(--container);
	margin: 0 auto;
	padding-inline: var(--gutter);
	height: clamp(420px, 60vh, 640px);
}
.ubicacion__map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: 4px;
	background: var(--bg-stone);
}
.ubicacion__open {
	position: absolute;
	bottom: clamp(1rem, 2vw, 1.5rem);
	right: calc(var(--gutter) + clamp(1rem, 2vw, 1.5rem));
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.85rem 1.15rem;
	background: var(--bondo-ink);
	color: var(--bondo-cream);
	border-radius: 999px;
	font-family: var(--font-body);
	font-size: 0.85rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	text-decoration: none;
	box-shadow: 0 4px 24px rgba(31, 26, 20, 0.18);
	transition: background 0.35s var(--ease-out), transform 0.35s var(--ease-out);
	z-index: 5;
}
.ubicacion__open:hover {
	background: var(--accent-deep);
	transform: translateY(-1px);
}

/* ==========================================================================
   CARTAGENA (lugares de interés)
   ========================================================================== */
.cartagena {
	padding-block: var(--section-pad);
	background: var(--bondo-cream);
	overflow: hidden;
}
.cartagena__inner {
	max-width: var(--container);
	margin: 0 auto;
	padding-inline: var(--gutter);
}
.cartagena__top {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	margin-bottom: 4rem;
	align-items: end;
}
.cartagena__title {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: var(--fs-5xl);
	line-height: 0.98;
	white-space: pre-line;
	letter-spacing: -0.025em;
	margin-top: 1rem;
}
.cartagena__title em { color: var(--accent); font-style: italic; }
.cartagena__desc {
	font-size: var(--fs-lg);
	color: var(--text-mute);
	line-height: 1.75;
	max-width: 50ch;
}
.cartagena__hero-image {
	width: 100%;
	aspect-ratio: 21/9;
	overflow: hidden;
	border-radius: 4px;
	margin-bottom: 4rem;
}
.cartagena__hero-image img {
	width: 100%; height: 100%;
	object-fit: cover;
}

.cartagena__lugares {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 2.5rem 1.5rem;
}
.cartagena__lugar { position: relative; }
.cartagena__lugar-img {
	width: 100%;
	aspect-ratio: 4/5;
	overflow: hidden;
	border-radius: 4px;
	margin-bottom: 1rem;
	background: var(--bg-stone);
}
.cartagena__lugar-img img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 1.6s var(--ease-out);
}
.cartagena__lugar:hover .cartagena__lugar-img img { transform: scale(1.07); }
.cartagena__lugar:nth-child(odd) .cartagena__lugar-img { aspect-ratio: 3/4; }
.cartagena__lugar:nth-child(3n) .cartagena__lugar-img { aspect-ratio: 1/1; margin-top: 2.5rem; }
.cartagena__lugar:nth-child(4n) .cartagena__lugar-img { aspect-ratio: 4/5; margin-top: 1rem; }

.cartagena__lugar-name {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 400;
	font-size: 1.2rem;
	color: var(--text);
	letter-spacing: -0.005em;
}
.cartagena__lugar-num {
	font-family: var(--font-body);
	font-size: 0.7rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--text-mute);
	display: block;
	margin-top: 0.25rem;
}

/* ==========================================================================
   RENTABILIDAD
   ========================================================================== */
.rentabilidad {
	padding-block: var(--section-pad);
	background: var(--bondo-ink);
	color: var(--bondo-cream);
	position: relative;
	overflow: hidden;
}
.rentabilidad__bg {
	position: absolute; inset: 0;
	opacity: 0.22;
}
.rentabilidad__bg img {
	width: 100%; height: 100%;
	object-fit: cover;
}
.rentabilidad__inner {
	position: relative;
	z-index: 1;
	max-width: var(--container);
	margin: 0 auto;
	padding-inline: var(--gutter);
}
.rentabilidad__header {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: end;
	margin-bottom: 4rem;
}
.rentabilidad__title {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: var(--fs-5xl);
	line-height: 0.98;
	letter-spacing: -0.025em;
	white-space: pre-line;
	margin-top: 1rem;
	max-width: 14ch;
}
.rentabilidad__title em { color: var(--bondo-blush); font-style: italic; }
.rentabilidad__desc {
	font-size: var(--fs-lg);
	color: rgba(246, 240, 231, 0.78);
	max-width: 50ch;
	line-height: 1.75;
}

.rentabilidad__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 2rem;
	border-top: 1px solid rgba(246, 240, 231, 0.18);
	padding-top: 3rem;
	margin-bottom: 3.5rem;
}
.rentabilidad__stat {
	border-left: 1px solid rgba(246, 240, 231, 0.18);
	padding-left: 1.5rem;
}
.rentabilidad__stat:first-child { border-left: 0; padding-left: 0; }
.rentabilidad__stat-num {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: clamp(2.6rem, 5.5vw, 4.5rem);
	line-height: 1;
	color: var(--bondo-blush);
	margin-bottom: 0.5rem;
	letter-spacing: -0.025em;
}
.rentabilidad__stat-label {
	font-size: 0.875rem;
	color: rgba(246, 240, 231, 0.75);
	letter-spacing: 0.04em;
	max-width: 22ch;
}

/* ==========================================================================
   GALERÍA (masonry)
   ========================================================================== */
.galeria {
	padding-block: var(--section-pad);
	background: var(--bondo-paper);
	overflow: hidden;
}
.galeria__inner {
	max-width: var(--container);
	margin: 0 auto;
	padding-inline: var(--gutter);
}
.galeria__header {
	text-align: center;
	margin-bottom: clamp(3rem, 6vw, 5rem);
}
.galeria__title {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: var(--fs-5xl);
	line-height: 0.98;
	white-space: pre-line;
	letter-spacing: -0.025em;
	margin-top: 1rem;
}
.galeria__title em { color: var(--accent); font-style: italic; }

.galeria__grid {
	column-count: 3;
	column-gap: 1.5rem;
}
.galeria__item {
	break-inside: avoid;
	margin-bottom: 1.5rem;
	overflow: hidden;
	border-radius: 4px;
	cursor: zoom-in;
	background: var(--bg-stone);
}
.galeria__item img {
	width: 100%;
	display: block;
	transition: transform 1.4s var(--ease-out);
}
.galeria__item:hover img { transform: scale(1.05); }

/* Lightbox */
.bondo-lightbox {
	position: fixed; inset: 0;
	background: rgba(27, 22, 17, 0.96);
	z-index: 200;
	display: none;
	align-items: center; justify-content: center;
	padding: 4rem 2rem;
	opacity: 0;
	transition: opacity 0.4s;
}
.bondo-lightbox.is-open { display: flex; opacity: 1; }
.bondo-lightbox img {
	max-width: 90vw; max-height: 85vh;
	object-fit: contain;
}
.bondo-lightbox__close {
	position: absolute;
	top: 1.5rem; right: 1.5rem;
	color: var(--bondo-cream);
	font-size: 2rem;
	width: 48px; height: 48px;
	border-radius: 50%;
	border: 1px solid currentColor;
	display: grid; place-items: center;
}

/* ==========================================================================
   CONTACTO — Eunoea "Schedule a Private Tour" layout
   LEFT: title block | RIGHT: 2-column form + dark CTA button
   ========================================================================== */
.contacto {
	padding-block: clamp(4rem, 8vw, 7rem);
	background: var(--bondo-paper);
}
.contacto__inner {
	max-width: var(--container);
	margin: 0 auto;
	padding-inline: var(--gutter);
	display: grid;
	grid-template-columns: 0.8fr 1.4fr;
	gap: clamp(3rem, 7vw, 7rem);
	align-items: start;
}

.contacto__copy {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding-top: 0.5rem;
}
.contacto__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(2rem, 3.6vw, 3.4rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--text);
	margin: 0;
	max-width: 14ch;
}
.contacto__title em { color: var(--accent); font-style: italic; }
.contacto__desc {
	font-size: 0.95rem;
	color: var(--text-mute);
	line-height: 1.7;
	margin: 0;
	max-width: 44ch;
}

/* Form: 2 columns of underlined inputs */
.contacto__form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem 1.5rem;
	align-items: start;
}
.contacto__field {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.contacto__label {
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--text);
}
.contacto__input,
.contacto__select {
	width: 100%;
	padding: 0.65rem 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgba(31, 26, 20, 0.25);
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--text);
	transition: border-color 0.3s var(--ease-out);
	border-radius: 0;
	-webkit-appearance: none;
	appearance: none;
}
.contacto__input::placeholder { color: rgba(31, 26, 20, 0.4); font-weight: 300; }
.contacto__input:focus,
.contacto__select:focus {
	outline: none;
	border-bottom-color: var(--text);
}
/* Custom dropdown caret */
.contacto__select {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F1A14' stroke-width='1.5'><path d='M6 9l6 6 6-6'/></svg>");
	background-repeat: no-repeat;
	background-position: right 0 center;
	background-size: 16px;
	padding-right: 24px;
	cursor: pointer;
}

/* Full-width dark "Book Your Visit" CTA */
.contacto__submit {
	grid-column: 1 / -1;
	margin-top: 0.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.65rem;
	padding: 1.15rem 1.5rem;
	background: var(--bondo-ink);
	color: var(--bondo-cream);
	border: 0;
	border-radius: 0;
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background 0.4s var(--ease-out);
}
.contacto__submit:hover { background: var(--accent-deep); }
.contacto__submit svg { transition: transform 0.4s var(--ease-out); }
.contacto__submit:hover svg { transform: translateX(4px); }

.contacto__feedback {
	grid-column: 1 / -1;
	padding: 1rem;
	border-radius: 4px;
	font-size: 0.9rem;
	display: none;
}
.contacto__feedback.is-success {
	display: block;
	background: rgba(189, 181, 142, 0.3);
	color: var(--accent-deep);
}
.contacto__feedback.is-error {
	display: block;
	background: rgba(182, 86, 56, 0.15);
	color: var(--accent-deep);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
	background: var(--bondo-ink);
	color: var(--bondo-cream);
	padding-top: clamp(4rem, 8vw, 6rem);
	position: relative;
	overflow: hidden;
}
/* Forzar que ningún enlace del footer use el azul por defecto del navegador */
.site-footer a {
	color: inherit;
	text-decoration: none;
}
.site-footer a:visited { color: inherit; }
.site-footer__top {
	max-width: var(--container);
	margin: 0 auto;
	padding-inline: var(--gutter);
}
.site-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1.2fr;
	gap: 3rem;
	padding-bottom: 4rem;
	border-bottom: 1px solid rgba(246, 240, 231, 0.12);
}
.site-footer__logo {
	display: inline-block;
	margin-bottom: 1.5rem;
	color: var(--bondo-cream);
	transition: opacity 0.3s var(--ease-out);
}
.site-footer__logo:hover { opacity: 0.7; }
.site-footer__logo img {
	height: 84px; width: auto;
	filter: brightness(0) invert(1); /* fuerza al logo a ser cream */
}
.site-footer__logo svg {
	height: 78px; width: auto;
	color: currentColor; /* el SVG hereda cream */
	display: block;
}
.site-footer__wordmark {
	font-family: var(--font-body);
	font-size: 0.85rem;
	font-weight: 400;
	letter-spacing: 0.36em;
	text-transform: uppercase;
	text-indent: 0.36em;
	color: var(--bondo-cream);
}
.site-footer__address {
	font-size: 0.9rem;
	line-height: 1.7;
	color: rgba(246, 240, 231, 0.7);
	margin-bottom: 1rem;
	max-width: 35ch;
}
.site-footer__contact {
	display: flex; flex-direction: column;
	gap: 0.4rem;
	font-size: 0.9rem;
	margin-bottom: 1.5rem;
}
.site-footer__contact a {
	color: rgba(246, 240, 231, 0.85);
	text-decoration: none;
	transition: color 0.3s var(--ease-out);
}
.site-footer__contact a:hover { color: var(--bondo-blush); }
.site-footer__social { display: flex; align-items: center; gap: 0.85rem; }
.site-footer__social-label {
	font-size: 0.7rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(246, 240, 231, 0.5);
	margin-right: 0.5rem;
}
.site-footer__social a {
	width: 38px; height: 38px;
	border-radius: 50%;
	border: 1px solid rgba(246, 240, 231, 0.25);
	display: grid; place-items: center;
	transition: all 0.3s;
}
.site-footer__social a:hover {
	background: var(--bondo-cream);
	color: var(--bondo-ink);
	border-color: var(--bondo-cream);
}
.site-footer__col h4 {
	font-family: var(--font-body);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(246, 240, 231, 0.5);
	margin-bottom: 1.5rem;
}
.site-footer__menu {
	list-style: none;
	display: flex; flex-direction: column;
	gap: 0.85rem;
}
.site-footer__menu a {
	font-size: 0.95rem;
	color: rgba(246, 240, 231, 0.85);
	transition: color 0.3s;
}
.site-footer__menu a:hover { color: var(--bondo-blush); }
.site-footer__col--cta p {
	font-size: 0.9rem;
	color: rgba(246, 240, 231, 0.7);
	line-height: 1.75;
	margin-bottom: 1.5rem;
}
.site-footer__bottom {
	max-width: var(--container);
	margin: 0 auto;
	padding: 2rem var(--gutter);
}
.site-footer__bottom-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 1.5rem;
}
.site-footer__copy { font-size: 0.8rem; color: rgba(246, 240, 231, 0.5); }
.site-footer__developer {
	display: flex; align-items: center;
	gap: 1rem;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	color: rgba(246, 240, 231, 0.5);
	text-transform: uppercase;
}
.site-footer__developer img {
	height: 36px; width: auto;
	filter: brightness(0) invert(1);
	opacity: 0.85;
}
.site-footer__legal {
	font-size: 0.7rem;
	color: rgba(246, 240, 231, 0.4);
	line-height: 1.6;
	max-width: 90ch;
	margin-top: 1.5rem;
}
.site-footer__wordmark-deco {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 300;
	font-size: clamp(7rem, 22vw, 22rem);
	line-height: 0.85;
	color: var(--bondo-charcoal);
	text-align: center;
	white-space: nowrap;
	user-select: none;
	pointer-events: none;
	margin-bottom: -0.15em;
	letter-spacing: -0.04em;
	overflow: hidden;
}

/* ==========================================================================
   LAS RESIDENCIAS (page template) — Eunoea editorial rhythm
   ========================================================================== */

/* ── Hero ────────────────────────────────────────────────────────────── */
.res-hero {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	overflow: hidden;
	color: var(--bondo-cream);
	display: flex;
	align-items: flex-end;
	padding: calc(var(--header-h) + 2rem) 0 clamp(3rem, 8vw, 6rem);
	margin-bottom: -1px;
	/* fed by JS — 0 at top, 1 by the time hero is scrolled past */
	--scroll-progress: 0;
}
/* Cream wipe at the bottom that grows as the user scrolls — blends
   the hero into the cream intro below (Eunoea-style dissolve). */
.res-hero::after {
	content: '';
	position: absolute;
	left: 0; right: 0; top: 0;
	bottom: -2px;
	z-index: 5;
	pointer-events: none;
	background: linear-gradient(
		to top,
		var(--bondo-cream) 0%,
		var(--bondo-cream) calc(2% + var(--scroll-progress) * 58%),
		rgba(244, 239, 230, 0) calc(15% + var(--scroll-progress) * 75%)
	);
	opacity: calc(0.001 + var(--scroll-progress) * 1.1);
	transition: opacity 0.1s linear;
}
.res-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	will-change: filter, transform;
	/* Blur + slight desaturation grows as user scrolls — the hero "defocuses". */
	filter: blur(calc(var(--scroll-progress) * 12px)) saturate(calc(1 - var(--scroll-progress) * 0.3));
	transform: scale(calc(1 + var(--scroll-progress) * 0.06));
	transition: filter 0.1s linear, transform 0.1s linear;
}
.res-hero__image {
	position: absolute;
	inset: -8% 0 -8% 0; /* extra room so parallax never reveals edges */
	will-change: transform;
}
.res-hero__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.08);
	animation: heroKenburns 14s var(--ease-out) forwards;
}
.res-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(180deg,
			rgba(31, 26, 20, 0.55) 0%,
			rgba(31, 26, 20, 0.45) 30%,
			rgba(31, 26, 20, 0.55) 60%,
			rgba(31, 26, 20, 0.88) 100%),
		radial-gradient(ellipse at center, rgba(31, 26, 20, 0.15) 0%, transparent 70%);
	pointer-events: none;
}
/* Always-on cream layer at the very bottom — guarantees the hero edge
   blends seamlessly into the cream intro section regardless of scroll. */
.res-hero__overlay::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 22%;
	background: linear-gradient(to top, var(--bondo-cream) 0%, rgba(244, 239, 230, 0) 100%);
	pointer-events: none;
	opacity: calc(1 - var(--scroll-progress) * 0.35);
}
.res-hero__inner {
	position: relative;
	z-index: 2;
	max-width: var(--container);
	margin: 0 auto;
	padding-inline: var(--gutter);
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	text-align: center;
	will-change: transform, opacity;
	transform: translateY(calc(var(--scroll-progress) * -70px));
	opacity: calc(1 - var(--scroll-progress) * 1.4);
	transition: opacity 0.1s linear, transform 0.1s linear;
}
/* Scroll indicator fades faster than the rest */
.res-hero__eyebrow {
	color: var(--bondo-cream);
	opacity: 0.85;
}
.res-hero__title {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: clamp(1.9rem, 4.4vw, 3.6rem);
	line-height: 1.08;
	letter-spacing: -0.015em;
	max-width: 26ch;
	margin: 0;
	color: var(--bondo-cream);
	text-shadow: 0 2px 32px rgba(0, 0, 0, 0.55);
}
.res-hero__lead {
	font-family: var(--font-body);
	font-weight: 300;
	font-size: clamp(0.9rem, 1.05vw, 1rem);
	line-height: 1.7;
	max-width: 52ch;
	opacity: 0.94;
	margin: 0;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}
.res-hero__scroll {
	margin-top: 2rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.6rem;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	will-change: opacity;
	opacity: calc(0.7 - var(--scroll-progress) * 2);
	transition: opacity 0.1s linear;
}
.res-hero__scroll-line {
	display: block;
	width: 1px;
	height: 52px;
	background: rgba(244, 239, 230, 0.3);
	position: relative;
	overflow: hidden;
}
.res-hero__scroll-line::after {
	content: '';
	position: absolute;
	left: 0; top: -100%;
	width: 100%; height: 100%;
	background: var(--bondo-blush);
	animation: heroScroll 2.6s var(--ease-in-out) infinite;
}

/* ── Intro / philosophy ─────────────────────────────────────────────── */
.res-intro {
	background: var(--bondo-cream);
	padding-block: clamp(3.5rem, 8vw, 6.5rem);
	position: relative;
}
.res-intro__inner {
	max-width: 900px;
	margin: 0 auto;
	padding-inline: var(--gutter);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(1.25rem, 2.5vw, 1.85rem);
}
.res-intro__text {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(1.1rem, 1.9vw, 1.7rem);
	line-height: 1.32;
	letter-spacing: -0.008em;
	text-align: center;
	color: var(--bondo-stone);
	margin: 0;
	max-width: 42ch;
}

/* ── Features — sticky-stacked cards (Eunoea rising-cards effect) ───── */
.res-features {
	position: relative;
	background: var(--bondo-cream);
	padding: 0;
	margin: 0;
	display: block;
}
/* Each card sticks to the top of the viewport while the next one rises
   up behind it and overlaps — creating the "deck of cards" feel. */
.res-feature {
	position: sticky;
	top: 0;
	min-height: 92vh;
	min-height: 92svh;
	width: 100%;
	display: flex;
	align-items: center;
	padding: clamp(3rem, 6vw, 4.5rem) var(--gutter);
	overflow: hidden;
	will-change: transform;
}
.res-feature.is-sand  { background: var(--bondo-sand); }
.res-feature.is-cream { background: var(--bondo-cream); }
/* Each card after the first gets a softly rounded top edge + a shadow at
   the lip — so as the next card rises into view it reads as a separate
   physical layer lifting up over the previous one (Eunoea deck-of-cards). */
.res-feature + .res-feature {
	border-radius: 28px 28px 0 0;
	box-shadow: 0 -28px 60px -28px rgba(31, 26, 20, 0.22);
}

.res-feature__inner {
	max-width: 1240px;
	margin: 0 auto;
	width: 100%;
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

.res-feature__media {
	overflow: hidden;
	border-radius: 6px;
	aspect-ratio: 1/1;
	max-height: 60vh;
	background: var(--bg-stone);
	position: relative;
	box-shadow: 0 30px 80px -40px rgba(31, 26, 20, 0.35);
	justify-self: stretch;
}
.res-feature__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	transform: scale(1.04);
	transition: transform 2.6s var(--ease-out);
}
.res-feature:hover .res-feature__media img { transform: scale(1.08); }

/* Slider mode (when feature has 2+ images) */
.res-feature__media.has-gallery .bien-slide img {
	transform: none;
	transition: opacity 0.7s var(--ease-out);
}
.res-feature__media.has-gallery:hover .bien-slide img,
.res-feature:hover .res-feature__media.has-gallery img { transform: none; }
.res-feature__media:hover .bien-slider__arrow,
.res-feature__media:focus-within .bien-slider__arrow { opacity: 1; }

.res-feature__body {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-width: 42ch;
}

.res-feature__meta {
	display: inline-flex;
	align-items: center;
	gap: 0.85rem;
	margin-bottom: 0.5rem;
}
.res-feature__num {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 400;
	font-size: 1.1rem;
	color: var(--accent);
	line-height: 1;
	letter-spacing: -0.01em;
}
.res-feature__divider {
	display: inline-block;
	width: 28px;
	height: 1px;
	background: var(--accent);
	opacity: 0.6;
}
.res-feature__label {
	font-family: var(--font-body);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--accent-deep);
}

.res-feature__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(1.2rem, 1.8vw, 1.6rem);
	line-height: 1.2;
	letter-spacing: -0.012em;
	color: var(--text);
	margin: 0;
	max-width: 22ch;
}
.res-feature__title em { color: var(--accent); font-style: italic; }

.res-feature__desc {
	font-size: 0.88rem;
	line-height: 1.7;
	color: var(--text-mute);
	margin: 0;
}

.res-feature__features-label {
	font-family: var(--font-body);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--accent);
	margin-top: 0.85rem;
}

.res-feature__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}
.res-feature__list li {
	font-family: var(--font-body);
	font-size: 0.82rem;
	color: var(--text);
	letter-spacing: 0.005em;
	padding: 0.6rem 0 0.6rem 1.1rem;
	border-bottom: 1px solid rgba(31, 26, 20, 0.12);
	position: relative;
}
.res-feature__list li:first-child { border-top: 1px solid rgba(31, 26, 20, 0.12); }
.res-feature__list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 6px; height: 1px;
	background: var(--accent);
}

/* ── Quote / philosophy close ───────────────────────────────────────── */
.res-quote {
	background: var(--bondo-paper);
	padding-block: clamp(5rem, 11vw, 9rem);
	text-align: center;
}
.res-quote__inner {
	max-width: 980px;
	margin: 0 auto;
	padding-inline: var(--gutter);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(1.75rem, 4vw, 3rem);
}
.res-quote__text {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.3rem, 2.4vw, 2.2rem);
	line-height: 1.34;
	letter-spacing: -0.008em;
	color: var(--bondo-stone);
	margin: 0;
	max-width: 32ch;
	quotes: '"' '"';
}
.res-quote__text::before { content: open-quote; margin-right: 0.1em; color: var(--accent); }
.res-quote__text::after  { content: close-quote; margin-left: 0.1em; color: var(--accent); }
.res-quote__cta { margin-top: 0.5rem; }

/* ── Final CTA — full-bleed dark band ───────────────────────────────── */
.res-cta {
	position: relative;
	background: var(--bondo-ink);
	color: var(--bondo-cream);
	padding-block: clamp(5rem, 12vw, 9rem);
	overflow: hidden;
	isolation: isolate;
}
.res-cta__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0.28;
}
.res-cta__bg img {
	width: 100%; height: 100%;
	object-fit: cover;
	filter: brightness(0.55) saturate(0.9);
}
.res-cta::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(31, 26, 20, 0.6) 0%, rgba(31, 26, 20, 0.78) 100%),
		radial-gradient(ellipse at center, rgba(31, 26, 20, 0.2) 0%, rgba(31, 26, 20, 0.6) 100%);
	z-index: 1;
}
.res-cta__inner {
	position: relative;
	z-index: 2;
	max-width: 880px;
	margin: 0 auto;
	padding-inline: var(--gutter);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(1.25rem, 3vw, 2rem);
}
.res-cta__title {
	font-family: var(--font-display);
	font-weight: 300;
	font-size: clamp(1.7rem, 3.2vw, 2.8rem);
	line-height: 1.12;
	letter-spacing: -0.015em;
	max-width: 22ch;
	margin: 0;
	color: var(--bondo-cream);
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
}
.res-cta__desc {
	font-size: clamp(0.9rem, 1.1vw, 1.05rem);
	line-height: 1.7;
	max-width: 52ch;
	opacity: 0.94;
	margin: 0;
	color: var(--bondo-cream);
}
.res-cta__btn {
	margin-top: 0.75rem;
	background: var(--bondo-cream);
	color: var(--bondo-ink);
	border-color: var(--bondo-cream);
}
.res-cta__btn:hover {
	background: transparent;
	color: var(--bondo-cream);
	border-color: var(--bondo-cream);
}

/* ==========================================================================
   BIENESTAR Y COMODIDADES (page template) — vertical list of amenities,
   each one with its own image carousel (Eunoea-style).
   Hero / intro / CTA reuse the .res-* styles.
   ========================================================================== */
.bien-amen {
	background: var(--bondo-cream);
	padding-block: clamp(3rem, 7vw, 6rem) clamp(4rem, 9vw, 7rem);
	overflow: hidden;
}
.bien-amen__inner {
	max-width: var(--container);
	margin: 0 auto;
	padding-inline: var(--gutter);
}
.bien-amen__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	text-align: center;
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.bien-amen__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(1.5rem, 2.6vw, 2.2rem);
	line-height: 1.18;
	letter-spacing: -0.015em;
	color: var(--text);
	margin: 0;
	max-width: 24ch;
}
.bien-amen__title em { color: var(--accent); font-style: italic; }

/* Vertical list — each amenity is a 2-col block, alternating sides */
.bien-amen__list {
	display: flex;
	flex-direction: column;
	gap: clamp(3.5rem, 7vw, 6rem);
}
.bien-amenity {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
}
.bien-amenity.is-flipped .bien-slider        { order: 2; }
.bien-amenity.is-flipped .bien-amenity__body { order: 1; }

/* Per-card image slider */
.bien-slider {
	position: relative;
	overflow: hidden;
	border-radius: 8px;
	aspect-ratio: 5/4;
	background: var(--bg-stone);
	box-shadow: 0 20px 60px -30px rgba(31, 26, 20, 0.3);
}
.bien-slider__track {
	position: absolute;
	inset: 0;
}
.bien-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.7s var(--ease-out);
}
.bien-slide.is-active { opacity: 1; }
.bien-slide img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}

/* Arrows — circular, sitting on the side edges of the image */
.bien-slider__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(244, 239, 230, 0.85);
	color: var(--bondo-ink);
	border: 0;
	display: grid;
	place-items: center;
	cursor: pointer;
	z-index: 2;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transition: background 0.35s var(--ease-out), color 0.35s var(--ease-out), transform 0.35s var(--ease-out);
	opacity: 0;
}
.bien-slider:hover .bien-slider__arrow,
.bien-slider:focus-within .bien-slider__arrow { opacity: 1; }
.bien-slider__arrow[data-dir="prev"] { left: 0.85rem; }
.bien-slider__arrow[data-dir="next"] { right: 0.85rem; }
.bien-slider__arrow:hover {
	background: var(--bondo-ink);
	color: var(--bondo-cream);
}
.bien-slider__arrow:hover[data-dir="prev"] { transform: translateY(-50%) translateX(-2px); }
.bien-slider__arrow:hover[data-dir="next"] { transform: translateY(-50%) translateX(2px); }

/* Dots — bottom center of the image */
.bien-slider__dots {
	position: absolute;
	left: 50%;
	bottom: 0.85rem;
	transform: translateX(-50%);
	display: flex;
	gap: 0.45rem;
	z-index: 2;
	padding: 0.45rem 0.7rem;
	border-radius: 999px;
	background: rgba(31, 26, 20, 0.32);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.bien-slider__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(244, 239, 230, 0.55);
	border: 0;
	padding: 0;
	cursor: pointer;
	transition: background 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.bien-slider__dot:hover { background: rgba(244, 239, 230, 0.85); }
.bien-slider__dot.is-active {
	background: var(--bondo-cream);
	transform: scale(1.25);
}

/* Body copy on the other side */
.bien-amenity__body {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-width: 42ch;
}
.bien-amenity__tagline {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(0.95rem, 1.1vw, 1.1rem);
	line-height: 1.45;
	letter-spacing: 0;
	color: var(--accent);
	margin: 0;
}
.bien-amenity__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(1.5rem, 2.6vw, 2.4rem);
	line-height: 1.12;
	letter-spacing: -0.015em;
	color: var(--text);
	margin: 0;
}
.bien-amenity__title em { color: var(--accent); font-style: italic; }
.bien-amenity__list {
	list-style: none;
	margin: 0.6rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}
.bien-amenity__list li {
	font-family: var(--font-body);
	font-size: 0.88rem;
	line-height: 1.65;
	color: var(--text);
	padding: 0.55rem 0 0.55rem 1.15rem;
	position: relative;
}
.bien-amenity__list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.95rem;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--accent);
}

/* ==========================================================================
   PLANOS (page template) — filter tabs + vertical list of residences
   Hero / intro / CTA reuse the .res-* styles.
   ========================================================================== */
.planos {
	background: var(--bondo-cream);
	padding-block: clamp(3rem, 7vw, 6rem) clamp(4rem, 9vw, 7rem);
}
.planos__inner {
	max-width: 1240px;
	margin: 0 auto;
	padding-inline: var(--gutter);
}

/* Filter pills — rounded buttons, filled on active state */
.planos__filtros {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem;
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.planos__filtro {
	background: transparent;
	border: 1px solid rgba(31, 26, 20, 0.2);
	border-radius: 999px;
	padding: 0.65rem 1.4rem;
	font-family: var(--font-body);
	font-size: 0.82rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	color: var(--text);
	cursor: pointer;
	transition: background 0.35s var(--ease-out), color 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
	white-space: nowrap;
}
.planos__filtro:hover {
	border-color: var(--text);
}
.planos__filtro.is-active {
	background: var(--bondo-ink);
	color: var(--bondo-cream);
	border-color: var(--bondo-ink);
}

/* Grid of plan cards (3 columns at desktop) */
.planos__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem);
}
.plano-card {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.plano-card.is-hidden {
	display: none;
}

/* Floor-plan thumbnail — light cream background, the JPG sits inside with padding */
.plano-card__thumb {
	display: block;
	aspect-ratio: 4/3;
	background: var(--bondo-paper);
	border-radius: 4px;
	overflow: hidden;
	border: 1px solid rgba(31, 26, 20, 0.06);
	transition: border-color 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.plano-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	padding: clamp(0.75rem, 1.8vw, 1.4rem);
	transition: transform 0.6s var(--ease-out);
}
.plano-card__thumb:hover {
	border-color: var(--accent);
}
.plano-card__thumb:hover img {
	transform: scale(1.03);
}

/* Card head — title + bed/bath badge inline */
.plano-card__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.85rem;
	padding-inline: 0.15rem;
}
.plano-card__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(1.1rem, 1.55vw, 1.35rem);
	line-height: 1.15;
	letter-spacing: -0.012em;
	color: var(--text);
	margin: 0;
}
.plano-card__beds {
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--text-mute);
	white-space: nowrap;
	letter-spacing: 0.02em;
}

/* Card foot — specs on the left, CTA on the right */
.plano-card__foot {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 1rem;
	padding-inline: 0.15rem;
}
.plano-card__specs {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}
.plano-card__specs p {
	margin: 0;
	font-family: var(--font-body);
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--text-mute);
}
.plano-card__specs span {
	color: var(--text-mute);
}
.plano-card__specs strong {
	color: var(--text);
	font-weight: 500;
}

/* Actions — Ver plano + optional Tour 360° */
.plano-card__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.4rem;
	flex-shrink: 0;
}
.plano-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.55rem 0.85rem;
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--text);
	border: 1px solid rgba(31, 26, 20, 0.2);
	border-radius: 4px;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.35s var(--ease-out), color 0.35s var(--ease-out), border-color 0.35s var(--ease-out), gap 0.35s var(--ease-out);
}
.plano-card__cta:hover {
	background: var(--bondo-ink);
	color: var(--bondo-cream);
	border-color: var(--bondo-ink);
	gap: 0.65rem;
}
.plano-card__cta svg { flex-shrink: 0; }
.plano-card__cta--alt {
	color: var(--accent);
	border-color: rgba(182, 110, 74, 0.4);
	font-size: 0.7rem;
	padding: 0.45rem 0.75rem;
}
.plano-card__cta--cotizar {
	background: var(--accent);
	color: var(--bondo-cream);
	border-color: var(--accent);
}
.plano-card__cta--cotizar:hover {
	background: var(--accent-deep);
	color: var(--bondo-cream);
	border-color: var(--accent-deep);
}

/* Planos modal */
.plano-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.35s var(--ease-out), visibility 0s linear 0.35s;
}
.plano-modal[aria-hidden="false"] {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.35s var(--ease-out), visibility 0s linear 0s;
}
.plano-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(31, 26, 20, 0.75);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: 0;
	padding: 0;
	cursor: pointer;
}
.plano-modal__panel {
	position: relative;
	z-index: 1;
	background: var(--bondo-cream);
	border-radius: 8px;
	box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.5);
	max-width: min(1100px, 92vw);
	max-height: 88vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transform: translateY(20px) scale(0.96);
	transition: transform 0.4s var(--ease-out);
}
.plano-modal[aria-hidden="false"] .plano-modal__panel {
	transform: translateY(0) scale(1);
}
.plano-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.1rem 1.5rem;
	border-bottom: 1px solid rgba(31, 26, 20, 0.1);
}
.plano-modal__title {
	font-family: var(--font-display);
	font-size: 1.4rem;
	font-weight: 400;
	color: var(--bondo-ink);
	margin: 0;
}
.plano-modal__close {
	background: transparent;
	border: 0;
	color: var(--bondo-ink);
	padding: 0.4rem;
	cursor: pointer;
	border-radius: 50%;
	transition: background 0.25s var(--ease-out);
	display: grid;
	place-items: center;
}
.plano-modal__close:hover { background: rgba(31, 26, 20, 0.08); }
.plano-modal__media {
	flex: 1;
	overflow: auto;
	padding: 1.25rem;
	background: rgba(31, 26, 20, 0.04);
	display: flex;
	align-items: center;
	justify-content: center;
}
.plano-modal__media img {
	max-width: 100%;
	max-height: 100%;
	height: auto;
	display: block;
	border-radius: 4px;
}
body.plano-modal-open { overflow: hidden; }
.plano-card__cta--alt:hover {
	background: var(--accent);
	color: var(--bondo-cream);
	border-color: var(--accent);
}

.planos__empty {
	grid-column: 1 / -1;
	padding: 3rem 0;
	text-align: center;
	color: var(--text-mute);
	font-style: italic;
}

/* ==========================================================================
   LOS ALREDEDORES (page template) — "Day in Rhythm" timeline
   Sticky map on the left, timeline of places on the right.
   Hero / intro / CTA reuse the .res-* styles.
   ========================================================================== */
.alred-timeline {
	background: var(--bondo-cream);
	padding-block: clamp(3rem, 7vw, 6rem) clamp(4rem, 9vw, 7rem);
	overflow: visible; /* must be visible for position: sticky to work */
}
.alred-timeline__inner {
	max-width: var(--container);
	margin: 0 auto;
	padding-inline: var(--gutter);
}
.alred-timeline__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	text-align: center;
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.alred-timeline__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(1.5rem, 2.6vw, 2.2rem);
	line-height: 1.18;
	letter-spacing: -0.015em;
	color: var(--text);
	margin: 0;
	max-width: 26ch;
}

/* 2-col grid: sticky map on the left, scrollable entries on the right */
.alred-timeline__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}

/* Sticky map column */
.alred-timeline__map {
	position: sticky;
	top: calc(var(--header-h) + 1rem);
	height: calc(100vh - var(--header-h) - 3rem);
	max-height: 720px;
}
.alred-timeline__map-frame {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 6px;
	overflow: hidden;
	background: var(--bg-stone);
	box-shadow: 0 20px 60px -35px rgba(31, 26, 20, 0.35);
	transition: opacity 0.4s var(--ease-out);
}
.alred-timeline__map-frame.is-loading { opacity: 0.55; }
.alred-timeline__map iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* Timeline entries column */
.alred-timeline__entries {
	position: relative;
	padding-left: clamp(1.5rem, 3vw, 2.5rem);
	display: flex;
	flex-direction: column;
	gap: clamp(3.5rem, 7vw, 5.5rem);
}
/* Vertical timeline line */
.alred-timeline__entries::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.6rem;
	bottom: 0;
	width: 1px;
	background: linear-gradient(to bottom,
		rgba(31, 26, 20, 0.18) 0%,
		rgba(31, 26, 20, 0.18) 90%,
		rgba(31, 26, 20, 0) 100%);
}

.alred-entry {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}
/* Dot on the timeline (anchors to the left edge of the entry) */
.alred-entry::before {
	content: '';
	position: absolute;
	left: calc(clamp(1.5rem, 3vw, 2.5rem) * -1 - 0.5px);
	top: 0.5rem;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--bondo-cream);
	border: 1.5px solid rgba(31, 26, 20, 0.25);
	transform: translateX(-50%);
	transition: background 0.35s var(--ease-out), border-color 0.35s var(--ease-out), transform 0.35s var(--ease-out);
	z-index: 1;
}
.alred-entry.is-active::before {
	background: var(--accent);
	border-color: var(--accent);
	transform: translateX(-50%) scale(1.35);
	box-shadow: 0 0 0 6px rgba(182, 110, 74, 0.12);
}

.alred-entry__head {
	display: inline-flex;
	align-items: baseline;
	gap: 0.65rem;
	font-family: var(--font-body);
	font-size: 0.85rem;
	letter-spacing: 0.01em;
	color: var(--accent-deep);
}
.alred-entry__time {
	font-weight: 500;
	color: var(--accent-deep);
}
.alred-entry__sep {
	color: var(--text-mute);
	opacity: 0.6;
}
.alred-entry__dist {
	color: var(--text-mute);
	font-weight: 400;
}

.alred-entry__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(1.6rem, 2.6vw, 2.4rem);
	line-height: 1.12;
	letter-spacing: -0.015em;
	color: var(--text);
	margin: 0.15rem 0 0;
}
.alred-entry__title em { color: var(--accent); font-style: italic; }

.alred-entry__desc {
	font-size: 0.95rem;
	line-height: 1.7;
	color: var(--text-mute);
	margin: 0;
	max-width: 50ch;
}

.alred-entry__media {
	margin-top: 0.5rem;
	overflow: hidden;
	border-radius: 6px;
	aspect-ratio: 16/10;
	background: var(--bg-stone);
}
.alred-entry__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 1.4s var(--ease-out);
}
.alred-entry:hover .alred-entry__media img { transform: scale(1.04); }

.alred-entry__cta {
	margin-top: 0.5rem;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.5rem 0;
	font-family: var(--font-body);
	font-size: 0.76rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text);
	border-bottom: 1px solid var(--text);
	text-decoration: none;
	transition: color 0.35s var(--ease-out), border-color 0.35s var(--ease-out), gap 0.35s var(--ease-out);
	white-space: nowrap;
}
.alred-entry__cta:hover {
	color: var(--accent);
	border-color: var(--accent);
	gap: 0.7rem;
}

/* ── Discover (categorized list + big map) ──────────────────────────── */
.alred-discover {
	background: var(--bondo-paper);
	padding-block: clamp(4rem, 9vw, 8rem);
	overflow: hidden;
}
.alred-discover__inner {
	max-width: var(--container);
	margin: 0 auto;
	padding-inline: var(--gutter);
}
.alred-discover__header {
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
	text-align: center;
}
.alred-discover__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(1.8rem, 3.2vw, 2.8rem);
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: var(--text);
	margin: 0 auto;
	max-width: 22ch;
}
.alred-discover__grid {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: clamp(3rem, 6vw, 6rem);
	align-items: start;
}
.alred-discover__title em { color: var(--accent); font-style: italic; }

.alred-discover__cats {
	display: flex;
	flex-direction: column;
	gap: clamp(1.75rem, 3vw, 2.5rem);
}
.alred-discover__cat {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
.alred-discover__cat-name {
	font-family: var(--font-body);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--accent-deep);
	margin: 0;
}
.alred-discover__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.alred-discover__item {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	font-family: var(--font-body);
	font-size: 0.95rem;
	line-height: 1.4;
	color: var(--text);
	padding-bottom: 0.6rem;
	border-bottom: 1px solid rgba(110, 47, 42, 0.12);
}
.alred-discover__num {
	flex-shrink: 0;
	display: inline-grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--accent);
	color: var(--bondo-cream);
	font-family: var(--font-body);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}
.alred-discover__name {
	color: var(--text);
	flex: 1;
}
.alred-discover__dist {
	color: var(--text-mute);
	font-size: 0.8rem;
	letter-spacing: 0.01em;
	white-space: nowrap;
	margin-left: auto;
}
/* Outer column: full row height so sticky inside can travel the full list. */
.alred-discover__map {
	position: relative;
	width: 100%;
	height: 100%;
	align-self: stretch;
}
/* Inner sticky wrapper: actually contains the iframe and sticks at viewport top. */
.alred-discover__map-sticky {
	position: sticky;
	top: calc(var(--header-h) + 2rem);
	width: 100%;
	aspect-ratio: 4/5;
	max-height: calc(100vh - var(--header-h) - 4rem);
	overflow: hidden;
	border-radius: 6px;
	background: var(--bg-stone);
	box-shadow: 0 30px 80px -40px rgba(31, 26, 20, 0.4);
}
.alred-discover__map-sticky iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* ==========================================================================
   COTIZAR (page template) — apartments catalog with filters + modal
   ========================================================================== */
.cotz {
	background: var(--bondo-cream);
	padding-block: clamp(2rem, 5vw, 4rem) clamp(4rem, 9vw, 7rem);
}
.cotz__inner {
	max-width: var(--container);
	margin: 0 auto;
	padding-inline: var(--gutter);
}
.cotz__header {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.cotz__stats {
	display: inline-flex;
	align-items: baseline;
	gap: 0.6rem;
	font-family: var(--font-body);
	font-size: 0.85rem;
	color: var(--text-mute);
}
.cotz__stats strong {
	color: var(--text);
	font-weight: 600;
	margin-right: 0.2rem;
}
.cotz__stat--avail strong { color: var(--accent); }
.cotz__stat-dot { color: var(--text-mute); opacity: 0.5; }

/* Filter bar */
.cotz__filtros {
	display: grid;
	grid-template-columns: repeat(4, 1fr) auto;
	gap: clamp(0.75rem, 1.5vw, 1.25rem);
	align-items: end;
	margin-bottom: clamp(2rem, 4vw, 3rem);
	padding-bottom: clamp(2rem, 4vw, 3rem);
	border-bottom: 1px solid rgba(31, 26, 20, 0.1);
}
.cotz__filtro {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.cotz__filtro label {
	font-family: var(--font-body);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--text-mute);
}
.cotz__filtro select {
	padding: 0.65rem 2rem 0.65rem 0.85rem;
	background: var(--bondo-cream);
	border: 1px solid rgba(31, 26, 20, 0.2);
	border-radius: 4px;
	font-family: var(--font-body);
	font-size: 0.88rem;
	color: var(--text);
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F1A14' stroke-width='1.5'><path d='M6 9l6 6 6-6'/></svg>");
	background-repeat: no-repeat;
	background-position: right 0.5rem center;
	background-size: 14px;
	transition: border-color 0.3s var(--ease-out);
}
.cotz__filtro select:focus { outline: none; border-color: var(--accent); }
.cotz__reset {
	padding: 0.7rem 1.1rem;
	background: transparent;
	border: 1px solid rgba(31, 26, 20, 0.2);
	border-radius: 999px;
	font-family: var(--font-body);
	font-size: 0.75rem;
	color: var(--text);
	cursor: pointer;
	letter-spacing: 0.04em;
	white-space: nowrap;
	transition: background 0.3s var(--ease-out), color 0.3s, border-color 0.3s;
}
.cotz__reset:hover {
	background: var(--bondo-ink);
	color: var(--bondo-cream);
	border-color: var(--bondo-ink);
}

/* Cards grid */
.cotz__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2.5vw, 2rem);
}
.cotz__empty {
	grid-column: 1 / -1;
	padding: 3rem 0;
	text-align: center;
	color: var(--text-mute);
	font-style: italic;
}

/* Pagination controls — below the grid */
.cotz__pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem 0.85rem;
	margin-top: clamp(2.5rem, 5vw, 4rem);
	padding-top: clamp(2rem, 4vw, 3rem);
	border-top: 1px solid rgba(31, 26, 20, 0.1);
}
.cotz__page-numbers {
	display: inline-flex;
	gap: 0.25rem;
	flex-wrap: wrap;
	justify-content: center;
}
.cotz__page-btn {
	min-width: 38px;
	height: 38px;
	padding: 0 0.6rem;
	background: transparent;
	border: 1px solid rgba(31, 26, 20, 0.15);
	border-radius: 50%;
	font-family: var(--font-body);
	font-size: 0.82rem;
	font-weight: 500;
	color: var(--text);
	cursor: pointer;
	display: inline-grid;
	place-items: center;
	transition: background 0.3s var(--ease-out), color 0.3s, border-color 0.3s;
}
.cotz__page-btn:hover:not(:disabled):not(.is-active) {
	border-color: var(--text);
	background: rgba(31, 26, 20, 0.04);
}
.cotz__page-btn.is-active {
	background: var(--bondo-ink);
	color: var(--bondo-cream);
	border-color: var(--bondo-ink);
	cursor: default;
}
.cotz__page-btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}
.cotz__page-btn--nav {
	border-radius: 50%;
}
.cotz__page-ellipsis {
	display: inline-grid;
	place-items: center;
	min-width: 26px;
	color: var(--text-mute);
	font-family: var(--font-body);
	font-size: 0.85rem;
}
.cotz__page-info {
	flex-basis: 100%;
	text-align: center;
	font-family: var(--font-body);
	font-size: 0.78rem;
	color: var(--text-mute);
	letter-spacing: 0.02em;
}

.cotz-card {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
}
.cotz-card.is-hidden { display: none; }

.cotz-card__media {
	position: relative;
	overflow: hidden;
	border-radius: 4px;
	aspect-ratio: 4/3;
	background: var(--bondo-paper);
	border: 1px solid rgba(31, 26, 20, 0.06);
}
.cotz-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 0.75rem;
	display: block;
	transition: transform 0.5s var(--ease-out), opacity 0.5s;
}
.cotz-card:not(.cotz-card--d) .cotz-card__media img { opacity: 0.4; }
.cotz-card__overlay {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: rgba(213, 213, 213, 0.35);
}
.cotz-card__overlay span {
	font-family: var(--font-body);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.28em;
	color: var(--text);
	background: var(--bondo-cream);
	padding: 0.45rem 0.85rem;
	border-radius: 4px;
	border: 1px solid rgba(31, 26, 20, 0.15);
}

.cotz-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	padding-inline: 0.15rem;
}
.cotz-card__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.75rem;
}
.cotz-card__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(1rem, 1.4vw, 1.2rem);
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--text);
	margin: 0;
}
.cotz-card__title span {
	color: var(--accent);
	font-style: italic;
}
.cotz-card__type {
	font-family: var(--font-body);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--text-mute);
	white-space: nowrap;
}
.cotz-card__specs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.85rem;
	font-family: var(--font-body);
	font-size: 0.78rem;
	color: var(--text-mute);
	line-height: 1.5;
}
.cotz-card__specs strong {
	font-weight: 500;
	color: var(--text);
}
.cotz-card__cta {
	margin-top: 0.4rem;
	padding: 0.7rem 1rem;
	background: var(--bondo-ink);
	color: var(--bondo-cream);
	border: 0;
	border-radius: 999px;
	font-family: var(--font-body);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: background 0.35s var(--ease-out);
}
.cotz-card__cta:hover:not(:disabled) { background: var(--accent-deep); }
.cotz-card__cta:disabled {
	background: rgba(31, 26, 20, 0.15);
	color: var(--text-mute);
	cursor: not-allowed;
}

/* Modal */
.cotz-modal {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: none;
}
.cotz-modal.is-open {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 4vh 1rem;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.cotz-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(31, 26, 20, 0.7);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	z-index: 0;
	cursor: pointer;
	border: 0;
}
.cotz-modal__panel {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1100px;
	margin: auto 0;
	background: var(--bondo-cream);
	border-radius: 6px;
	box-shadow: 0 50px 100px -30px rgba(0, 0, 0, 0.5);
	animation: cotzModalIn 0.5s var(--ease-out);
}
/* Visible scrollbar on the panel */
.cotz-modal__panel::-webkit-scrollbar { width: 12px; }
.cotz-modal__panel::-webkit-scrollbar-track {
	background: rgba(31, 26, 20, 0.08);
	border-radius: 0 6px 6px 0;
}
.cotz-modal__panel::-webkit-scrollbar-thumb {
	background: rgba(31, 26, 20, 0.35);
	border-radius: 8px;
	border: 2px solid var(--bondo-cream);
}
.cotz-modal__panel::-webkit-scrollbar-thumb:hover { background: rgba(31, 26, 20, 0.55); }
.cotz-modal__panel { scrollbar-color: rgba(31, 26, 20, 0.35) rgba(31, 26, 20, 0.08); }
@keyframes cotzModalIn {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}
.cotz-modal__close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 10;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--bondo-cream);
	color: var(--text);
	border: 1px solid rgba(31, 26, 20, 0.15);
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: background 0.3s var(--ease-out), color 0.3s;
}
.cotz-modal__close:hover { background: var(--bondo-ink); color: var(--bondo-cream); }

.cotz-modal__grid {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 0;
}
.cotz-modal__media {
	background: var(--bondo-paper);
	display: grid;
	place-items: center;
	padding: clamp(1.5rem, 3vw, 3rem);
	min-height: 380px;
}
.cotz-modal__media img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.cotz-modal__body {
	padding: clamp(1.75rem, 3vw, 2.75rem);
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.cotz-modal__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(1.4rem, 2.4vw, 1.95rem);
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--text);
	margin: 0;
}
.cotz-modal__title em { color: var(--accent); font-style: italic; }
.cotz-modal__specs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.5rem 1rem;
	margin: 0.5rem 0;
	padding-block: 0.85rem;
	border-top: 1px solid rgba(31, 26, 20, 0.1);
	border-bottom: 1px solid rgba(31, 26, 20, 0.1);
}
.cotz-modal__spec {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}
.cotz-modal__spec-label {
	font-family: var(--font-body);
	font-size: 0.62rem;
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--text-mute);
}
.cotz-modal__spec-value {
	font-family: var(--font-display);
	font-size: 1rem;
	color: var(--text);
	font-weight: 400;
}

.cotz-modal__prices {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.5rem 1rem;
	padding: 0.85rem 0;
	font-family: var(--font-body);
	font-size: 0.85rem;
	color: var(--text-mute);
}
.cotz-modal__prices > div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.5rem;
}
.cotz-modal__prices strong {
	color: var(--text);
	font-weight: 500;
	font-family: var(--font-display);
	font-size: 0.95rem;
}

/* Form inside modal */
.cotz-modal__form {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: 0.5rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(31, 26, 20, 0.1);
}
.cotz-modal__field {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}
.cotz-modal__field label {
	font-family: var(--font-body);
	font-size: 0.68rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--text-mute);
}
.cotz-modal__field input,
.cotz-modal__field textarea {
	padding: 0.6rem 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgba(31, 26, 20, 0.2);
	font-family: var(--font-body);
	font-size: 0.95rem;
	color: var(--text);
	border-radius: 0;
	resize: vertical;
}
.cotz-modal__field input:focus,
.cotz-modal__field textarea:focus { outline: none; border-bottom-color: var(--accent); }
.cotz-modal__field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
}
.cotz-modal__field-row .cotz-modal__field--small { grid-template-columns: 0.4fr 1fr; }

.cotz-modal__checkbox {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-family: var(--font-body);
	font-size: 0.78rem;
	color: var(--text-mute);
	line-height: 1.5;
	margin-top: 0.25rem;
}
.cotz-modal__checkbox input { margin-top: 0.2rem; }
.cotz-modal__checkbox a { color: var(--accent); text-decoration: underline; }

.cotz-modal__submit {
	margin-top: 0.75rem;
	padding: 0.95rem 1.25rem;
	background: var(--bondo-ink);
	color: var(--bondo-cream);
	border: 0;
	border-radius: 999px;
	font-family: var(--font-body);
	font-size: 0.88rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: background 0.35s var(--ease-out);
}
.cotz-modal__submit:hover:not(:disabled) { background: var(--accent-deep); }
.cotz-modal__submit:disabled { opacity: 0.5; cursor: wait; }

.cotz-modal__feedback {
	padding: 0;
	font-size: 0.85rem;
}
.cotz-modal__feedback.is-success {
	padding: 0.75rem 1rem;
	background: rgba(110, 47, 42, 0.08);
	color: var(--accent-deep);
	border-radius: 4px;
}
.cotz-modal__feedback.is-error {
	padding: 0.75rem 1rem;
	background: rgba(182, 110, 74, 0.15);
	color: var(--accent-deep);
	border-radius: 4px;
}

/* ==========================================================================
   HISTORIA (page template) — editorial chapters about the brand
   ========================================================================== */

/* Hero: text-only intro on cream (Eunoea Brand Story style) */
.hist-intro {
	background: var(--bondo-cream);
	padding-block: clamp(7rem, 14vw, 12rem) clamp(4rem, 8vw, 7rem);
	text-align: center;
}
.hist-intro__inner {
	max-width: 1020px;
	margin: 0 auto;
	padding-inline: var(--gutter);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(1.5rem, 3vw, 2.25rem);
}
.hist-intro__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(1.4rem, 2.8vw, 2.6rem);
	line-height: 1.18;
	letter-spacing: -0.015em;
	color: var(--text);
	margin: 0;
	max-width: 22ch;
}
.hist-intro__title em { color: var(--accent); font-style: italic; }
.hist-intro__lead {
	font-family: var(--font-body);
	font-weight: 300;
	font-size: clamp(0.95rem, 1.15vw, 1.05rem);
	line-height: 1.78;
	color: var(--text-mute);
	margin: 0;
	max-width: 64ch;
}

/* Chapter — 2-col block of copy + image (alternating sides via .is-flipped) */
.hist-chapter {
	background: var(--bondo-cream);
	padding-block: clamp(4rem, 9vw, 8rem);
	overflow: hidden;
}
.hist-chapter__inner {
	max-width: var(--container);
	margin: 0 auto;
	padding-inline: var(--gutter);
	display: grid;
	grid-template-columns: 1fr 0.85fr;
	gap: clamp(3rem, 6vw, 6rem);
	align-items: center;
}
.hist-chapter.is-flipped .hist-chapter__media { order: 1; }
.hist-chapter.is-flipped .hist-chapter__copy  { order: 2; }

.hist-chapter__copy {
	display: flex;
	flex-direction: column;
	gap: clamp(1rem, 2vw, 1.5rem);
	max-width: 56ch;
}
.hist-chapter__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(1.65rem, 3vw, 2.6rem);
	line-height: 1.14;
	letter-spacing: -0.015em;
	color: var(--text);
	margin: 0.25rem 0 0.5rem;
	max-width: 22ch;
}
.hist-chapter__title em { color: var(--accent); font-style: italic; }
.hist-chapter__body {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.hist-chapter__body p {
	margin: 0;
	font-family: var(--font-body);
	font-size: 0.98rem;
	line-height: 1.78;
	color: var(--text-mute);
	max-width: 56ch;
}
.hist-chapter__media {
	overflow: hidden;
	border-radius: 6px;
	aspect-ratio: 4/5;
	background: var(--bg-stone);
	box-shadow: 0 30px 80px -45px rgba(31, 26, 20, 0.4);
}
.hist-chapter__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	transform: scale(1.04);
	transition: transform 2.4s var(--ease-out);
}
.hist-chapter:hover .hist-chapter__media img { transform: scale(1.08); }

/* Vision — centered editorial quote block */
.hist-vision {
	background: var(--bondo-paper);
	padding-block: clamp(5rem, 11vw, 9rem);
	text-align: center;
}
.hist-vision__inner {
	max-width: 980px;
	margin: 0 auto;
	padding-inline: var(--gutter);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(1.5rem, 3vw, 2.5rem);
}
.hist-vision__titulo {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(1.6rem, 3.2vw, 2.9rem);
	line-height: 1.18;
	letter-spacing: -0.013em;
	color: var(--bondo-stone);
	margin: 0;
	max-width: 28ch;
}
.hist-vision__titulo em { color: var(--accent); font-style: italic; }
.hist-vision__texto {
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.75;
	color: var(--text-mute);
	margin: 0;
	max-width: 56ch;
}

/* Equipo — grid of partner studios */
.hist-equipo {
	background: var(--bondo-cream);
	padding-block: clamp(4rem, 9vw, 8rem);
	overflow: hidden;
}
.hist-equipo__inner {
	max-width: var(--container);
	margin: 0 auto;
	padding-inline: var(--gutter);
}
.hist-equipo__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(1rem, 2vw, 1.5rem);
	text-align: center;
	margin-bottom: clamp(3rem, 6vw, 5rem);
}
.hist-equipo__titulo {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(1.6rem, 2.8vw, 2.5rem);
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--text);
	margin: 0;
	max-width: 22ch;
}
.hist-equipo__texto {
	font-family: var(--font-body);
	font-size: 0.98rem;
	line-height: 1.7;
	color: var(--text-mute);
	margin: 0;
	max-width: 60ch;
}

.hist-equipo__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(3rem, 5vw, 5rem) clamp(2rem, 3vw, 2.5rem);
}

/* Partner card — large image on top, serif role + body name + description */
.hist-partner {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}
.hist-partner__media {
	overflow: hidden;
	border-radius: 4px;
	aspect-ratio: 4/3;
	background: var(--bg-stone);
}
.hist-partner__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 1.6s var(--ease-out);
}
.hist-partner:hover .hist-partner__media img { transform: scale(1.04); }

/* Partner block variant: LOGO — center the logo on a clean cream tile
   instead of a cropped photo. Prevents the logo from getting stretched. */
.hist-partner__media--logo {
	background: var(--bondo-cream);
	display: grid;
	place-items: center;
	padding: clamp(1.5rem, 3vw, 2.5rem);
	border: 1px solid rgba(31, 26, 20, 0.06);
}
.hist-partner__media--logo img {
	width: auto;
	height: auto;
	max-width: 75%;
	max-height: 75%;
	object-fit: contain;
	transform: none !important;
	transition: none;
}
.hist-partner.is-logo:hover .hist-partner__media--logo img {
	transform: scale(1.03) !important;
	transition: transform 0.6s var(--ease-out);
}

.hist-partner__rol {
	font-family: var(--font-display);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.35rem, 1.85vw, 1.7rem);
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--accent);
	margin: 0.25rem 0 0;
}
.hist-partner__nombre {
	font-family: var(--font-body);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.005em;
	color: var(--text);
	margin: 0;
}
.hist-partner__desc {
	font-size: 0.9rem;
	line-height: 1.7;
	color: var(--text-mute);
	margin: 0;
	max-width: 44ch;
}

/* Final CTA — centered on cream (Eunoea closing style) */
.hist-cta-light {
	background: var(--bondo-cream);
	padding-block: clamp(5rem, 11vw, 9rem);
	text-align: center;
}
.hist-cta-light__inner {
	max-width: 880px;
	margin: 0 auto;
	padding-inline: var(--gutter);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(1.5rem, 3vw, 2.25rem);
}
.hist-cta-light__title {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(1.9rem, 4vw, 3.6rem);
	line-height: 1.12;
	letter-spacing: -0.015em;
	color: var(--text);
	margin: 0;
	max-width: 22ch;
}
/* The "last word" highlight — same poetic detail as Eunoea */
.hist-cta-light__title em {
	font-style: italic;
	color: var(--bondo-blush);
}
.hist-cta-light__desc {
	font-size: clamp(0.95rem, 1.1vw, 1.05rem);
	line-height: 1.75;
	color: var(--text-mute);
	margin: 0;
	max-width: 60ch;
}
.hist-cta-light__btn {
	margin-top: 0.5rem;
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	padding: 1rem 1.75rem;
	background: var(--bondo-ink);
	color: var(--bondo-cream);
	border: 1px solid var(--bondo-ink);
	border-radius: 999px;
	font-family: var(--font-body);
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-decoration: none;
	transition: background 0.4s var(--ease-out), color 0.4s var(--ease-out), gap 0.4s var(--ease-out);
}
.hist-cta-light__btn:hover {
	background: var(--accent-deep);
	border-color: var(--accent-deep);
	gap: 0.95rem;
}
.hist-cta-light__btn svg { flex-shrink: 0; transition: transform 0.35s var(--ease-out); }
.hist-cta-light__btn:hover svg { transform: translateX(2px); }

/* ==========================================================================
   RESPONSIVE — mobile-first, layered breakpoints
   1280  laptop/small desktop refinements
   1024  tablet landscape — major layouts collapse to 2 columns
    768  tablet portrait — most grids go to 1 column
    540  mobile — everything stacks, type shrinks
    380  small mobile — extra tightening
   ========================================================================== */

/* ── Laptop / small desktop ─────────────────────────────────────────────── */
@media (max-width: 1280px) {
	.residencias__inner {
		grid-template-columns: 1fr 1fr 1fr;
		gap: 1.5rem;
	}
	.amenidades__tabs { gap: 2rem; min-height: 480px; }
	.contacto__inner { gap: clamp(2rem, 5vw, 4rem); }

	.res-feature__inner { gap: clamp(2rem, 4vw, 3.5rem); }
}

/* ── Tablet landscape ───────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	:root {
		--section-pad: clamp(4rem, 10vw, 7rem);
	}

	.site-header { padding: 1rem var(--gutter); gap: 0.85rem; }
	.site-header__left .header-pill span { display: none; }
	.site-header__left .header-pill { padding: 0.85rem; width: 44px; height: 44px; justify-content: center; }
	.site-header__symbol { width: 44px; height: 44px; }
	.site-header__wordmark { font-size: 0.7rem; letter-spacing: 0.3em; text-indent: 0.3em; }
	.site-header__burger { width: 44px; height: 44px; }

	.intro__inner,
	.cartagena__top,
	.amenidades__header,
	.rentabilidad__header,
	.contacto__inner { grid-template-columns: 1fr; gap: 2.5rem; }

	.intro__media-secondary { margin-top: 0; }

	.amenidades__header { align-items: flex-start; }
	.amenidades__header-right { justify-content: flex-start; }
	.amenidades__tabs { grid-template-columns: 1fr; gap: 2rem; min-height: 0; }
	/* Hide the side visual on mobile — the image lives inside each accordion item instead */
	.amenidades__visual { display: none; }
	.amenidad__mobile-img { display: block; }

	.galeria__grid { column-count: 2; }

	.site-footer__grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }

	/* Apartamentos: collapse from 5 cols to 2 cols.
	   Side photos become a 2-col grid above + below the center.
	   Center cell takes a full-width row in the middle. */
	.apartamentos__grid {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: none;
		grid-auto-rows: auto;
		height: auto;
		gap: 0.5rem;
	}
	.ap-photo { aspect-ratio: 4/5; }
	.ap-photo--c1  { grid-column: 1; grid-row: 1; }
	.ap-photo--c2a { grid-column: 2; grid-row: 1; }
	.ap-photo--c2b { grid-column: 1; grid-row: 2; }
	.ap-center     {
		grid-column: 1 / -1;
		grid-row: 3;
		aspect-ratio: 16/10;
		height: auto;
	}
	.ap-photo--c4a { grid-column: 2; grid-row: 2; }
	.ap-photo--c4b { grid-column: 1; grid-row: 4; }
	.ap-photo--c5  { grid-column: 2; grid-row: 4; }
	.ap-center__featured {
		position: relative;
		top: auto; left: auto;
		transform: none;
		width: 100%;
		height: 100%;
	}
	.ap-center__overlay { opacity: 1 !important; pointer-events: auto; }

	/* Residencias: title spans the top, then secondary image + copy beside main */
	.residencias__inner {
		grid-template-columns: 1fr 1fr;
		gap: 1.5rem;
	}
	.residencias__title-col {
		grid-column: 1 / -1;
		max-width: none;
		margin-bottom: 1rem;
	}
	.residencias__image--main { aspect-ratio: 3/4; }
	.residencias__image--secondary { aspect-ratio: 3/4; }
	.residencias__side-col { gap: 1.25rem; }

	.ubicacion__map { height: clamp(360px, 55vh, 520px); }

	.site-footer__wordmark-deco { font-size: clamp(5rem, 22vw, 14rem); }

	/* Las Residencias page */
	.res-feature__inner { gap: clamp(2.5rem, 5vw, 4rem); }

	/* Bienestar — slightly tighter at tablet landscape */
	.bien-amenity { gap: clamp(2rem, 4vw, 3.5rem); }

	/* Planos — 2-col grid at tablet landscape */
	.planos__grid { grid-template-columns: repeat(2, 1fr); }

	/* Alrededores — sticky map shorter at this size */
	.alred-timeline__map { height: calc(85vh - var(--header-h)); }
	.alred-entry__title { font-size: clamp(1.4rem, 2.4vw, 2rem); }

	/* Discover — slightly tighter at tablet landscape */
	.alred-discover__grid { gap: clamp(2rem, 4vw, 3.5rem); }
	.alred-discover__title { font-size: clamp(1.6rem, 2.8vw, 2.3rem); }

	/* Historia — tighter at 1024 */
	.hist-chapter__inner { gap: clamp(2rem, 4vw, 3.5rem); }
	.hist-equipo__grid { grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 3rem); }
	.hist-partner__rol { font-size: clamp(1.2rem, 1.8vw, 1.5rem); }

	/* Cotizar — 3 columns + tighter filters */
	.cotz__grid { grid-template-columns: repeat(3, 1fr); }
	.cotz__filtros { grid-template-columns: repeat(2, 1fr) auto; }
}

/* ── Tablet portrait ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
	:root {
		--header-h: 76px;
		--section-pad: clamp(3.5rem, 10vw, 5.5rem);
	}

	.hero { padding-top: var(--header-h); }
	.hero__title { font-size: clamp(3rem, 13vw, 6rem); }
	.hero__subtitle { font-size: 0.95rem; max-width: 90%; }
	.hero__content { gap: 1.2rem; padding-top: 3rem; }
	.hero__thumb { width: clamp(70px, 18vw, 100px); }

	.manifesto__text { font-size: clamp(1.6rem, 5.4vw, 2.6rem); }
	.manifesto__text-wrap { margin-bottom: clamp(3rem, 8vw, 5rem); }
	.manifesto__featured-frame {
		width: calc(80vw + var(--grow, 0) * 20vw);
		height: calc(48vh + var(--grow, 0) * 22vh);
	}

	.residencias__inner { grid-template-columns: 1fr; }
	.residencias__image--main,
	.residencias__image--secondary { aspect-ratio: 4/5; }
	.residencias__side-col { gap: 1.5rem; }

	.amenidades__visual { aspect-ratio: 1/1; }
	.amenidad__btn { padding: 1.1rem 0; font-size: clamp(1.2rem, 4vw, 1.6rem); }

	.contacto__form { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
	.contacto__title { max-width: none; }

	.site-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: 2rem;
	}
	.site-footer__bottom-inner { gap: 1rem; }

	/* Las Residencias page — stack feature blocks */
	.res-hero { padding-bottom: clamp(2.5rem, 7vw, 4rem); }
	.res-hero__title { font-size: clamp(1.7rem, 5vw, 2.6rem); }
	.res-hero__lead { font-size: 0.9rem; max-width: 92%; }

	.res-intro__text { font-size: clamp(1.25rem, 3.4vw, 1.9rem); }
	.res-intro { padding-block: clamp(3.5rem, 9vw, 6rem); }

	/* Below 768 the sticky-stack cards get too cramped — release sticky
	   and let them flow normally as full-height stacked cards. */
	.res-feature {
		position: relative;
		top: auto;
		min-height: auto;
		padding: clamp(3rem, 8vw, 5rem) var(--gutter);
	}
	.res-feature__inner {
		grid-template-columns: 1fr;
		gap: 1.75rem;
	}
	.res-feature__media { aspect-ratio: 4/5; max-width: 560px; width: 100%; margin-inline: auto; }
	.res-feature__body  { max-width: 56ch; }

	.res-quote { padding-block: clamp(3.5rem, 9vw, 6rem); }
	.res-quote__text { font-size: clamp(1.2rem, 3.4vw, 1.8rem); }

	/* Bienestar — stack each amenity block (image on top, copy below) */
	.bien-amen { padding-block: clamp(2.5rem, 7vw, 4.5rem); }
	.bien-amen__title { font-size: clamp(1.3rem, 3.4vw, 1.7rem); }
	.bien-amen__list { gap: clamp(2.5rem, 6vw, 4rem); }
	.bien-amenity {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
	.bien-amenity.is-flipped .bien-slider        { order: 0; }
	.bien-amenity.is-flipped .bien-amenity__body { order: 1; }
	.bien-slider { aspect-ratio: 4/3; }
	.bien-amenity__body { max-width: 56ch; }
	/* Arrows always visible on touch — there's no hover */
	.bien-slider__arrow { opacity: 1; background: rgba(244, 239, 230, 0.75); }

	/* Planos — 2-col grid + scrollable filter pills on touch */
	.planos__grid { grid-template-columns: repeat(2, 1fr); gap: clamp(1.75rem, 4vw, 2.5rem); }
	.planos__filtros { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 0.5rem; }
	.planos__filtro { white-space: nowrap; }

	/* Alrededores — collapse to single column: map on top (NOT sticky), entries below.
	   Sticky maps in 1-col layouts feel cramped on tablets/mobile so we release it. */
	.alred-timeline__grid {
		grid-template-columns: 1fr;
		gap: clamp(2rem, 5vw, 3rem);
	}
	.alred-timeline__map {
		position: relative;
		top: auto;
		height: clamp(320px, 50vh, 480px);
		max-height: none;
	}
	.alred-timeline__entries { gap: clamp(3rem, 6vw, 4.5rem); }

	/* Discover — stack list above map; release sticky */
	.alred-discover__grid {
		grid-template-columns: 1fr;
		gap: clamp(2rem, 5vw, 3rem);
	}
	.alred-discover__map {
		height: auto;
		align-self: auto;
		order: -1;
	}
	.alred-discover__map-sticky {
		position: relative;
		top: auto;
		aspect-ratio: 16/12;
		max-height: 500px;
	}

	/* Historia — stack chapters at tablet portrait */
	.hist-intro { padding-block: clamp(5rem, 11vw, 8rem) clamp(3rem, 7vw, 5rem); }
	.hist-intro__title { font-size: clamp(1.3rem, 3.8vw, 1.9rem); line-height: 1.22; }

	.hist-chapter__inner {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	.hist-chapter.is-flipped .hist-chapter__media { order: 0; }
	.hist-chapter.is-flipped .hist-chapter__copy  { order: 1; }
	.hist-chapter__media { aspect-ratio: 4/3; max-width: 640px; width: 100%; margin-inline: auto; }
	.hist-chapter__copy { max-width: 56ch; }
	.hist-equipo__grid { grid-template-columns: repeat(2, 1fr); gap: clamp(2rem, 4vw, 2.5rem); }

	.hist-cta-light__title { font-size: clamp(1.6rem, 4vw, 2.6rem); }

	/* Cotizar — 2 columns at 768; modal stacks */
	.cotz__grid { grid-template-columns: repeat(2, 1fr); }
	.cotz__filtros { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
	.cotz__reset { grid-column: 1 / -1; }
	.cotz-modal__grid { grid-template-columns: 1fr; }
	.cotz-modal__media { min-height: 280px; aspect-ratio: 4/3; }
	.cotz-modal.is-open { padding: 2vh 0.5rem; }
	.cotz-modal__panel { border-radius: 4px; }

	.res-cta { padding-block: clamp(3.5rem, 10vw, 6rem); }
	.res-cta__title { font-size: clamp(1.5rem, 4.4vw, 2.2rem); }
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 540px) {
	:root {
		--header-h: 70px;
		--gutter: 1.25rem;
		--section-pad: clamp(3rem, 11vw, 4.5rem);
	}

	/* Header — keep pills + burger compact */
	.site-header { padding: 0.75rem var(--gutter); gap: 0.5rem; }
	.site-header__left { gap: 0.4rem; }
	.site-header__left .header-pill { width: 40px; height: 40px; padding: 0.7rem; }
	.site-header__burger { width: 40px; height: 40px; }
	.site-header__logo img { height: 56px; }
	.site-header.is-light .site-header__logo img { height: 44px; }

	/* Mobile menu — tighten brand + nav */
	.mobile-menu__brand svg,
	.mobile-menu__brand img { height: clamp(80px, 24vw, 110px); }
	.mobile-menu__list a { font-size: clamp(1.6rem, 7vw, 2.2rem); }

	/* Hero */
	.hero__title { font-size: clamp(2.6rem, 13vw, 4.4rem); letter-spacing: -0.02em; }
	.hero__subtitle { font-size: 0.95rem; line-height: 1.6; max-width: 100%; padding-inline: 0.25rem; }
	.hero__content { padding-top: 2.5rem; gap: 1rem; }
	.hero__thumbs {
		left: 50%;
		right: auto;
		transform: translateX(-50%);
		bottom: 1.25rem;
		padding: 0.3rem;
		gap: 0.35rem;
	}
	.hero__thumb { width: clamp(60px, 22vw, 80px); }
	.hero__thumb-label { font-size: 0.55rem; letter-spacing: 0.16em; }
	.hero__arrows { display: none; }

	/* Manifesto */
	.manifesto { padding-block: clamp(3.5rem, 10vw, 5rem) clamp(2.5rem, 6vw, 3.5rem); }
	.manifesto__text { font-size: clamp(1.45rem, 6vw, 2rem); line-height: 1.22; }
	.manifesto__text-wrap { margin-bottom: clamp(2.5rem, 8vw, 4rem); }
	.manifesto__featured-frame {
		width: calc(92vw + var(--grow, 0) * 8vw);
		height: calc(46vh + var(--grow, 0) * 18vh);
		max-height: 70vh;
	}
	.manifesto__caption { font-size: 0.7rem; letter-spacing: 0.22em; }

	/* Residencias */
	.residencias { padding-block: clamp(3rem, 9vw, 4.5rem); }
	.residencias__title { font-size: clamp(1.05rem, 4.2vw, 1.4rem); line-height: 1.3; }
	.residencias__image--main,
	.residencias__image--secondary { aspect-ratio: 4/5; }
	.residencias__desc { font-size: 0.9rem; }

	/* Apartamentos: stack everything in 1 col */
	.apartamentos { padding-block: clamp(3rem, 9vw, 4.5rem); }
	.apartamentos__header { padding-inline: var(--gutter); margin-bottom: clamp(2rem, 6vw, 3rem); }
	.apartamentos__title { font-size: clamp(1.7rem, 7vw, 2.3rem); max-width: none; }
	.apartamentos__grid {
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
		gap: 0.5rem;
		padding-inline: 0;
	}
	.ap-photo--c1, .ap-photo--c2a, .ap-photo--c2b,
	.ap-photo--c4a, .ap-photo--c4b, .ap-photo--c5 {
		grid-column: 1;
		grid-row: auto;
		aspect-ratio: 4/3;
	}
	.ap-center {
		grid-column: 1;
		grid-row: auto;
		aspect-ratio: 4/5;
	}
	.ap-center__overlay { padding: 1.5rem; }
	.ap-center__desc { font-size: 0.9rem; margin-bottom: 1.25rem; }

	/* Amenidades */
	.amenidades { padding-block: clamp(3rem, 9vw, 4.5rem); }
	.amenidades__header { gap: 1.5rem; margin-bottom: 2rem; }
	.amenidades__title { font-size: clamp(1.7rem, 7vw, 2.3rem); max-width: none; }
	.amenidades__desc { font-size: 0.92rem; }
	.amenidades__visual { aspect-ratio: 4/3; }
	.amenidades__tabs { gap: 1.5rem; }
	.amenidad__btn {
		padding: 1rem 0;
		font-size: clamp(1.15rem, 5vw, 1.5rem);
		gap: 0.5rem;
	}
	.amenidad__desc { font-size: 0.85rem; max-width: none; }

	/* Ubicación */
	.ubicacion { padding-block: clamp(3rem, 9vw, 4.5rem) 0; }
	.ubicacion__title { font-size: clamp(1.7rem, 7vw, 2.4rem); }
	.ubicacion__desc { font-size: 0.92rem; }
	.ubicacion__map {
		height: clamp(320px, 60vh, 460px);
		padding-inline: var(--gutter);
	}
	.ubicacion__open {
		right: calc(var(--gutter) + 0.75rem);
		bottom: 0.85rem;
		padding: 0.7rem 1rem;
		font-size: 0.75rem;
	}

	/* Contacto */
	.contacto { padding-block: clamp(3rem, 9vw, 4.5rem); }
	.contacto__inner { gap: 2rem; }
	.contacto__title { font-size: clamp(1.7rem, 7vw, 2.4rem); max-width: none; }
	.contacto__desc { font-size: 0.92rem; }
	.contacto__form { grid-template-columns: 1fr; gap: 1.25rem; }
	.contacto__form .field--full { grid-column: auto; }
	.contacto__input,
	.contacto__select { font-size: 16px; padding: 0.55rem 0; } /* 16px prevents iOS zoom-on-focus */
	.contacto__submit { padding: 1rem 1.25rem; font-size: 0.95rem; }

	/* Galería */
	.galeria__grid { column-count: 1; column-gap: 1rem; }
	.galeria__item { margin-bottom: 1rem; }

	/* Rentabilidad stats */
	.rentabilidad__stat {
		border-left: 0; padding-left: 0;
		border-top: 1px solid rgba(246, 240, 231, 0.18);
		padding-top: 1rem;
	}
	.rentabilidad__stat:first-child { border-top: 0; padding-top: 0; }

	/* Marquee */
	.bondo-marquee__track { font-size: clamp(2.2rem, 12vw, 4.5rem); }

	/* Footer */
	.site-footer { padding-top: clamp(3rem, 9vw, 4.5rem); }
	.site-footer__grid {
		grid-template-columns: 1fr;
		gap: 2.25rem;
		padding-bottom: 2.5rem;
	}
	.site-footer__logo img { height: 64px; }
	.site-footer__bottom { padding: 1.5rem var(--gutter); }
	.site-footer__bottom-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}
	.site-footer__legal { font-size: 0.65rem; }
	.site-footer__wordmark-deco { font-size: clamp(4.5rem, 24vw, 9rem); }

	/* Las Residencias — mobile */
	.res-hero { padding: calc(var(--header-h) + 1rem) 0 clamp(2rem, 8vw, 3.5rem); }
	.res-hero__inner { gap: 1rem; }
	.res-hero__title { font-size: clamp(1.6rem, 6.5vw, 2.2rem); max-width: none; }
	.res-hero__lead { font-size: 0.88rem; }
	.res-hero__scroll { margin-top: 1.25rem; font-size: 0.55rem; }
	.res-hero__scroll-line { height: 40px; }

	.res-intro__text { font-size: clamp(1.15rem, 4.2vw, 1.6rem); max-width: 26ch; }

	.res-feature { padding: clamp(2.5rem, 8vw, 4rem) var(--gutter); }
	.res-feature__media { aspect-ratio: 3/4; }
	.res-feature__title { font-size: clamp(1.15rem, 4.4vw, 1.5rem); }
	.res-feature__desc { font-size: 0.88rem; }
	.res-feature__list li { font-size: 0.84rem; padding: 0.65rem 0 0.65rem 1rem; }
	.res-feature__label { font-size: 0.62rem; letter-spacing: 0.22em; }

	.res-quote__text { font-size: clamp(1.1rem, 4vw, 1.55rem); }
	.res-quote__inner { gap: 1.5rem; }

	.res-cta__title { font-size: clamp(1.35rem, 5vw, 1.9rem); }
	.res-cta__desc { font-size: 0.88rem; }

	/* Bienestar — mobile tightening */
	.bien-amen { padding-block: clamp(2.5rem, 8vw, 4rem); }
	.bien-amen__header { gap: 0.75rem; margin-bottom: 2rem; }
	.bien-amen__title { font-size: clamp(1.2rem, 4.8vw, 1.55rem); }
	.bien-amen__list { gap: 2.5rem; }
	.bien-slider { aspect-ratio: 4/3; border-radius: 6px; }
	.bien-slider__arrow { width: 36px; height: 36px; }
	.bien-slider__arrow[data-dir="prev"] { left: 0.5rem; }
	.bien-slider__arrow[data-dir="next"] { right: 0.5rem; }
	.bien-slider__dots { bottom: 0.55rem; padding: 0.35rem 0.55rem; }
	.bien-amenity__tagline { font-size: 0.92rem; }
	.bien-amenity__title { font-size: clamp(1.25rem, 5vw, 1.7rem); }
	.bien-amenity__list li { font-size: 0.85rem; padding: 0.45rem 0 0.45rem 1.05rem; }

	/* Planos — single column at mobile */
	.planos { padding-block: clamp(2.5rem, 8vw, 4rem); }
	.planos__filtros { gap: 0.45rem; margin-bottom: 2rem; }
	.planos__filtro { font-size: 0.74rem; padding: 0.5rem 1rem; }
	.planos__grid { grid-template-columns: 1fr; gap: 2rem; }
	.plano-card { gap: 0.85rem; }
	.plano-card__title { font-size: 1.15rem; }
	.plano-card__beds { font-size: 0.72rem; }
	.plano-card__specs p { font-size: 0.78rem; }
	.plano-card__cta { font-size: 0.72rem; padding: 0.5rem 0.75rem; }
	.plano-card__cta--alt { font-size: 0.68rem; padding: 0.4rem 0.65rem; }

	/* Alrededores — mobile tightening */
	.alred-timeline { padding-block: clamp(2.5rem, 8vw, 4rem); }
	.alred-timeline__title { font-size: clamp(1.3rem, 4.5vw, 1.7rem); }
	.alred-timeline__map { height: clamp(280px, 45vh, 380px); }
	.alred-timeline__entries {
		padding-left: 1.5rem;
		gap: 2.75rem;
	}
	.alred-entry::before { left: -0.75rem; width: 8px; height: 8px; }
	.alred-entry__head { font-size: 0.78rem; gap: 0.5rem; }
	.alred-entry__title { font-size: clamp(1.25rem, 5.5vw, 1.7rem); }
	.alred-entry__desc { font-size: 0.88rem; }
	.alred-entry__cta { font-size: 0.7rem; }

	/* Discover mobile */
	.alred-discover { padding-block: clamp(2.5rem, 8vw, 4rem); }
	.alred-discover__title { font-size: clamp(1.3rem, 5vw, 1.8rem); max-width: none; }
	.alred-discover__cats { gap: 1.5rem; }
	.alred-discover__item { font-size: 0.88rem; }
	.alred-discover__map { aspect-ratio: 4/3; }

	/* Historia — mobile tightening */
	.hist-intro { padding-block: clamp(4rem, 10vw, 6rem) clamp(2.5rem, 6vw, 4rem); }
	.hist-intro__title { font-size: clamp(1.15rem, 4.6vw, 1.55rem); line-height: 1.25; }
	.hist-intro__lead { font-size: 0.88rem; }

	.hist-chapter { padding-block: clamp(2.5rem, 8vw, 4rem); }
	.hist-chapter__title { font-size: clamp(1.35rem, 5.5vw, 1.9rem); max-width: none; }
	.hist-chapter__body p { font-size: 0.92rem; }
	.hist-chapter__media { aspect-ratio: 3/4; }

	.hist-vision { padding-block: clamp(3rem, 9vw, 5rem); }
	.hist-vision__titulo { font-size: clamp(1.3rem, 5vw, 1.9rem); }
	.hist-vision__texto { font-size: 0.92rem; }

	.hist-equipo { padding-block: clamp(2.5rem, 8vw, 4rem); }
	.hist-equipo__titulo { font-size: clamp(1.3rem, 5vw, 1.8rem); }
	.hist-equipo__texto { font-size: 0.92rem; }
	.hist-equipo__grid { grid-template-columns: 1fr; gap: 2.5rem; }
	.hist-partner { gap: 0.85rem; }
	.hist-partner__media { aspect-ratio: 16/11; }
	.hist-partner__rol { font-size: clamp(1.2rem, 5vw, 1.5rem); }
	.hist-partner__nombre { font-size: 0.9rem; }
	.hist-partner__desc { font-size: 0.86rem; }

	.hist-cta-light { padding-block: clamp(3.5rem, 10vw, 6rem); }
	.hist-cta-light__title { font-size: clamp(1.45rem, 6vw, 2rem); }
	.hist-cta-light__desc { font-size: 0.9rem; }
	.hist-cta-light__btn { padding: 0.85rem 1.5rem; font-size: 0.8rem; }

	/* Cotizar — 1 column at mobile */
	.cotz__grid { grid-template-columns: 1fr; }
	.cotz__filtros { padding-bottom: 1.25rem; margin-bottom: 1.5rem; }
	.cotz-modal__specs { grid-template-columns: repeat(2, 1fr); }
	.cotz-modal__prices { grid-template-columns: 1fr; }
	.cotz-modal__field-row { grid-template-columns: 1fr; }
	.cotz-modal__body { padding: 1.5rem; }
}

/* ── Small mobile ───────────────────────────────────────────────────────── */
@media (max-width: 380px) {
	:root {
		--gutter: 1rem;
		--header-h: 64px;
	}
	.site-header__left .header-pill,
	.site-header__burger { width: 38px; height: 38px; padding: 0.65rem; }
	.site-header__logo img { height: 50px; }
	.site-header.is-light .site-header__logo img { height: 40px; }

	.hero__title { font-size: clamp(2.2rem, 14vw, 3.6rem); }
	.hero__subtitle { font-size: 0.88rem; }
	.hero__thumb { width: 60px; }
	.hero__thumb-label { font-size: 0.5rem; }

	.manifesto__text { font-size: clamp(1.3rem, 6.5vw, 1.7rem); }

	.residencias__title,
	.apartamentos__title,
	.amenidades__title,
	.ubicacion__title,
	.contacto__title { font-size: clamp(1.5rem, 7.5vw, 1.9rem); }

	.amenidad__btn { font-size: clamp(1.05rem, 5.5vw, 1.3rem); padding: 0.85rem 0; }

	.site-footer__logo img { height: 56px; }

	.res-hero__title,
	.res-intro__text,
	.res-feature__title,
	.res-quote__text,
	.res-cta__title { font-size: clamp(1.1rem, 5.5vw, 1.45rem); }
	.res-hero__lead, .res-feature__desc, .res-cta__desc { font-size: 0.85rem; }
}

/* ── Landscape phones (short viewport) ──────────────────────────────────── */
@media (max-height: 520px) and (orientation: landscape) {
	.hero { min-height: 100vh; }
	.hero__content { padding-top: 4.5rem; gap: 0.85rem; }
	.hero__title { font-size: clamp(2rem, 7vw, 3.5rem); }
	.hero__subtitle { font-size: 0.85rem; }
	.hero__thumbs { bottom: 0.85rem; }
	.hero__thumb { width: 60px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
	[data-reveal] {
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
	}
	[data-stagger] > * { opacity: 1 !important; transform: none !important; }
	.hero__media img, .hero__media video { animation: none !important; transform: none !important; }
}