/* ==========================================================================
   Amanay Sky Bar — Design tokens
   Fuente: Figma AMANAY-WEB (frame "tipografias" + inspección de fills)
   ========================================================================== */

:root {
	--color-teal: #004559;
	--color-teal-deep: #003547;
	--color-ivory: #f3f9ff;
	--color-hero-fade: #d1ecfd;
	--color-cream-bg: #f7f4ee;

	--font-display: 'Tenor Sans', 'Georgia', serif;
	--font-body: 'Rethink Sans', 'Helvetica Neue', Arial, sans-serif;

	--h1-size: clamp(2rem, 1.4rem + 2.6vw, 3.125rem);
	--h2-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.375rem);
	--h3-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.875rem);
	--body-size: 1.125rem;
	--button-size: clamp(1rem, 0.9rem + 0.4vw, 1.375rem);

	--container-max: 1800px;
	--container-pad: clamp(1.25rem, 1rem + 3vw, 4.5rem);

	/* Escala z-index semántica */
	--z-header: 900;
	--z-mega-menu: 1000;
	--z-cursor: 2000;
}

/* ==========================================================================
   Reset base
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--body-size);
	line-height: 1.6;
	color: var(--color-teal);
	background: var(--color-cream-bg);
	-webkit-font-smoothing: antialiased;
}

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

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

a,
button,
.btn-link,
[role="button"] {
	cursor: pointer;
}

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

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

h1 { font-size: var(--h1-size); text-transform: uppercase; letter-spacing: 0.01em; }
h2 { font-size: var(--h2-size); text-transform: uppercase; letter-spacing: 0.01em; }
h3 { font-size: var(--h3-size); }

p { margin: 0; }

.container {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

.btn-link {
	display: inline-flex;
	align-items: center;
	padding-block: 0.4em;
	font-family: var(--font-body);
	font-size: var(--button-size);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	border: 0 solid currentColor;
	border-bottom-width: 1px;
	white-space: nowrap;
	transition: opacity 0.2s ease;
	background: none;
}

.btn-link:hover {
	opacity: 0.7;
}

/* Sustituye el contorno de foco por defecto del navegador (que dibuja un
   recuadro en los 4 lados) por uno propio, discreto y coherente con el
   subrayado inferior del botón. */
.btn-link:focus-visible {
	outline: none;
	opacity: 0.7;
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ==========================================================================
   Cursor decorativo (azul corporativo transparente)
   ========================================================================== */

.cursor-glow {
	position: fixed;
	top: 0;
	left: 0;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0, 105, 140, 0.35) 0%, rgba(0, 105, 140, 0) 72%);
	border: 1px solid rgba(0, 105, 140, 0.4);
	pointer-events: none;
	z-index: var(--z-cursor);
	transform: translate(-50%, -50%);
	transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1), height 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease, background 0.25s ease;
	opacity: 0;
	will-change: transform;
}

.cursor-glow.is-active {
	opacity: 1;
}

.cursor-glow.is-hover {
	width: 54px;
	height: 54px;
	background: radial-gradient(circle, rgba(0, 105, 140, 0.22) 0%, rgba(0, 105, 140, 0) 72%);
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
	.cursor-glow {
		display: none;
	}
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
	--header-hueco: clamp(1.5rem, -1.75rem + 4.1vw, 5rem);

	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	background: transparent;
	color: var(--color-ivory);
	z-index: var(--z-header);
	transition: background 0.4s ease, backdrop-filter 0.4s ease, box-shadow 0.4s ease;
}

.site-header.is-scrolled {
	background: linear-gradient(to bottom, rgba(0, 69, 89, 0.94), rgba(0, 69, 89, 0.78));
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 8px 24px rgba(0, 20, 30, 0.15);
}

.site-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	/* El MISMO hueco separa cada enlace de su vecino y del logo (ver
	   .site-header__nav): con el logo centrado y los rotulos de la derecha del
	   doble de largos que los de la izquierda, repartir el ancho en bandas
	   iguales dejaria la derecha pegada al logo. Igualando el hueco, los cuatro
	   quedan a la misma distancia y el sobrante se va a los extremos.
	   Crece con la pantalla hasta donde cabe: el limite lo pone la banda
	   derecha, que ademas de sus dos enlaces tiene que alojar el selector de
	   idioma. */
	gap: var(--header-hueco);
	min-height: clamp(4.5rem, 4rem + 1.5vw, 7.0625rem);
	padding-block: 0.75rem;
}

.site-header__nav {
	display: flex;
	align-items: center;
	gap: var(--header-hueco);
}

/* Cuatro enlaces (dos por lado) mas el selector de idioma tienen que caber sin
   descentrar el logo: de ahi el cuerpo mas contenido que el resto de botones. */
.site-header__nav .btn-link {
	color: var(--color-ivory);
	border-color: var(--color-ivory);
	font-size: clamp(0.75rem, 0.35rem + 0.75vw, 1rem);
}

/* Columna explicita: en movil los dos <nav> se ocultan con display:none, que
   los saca de la rejilla -- sin esto el logo se recolocaba en la primera
   columna y el header quedaba descentrado. */
.site-header__logo {
	flex-shrink: 0;
	grid-column: 2;
	justify-self: center;
}

.site-header__logo img {
	height: clamp(28px, 22px + 1.5vw, 44px);
	width: auto;
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: clamp(0.75rem, 0.5rem + 0.75vw, 1.25rem);
	grid-column: 3;
	justify-self: end;
}

.site-header__toggle {
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0.5rem;
	line-height: 0;
}

.site-header__toggle img {
	width: clamp(32px, 28px + 1vw, 44px);
}

/* Escritorio: los 4 enlaces a la vista y sin boton de menu.
   Por debajo de 1200px no caben sin descentrar el logo, asi que la navegacion
   entera se va al desplegable a pantalla completa (.mega-menu). */
@media (min-width: 1200px) {
	.site-header__toggle {
		display: none;
	}

	/* Cada pareja se reparte dentro de su mitad de la fila (space-evenly), en
	   vez de agruparse junto al logo: los enlaces aprovechan el ancho de la
	   pantalla y el aire contra el logo crece con ella. */
	.site-header__nav {
		width: 100%;
		justify-content: space-evenly;
		gap: 0;
	}

	/* El selector de idioma se queda al borde y la pareja de enlaces ocupa todo
	   lo demas de la mitad derecha. */
	.site-header__actions {
		width: 100%;
		justify-content: space-between;
		gap: 0;
	}

	.site-header__nav--right {
		flex: 1;
	}
}

@media (max-width: 1199px) {
	.site-header__nav {
		display: none;
	}
}

@media (max-width: 480px) {
	.site-header__actions {
		gap: 0.5rem;
	}
}

/* ==========================================================================
   Selector de idioma (header) — sustituye al flotante nativo de TranslatePress
   ========================================================================== */

.lang-switch {
	position: relative;
	color: inherit;
}

.lang-switch__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.4em 0;
	background: none;
	border: 0;
	border-bottom: 1px solid currentColor;
	color: inherit;
	font-family: var(--font-body);
	font-size: clamp(0.85rem, 0.7rem + 0.5vw, 1.1875rem);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.lang-switch__toggle:hover,
.lang-switch__toggle:focus-visible {
	opacity: 0.7;
}

.lang-switch__toggle:focus-visible {
	outline: none;
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.lang-switch__caret {
	transition: transform 0.2s ease;
}

.lang-switch[data-open] .lang-switch__caret {
	transform: rotate(180deg);
}

.lang-switch__menu {
	position: absolute;
	top: calc(100% + 0.6em);
	right: 0;
	min-width: 4.5em;
	margin: 0;
	padding: 0.4em 0;
	background: var(--color-teal);
	border-radius: 4px;
	box-shadow: 0 8px 24px rgba(0, 20, 30, 0.25);
	z-index: var(--z-header);
}

.lang-switch__menu[hidden] {
	display: none;
}

.lang-switch__option {
	display: block;
	padding: 0.5em 1em;
	color: var(--color-ivory);
	font-family: var(--font-body);
	font-size: clamp(0.85rem, 0.7rem + 0.5vw, 1.1875rem);
	text-transform: uppercase;
	letter-spacing: 0.02em;
	opacity: 0.7;
	transition: opacity 0.2s ease, background 0.2s ease;
}

.lang-switch__option:hover,
.lang-switch__option:focus-visible {
	opacity: 1;
	background: rgba(255, 255, 255, 0.08);
	outline: none;
}

.lang-switch__option.is-current {
	opacity: 1;
	pointer-events: none;
}

/* ==========================================================================
   Hero (HOME)
   ========================================================================== */

.hero {
	position: relative;
	background: linear-gradient(
		to bottom,
		var(--color-teal) 0%,
		var(--color-teal) 26%,
		var(--color-hero-fade) 100%
	);
	overflow: hidden;
	/* El header es fixed: el padding superior debe cubrir su alto (hasta 7.06rem)
	   MÁS el aire que pide el diseño entre el menú y el H1. */
	padding-top: clamp(7rem, 5.5rem + 5vw, 11rem);
}

/* 78rem deja sitio para que "Donde el Atlántico toca el cielo," entre en una
   sola línea (~1.048px a 50px) sin llegar a admitir la palabra "sobre" detrás:
   así el salto natural cae siempre tras "cielo," y el H1 queda en 2 líneas. */
.hero__intro {
	text-align: center;
	color: var(--color-ivory);
	max-width: 78rem;
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

.hero__intro h1 {
	text-wrap: balance;
}

.hero__cta {
	display: flex;
	justify-content: center;
	gap: clamp(1.5rem, 1rem + 2vw, 3rem);
	margin-top: clamp(1.25rem, 1rem + 1vw, 2rem);
}

.hero__cta .btn-link {
	color: var(--color-ivory);
	border-color: var(--color-ivory);
}

.hero__collage {
	position: relative;
	width: 100%;
	aspect-ratio: 1920 / 587;
	margin-top: clamp(1.5rem, 1rem + 2vw, 3rem);
}

/* Cada foto = tarjeta (con su color de fondo) rotada + foto real recortada dentro,
   igual que en Figma: evita depender del PNG aplanado que exportaba con fondo azul. */
.polaroid {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: transform, translate;
}

/* Flotación ambiental: cada foto tiene su propio ritmo (duración/retraso/amplitud),
   independiente del ratón — usa la propiedad "translate" (no "transform") para no
   pisar el parallax de mousemove ni la rotación de .polaroid__card. */
@keyframes photo-float {
	0%, 100% { translate: 0 0; }
	50% { translate: var(--float-x, 8px) var(--float-y, -10px); }
}

.polaroid,
.photo-card {
	animation: photo-float var(--float-dur, 7s) ease-in-out infinite;
	animation-delay: var(--float-delay, 0s);
}

.polaroid:nth-of-type(1) { --float-dur: 6.5s; --float-delay: -0.4s; --float-x: 7px;  --float-y: -11px; }
.polaroid:nth-of-type(2) { --float-dur: 8.2s; --float-delay: -2.1s; --float-x: -9px; --float-y: -7px;  }
.polaroid:nth-of-type(3) { --float-dur: 7.4s; --float-delay: -4s;   --float-x: 6px;  --float-y: 9px;   }
.polaroid:nth-of-type(4) { --float-dur: 9s;   --float-delay: -1.2s; --float-x: -8px; --float-y: -10px; }

.photo-card:nth-of-type(1) { --float-dur: 7.8s; --float-delay: -0.8s; --float-x: 6px;  --float-y: -9px;  }
.photo-card:nth-of-type(2) { --float-dur: 6.9s; --float-delay: -3.4s; --float-x: -7px; --float-y: 8px;   }
.photo-card:nth-of-type(3) { --float-dur: 8.6s; --float-delay: -1.8s; --float-x: 8px;  --float-y: 7px;   }
.photo-card:nth-of-type(4) { --float-dur: 7.1s; --float-delay: -5s;   --float-x: -6px; --float-y: -10px; }
.photo-card:nth-of-type(5) { --float-dur: 9.4s; --float-delay: -2.6s; --float-x: 7px;  --float-y: -8px;  }
.photo-card:nth-of-type(6) { --float-dur: 6.6s; --float-delay: -4.5s; --float-x: -8px; --float-y: 6px;   }
.photo-card:nth-of-type(7) { --float-dur: 8s;   --float-delay: -0.2s; --float-x: 6px;  --float-y: 9px;   }

@media (prefers-reduced-motion: reduce) {
	.polaroid,
	.photo-card {
		animation: none;
	}
}

.polaroid__card {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 6px rgba(243, 249, 255, 0.9), 0 14px 28px rgba(0, 30, 40, 0.3);
}

.polaroid__card img {
	display: block;
	object-fit: cover;
}

.polaroid.is-postal {
	filter: drop-shadow(0 10px 20px rgba(0, 30, 40, 0.2));
}

.polaroid.is-postal img {
	width: 100%;
	height: auto;
}

/* Posiciones y tamaños calcados del frame HOME de Figma (caja 1920x587). */
.hero__collage .is-photo-1 {
	left: 9.9%;
	top: 0.08%;
	width: 18.03%;
	aspect-ratio: 346 / 479;
}

.hero__collage .is-photo-1 .polaroid__card {
	width: 100%;
	height: 100%;
	background: var(--color-hero-fade);
	transform: rotate(6.1deg);
}

.hero__collage .is-photo-1 .polaroid__card img {
	width: 92.37%;
	height: 94.49%;
	border-radius: 999px 999px 0 0;
}

.hero__collage .is-photo-2 {
	left: 25.83%;
	top: 20.17%;
	width: 24.81%;
	aspect-ratio: 476 / 341;
}

.hero__collage .is-photo-2 .polaroid__card {
	width: 100%;
	height: 100%;
	background: var(--color-ivory);
	transform: rotate(-5.45deg);
}

.hero__collage .is-photo-2 .polaroid__card img {
	width: 93.61%;
	height: 91.35%;
}

.hero__collage .is-postal {
	left: 48.07%;
	top: 42.39%;
	width: 24.72%;
}

.hero__collage .is-photo-3 {
	left: 64.27%;
	top: 0%;
	width: 25.84%;
	aspect-ratio: 496 / 375;
}

.hero__collage .is-photo-3 .polaroid__card {
	width: 100%;
	height: 100%;
	background: var(--color-hero-fade);
	transform: rotate(10.21deg);
}

.hero__collage .is-photo-3 .polaroid__card img {
	width: 93.48%;
	height: 91.59%;
}

@media (max-width: 900px) {
	.hero__collage {
		aspect-ratio: auto;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1.5rem 1rem;
		padding-inline: var(--container-pad);
		padding-block: 2rem;
	}

	.hero__collage .polaroid {
		position: static;
		width: 100% !important;
		aspect-ratio: auto !important;
	}

	.hero__collage .polaroid__card {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 3 / 4;
		transform: none !important;
	}

	.hero__collage .is-photo-2 .polaroid__card,
	.hero__collage .is-photo-3 .polaroid__card {
		aspect-ratio: 3 / 2;
	}

	.hero__collage .polaroid__card img {
		width: 92% !important;
		height: 92% !important;
	}

	.hero__collage .is-postal {
		grid-column: 1 / -1;
		max-width: 260px;
		margin-inline: auto;
	}
}

/* ==========================================================================
   Section — cita/titular grande ("Entre el cielo y el mar…")
   ========================================================================== */

.section-quote {
	background: var(--color-hero-fade);
}

/* Pista de scroll: su altura extra es el recorrido durante el que la foto crece.
   El "stage" queda pegado (sticky) ocupando la ventana mientras se recorre. */
.section-quote__track {
	height: 240vh;
}

.section-quote__stage {
	position: sticky;
	top: 0;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.section-quote__text {
	position: relative;
	z-index: 1;
	max-width: 95rem;
	margin-inline: auto;
	padding-inline: var(--container-pad);
	font-size: clamp(2rem, 1.2rem + 4.2vw, 6.25rem);
	line-height: 1.08;
	text-align: center;
	/* El texto se retira cuando la foto ya ocupa buena parte de la pantalla. */
	opacity: clamp(0, calc(1 - var(--quote-progress, 0) * 2.2), 1);
	transition: opacity 0.15s linear;
}

/* Estado inicial: arco pequeño enmarcado en el texto.
   Estado final (--quote-progress: 1): rectángulo a pantalla completa. */
.section-quote__photo {
	--qp-w: clamp(90px, 10vw, 170px);
	--qp-h: calc(var(--qp-w) * 200 / 151);

	position: absolute;
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	width: calc(var(--qp-w) + (100vw - var(--qp-w)) * var(--quote-progress, 0));
	height: calc(var(--qp-h) + (100vh - var(--qp-h)) * var(--quote-progress, 0));
	z-index: 2;
	overflow: hidden;
	border-radius:
		calc(999px * (1 - var(--quote-progress, 0)))
		calc(999px * (1 - var(--quote-progress, 0)))
		0 0;
	box-shadow: 0 14px 28px rgba(0, 30, 40, 0.22);
}

.section-quote__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Sin JS, sin scroll-driven o con movimiento reducido: la sección se comporta
   como un bloque normal con la foto pequeña sobre el texto (estado inicial). */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
	.section-quote__track {
		height: auto;
	}

	.section-quote__stage {
		position: relative;
		height: auto;
		padding-block: clamp(3rem, 2rem + 5vw, 7rem);
	}

	.section-quote__text {
		opacity: 1;
	}

	.section-quote__photo {
		width: var(--qp-w);
		height: var(--qp-h);
		border-radius: 999px 999px 0 0;
	}
}

@media (max-width: 640px) {
	.section-quote__photo {
		display: none;
	}
}

/* ==========================================================================
   Mega menu (overlay a pantalla completa)
   ========================================================================== */

.mega-menu {
	position: fixed;
	inset: 0;
	z-index: var(--z-mega-menu);
	overflow: hidden;
	background:
		radial-gradient(ellipse 140% 120% at 18% 82%,
			#004559 0%, #0d5369 12.5%, #1a6179 25%, #357c98 50%,
			#5c98b1 62.5%, #83b4cb 75%, #aad0e4 87.5%, #d1ecfd 100%);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.18s ease, visibility 0.18s ease;
}

.mega-menu.is-open {
	opacity: 1;
	visibility: visible;
}

.mega-menu__watermark {
	position: absolute;
	right: -4%;
	bottom: -6%;
	width: 55%;
	max-width: 900px;
	height: auto;
	pointer-events: none;
}

.mega-menu__close {
	position: absolute;
	top: clamp(1.5rem, 1.2rem + 1vw, 2.9rem);
	right: clamp(1.5rem, 1.2rem + 1vw, 4.5rem);
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0.5rem;
	z-index: 2;
}

.mega-menu__close img {
	width: 26px;
	height: auto;
}

.mega-menu__nav {
	position: absolute;
	left: clamp(1.5rem, 1rem + 3vw, 4.5rem);
	top: 50%;
	transform: translateY(-58%);
	display: flex;
	flex-direction: column;
	gap: clamp(0.5rem, 0.3rem + 1vw, 1.25rem);
}

.mega-menu__link {
	font-family: var(--font-display);
	text-transform: uppercase;
	color: var(--color-ivory);
	font-size: clamp(2.25rem, 1.6rem + 3.5vw, 5rem);
	line-height: 1.1;
	transition: opacity 0.2s ease;
}

.mega-menu__nav:hover .mega-menu__link:not(:hover) {
	opacity: 0.55;
}

.mega-menu__cta {
	position: absolute;
	left: clamp(1.5rem, 1rem + 3vw, 4.5rem);
	bottom: clamp(1.5rem, 1rem + 3vw, 4rem);
	display: flex;
	gap: clamp(1.5rem, 1rem + 2vw, 3rem);
}

.mega-menu__cta .btn-link {
	color: var(--color-ivory);
	border-color: var(--color-ivory);
}

.mega-menu__preview {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.mega-menu__preview-group {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.mega-menu__preview-group.is-active {
	opacity: 1;
}

.mega-menu__preview-photo {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mega-menu__preview-card {
	position: relative;
	width: 92%;
	height: 94.67%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 24px rgba(0, 30, 40, 0.3);
}

.mega-menu__preview-card.is-plain {
	width: 93.78%;
	height: 91%;
}

.mega-menu__preview-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mega-menu__preview-card.is-arch img {
	border-radius: 999px 999px 0 0;
}

/* De 1200px para arriba la navegacion vive en el header: este desplegable es
   exclusivamente el menu movil, asi que aqui no se abre nunca. */
@media (min-width: 1200px) {
	.mega-menu {
		display: none;
	}
}

@media (max-width: 1199px) {
	/* El degradado radial de escritorio tiene el foco oscuro abajo a la
	   izquierda: en un movil (alto y estrecho) eso deja los enlaces, que van
	   arriba, sobre azul claro y en marfil -- ilegibles. Vertical y con el teal
	   arriba: mismo amanecer de marca, pero con contraste donde hay texto. */
	.mega-menu {
		background: linear-gradient(
			to bottom,
			#004559 0%, #0d5369 20%, #1a6179 34%, #357c98 55%,
			#5c98b1 68%, #83b4cb 80%, #aad0e4 90%, #d1ecfd 100%
		);
		overflow-y: auto;
		display: flex;
		flex-direction: column;
	}

	.mega-menu__watermark {
		display: none;
	}

	.mega-menu__nav {
		position: static;
		transform: none;
		padding: 6rem 1.5rem 1.5rem;
	}

	/* Cuatro entradas, y dos de ellas de dos palabras largas: con el cuerpo de
	   escritorio "CALENDARIO EVENTOS" se parte en dos lineas en un movil. */
	.mega-menu__link {
		font-size: clamp(1.35rem, 0.9rem + 2.4vw, 2.6rem);
	}

	.mega-menu__cta {
		position: static;
		padding: 0 1.5rem 2rem;
	}

	/* Las fotos del menu de escritorio, reaprovechadas como tira inferior: al
	   dejar de posicionarse en absoluto, los % de ancho/alto de cada foto (que
	   vienen como estilo inline desde Figma) pasan a repartirlas en una fila
	   escalonada, conservando su marco y su giro. */
	.mega-menu__preview {
		position: relative;
		inset: auto;
		flex: 0 0 auto;
		margin-top: auto;
		height: min(38vh, 20rem);
	}

	/* Los anchos de cada foto suman ~72% del grupo (asi es el collage original):
	   escalarlo aprovecha el ancho del movil sin tocar las proporciones ni los
	   giros de Figma. */
	.mega-menu__preview-group {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: clamp(0.5rem, 2vw, 1rem);
		padding-inline: 1.5rem;
		transform: scale(1.2);
	}

	.mega-menu__preview-photo {
		position: static;
		flex: 0 0 auto;
	}
}

/* ==========================================================================
   Section — teaser del rooftop
   ========================================================================== */

.section-teaser {
	background: var(--color-teal);
	color: var(--color-ivory);
}

/* Full-bleed y mitad exacta cada columna: sin .container, sin max-width
   centrado — el borde izquierdo de la foto cae justo en el 50% del viewport
   y la foto llega hasta el borde derecho de la pantalla. */
.section-teaser__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	min-height: clamp(30rem, 20rem + 24vw, 48rem);
}

.section-teaser__text {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	justify-content: center;
	padding: clamp(3rem, 2rem + 4vw, 5rem) clamp(1.5rem, 1rem + 3vw, 4rem);
}

/* 48rem = ancho suficiente para "Un rooftop para saborear" en una línea, pero
   nunca tanto como para que "Tenerife" suba: el H2 queda siempre en 2 líneas. */
.section-teaser__text h2 {
	color: var(--color-ivory);
	max-width: 48rem;
	margin-bottom: 2rem;
	text-wrap: balance;
}

.section-teaser__circle {
	width: min(19rem, 75%);
	aspect-ratio: 339 / 450;
	overflow: hidden;
	border-radius: 999px 999px 0 0;
	margin-bottom: 2rem;
	box-shadow: 0 14px 30px rgba(0, 20, 30, 0.35);
}

.section-teaser__circle img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* El cuerpo de texto y el botón van alineados a la izquierda (el H2 y la foto
   circular siguen centrados). Van en su propia columna para que el botón
   arranque exactamente en el mismo borde izquierdo que el párrafo. */
.section-teaser__body {
	width: min(34rem, 100%);
	text-align: left;
}

.section-teaser__body p {
	margin-bottom: 1.5rem;
}

.section-teaser__photo {
	width: 100%;
	height: 100%;
	min-height: 20rem;
	overflow: hidden;
}

.section-teaser__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 900px) {
	.section-teaser__grid {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.section-teaser__photo {
		order: -1;
		aspect-ratio: 4 / 3;
	}
}

/* ==========================================================================
   Section — listado 01-04
   ========================================================================== */

.section-menu-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.section-menu-list__item {
	position: relative;
	overflow: hidden;
	padding: clamp(1.5rem, 1rem + 2vw, 3rem) clamp(1rem, 0.5rem + 2vw, 2rem);
	/* 750px: punto intermedio acordado entre los 900px de Figma y los 630px
	   que tenía la web (los bloques se veían achatados). */
	min-height: 750px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.section-menu-list__item:nth-child(1) { background: #d1ecfd; }
.section-menu-list__item:nth-child(2) { background: #abcedf; }
.section-menu-list__item:nth-child(3) { background: #7ba8ba; }
.section-menu-list__item:nth-child(4) { background: #4a8093; }

.section-menu-list__item::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: var(--hover-img);
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
	z-index: 0;
}

.section-menu-list__item:hover::before,
.section-menu-list__item:focus-within::before {
	opacity: 1;
}

.section-menu-list__item > * {
	position: relative;
	z-index: 1;
}

.section-menu-list__item h3 {
	font-size: clamp(1.25rem, 1rem + 1.2vw, 2rem);
	max-width: 8rem;
}

.section-menu-list__item .btn-link {
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.35s ease 0.08s, transform 0.35s ease 0.08s;
	margin-top: 0.75rem;
}

.section-menu-list__item:hover .btn-link,
.section-menu-list__item:focus-within .btn-link {
	opacity: 1;
	transform: translateY(0);
}

.section-menu-list__item span {
	font-family: var(--font-display);
	font-size: clamp(3rem, 2rem + 5vw, 8rem);
	line-height: 1;
	align-self: flex-end;
}

@media (prefers-reduced-motion: reduce) {
	.section-menu-list__item::before,
	.section-menu-list__item .btn-link {
		transition: none;
	}
}

@media (max-width: 780px) {
	.section-menu-list {
		grid-template-columns: 1fr 1fr;
	}

	.section-menu-list__item {
		min-height: clamp(22rem, 18rem + 12vw, 30rem);
	}
}

@media (max-width: 480px) {
	.section-menu-list {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Section — "Todo lo que puedes vivir en Amanay" + galería
   ========================================================================== */

.section-live {
	background: linear-gradient(
		to bottom,
		var(--color-teal) 0%,
		var(--color-teal) 30%,
		var(--color-hero-fade) 100%
	);
	color: var(--color-ivory);
	padding-top: clamp(3rem, 2rem + 4vw, 5.5rem);
}

.section-live__intro {
	text-align: center;
	max-width: 44rem;
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

.section-live__intro h2 {
	color: var(--color-ivory);
	margin-bottom: 1.25rem;
}

.section-live__contact {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: clamp(1.5rem, 1rem + 3vw, 5rem);
	margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem);
	padding-inline: var(--container-pad);
}

/* Las 3 columnas comparten ancho fijo: si no, el item del teléfono (mucho más
   corto que los otros dos) desequilibra la fila y todo el bloque parece
   descolgado hacia un lado aunque el contenedor sí esté centrado. */
.section-live__contact-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	width: 13rem;
	max-width: 100%;
	text-align: center;
}

.section-live__contact-item img {
	width: 40px;
	height: auto;
	filter: brightness(0) saturate(100%) invert(97%) sepia(6%) saturate(939%) hue-rotate(178deg) brightness(103%) contrast(103%);
}

/* Collage genérico de fotos tipo polaroid, posicionado por % via inline style */
.photo-collage {
	position: relative;
	width: 100%;
	margin-top: clamp(1rem, 0.5rem + 1.5vw, 1.75rem);
	padding-bottom: clamp(2rem, 1rem + 3vw, 4rem);
}

.photo-card {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: transform;
}

.photo-card__frame {
	position: relative;
	width: 92%;
	height: 94.67%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 6px rgba(243, 249, 255, 0.9), 0 14px 28px rgba(0, 30, 40, 0.3);
}

.photo-card__frame.is-plain {
	width: 93.78%;
	height: 91%;
}

.photo-card__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.photo-card__frame.is-arch img {
	border-radius: 999px 999px 0 0;
}

@media (max-width: 900px) {
	.photo-collage {
		position: static;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1.25rem;
		padding: 2rem var(--container-pad);
	}

	.photo-card {
		position: static;
		width: 100% !important;
		height: auto !important;
	}

	.photo-card__frame {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 3 / 4;
		transform: none !important;
	}

	.photo-card__frame.is-plain {
		aspect-ratio: 3 / 2;
	}
}

/* ==========================================================================
   Section — carrusel de eventos
   ========================================================================== */

.section-events {
	background: var(--color-hero-fade);
	padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
	text-align: center;
}

.section-events__carousel {
	position: relative;
	padding-inline: clamp(3rem, 1rem + 6vw, 7rem);
}

/* Escenario del carrusel: todas las diapositivas se apilan en el centro y se
   colocan con transform según su distancia a la activa, de modo que al girar
   la que entra crece hasta el tamaño central y la que sale se encoge. */
.section-events__stage {
	position: relative;
	height: clamp(16rem, 10rem + 22vw, 31.25rem);
}

.section-events__photo {
	position: absolute;
	top: 50%;
	left: 50%;
	width: clamp(10rem, 6rem + 16vw, 23.5rem);
	aspect-ratio: 377 / 500;
	translate: -50% -50%;
	transform: translateX(var(--dx, 0)) scale(var(--s, 0.5));
	opacity: var(--o, 0);
	z-index: var(--z, 0);
	border-radius: 999px 999px 0 0;
	overflow: hidden;
	box-shadow: 0 10px 24px rgba(0, 30, 40, 0.22);
	pointer-events: none;
	transition:
		transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
		opacity 0.65s ease;
}

.section-events__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Centro: tamaño completo. */
.section-events__photo.is-active {
	--dx: 0;
	--s: 1;
	--o: 1;
	--z: 3;
}

/* Laterales: más pequeñas, para dar sensación de lejanía. */
.section-events__photo.is-prev {
	--dx: -80%;
	--s: 0.68;
	--o: 0.85;
	--z: 2;
}

.section-events__photo.is-next {
	--dx: 80%;
	--s: 0.68;
	--o: 0.85;
	--z: 2;
}

@media (prefers-reduced-motion: reduce) {
	.section-events__photo {
		transition: none;
	}
}

.section-events__heading {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	/* Por encima de las diapositivas (la activa usa z-index 3): el titular
	   queda siempre fijo y legible sobre las fotos. */
	z-index: 4;
}

.section-events__heading h2 {
	max-width: 40rem;
	font-size: clamp(2.25rem, 1.4rem + 4vw, 4.5rem);
	line-height: 1.05;
	pointer-events: none;
	/* Halo marfil cerrado: el titular pasa por delante de las fotos y estas van
	   rotando, así que tiene que leerse igual sobre una clara que sobre una
	   oscura (p. ej. la de los fuegos artificiales). */
	text-shadow:
		0 0 10px rgba(243, 249, 255, 0.95),
		0 0 22px rgba(243, 249, 255, 0.9),
		0 0 44px rgba(243, 249, 255, 0.75),
		0 4px 20px rgba(243, 249, 255, 0.6);
}

.section-events__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0.75rem;
	flex-shrink: 0;
	z-index: 5;
	transition: opacity 0.2s ease;
}

.section-events__arrow:hover {
	opacity: 0.6;
}

.section-events__arrow--prev {
	left: 0;
}

.section-events__arrow--next {
	right: 0;
}

.section-events__arrow img {
	width: 16px;
}

.section-events__cta {
	margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
}

@media (max-width: 720px) {
	.section-events__photo.is-prev,
	.section-events__photo.is-next {
		--o: 0;
	}

	.section-events__heading h2 {
		font-size: clamp(1.6rem, 1.3rem + 1.5vw, 2.375rem);
	}
}

/* ==========================================================================
   Section — CTA final "Ven a vivir Amanay"
   ========================================================================== */

.section-final-cta {
	position: relative;
	min-height: clamp(20rem, 16rem + 14vw, 34rem);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: var(--color-ivory);
	overflow: hidden;
}

.section-final-cta img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Velo corporativo sobre la foto: garantiza el contraste del titular y los dos
   botones en color marfil sea cual sea la imagen de fondo que se use. */
.section-final-cta::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(to bottom, rgba(0, 69, 89, 0.15), rgba(0, 69, 89, 0.55)),
		rgba(0, 69, 89, 0.3);
}

.section-final-cta__content {
	position: relative;
	z-index: 2;
}

.section-final-cta__content h2 {
	color: var(--color-ivory);
	margin-bottom: 1.5rem;
}

.section-final-cta__content .hero__cta {
	justify-content: center;
}

/* ==========================================================================
   Página EVENTOS
   ========================================================================== */

.eventos-hero__lead {
	max-width: 52rem;
	margin: 1.25rem auto 0;
	font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
	text-wrap: balance;
}

/* --- Próxima programación --------------------------------------------- */

.eventos-programa {
	background: linear-gradient(
		to bottom,
		var(--color-teal) 0%,
		var(--color-teal) 55%,
		var(--color-hero-fade) 100%
	);
	color: var(--color-ivory);
	padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(3rem, 2rem + 4vw, 6rem);
	text-align: center;
}

/* Cuando la programacion es la ultima seccion de la pagina (Calendario de
   Eventos), el degradado no puede acabar en azul claro: debajo va el pie, que
   es teal, y se veria un corte. */
.eventos-programa--final {
	background: var(--color-teal);
}

.eventos-programa__intro {
	max-width: 52rem;
	margin-inline: auto;
	padding-inline: var(--container-pad);
	margin-bottom: clamp(2.5rem, 2rem + 3vw, 4rem);
}

/* Calendario de reservas (Reverón Turitop, embed externo vía iframe/script).
   A ancho completo a propósito: el widget ya maquetea su propio contenido
   por dentro, no necesita el container/padding del resto de la página. */
.eventos-programa__embed {
	width: 100%;
	text-align: initial;
}

/* El script del embed va `async` y monta el iframe por JS, así que hasta que se
   ejecuta este div mide 0: la página daba un salto y luego aparecía un rectángulo
   vacío. Se reserva el hueco con el mismo petróleo que pinta el calendario por
   dentro (--surface en su globals.css), y encima embed.js coloca el indicador de
   carga circular. En cuanto mide su alto real, el propio script libera este
   mínimo con un min-height inline. */
.eventos-programa__embed .reveron-calendar {
	min-height: 760px;
	background: #003e52;
}

.eventos-programa__intro h2 {
	color: var(--color-ivory);
	margin-bottom: 1.25rem;
}

.eventos-programa__intro .btn-link {
	color: var(--color-ivory);
	border-color: var(--color-ivory);
	margin-top: 1.5rem;
}

.eventos-programa__carousel {
	position: relative;
	padding-inline: clamp(3rem, 1rem + 6vw, 7rem);
}

/* Mismo patrón de profundidad que el carrusel de la portada, pero aquí las
   fotos van en arco limpio, sin tarjeta ni sombra. */
.eventos-programa__stage {
	position: relative;
	height: clamp(16rem, 10rem + 22vw, 31.25rem);
}

.eventos-programa__slide {
	position: absolute;
	top: 50%;
	left: 50%;
	width: clamp(10rem, 6rem + 16vw, 23.5rem);
	aspect-ratio: 377 / 500;
	translate: -50% -50%;
	transform: translateX(var(--dx, 0)) scale(var(--s, 0.5));
	opacity: var(--o, 0);
	z-index: var(--z, 0);
	border-radius: 999px 999px 0 0;
	overflow: hidden;
	pointer-events: none;
	transition:
		transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
		opacity 0.65s ease;
}

.eventos-programa__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.eventos-programa__slide.is-active { --dx: 0;    --s: 1;    --o: 1;    --z: 3; }
.eventos-programa__slide.is-prev   { --dx: -80%; --s: 0.68; --o: 0.85; --z: 2; }
.eventos-programa__slide.is-next   { --dx: 80%;  --s: 0.68; --o: 0.85; --z: 2; }

/* Ficha del evento: solo se ve la del que está en el centro. */
.eventos-programa__meta {
	position: relative;
	margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	padding-inline: var(--container-pad);
}

.eventos-programa__card {
	display: none;
}

.eventos-programa__card.is-active {
	display: block;
}

.eventos-programa__fecha {
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: clamp(0.85rem, 0.75rem + 0.3vw, 1.05rem);
	margin-bottom: 0.5rem;
}

.eventos-programa__card h3 {
	font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.875rem);
	margin-bottom: 1.25rem;
}

.eventos-programa__card .btn-link {
	color: var(--color-ivory);
	border-color: var(--color-ivory);
}

@media (prefers-reduced-motion: reduce) {
	.eventos-programa__slide {
		transition: none;
	}
}

@media (max-width: 720px) {
	.eventos-programa__slide.is-prev,
	.eventos-programa__slide.is-next {
		--o: 0;
	}
}

/* --- Eventos privados -------------------------------------------------- */

.eventos-privados {
	background: var(--color-hero-fade);
	color: var(--color-teal);
	padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
}

/* Como pagina propia (Eventos privados) esta seccion abre el documento: el
   titulo va sobre una banda teal a sangre que ademas deja legible el header,
   que es fijo, transparente y en marfil. */
.eventos-privados--page {
	padding-block-start: 0;
}

.eventos-privados__head {
	background: var(--color-teal);
	color: var(--color-ivory);
	text-align: center;
	padding: clamp(9rem, 7rem + 6vw, 13rem) var(--container-pad) 0;
	margin-block-end: clamp(2.5rem, 2rem + 3vw, 4.5rem);
}

/* La transicion al azul claro de la seccion, en una franja de altura propia en
   vez de en el degradado del bloque entero: asi el titulo se queda siempre
   completo sobre el teal, tenga las lineas que tenga en cada idioma, y la
   ultima no pierde contraste. */
.eventos-privados__head::after {
	content: '';
	display: block;
	height: clamp(5rem, 4rem + 5vw, 9rem);
	margin-block-start: clamp(2.5rem, 2rem + 2vw, 4rem);
	margin-inline: calc(var(--container-pad) * -1);
	background: linear-gradient(to bottom, var(--color-teal), var(--color-hero-fade));
}

.eventos-privados__head h1 {
	max-width: 44rem;
	margin-inline: auto;
	text-wrap: balance;
}

/* 50/50: en Figma la línea divisoria cae en el centro exacto del frame. */
.eventos-privados__grid {
	display: grid;
	grid-template-columns: minmax(0, 50%) minmax(0, 50%);
	gap: clamp(2rem, 1rem + 4vw, 4rem);
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

/* La línea divisoria del diseño, sobre la columna derecha. */
.eventos-privados__list {
	border-left: 1px solid rgba(0, 69, 89, 0.35);
	padding-left: clamp(2rem, 1rem + 3vw, 3.5rem);
	display: flex;
	flex-direction: column;
	gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.eventos-privados__text h2 {
	margin-bottom: 1.75rem;
	text-wrap: balance;
}

.eventos-privados__text p {
	margin-bottom: 2rem;
	max-width: 34rem;
}

.eventos-privados__list li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1rem clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
	align-items: start;
}

.eventos-privados__list img {
	width: 52px;
	height: auto;
	margin-top: 0.15rem;
}

.eventos-privados__list h3 {
	font-size: clamp(1.25rem, 1rem + 0.9vw, 1.6rem);
	margin-bottom: 0.4rem;
}

.eventos-privados__list p {
	font-size: 0.95rem;
	max-width: 34rem;
}

@media (max-width: 900px) {
	.eventos-privados__grid {
		grid-template-columns: 1fr;
	}

	.eventos-privados__list {
		border-left: 0;
		padding-left: 0;
	}
}

/* --- Collage ----------------------------------------------------------- */

.eventos-collage {
	background: linear-gradient(
		to bottom,
		var(--color-hero-fade) 0%,
		var(--color-teal) 45%,
		var(--color-teal) 100%
	);
	padding-block: clamp(2rem, 1rem + 3vw, 4rem);
}

/* --- Formulario -------------------------------------------------------- */

.eventos-form {
	background: var(--color-teal);
	color: var(--color-ivory);
	padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
}

.eventos-form__grid {
	display: grid;
	grid-template-columns: minmax(0, 45%) minmax(0, 55%);
	gap: clamp(2rem, 1rem + 4vw, 4rem);
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
	align-items: start;
}

.eventos-form__intro h2 {
	color: var(--color-ivory);
	margin-bottom: 1.25rem;
}

.eventos-form__intro p {
	max-width: 34rem;
	opacity: 0.9;
}

.eventos-form__form {
	display: flex;
	flex-direction: column;
	gap: clamp(1rem, 0.75rem + 1vw, 1.5rem);
}

.eventos-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1rem, 0.75rem + 1vw, 1.5rem);
}

.eventos-form__field {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.eventos-form__field label {
	font-size: 0.95rem;
}

.eventos-form__field input,
.eventos-form__field textarea {
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--color-teal);
	background: var(--color-ivory);
	border: 1px solid transparent;
	border-radius: 0.5rem;
	padding: 0.85rem 1rem;
	width: 100%;
	resize: vertical;
}

.eventos-form__field input::placeholder,
.eventos-form__field textarea::placeholder {
	color: rgba(0, 69, 89, 0.45);
}

.eventos-form__field input:focus-visible,
.eventos-form__field textarea:focus-visible {
	outline: none;
	border-color: var(--color-hero-fade);
	box-shadow: 0 0 0 3px rgba(209, 236, 253, 0.45);
}

.eventos-form__submit {
	color: var(--color-ivory);
	border-color: var(--color-ivory);
	align-self: flex-start;
	padding-inline: 0;
}

/* Honeypot: fuera de pantalla, pero no display:none (algunos bots lo detectan). */
.eventos-form__trampa {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.eventos-form__aviso {
	border-radius: 0.5rem;
	padding: 1rem 1.25rem;
	font-size: 0.95rem;
}

.eventos-form__aviso.is-ok {
	background: rgba(209, 236, 253, 0.16);
	border: 1px solid var(--color-hero-fade);
}

.eventos-form__aviso.is-error {
	background: rgba(255, 214, 214, 0.14);
	border: 1px solid #ffc9c9;
}

@media (max-width: 900px) {
	.eventos-form__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 560px) {
	.eventos-form__row {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Página "Próximamente" (LA CARTA)
   ========================================================================== */

.page-soon {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: clamp(30rem, 20rem + 30vw, 46rem);
	background: linear-gradient(
		to bottom,
		var(--color-teal) 0%,
		var(--color-teal) 45%,
		var(--color-hero-fade) 100%
	);
	color: var(--color-ivory);
	/* Despeja el header, que es fijo. */
	padding: clamp(9rem, 7rem + 6vw, 13rem) var(--container-pad) clamp(4rem, 3rem + 4vw, 7rem);
}

.page-soon__content {
	max-width: 44rem;
}

.page-soon__content h1 {
	margin-bottom: 1.25rem;
}

.page-soon__content p {
	opacity: 0.9;
}

.page-soon__divider {
	width: 1px;
	height: clamp(3rem, 2rem + 4vw, 6rem);
	background: rgba(243, 249, 255, 0.5);
	margin: clamp(2rem, 1.5rem + 2vw, 3.5rem) auto 0;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
	background: var(--color-teal);
	color: var(--color-ivory);
	padding-block: clamp(2.5rem, 2rem + 2vw, 4.5rem) clamp(1.5rem, 1.2rem + 1vw, 2.5rem);
	text-align: center;
}

.site-footer__brand {
	display: flex;
	justify-content: center;
	margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.site-footer__brand img {
	width: clamp(220px, 140px + 18vw, 425px);
	height: auto;
}

.site-footer__columns-wrap {
	display: flex;
	justify-content: center;
}

/* Flex en vez de rejilla fija: las columnas se centran solas sea cual sea su
   número. Con una rejilla de 4 y solo 3 columnas quedaba un hueco a la derecha
   y el contenido se veía descolgado hacia la izquierda. */
.site-footer__columns {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2rem clamp(1.5rem, 1rem + 3vw, 4rem);
	/* Es un item flex del wrap: sin width:100% se encoge al contenido y deja
	   menos sitio del que hay, partiendo las columnas en dos filas. */
	width: 100%;
	max-width: 61rem;
	text-align: center;
	padding-block-end: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

/* min-width:0 anula el mínimo automático del item flex: sin él, textos largos
   como la dirección ensanchan la columna y el pie se parte en dos filas. */
.site-footer__col {
	flex: 0 1 13rem;
	min-width: 0;
}

.site-footer__col h4 {
	font-family: var(--font-display);
	font-style: oblique 10deg;
	text-transform: uppercase;
	font-size: 1.05rem;
	letter-spacing: 0.03em;
	margin-bottom: 0.5rem;
}

.site-footer__underline {
	width: 129px;
	max-width: 70%;
	height: auto;
	margin: 0 auto 0.9rem;
}

.site-footer__col p {
	font-size: 0.95rem;
	opacity: 0.9;
}

.site-footer__col a:hover {
	opacity: 0.7;
}

.site-footer__social {
	display: flex;
	justify-content: center;
	gap: 0.75rem;
}

.site-footer__social img {
	width: 25px;
	height: 25px;
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	padding-top: clamp(1.25rem, 1rem + 1vw, 2rem);
	border-top: 1px solid rgba(243, 249, 255, 0.25);
	text-align: left;
}

.site-footer__legal p {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 0.85rem;
	line-height: 1.5;
	color: rgba(243, 249, 255, 0.8);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

@media (max-width: 780px) {
	/* Las columnas ya se reparten solas con flex-wrap. */
	.site-footer__legal {
		flex-direction: column;
		text-align: center;
	}
}

/* ==========================================================================
   Lightbox — ampliar foto al centro al hacer clic
   ========================================================================== */

.js-lightbox {
	cursor: pointer;
}

.lightbox {
	position: fixed;
	inset: 0;
	z-index: 1500;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1.5rem, 1rem + 3vw, 4rem);
	background: rgba(0, 69, 89, 0.78);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

.lightbox__img {
	max-width: min(90vw, 1100px);
	max-height: 85vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 0.5rem;
	box-shadow: 0 30px 70px rgba(0, 10, 15, 0.45);
	transform: scale(0.94);
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.lightbox.is-open .lightbox__img {
	transform: scale(1);
}

.lightbox__close {
	position: absolute;
	top: clamp(1.25rem, 1rem + 1vw, 2.5rem);
	right: clamp(1.25rem, 1rem + 1vw, 2.5rem);
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(243, 249, 255, 0.15);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background 0.2s ease;
}

.lightbox__close:hover {
	background: rgba(243, 249, 255, 0.3);
}

.lightbox__close svg {
	width: 16px;
	height: 16px;
}

.lightbox__close svg line {
	stroke: var(--color-ivory);
	stroke-width: 2;
}

@media (prefers-reduced-motion: reduce) {
	.lightbox,
	.lightbox__img {
		transition: none;
	}
}

/* ==========================================================================
   Página EL ROOFTOP — hero + "el concepto"
   ========================================================================== */

.rooftop-hero {
	position: relative;
	min-height: clamp(24rem, 18rem + 20vw, 44rem);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	overflow: hidden;
	color: var(--color-ivory);
	padding-top: clamp(5rem, 4rem + 3vw, 7rem);
}

.rooftop-hero img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

/* Capa de azul corporativo al 30% sobre la foto, tal como está montada en
   Figma: es la que separa el menú y el titular del fondo. */
.rooftop-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 69, 89, 0.3);
	z-index: 1;
}

.rooftop-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0, 69, 89, 0) 30%, var(--color-teal) 100%);
	z-index: 1;
}

.rooftop-hero__content {
	position: relative;
	z-index: 2;
	max-width: 78rem;
	padding-inline: var(--container-pad);
}

.rooftop-hero__content h1 {
	text-wrap: balance;
}

.rooftop-hero__content .hero__cta {
	margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.rooftop-hero__divider {
	width: 1px;
	height: clamp(4.5rem, 3rem + 6vw, 10rem);
	background: rgba(243, 249, 255, 0.5);
	margin: clamp(1.5rem, 1rem + 2vw, 3rem) auto 0;
}

.rooftop-concept {
	background: linear-gradient(
		to bottom,
		var(--color-teal) 0%,
		var(--color-teal) 44%,
		var(--color-hero-fade) 100%
	);
	color: var(--color-ivory);
	padding-block: clamp(2rem, 1rem + 4vw, 5rem);
}

.rooftop-concept__grid {
	display: grid;
	grid-template-columns: minmax(0, 44%) minmax(0, 56%);
	gap: clamp(2rem, 1rem + 4vw, 5rem);
	align-items: center;
}

.rooftop-concept__photos {
	position: relative;
	width: 100%;
	aspect-ratio: 765 / 661;
}

.rooftop-concept__text {
	max-width: 44rem;
}

.rooftop-concept__eyebrow {
	display: block;
	font-family: var(--font-display);
	font-style: oblique 10deg;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-bottom: 1rem;
	opacity: 0.85;
}

/* Separación amplia entre el H2 y el cuerpo, como en Figma. */
.rooftop-concept__text h2 {
	color: var(--color-ivory);
	margin-bottom: clamp(1.75rem, 1rem + 2.5vw, 3.25rem);
}

.rooftop-concept__text p {
	margin-bottom: 2rem;
}

.rooftop-concept__text .btn-link {
	color: var(--color-ivory);
	border-color: var(--color-ivory);
}

@media (max-width: 900px) {
	.rooftop-concept__grid {
		grid-template-columns: 1fr;
	}

	.rooftop-concept__photos {
		max-width: 26rem;
		margin-inline: auto;
	}

	.rooftop-concept__text {
		text-align: center;
		margin-inline: auto;
	}
}

/* ==========================================================================
   Página EL ROOFTOP — "Vistas infinitas…" (4 tarjetas con hover)
   ========================================================================== */

.rooftop-highlights {
	background: var(--color-hero-fade);
	color: var(--color-teal);
	padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
	text-align: center;
}

.rooftop-highlights__intro {
	max-width: 60rem;
	margin-inline: auto;
	padding-inline: var(--container-pad);
	margin-bottom: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}

/* Ancho suficiente para que el titular caiga en 2 líneas equilibradas. */
.rooftop-highlights__intro h2 {
	max-width: 56rem;
	margin-inline: auto;
	margin-bottom: 1.25rem;
	text-wrap: balance;
}

.rooftop-highlights__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1rem, 0.5rem + 2vw, 2rem);
	max-width: 78rem;
	margin-inline: auto;
	padding-inline: var(--container-pad);
	margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem);
}

/* Cada "ventana" es una celda: la tarjeta arriba y, si le corresponde, su
   botón justo debajo (en vez de agrupar los botones bajo las 4 tarjetas). */
.rooftop-highlights__cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(1rem, 0.75rem + 1vw, 1.75rem);
}

/* El hueco del botón existe en las 4 celdas, con o sin botón: así todas las
   tarjetas acaban a la misma altura y los arcos quedan alineados. */
.rooftop-highlights__cta {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	width: 100%;
	/* Alto exacto de un .btn-link (1.6em de línea + 0.4em de padding arriba y
	   abajo + el borde inferior), derivado del mismo token para que siga la
	   escala tipográfica en todos los breakpoints. */
	min-height: calc(var(--button-size) * 2.4 + 1px);
}

.rooftop-highlights__card {
	position: relative;
	width: 100%;
	flex: 1;
	border: 1px solid var(--color-teal);
	border-radius: 999px 999px 0 0;
	padding: clamp(2rem, 1.5rem + 2vw, 3rem) 1.25rem 1.75rem;
	min-height: clamp(18rem, 15rem + 6vw, 22rem);
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow: hidden;
}

/* El SVG de Figma ya trae el pictograma y la onda inferior en una pieza (52x40),
   así que no hay imagen de subrayado aparte. */
.rooftop-highlights__card .rooftop-highlights__icon {
	width: 52px;
	height: auto;
	margin-bottom: 1.25rem;
}

.rooftop-highlights__card h3 {
	font-size: 1.4rem;
	margin-bottom: 1rem;
}

.rooftop-highlights__card p {
	font-size: 0.95rem;
}

/* Icono + título + texto son el estado permanente; la foto del servicio es la
   que aparece al hacer hover, por encima del contenido. */
.rooftop-highlights__card::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: var(--card-img);
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
}

.rooftop-highlights__card:hover::after,
.rooftop-highlights__card:focus-within::after {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.rooftop-highlights__card::after {
		transition: none;
	}
}

@media (max-width: 900px) {
	.rooftop-highlights__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px) {
	.rooftop-highlights__grid {
		grid-template-columns: minmax(0, 1fr);
		max-width: 22rem;
	}
}

/* ==========================================================================
   Página EL ROOFTOP — cruce con Reverón Plaza
   ========================================================================== */

.rooftop-stay {
	display: grid;
	grid-template-columns: minmax(0, 50.7%) minmax(0, 49.3%);
	align-items: stretch;
	background: #abcedf;
	color: var(--color-teal);
}

.rooftop-stay__photo {
	min-height: 30rem;
}

.rooftop-stay__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.rooftop-stay__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	justify-content: center;
	padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) clamp(1.5rem, 1rem + 3vw, 4rem);
}

.rooftop-stay__content h2 {
	margin-bottom: 1.75rem;
	max-width: 26rem;
}

.rooftop-stay__accent {
	width: min(16rem, 70%);
	aspect-ratio: 339 / 450;
	overflow: hidden;
	border-radius: 999px 999px 0 0;
	box-shadow: 0 14px 30px rgba(0, 20, 30, 0.25);
	margin-bottom: 1.75rem;
}

.rooftop-stay__accent img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* El H2 y la foto siguen centrados; el cuerpo de texto va alineado
   a la izquierda y con más ancho para que no salte a tantas líneas. */
.rooftop-stay__content p {
	max-width: 42rem;
	margin-bottom: 1.75rem;
	text-align: left;
}

@media (max-width: 900px) {
	.rooftop-stay {
		grid-template-columns: 1fr;
	}

	.rooftop-stay__photo {
		min-height: 20rem;
	}
}

/* ==========================================================================
   Página EL ROOFTOP — "La transformación"
   ========================================================================== */

.rooftop-transform {
	background: var(--color-teal);
	color: var(--color-ivory);
	padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
}

.rooftop-transform__intro {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 1rem + 3vw, 3rem);
	align-items: end;
	padding-inline: var(--container-pad);
	margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

.rooftop-transform__eyebrow {
	display: block;
	font-family: var(--font-display);
	font-style: oblique 10deg;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-bottom: 1rem;
	opacity: 0.85;
}

.rooftop-transform__intro h2 {
	color: var(--color-ivory);
}

/* --------------------------------------------------------------------------
   Comparador antes/después: dos fotos superpuestas y un divisor arrastrable.
   El <input type="range"> invisible por encima aporta el arrastre con ratón,
   el táctil y el control por teclado sin escribir gestión de eventos.
   -------------------------------------------------------------------------- */

.compare {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	touch-action: pan-y;
}

.compare__layer {
	position: absolute;
	inset: 0;
}

/* La capa "antes" se recorta a la posición del divisor. */
.compare__layer--before {
	clip-path: inset(0 calc(100% - var(--compare-pos, 50%)) 0 0);
}

.compare img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	user-select: none;
	-webkit-user-drag: none;
}

.compare__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--compare-pos, 50%);
	width: 2px;
	background: var(--color-ivory);
	transform: translateX(-50%);
	pointer-events: none;
	box-shadow: 0 0 14px rgba(0, 20, 30, 0.45);
}

.compare__handle::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: clamp(38px, 32px + 1.5vw, 52px);
	height: clamp(38px, 32px + 1.5vw, 52px);
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--color-ivory);
	box-shadow: 0 6px 18px rgba(0, 20, 30, 0.35);
}

/* Flechas ‹ › dentro del tirador. */
.compare__handle::before {
	content: '‹ ›';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	font-family: var(--font-body);
	font-size: 1.15rem;
	line-height: 1;
	letter-spacing: -0.08em;
	color: var(--color-teal);
}

.compare__range {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: ew-resize;
	-webkit-appearance: none;
	appearance: none;
	background: none;
}

.compare__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 56px;
	height: 100%;
	cursor: ew-resize;
}

.compare__range::-moz-range-thumb {
	width: 56px;
	height: 100%;
	border: 0;
	cursor: ew-resize;
}

.compare__range:focus-visible ~ .compare__handle {
	box-shadow: 0 0 0 3px rgba(243, 249, 255, 0.8), 0 0 14px rgba(0, 20, 30, 0.45);
}

.compare__label {
	position: absolute;
	bottom: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
	z-index: 2;
	padding: 0.35em 0.9em;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-ivory);
	background: rgba(0, 69, 89, 0.6);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	pointer-events: none;
}

.compare__label--before {
	left: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
}

.compare__label--after {
	right: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
}

@media (max-width: 780px) {
	.rooftop-transform__intro {
		grid-template-columns: 1fr;
		align-items: start;
	}

	.compare {
		aspect-ratio: 4 / 3;
	}
}

/* ==========================================================================
   Página EL ROOFTOP — "Momentos Amanay"
   ========================================================================== */

.rooftop-moments {
	background: linear-gradient(
		to bottom,
		var(--color-teal) 0%,
		var(--color-teal) 55%,
		var(--color-hero-fade) 100%
	);
	padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
}

.rooftop-moments h2 {
	color: var(--color-ivory);
	text-align: center;
	margin-bottom: clamp(2rem, 1rem + 4vw, 4rem);
}

.photo-card--postal img {
	width: 100%;
	height: auto;
	filter: drop-shadow(0 14px 26px rgba(0, 20, 30, 0.3));
}

/* ==========================================================================
   Página EL ROOFTOP — contacto + CTA final
   ========================================================================== */

.rooftop-closing {
	display: grid;
	grid-template-columns: minmax(0, 46%) minmax(0, 54%);
	align-items: stretch;
	background: var(--color-hero-fade);
	color: var(--color-teal);
}

.rooftop-closing__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
	padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) clamp(1.5rem, 1rem + 3vw, 4rem);
}

.rooftop-closing__content h2 {
	margin-bottom: -0.5rem;
}

.rooftop-closing__content .hero__cta {
	justify-content: flex-start;
}

.rooftop-closing__content .hero__cta .btn-link {
	color: var(--color-teal);
	border-color: var(--color-teal);
}

.rooftop-closing__contact {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1.5rem, 1rem + 2vw, 3rem);
}

.rooftop-closing__contact-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.6rem;
	max-width: 12rem;
}

.rooftop-closing__contact-item img {
	width: 32px;
	height: 32px;
}

.rooftop-closing__map,
.rooftop-closing__photo {
	min-height: 26rem;
}

.rooftop-closing__map iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.rooftop-closing__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (max-width: 900px) {
	.rooftop-closing {
		grid-template-columns: 1fr;
	}

	.rooftop-closing__map,
	.rooftop-closing__photo {
		order: -1;
		min-height: 18rem;
	}

	.rooftop-closing__content {
		text-align: center;
		align-items: center;
	}

	.rooftop-closing__content .hero__cta,
	.rooftop-closing__contact {
		justify-content: center;
	}

	.rooftop-closing__contact-item {
		align-items: center;
	}
}

/* ==========================================================================
   Paginas legales (page.php) — texto largo, sin maquetacion a medida
   ========================================================================== */

.legal-page {
	padding-top: clamp(7rem, 6rem + 3vw, 10rem);
	padding-bottom: clamp(3rem, 2rem + 4vw, 6rem);
	background: var(--color-cream-bg);
}

.legal-page__inner {
	max-width: 46rem;
}

.legal-page h1 {
	font-size: var(--h2-size);
	margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.legal-page__content h2 {
	font-size: var(--h3-size);
	margin-top: 2.5em;
	margin-bottom: 0.75em;
}

.legal-page__content h2:first-child {
	margin-top: 0;
}

.legal-page__content p {
	margin-bottom: 1.1em;
}

.legal-page__content ul {
	margin: 0 0 1.1em;
	padding-left: 1.4em;
	list-style: disc;
}

.legal-page__content li {
	margin-bottom: 0.4em;
}

.legal-page__content a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.legal-page__content a:hover,
.legal-page__content a:focus-visible {
	opacity: 0.7;
}

.legal-page__content strong {
	font-weight: 600;
}