/* Home — experiencia premium (D-10). Solo se carga en la portada (functions.php). Móvil primero.
   P1: portada «Cine» (.cine), barra de reserva al motor de BookiPro (.motor), logros (.logros) e isla viva (.isla-viva).
   Las animaciones van solo bajo html.animar (header.php: sin «reducir movimiento», o ?animar=1).
   Sin JS (html sin .js) todo se ve y el formulario del motor va dentro de la portada.
   Ojo: ni .cine ni .motor pueden llevar transform, filter, z-index o una opacidad fija: el botón y la hoja
   del motor son fijos y dejarían de colocarse respecto a la pantalla o quedarían debajo de otras capas. */

/* ── Portada «Cine» ─────────────────────────────────────────────────────────── */
.cine {
	position: relative; overflow: hidden;
	display: grid; grid-template-rows: 1fr auto;
	min-height: 100svh; background: #050d10; color: #fff;
}
.js .cine { height: 100svh; min-height: 540px; }
.cine__planos { position: absolute; inset: 0; z-index: 0; }
.cine__plano {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; object-position: 50% 62%; opacity: 0;
}
/* La activa entra con un fundido sobre la anterior, que sigue debajo hasta el siguiente cambio: nunca queda negro */
.cine__plano.is-activo { opacity: 1; z-index: 2; transition: opacity 1.6s ease; }
.cine__plano.is-previo { opacity: 1; z-index: 1; }
.cine__plano:nth-child(2n) { transform-origin: 30% 40%; }
.cine__plano:nth-child(3n) { transform-origin: 70% 65%; }
.cine::before {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background:
		linear-gradient(180deg, rgb(0 0 0 / 0.5) 0%, rgb(0 0 0 / 0) 24%, rgb(0 0 0 / 0) 46%, rgb(0 0 0 / 0.72) 100%),
		radial-gradient(ellipse at 50% 46%, rgb(0 0 0 / 0.28) 0%, rgb(0 0 0 / 0.1) 60%, rgb(0 0 0 / 0.3) 100%);
}
.cine__banda { display: none; }
.cine__banda--arriba { top: 0; transform-origin: top; }
.cine__banda--abajo { bottom: 0; transform-origin: bottom; }

.cine__guion {
	position: relative; z-index: 2; align-self: center;
	padding-top: calc(var(--cabecera) + 16px); padding-bottom: 120px; text-align: center;
}
html:not(.js) .cine__guion { padding-bottom: 32px; }
.cine__ante { margin-bottom: 18px; text-shadow: 0 1px 12px rgb(0 0 0 / 0.4); }
.cine__titulo {
	font-weight: 200; font-size: clamp(3rem, 1.4rem + 7.4vw, 7.4rem); line-height: 1; letter-spacing: -0.025em;
	text-shadow: 0 2px 40px rgb(0 0 0 / 0.35);
}
.cine__linea { display: block; overflow: hidden; padding: 0 0.06em 0.12em; margin-bottom: -0.12em; }
.cine__linea > span { display: inline-block; }
.cine__titulo em { font-style: italic; }
.cine__texto {
	max-width: 24em; margin: 22px auto 0; font-size: clamp(1.1875rem, 1rem + 0.5vw, 1.5rem); line-height: 1.35;
	color: rgb(255 255 255 / 0.92); text-shadow: 0 1px 14px rgb(0 0 0 / 0.45);
}
.cine__islas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
.cine__descubre {
	position: absolute; z-index: 2; left: 50%; bottom: 92px; transform: translateX(-50%);
	display: grid; justify-items: center; gap: 2px; color: #fff; opacity: 0.85;
	font-size: var(--t-xs); letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none;
}
.cine__descubre svg { width: 22px; height: 22px; }
html:not(.js) .cine__descubre { display: none; }

/* Animación de entrada (≈2 s) y fotos en movimiento */
.animar .cine__plano.is-activo, .animar .cine__plano.is-previo { animation: cine-acercar 7.6s cubic-bezier(0.25, 0.6, 0.3, 1) both; }
.animar .cine__banda {
	display: block; position: absolute; left: 0; right: 0; z-index: 3; height: 14svh; background: #000;
	animation: cine-banda 1.15s cubic-bezier(0.7, 0, 0.2, 1) 0.3s forwards;
}
.animar .cine__linea > span { transform: translateY(110%); animation: cine-subir 1.1s cubic-bezier(0.2, 0.75, 0.2, 1) forwards; }
.animar .cine__linea:nth-child(1) > span { animation-delay: 0.45s; }
.animar .cine__linea:nth-child(2) > span { animation-delay: 0.7s; }
.animar .cine__linea:nth-child(3) > span { animation-delay: 0.95s; }
.animar .cine__ante, .animar .cine__texto, .animar .cine__islas { animation: cine-aparecer 1s ease 1.3s backwards; }
.animar .cine__descubre { animation: cine-aparecer 1s ease 2s backwards; }
.animar .cine__descubre svg { animation: cine-rebote 1.8s ease-in-out 3s 3; } /* tres botes, no sin parar */
.animar .cabecera--sobre-foto { animation: cine-aparecer 0.9s ease 1.2s backwards; }
.animar .motor { animation: cine-aparecer 0.9s ease 1.5s backwards; }
.animar .motor__abrir { animation: cine-sube 0.9s cubic-bezier(0.2, 0.75, 0.2, 1) 1.5s backwards; }
@keyframes cine-acercar { from { transform: scale(1.14); } to { transform: scale(1.02); } }
@keyframes cine-banda { to { transform: scaleY(0); } }
@keyframes cine-subir { to { transform: none; } }
@keyframes cine-aparecer { from { opacity: 0; } }
@keyframes cine-sube { from { opacity: 0; transform: translateY(24px); } }
@keyframes cine-rebote { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ── Barra de reserva al motor de BookiPro ─────────────────────────────────── */
/* Vidrio oscuro sobre la foto. Colores que usan la hoja del móvil, los paneles y el calendario: */
.motor {
	--m-fondo: #0c1d22; --m-texto: #fff; --m-suave: rgb(255 255 255 / 0.66); --m-linea: rgb(255 255 255 / 0.16);
	--m-sel: #fff; --m-sel-texto: #0c1d22; --m-rango: rgb(255 255 255 / 0.12);
}
.motor__abrir, .motor__cabeza, .motor__celdas, .motor__paneles { display: none; }
.motor__form { display: grid; gap: 16px; color: var(--m-texto); }
.motor__etiqueta { display: block; font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--m-suave); }

/* Sin JS: campos nativos sobre una tarjeta blanca */
html:not(.js) .motor { --m-texto: var(--tinta); --m-suave: var(--tinta-suave); --m-linea: var(--linea); }
html:not(.js) .motor__form { position: relative; z-index: 4; margin: 0 var(--hueco) 32px; padding: 20px; border-radius: var(--radio-g); background: #fff; }
.motor__nativo { display: grid; gap: 12px; }
.js .motor__nativo { display: none; }
.motor__campo { display: grid; gap: 6px; }
.motor__campo select, .motor__campo input {
	min-height: 50px; padding: 10px 12px; border: 1.5px solid var(--linea); border-radius: 12px;
	background: #fff; color: var(--tinta); font: inherit; font-size: var(--t-m);
}

/* Con JS: celdas que abren paneles */
.js .motor__celdas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; }
.js .motor__paneles { display: block; }
.motor__celda {
	position: relative; display: grid; gap: 2px; min-width: 0; padding: 12px 2px;
	border: 0; border-bottom: 1px solid var(--m-linea); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.motor__celda[data-dato="isla"], .motor__celda[data-dato="personas"] { grid-column: 1 / -1; }
.motor__valor { overflow: hidden; font-family: var(--f-titulo); font-size: 1.4rem; font-weight: 300; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; }
.motor__valor.is-vacio { color: var(--m-suave); }
/* Alemán y neerlandés: «Datum hinzufügen» y «Datum toevoegen» no cabían en la celda del móvil y salían con «…» (28-oct) */
@media (max-width: 1199.98px) { .motor__valor:is(:lang(de), :lang(nl)) { font-size: min(1.4rem, 5vw); } }
.motor__celda.is-activa .motor__valor { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }

.motor__panel { padding: 16px 0 4px; color: var(--m-texto); }
.motor__panel-titulo { margin-bottom: 12px; font-family: var(--f-titulo); font-size: 1.5rem; font-weight: 300; line-height: 1.1; }
.motor__opciones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.motor__opcion {
	display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 64px; padding: 10px 6px;
	border: 1px solid var(--m-linea); border-radius: 14px; background: none; color: inherit; font: inherit; cursor: pointer;
	transition: background-color var(--suave), border-color var(--suave), color var(--suave);
}
.motor__opcion:hover { border-color: var(--m-suave); }
.motor__opcion[aria-pressed="true"] { border-color: var(--m-sel); background: var(--m-sel); color: var(--m-sel-texto); }
.motor__opcion-nombre { font-family: var(--f-titulo); font-size: 1.15rem; line-height: 1.1; text-align: center; }
.motor__opcion-n { font-size: var(--t-xs); opacity: 0.75; }
.motor__panel-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.motor__noches { font-size: var(--t-s); color: var(--m-suave); }
.motor__borrar { padding: 6px 2px; border: 0; background: none; color: inherit; font: inherit; font-size: var(--t-s); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.motor__contador { display: flex; align-items: center; justify-content: center; gap: 28px; }
.motor__mas-menos { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--m-linea); border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.motor__mas-menos:hover:not(:disabled) { border-color: var(--m-texto); }
.motor__mas-menos:disabled { opacity: 0.3; cursor: not-allowed; }
.motor__mas-menos .icono { width: 22px; height: 22px; }
.motor__cuantos { min-width: 2ch; font-family: var(--f-titulo); font-size: 2.6rem; font-weight: 300; line-height: 1; text-align: center; }
.motor__panel-nota { margin-top: 10px; font-size: var(--t-xs); color: var(--m-suave); text-align: center; }
.motor__aviso { margin-bottom: 12px; padding: 10px 14px; border-radius: 12px; background: #fdf3d8; color: #6b4a00; font-size: var(--t-s); }
.motor__enviar {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; padding: 0 28px;
	border: 0; border-radius: 999px; background: #fff; color: #0c1d22; font: inherit; font-size: var(--t-l);
	white-space: nowrap; cursor: pointer; transition: transform var(--suave), background-color var(--suave);
}
.motor__enviar:hover { transform: translateY(-1px); background: var(--verde-claro); }
.motor__enviar .icono { width: 20px; height: 20px; }
html:not(.js) .motor__enviar { background: var(--verde-oscuro); color: #fff; }
.motor__nota { font-size: var(--t-xs); color: var(--m-suave); text-align: center; }
body.motor-abierto { overflow: hidden; }
/* El aviso de la demo, arriba (bajo la cabecera), lejos del botón y de la barra de reserva */
.js .aviso-demo { top: calc(var(--cabecera) + 8px); bottom: auto; }

/* Calendario propio: llegada y salida en un rango */
.calendario { position: relative; }
.calendario__nav { position: absolute; z-index: 1; inset: 0 0 auto; display: flex; justify-content: space-between; pointer-events: none; }
.calendario__nav button {
	display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--m-linea); border-radius: 50%;
	background: none; color: inherit; font: inherit; font-size: 1.1rem; line-height: 1; pointer-events: auto; cursor: pointer;
}
.calendario__nav button:disabled { opacity: 0.25; cursor: default; }
.calendario__meses { display: grid; grid-template-columns: repeat(var(--meses, 1), minmax(0, 1fr)); gap: 32px; }
.calendario__titulo { margin-bottom: 8px; font-family: var(--f-titulo); font-size: 1.2rem; line-height: 34px; text-align: center; }
.calendario__titulo::first-letter { text-transform: uppercase; }
.calendario__rejilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 2px; }
.calendario__semana { padding: 4px 0; font-size: var(--t-xs); color: var(--m-suave); text-align: center; text-transform: uppercase; }
.calendario__dia {
	height: 42px; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit;
	font: inherit; font-size: var(--t-s); font-variant-numeric: tabular-nums; cursor: pointer;
}
.calendario__dia:not(:disabled):hover { box-shadow: inset 0 0 0 1px var(--m-texto); }
.calendario__dia:disabled { opacity: 0.28; cursor: default; }
.calendario__dia.is-hoy { text-decoration: underline; text-underline-offset: 4px; }
.calendario__dia.is-rango, .calendario__dia.is-previa { border-radius: 0; background: var(--m-rango); }
.calendario__dia.is-inicio, .calendario__dia.is-fin { background: var(--m-sel); color: var(--m-sel-texto); }

/* Móvil y tableta: botón de vidrio fijo abajo (a la izquierda del de WhatsApp) que abre una hoja */
@media (max-width: 1199.98px) {
	.js .motor__abrir {
		position: fixed; z-index: 45; left: 16px; right: 88px; bottom: 16px;
		display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 6px 6px 6px 18px;
		border: 1px solid rgb(255 255 255 / 0.24); border-radius: 999px; background: rgb(10 26 31 / 0.8); color: #fff;
		-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
		font: inherit; text-align: left; box-shadow: 0 12px 34px rgb(0 0 0 / 0.3); cursor: pointer; transition: opacity var(--suave);
	}
	.js .motor__fondo:not([hidden]) { position: fixed; inset: 0; z-index: 55; display: block; background: rgb(4 18 22 / 0.55); animation: cine-aparecer 0.3s ease; }
	.js .motor__form {
		position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; max-width: 640px; max-height: 92svh; margin-inline: auto;
		overflow-y: auto; overscroll-behavior: contain;
		padding: 20px 20px 24px; border-radius: 26px 26px 0 0; background: var(--m-fondo); box-shadow: 0 -20px 50px rgb(0 0 0 / 0.3);
		transform: translateY(105%); visibility: hidden;
		transition: transform 0.5s cubic-bezier(0.2, 0.75, 0.2, 1), visibility 0s linear 0.5s;
	}
	.js .motor.is-abierto .motor__form { transform: none; visibility: visible; transition-delay: 0s; }
	.js .motor__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
}
@media (min-width: 600px) and (max-width: 1199.98px) {
	.js .motor__abrir { left: 50%; right: auto; width: 460px; translate: -50% 0; }
}
.motor__abrir > .icono { width: 22px; height: 22px; color: #cfe8a6; }
.motor__abrir-texto { display: grid; flex: 1; min-width: 0; line-height: 1.15; }
.motor__abrir-texto strong { font-family: var(--f-titulo); font-size: 1.25rem; font-weight: 400; }
.motor__abrir-texto small { overflow: hidden; font-size: var(--t-s); color: rgb(255 255 255 / 0.72); white-space: nowrap; text-overflow: ellipsis; }
.motor__abrir-lupa { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: #0c1d22; }
.motor__abrir-lupa .icono { width: 22px; height: 22px; }
.motor.is-abierto .motor__abrir { opacity: 0; pointer-events: none; }
.motor__titulo { font-family: var(--f-titulo); font-size: 2rem; font-weight: 300; line-height: 1; }
.motor__cerrar { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--m-rango); color: inherit; cursor: pointer; }
.motor__cerrar .icono { width: 22px; height: 22px; }

/* Escritorio: barra de vidrio en la portada; los paneles se abren encima; al bajar, fija abajo */
@media (min-width: 1200px) {
	.cine__guion { padding-bottom: 32px; }
	.cine__descubre { display: none; }
	.motor { padding: 0 var(--hueco) clamp(32px, 6vh, 60px); }
	.motor__nota { display: none; }
	.motor__form {
		position: relative; z-index: 4; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px;
		max-width: 1080px; margin: 0 auto; padding: 8px; border: 1px solid rgb(255 255 255 / 0.24); border-radius: 22px;
		background: rgb(8 22 27 / 0.42); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
		box-shadow: 0 24px 60px rgb(0 0 0 / 0.25);
	}
	.js .motor__celdas { grid-template-columns: 1.15fr 1fr 1fr 1fr; column-gap: 0; }
	.motor__celda { grid-column: auto; padding: 10px 22px; border: 0; border-radius: 14px; transition: background-color var(--suave); }
	.motor__celda[data-dato="isla"], .motor__celda[data-dato="personas"] { grid-column: auto; }
	.motor__celda:not(:first-child)::before { content: ""; position: absolute; left: 0; top: 24%; bottom: 24%; width: 1px; background: var(--m-linea); }
	.motor__celda:hover { background: rgb(255 255 255 / 0.07); }
	.motor__celda.is-activa { background: rgb(255 255 255 / 0.13); }
	.motor__celda.is-activa .motor__valor { text-decoration: none; }
	.motor__valor { font-size: 1.35rem; }
	.motor__enviar { width: auto; min-height: 62px; font-size: var(--t-m); }
	.motor__paneles { position: absolute; left: 0; right: 0; bottom: calc(100% + 14px); display: flex; justify-content: center; pointer-events: none; }
	.motor__panel {
		width: min(100%, 700px); padding: 22px 24px; border: 1px solid var(--m-linea); border-radius: 22px;
		background: var(--m-fondo); box-shadow: 0 24px 60px rgb(0 0 0 / 0.3); pointer-events: auto;
		animation: motor-panel 0.3s cubic-bezier(0.2, 0.75, 0.2, 1);
	}
	.motor__panel--isla { width: 480px; margin-right: auto; }
	.motor__panel--personas { width: 360px; margin-left: auto; margin-right: 200px; }
	.motor.is-fija .motor__form { position: fixed; z-index: 45; left: 50%; bottom: 18px; width: min(1080px, calc(100% - 160px)); translate: -50% 0; background: rgb(8 22 27 / 0.82); animation: motor-fija 0.45s cubic-bezier(0.2, 0.75, 0.2, 1); }
}
@keyframes motor-fija { from { opacity: 0; translate: -50% 30px; } }
@keyframes motor-panel { from { opacity: 0; transform: translateY(10px); } }

/* ── Logros: números grandes sobre oscuro, que cuentan al aparecer ──────────── */
.logros { padding-block: clamp(56px, 8vw, 104px); background: #06161b; color: #fff; }
.logros__cabeza { max-width: 760px; margin: 0 auto clamp(32px, 5vw, 56px); text-align: center; }
.logros__sub { margin-top: 14px; font-size: var(--t-l); color: rgb(255 255 255 / 0.72); }
.logros__titulo { font-size: var(--t-titulo); font-weight: 300; }
.logros__lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 0; margin: 0; padding: 0; list-style: none; }
.logros__item { padding: 0 12px; text-align: center; }
.logros__item:last-child { grid-column: 1 / -1; }
.logros__num { font-family: var(--f-titulo); font-size: clamp(3.4rem, 1.8rem + 4.4vw, 5.8rem); font-weight: 200; line-height: 1; letter-spacing: -0.02em; white-space: nowrap; }
.logros__num small { margin-left: 0.06em; font-size: 0.42em; font-weight: 300; letter-spacing: 0; color: var(--verde); }
.logros__nombre { margin-top: 12px; font-size: var(--t-s); letter-spacing: 0.16em; text-transform: uppercase; }
.logros__detalle { margin-top: 4px; font-size: var(--t-s); line-height: 1.3; color: rgb(255 255 255 / 0.62); }
.logros__estrellas { display: block; width: 92px; height: 16px; margin: 8px auto 0; fill: var(--verde); }
/* La marca de «por confirmar» de la demo, aquí discreta: un punto ámbar junto a la cifra */
.logros .por-confirmar, .recuerdos .por-confirmar { background: none; text-decoration: none; border: 0; }
.logros .por-confirmar::after, .recuerdos .por-confirmar::after { /* carácter de texto, no caja: así no se separa de la cifra al partir la línea */
	content: "\2022"; margin-left: 0.04em; color: var(--ambar); font-size: 0.55em; font-style: normal; line-height: 0; vertical-align: super;
}
@media (min-width: 900px) {
	.logros__lista { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.logros__item { border-left: 1px solid rgb(255 255 255 / 0.12); }
	.logros__item:first-child { border-left: 0; }
	.logros__item:last-child { grid-column: auto; }
}
/* Entrada suave al aparecer (solo con html.animar; home.js marca la sección antes de observarla) */
.animar .logros.is-observado .logros__item { opacity: 0; transform: translateY(18px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.75, 0.2, 1); }
.animar .logros.is-visible .logros__item { opacity: 1; transform: none; }
.animar .logros.is-visible .logros__item:nth-child(2) { transition-delay: 0.1s; }
.animar .logros.is-visible .logros__item:nth-child(3) { transition-delay: 0.2s; }
.animar .logros.is-visible .logros__item:nth-child(4) { transition-delay: 0.3s; }
.animar .logros.is-visible .logros__item:nth-child(5) { transition-delay: 0.4s; }

/* ── La isla viva ───────────────────────────────────────────────────────────── */
.isla-viva {
	position: relative; padding-block: clamp(56px, 8vw, 104px) 112px; color: #fff;
	background: radial-gradient(ellipse at 50% 42%, #0f4e63 0%, #072a35 55%, #041a21 100%);
}
.isla-viva__cabeza { text-align: center; }
.isla-viva__ante { color: #cfe8a6; }
.isla-viva__titulo { font-size: var(--t-titulo); font-weight: 200; }
.isla-viva__islas { display: inline-flex; margin-top: 22px; padding: 4px; border-radius: 999px; background: rgb(255 255 255 / 0.1); }
.isla-viva__islas button {
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px;
	background: none; color: #fff; font: inherit; font-size: var(--t-m); cursor: pointer; transition: background-color var(--suave), color var(--suave);
}
.isla-viva__islas button i { font-size: var(--t-xs); font-style: normal; opacity: 0.7; }
.isla-viva__islas button[aria-pressed="true"] { background: #fff; color: var(--azul-noche); }
.isla-viva__ayuda { margin-top: 14px; font-size: var(--t-s); color: rgb(255 255 255 / 0.72); }
.isla-viva__escena { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 16px; }
.isla-viva__mapas { margin-inline: calc(var(--hueco) * -0.5); }
.isla-viva__mapa { margin: 0; }
.isla-viva__svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Costa que respira, zonas y villas */
.isla-viva__halo use { fill: none; stroke: #5fb0d8; stroke-linejoin: round; } /* el grosor fijo lo da el atributo vector-effect del trazo original */
.isla-viva__halo-1 { stroke-width: 18px; opacity: 0.1; }
.isla-viva__halo-2 { stroke-width: 44px; opacity: 0.05; }
.isla-viva__zona { cursor: pointer; outline: none; transition: opacity 0.5s; }
.isla-viva__zona path {
	fill-opacity: 0.9; stroke: rgb(255 255 255 / 0.75); stroke-width: 1.2px; stroke-linejoin: round; vector-effect: non-scaling-stroke;
	transition: fill 0.4s;
}
.isla-viva__zona--ibiza path { fill: #c9b27a; }
.isla-viva__zona--santa-eulalia path { fill: #6fa83f; }
.isla-viva__zona--san-antonio path { fill: #3f9a86; }
.isla-viva__zona--san-juan path { fill: #8cc56a; }
.isla-viva__zona--toda path { fill: #6fa83f; }
.isla-viva__zona:hover path, .isla-viva__zona.is-resaltada path { fill: #b9dc8a; }
.isla-viva__zona:focus-visible path { stroke: #fff; stroke-width: 3px; }
.isla-viva.is-abierta .isla-viva__zona:not(.is-elegida) { opacity: 0.28; }
.isla-viva__zona.is-elegida path { fill: #90c947; }
.isla-viva__puntos { pointer-events: none; transition: opacity 0.4s; }
.isla-viva__punto { transition: opacity 0.4s; }
.isla-viva__punto path { fill: none; stroke: #fff; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.isla-viva__centro { stroke-width: 7px; }
.isla-viva__pulso { stroke-width: 7px; stroke-opacity: 0; }
.isla-viva__punto.is-fuera { opacity: 0.15; }
.isla-viva__punto.is-destacado .isla-viva__centro { stroke: #ffd76a; stroke-width: 12px; }
/* Zona de toque de cada punto (más grande que el punto) y la villa que asoma al pasar por él (Sandra, 22-oct) */
.isla-viva__punto .isla-viva__toque { stroke: transparent; stroke-width: 26px; pointer-events: stroke; cursor: pointer; }
.isla-viva__mapa { position: relative; }
.isla-viva__tip {
	position: absolute; z-index: 3; width: 190px; padding: 8px; border-radius: 14px; background: #fff; color: var(--tinta);
	box-shadow: 0 12px 32px rgb(0 0 0 / 0.35); transform: translate(-50%, calc(-100% - 14px)); pointer-events: none;
}
.isla-viva__tip[hidden] { display: none; }
.isla-viva__tip img { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; border-radius: 9px; object-fit: cover; }
.isla-viva__tip b { display: block; margin-top: 6px; font-family: var(--f-titulo); font-size: 1.05rem; font-weight: 400; line-height: 1.15; }
.isla-viva__tip span { display: block; font-size: var(--t-xs); color: var(--tinta-suave, #4a5a5e); }
.isla-viva__etiquetas { pointer-events: none; transition: opacity 0.4s; }
.isla-viva.is-abierta .isla-viva__etiquetas { opacity: 0; }
.isla-viva__nombre { font-family: var(--f-titulo); font-size: 38px; font-weight: 300; fill: #fff; paint-order: stroke; stroke: rgb(4 26 33 / 0.55); stroke-width: 5px; }
.isla-viva__n { font-family: var(--f-texto); font-size: 24px; fill: #e5f3cd; paint-order: stroke; stroke: rgb(4 26 33 / 0.55); stroke-width: 4px; }
.isla-viva__linea { stroke: rgb(255 255 255 / 0.6); stroke-width: 1px; vector-effect: non-scaling-stroke; }
@media (max-width: 700px) {
	/* En móvil: nombres algo más pequeños para que no se toquen entre sí, la cifra más separada y un halo más
	   oscuro para que los puntos de las villas no se mezclen con las letras */
	.isla-viva__nombre { font-size: 46px; stroke: rgb(4 26 33 / 0.75); stroke-width: 8px; }
	.isla-viva__n { font-size: 34px; transform: translateY(12px); stroke: rgb(4 26 33 / 0.75); stroke-width: 6px; }
}

/* Movimiento (solo con html.animar): la costa se dibuja, los puntos laten; parado fuera de pantalla */
.animar .isla-viva__halo-1, .animar .isla-viva__halo-2 { animation: isla-respira 4s ease-in-out 3; } /* respira 3 veces: cada latido repinta el mapa */
.animar .isla-viva__halo-2 { animation-delay: 1s; }
.animar .isla-viva__pulso { animation: isla-pulso 2.6s ease-out 4; animation-delay: var(--d, 0s); } /* 4 latidos, no sin parar (cada uno repinta el mapa entero) */
.isla-viva:not(.is-en-vista) .isla-viva__pulso, .isla-viva:not(.is-en-vista) .isla-viva__halo use { animation-play-state: paused; }
.animar .isla-viva__mapa.is-preparada:not(.is-lista) .isla-viva__zona path { vector-effect: none; stroke-width: 3px; stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0; }
.animar .isla-viva__mapa.is-dibujada:not(.is-lista) .isla-viva__zona path {
	stroke-dashoffset: 0; fill-opacity: 0.9; transition: stroke-dashoffset 1.8s cubic-bezier(0.65, 0, 0.35, 1), fill-opacity 0.9s ease 1.1s;
}
.animar .isla-viva__mapa.is-preparada:not(.is-lista) .isla-viva__puntos,
.animar .isla-viva__mapa.is-preparada:not(.is-lista) .isla-viva__etiquetas { opacity: 0; }
.animar .isla-viva__mapa.is-dibujada:not(.is-lista) .isla-viva__puntos,
.animar .isla-viva__mapa.is-dibujada:not(.is-lista) .isla-viva__etiquetas { opacity: 1; transition: opacity 0.8s ease 1.5s; }
@keyframes isla-respira { 50% { opacity: 0.02; } }
@keyframes isla-pulso { 0% { stroke-width: 7px; stroke-opacity: 0.55; } 100% { stroke-width: 22px; stroke-opacity: 0; } }

/* Zonas en botones (también para quien no quiere tocar el mapa) */
.isla-viva__lado { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; min-width: 0; }
/* La fila de villas de la hoja se desliza dentro; sin esto la hoja medía lo que todas sus villas juntas
   (1.769 px en un móvil de 390) y toda la página se iba de lado al abrir una zona */
.isla-viva__hoja { min-width: 0; }
.isla-viva__chips {
	display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--hueco); scrollbar-width: none;
	margin-inline: calc(var(--hueco) * -1); padding: 2px var(--hueco);
}
.isla-viva__chips::-webkit-scrollbar { display: none; }
.isla-viva__chip {
	flex: none; display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 10px 8px 16px;
	border: 1px solid rgb(255 255 255 / 0.28); border-radius: 999px; background: rgb(255 255 255 / 0.06);
	color: #fff; text-decoration: none; scroll-snap-align: start; transition: border-color var(--suave), background-color var(--suave);
}
.isla-viva__chip-texto { display: none; }
.isla-viva__chip i {
	display: grid; place-items: center; min-width: 28px; height: 24px; padding: 0 7px; border-radius: 999px;
	background: rgb(255 255 255 / 0.16); font-size: var(--t-xs); font-style: normal;
}
.isla-viva__chip:hover, .isla-viva__chip.is-resaltada { border-color: #cfe8a6; background: rgb(144 201 71 / 0.16); }
.isla-viva__todas { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 0 8px; color: #fff; text-decoration: none; white-space: nowrap; opacity: 0.85; }
.isla-viva__todas .icono { width: 18px; height: 18px; }
.isla-viva.is-abierta .isla-viva__chips { display: none; }

/* Hoja con las villas de la zona */
.isla-viva__hoja-cabeza { position: relative; padding-right: 56px; }
.isla-viva__hoja-titulo { font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.6rem); font-weight: 200; }
.isla-viva__hoja-texto { margin-top: 6px; color: rgb(255 255 255 / 0.78); }
.isla-viva__cerrar {
	position: absolute; top: 0; right: 0; display: grid; place-items: center; width: 44px; height: 44px;
	border: 0; border-radius: 50%; background: rgb(255 255 255 / 0.12); color: #fff; cursor: pointer;
}
.isla-viva__cerrar .icono { width: 20px; height: 20px; }
.isla-viva__villas {
	display: flex; gap: 12px; margin: 16px calc(var(--hueco) * -1) 0; padding: 0 var(--hueco) 6px;
	overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--hueco); scrollbar-width: none;
}
.isla-viva__villas::-webkit-scrollbar { display: none; }
.isla-viva__villa { flex: 0 0 62%; max-width: 240px; color: #fff; text-decoration: none; scroll-snap-align: start; }
.isla-viva__villa img {
	display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px;
	outline: 2px solid transparent; outline-offset: 2px; transition: outline-color 0.3s;
}
.isla-viva__villa:hover img, .isla-viva__villa.is-destacado img { outline-color: #ffd76a; }
.isla-viva__villa b { display: block; margin-top: 8px; font-family: var(--f-titulo); font-size: 1.2rem; font-weight: 300; line-height: 1.15; }
.isla-viva__villa span { display: block; font-size: var(--t-s); color: rgb(255 255 255 / 0.75); }
.isla-viva__ver {
	display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; margin-top: 16px; padding: 0 20px;
	border-radius: 999px; background: #fff; color: var(--azul-noche); font-size: var(--t-m); text-align: center; text-decoration: none;
}
.animar .isla-viva__hoja { animation: isla-hoja 0.5s cubic-bezier(0.2, 0.75, 0.2, 1); }
@keyframes isla-hoja { from { opacity: 0; transform: translateY(16px); } }
.isla-viva__pie { margin-top: 20px; font-size: var(--t-xs); color: rgb(255 255 255 / 0.45); text-align: center; }

@media (min-width: 960px) {
	.isla-viva { padding-bottom: clamp(64px, 8vw, 104px); }
	.isla-viva__escena { grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); align-items: center; gap: 48px; margin-top: 28px; }
	.isla-viva__mapas { margin-inline: 0; }
	.isla-viva__chips { flex-direction: column; gap: 10px; overflow: visible; margin: 0; padding: 0; }
	.isla-viva__chip { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 14px; padding: 14px 16px 14px 20px; border-radius: 18px; }
	.isla-viva__chip-nombre { font-family: var(--f-titulo); font-size: 1.35rem; font-weight: 300; }
	.isla-viva__chip-texto { display: block; grid-column: 1; font-size: var(--t-s); color: rgb(255 255 255 / 0.7); }
	.isla-viva__chip i { grid-column: 2; grid-row: 1 / span 2; }
	.isla-viva__todas { margin-top: 6px; padding: 8px 4px; }
	.isla-viva__villas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 430px; margin: 16px 0 0; padding: 0 8px 0 0; overflow-y: auto; scrollbar-width: thin; }
	.isla-viva__villa { max-width: none; }
}

/* ── Repaso del resto de la home: el mismo lenguaje que la portada ─────────── */
/* Títulos con la letra fina de la portada */
.seccion__titulo, .asesor__titulo, .propietarios__titulo { font-weight: 300; letter-spacing: -0.02em; }
/* Las fotos de las islas se acercan un poco al pasar, como las de las villas y las experiencias */
.isla__img { transition: transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.isla:hover .isla__img { transform: scale(1.04); }
/* Cada bloque entra suave al aparecer, las tarjetas una tras otra (solo con html.animar; lo marca home.js) */
.animar .revela {
	opacity: 0; transform: translateY(22px);
	transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.75, 0.2, 1); transition-delay: calc(var(--i, 0) * 90ms);
}
.animar .is-revelada .revela { opacity: 1; transform: none; }
/* Escritorio: al bajar, la barra fija se aparta para no tapar; al subir, vuelve */
@media (min-width: 1200px) {
	.motor.is-fija .motor__form { transition: translate 0.45s cubic-bezier(0.2, 0.75, 0.2, 1), opacity 0.3s ease; }
	.motor.is-fija.is-apartada .motor__form { translate: -50% calc(100% + 40px); opacity: 0; pointer-events: none; }
}

/* ── Garantías: un sello en el centro y las garantías a los lados ───────────── */
.garantias__escena { display: grid; gap: 36px; justify-items: center; }
.sello { position: relative; width: 190px; aspect-ratio: 1; }
.sello__anillo { display: block; width: 100%; height: 100%; overflow: visible; }
.sello__anillo circle { fill: none; stroke: rgb(255 255 255 / 0.22); stroke-width: 1; }
.sello__anillo text { font-family: var(--f-texto); font-size: 11.5px; letter-spacing: 0.08em; fill: #cfe8a6; }
.animar .sello__anillo { animation: sello-girar 48s linear infinite; }
@keyframes sello-girar { to { transform: rotate(360deg); } }
.sello__centro { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center; }
.sello__icono { width: 40px; height: 40px; color: var(--verde); }
.sello__centro span { font-family: var(--f-titulo); font-size: 1.05rem; font-style: italic; }
.garantias__lista { grid-template-columns: minmax(0, 1fr); gap: 0; width: 100%; }
.garantia {
	display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 18px; padding: 22px 0;
	border-top: 1px solid rgb(255 255 255 / 0.14); border-radius: 0; background: none; box-shadow: none;
}
.garantia__icono-caja { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid rgb(255 255 255 / 0.28); border-radius: 50%; }
.garantia__icono { width: 26px; height: 26px; }
.garantia__titulo { margin-top: 2px; font-size: 1.5rem; font-weight: 300; }
.garantia__texto { margin-top: 6px; }
@media (min-width: 1000px) {
	.garantias__escena { grid-template-columns: minmax(0, 1fr) 260px minmax(0, 1fr); align-items: center; gap: 56px; }
	.sello { grid-column: 2; grid-row: 1; width: 260px; }
	.sello__anillo text { font-size: 11px; }
	.garantias__lista--izquierda { grid-column: 1; grid-row: 1; text-align: right; }
	.garantias__lista--izquierda .garantia { grid-template-columns: minmax(0, 1fr) auto; }
	.garantias__lista--izquierda .garantia__icono-caja { order: 2; }
	.garantias__lista--derecha { grid-column: 3; grid-row: 1; }
	.garantia:first-child { border-top: 0; }
}

/* ── Reseñas «Lo que se llevan a casa» ─────────────────────────────────────── */
.recuerdos {
	position: relative; overflow: hidden; padding-block: clamp(64px, 9vw, 120px); color: var(--tinta);
	background:
		radial-gradient(60% 50% at 12% 0%, rgb(255 214 120 / 0.28) 0%, transparent 70%),
		radial-gradient(50% 45% at 92% 100%, rgb(144 201 71 / 0.22) 0%, transparent 70%),
		var(--arena);
}
.recuerdos__cabeza { display: grid; gap: 32px; align-items: end; }
.recuerdos__titulo { font-size: clamp(2.6rem, 1.4rem + 4.6vw, 5.4rem); font-weight: 200; line-height: 1; letter-spacing: -0.025em; }
.recuerdos__texto { max-width: 30em; margin-top: 18px; font-size: var(--t-l); color: var(--tinta-suave); }
.recuerdos__media { display: grid; justify-items: start; gap: 6px; }
.recuerdos__nota { font-family: var(--f-titulo); font-size: clamp(5rem, 3rem + 6vw, 8.5rem); font-weight: 200; line-height: 0.9; letter-spacing: -0.03em; color: var(--azul-noche); white-space: nowrap; }
.recuerdos__nota small { margin-left: 0.05em; font-size: 0.3em; font-weight: 300; letter-spacing: 0; color: var(--tinta-suave); }
.recuerdos__media-texto { font-size: var(--t-m); }
.recuerdos__media-d { font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta-suave); }
@media (min-width: 960px) {
	.recuerdos__cabeza { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 64px; }
	.recuerdos__media { justify-items: end; text-align: right; }
}

/* Estrellas con relleno parcial (la nota decide cuánto se llena) */
.estrellas { position: relative; display: inline-block; width: 92px; height: 16px; vertical-align: middle; }
.estrellas svg { display: block; width: 92px; max-width: none; height: 16px; fill: currentColor; } /* sin el max-width general: las llenas no se encogen y caen justo encima de las grises */
.estrellas__fondo { display: block; color: rgb(23 38 43 / 0.12); }
.estrellas__lleno { position: absolute; inset: 0 auto 0 0; width: var(--lleno, 100%); overflow: hidden; color: #e3a400; }
.estrellas--grandes, .estrellas--grandes svg { width: 150px; height: 26px; }

/* Una medalla por plataforma; tocarla deja solo sus reseñas */
.recuerdos__medallas {
	display: flex; gap: 12px; margin: clamp(32px, 5vw, 56px) calc(var(--hueco) * -1) 0; padding: 4px var(--hueco);
	overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--hueco); scrollbar-width: none;
}
.recuerdos__medallas::-webkit-scrollbar { display: none; }
.medalla {
	flex: none; display: grid; justify-items: start; align-content: center; gap: 4px; min-width: 170px; min-height: 122px; padding: 18px 22px;
	border: 1px solid var(--linea); border-radius: 22px; background: rgb(255 255 255 / 0.72); color: inherit; font: inherit; text-align: left;
	scroll-snap-align: start; cursor: pointer; transition: border-color var(--suave), background-color var(--suave), transform var(--suave), box-shadow var(--suave);
}
.medalla:hover { transform: translateY(-2px); box-shadow: var(--sombra); }
.medalla[aria-pressed="true"] { border-color: var(--azul-noche); background: var(--azul-noche); color: #fff; }
.medalla[aria-pressed="true"] .estrellas__fondo { color: rgb(255 255 255 / 0.25); }
.medalla--todas { min-width: 110px; justify-items: center; text-align: center; }
.medalla__nombre { font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; }
.medalla__nota { font-family: var(--f-titulo); font-size: 2.4rem; font-weight: 300; line-height: 1; }
.medalla__nota small { font-size: 0.45em; opacity: 0.7; }
.medalla__nota--sin { font-family: var(--f-texto); font-size: var(--t-s); line-height: 1.3; }
.medalla__total { font-size: var(--t-xs); opacity: 0.75; }
@media (min-width: 960px) {
	.recuerdos__medallas { margin-inline: 0; padding-inline: 0; overflow: visible; }
	.medalla { flex: 1; }
	.medalla--todas { flex: 0 0 auto; }
}

/* Muro de postales. Sin JS o con «reducir movimiento»: una fila que se desliza con el dedo (una rejilla en
   escritorio). Con html.animar en escritorio: dos filas que pasan despacio en sentidos contrarios. */
.recuerdos__muro-caja { position: relative; margin-top: clamp(40px, 6vw, 72px); }
.recuerdos__muro {
	display: flex; gap: 20px; margin: 0; padding: 16px var(--hueco) 28px; list-style: none;
	overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--hueco); scrollbar-width: none;
}
.recuerdos__muro::-webkit-scrollbar { display: none; }
.postal { flex: 0 0 min(82vw, 340px); scroll-snap-align: center; }
.postal__dentro {
	height: 100%; margin: 0; padding: 14px 14px 22px; border-radius: 20px; background: #fff;
	box-shadow: 0 2px 4px rgb(15 76 92 / 0.05), 0 18px 40px rgb(15 76 92 / 0.12);
	transform: rotate(var(--giro, 0deg)); transition: transform 0.5s cubic-bezier(0.2, 0.75, 0.2, 1), box-shadow 0.5s;
}
.postal:nth-child(3n + 1) { --giro: -1.4deg; }
.postal:nth-child(3n + 2) { --giro: 1deg; }
.postal:nth-child(3n) { --giro: -0.4deg; }
.postal:hover .postal__dentro { transform: rotate(0deg) translateY(-6px); box-shadow: 0 4px 8px rgb(15 76 92 / 0.06), 0 26px 60px rgb(15 76 92 / 0.18); }
.postal__foto { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; }
.postal__img { width: 100%; height: 100%; object-fit: cover; }
.estrellas--postal { margin: 16px 8px 0; }
.postal__cita { margin: 10px 8px 0; }
.postal__frase { font-family: var(--f-titulo); font-size: 1.55rem; font-style: italic; font-weight: 300; line-height: 1.2; color: var(--azul-noche); }
.postal__texto {
	display: -webkit-box; margin-top: 10px; overflow: hidden; font-size: var(--t-s); line-height: 1.45; color: var(--tinta-suave);
	-webkit-line-clamp: 4; -webkit-box-orient: vertical;
}
.postal__autor { display: flex; align-items: center; gap: 12px; margin: 18px 8px 0; }
.postal__autor span:last-child { display: grid; line-height: 1.2; }
.postal__autor strong { font-weight: 400; }
.postal__autor small { font-size: var(--t-xs); color: var(--tinta-suave); }
.postal__inicial { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--azul-noche); color: #fff; font-family: var(--f-titulo); font-size: 1.2rem; }
.postal--hueco .postal__dentro {
	display: grid; align-content: center; gap: 12px; min-height: 340px; padding: 28px;
	border: 1.5px dashed var(--ambar); background: rgb(255 255 255 / 0.5); box-shadow: none;
}
.postal__marca { font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-suave); }
.postal--hueco .postal__frase { font-style: normal; color: var(--tinta-suave); }
.recuerdos.is-filtrado .recuerdos__muro { justify-content: safe center; }
@media (min-width: 960px) {
	.recuerdos__muro { flex-wrap: wrap; justify-content: center; max-width: 1480px; margin-inline: auto; overflow: visible; }
	.postal { flex-basis: 320px; }
}
/* Las dos filas en movimiento (las construye home.js; la lista original queda para los lectores de pantalla) */
.recuerdos.is-marquesina:not(.is-filtrado) .recuerdos__muro {
	position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.recuerdos.is-filtrado .recuerdos__filas { display: none; }
.recuerdos__filas { display: grid; gap: 30px; padding-block: 16px 30px; }
.recuerdos__fila {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.recuerdos__pista { display: flex; gap: 24px; width: max-content; padding-block: 12px; animation: recuerdos-pasar var(--duracion, 60s) linear infinite; }
.recuerdos__fila--2 .recuerdos__pista { animation-direction: reverse; }
.recuerdos__pista .postal { flex: 0 0 340px; }
@media (hover: hover) { .recuerdos__filas:hover .recuerdos__pista { animation-play-state: paused; } } /* con el dedo, el «hover» se queda pegado */
.recuerdos.is-pausado .recuerdos__pista, .recuerdos.is-fuera .recuerdos__pista { animation-play-state: paused; }
@keyframes recuerdos-pasar { to { transform: translateX(var(--mover, -50%)); } }
.recuerdos__pausa {
	position: absolute; z-index: 2; top: -8px; right: var(--hueco); display: grid; place-items: center; width: 44px; height: 44px;
	border: 1px solid var(--linea); border-radius: 50%; background: #fff; color: var(--tinta); cursor: pointer;
}
.recuerdos__pausa svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.recuerdos__pausa-play { display: none; }
.recuerdos.is-pausado .recuerdos__pausa-ii { display: none; }
.recuerdos.is-pausado .recuerdos__pausa-play { display: block; }
.recuerdos.is-filtrado .recuerdos__pausa { display: none; }

/* Cierre: ser el siguiente */
.recuerdos__cierre { margin-top: clamp(40px, 6vw, 72px); text-align: center; }
.recuerdos__cierre-titulo { font-family: var(--f-titulo); font-size: clamp(2rem, 1.2rem + 2.6vw, 3.4rem); font-style: italic; font-weight: 200; line-height: 1.1; color: var(--azul-noche); }
.recuerdos__cierre-texto { max-width: 30em; margin: 12px auto 26px; font-size: var(--t-l); color: var(--tinta-suave); }

/* ── Color sutil de cada canal de reseñas ──────────────────────────────────── */
.canal--google  { --canal: #2f6fd6; --canal-suave: rgb(47 111 214 / 0.08); }
.canal--booking { --canal: #183f8c; --canal-suave: rgb(24 63 140 / 0.08); }
.canal--airbnb  { --canal: #d9465f; --canal-suave: rgb(217 70 95 / 0.08); }
/* Nota de un canal («9/10», «4,8/5» o «por confirmar») */
.nota-canal { font-family: var(--f-titulo); font-size: 2.4rem; font-weight: 300; line-height: 1; }
.nota-canal small { font-size: 0.45em; opacity: 0.7; }
.nota-canal--sin { font-family: var(--f-texto); font-size: var(--t-s); line-height: 1.3; }
/* Medallas: un punto del color del canal y, al elegirla, el color del canal de fondo */
.medalla .nota-canal { font-size: 2.4rem; }
.medalla.canal--google .medalla__nombre::before, .medalla.canal--booking .medalla__nombre::before, .medalla.canal--airbnb .medalla__nombre::before,
.canal__nombre::before, .canal-mini__nombre::before {
	content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--canal); vertical-align: 1px;
}
.medalla[class*="canal--"] { background: linear-gradient(160deg, var(--canal-suave), rgb(255 255 255 / 0.72) 70%); }
.medalla[class*="canal--"][aria-pressed="true"] { border-color: var(--canal); background: var(--canal); }
.medalla[class*="canal--"][aria-pressed="true"] .medalla__nombre::before { background: #fff; }
/* Postales: un velo del color del canal arriba, la inicial y el «Reseña en…» en su color */
.postal[class*="canal--"] .postal__dentro { background: linear-gradient(180deg, var(--canal-suave), #fff 38%); }
.postal[class*="canal--"] .postal__inicial { background: var(--canal); }
.postal__autor .postal__canal { color: var(--canal, var(--tinta-suave)); }
.postal--hueco .postal__canal { font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--canal, var(--tinta-suave)); }

/* ── Reseñas 2 «Por canal»: tres columnas, una por canal ─────────────────────── */
.recuerdos__canales {
	display: grid; grid-auto-flow: column; grid-auto-columns: min(86vw, 400px); gap: 18px; margin: clamp(32px, 5vw, 56px) calc(var(--hueco) * -1) 0;
	padding: 4px var(--hueco) 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--hueco); scrollbar-width: none;
}
.recuerdos__canales::-webkit-scrollbar { display: none; }
.canal { display: grid; align-content: start; gap: 16px; padding: 22px; border-radius: 26px; background: linear-gradient(180deg, var(--canal-suave), rgb(255 255 255 / 0.6) 45%); box-shadow: inset 0 0 0 1px var(--linea); scroll-snap-align: start; }
.canal__cabeza { display: grid; justify-items: start; gap: 6px; padding: 6px 4px 18px; border-bottom: 1px solid var(--linea); }
.canal__nombre { font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--canal); }
.canal__cabeza .nota-canal { font-size: 3.4rem; color: var(--canal); }
.canal__cabeza .nota-canal--sin, .medalla .nota-canal--sin, .canal-mini .nota-canal--sin { font-size: var(--t-s); }
.canal__total { font-size: var(--t-xs); color: var(--tinta-suave); }
.canal__lista { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.canal__lista .postal__dentro { transform: none; box-shadow: 0 1px 2px rgb(15 76 92 / 0.05), 0 10px 24px rgb(15 76 92 / 0.08); }
.canal__lista .postal--hueco .postal__dentro { min-height: 180px; box-shadow: none; }
@media (min-width: 1000px) {
	.recuerdos__canales { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-inline: 0; padding-inline: 0; overflow: visible; }
}

/* ── Reseñas 3 «Una historia»: una reseña cada vez, a lo grande ─────────────── */
.recuerdos__canales-mini { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 28px 0 0; padding: 0; list-style: none; }
.canal-mini { display: flex; align-items: baseline; gap: 10px; }
.canal-mini__nombre { font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--canal); }
.canal-mini .nota-canal { font-size: 1.5rem; }
.foco { position: relative; margin-top: clamp(32px, 5vw, 56px); }
.foco__barras { display: flex; gap: 6px; margin-bottom: 14px; }
.foco__barras i { flex: 1; height: 3px; overflow: hidden; border-radius: 2px; background: rgb(23 38 43 / 0.12); }
.foco__barras b { display: block; width: 100%; height: 100%; background: var(--azul-noche); transform: scaleX(0); transform-origin: left; }
.foco__barras i.is-vista b { transform: none; }
.foco__barras i.is-actual b { transform: none; }
/* La barra se llena con transform (no con width: animar el ancho obligaba a maquetar en cada fotograma durante 7 s) */
.animar .foco__barras i.is-actual b { transform: scaleX(0); animation: foco-avanza var(--foco-dur, 7s) linear forwards; }
.foco.is-pausado .foco__barras i.is-actual b { animation-play-state: paused; }
@keyframes foco-avanza { to { transform: none; } }
.foco__escenario { position: relative; }
.foco__diapo { display: grid; gap: 22px; margin: 0; overflow: hidden; border-radius: 30px; background: linear-gradient(160deg, var(--canal-suave), #fff 50%); box-shadow: 0 24px 60px rgb(15 76 92 / 0.14); }
.animar .foco__diapo.is-activa { animation: foco-entra 0.7s cubic-bezier(0.2, 0.75, 0.2, 1); }
@keyframes foco-entra { from { opacity: 0; transform: translateY(14px); } }
.foco__foto { aspect-ratio: 16 / 10; overflow: hidden; }
.foco__img { width: 100%; height: 100%; object-fit: cover; }
.animar .foco__diapo.is-activa .foco__img { animation: cine-acercar 9s ease-out both; }
.foco__cuerpo { display: grid; align-content: center; gap: 14px; padding: 6px 24px 28px; }
.foco__cita { margin: 0; } /* sin el margen de 40 px que el navegador pone a las citas */
.foco__frase { font-family: var(--f-titulo); font-size: clamp(2rem, 1.2rem + 3vw, 3.6rem); font-style: italic; font-weight: 200; line-height: 1.08; color: var(--canal, var(--azul-noche)); }
.foco__texto { margin-top: 14px; font-size: var(--t-m); line-height: 1.5; color: var(--tinta-suave); }
.foco .postal__autor { margin: 6px 0 0; }
.foco__caras { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 22px; }
.foco__cara, .foco__flecha {
	display: grid; place-items: center; width: 48px; height: 48px; border: 2px solid transparent; border-radius: 50%;
	font: inherit; font-family: var(--f-titulo); font-size: 1.25rem; cursor: pointer; transition: transform var(--suave), border-color var(--suave), opacity var(--suave);
}
.foco__cara { background: var(--canal); color: #fff; opacity: 0.5; }
.foco__cara[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 2px var(--canal); opacity: 1; transform: scale(1.08); }
.foco__flecha { border-color: var(--linea); background: #fff; color: var(--tinta); font-size: 1.5rem; }
@media (min-width: 960px) {
	.foco__diapo { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 0; min-height: 520px; }
	.foco__foto { aspect-ratio: auto; }
	.foco__cuerpo { padding: 48px 56px; }
}

/* ── Reseñas 4 «Mosaico»: baldosas de tamaños distintos ─────────────────────── */
.recuerdos__cabeza--sola { grid-template-columns: minmax(0, 1fr); }
.mosaico-r { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; gap: 14px; margin-top: clamp(32px, 5vw, 56px); }
.baldosa { min-width: 0; border-radius: 24px; }
.baldosa--total {
	grid-column: 1 / -1; display: grid; place-items: center; padding: 34px 20px; text-align: center; color: #fff;
	background: radial-gradient(120% 120% at 20% 0%, #135b6d 0%, var(--azul-noche) 55%, var(--azul-profundo) 100%);
}
.baldosa--total .recuerdos__media { justify-items: center; text-align: center; }
.baldosa--total .recuerdos__nota { color: #fff; }
.baldosa--total .recuerdos__nota small, .baldosa--total .recuerdos__media-d { color: rgb(255 255 255 / 0.7); }
.baldosa--total .estrellas__fondo { color: rgb(255 255 255 / 0.2); }
.baldosa--canal { display: grid; align-content: center; justify-items: start; gap: 6px; padding: 22px; background: linear-gradient(160deg, var(--canal-suave), #fff 75%); box-shadow: inset 0 0 0 1px var(--linea); }
.baldosa--canal .nota-canal { color: var(--canal); }
.baldosa--resena { grid-column: 1 / -1; }
.baldosa--resena .postal__dentro { height: 100%; transform: none; }
.baldosa--cta { grid-column: 1 / -1; display: grid; place-items: center; padding: 30px 20px; background: var(--verde-claro); }
.baldosa--cta .recuerdos__cierre { margin: 0; }
@media (min-width: 760px) {
	.mosaico-r { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.baldosa--total { grid-column: span 2; grid-row: span 2; }
	.baldosa--canal { grid-column: span 1; }
	.baldosa--canal.canal--airbnb { grid-column: span 2; } /* total (2×2) + Google + Booking; debajo, Airbnb */
	.baldosa--resena { grid-column: span 2; }
	.baldosa--alta { grid-column: span 1; grid-row: span 2; }
	.baldosa--cta { grid-column: span 2; }
}

/* ── Selector de propuestas (solo demo, ?propuestas=1) ──────────────────────── */
.propuestas {
	position: fixed; z-index: 44; right: 12px; top: calc(var(--cabecera) + 72px); display: grid; gap: 6px; padding: 10px 12px;
	border-radius: 14px; background: rgb(255 255 255 / 0.96); box-shadow: var(--sombra-g); color: var(--tinta); font-size: 14px;
}
.propuestas__fila { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.propuestas__pieza { min-width: 5.5em; color: var(--tinta-suave); }
.propuestas a { padding: 4px 10px; border: 1px solid var(--linea); border-radius: 999px; color: inherit; text-decoration: none; white-space: nowrap; }
.propuestas a[aria-current="true"] { border-color: var(--azul-noche); background: var(--azul-noche); color: #fff; }
@media (max-width: 700px) {
	.propuestas { left: 12px; right: 12px; padding: 8px 10px; }
	.propuestas__pieza { width: 100%; min-width: 0; }
}

/* ── Tipos de villa: tres paneles con foto, cada uno con su color; el elegido se abre. Villas en carrusel ── */
.tipos .pestanas {
	display: flex; gap: 12px; margin: 0 calc(var(--hueco) * -1) 28px; padding: 4px var(--hueco) 8px;
	overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--hueco);
}
.tipos .pestana {
	position: relative; isolation: isolate; flex: 0 0 min(78vw, 340px); display: grid; grid-template-columns: none; align-content: end; justify-items: start; gap: 6px;
	min-height: 280px; padding: 24px; overflow: hidden; border-radius: 26px; background: var(--azul-profundo); color: #fff;
	box-shadow: none; scroll-snap-align: start; cursor: pointer;
	transition: flex-grow 0.7s cubic-bezier(0.2, 0.75, 0.2, 1), outline-color var(--suave);
	outline: 3px solid transparent; outline-offset: 3px;
}
.tipos .pestana::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(180deg, rgb(0 0 0 / 0.04) 25%, color-mix(in srgb, var(--c) 72%, #000) 100%);
}
.pestana__foto { position: absolute; inset: 0; z-index: -2; }
.pestana__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.tipos .pestana:hover { background: var(--azul-profundo); }
.tipos .pestana:hover .pestana__foto img { transform: scale(1.05); }
.tipos .pestana[aria-selected="true"] { background: var(--azul-profundo); box-shadow: 0 20px 44px rgb(15 76 92 / 0.25); outline-color: var(--c); }
.tipos .pestana__icono { grid-row: auto; width: 30px; height: 30px; color: #fff; }
.tipos .pestana__nombre { font-size: 2.1rem; font-weight: 300; line-height: 1; color: #fff; }
.tipos .pestana__d { font-size: var(--t-m); color: rgb(255 255 255 / 0.88); }
.tipos .pestana--city { --c: #3d7f93; }
.tipos .pestana--specials { --c: #a77d1c; }
@media (min-width: 900px) {
	.tipos .pestanas { margin-inline: 0; padding-inline: 0; overflow: visible; }
	.tipos .pestana { flex: 1 1 0; min-height: 360px; padding: 30px; }
	.tipos .pestana[aria-selected="true"] { flex-grow: 1.9; }
	.tipos .pestana__nombre { font-size: 2.6rem; }
}
/* Villas del tipo elegido: carrusel que se desliza */
.tipos .rejilla-villas {
	display: flex; gap: 22px; margin: 0 calc(var(--hueco) * -1); padding: 4px var(--hueco) 12px;
	overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--hueco); scrollbar-width: none;
}
.tipos .rejilla-villas::-webkit-scrollbar { display: none; }
.tipos .rejilla-villas > * { flex: 0 0 min(80vw, 380px); scroll-snap-align: start; }
.tipos .enlace-flecha { margin-top: 20px; }
.panel__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 24px; }
.tipos .panel__todas { margin-top: 0; font-family: var(--f-titulo); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 300; }
.tipos .panel__todas .icono { width: 26px; height: 26px; }
.panel__otras { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; color: var(--tinta-suave); font-size: var(--t-s); }
.panel__otra {
	display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 16px; border: 1px solid rgb(15 76 92 / 0.22); border-radius: 999px;
	background: #fff; color: var(--tinta); font-size: var(--t-m); text-decoration: none; transition: border-color var(--suave), background-color var(--suave);
}
.panel__otra .icono { width: 18px; height: 18px; color: var(--verde-oscuro); }
.panel__otra--blue .icono { color: var(--azul); }
.panel__otra--city .icono { color: var(--azul-noche); }
.panel__otra--specials .icono { color: #9a6b00; }
.panel__otra:hover { border-color: var(--tinta); }

/* ── Experiencias: mosaico de tamaños distintos, fotos a sangre ─────────────── */
.experiencias .carrusel { grid-auto-columns: min(80vw, 330px); }
.experiencias .experiencia__nombre { font-size: 2.1rem; font-weight: 300; }
.experiencias .experiencia__enlace::before { background: linear-gradient(180deg, rgb(8 28 33 / 0) 30%, rgb(8 28 33 / 0.86) 100%); }
@media (min-width: 900px) {
	.experiencias .carrusel {
		grid-auto-flow: row dense; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 270px; gap: 16px;
	}
	.experiencias .experiencia:nth-child(1) { grid-column: span 2; grid-row: span 2; }
	.experiencias .experiencia:nth-child(4) { grid-column: span 2; }
	.experiencias .experiencia:nth-child(5) { grid-column: 1 / -1; }
	.experiencias .experiencia__enlace { min-height: 0; }
	.experiencias .experiencia:nth-child(1) .experiencia__nombre { font-size: 3.2rem; }
}

/* ── Dos islas: pantalla partida, cada isla a toda altura; la que señalas se abre ── */
.islas { padding-bottom: 0; }
.islas .seccion__cabecera { margin-bottom: clamp(28px, 4vw, 48px); }
.islas > .envoltura { max-width: none; padding-inline: 0; }
.islas .seccion__cabecera { padding-inline: var(--hueco); }
.islas__rejilla { display: grid; gap: 0; }
.islas .isla {
	position: relative; isolation: isolate; display: grid; min-height: 82svh; overflow: hidden; border-radius: 0; background: var(--azul-profundo); box-shadow: none; color: #fff;
	transition: flex-grow 0.8s cubic-bezier(0.2, 0.75, 0.2, 1);
}
.islas .isla__foto { position: absolute; inset: 0; z-index: -1; aspect-ratio: auto; }
.islas .isla__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(4 18 22 / 0.1) 30%, rgb(4 18 22 / 0.78) 100%); }
.islas .isla__img { transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1); }
.islas .isla:hover .isla__img { transform: scale(1.05); }
.islas .isla__dibujo { right: auto; left: var(--hueco); top: calc(var(--hueco) + 8px); bottom: auto; z-index: 1; width: clamp(120px, 22vw, 230px); opacity: 0.9; }
.islas .isla__texto { align-self: end; gap: 14px; padding: clamp(28px, 5vw, 64px) var(--hueco); background: none; }
.islas .isla__titulo { font-size: clamp(2.3rem, 1.4rem + 3vw, 4rem); font-weight: 200; line-height: 1; color: #fff; }
.islas .isla__texto > p { max-width: 30em; color: rgb(255 255 255 / 0.88); }
.islas .isla__planes li, .islas .isla--menorca .isla__planes li {
	border: 1px solid rgb(255 255 255 / 0.35); background: rgb(255 255 255 / 0.12); color: #fff;
	-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.islas .isla .boton { margin-top: 6px; border-color: #fff; background: #fff; color: var(--tinta); }
.islas .isla .boton:hover { background: var(--verde-claro); }
/* La silueta de la isla se descubre al aparecer (solo con html.animar) */
.animar .islas.is-revelada .isla__dibujo { animation: isla-silueta 1.6s cubic-bezier(0.65, 0, 0.35, 1) 0.3s backwards; }
@keyframes isla-silueta { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (min-width: 900px) {
	.islas__rejilla { display: flex; }
	.islas .isla { flex: 1 1 0; min-height: 88vh; }
	.islas .isla:hover { flex-grow: 1.35; }
	.islas .isla__texto { padding: 56px 48px; }
}

/* ── Asesor: una conversación de WhatsApp (de ejemplo) que se escribe sola ────── */
.asesor { position: relative; overflow: hidden; background: radial-gradient(90% 120% at 100% 0%, #135b6d 0%, var(--azul-noche) 50%, var(--azul-profundo) 100%); }
.asesor__dentro { gap: 48px; padding-block: clamp(64px, 9vw, 120px); }
.asesor__titulo { max-width: 18ch; font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.6rem); font-weight: 200; line-height: 1.05; }
.asesor__acciones { margin-top: 28px; }
@media (min-width: 960px) { .asesor__dentro { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 64px; } }
.chat { width: min(100%, 420px); margin: 0 auto; overflow: hidden; border-radius: 28px; background: #ece5dc; color: var(--tinta); box-shadow: 0 30px 70px rgb(0 0 0 / 0.35); }
.chat__cabeza { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--azul-profundo); color: #fff; }
.chat__avatar { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--verde); color: var(--azul-profundo); font-family: var(--f-titulo); font-size: 0.95rem; }
.chat__quien { display: grid; line-height: 1.2; }
.chat__quien strong { font-weight: 400; }
.chat__quien small { font-size: var(--t-xs); color: #cfe8a6; }
.chat__mensajes { display: grid; grid-template-areas: "cliente" "equipo"; align-content: start; gap: 10px; min-height: 340px; padding: 18px 14px 12px; }
.chat__msg { max-width: 86%; padding: 10px 14px; border-radius: 16px; font-size: var(--t-s); line-height: 1.4; box-shadow: 0 1px 1px rgb(0 0 0 / 0.08); }
.chat__msg--cliente { grid-area: cliente; justify-self: end; border-bottom-right-radius: 4px; background: #d9fdd3; }
.chat__msg--equipo { grid-area: equipo; justify-self: start; border-bottom-left-radius: 4px; background: #fff; }
.chat__villas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 10px 0 2px; padding: 0; list-style: none; }
.chat__villas a { display: grid; gap: 4px; color: inherit; font-size: var(--t-xs); line-height: 1.15; text-decoration: none; }
.chat__villas img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; }
.chat__escribiendo { grid-area: equipo; display: none; justify-self: start; align-self: start; gap: 4px; padding: 13px 14px; border-radius: 16px; background: #fff; }
.chat__escribiendo i { width: 7px; height: 7px; border-radius: 50%; background: #9aa5a8; }
.chat__pie { padding: 0 18px 14px; font-size: var(--t-xs); color: var(--tinta-suave); text-align: center; }
/* Se escribe sola al aparecer (html.animar): el cliente, «escribiendo…», la respuesta y las tres villas */
.animar .asesor .chat__msg, .animar .asesor .chat__villas li { opacity: 0; transform: translateY(10px) scale(0.98); }
.animar .asesor.is-revelada .chat__msg--cliente { animation: chat-entra 0.5s cubic-bezier(0.2, 0.75, 0.2, 1) 0.5s forwards; }
.animar .asesor.is-revelada .chat__escribiendo { display: flex; animation: chat-escribe 1.7s ease 1.2s both; }
.animar .asesor.is-revelada .chat__escribiendo i { animation: chat-punto 0.9s ease-in-out 1.2s 2; } /* solo mientras se ve «escribiendo» (1,7 s) */
.animar .asesor.is-revelada .chat__escribiendo i:nth-child(2) { animation-delay: 1.35s; }
.animar .asesor.is-revelada .chat__escribiendo i:nth-child(3) { animation-delay: 1.5s; }
.animar .asesor.is-revelada .chat__msg--equipo { animation: chat-entra 0.5s cubic-bezier(0.2, 0.75, 0.2, 1) 2.9s forwards; }
.animar .asesor.is-revelada .chat__villas li { animation: chat-entra 0.5s cubic-bezier(0.2, 0.75, 0.2, 1) forwards; }
.animar .asesor.is-revelada .chat__villas li:nth-child(1) { animation-delay: 3.3s; }
.animar .asesor.is-revelada .chat__villas li:nth-child(2) { animation-delay: 3.5s; }
.animar .asesor.is-revelada .chat__villas li:nth-child(3) { animation-delay: 3.7s; }
@keyframes chat-entra { to { opacity: 1; transform: none; } }
@keyframes chat-escribe { 0% { opacity: 0; } 12%, 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes chat-punto { 0%, 100% { transform: translateY(0); opacity: 0.5; } 50% { transform: translateY(-3px); opacity: 1; } }

/* ── Nosotros: como una revista. Collage de fotos, entradilla grande, valores 01–04 y firma ── */
.nosotros { overflow: hidden; }
.nosotros .seccion__titulo { font-size: clamp(2.6rem, 1.4rem + 4vw, 4.6rem); font-weight: 200; line-height: 1; }
.nosotros__foto { position: relative; overflow: visible; margin: 0 6% 8% 0; border-radius: 0; }
.nosotros__foto > .nosotros__img:first-child { border-radius: 28px; }
.nosotros__img--segunda {
	position: absolute; right: -8%; bottom: -10%; width: 44%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
	border: 8px solid var(--arena); border-radius: 22px; box-shadow: var(--sombra-g);
}
.nosotros__parrafo:first-of-type { font-family: var(--f-titulo); font-size: clamp(1.35rem, 1.05rem + 0.9vw, 1.85rem); font-weight: 300; line-height: 1.35; }
.valores { counter-reset: valor; }
.valor { grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding-top: 18px; border-top: 1px solid var(--linea); counter-increment: valor; }
.nosotros .valor__icono { display: none; }
.valor::before { content: counter(valor, decimal-leading-zero); font-family: var(--f-titulo); font-size: 2rem; font-weight: 200; line-height: 1; color: var(--verde-oscuro); }
.nosotros__firma { margin-top: 30px; font-family: var(--f-titulo); font-size: 1.25rem; font-style: italic; color: var(--tinta-suave); }
.nosotros__firma::before { content: "— "; }
.animar .nosotros.is-revelada .nosotros__foto > .nosotros__img:first-child { animation: foto-descubre 1.4s cubic-bezier(0.65, 0, 0.35, 1) 0.1s backwards; }
.animar .nosotros.is-revelada .nosotros__img--segunda { animation: foto-sube 0.9s cubic-bezier(0.2, 0.75, 0.2, 1) 0.9s backwards; }
@keyframes foto-sube { from { opacity: 0; transform: translateY(30px); } }
@keyframes foto-descubre { from { clip-path: inset(100% 0 0 0 round 28px); } to { clip-path: inset(0 0 0 0 round 28px); } }

/* ── Servicios: en el móvil, tarjetas que se deslizan; en escritorio, lista grande y la foto del que señalas ── */
.servicios .servicios__lista {
	display: flex; gap: 14px; margin: 0 calc(var(--hueco) * -1); padding: 4px var(--hueco) 12px;
	overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--hueco); scrollbar-width: none;
}
.servicios .servicios__lista::-webkit-scrollbar { display: none; }
.servicios .servicio { flex: 0 0 min(72vw, 290px); scroll-snap-align: start; }
.servicio__n { display: block; margin: 16px 8px 0; font-size: var(--t-xs); letter-spacing: 0.14em; color: var(--verde-oscuro); }
.servicios .servicio__titulo { margin-top: 4px; font-weight: 300; }
.servicios .enlace-flecha { margin-top: 24px; }
@media (min-width: 1000px) {
	.servicios .servicios__lista { position: relative; display: block; min-height: 540px; margin: 0; padding: 0 calc(42% + 56px) 0 0; overflow: visible; border-top: 1px solid var(--linea); }
	.servicios .servicio { border-bottom: 1px solid var(--linea); }
	.servicios .servicio__enlace {
		display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: baseline; gap: 4px 20px;
		padding: 24px 8px; border-radius: 0; background: none; box-shadow: none; transform: none;
	}
	.servicios .servicio__enlace:hover { box-shadow: none; transform: none; }
	.servicios .servicio__enlace::after { content: "→"; grid-column: 3; grid-row: 1; font-size: 1.5rem; color: var(--verde-oscuro); opacity: 0; transform: translateX(-10px); transition: opacity 0.3s, transform 0.4s cubic-bezier(0.2, 0.75, 0.2, 1); }
	.servicios .servicio__n { grid-column: 1; grid-row: 1 / span 2; margin: 0; font-family: var(--f-titulo); font-size: 1.6rem; font-weight: 200; letter-spacing: 0; }
	.servicios .servicio__titulo { grid-column: 2; margin: 0; font-size: clamp(1.8rem, 1.2rem + 1.4vw, 2.6rem); transition: transform 0.45s cubic-bezier(0.2, 0.75, 0.2, 1), color 0.3s; }
	.servicios .servicio__texto { grid-column: 2; margin: 0; }
	.servicios .servicio__img {
		position: absolute; top: 0; right: 0; width: 42%; height: 100%; aspect-ratio: auto; border-radius: 26px;
		opacity: 0; transform: scale(1.04); pointer-events: none; transition: opacity 0.6s ease, transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);
	}
	.servicios .servicio.is-activo .servicio__img { opacity: 1; transform: none; }
	.servicios .servicio.is-activo .servicio__titulo { transform: translateX(10px); color: var(--verde-oscuro); }
	.servicios .servicio.is-activo .servicio__enlace::after { opacity: 1; transform: none; }
}

/* ── Propietarios: la foto se mueve suave al bajar (html.animar) y la caja es de vidrio ── */
.propietarios { overflow: hidden; padding-block: clamp(96px, 14vw, 180px); }
.propietarios__img { transform: scale(1.14); }
/* La foto se desplaza un poco más despacio que la página: la mueve el navegador con el scroll (sin JS por fotograma) */
@supports (animation-timeline: view()) {
	@keyframes propietarios-paralaje { from { transform: translateY(-80px) scale(1.14); } to { transform: translateY(80px) scale(1.14); } }
	.animar .propietarios__img { animation: propietarios-paralaje linear both; animation-timeline: view(); animation-range: cover; }
}
.propietarios__caja {
	border: 1px solid rgb(255 255 255 / 0.22); background: rgb(8 22 27 / 0.45);
	-webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); box-shadow: 0 30px 70px rgb(0 0 0 / 0.3);
}
.propietarios__titulo { font-size: clamp(2.4rem, 1.4rem + 3vw, 3.8rem); font-weight: 200; line-height: 1.02; }
.propietarios .boton--claro { color: var(--azul-profundo); }