@charset "UTF-8";
/* ==========================================================================
   Cabañas Los Prados — landing stylesheet
   Layers keep Astra's leftover rules from winning on specificity.
   ========================================================================== */

@layer tokens, reset, base, components, sections, utilities;

/* ==========================================================================
   TOKENS
   ========================================================================== */
@layer tokens {
:root {
	/* ---- Marca: mar (verde azulado profundo) ---- */
	--mar-50:  #E8F2F3;
	--mar-100: #C9E2E5;
	--mar-200: #9AC8CE;
	--mar-300: #66A8B2;
	--mar-400: #3C8996;
	--mar-500: #1E7D8C;
	--mar-600: #17646F;
	--mar-700: #135A66;
	--mar-800: #0F4854;
	--mar-900: #0B3A44;
	--mar-950: #072830;

	/* ---- Marca: sol (ámbar de atardecer) ---- */
	--sol-50:  #FDF4E7;
	--sol-100: #FAE6C8;
	--sol-200: #F4CE94;
	--sol-300: #EDB262;
	--sol-400: #E08A2C;
	--sol-500: #D97E1E;
	--sol-600: #BC6714;
	--sol-700: #A85A10;
	--sol-800: #8A4B12;
	--sol-900: #6B3A10;

	/* ---- Madera / ladrillo ---- */
	--madera-300: #C9A57E;
	--madera-500: #A9713F;
	--madera-700: #7A4E28;

	/* ---- Neutros cálidos ---- */
	--arena-50:  #FBF8F3;
	--arena-100: #F4EFE6;
	--arena-200: #E8E0D2;
	--arena-300: #D7CBB7;
	--arena-400: #BCAC93;
	--arena-500: #9C8B71;
	--arena-600: #7A6B55;
	--arena-700: #5C5142;
	--arena-800: #403830;
	--arena-900: #2A251F;
	--arena-950: #17140F;

	/* ---- Semánticos ---- */
	--exito: #2E7D5B;
	--exito-bg: #EAF4EF;
	--error: #B3261E;
	--error-bg: #FBEDEC;
	/* Verde de marca real de WhatsApp: uno "de la casa" más oscuro se
	   confunde con cualquier botón verde y deja de leerse como WhatsApp. */
	--wa: #25D366;
	--wa-hover: #1DA851;
	--wa-glow: rgba(37, 211, 102, .35);

	/* ---- Overlays sobre foto ---- */
	--scrim-hero: linear-gradient(180deg, rgba(7,40,48,.60) 0%, rgba(7,40,48,.20) 32%, rgba(7,40,48,.36) 60%, rgba(7,40,48,.86) 100%);
	--scrim-card: linear-gradient(0deg, rgba(7,40,48,.90) 0%, rgba(7,40,48,.38) 46%, rgba(7,40,48,0) 78%);
	--velo: rgba(7,40,48,.62);
	--velo-hover: rgba(7,40,48,.34);
	--vineta: radial-gradient(120% 90% at 50% 40%, transparent 45%, rgba(7,40,48,.35) 100%);
	--vidrio: rgba(251,248,243,.74);
	--vidrio-oscuro: rgba(7,40,48,.55);
	--borde-vidrio: rgba(255,255,255,.22);

	/* ---- Tipografía ---- */
	--f-display: "Fraunces", "Iowan Old Style", Georgia, serif;
	--f-texto: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

	/* Bajado de 6.5rem: con un titular de frase completa, a 104px cada línea
	   se partía en dos y el bloque ocupaba media pantalla. */
	--t-display: clamp(2.375rem, 1.35rem + 4.4vw, 5rem);
	--t-h1:      clamp(2.25rem, 1.55rem + 3vw, 4.25rem);
	--t-h2:      clamp(1.75rem, 1.31rem + 1.88vw, 3rem);
	--t-h3:      clamp(1.375rem, 1.16rem + .94vw, 2rem);
	--t-h4:      clamp(1.125rem, 1.04rem + .38vw, 1.375rem);
	--t-lg:      clamp(1.0625rem, 1rem + .28vw, 1.25rem);
	--t-body:    clamp(1rem, .98rem + .09vw, 1.0625rem);
	--t-sm:      clamp(.875rem, .86rem + .09vw, .9375rem);
	--t-overline: .78125rem;

	/* ---- Espaciado ---- */
	--e-1: .25rem;  --e-2: .5rem;   --e-3: .75rem;  --e-4: 1rem;
	--e-5: 1.25rem; --e-6: 1.5rem;  --e-8: 2rem;    --e-10: 2.5rem;
	--e-12: 3rem;   --e-16: 4rem;   --e-20: 5rem;   --e-24: 6rem;

	/* ---- Layout ---- */
	--cont: 1240px;
	--cont-angosto: 760px;
	--cont-ancho: 1440px;
	--gutter: clamp(1.25rem, .75rem + 2vw, 2.5rem);
	--gap: clamp(1rem, .5rem + 1.6vw, 1.75rem);
	--gap-y: clamp(1.25rem, .8rem + 1.6vw, 2.25rem);
	--section-y: clamp(3.25rem, 2rem + 5vw, 6.5rem);
	--section-y-lg: clamp(4rem, 2.4rem + 6.5vw, 8rem);

	/* ---- Radios ---- */
	--r-xs: 4px; --r-sm: 8px; --r-md: 12px;
	--r-lg: 18px; --r-xl: 28px; --r-2xl: 40px; --r-pill: 999px;

	/* ---- Sombras ---- */
	--sh-1: 0 1px 2px rgba(23,20,15,.05), 0 1px 3px rgba(23,20,15,.07);
	--sh-2: 0 4px 8px -2px rgba(23,20,15,.07), 0 8px 20px -6px rgba(23,20,15,.11);
	--sh-3: 0 10px 24px -6px rgba(23,20,15,.10), 0 24px 48px -12px rgba(23,20,15,.15);
	--sh-4: 0 24px 56px -12px rgba(23,20,15,.16), 0 48px 96px -24px rgba(23,20,15,.22);
	--sh-foto: 0 32px 64px -24px rgba(7,40,48,.42);

	/* ---- Movimiento ---- */
	--d-1: 120ms; --d-2: 200ms; --d-3: 320ms; --d-4: 520ms; --d-5: 800ms;
	--ez-out: cubic-bezier(.32,.72,0,1);
	--ez-in: cubic-bezier(.4,0,1,1);
	--ez-std: cubic-bezier(.4,0,.2,1);
	--ez-spring: cubic-bezier(.34,1.56,.64,1);

	/* ---- Foco (se redefine en secciones oscuras) ---- */
	--foco: var(--mar-700);
	--foco-bg: var(--arena-50);

	/* ---- Capas ---- */
	--z-nav: 160; --z-fab: 90; --z-drawer: 150; --z-lightbox: 200;

	/* ---- Tratamiento fotográfico global ---- */
	--foto-filtro: saturate(1.06) contrast(1.06) brightness(1.02);
}

/* Secciones oscuras: invierten roles de color sin duplicar componentes. */
.lp-dark {
	--foco: #F5B851;
	--foco-bg: var(--mar-950);
}
}

/* ==========================================================================
   RESET
   ========================================================================== */
@layer reset {
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 98px;
}

body.lp-body {
	margin: 0;
	background: var(--arena-50);
	color: var(--arena-900);
	font-family: var(--f-texto);
	font-size: var(--t-body);
	line-height: 1.68;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

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

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--foco-bg), 0 0 0 5px var(--foco);
	border-radius: var(--r-xs);
}

::selection { background: var(--sol-200); color: var(--mar-950); }
}

/* ==========================================================================
   BASE
   ========================================================================== */
@layer base {
h1, h2, h3 {
	font-family: var(--f-display);
	font-weight: 600;
	font-variation-settings: "SOFT" 20, "WONK" 0;
	text-wrap: balance;
	color: var(--mar-950);
}

h4, h5, h6 { font-family: var(--f-texto); font-weight: 600; }

p { text-wrap: pretty; }

.lp-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.lp-skip {
	position: absolute;
	top: -100px; left: var(--e-4);
	z-index: 500;
	padding: var(--e-3) var(--e-5);
	background: var(--mar-950);
	color: #fff;
	border-radius: var(--r-sm);
	font-weight: 600;
	transition: top var(--d-2) var(--ez-out);
}
.lp-skip:focus { top: var(--e-4); }

.lp-main { display: block; }
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */
@layer utilities {
.lp-shell {
	width: 100%;
	max-width: calc(var(--cont) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.lp-shell--angosto { max-width: calc(var(--cont-angosto) + var(--gutter) * 2); }
.lp-shell--ancho   { max-width: calc(var(--cont-ancho) + var(--gutter) * 2); }

.lp-section { padding-block: var(--section-y); }
.lp-section--lg { padding-block: var(--section-y-lg); }
.lp-section--arena { background: var(--arena-100); }

/* Dos secciones seguidas sobre el mismo fondo suman su aire y el corte deja
   de leerse: queda un vacío de más de 250px. Cuando pasa, la segunda arranca
   sin padding superior y el respiro lo da el de abajo de la primera. */
.lp-section:not(.lp-section--arena):not(.lp-dark)
+ .lp-section:not(.lp-section--arena):not(.lp-dark) {
	padding-top: 0;
}

.lp-dark {
	background: var(--mar-950);
	color: var(--arena-100);
}
.lp-dark h2, .lp-dark h3 { color: #fff; }

/* Encabezado de sección reutilizable */
.lp-head { max-width: 62ch; margin-bottom: clamp(1.75rem, 1rem + 2vw, 2.75rem); }
.lp-head--center { margin-inline: auto; text-align: center; }

.lp-kicker {
	display: inline-flex;
	align-items: center;
	gap: var(--e-2);
	font-size: var(--t-overline);
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--sol-800);
	margin-bottom: var(--e-4);
}
.lp-kicker::before {
	content: "";
	width: 28px; height: 2px;
	background: var(--sol-500);
	border-radius: 2px;
}
.lp-dark .lp-kicker { color: var(--sol-300); }

.lp-h2 { font-size: var(--t-h2); line-height: 1.1; letter-spacing: -.022em; }
/* Cada línea en su renglón cuando el título viene partido a mano. */
.lp-h2__linea { display: block; }

.lp-lead {
	font-size: var(--t-lg);
	line-height: 1.6;
	color: var(--arena-700);
	margin-top: var(--e-4);
	max-width: 60ch;
}
.lp-head--center .lp-lead { margin-inline: auto; }
.lp-dark .lp-lead { color: var(--mar-200); }
}

/* ==========================================================================
   COMPONENTS
   ========================================================================== */
@layer components {

/* ---- Botones ---------------------------------------------------------- */
.lp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--e-2);
	min-height: 48px;
	padding: 14px 28px;
	border-radius: var(--r-pill);
	font-family: var(--f-texto);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: .005em;
	line-height: 1;
	text-align: center;
	cursor: pointer;
	transition:
		background-color var(--d-2) var(--ez-std),
		border-color var(--d-2) var(--ez-std),
		color var(--d-2) var(--ez-std),
		box-shadow var(--d-3) var(--ez-out),
		transform var(--d-3) var(--ez-out);
}
.lp-btn svg { width: 20px; height: 20px; flex: none; transition: transform var(--d-2) var(--ez-out); }
.lp-btn:hover svg { transform: translateX(3px); }
.lp-btn--sm { min-height: 42px; padding: 10px 20px; font-size: .9375rem; }
.lp-btn--lg { min-height: 54px; padding: 17px 34px; font-size: 1.0625rem; }
.lp-btn--block { width: 100%; }

.lp-btn--primary {
	background: var(--sol-700);
	color: #fff;
	box-shadow: var(--sh-1);
}
.lp-btn--primary:hover { background: var(--sol-600); transform: translateY(-2px); box-shadow: var(--sh-2); }
.lp-btn--primary:active { background: var(--sol-900); transform: translateY(0) scale(.985); box-shadow: var(--sh-1); transition-duration: var(--d-1); }
.lp-btn--primary:disabled { background: var(--arena-300); color: var(--arena-600); box-shadow: none; cursor: not-allowed; transform: none; }

.lp-btn--secondary {
	background: transparent;
	color: var(--mar-700);
	border: 1.5px solid var(--mar-700);
	padding: 12.5px 26px;
}
.lp-btn--secondary:hover { background: var(--mar-700); color: #fff; transform: translateY(-2px); }
.lp-btn--secondary:active { background: var(--mar-800); transform: scale(.985); }
.lp-dark .lp-btn--secondary { color: #fff; border-color: rgba(255,255,255,.45); }
.lp-dark .lp-btn--secondary:hover { background: #fff; color: var(--mar-950); border-color: #fff; }

.lp-btn--glass {
	background: rgba(251,248,243,.14);
	color: #fff;
	border: 1px solid rgba(255,255,255,.38);
	text-shadow: 0 1px 2px rgba(7,40,48,.5);
	-webkit-backdrop-filter: blur(10px) saturate(1.4);
	backdrop-filter: blur(10px) saturate(1.4);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.lp-btn--glass { background: rgba(7,40,48,.58); }
}
.lp-btn--glass:hover { background: rgba(251,248,243,.95); color: var(--mar-950); border-color: transparent; transform: translateY(-2px); text-shadow: none; }
.lp-btn--glass:active { background: rgba(251,248,243,.85); transform: scale(.985); }

.lp-btn--wa { background: var(--wa); color: #fff; }
.lp-btn--wa:hover { background: var(--wa-hover); transform: translateY(-2px); box-shadow: var(--sh-2); }

/* Spinner de envío */
.lp-btn[data-loading="true"] { pointer-events: none; position: relative; color: transparent; }
.lp-btn[data-loading="true"] svg { opacity: 0; }
.lp-btn[data-loading="true"]::after {
	content: "";
	position: absolute;
	width: 18px; height: 18px;
	border: 2px solid rgba(255,255,255,.35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: lp-girar 700ms linear infinite;
}
@keyframes lp-girar { to { transform: rotate(360deg); } }

/* ---- Chips de filtro de galería --------------------------------------- */
.lp-filtro {
	padding: 9px 20px;
	border-radius: var(--r-pill);
	border: 1.5px solid var(--arena-300);
	background: transparent;
	color: var(--arena-700);
	font-size: var(--t-sm);
	font-weight: 600;
	white-space: nowrap;
	transition: background-color var(--d-2) var(--ez-std), border-color var(--d-2) var(--ez-std), color var(--d-2) var(--ez-std), transform var(--d-1) var(--ez-std);
}
.lp-filtro:hover { border-color: var(--mar-500); color: var(--mar-700); background: var(--mar-50); }
.lp-filtro:active { transform: scale(.96); }
.lp-filtro[aria-pressed="true"] { background: var(--mar-900); color: #fff; border-color: transparent; }

/* ---- Badge ------------------------------------------------------------ */
.lp-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--e-2);
	padding: 6px 12px;
	border-radius: var(--r-pill);
	font-size: var(--t-overline);
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	background: var(--sol-50);
	color: var(--sol-800);
}
.lp-badge--foto {
	background: var(--vidrio-oscuro);
	border: 1px solid var(--borde-vidrio);
	color: #fff;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.lp-badge--foto { background: rgba(7,40,48,.78); }
}

/* ---- Tratamiento fotográfico ------------------------------------------ */
.lp-foto {
	position: relative;
	overflow: hidden;
	background: var(--arena-200);
	isolation: isolate;
}
.lp-foto > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: var(--foto-filtro);
}
/* Grano: unifica la textura entre fotos de distinta procedencia. */
.lp-foto::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: .045;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.lp-foto--interior > img { filter: var(--foto-filtro) sepia(.06); }

/* ---- Header ----------------------------------------------------------- */
.lp-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: var(--z-nav);
	height: 86px;
	background-image: linear-gradient(180deg, rgba(7,40,48,.46), transparent);
	transition: height var(--d-3) var(--ez-std), background-color var(--d-3) var(--ez-std), box-shadow var(--d-3) var(--ez-std);
}
.lp-header__inner {
	height: 100%;
	max-width: calc(var(--cont-ancho) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
	display: flex;
	align-items: center;
	gap: var(--e-6);
}

.lp-header[data-stuck="true"] {
	height: 70px;
	background-image: none;
	background-color: var(--vidrio);
	border-bottom: 1px solid var(--arena-200);
	box-shadow: var(--sh-1);
	-webkit-backdrop-filter: blur(18px) saturate(1.6);
	backdrop-filter: blur(18px) saturate(1.6);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.lp-header[data-stuck="true"] { background-color: var(--arena-50); }
}

/* Marca — logo original del cliente, en sus dos versiones */
.lp-brand {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--e-4);
	margin-right: auto;
	min-width: 0;
}
/* Las dos versiones se superponen y hacen cross-fade según el estado. */
.lp-brand__logo {
	display: block;
	height: clamp(44px, 3.6vw, 62px);
	width: auto;
	transition: opacity var(--d-3) var(--ez-std), height var(--d-3) var(--ez-std);
}
.lp-brand__logo--claro { filter: drop-shadow(0 1px 4px rgba(7,40,48,.45)); }
.lp-brand__logo--oscuro {
	position: absolute;
	left: 0;
	top: 50%;
	translate: 0 -50%;
	opacity: 0;
}

.lp-header[data-stuck="true"] .lp-brand__logo { height: clamp(38px, 3vw, 50px); }
.lp-header[data-stuck="true"] .lp-brand__logo--claro { opacity: 0; }
.lp-header[data-stuck="true"] .lp-brand__logo--oscuro { opacity: 1; }
/* Con el menú abierto el fondo vuelve a ser oscuro: gana la versión blanca. */
.lp-header[data-menu-open="true"] .lp-brand__logo--claro { opacity: 1; }
.lp-header[data-menu-open="true"] .lp-brand__logo--oscuro { opacity: 0; }

/* Navegación */
.lp-nav__list { display: flex; align-items: center; gap: var(--e-1); }
.lp-nav__link {
	position: relative;
	display: block;
	padding: 10px 14px;
	font-size: .9375rem;
	font-weight: 500;
	letter-spacing: .01em;
	color: #fff;
	text-shadow: 0 1px 3px rgba(7,40,48,.45);
	transition: color var(--d-2) var(--ez-std), text-shadow var(--d-3) var(--ez-std);
}
.lp-nav__link::after {
	content: "";
	position: absolute;
	left: 14px; right: 14px; bottom: 4px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transform: scaleX(0);
	transition: transform var(--d-2) var(--ez-out);
}
.lp-nav__link:hover { color: var(--sol-300); }
.lp-nav__link:hover::after { transform: scaleX(1); }
.lp-header[data-stuck="true"] .lp-nav__link { color: var(--arena-800); text-shadow: none; }
.lp-header[data-stuck="true"] .lp-nav__link:hover { color: var(--mar-700); }
.lp-nav__link[aria-current="true"] { color: var(--sol-300); }
.lp-header[data-stuck="true"] .lp-nav__link[aria-current="true"] { color: var(--mar-700); }
.lp-nav__link[aria-current="true"]::after { transform: scaleX(1); background: var(--sol-500); }

/* Acciones del header */
.lp-header__actions { display: flex; align-items: center; gap: var(--e-3); }
.lp-header__phone {
	display: inline-flex;
	align-items: center;
	gap: var(--e-2);
	padding: 8px 12px;
	font-size: .9375rem;
	font-weight: 600;
	color: #fff;
	text-shadow: 0 1px 3px rgba(7,40,48,.45);
	white-space: nowrap;
	transition: color var(--d-2) var(--ez-std);
}
.lp-header__phone svg { width: 18px; height: 18px; flex: none; }
.lp-header__phone:hover { color: var(--sol-300); }
.lp-header[data-stuck="true"] .lp-header__phone { color: var(--mar-800); text-shadow: none; }
.lp-header[data-stuck="true"] .lp-header__phone:hover { color: var(--sol-800); }

/* Hamburguesa */
.lp-burger { display: none; width: 44px; height: 44px; place-items: center; }
.lp-burger__box { display: grid; gap: 5px; width: 22px; }
.lp-burger__box span {
	display: block;
	height: 2px;
	background: #fff;
	border-radius: 2px;
	transition: transform var(--d-3) var(--ez-out), opacity var(--d-2) var(--ez-std), background-color var(--d-3) var(--ez-std);
}
.lp-header[data-stuck="true"] .lp-burger__box span { background: var(--mar-900); }
.lp-burger[aria-expanded="true"] .lp-burger__box span { background: #fff; }

/* Con el menú abierto el header flota sobre el panel oscuro: vuelve al
   estilo transparente aunque la página esté scrolleada. */
.lp-header[data-menu-open="true"],
.lp-header[data-menu-open="true"][data-stuck="true"] {
	background-color: transparent;
	background-image: none;
	border-bottom-color: transparent;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
.lp-header[data-menu-open="true"] .lp-header__phone { color: #fff; }
.lp-header[data-menu-open="true"] .lp-nav__link { color: #fff; }
.lp-burger[aria-expanded="true"] .lp-burger__box span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.lp-burger[aria-expanded="true"] .lp-burger__box span:nth-child(2) { opacity: 0; }
.lp-burger[aria-expanded="true"] .lp-burger__box span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Drawer móvil ------------------------------------------------------ */
.lp-drawer {
	position: fixed;
	inset: 0;
	z-index: var(--z-drawer);
	background: var(--mar-950);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--e-10);
	padding: 96px var(--gutter) var(--e-10);
}
/* El estado base es visible a propósito: la animación es adorno, nunca
   requisito para poder ver el panel. */
.lp-drawer[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
	.lp-drawer[data-open="true"] { animation: lp-fade-in var(--d-3) var(--ez-std); }
}
@keyframes lp-fade-in { from { opacity: 0; } }
.lp-drawer__nav ul { display: grid; gap: var(--e-2); }
.lp-drawer__nav a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--e-3) 0;
	border-bottom: 1px solid rgba(255,255,255,.1);
	font-family: var(--f-display);
	font-size: var(--t-h3);
	font-weight: 600;
	color: #fff;
}
@media (prefers-reduced-motion: no-preference) {
	.lp-drawer[data-open="true"] .lp-drawer__nav a {
		animation: lp-drawer-in var(--d-4) var(--ez-out) backwards;
		animation-delay: calc(var(--i) * 45ms + 80ms);
	}
}
@keyframes lp-drawer-in { from { opacity: 0; transform: translateY(16px); } }
.lp-drawer__nav a svg { width: 22px; height: 22px; color: var(--sol-400); }
.lp-drawer__foot { display: grid; gap: var(--e-4); }
.lp-drawer__phone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--e-2);
	color: var(--mar-200);
	font-weight: 600;
}
.lp-drawer__phone svg { width: 18px; height: 18px; }

/* ---- WhatsApp flotante --------------------------------------------------
   Botón circular con anillo "latido" + globo de saludo que se abre solo, una
   vez, a los pocos segundos (ver initFab() en main.js). Inspirado en el
   widget de xulum.com. -------------------------------------------------- */
.lp-wa {
	position: fixed;
	right: clamp(16px, 3vw, 28px);
	bottom: clamp(16px, 3vw, 28px);
	z-index: var(--z-fab);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px) scale(.85);
	transition:
		opacity var(--d-4) var(--ez-spring),
		transform var(--d-4) var(--ez-spring),
		visibility var(--d-4);
}
.lp-wa[data-visible="true"] { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
/* El saludo automático se muestra igual aunque todavía no se haya scrolleado
   lo suficiente como para que el botón aparezca solo. */
.lp-wa[data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.lp-wa[data-raised="true"] { transform: translateY(-24px) scale(1); }
/* Al pie de todo se retira para no taparle los créditos al estudio. */
.lp-wa[data-tucked="true"] {
	opacity: 0;
	visibility: hidden;
	transform: translateY(16px) scale(.9);
	pointer-events: none;
}

.lp-wa__btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	margin-left: auto;
	border-radius: 50%;
	background: var(--wa);
	color: #fff;
	box-shadow: 0 6px 20px -4px rgba(15,123,63,.42), var(--sh-2);
	transition:
		transform var(--d-2) var(--ez-std),
		box-shadow var(--d-3) var(--ez-out),
		background-color var(--d-2) var(--ez-std);
}
.lp-wa__btn svg { width: 28px; height: 28px; flex: none; }
.lp-wa__btn:hover { background: var(--wa-hover); transform: scale(1.06); box-shadow: 0 8px 24px -4px rgba(15,123,63,.5); }
.lp-wa__btn:active { transform: scale(.94); transition-duration: var(--d-1); }
.lp-wa__btn:focus-visible { outline: 3px solid var(--wa-glow); outline-offset: 3px; }

/* Efecto latido: un segundo círculo detrás del botón que crece y se
   desvanece en loop. z-index negativo = sólo se ve por fuera del botón. */
.lp-wa__ring {
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: 50%;
	background: var(--wa);
	opacity: .55;
	pointer-events: none;
	animation: lp-wa-latido 2.4s var(--ez-out) infinite;
}
@keyframes lp-wa-latido {
	0%   { transform: scale(1);   opacity: .55; }
	70%  { transform: scale(1.7); opacity: 0; }
	100% { transform: scale(1.7); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.lp-wa__ring { animation: none; }
}

/* Globo de saludo */
.lp-wa__bubble {
	position: absolute;
	right: 0;
	bottom: 72px;
	width: 290px;
	max-width: calc(100vw - 40px);
	background: var(--arena-50);
	border-radius: var(--r-lg);
	padding: var(--e-4) var(--e-4) var(--e-3);
	box-shadow: var(--sh-4);
	opacity: 0;
	transform: translateY(12px) scale(.96);
	transform-origin: bottom right;
	pointer-events: none;
	transition: opacity var(--d-3) var(--ez-std), transform var(--d-3) var(--ez-std);
}
.lp-wa[data-open="true"] .lp-wa__bubble { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.lp-wa__bubble::after {
	content: "";
	position: absolute;
	right: 22px;
	bottom: -8px;
	width: 16px;
	height: 16px;
	background: var(--arena-50);
	transform: rotate(45deg);
	box-shadow: 3px 3px 6px rgba(23,20,15,.06);
}
.lp-wa__row { display: flex; gap: var(--e-3); align-items: flex-start; }
.lp-wa__avatar {
	flex: 0 0 42px;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--wa);
	display: flex;
	align-items: center;
	justify-content: center;
}
.lp-wa__avatar svg { width: 22px; height: 22px; color: #fff; }
.lp-wa__text { display: flex; flex-direction: column; gap: 3px; font-size: var(--t-sm); line-height: 1.4; color: var(--arena-700); }
.lp-wa__title { font-size: var(--t-body); color: var(--mar-950); }
.lp-wa__cta { margin-top: var(--e-1); font-size: var(--t-sm); font-weight: 600; color: var(--wa); }
.lp-wa__cta:hover { color: var(--wa-hover); text-decoration: underline; }
.lp-wa__close {
	position: absolute;
	top: 6px;
	right: 8px;
	border: none;
	background: none;
	font-size: 20px;
	line-height: 1;
	color: var(--arena-400);
	cursor: pointer;
	padding: 2px 6px;
	border-radius: var(--r-sm);
}
.lp-wa__close:hover { color: var(--arena-700); background: var(--arena-200); }

@media (max-width: 767px) {
	.lp-wa__bubble { right: -8px; }
}
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
@layer sections {

/* ---- Hero -------------------------------------------------------------- */
.lp-hero {
	position: relative;
	min-height: 620px;
	height: 100svh;
	max-height: 1000px;
	display: grid;
	align-items: end;
	overflow: hidden;
	isolation: isolate;
}
.lp-hero__media { position: absolute; inset: 0; z-index: -1; }
.lp-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 58%;
	filter: var(--foto-filtro);
}
.lp-hero__scrim {
	position: absolute;
	inset: 0;
	background-image: var(--scrim-hero), var(--vineta);
}

/* ---- Portada con fotos rotando o video --------------------------- */
/* Las diapositivas se apilan y se funden entre sí; la activa tapa. */
.lp-hero__slides, .lp-hero__slide { position: absolute; inset: 0; }
.lp-hero__slide { opacity: 0; transition: opacity 1.1s var(--ez-std); }
.lp-hero__slide.es-actual { opacity: 1; }
.lp-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* El iframe se escala para tapar toda la pantalla (no admite object-fit). */
.lp-hero__yt { position: absolute; inset: 0; overflow: hidden; }
.lp-hero__yt iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: max(100%, 177.78vh);
	height: max(100%, 56.25vw);
	transform: translate(-50%, -50%);
	border: 0;
	pointer-events: none;
}
/* Puntos de la rotación, a la derecha del enlace de scroll. */
.lp-hero__dots {
	position: absolute;
	right: var(--gutter);
	bottom: var(--e-6);
	z-index: 2;
	display: flex;
	gap: 8px;
}
.lp-hero__dot {
	width: 28px;
	height: 4px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, .4);
	cursor: pointer;
	transition: background var(--d-2) var(--ez-std), width var(--d-2) var(--ez-std);
}
.lp-hero__dot:hover { background: rgba(255, 255, 255, .7); }
.lp-hero__dot.es-actual { width: 44px; background: var(--sol-200); }
@media (prefers-reduced-motion: reduce) {
	.lp-hero__yt { display: none; }
	.lp-hero__slide { transition: none; }
}
.lp-hero__inner {
	position: relative;
	width: 100%;
	max-width: calc(var(--cont) + var(--gutter) * 2);
	margin-inline: auto;
	padding: 0 var(--gutter) clamp(6rem, 4rem + 8vw, 9rem);
}
.lp-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--e-2);
	font-size: var(--t-overline);
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--sol-300);
	text-shadow: 0 1px 8px rgba(7,40,48,.5);
	margin-bottom: var(--e-5);
}
.lp-hero__eyebrow svg {
	width: 16px;
	height: 16px;
	flex: none;
	color: var(--sol-400);
}
.lp-hero__title {
	font-size: var(--t-display);
	line-height: .96;
	letter-spacing: -.035em;
	font-variation-settings: "SOFT" 28, "WONK" 1;
	color: #fff;
	text-shadow: 0 2px 24px rgba(7,40,48,.4);
	margin-bottom: var(--e-6);
}
.lp-hero__line { display: block; }
.lp-hero__line:last-child { font-style: italic; color: var(--sol-200); }
.lp-hero__lead {
	font-size: var(--t-lg);
	line-height: 1.6;
	color: rgba(255,255,255,.92);
	text-shadow: 0 1px 12px rgba(7,40,48,.5);
	max-width: 54ch;
	margin-bottom: var(--e-8);
}
.lp-hero__actions { display: flex; flex-wrap: wrap; gap: var(--e-4); }

.lp-hero__scroll {
	position: absolute;
	left: 50%; bottom: var(--e-6);
	transform: translateX(-50%);
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: var(--e-2);
	font-size: var(--t-overline);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255,255,255,.75);
	transition: color var(--d-2) var(--ez-std);
}
.lp-hero__scroll svg { width: 20px; height: 20px; animation: lp-flotar 2.4s var(--ez-std) infinite; }
.lp-hero__scroll:hover { color: #fff; }
@keyframes lp-flotar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* Parallax del hero: corre en el compositor, sin JS. */
@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		.lp-hero__img {
			animation: lp-parallax linear both;
			animation-timeline: scroll();
			animation-range: 0 100svh;
		}
		.lp-hero__inner {
			animation: lp-hero-fade linear both;
			animation-timeline: scroll();
			animation-range: 0 80svh;
		}
	}
}
@keyframes lp-parallax { to { transform: translateY(11%) scale(1.09); } }
@keyframes lp-hero-fade { 60% { opacity: 1; } to { opacity: .15; } }

/* ---- Stats ------------------------------------------------------------- */
.lp-stats { background: var(--mar-950); color: #fff; padding-block: var(--e-10); }
.lp-stats__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--gap-y) var(--gap);
	margin: 0;
}
.lp-stat { text-align: center; position: relative; }
.lp-stat + .lp-stat::before {
	content: "";
	position: absolute;
	left: calc(var(--gap) / -2); top: 50%;
	transform: translateY(-50%);
	width: 1px; height: 48px;
	background: rgba(255,255,255,.14);
}
.lp-stat__value {
	font-family: var(--f-display);
	font-size: var(--t-h2);
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -.02em;
	color: var(--sol-300);
	font-variant-numeric: tabular-nums;
}
.lp-stat__label {
	margin: var(--e-2) 0 0;
	font-size: var(--t-sm);
	line-height: 1.4;
	color: var(--mar-200);
}

/* ---- About ------------------------------------------------------------- */
.lp-about__grid {
	display: grid;
	gap: clamp(2.5rem, 1rem + 5vw, 5rem);
	align-items: center;
	grid-template-columns: 1fr;
}
@media (min-width: 1000px) {
	/* La columna de texto necesita este ancho para que el título entre en los
	   dos renglones con que fue escrito. Si se cambia el texto por uno más
	   largo, simplemente pasará a tres: no se rompe nada. */
	.lp-about__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}
.lp-about__text p + p { margin-top: var(--e-5); }
.lp-about__text p { color: var(--arena-700); max-width: 62ch; }
.lp-about__text p:first-of-type {
	font-size: var(--t-lg);
	color: var(--arena-900);
}

.lp-about__features { display: grid; gap: var(--e-5); margin-top: var(--e-10); }
.lp-feature { display: flex; gap: var(--e-4); align-items: flex-start; }
.lp-feature__icon {
	flex: none;
	width: 44px; height: 44px;
	display: grid; place-items: center;
	border-radius: var(--r-md);
	background: var(--mar-50);
	color: var(--mar-700);
}
.lp-feature__icon svg { width: 22px; height: 22px; }
.lp-feature__title {
	display: block;
	font-size: var(--t-h4);
	font-weight: 600;
	line-height: 1.3;
	color: var(--mar-950);
	margin-bottom: 2px;
}
.lp-feature__text { display: block; font-size: var(--t-sm); color: var(--arena-600); line-height: 1.55; }

/* Collage de fotos */
.lp-about__media { position: relative; }
.lp-about__main {
	aspect-ratio: 4 / 3;
	border-radius: var(--r-xl);
	box-shadow: var(--sh-foto);
}
/* El collage superpuesto sólo funciona con las dos columnas: en una sola la
   foto principal ocupa todo el ancho y la chica se saldría de la sección. */
.lp-about__side { display: none; }

@media (min-width: 1000px) {
	.lp-about__side {
		display: block;
		position: absolute;
		right: -4%;
		/* Bien abajo: tapa apenas la esquina de la aérea y aprovecha el hueco
		   que deja la columna de texto. */
		bottom: -55%;
		width: 42%;
		aspect-ratio: 3 / 4;
		border-radius: var(--r-lg);
		border: 8px solid var(--arena-50);
		box-shadow: var(--sh-3);
	}
}
.lp-about__badge {
	position: absolute;
	left: -6%;
	top: 8%;
	display: grid;
	gap: 2px;
	padding: var(--e-4) var(--e-5);
	border-radius: var(--r-lg);
	background: var(--sol-700);
	color: #fff;
	box-shadow: var(--sh-3);
	text-align: center;
}
.lp-about__badge b {
	font-family: var(--f-display);
	font-size: 2.25rem;
	line-height: 1;
	font-weight: 600;
}
.lp-about__badge span {
	font-size: var(--t-overline);
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	opacity: .92;
}
@media (max-width: 640px) {
	.lp-about__badge { left: auto; right: var(--e-4); top: auto; bottom: -20px; }
}

/* ---- Servicios --------------------------------------------------------- */
.lp-servicios__grid {
	display: grid;
	gap: var(--gap-y) var(--gap);
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
/* Con 9 tarjetas, 3+3+3 queda equilibrado; auto-fit tendería a 4+3+2. */
@media (min-width: 980px) {
	.lp-servicios__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.lp-servicio {
	padding: var(--e-8);
	background: #fff;
	border: 1px solid var(--arena-200);
	border-radius: var(--r-md);
	box-shadow: var(--sh-1);
	transition: border-color var(--d-2) var(--ez-std), box-shadow var(--d-3) var(--ez-out), transform var(--d-3) var(--ez-out);
}
.lp-servicio:hover { border-color: var(--madera-300); box-shadow: var(--sh-2); transform: translateY(-3px); }
.lp-servicio__icon {
	width: 52px; height: 52px;
	display: grid; place-items: center;
	border-radius: var(--r-md);
	background: var(--mar-50);
	color: var(--mar-700);
	margin-bottom: var(--e-5);
	transition: background-color var(--d-2) var(--ez-std), color var(--d-2) var(--ez-std);
}
.lp-servicio__icon svg { width: 26px; height: 26px; }
.lp-servicio:hover .lp-servicio__icon { background: var(--sol-50); color: var(--sol-800); }
.lp-servicio__title { font-family: var(--f-texto); font-size: var(--t-h4); font-weight: 600; color: var(--arena-900); margin-bottom: var(--e-2); }
.lp-servicio__text { font-size: var(--t-sm); color: var(--arena-600); line-height: 1.55; }

/* ---- Cabañas ----------------------------------------------------------- */
.lp-cabanas__grid {
	display: grid;
	gap: var(--gap-y) var(--gap);
	grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
}
.lp-cabana {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--arena-200);
	border-radius: var(--r-lg);
	overflow: hidden;
	box-shadow: var(--sh-2);
	transition: box-shadow var(--d-3) var(--ez-out), transform var(--d-3) var(--ez-out);
}
.lp-cabana:hover, .lp-cabana:focus-within { box-shadow: var(--sh-3); transform: translateY(-4px); }
.lp-cabana__media { position: relative; aspect-ratio: 3 / 2; }
.lp-cabana__media > img { transition: transform var(--d-4) var(--ez-out); transform-origin: center 60%; }
.lp-cabana:hover .lp-cabana__media > img { transform: scale(1.045); }
.lp-cabana__body { display: flex; flex-direction: column; flex: 1; padding: var(--e-6); }
@media (max-width: 560px) { .lp-cabana__body { padding: var(--e-5); } }
/* Capacidad como dato de la ficha, arriba del nombre. Antes iba superpuesta
   sobre la foto, donde competía con la imagen y se leía peor. */
.lp-cabana__capacidad {
	display: inline-flex;
	/* El cuerpo de la card es flex en columna: sin esto el chip se estira. */
	align-self: flex-start;
	align-items: center;
	gap: var(--e-2);
	padding: 6px 14px 6px 10px;
	margin-bottom: var(--e-4);
	border-radius: var(--r-pill);
	background: var(--mar-50);
	color: var(--mar-700);
	font-size: var(--t-sm);
	font-weight: 600;
}
.lp-cabana__capacidad svg { width: 17px; height: 17px; flex: none; }

.lp-cabana__name { font-size: var(--t-h3); line-height: 1.15; margin-bottom: var(--e-3); }
.lp-cabana__body > .lp-cabana__name:first-child { margin-top: 0; }
.lp-cabana__text { font-size: var(--t-sm); color: var(--arena-600); line-height: 1.6; }
.lp-cabana__rule {
	width: 40px; height: 3px;
	background: var(--madera-300);
	border-radius: 3px;
	margin-block: var(--e-5);
	transition: width var(--d-3) var(--ez-out);
}
.lp-cabana:hover .lp-cabana__rule { width: 72px; }
.lp-cabana__list { display: grid; gap: var(--e-2); margin-bottom: var(--e-6); }
.lp-cabana__list li {
	display: flex;
	gap: var(--e-3);
	align-items: flex-start;
	font-size: var(--t-sm);
	color: var(--arena-700);
	line-height: 1.45;
}
.lp-cabana__list svg { width: 17px; height: 17px; flex: none; margin-top: 3px; color: var(--mar-500); }
.lp-cabana__cta { margin-top: auto; }

/* ---- Galería ----------------------------------------------------------- */
.lp-galeria__filtros {
	display: flex;
	gap: var(--e-2);
	/* "safe" evita que, al desbordar en pantallas chicas, el centrado deje el
	   primer filtro fuera del área alcanzable del scroll. */
	justify-content: center;
	justify-content: safe center;
	overflow-x: auto;
	scrollbar-width: none;
	padding-bottom: var(--e-2);
	margin-bottom: var(--e-8);
}
.lp-galeria__filtros::-webkit-scrollbar { display: none; }

.lp-galeria__grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	/* dense: sin esto los spans mixtos dejan huecos en la grilla. */
	grid-auto-flow: row dense;
	gap: var(--gap);
	grid-auto-rows: 8rem;
}
.lp-galeria__item {
	position: relative;
	grid-column: span 4;
	grid-row: span 2;
	border-radius: var(--r-lg);
	overflow: hidden;
	cursor: zoom-in;
	background: var(--arena-200);
	transition: transform var(--d-2) var(--ez-std);
}
.lp-galeria__item[data-size="wide"] { grid-column: span 8; grid-row: span 2; }
.lp-galeria__item[data-size="tall"] { grid-column: span 4; grid-row: span 3; }
/* Última foto del set visible: ocupa lo que falte para cerrar la fila
   (--fill lo calcula el script según el hueco y el breakpoint). */
.lp-galeria__item.is-fill { grid-column: span var( --fill, 8 ); }
.lp-galeria__item > img {
	width: 100%; height: 100%;
	object-fit: cover;
	filter: var(--foto-filtro);
	transition: transform var(--d-4) var(--ez-out);
}
.lp-galeria__item::after {
	content: "";
	position: absolute; inset: 0;
	background: var(--velo-hover);
	opacity: 0;
	transition: opacity var(--d-3) var(--ez-std);
	pointer-events: none;
}
.lp-galeria__item:hover > img,
.lp-galeria__item:focus-visible > img { transform: scale(1.06); }
.lp-galeria__item:hover::after,
.lp-galeria__item:focus-visible::after { opacity: 1; }
.lp-galeria__item:active { transform: scale(.99); }
.lp-galeria__zoom {
	position: absolute;
	top: var(--e-4); right: var(--e-4);
	width: 38px; height: 38px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--vidrio-oscuro);
	border: 1px solid var(--borde-vidrio);
	color: #fff;
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity var(--d-3) var(--ez-out), transform var(--d-3) var(--ez-out);
	pointer-events: none;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}
.lp-galeria__zoom svg { width: 18px; height: 18px; }
.lp-galeria__item:hover .lp-galeria__zoom,
.lp-galeria__item:focus-visible .lp-galeria__zoom { opacity: 1; transform: translateY(0); }
.lp-galeria__item[hidden] { display: none; }

@media (max-width: 900px) {
	.lp-galeria__grid { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 7rem; }
	.lp-galeria__item { grid-column: span 3; grid-row: span 2; }
	.lp-galeria__item[data-size="wide"] { grid-column: span 6; grid-row: span 2; }
	.lp-galeria__item[data-size="tall"] { grid-column: span 3; grid-row: span 3; }
	/* En 6 columnas el único hueco posible es de media fila. */
	.lp-galeria__item.is-fill { grid-column: span 6; }
}
@media (max-width: 560px) {
	.lp-galeria__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 6rem; }
	.lp-galeria__item { grid-column: span 1; grid-row: span 2; }
	.lp-galeria__item[data-size="wide"] { grid-column: span 2; grid-row: span 2; }
	.lp-galeria__item[data-size="tall"] { grid-column: span 1; grid-row: span 3; }
	/* Última foto de un total impar: ocupa las dos columnas y cierra la fila. */
	.lp-galeria__item.is-fill,
	.lp-galeria__item.is-fill[data-size="tall"] { grid-column: 1 / -1; grid-row: span 2; }
	.lp-galeria__zoom { opacity: 1; transform: none; width: 32px; height: 32px; }
}

/* Con un filtro activo quedan pocas fotos y la grilla de 12 columnas deja
   celdas sueltas en la última fila. En esa vista pasa a flexbox: las fotos de
   la fila final crecen hasta ocupar todo el ancho y no queda ningún hueco. */
.lp-galeria__grid[data-filtered="true"] {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gap);
}
.lp-galeria__grid[data-filtered="true"] .lp-galeria__item,
.lp-galeria__grid[data-filtered="true"] .lp-galeria__item[data-size="wide"],
.lp-galeria__grid[data-filtered="true"] .lp-galeria__item[data-size="tall"] {
	flex: 1 1 calc(33.333% - var(--gap));
	min-width: min(260px, 100%);
	aspect-ratio: 3 / 2;
}
@media (max-width: 900px) {
	.lp-galeria__grid[data-filtered="true"] .lp-galeria__item,
	.lp-galeria__grid[data-filtered="true"] .lp-galeria__item[data-size="wide"],
	.lp-galeria__grid[data-filtered="true"] .lp-galeria__item[data-size="tall"] {
		flex-basis: calc(50% - var(--gap));
	}
}
@media (max-width: 560px) {
	.lp-galeria__grid[data-filtered="true"] .lp-galeria__item,
	.lp-galeria__grid[data-filtered="true"] .lp-galeria__item[data-size="wide"],
	.lp-galeria__grid[data-filtered="true"] .lp-galeria__item[data-size="tall"] {
		flex-basis: 100%;
	}
}

/* Botón "ver más": la galería arranca recortada para no estirar la página. */
.lp-galeria__mas { display: flex; justify-content: center; margin-top: var(--e-10); }
.lp-galeria__mas [hidden] { display: none; }
/* La flecha del toggle gira en vez de desplazarse como en el resto de botones. */
.lp-galeria__mas .lp-btn:hover svg { transform: translateY(2px); }
.lp-galeria__mas .lp-btn.is-open svg { transform: rotate(180deg); }
.lp-galeria__mas .lp-btn.is-open:hover svg { transform: rotate(180deg) translateY(2px); }

/* ---- Ubicación --------------------------------------------------------- */
.lp-ubicacion__grid {
	display: grid;
	gap: clamp(2.5rem, 1rem + 5vw, 4.5rem);
	align-items: center;
	grid-template-columns: 1fr;
}
@media (min-width: 1000px) {
	.lp-ubicacion__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}
.lp-ubicacion__text p { color: var(--mar-200); max-width: 58ch; }
.lp-ubicacion__text p + p { margin-top: var(--e-4); }
.lp-ubicacion__list {
	display: grid;
	gap: var(--e-5);
	margin-top: var(--e-10);
	padding-top: var(--e-8);
	border-top: 1px solid rgba(255,255,255,.12);
}
.lp-ubicacion__list li { display: flex; gap: var(--e-4); align-items: flex-start; }
.lp-ubicacion__list svg { width: 22px; height: 22px; flex: none; color: var(--sol-400); margin-top: 2px; }
.lp-ubicacion__list b { display: block; color: #fff; font-family: var(--f-texto); font-size: var(--t-h4); font-weight: 600; }
.lp-ubicacion__list span { font-size: var(--t-sm); color: var(--mar-300); }
.lp-ubicacion__cta { margin-top: var(--e-10); display: flex; flex-wrap: wrap; gap: var(--e-4); }

.lp-ubicacion__media {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: var(--r-xl);
	box-shadow: var(--sh-foto);
}
/* Duotono mar → ámbar: única sección donde se usa. */
.lp-ubicacion__media::before {
	content: "";
	position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(140deg, rgba(11,58,68,.55) 0%, rgba(232,168,87,.28) 100%);
	mix-blend-mode: multiply;
	pointer-events: none;
}
.lp-ubicacion__pin {
	position: absolute;
	left: var(--e-6); bottom: var(--e-6);
	z-index: 3;
	display: flex;
	align-items: center;
	gap: var(--e-3);
	padding: var(--e-4) var(--e-5);
	border-radius: var(--r-lg);
	background: var(--vidrio-oscuro);
	border: 1px solid var(--borde-vidrio);
	color: #fff;
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.lp-ubicacion__pin { background: rgba(7,40,48,.82); }
}
.lp-ubicacion__pin svg { width: 22px; height: 22px; color: var(--sol-300); flex: none; }
.lp-ubicacion__pin b { display: block; font-size: var(--t-sm); font-weight: 600; }
.lp-ubicacion__pin span { font-size: var(--t-overline); letter-spacing: .1em; text-transform: uppercase; color: var(--mar-200); }

/* ---- Testimonios ------------------------------------------------------- */
/* Cuatro testimonios: 2x2 lee mejor que 3+1 huérfano. */
.lp-reviews__grid {
	display: grid;
	gap: var(--gap-y) var(--gap);
	grid-template-columns: 1fr;
}
@media (min-width: 760px) {
	.lp-reviews__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.lp-review {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--e-8);
	background: #fff;
	border: 1px solid var(--arena-200);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-1);
	transition: box-shadow var(--d-3) var(--ez-out), transform var(--d-3) var(--ez-out);
}
.lp-review:hover { box-shadow: var(--sh-2); transform: translateY(-2px); }
.lp-review__quote { width: 34px; height: 34px; color: var(--madera-300); opacity: .55; margin-bottom: var(--e-4); }
.lp-review__stars { display: flex; gap: 3px; margin-bottom: var(--e-4); }
.lp-review__stars svg { width: 16px; height: 16px; color: var(--sol-500); }
.lp-review__text {
	font-family: var(--f-display);
	font-style: italic;
	font-weight: 400;
	font-size: var(--t-lg);
	line-height: 1.5;
	color: var(--arena-800);
	margin-bottom: var(--e-6);
	flex: 1;
}
.lp-review__author { display: flex; align-items: center; gap: var(--e-3); }
.lp-review__avatar {
	width: 40px; height: 40px;
	flex: none;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--arena-200);
	color: var(--madera-700);
	font-weight: 600;
	font-size: .875rem;
}
.lp-review__name { font-size: var(--t-sm); font-weight: 600; color: var(--arena-900); }
.lp-review__from { font-size: var(--t-sm); color: var(--arena-600); }

/* ---- Reservas ---------------------------------------------------------- */
.lp-reservas__grid {
	display: grid;
	gap: var(--gap-y) var(--gap);
	grid-template-columns: 1fr;
	align-items: start;
}
@media (min-width: 1000px) {
	.lp-reservas__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}
.lp-form-panel {
	padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
	background: #fff;
	border: 1px solid var(--arena-200);
	border-radius: var(--r-xl);
	box-shadow: var(--sh-3);
}
.lp-form__grid { display: grid; gap: var(--e-5); grid-template-columns: 1fr; }
@media (min-width: 640px) { .lp-form__grid { grid-template-columns: 1fr 1fr; } }
.lp-field--full { grid-column: 1 / -1; }

.lp-label {
	display: block;
	font-size: var(--t-sm);
	font-weight: 600;
	color: var(--arena-800);
	margin-bottom: var(--e-2);
}
.lp-input, .lp-select, .lp-textarea {
	width: 100%;
	min-height: 48px;
	padding: 13px 16px;
	font-family: var(--f-texto);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--arena-900);
	background: #fff;
	border: 1.5px solid var(--arena-300);
	border-radius: var(--r-sm);
	transition: border-color var(--d-1) var(--ez-std), box-shadow var(--d-1) var(--ez-std), background-color var(--d-1) var(--ez-std);
}
.lp-input::placeholder, .lp-textarea::placeholder { color: var(--arena-400); }
.lp-input:hover, .lp-select:hover, .lp-textarea:hover { border-color: var(--arena-400); }
.lp-input:focus-visible, .lp-select:focus-visible, .lp-textarea:focus-visible {
	border-color: var(--mar-700);
	box-shadow: 0 0 0 3px rgba(19,90,102,.14);
}
.lp-textarea { min-height: 132px; resize: vertical; }
.lp-select {
	appearance: none;
	padding-right: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%237A6B55' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
}
.lp-help { display: block; margin-top: var(--e-2); font-size: var(--t-sm); color: var(--arena-600); }

.lp-field[data-error="true"] .lp-input,
.lp-field[data-error="true"] .lp-select,
.lp-field[data-error="true"] .lp-textarea {
	border-color: var(--error);
	background: var(--error-bg);
}
.lp-field__error {
	display: none;
	margin-top: var(--e-2);
	font-size: var(--t-sm);
	color: var(--error);
	font-weight: 500;
}
.lp-field[data-error="true"] .lp-field__error { display: block; }
.lp-field[data-error="true"] { animation: lp-shake 240ms var(--ez-std); }
@keyframes lp-shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-4px); }
	75% { transform: translateX(4px); }
}

.lp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.lp-form__foot { margin-top: var(--e-8); display: grid; gap: var(--e-4); }
.lp-form__privacy { font-size: var(--t-sm); color: var(--arena-600); line-height: 1.5; }

.lp-form__msg {
	display: none;
	gap: var(--e-3);
	align-items: flex-start;
	padding: var(--e-4) var(--e-5);
	border-radius: var(--r-md);
	font-size: var(--t-sm);
	line-height: 1.5;
	margin-top: var(--e-5);
}
.lp-form__msg[data-state="success"] { display: flex; background: var(--exito-bg); color: var(--exito); }
.lp-form__msg[data-state="error"] { display: flex; background: var(--error-bg); color: var(--error); }
.lp-form__msg svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }

/* Panel lateral de contacto directo */
.lp-aside {
	position: relative;
	overflow: hidden;
	border-radius: var(--r-xl);
	background: var(--mar-950);
	color: #fff;
	box-shadow: var(--sh-3);
}
.lp-aside__media { position: absolute; inset: 0; opacity: .34; }
.lp-aside__media img { width: 100%; height: 100%; object-fit: cover; }
/* Scrim: la foto sola deja el texto por debajo de AA. */
.lp-aside::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, rgba(7,40,48,.72) 0%, rgba(7,40,48,.90) 100%);
	pointer-events: none;
}
@media (min-width: 1000px) {
	.lp-aside { position: sticky; top: 96px; }
}
.lp-aside__body { position: relative; z-index: 1; padding: clamp(1.5rem, 1rem + 2.5vw, 2.5rem); }
.lp-aside__title { font-size: var(--t-h3); color: #fff; margin-bottom: var(--e-3); }
/* Gris claro cálido en vez del verde de marca: sobre el fondo verde oscuro el
   verde claro competía con el título en lugar de acompañarlo. */
.lp-aside__text { font-size: var(--t-sm); color: var(--arena-200); line-height: 1.6; margin-bottom: var(--e-6); }
.lp-aside__list { display: grid; gap: var(--e-4); margin-bottom: var(--e-8); }
.lp-aside__list li { display: flex; gap: var(--e-3); align-items: flex-start; }
.lp-aside__list svg { width: 20px; height: 20px; flex: none; color: var(--sol-300); margin-top: 2px; }
.lp-aside__list b { display: block; font-weight: 600; font-size: var(--t-body); }
.lp-aside__list span { font-size: var(--t-sm); color: var(--arena-300); }
.lp-aside__list a:hover { color: var(--sol-300); }

/* ---- Footer ------------------------------------------------------------ */
.lp-footer { background: var(--mar-950); color: var(--mar-200); padding-block: var(--e-12) var(--e-6); }
/* Columnas al ancho de su contenido y el sobrante repartido en partes iguales.
   Con columnas de ancho fijo el texto de cada una mide distinto y el aire que
   sobra a la derecha queda desparejo; con space-between el hueco entre bloques
   es siempre el mismo, que es lo que se lee como proporcionado. */
.lp-footer__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--gap-y) var(--e-8);
	padding-bottom: var(--e-10);
	border-bottom: 1px solid rgba(255,255,255,.1);
}
.lp-footer__grid > * { flex: 0 1 auto; min-width: 0; }
.lp-footer__brand { flex: 0 1 clamp(220px, 26%, 300px); }
/* La dirección necesita un tope o se estira en una sola línea larga. */
.lp-footer__contacto { flex: 0 1 clamp(200px, 24%, 270px); }

@media (max-width: 900px) {
	.lp-footer__grid { justify-content: flex-start; gap: var(--gap-y) var(--e-12); }
	.lp-footer__brand,
	.lp-footer__contacto { flex-basis: auto; }
}
.lp-footer__logo {
	height: 56px;
	width: auto;
	margin-bottom: var(--e-5);
}
.lp-footer__tagline { font-size: var(--t-sm); line-height: 1.6; margin-bottom: 0; }
.lp-footer__title {
	font-size: var(--t-overline);
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--sol-300);
	margin-bottom: var(--e-5);
}
.lp-footer__list { display: grid; gap: var(--e-2); font-size: var(--t-sm); }
.lp-footer__list li { display: flex; align-items: center; min-height: 24px; }
/* Área táctil de 24px de alto: WCAG 2.2 "target size (minimum)". */
.lp-footer__list a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	transition: color var(--d-2) var(--ez-std);
}
.lp-footer__list a:hover { color: #fff; }
.lp-footer__social {
	display: flex;
	gap: var(--e-3);
	margin-top: var(--e-6);
}
.lp-footer__social a {
	width: 42px; height: 42px;
	display: grid; place-items: center;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,.18);
	color: #fff;
	transition: background-color var(--d-2) var(--ez-std), border-color var(--d-2) var(--ez-std), transform var(--d-2) var(--ez-out);
}
.lp-footer__social a:hover { background: var(--sol-700); border-color: var(--sol-700); transform: translateY(-2px); }
.lp-footer__social svg { width: 20px; height: 20px; }
.lp-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: var(--e-3) var(--e-6);
	justify-content: space-between;
	align-items: center;
	padding-top: var(--e-6);
	font-size: var(--t-sm);
	color: var(--mar-300);
}
.lp-footer__bottom a { transition: color var(--d-2) var(--ez-std); }
.lp-footer__bottom a:hover { color: #fff; }
.lp-footer__top {
	margin-left: var(--e-4);
	padding-left: var(--e-4);
	border-left: 1px solid rgba(255,255,255,.16);
}
.lp-footer__credit a {
	color: var(--arena-200);
	text-decoration: underline;
	text-decoration-color: rgba(255,255,255,.28);
	text-underline-offset: 3px;
}
.lp-footer__credit a:hover { color: #fff; text-decoration-color: currentColor; }

/* ---- Lightbox ---------------------------------------------------------- */
.lp-lightbox {
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: hidden;
}
.lp-lightbox::backdrop {
	background: var(--velo);
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
}
.lp-lightbox__inner {
	position: relative;
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
	padding: clamp(1rem, 4vw, 3rem);
}
.lp-lightbox__fig { margin: 0; display: grid; gap: var(--e-4); justify-items: center; }
.lp-lightbox__img {
	max-width: min(1200px, 92vw);
	max-height: 78svh;
	width: auto;
	border-radius: var(--r-lg);
	box-shadow: var(--sh-4);
	object-fit: contain;
}
.lp-lightbox__cap {
	font-size: var(--t-sm);
	color: rgba(255,255,255,.86);
	text-align: center;
	max-width: 60ch;
}
.lp-lightbox__count {
	font-size: var(--t-overline);
	letter-spacing: .14em;
	color: var(--arena-300);
	font-variant-numeric: tabular-nums;
}
.lp-lightbox__btn {
	position: absolute;
	width: 48px; height: 48px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: rgba(251,248,243,.14);
	border: 1px solid rgba(255,255,255,.32);
	color: #fff;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	transition: background-color var(--d-2) var(--ez-std), color var(--d-2) var(--ez-std), transform var(--d-2) var(--ez-out);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.lp-lightbox__btn { background: rgba(7,40,48,.7); }
}
.lp-lightbox__btn:hover { background: #fff; color: var(--mar-950); }
.lp-lightbox__btn:active { transform: scale(.94); }
.lp-lightbox__btn svg { width: 22px; height: 22px; }
/* El glifo chevron apunta a la derecha: se rota solo el de "anterior". */
.lp-lightbox__btn--prev { left: clamp(.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }
.lp-lightbox__btn--prev svg { transform: rotate(180deg); }
.lp-lightbox__btn--prev:active { transform: translateY(-50%) scale(.94); }
.lp-lightbox__btn--next { right: clamp(.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }
.lp-lightbox__btn--next:active { transform: translateY(-50%) scale(.94); }
.lp-lightbox__btn--close { top: clamp(.5rem, 2vw, 1.5rem); right: clamp(.5rem, 2vw, 2rem); }
}

/* ==========================================================================
   SECTIONS — bloques agregados en la segunda ronda de ajustes
   ========================================================================== */
@layer sections {

/* ---- Cabañas: tira que deja claro que son 4 ---------------------------- */
.lp-cabanas__resumen {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--e-3);
	margin-bottom: var(--gap-y);
}
.lp-cabanas__resumen li {
	display: flex;
	align-items: baseline;
	gap: var(--e-2);
	padding: var(--e-3) var(--e-5);
	border: 1px solid var(--arena-200);
	border-radius: var(--r-pill);
	background: #fff;
	box-shadow: var(--sh-1);
}
.lp-cabanas__resumen b {
	font-family: var(--f-display);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1;
	color: var(--sol-700);
	font-variant-numeric: tabular-nums;
}
.lp-cabanas__resumen span { font-size: var(--t-sm); color: var(--arena-700); }

/* ---- Reseñas: puntaje y CTA -------------------------------------------- */
.lp-reviews__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--e-6);
	margin-bottom: clamp(1.75rem, 1rem + 2vw, 2.75rem);
}
.lp-score {
	display: inline-flex;
	align-items: center;
	gap: var(--e-4);
	padding: var(--e-3) var(--e-6) var(--e-3) var(--e-4);
	border: 1px solid var(--arena-200);
	border-radius: var(--r-pill);
	background: #fff;
	box-shadow: var(--sh-1);
}
.lp-score__value {
	font-family: var(--f-display);
	font-size: 2rem;
	font-weight: 600;
	line-height: 1;
	color: var(--mar-900);
	font-variant-numeric: tabular-nums;
}
.lp-score__body { display: grid; gap: 2px; }
.lp-score__stars { display: flex; gap: 2px; }
.lp-score__stars svg { width: 15px; height: 15px; color: var(--sol-500); }
.lp-score__label { font-size: var(--t-sm); color: var(--arena-600); line-height: 1.35; }

.lp-reviews__cta { display: flex; justify-content: center; margin-top: var(--gap-y); }

/* ---- 404 ---------------------------------------------------------------- */
.lp-404 {
	position: relative;
	display: grid;
	align-items: center;
	min-height: 100svh;
	padding-block: clamp(7rem, 5rem + 8vw, 10rem) var(--section-y);
	overflow: hidden;
	isolation: isolate;
}
.lp-404__media { position: absolute; inset: 0; z-index: -1; }
.lp-404__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 55%;
	filter: var(--foto-filtro);
}
.lp-404__scrim {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(115deg, rgba(7,40,48,.94) 0%, rgba(7,40,48,.80) 46%, rgba(7,40,48,.55) 100%),
		var(--vineta);
}
.lp-404__inner { position: relative; max-width: calc(var(--cont) + var(--gutter) * 2); }

.lp-404__code {
	font-family: var(--f-display);
	font-size: clamp(5rem, 3rem + 12vw, 11rem);
	font-weight: 600;
	line-height: .85;
	letter-spacing: -.04em;
	color: rgba(255,255,255,.10);
	margin-bottom: calc(clamp(5rem, 3rem + 12vw, 11rem) * -.42);
	pointer-events: none;
}
.lp-404__kicker {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--e-3);
	font-size: var(--t-overline);
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--sol-300);
	margin-bottom: var(--e-4);
}
.lp-404__kicker::before {
	content: "";
	width: 28px;
	height: 2px;
	background: var(--sol-400);
	border-radius: 2px;
}
.lp-404__title {
	font-size: var(--t-h1);
	line-height: 1.02;
	letter-spacing: -.028em;
	font-variation-settings: "SOFT" 28, "WONK" 1;
	color: #fff;
	margin-bottom: var(--e-5);
	max-width: 18ch;
}
.lp-404__text {
	font-size: var(--t-lg);
	line-height: 1.6;
	color: var(--arena-200);
	max-width: 54ch;
	margin-bottom: var(--e-8);
}
.lp-404__actions { display: flex; flex-wrap: wrap; gap: var(--e-4); margin-bottom: var(--e-10); }

.lp-404__links {
	padding-top: var(--e-8);
	border-top: 1px solid rgba(255,255,255,.14);
}
.lp-404__links-title {
	font-size: var(--t-sm);
	color: var(--arena-300);
	margin-bottom: var(--e-4);
}
.lp-404__links ul { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-3); }
.lp-404__links a {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	padding: 8px 16px;
	border-radius: var(--r-pill);
	border: 1px solid rgba(255,255,255,.22);
	font-size: var(--t-sm);
	font-weight: 600;
	color: #fff;
	transition: background-color var(--d-2) var(--ez-std), border-color var(--d-2) var(--ez-std), color var(--d-2) var(--ez-std), transform var(--d-2) var(--ez-out);
}
.lp-404__links a:hover {
	background: #fff;
	border-color: #fff;
	color: var(--mar-950);
	transform: translateY(-2px);
}

/* La 404 es una sección oscura: el foco necesita el anillo claro. */
.lp-body--404 .lp-404 { --foco: #F5B851; --foco-bg: var(--mar-950); }

@media (max-width: 600px) {
	.lp-404 { min-height: 0; padding-block: 7rem var(--section-y); }
	.lp-404__actions .lp-btn { width: 100%; }
}

/* ---- Preguntas frecuentes ---------------------------------------------- */
.lp-faq { display: grid; gap: var(--e-3); }
.lp-faq__item {
	background: #fff;
	border: 1px solid var(--arena-200);
	border-radius: var(--r-md);
	box-shadow: var(--sh-1);
	overflow: hidden;
	transition: border-color var(--d-2) var(--ez-std), box-shadow var(--d-3) var(--ez-out);
}
.lp-faq__item[open] { border-color: var(--madera-300); box-shadow: var(--sh-2); }

.lp-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e-4);
	padding: var(--e-5) var(--e-6);
	cursor: pointer;
	list-style: none;
	transition: background-color var(--d-2) var(--ez-std);
}
.lp-faq__q::-webkit-details-marker { display: none; }
.lp-faq__q:hover { background: var(--arena-50); }
.lp-faq__q h3 {
	font-family: var(--f-texto);
	font-size: var(--t-h4);
	font-weight: 600;
	line-height: 1.35;
	color: var(--mar-950);
	margin: 0;
}
.lp-faq__q:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--foco-bg) inset, 0 0 0 5px var(--foco) inset; }

/* Signo + que gira a − al abrir */
.lp-faq__icon {
	position: relative;
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--mar-50);
	transition: background-color var(--d-2) var(--ez-std);
}
.lp-faq__icon::before,
.lp-faq__icon::after {
	content: "";
	position: absolute;
	inset: 50% 7px auto 7px;
	height: 2px;
	background: var(--mar-700);
	border-radius: 2px;
	translate: 0 -50%;
	transition: rotate var(--d-3) var(--ez-out), background-color var(--d-2) var(--ez-std);
}
/* Cerrado dibuja un "+"; al abrir la barra vertical gira y queda un "−". */
.lp-faq__icon::after { rotate: 90deg; }
.lp-faq__item[open] .lp-faq__icon { background: var(--sol-50); }
.lp-faq__item[open] .lp-faq__icon::before,
.lp-faq__item[open] .lp-faq__icon::after { background: var(--sol-800); }
.lp-faq__item[open] .lp-faq__icon::after { rotate: 0deg; }

.lp-faq__a { padding: 0 var(--e-6) var(--e-5); }
.lp-faq__a p {
	margin: 0;
	font-size: var(--t-body);
	line-height: 1.65;
	color: var(--arena-700);
	max-width: 62ch;
}

@media (max-width: 560px) {
	.lp-faq__q { padding: var(--e-4) var(--e-5); }
	.lp-faq__a { padding: 0 var(--e-5) var(--e-4); }
}

/* ---- Galería: aviso cuando un filtro no tiene fotos -------------------- */
.lp-galeria__vacia {
	margin: 0 0 var(--e-6);
	padding: var(--e-5) var(--e-6);
	border: 1px dashed var(--arena-300);
	border-radius: var(--r-md);
	background: var(--arena-100);
	color: var(--arena-700);
	font-size: var(--t-sm);
	text-align: center;
}
.lp-galeria__vacia[hidden] { display: none; }

}

/* ==========================================================================
   REVEALS — scroll-driven, sin JavaScript donde el navegador lo soporte
   ========================================================================== */
@layer utilities {
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		[data-reveal] {
			animation: lp-reveal var(--d-5) var(--ez-out) both;
			animation-timeline: view();
			animation-range: entry 5% cover 30%;
			animation-delay: calc(var(--i, 0) * 60ms);
		}
	}
}
@keyframes lp-reveal {
	from { opacity: 0; transform: translateY(24px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Fallback por JS para navegadores sin animation-timeline. */
.lp-js-reveal[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity var(--d-5) var(--ez-out), transform var(--d-5) var(--ez-out); transition-delay: calc(var(--i, 0) * 60ms); }
.lp-js-reveal[data-reveal][data-shown="true"] { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@layer utilities {
@media (max-width: 1080px) {
	.lp-nav { display: none; }
	.lp-burger { display: grid; }
}
@media (max-width: 720px) {
	.lp-header__phone span { display: none; }
	.lp-header__phone { padding: 10px; }
	.lp-header__actions .lp-btn { display: none; }
}
@media (max-width: 600px) {
	/* El hero tiene que entrar en una pantalla de 812px sin desbordar. */
	.lp-hero { min-height: 560px; }
	.lp-hero__inner { padding-bottom: clamp(3rem, 1rem + 10vw, 5rem); }
	.lp-hero__eyebrow { margin-bottom: var(--e-3); }
	.lp-hero__title { margin-bottom: var(--e-4); }
	.lp-hero__lead { margin-bottom: var(--e-6); font-size: 1rem; }
	.lp-hero__actions { gap: var(--e-3); }
	.lp-hero__actions .lp-btn { width: 100%; }
	.lp-hero__actions .lp-btn--lg { min-height: 50px; padding: 14px 24px; font-size: 1rem; }

	.lp-hero__scroll { display: none; }
}
@media (max-width: 560px) {
	.lp-header { height: 76px; }
	.lp-header[data-stuck="true"] { height: 64px; }
}
}

/* ==========================================================================
   PREFERS-REDUCED-MOTION
   Se reduce el movimiento, no el feedback.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}

	/* Se recupera el feedback esencial, solo en color. */
	.lp-btn, .lp-filtro, .lp-input, .lp-select, .lp-textarea, .lp-nav__link, .lp-footer__list a {
		transition: background-color 120ms linear, border-color 120ms linear, color 120ms linear !important;
	}

	[data-reveal], .lp-js-reveal[data-reveal] { opacity: 1 !important; transform: none !important; }
	.lp-hero__img, .lp-hero__inner { animation: none !important; transform: none !important; opacity: 1 !important; }
	.lp-galeria__item > img, .lp-cabana__media > img { transform: none !important; }
	.lp-wa { opacity: 1; visibility: visible; transform: none !important; }
	.lp-hero__scroll svg { animation: none !important; }

	::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
		animation-duration: 1ms !important;
	}
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
	.lp-header, .lp-drawer, .lp-wa, .lp-hero__scroll, .lp-lightbox { display: none !important; }
	.lp-body { background: #fff; color: #000; }
	.lp-hero { height: auto; min-height: 0; }
}