/*
 * Sumbahills — estilos del theme. Maquetado sección a sección contra Figma.
 */

/* Reset mínimo ------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 400;
	line-height: var(--leading-normal);
	color: var(--color-text);
	background: var(--color-bg);
	-webkit-font-smoothing: antialiased;
}

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

a {
	color: inherit;
}

h1,
h2,
h3 {
	font-family: var(--font-display);
	font-weight: 400;
	margin: 0;
}

/* Contenedor ---------------------------------------------- */
.container {
	max-width: calc(var(--container-max) + 2 * var(--container-pad));
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

/* Header ---------------------------------------------------
 * Transparente, superpuesto al hero. Dos mitades de nav con
 * línea inferior y logo colgante en el centro.
 */
.site-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
}

.header-inner {
	display: flex;
	align-items: flex-start;
	padding-top: 9px;
}

.header-side {
	flex: 1;
	display: flex;
	align-items: center;
	height: 51px;
	border-bottom: 1.5px solid var(--color-brown);
}

.header-side--left {
	justify-content: space-between;
}

.header-side--right {
	justify-content: space-between;
}

.header-link {
	font-size: var(--text-sm);
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.header-logo {
	flex: 0 0 auto;
	width: clamp(120px, 10vw, 192px);
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 18px;
}

.header-social img {
	width: 39px;
	height: 40px;
}

.btn-whatsapp {
	display: flex;
	align-items: center;
	gap: 11px;
	width: 273px;
	height: 41px;
	padding-left: 20px;
	background: url('../img/btn-organic-header.svg?v=2') center / contain no-repeat;
	text-decoration: none;
	color: var(--color-cream);
	font-size: 24px;
	font-weight: 500;
	white-space: nowrap;
}

/* Icono de WhatsApp en blanco en el header oscuro; en el claro (--cream) se deja
   el original (regla más abajo). */
.btn-whatsapp img {
	filter: brightness(0) invert(1);
}

/* El botón de teléfono del header lleva el icono y el número "calados"
   (transparentes) horneados en el propio SVG (btn-organic-header.svg), que
   sobre el hero deja ver el paisaje a través de ellos — marrón en la portada
   y en crema vía máscara en la variante --cream (regla más abajo). Por eso
   ocultamos el icono <img> y el número <span> del HTML. */
.header-side--left .btn-whatsapp img,
.header-side--left .btn-whatsapp span {
	display: none;
}

.header-lang {
	font-size: 25px;
	font-weight: 700;
}

/* Desplegable "Elige tu sueño" -> villas ----------------------
 * El toggle es un .header-link normal; al pasar por encima (o al enfocar con
 * teclado) despliega un panel con cada villa, ancladas a su fila en la portada. */
.header-dropdown {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.header-dropdown-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.header-dropdown-caret {
	transition: transform 0.25s ease;
}

.header-dropdown:hover .header-dropdown-caret,
.header-dropdown:focus-within .header-dropdown-caret {
	transform: rotate(180deg);
}

.header-submenu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	min-width: 230px;
	background: var(--color-cream);
	border: 1.5px solid var(--color-brown);
	border-radius: 14px;
	box-shadow: 0 14px 34px rgba(101, 42, 14, 0.18);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.header-dropdown:hover .header-submenu,
.header-dropdown:focus-within .header-submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.header-submenu a {
	display: block;
	padding: 9px 22px;
	color: var(--color-brown);
	text-decoration: none;
	font-size: var(--text-sm);
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background 0.15s ease;
}

.header-submenu a:hover,
.header-submenu a:focus-visible {
	background: rgba(101, 42, 14, 0.08);
}

/* Hero ------------------------------------------------------ */
.hero {
	position: relative;
	aspect-ratio: 1920 / 1936;
	min-height: 640px;
	background: url('../img/hero-beach.webp') top center / cover no-repeat;
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.hero-claim {
	position: absolute;
	top: 33.4%;
	left: 50%;
	transform: translateX(-50%);
	width: min(92%, 1312px);
	text-align: center;
	color: var(--color-cream);
}

.hero-claim h1 {
	font-size: var(--text-hero);
	line-height: var(--leading-tight);
}

.hero-claim p {
	margin: 14px 0 0;
	font-size: var(--text-h4);
	line-height: var(--leading-tight);
}

/* Palabras para la entrada "efecto ola" (inline-block para poder trasladarlas
   verticalmente). */
.wave-word {
	display: inline-block;
	will-change: transform, opacity;
}

/* Intro (círculos de datos + claim + mapa, sobre el fondo del hero) */
.intro-datos {
	position: absolute;
	top: 54.7%;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	gap: 3.65vw;
	padding-inline: var(--container-pad);
}

.dato {
	flex: 0 0 auto;
	width: clamp(170px, 14.7vw, 282px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--color-cream);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	will-change: transform, opacity;
}

.dato p {
	margin: 0;
	padding-inline: 8%;
	color: var(--color-navy);
	text-transform: uppercase;
	font-size: clamp(0.9375rem, 1.3vw, 1.5625rem);
	line-height: 1.08;
	font-weight: 400;
}

.dato strong {
	font-weight: 700;
}

.intro-claim {
	position: absolute;
	top: 72.3%;
	left: 50%;
	transform: translateX(-50%);
	width: min(92%, 860px);
	text-align: center;
	color: var(--color-cream);
	font-size: var(--text-h2);
	line-height: var(--leading-tight);
}

.intro-map {
	position: absolute;
	top: 81.1%;
	left: 0;
	width: min(100%, 1905px);
	height: auto;
}

/* Botón orgánico (forma SVG de fondo) ------------------------ */
.btn-organic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	text-decoration: none;
	background: center / contain no-repeat;
}

.btn-organic--wide {
	background-image: url('../img/btn-organic-wide.svg');
	width: min(454px, 100%);
	height: 55px;
	color: var(--color-brown);
	font-size: clamp(1rem, 1.05vw, 1.25rem);
}

/* Sección "Descubre la isla de Sumba" ------------------------ */
/* Reveal stacked-card: dentro de cada .reveal, la card de ARRIBA (hero/planos,
   z-index mayor, opaca) se levanta con el scroll y descubre a la de ABAJO
   (sumba/contacto), que se mantiene fija detrás (pin GSAP). */
.reveal {
	position: relative;
}

.hero {
	z-index: 3;
}

.section-sumba {
	position: relative;
	z-index: 2;
	min-height: 100vh;
	margin-top: calc(-1 * var(--radius-lg));
	background: var(--color-brown);
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
	padding-top: clamp(5rem, 8.6vw, 165px);
	padding-bottom: clamp(3rem, 4vw, 77px);
	color: var(--color-beige);
}

.sumba-grid {
	display: grid;
	grid-template-columns: minmax(340px, 445px) 1fr;
	gap: clamp(2rem, 5.4vw, 104px);
	align-items: start;
}

.sumba-texto h2 {
	color: var(--color-cream);
	font-size: var(--text-h3);
	line-height: var(--leading-tight);
	margin-bottom: 10px;
}

.sumba-texto p {
	margin: 0 0 22px;
	font-size: clamp(1rem, 1.05vw, 1.25rem);
	line-height: 1.14;
	font-weight: 300;
}

.sumba-texto strong {
	font-weight: 500;
}

.sumba-texto .btn-organic {
	margin-top: 14px;
}

/* Proporciones exactas del grupo "PICS" en Figma: grande 753×769 a la
 * izquierda + columna de 3 fotos (436×245 c/u, gap 17) a la derecha; el
 * aspect-ratio del contenedor (1208/769, incluye el gap de 19) fija los
 * altos para que grande y columna coincidan en cualquier ancho. */
.sumba-pics {
	display: grid;
	grid-template-columns: 753fr 436fr;
	gap: 19px;
	aspect-ratio: 1208 / 769;
}

.sumba-pics img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--radius-md);
}

/* Que el alto del contenedor (aspect-ratio) mande sobre el tamaño
 * intrínseco de las imágenes reemplazadas. */
.sumba-pics > *,
.sumba-pics-col > * {
	min-height: 0;
}

.sumba-pics-col {
	display: grid;
	grid-template-rows: repeat(3, 1fr);
	gap: 17px;
}

/* Sección villas ("Elige tu sueño") --------------------------- */
.section-villas {
	position: relative;
	z-index: 1; /* descubierta por sumba al levantarse */
	background: var(--color-cream);
	padding-top: clamp(3rem, 4.7vw, 90px);
	padding-bottom: clamp(3rem, 5vw, 96px);
}

.section-heading {
	display: flex;
	align-items: center;
	gap: 40px;
	color: var(--color-brown);
	font-size: var(--text-h3);
	line-height: var(--leading-tight);
	text-align: center;
	white-space: nowrap;
}

.section-heading::before,
.section-heading::after {
	content: '';
	flex: 1;
	border-top: 1.5px solid var(--color-brown);
}

.villa-row {
	display: grid;
	grid-template-columns: minmax(300px, 420px) 1fr;
	gap: clamp(2rem, 3vw, 58px);
	/* Alinea por abajo: el botón (final de la info) queda a ras del borde
	 * inferior de las fotos, y el título —más alto— sobresale por encima
	 * del borde superior de las fotos (frame Figma 17:321). */
	align-items: end;
	padding-block: clamp(3rem, 4.8vw, 92px);
	/* Aire al saltar desde el desplegable del header (anclas de villa). */
	scroll-margin-top: 90px;
}

.villa-row + .villa-row {
	border-top: 1.5px solid var(--color-brown);
}

.villa-row--reverse .villa-info {
	order: 2;
}

/* En las filas invertidas (imágenes a la izquierda) hay que intercambiar
 * también el ancho de las columnas: el carrusel debe ir en la ancha (1fr),
 * no en la estrecha, o solo se ve ~1,5 tarjeta. */
.villa-row--reverse {
	grid-template-columns: 1fr minmax(300px, 420px);
}

.villa-row--green {
	color: var(--color-green);
}

.villa-row--brown {
	color: var(--color-brown);
}

.villa-title {
	font-size: var(--text-h2);
	line-height: 0.9;
}

.villa-tagline {
	margin: 10px 0 0;
	font-size: var(--text-base);
	font-weight: 500;
	letter-spacing: 0.32em;
	text-transform: lowercase;
}

.villa-desc {
	margin-top: 12px;
	max-width: 330px;
}

.villa-desc p {
	margin: 0 0 10px;
	font-size: var(--text-base);
	font-weight: 300;
	line-height: 1.18;
}

.villa-price {
	margin: 26px 0 0;
	font-family: var(--font-display);
	line-height: 1;
}

.villa-price-prefix {
	display: block;
	font-size: var(--text-h4);
	line-height: 1.3;
}

.villa-price-amount {
	display: block;
	font-size: var(--text-price);
}

.villa-nota {
	margin: 12px 0 0;
	font-size: var(--text-base);
	font-weight: 600;
}

.villa-cta {
	margin-top: 24px;
	width: min(326px, 100%);
	height: 55px;
	color: var(--color-beige);
	font-size: clamp(1rem, 1.05vw, 1.25rem);
}

.villa-row--brown .villa-cta {
	background-image: url('../img/villas/btn-organic-brown.svg');
}

.villa-row--green .villa-cta {
	background-image: url('../img/villas/btn-organic-green.svg');
}

/* Zoom suave al pasar el ratón por las fotos tipo card (slides de villas,
 * planos-foto, fotos de Sumba/joya, foto grande de la ficha). Solo con puntero
 * fino y sin reduced-motion. Se usa `scale` y NO `transform`: varias de estas
 * imágenes llevan transforms inline de GSAP (fades de entrada) que pisarían
 * un transform de hover; `scale` es independiente y se compone con ellos. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.villa-slide,
	.planos-grid:not(.planos-grid--villa) .plano,
	.joya-foto,
	.sumba-pic-big,
	.sumba-pics-col img,
	.ficha-foto-grande {
		transition: scale 0.3s ease;
	}

	.villa-slide:hover,
	.planos-grid:not(.planos-grid--villa) .plano:hover,
	.joya-foto:hover,
	.sumba-pic-big:hover,
	.sumba-pics-col img:hover,
	.ficha-foto-grande:hover {
		scale: 1.04;
		/* Por encima de sus hermanos: si no, el slide siguiente (posterior en
		   el DOM) taparía el borde derecho de la card ampliada. */
		z-index: 1;
	}
}

/* Slider horizontal con scroll nativo */
.villa-slider {
	display: flex;
	gap: 23px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding-bottom: 18px;
	scrollbar-color: currentColor transparent;
	scrollbar-width: thin;
}

/* Carrusel de villas en portada: contenedor recortado con esquinas redondeadas
   (frame Figma 17:322). El scroll nativo se OCULTA y se usa una barra propia
   (.villa-scrollbar), que replica el asset slider-track.svg (pista fina + thumb),
   separada de las fotos y sin alterar el alineado del botón. */
.villa-row .villa-slider {
	border-radius: var(--radius-md);
	/* overflow-x lo hereda de .villa-slider (auto). Fijamos overflow-y en hidden:
	 * si no, el navegador lo pone en 'auto' y el slider captura el scroll vertical
	 * de la rueda, cortando el scroll de toda la página. */
	overflow-y: hidden;
	/* Anula el padding-bottom:18px de la regla base: si no, el contenedor mide más
	 * que las fotos y su esquina redondeada inferior cae por debajo, dejando la
	 * imagen cortada con la esquina inferior-derecha recta. */
	padding-bottom: 0;
	scrollbar-width: none;              /* Firefox: oculta el scroll nativo */
}

.villa-row .villa-slider::-webkit-scrollbar {
	display: none;                      /* Chrome/Safari: oculta el scroll nativo */
}

/* Columna del carrusel: es el item del grid (ancla la barra propia). El slider
   define su altura; la barra va debajo (absolute) para no empujar el botón. */
.villa-slider-wrap {
	position: relative;
	min-width: 0;
}

/* Barra de scroll propia. Medidas/colores de slider-track.svg:
   pista 1.5px marrón .3 a todo el ancho; thumb 4px marrón sólido. */
.villa-scrollbar {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	margin-top: 28px;
	height: 4px;
	background: linear-gradient(rgba(101, 42, 14, 0.3) 0 0) no-repeat left center / 100% 1.5px;
}

.villa-scrollbar-thumb {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;                           /* lo calcula el JS según scroll */
	height: 4px;
	border-radius: 2px;
	background: var(--color-brown);
	cursor: grab;
}

.villa-scrollbar-thumb:active {
	cursor: grabbing;
}

/* Filas verdes: barra de scroll en verde corporativo, a juego con el esquema. */
.villa-row--green .villa-scrollbar {
	background: linear-gradient(rgba(16, 74, 62, 0.3) 0 0) no-repeat left center / 100% 1.5px;
}

.villa-row--green .villa-scrollbar-thumb {
	background: var(--color-green);
}

/* La lupa "+" va a ras de la esquina inferior derecha (recorte crema flush),
   como en el render de Figma; NO debe sobresalir en las miniaturas pequeñas. */
.villa-row .villa-zoom {
	right: 0;
	bottom: 0;
}


.villa-slide {
	position: relative;
	flex: 0 0 auto;
	width: clamp(260px, 19.2vw, 368px);
	aspect-ratio: 368 / 356;
	margin: 0;
	scroll-snap-align: start;
}

/* Solo la foto (hijo directo del figure), NO el icono de la lupa —que es
   first-child de su <a> y quedaba redondeado como un círculo por error. */
.villa-slide > img,
.villa-slide .attachment-large {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--radius-md);
}

.villa-zoom {
	position: absolute;
	right: -4px;
	bottom: -6px;
	width: 48px;
	height: 49px;
}

.villa-zoom img {
	width: 100%;
	height: 100%;
}

/* Sección planos ("Donde nace SumbaHills") -------------------- */
.section-planos {
	position: relative;
	z-index: 2;
	min-height: 100vh;
	background: var(--color-cream);
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
	padding-block: clamp(3rem, 3vw, 56px);
	color: var(--color-brown);
}

.planos-head {
	/* La línea superior no ocupa el ancho completo: se limita al contenido
	   (mismo ancho que planos y textos), no al viewport. */
	border-top: 1.5px solid var(--color-brown);
	padding-top: clamp(3rem, 3vw, 56px);
	text-align: center;
	margin-bottom: clamp(2rem, 2.5vw, 49px);
}

.planos-head p {
	margin: 0 0 10px;
	font-size: var(--text-h4);
	line-height: 1;
}

.planos-head h2 {
	font-size: var(--text-hero);
	line-height: 0.9;
}

.planos-grid {
	display: grid;
	grid-template-columns: 62fr 38fr;
	gap: 25px;
}

.plano {
	position: relative;
	margin: 0;
	aspect-ratio: auto;
}

.plano > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--radius-md);
	aspect-ratio: 1083 / 615;
}

.planos-grid .plano:last-child > img {
	aspect-ratio: 664 / 615;
}

/* La barra propia de los planos es SOLO móvil (la tira con scroll horizontal);
   en desktop el grid puede desbordar unos px por subpíxel y el JS la mostraría. */
.planos-wrap .villa-scrollbar {
	display: none;
}

/* Ficha de villa: plano de planta (vertical, izq) + alzado (apaisado, dcha),
   centrados verticalmente. Proporciones del Figma (34:956): 447 y 1090 de ancho. */
.planos-grid--villa {
	grid-template-columns: 447fr 1090fr;
	align-items: center;
	gap: clamp(2rem, 4vw, 76px);
}

.planos-grid--villa .plano > img,
.planos-grid--villa .plano:last-child > img {
	width: 100%;
	height: auto;
	aspect-ratio: auto;      /* respeta la proporción real del dibujo */
	object-fit: contain;
	border-radius: 0;        /* son dibujos de línea, sin recorte redondeado */
}

/* En la ficha de villa, la sección de planos va pegada a la ficha sin la línea
   separadora superior (que sí se usa en otras páginas). */
.single-villa .section-planos {
	border-top: 0;
}

/* Sección contacto -------------------------------------------- */
.section-contacto {
	position: relative;
	z-index: 1;
	min-height: 100vh;
	margin-top: calc(-1 * var(--radius-lg));
	background: var(--color-green);
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
	padding-top: clamp(2rem, 3.5vw, 68px);
	padding-bottom: clamp(2.5rem, 4vw, 80px);
}

.contacto-card {
	background: var(--color-cream);
	border-radius: var(--radius-md);
	display: grid;
	/* Formulario proporcional (1042 sobre los 1671 útiles del diseño): con
	   1042px fijos, en portátil la columna del título colapsaba a su mínimo
	   y "La vida que imaginas..." rompía palabra a palabra. */
	grid-template-columns: minmax(300px, 1fr) minmax(0, 62.4%);
	gap: clamp(2rem, 4.4vw, 84px);
	padding: 36px 32px 38px clamp(1.5rem, 3.5vw, 67px);
}

.contacto-info {
	padding-top: 57px;
	color: var(--color-green);
}

.contacto-info h2 {
	font-size: var(--text-h2);
	line-height: var(--leading-tight);
	color: var(--color-green);
}

.contacto-mail {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 54px 0 0;
	font-size: var(--text-md);
	font-weight: 500;
}

.contacto-mail a {
	text-decoration: none;
}

.contacto-tel {
	display: inline-flex;
	align-items: center;
	gap: 15px;
	margin-top: 23px;
	padding: 7px 24px 7px 15px;
	border: 1.5px solid var(--color-green);
	border-radius: 20px;
	text-decoration: none;
	font-size: var(--text-md);
	font-weight: 500;
}

.contacto-socials {
	display: block;
	margin-top: clamp(3rem, 6vw, 126px);
}

.contacto-form {
	background: var(--color-green);
	border-radius: var(--radius-md);
	padding: clamp(2rem, 3vw, 57px) clamp(1.5rem, 2.8vw, 53px) clamp(2rem, 2.4vw, 46px);
	color: var(--color-cream);
}

.contacto-form h3 {
	font-size: var(--text-h4);
	line-height: 1.15;
	color: var(--color-cream);
}

.form-aviso {
	margin: 20px 0 0;
	padding: 12px 16px;
	border-radius: var(--radius-sm);
	font-size: 1rem;
}

.form-aviso--ok {
	background: var(--color-cream);
	color: var(--color-green);
}

.form-aviso--error {
	background: #f3d1c4;
	color: var(--color-brown);
}

.sh-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.form-opciones {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: clamp(2rem, 3.3vw, 64px) 0 0;
	padding: 0;
	border: 0;
}

.form-opcion input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.form-opcion span {
	display: inline-block;
	padding: 14px 24px;
	border: 1.5px solid var(--color-beige);
	border-radius: var(--radius-sm);
	color: var(--color-beige);
	font-size: var(--text-md);
	font-weight: 300;
	cursor: pointer;
	transition: background var(--transition), color var(--transition);
}

.form-opcion input:checked + span {
	background: var(--color-cream);
	border-color: var(--color-cream);
	color: var(--color-green);
	font-weight: 400;
}

.form-opcion input:focus-visible + span {
	outline: 2px solid var(--color-beige);
	outline-offset: 2px;
}

.form-campo {
	margin: clamp(1.5rem, 2.4vw, 44px) 0 0;
	max-width: 910px;
}

.form-campo label {
	display: block;
	font-size: var(--text-md);
	font-weight: 300;
}

.form-campo input {
	display: block;
	width: 100%;
	margin-top: 2px;
	padding: 4px 0 10px;
	background: transparent;
	border: 0;
	border-bottom: 1.5px solid var(--color-cream);
	color: var(--color-cream);
	font-family: var(--font-body);
	font-size: var(--text-md);
}

.form-campo input:focus {
	outline: none;
	border-bottom-width: 2.5px;
}

.form-enviar {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	margin-top: clamp(2.5rem, 3vw, 58px);
	padding: 15px 32px 15px 17px;
	background: var(--color-cream);
	border: 0;
	border-radius: 31px;
	color: var(--color-green);
	font-family: var(--font-body);
	font-size: var(--text-md);
	font-weight: 500;
	cursor: pointer;
}

/* Pill de garantía (a caballo entre contacto y footer) -------- */
.garantia {
	position: relative;
	z-index: 3;
	margin: -36px 0;
	display: flex;
	justify-content: center;
	padding-inline: var(--container-pad);
}

.garantia p {
	margin: 0;
	min-height: 72px;
	max-width: 100%;
	display: flex;
	flex-wrap: nowrap;           /* una sola línea (en móvil se permite envolver) */
	align-items: center;
	justify-content: center;
	gap: 0.45em;
	padding: 10px 48px;
	background: var(--color-terracotta);
	border-radius: var(--radius-pill);
	color: var(--color-beige);
	font-size: clamp(1rem, 1.56vw, 1.875rem);
	text-align: center;
	white-space: nowrap;
}

.garantia-light {
	font-weight: 300;
}

.garantia p strong {
	font-weight: 600;
}

.garantia-brand {
	font-family: var(--font-garamond);
	font-weight: 700;
}

/* Footer ------------------------------------------------------- */
.site-footer {
	background: var(--color-cream);
	color: var(--color-brown);
}

.footer-inner {
	display: flex;
	gap: clamp(3rem, 8vw, 150px);
	padding-block: 60px 19px;
}

.footer-logo {
	flex: 0 0 auto;
}

.footer-logo img {
	width: clamp(220px, 19.2vw, 368px);
}

.footer-main {
	flex: 1;
	max-width: 827px;
	display: flex;
	flex-direction: column;
}

.footer-cols {
	display: flex;
	justify-content: space-between;
	gap: var(--space-8);
}

.footer-col h4 {
	margin: 0 0 10px;
	font-size: 1.125rem;
	font-weight: 500;
}

.footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-col li {
	margin-bottom: 5px;
}

.footer-col a {
	text-decoration: none;
	font-size: var(--text-xs);
	line-height: 1.45;
	opacity: 0.75;
}

.footer-col a:hover {
	opacity: 1;
}

.footer-bottom {
	margin-top: auto;
	padding-top: var(--space-12);
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 40px; /* redes pegadas al copyright, como en Figma (no a los extremos) */
}

.footer-bottom p {
	margin: 0;
	font-size: var(--text-2xs);
}

/* Header variante crema (páginas con hero oscuro) -------------- */
.site-header--cream .header-side {
	border-color: var(--color-cream);
}

.site-header--cream .header-link,
.site-header--cream .header-lang {
	color: var(--color-cream);
}

/* Logo en blanco sobre el hero oscuro (los iconos sociales ya vienen
   coloreados para fondo oscuro, no necesitan filtro). */
.site-header--cream .header-logo img {
	filter: brightness(0) invert(1);
}

/* Botón calado como en la portada pero en crema: el MISMO SVG (forma con
   icono y número recortados) usado como máscara sobre color plano, así el
   cielo del hero se ve a través del calado sin duplicar el SVG. */
.site-header--cream .header-side--left .btn-whatsapp {
	background: var(--color-cream);
	-webkit-mask: url('../img/btn-organic-header.svg?v=2') center / contain no-repeat;
	mask: url('../img/btn-organic-header.svg?v=2') center / contain no-repeat;
}

/* En el header claro el icono del botón móvil conserva su color original. */
.site-header--cream .btn-whatsapp img {
	filter: none;
}

/* Página "Descubre la isla de Sumba" --------------------------- */
/* Doble clase para ganar a la regla genérica .page .site-main. */
.page.page-descubre .site-main {
	padding-top: 0;
}

.dsumba-hero {
	position: relative;
	z-index: 2;
	background: url('../img/descubre-sumba.webp') center / cover no-repeat;
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
	padding-top: clamp(250px, 15.9vw, 305px);
	padding-bottom: clamp(3rem, 4.6vw, 88px);
}

.dsumba-panel {
	position: relative;
	color: var(--color-green);
	padding: clamp(2.5rem, 4.2vw, 80px) clamp(1.5rem, 2.6vw, 49px) clamp(2rem, 3.8vw, 72px);
	/* Panel troquelado (frame Figma 32:903 "Subtract"): la forma crema con la
	   ventana recortada va como IMAGEN DE FONDO (no como máscara), para que el
	   hueco deje ver el hero detrás PERO el contenido (miniaturas, texto) NO se
	   recorte. Mantiene la proporción del diseño para que el recorte no se deforme. */
	aspect-ratio: 1770 / 1439;
	background: url('../img/dsumba-panel-shape.svg') top center / 100% 100% no-repeat;
}

.dsumba-intro h1 {
	font-size: var(--text-hero);
	line-height: 0.79;
	color: var(--color-green);
}

.dsumba-texto {
	margin-top: clamp(1.5rem, 1.7vw, 33px);
	/* La columna crema del troquel acaba en el 32,9% del panel (x=582 del SVG):
	   el ancho del texto debe escalar con él o invade la ventana en portátil
	   (482/1920 ≈ 25vw). */
	max-width: min(482px, 25vw);
}

.dsumba-texto p {
	margin: 0 0 clamp(12px, 1.15vw, 22px);
	/* Escala con el panel troquelado (20px en el diseño de 1920): con tamaño
	   fijo el texto no cabe en la columna crema en portátil. */
	font-size: clamp(0.8125rem, 1.04vw, 1.25rem);
	font-weight: 300;
	line-height: 1.1;
}

.dsumba-texto strong {
	font-weight: 500;
}

.dsumba-lema {
	/* Pegado a las fotos: posición del diseño (y805 de 1439 ≈ 56%), justo encima
	   del slider (65,2%), en lugar de quedar arriba por el flujo del texto. */
	position: absolute;
	left: 2.77%;
	top: 56%;
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--text-h3);
	line-height: 1;
	color: var(--color-green);
}

.dsumba-mapa {
	position: absolute;
	right: clamp(1rem, 2.5vw, 48px);
	bottom: clamp(90px, 8vw, 150px);
	/* 371/1920 ≈ 19.3vw: más ancho invade el carrusel en portátil. */
	width: min(371px, 19.3vw);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(20px, 1.9vw, 36px);
	text-decoration: none;
}

.dsumba-mapa-icono {
	width: clamp(80px, 6.1vw, 117px);
	height: auto;
}

.dsumba-mapa-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.35em;
	width: 100%;
	min-height: 41px;
	padding: 8px 16px;
	background: var(--color-green);
	border-radius: 20px;
	color: var(--color-cream);
	/* Suelo bajo (0.72rem): con nowrap, el texto debe caber en la pill ya
	   estrechada de portátil. */
	font-size: clamp(0.72rem, 0.9vw, 1.0625rem);
	text-transform: uppercase;
	text-align: center;
	white-space: nowrap;
}

/* Columna del carrusel dentro del panel de proporción fija, justo DEBAJO de la
 * ventana del troquel (~64%). Porcentajes del diseño (frame 32:957). */
.dsumba-slider-wrap {
	position: absolute;
	left: 2.77%;
	top: 65.2%;
	width: 72.5%;
}

.dsumba-slider {
	margin: 0;
	/* El contenedor redondea sus esquinas: las miniaturas parciales de los extremos
	 * se recortan REDONDEADAS al hacer scroll. padding-bottom:0 → contenedor = alto
	 * de miniatura; overflow-y:hidden → no captura el scroll vertical de la página. */
	border-radius: var(--radius-md);
	padding-bottom: 0;
	overflow-y: hidden;
	scrollbar-width: none;
}

.dsumba-slider::-webkit-scrollbar {
	display: none;
}

/* Lupa a ras de la esquina para que el recorte del slider no la corte raro. */
.dsumba-slider .villa-zoom {
	right: 0;
	bottom: 0;
}

/* Barra de scroll propia VERDE bajo las miniaturas (separación adecuada). */
.dsumba-slider-wrap .villa-scrollbar {
	/* A media altura entre el fondo de las fotos y el borde inferior del panel.
	   Escala con el ancho (panel de proporción fija) para mantenerse centrada. */
	margin-top: clamp(2rem, 3.8vw, 72px);
	background: linear-gradient(rgba(16, 74, 62, 0.3) 0 0) no-repeat left center / 100% 1.5px;
}

.dsumba-slider-wrap .villa-scrollbar-thumb {
	background: var(--color-green);
}


@media (max-width: 1200px) {
	/* La pill del mapa ya no cabe en una línea dentro del panel: deja envolver. */
	.dsumba-mapa-btn {
		white-space: normal;
	}
}

@media (max-width: 900px) {
	/* En móvil el panel se apila en vertical: sin troquel apaisado. */
	.dsumba-panel {
		aspect-ratio: auto;
		background: var(--color-cream);
		border-radius: var(--radius-lg);
	}

	/* Sin troquel no hay columna crema que respetar: se anulan el ancho y la
	   fuente proporcionales de portátil (aquí dejaban el texto en ~25vw). */
	.dsumba-texto {
		max-width: none;
	}

	.dsumba-texto p {
		font-size: var(--text-md);
	}

	.dsumba-slider-wrap {
		position: static;
		width: auto;
		margin-top: clamp(2rem, 3vw, 56px);
	}

	.dsumba-lema {
		position: static;
		margin: clamp(1.5rem, 2vw, 40px) 0 0;
	}
}

/* Sección "Una joya en el archipiélago" ------------------------ */
.dsumba-joya {
	padding-top: clamp(3rem, 4.6vw, 88px);
	color: var(--color-brown);
	overflow: hidden;
}

.joya-head {
	text-align: center;
	margin-bottom: clamp(3rem, 5vw, 96px);
}

.joya-head p {
	margin: 0 0 10px;
	font-size: var(--text-h4);
	line-height: 1;
}

.joya-head h2 {
	font-size: var(--text-hero);
	line-height: 0.79;
}

.joya-bloque {
	display: grid;
	grid-template-columns: minmax(0, 50.2%) 1fr;
	gap: clamp(2rem, 4vw, 78px);
	align-items: center;
	margin-bottom: clamp(4rem, 8.6vw, 166px);
}

.joya-bloque--invertido {
	grid-template-columns: 1fr minmax(0, 50.2%);
}

.joya-bloque--invertido .joya-foto {
	order: 2;
}

.joya-foto {
	margin: 0;
}

.joya-foto img {
	width: 100%;
	height: 100%;
	aspect-ratio: 963 / 547;
	object-fit: cover;
}

.joya-foto--izq img {
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.joya-foto--der img {
	border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.joya-datos {
	max-width: 709px;
	padding-right: var(--container-pad);
}

.joya-bloque--invertido .joya-datos {
	justify-self: end;
	padding-right: 0;
	padding-left: var(--container-pad);
}

.joya-cifra {
	margin: 0 0 46px;
	padding-left: 40px;
	border-left: 1.5px solid var(--color-brown);
	font-size: clamp(2.5rem, 4.2vw, 5rem);
	line-height: 1;
}

.joya-cifra span {
	display: block;
	font-size: var(--text-md);
	line-height: 2.1;
}

.joya-datos > p:not(.joya-cifra) {
	margin: 0 0 22px;
	font-size: var(--text-md);
	font-weight: 300;
	line-height: 1.1;
}

.joya-datos strong {
	font-weight: 500;
}

/* Sección "Una isla de experiencias" --------------------------- */
.dsumba-actis {
	position: relative;
	/* Opaca y por encima del contacto: medios mide menos que un viewport, así
	   que el contacto (tirado -100vh para la cortina medios→contacto) asoma
	   por encima de medios y, sin esto, cortaba las tarjetas por debajo. */
	z-index: 2;
	background: var(--color-bg);
	padding-block: clamp(3rem, 5vw, 96px) clamp(4rem, 9vw, 172px);
	color: var(--color-green);
}

.actis-grid {
	display: grid;
	/* Ancho DEFINIDO para la columna del título (560/1770 del diseño): con
	   minmax()+1fr la columna colapsaba a su mínimo y "experiencias" (que a
	   --text-hero mide ~0.28 del contenedor) se montaba sobre la 1ª tarjeta. */
	grid-template-columns: clamp(280px, 31.6%, 560px) 1fr;
	gap: clamp(2rem, 4vw, 78px);
	align-items: center;
}

.actis-texto h2 {
	font-size: var(--text-hero);
	line-height: 0.79;
	color: var(--color-green);
}

.actis-texto p {
	margin: 28px 0 0;
	font-size: var(--text-md);
	font-weight: 300;
	line-height: 1.1;
	max-width: 560px;
}

.actis-texto strong {
	font-weight: 500;
}

.actis-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/* minmax(0,1fr): sin el mínimo a cero, el aspect-ratio de las tarjetas fija
	   su ancho mínimo y la fila desborda el contenedor en portátil. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 2.4vw, 46px);
}

.actis-cards li {
	position: relative;
	border: 1.5px solid var(--color-green);
	border-radius: var(--radius-md);
	aspect-ratio: 328 / 571;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(2rem, 4vw, 90px);
	padding: clamp(1.5rem, 2.2vw, 42px);
	text-align: center;
}

.actis-cards img {
	/* Misma ALTURA para los tres iconos (surf/tortuga/pala) → tamaño homogéneo;
	   el ancho se ajusta a cada uno (como en el Figma, alturas ~iguales). */
	height: clamp(80px, 6.4vw, 126px);
	width: auto;
}

.actis-cards p {
	margin: 0;
	font-size: var(--text-md);
	line-height: 1.1;
}

/* Sección "Sumba en los medios" -------------------------------- */
.dsumba-medios {
	position: relative;
	/* Por encima del contacto (z1, posterior en el DOM): es la card de ARRIBA
	   de la cortina medios→contacto. */
	z-index: 2;
	background: var(--color-brown);
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
	/* Más aire abajo para dejar margen bajo la barra de scroll horizontal. */
	padding-block: clamp(3rem, 4vw, 76px) clamp(5rem, 8vw, 158px);
	color: var(--color-cream);
}

.medios-head {
	text-align: center;
	margin-bottom: clamp(3rem, 4.2vw, 81px);
}

.medios-head p {
	margin: 0 0 10px;
	font-size: var(--text-h4);
	line-height: 1;
}

.medios-head h2 {
	font-size: var(--text-hero);
	line-height: 0.79;
	color: var(--color-cream);
}

.medios-strip {
	display: flex;
	overflow-x: auto;
	overflow-y: hidden;
	padding-bottom: 18px;
	scrollbar-width: none;               /* oculta scroll nativo: usamos barra propia */
}

.medios-strip::-webkit-scrollbar {
	display: none;
}

/* Barra de scroll horizontal propia (crema sobre el fondo marrón), centrada. */
.medios-wrap .villa-scrollbar {
	width: min(1281px, 68%);
	left: 0;
	right: 0;
	margin-inline: auto;
	margin-top: clamp(2rem, 3vw, 44px);
	background: linear-gradient(rgba(246, 245, 240, 0.35) 0 0) no-repeat left center / 100% 1.5px;
}

.medios-wrap .villa-scrollbar-thumb {
	background: var(--color-cream);
}

.medios-cita {
	flex: 0 0 auto;
	width: min(80vw, 486px);
	margin: 0;
	padding: 40px clamp(2rem, 3.8vw, 73px);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	text-align: center;
}

.medios-cita + .medios-cita {
	border-left: 1.5px solid var(--color-cream);
}

/* Logo del medio: altura uniforme, centrado; el ancho se ajusta a cada uno. */
.medios-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 69px;
}

.medios-logo img {
	width: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.medios-cita p {
	margin: 0;
	font-size: var(--text-md);
	line-height: 1.1;
}

/* Ficha individual de villa ------------------------------------ */
/* En páginas sin hero el header absoluto necesita aire debajo.
 * La portada (.home) y Descubre Sumba tienen hero a sangre, así que se excluyen. */
.page:not(.home):not(.page-descubre) .site-main,
.error404 .site-main {
	padding-top: 150px;
}

.villa-ficha {
	padding-top: clamp(250px, 15.3vw, 294px);
	color: var(--color-brown);
}

.ficha-lema {
	font-size: var(--text-h2);
	line-height: 0.8;
	text-align: center;
	margin-bottom: clamp(3rem, 5.8vw, 111px);
}

.ficha-grid {
	display: grid;
	grid-template-columns: minmax(0, 58%) 1fr;
	gap: clamp(2rem, 3.2vw, 62px);
	/* La info se estira a la altura del marco de fotos y sus cajas se alinean
	   abajo (ver .ficha-info + .ficha-precio), para que el borde del marco no
	   sobresalga por debajo. */
	align-items: stretch;
}

.ficha-info {
	display: flex;
	flex-direction: column;
}

/* Marco de fotos que sangra hasta el borde izquierdo de la página */
/* min-width 0: sin él, el slider anidado fuerza la anchura de la columna */
.ficha-fotos,
.ficha-info {
	min-width: 0;
}

.ficha-fotos {
	border: 1.5px solid var(--color-brown);
	border-left: 0;
	border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
	margin-left: calc(-1 * var(--container-pad));
	padding: 25px 26px 28px var(--container-pad);
}

.ficha-foto-grande {
	position: relative;
	margin: 0 0 30px;
}

.ficha-foto-grande > img {
	width: 100%;
	height: auto;
	aspect-ratio: 1025 / 917;
	object-fit: cover;
	border-radius: var(--radius-md);
}

.ficha-fotos .villa-slider {
	margin: 0;
	/* Recorta las miniaturas parciales con esquinas redondeadas al hacer scroll
	   (igual que la home): border-radius + overflow-y:hidden + padding-bottom:0. */
	border-radius: var(--radius-md);
	padding-bottom: 0;
	overflow-y: hidden;
	scrollbar-width: none;
}

.ficha-fotos .villa-slider::-webkit-scrollbar {
	display: none;
}

.ficha-fotos .villa-slider .villa-zoom {
	right: 0;
	bottom: 0;
}

/* Info: título + cajas que sangran hasta el borde derecho */
.ficha-titulo {
	font-size: var(--text-hero);
	line-height: 0.82;
}

.ficha-tagline {
	margin: 30px 0 0;
	font-size: clamp(1.25rem, 1.8vw, 2.1875rem);
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: lowercase;
}

.ficha-desc {
	margin-top: 18px;
	max-width: 460px;
}

.ficha-desc p {
	margin: 0 0 10px;
	font-size: var(--text-md);
	font-weight: 300;
	line-height: 1.15;
}

.ficha-precio {
	display: flex;
	align-items: center;
	gap: 24px;
	/* margin-top:auto empuja el precio y las cajas siguientes a la parte baja. */
	margin: auto 0 0;
	margin-right: calc(-1 * var(--container-pad));
	padding: 10px 16px;
	border: 1.5px solid var(--color-brown);
	border-right: 0;
	border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.ficha-precio-prefijo {
	font-size: var(--text-md);
	font-weight: 500;
	text-transform: uppercase;
}

.ficha-precio-cifra {
	font-size: var(--text-price);
	font-weight: 300;
	line-height: 1;
}

.ficha-incluye {
	list-style: none;
	margin: 24px 0 0;
	margin-right: calc(-1 * var(--container-pad));
	padding: clamp(1.5rem, 2.4vw, 47px) 24px clamp(1.5rem, 2.4vw, 47px) clamp(1.5rem, 1.7vw, 33px);
	border: 1.5px solid var(--color-brown);
	border-right: 0;
	border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.ficha-incluye li {
	font-size: clamp(1.0625rem, 1.3vw, 1.5625rem);
	line-height: 1;
	margin-bottom: clamp(14px, 1.3vw, 25px);
}

.ficha-incluye li::before {
	content: '-  ';
}

.ficha-incluye li:last-child {
	margin-bottom: 0;
}

.ficha-features {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(2rem, 3.5vw, 69px) 1rem;
	margin: 24px 0 0;
	margin-right: calc(-1 * var(--container-pad));
	padding: clamp(2rem, 3vw, 58px) 24px clamp(2rem, 3vw, 59px) clamp(1.5rem, 2.75vw, 53px);
	border: 1.5px solid var(--color-brown);
	border-right: 0;
	border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.ficha-features li {
	display: flex;
	align-items: center;
	gap: 21px;
}

.ficha-feature-icono {
	flex: 0 0 auto;
	width: clamp(72px, 5.3vw, 102px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: rgba(101, 42, 14, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
}

.ficha-feature-icono img {
	width: 62%;
}

.ficha-feature-nombre {
	font-size: clamp(1rem, 1.05vw, 1.25rem);
	font-weight: 700;
	line-height: 1.1;
	text-transform: uppercase;
	max-width: 9em;
}

.villa-cta--ficha {
	margin-top: clamp(2rem, 2.5vw, 48px);
	background-image: url('../img/villas/btn-organic-brown.svg');
}

/* Aire vertical en los carruseles para el zoom de hover: sin él, la card
   ampliada se recorta contra el overflow del contenedor y el efecto parece un
   zoom interno de la imagen. El margen negativo compensa el padding para no
   alterar el layout. 8px cubren el 4% de la card más alta y conservan casi
   todo el arco del recorte redondeado (radio 20px) de los slides parciales. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.villa-row .villa-slider,
	.ficha-fotos .villa-slider,
	.dsumba-slider {
		padding-block: 8px;
		margin-block: -8px;
	}
}

/* Lightbox ----------------------------------------------------- */
.lb[hidden] {
	display: none;
}

.lb {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(0.5rem, 2vw, 2rem);
	background: rgba(14, 35, 49, 0.93);
	padding: clamp(0.75rem, 3vw, 3rem);
}

.lb-open,
.lb-open body {
	overflow: hidden;
}

.lb-stage {
	margin: 0;
	max-width: min(1200px, 84vw);
	text-align: center;
}

.lb-stage img {
	max-width: 100%;
	max-height: 84vh;
	width: auto;
	height: auto;
	margin-inline: auto;
	border-radius: var(--radius-md);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

/* Planos: fondo blanco tras el dibujo (línea sobre transparente). */
.lb--light .lb-stage img {
	background: #fff;
}

.lb-count {
	margin-top: 14px;
	color: var(--color-cream);
	font-family: var(--font-body);
	font-size: 0.9375rem;
	letter-spacing: 0.1em;
}

.lb-close,
.lb-arrow {
	background: none;
	border: 0;
	color: var(--color-cream);
	cursor: pointer;
	line-height: 1;
	padding: 8px;
	transition: opacity var(--transition);
}

.lb-close:hover,
.lb-arrow:hover {
	opacity: 0.7;
}

.lb-close {
	position: absolute;
	top: 18px;
	right: 24px;
	font-size: 3rem;
	font-family: var(--font-body);
	font-weight: 300;
}

.lb-arrow {
	font-size: clamp(3rem, 5vw, 4.5rem);
	font-family: var(--font-body);
	font-weight: 300;
	flex: 0 0 auto;
}

@media (max-width: 700px) {
	.lb-arrow {
		position: absolute;
		bottom: 12px;
	}

	.lb-prev {
		left: 18%;
	}

	.lb-next {
		right: 18%;
	}

	.lb-stage {
		max-width: 94vw;
	}

	.lb-stage img {
		max-height: 74vh;
	}
}

/* Móvil (sin diseño móvil en Figma: adaptación provisional) --- */
@media (max-width: 1700px) {
	.btn-whatsapp {
		width: 210px;
		height: 32px;
		font-size: 17px;
		padding-left: 15px;
		gap: 8px;
	}

	.btn-whatsapp img {
		width: 18px;
		height: 18px;
	}

	.header-social img {
		width: 30px;
		height: 31px;
	}

	.header-actions {
		gap: 12px;
	}

	.header-lang {
		font-size: 19px;
	}

	.header-link {
		font-size: 13px;
	}

	.header-side--right .header-link {
		margin-right: 12px;
	}
}

@media (max-width: 900px) {
	.header-inner {
		flex-direction: column;
		align-items: center;
		row-gap: 12px;
	}

	.header-logo {
		order: -1;
		width: 110px;
	}

	.header-side {
		width: 100%;
		height: auto;
		border-bottom: none;
		justify-content: center;
		gap: 24px;
	}

	.header-side--right {
		flex-wrap: wrap;
		row-gap: 12px;
	}

	.header-side--right .header-link {
		margin-right: 0;
	}

	.header-lang {
		display: none;
	}

	.header-link {
		color: var(--color-cream);
	}

	/* Hero + intro pasan a flujo normal en móvil */
	.hero {
		aspect-ratio: auto;
		min-height: 100svh;
		padding: 42svh var(--container-pad) var(--space-12);
	}

	.hero-claim,
	.intro-datos,
	.intro-claim,
	.intro-map {
		position: static;
		transform: none;
		width: 100%;
	}

	.intro-datos {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
		justify-items: center;
		padding-inline: 0;
		margin-top: var(--space-16);
	}

	.dato {
		width: min(100%, 175px);
	}

	.dato p {
		font-size: 0.9375rem;
	}

	.intro-claim {
		margin-top: var(--space-16);
	}

	.intro-map {
		margin-top: var(--space-12);
	}

	/* Sección Sumba en una columna */
	.sumba-grid {
		grid-template-columns: 1fr;
	}

	.sumba-pics {
		grid-template-columns: 1fr;
	}

	.sumba-pics-col {
		grid-template-rows: none;
		grid-template-columns: 1fr;
	}

	.sumba-pics-col img {
		aspect-ratio: 436 / 245;
	}

	/* Villas en una columna, slider a lo ancho */
	.villa-row {
		grid-template-columns: 1fr;
	}

	.villa-row--reverse .villa-info {
		order: 0;
	}

	.villa-slide {
		width: min(75vw, 320px);
	}

	.villa-desc {
		max-width: none;
	}

	.section-heading {
		white-space: normal;
		gap: 16px;
	}

	/* Planos, contacto y footer en una columna */
	.planos-grid {
		grid-template-columns: 1fr;
	}

	.contacto-card {
		grid-template-columns: 1fr;
		padding: 24px 20px 28px;
	}

	.contacto-info {
		padding-top: 12px;
	}

	.contacto-socials {
		margin-top: var(--space-8);
	}

	.form-opciones {
		gap: 10px;
	}

	.form-opcion span {
		padding: 10px 16px;
		font-size: 1rem;
	}

	.garantia {
		margin: -28px 0;
	}

	.footer-inner {
		flex-direction: column;
		align-items: center;
		gap: var(--space-8);
		text-align: center;
	}

	.footer-cols {
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--space-8);
	}

	.footer-bottom {
		flex-direction: column;
		padding-top: var(--space-8);
	}

	/* Ficha de villa en una columna */
	.villa-ficha {
		padding-top: 200px;
	}

	.ficha-lema {
		margin-bottom: var(--space-8);
	}

	/* En móvil las cajas no sangran: borde y radio completos */
	.ficha-precio,
	.ficha-incluye,
	.ficha-features {
		margin-right: 0;
		border-right: 1.5px solid var(--color-brown);
		border-radius: var(--radius-md);
	}

	/* Carruseles a sangre: las tarjetas se deslizan bajo los bordes
	   de la pantalla (sin franja blanca a la derecha). El de Descubre
	   Sumba queda fuera: vive dentro de la tarjeta crema. */
	.villa-slider:not(.dsumba-slider) {
		margin-inline: calc(-1 * var(--container-pad));
		padding-inline: var(--container-pad);
		scroll-padding-inline: var(--container-pad);
	}

	.ficha-fotos {
		padding-right: var(--container-pad);
	}

	.ficha-grid {
		grid-template-columns: 1fr;
	}

	.ficha-fotos {
		margin-right: calc(-1 * var(--container-pad));
		border-right: 0;
		border-radius: 0;
		border-top-width: 1.5px;
		padding-right: var(--container-pad);
	}

	.ficha-desc {
		max-width: none;
	}

	.ficha-features {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	/* Descubre Sumba en una columna */
	.dsumba-hero {
		padding-top: 300px;
	}

	.dsumba-mapa {
		position: static;
		width: 100%;
		margin-top: var(--space-8);
		gap: 16px;
	}

	.dsumba-mapa-btn {
		white-space: normal;
	}

	.joya-bloque,
	.joya-bloque--invertido {
		grid-template-columns: 1fr;
		gap: var(--space-6);
	}

	.joya-bloque--invertido .joya-foto {
		order: 0;
	}

	.joya-foto--izq img,
	.joya-foto--der img {
		border-radius: 0;
	}

	.joya-datos,
	.joya-bloque--invertido .joya-datos {
		padding-inline: var(--container-pad);
		justify-self: start;
	}

	.actis-grid {
		grid-template-columns: 1fr;
	}

	.actis-cards {
		grid-template-columns: 1fr;
	}

	.actis-cards li {
		aspect-ratio: auto;
		padding-block: 2.5rem;
		gap: 1.5rem;
	}

	.medios-cita {
		width: 84vw;
		padding: 24px 28px;
		gap: 20px;
	}

	.medios-logo {
		height: 40px;
	}
}

/* ==============================================================
   RESPONSIVE OFICIAL (frame SUMBA_HILLS_LANDING_MOBILE 1080px)
   Overrides sobre las adaptaciones provisionales anteriores.
   ============================================================== */

/* Burger, WhatsApp móvil y zona derecha: ocultos en desktop */
.header-mobile-right,
.btn-whatsapp--mobile,
.menu-movil {
	display: none;
}

.header-burger {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 58px;
	height: 38px;
	padding: 0 14px;
	background: transparent;
	border: 2px solid var(--color-brown);
	border-radius: 99px;
	cursor: pointer;
}

.header-burger span {
	display: block;
	height: 2.5px;
	border-radius: 2px;
	background: var(--color-brown);
	transition: transform 0.25s ease, opacity 0.25s ease, background 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
	.header-burger span {
		transition: none;
	}
}

.site-header--cream .header-burger {
	border-color: var(--color-cream);
}

.site-header--cream .header-burger span {
	background: var(--color-cream);
}

@media (max-width: 900px) {
	:root {
		--radius-lg: 28px; /* esquinas proporcionalmente mayores en móvil (70/1080) */
	}

	/* Header móvil: WhatsApp | logo | ES + burger --------------- */
	.header-inner {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: flex-start;
		justify-content: space-between;
		gap: 8px;
		padding-top: 26px;
	}

	.header-side {
		display: none; /* los links viven en el menú burger */
	}

	.header-logo {
		order: 0;
		width: clamp(90px, 21vw, 120px);
	}

	.header-mobile-right {
		display: flex;
		align-items: center;
		gap: 10px;
	}

	.menu-movil-lang {
		color: var(--color-brown);
		font-size: 1.125rem;
		font-weight: 700;
		padding-top: 6px;
	}

	/* El botón de WhatsApp vuelve al header: solo icono, sin número */
	.btn-whatsapp--mobile {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 38px;
		height: 38px;
		padding: 0;
		background: var(--color-brown);
		border-radius: 50%;
		align-self: flex-start;
	}

	.btn-whatsapp--mobile span {
		display: none;
	}

	.btn-whatsapp--mobile img {
		width: 19px;
		height: 19px;
	}

	.site-header--cream .btn-whatsapp--mobile {
		background: var(--color-cream);
		color: #93AFBA;
	}

	.menu-movil {
		display: flex;
		flex-direction: column;
		gap: 20px;
		position: fixed;
		inset: 0;
		z-index: 50;
		background: var(--color-cream);
		padding: 120px var(--container-pad) 40px;
		/* Animación de apertura/cierre: el JS quita [hidden] y añade
		   .menu-movil--abierto al frame siguiente (y al cerrar espera el
		   transitionend del panel antes de volver a ocultarlo). */
		opacity: 0;
		transform: translateY(-14px);
		transition: opacity 0.25s ease, transform 0.25s ease;
	}

	.menu-movil--abierto {
		opacity: 1;
		transform: none;
	}

	.menu-movil[hidden] {
		display: none;
	}

	.menu-movil a {
		color: var(--color-brown);
		font-family: var(--font-display);
		font-size: 1.75rem;
		text-decoration: none;
		border-bottom: 1.5px solid var(--color-brown);
		padding-bottom: 14px;
	}

	/* Cascada al abrir: cada entrada sube y aparece con un pequeño retardo
	   incremental. Al cerrar (sin la clase) los retardos no aplican y todo
	   se desvanece a la vez con el panel. */
	.menu-movil > * {
		opacity: 0;
		transform: translateY(16px);
		transition: opacity 0.3s ease, transform 0.3s ease;
	}

	.menu-movil--abierto > * {
		opacity: 1;
		transform: none;
	}

	.menu-movil--abierto > *:nth-child(1) { transition-delay: 0.06s; }
	.menu-movil--abierto > *:nth-child(2) { transition-delay: 0.12s; }
	.menu-movil--abierto > *:nth-child(3) { transition-delay: 0.18s; }
	.menu-movil--abierto > *:nth-child(4) { transition-delay: 0.24s; }
	.menu-movil--abierto > *:nth-child(5) { transition-delay: 0.3s; }
	.menu-movil--abierto > *:nth-child(6) { transition-delay: 0.36s; }
	.menu-movil--abierto > *:nth-child(7) { transition-delay: 0.42s; }
	.menu-movil--abierto > *:nth-child(8) { transition-delay: 0.48s; }

	@media (prefers-reduced-motion: reduce) {
		.menu-movil,
		.menu-movil > * {
			transition: none;
		}
	}

	.header-burger--abierto {
		position: relative;
		z-index: 60;
	}

	/* Con el menú abierto el botón queda sobre el panel crema: siempre marrón
	   (en la variante --cream era crema y desaparecía) y morphing a X. */
	.header-burger--abierto,
	.site-header--cream .header-burger--abierto {
		border-color: var(--color-brown);
	}

	.header-burger--abierto span,
	.site-header--cream .header-burger--abierto span {
		background: var(--color-brown);
	}

	.header-burger--abierto span:nth-child(1) {
		transform: translateY(7.5px) rotate(45deg);
	}

	.header-burger--abierto span:nth-child(2) {
		opacity: 0;
	}

	.header-burger--abierto span:nth-child(3) {
		transform: translateY(-7.5px) rotate(-45deg);
	}

	/* Hero ------------------------------------------------------ */
	.hero {
		overflow: hidden;
	}

	.hero-claim h1 {
		font-size: clamp(2.9rem, 14.8vw, 4.3rem);
		line-height: 0.75;
	}

	.hero-claim p {
		margin-top: 20px;
		font-size: clamp(1rem, 3.7vw, 1.25rem);
		line-height: 1;
	}

	/* Círculos 2x2 y mapa sangrado ------------------------------ */
	.intro-datos {
		gap: 12px;
		margin-top: var(--space-12);
	}

	.dato {
		width: min(100%, 44vw);
	}

	.dato p {
		font-size: clamp(0.8rem, 3.3vw, 1rem);
	}

	.intro-map {
		width: 176vw;
		max-width: none;
		position: relative;
		left: 50%;
		transform: translateX(-50%);
	}

	.intro-claim {
		font-size: clamp(2.25rem, 9.3vw, 3rem);
		line-height: 1;
	}

	/* Sección Sumba: centrada, foto grande + 2 pequeñas --------- */
	.sumba-texto {
		text-align: center;
	}

	.sumba-texto h2 {
		font-size: clamp(2.25rem, 9.3vw, 3rem);
	}

	.sumba-texto p {
		font-size: clamp(0.9375rem, 3vw, 1.0625rem);
	}

	.sumba-texto .btn-organic {
		margin-inline: auto;
	}

	.sumba-pics {
		grid-template-columns: 1fr;
		gap: 12px;
		aspect-ratio: auto; /* en móvil se apila; se anula el ratio de desktop */
	}

	.sumba-pic-big {
		aspect-ratio: 933 / 463;
	}

	.sumba-pics-col {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: none;
		gap: 12px;
	}

	.sumba-pics-col img {
		aspect-ratio: 450 / 253;
	}

	.sumba-pics-col img:last-child {
		display: none; /* el diseño móvil muestra 2 fotos pequeñas */
	}

	/* Villas: precio + CTA en fila, alineación alterna ---------- */
	.section-heading {
		font-size: clamp(1.375rem, 5.6vw, 1.75rem);
	}

	.villa-title {
		font-size: clamp(2.25rem, 9.3vw, 3rem);
	}

	.villa-tagline {
		font-size: clamp(0.875rem, 2.4vw, 1rem);
	}

	.villa-desc p {
		font-size: clamp(0.9375rem, 2.9vw, 1.0625rem);
		line-height: 1.15;
	}

	.villa-precio-cta {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: 16px;
		flex-wrap: wrap;
	}

	.villa-row .villa-cta {
		margin-top: 16px;
		/* Sin encoger (flex-shrink 0): si no cabe entero junto al precio salta a
		   su propia línea (flex-wrap del contenedor) en vez de estrecharse y
		   partir "Ver oportunidad de inversión" en dos líneas (el texto mide
		   ~233px a 16px; 260 deja margen para las métricas de iOS). */
		flex: 1 0 260px;
		max-width: 340px;
		white-space: nowrap;
	}

	.villa-row--reverse .villa-title,
	.villa-row--reverse .villa-tagline,
	.villa-row--reverse .villa-price,
	.villa-row--reverse .villa-nota {
		text-align: right;
	}

	/* Planos: tira con scroll horizontal ------------------------ */
	.planos-head p {
		font-size: clamp(0.9375rem, 3.7vw, 1.25rem);
	}

	.planos-head h2 {
		font-size: clamp(2.25rem, 9.3vw, 3rem);
		line-height: 1;
	}

	.planos-grid {
		display: flex;
		overflow-x: auto;
		/* Sin scroll vertical dentro de la tira ni barra nativa: se usa la barra
		   propia de los sliders (.villa-scrollbar, ver .planos-wrap). */
		overflow-y: hidden;
		gap: 16px;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.planos-grid::-webkit-scrollbar {
		display: none;
	}

	.planos-grid .plano {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}

	/* Cards recortadas en vertical (diseño móvil): la siguiente asoma por la
	   derecha invitando al scroll horizontal. */
	.planos-grid .plano > img,
	.planos-grid .plano:last-child > img {
		width: 78vw;
		height: auto;
		aspect-ratio: 265 / 305;
		object-fit: cover;
	}

	/* Encuadre del diseño móvil: en el plano general se ve la costa y el mar
	   (están en la mitad derecha de la imagen apaisada). */
	.planos-grid .plano:first-child > img {
		object-position: 68% center;
	}

	.planos-wrap .villa-scrollbar {
		display: block;
		margin-top: 22px;
	}

	/* Contacto: título → form → datos de contacto ---------------- */
	.contacto-card {
		display: flex;
		flex-direction: column;
	}

	.contacto-info {
		display: contents;
	}

	.contacto-info h2 {
		order: 0;
		text-align: center;
		font-size: clamp(2.25rem, 9.3vw, 3rem);
		color: var(--color-green);
		padding-top: 12px;
	}

	.contacto-form {
		order: 1;
		margin-top: var(--space-6);
	}

	.contacto-form h3 {
		font-family: var(--font-display);
		text-align: center;
		font-size: clamp(1.5rem, 5.6vw, 2rem);
	}

	.form-enviar {
		display: flex;
		margin-inline: auto;
	}

	.contacto-mail {
		order: 2;
		margin-top: var(--space-8);
	}

	.contacto-tel {
		order: 3;
		align-self: flex-start;
	}

	.contacto-socials {
		order: 4;
		align-self: flex-end;
		margin-top: 0;
	}

	/* Footer: logo izquierda + columnas -------------------------- */
	.footer-inner {
		flex-direction: row;
		align-items: flex-start;
		text-align: left;
		gap: var(--space-6);
		padding-top: 80px;
	}

	.footer-logo img {
		width: clamp(100px, 30vw, 130px);
	}

	.footer-cols {
		flex-wrap: nowrap;
		justify-content: space-between;
		gap: var(--space-4);
	}

	.footer-col h4 {
		font-size: 0.875rem;
	}

	.footer-col a {
		font-size: 0.8125rem;
	}

	.footer-bottom {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		padding-top: var(--space-6);
	}

	.garantia p {
		font-size: clamp(0.9375rem, 2.9vw, 1.125rem);
		min-height: 56px;
		flex-wrap: wrap;         /* en móvil sí puede partirse en varias líneas */
		white-space: normal;
	}
}