/* MARÈS · layout — márgenes de sección, retículas editoriales, cabeceras, hero y pie. */

/* ---------- Envoltorio y ritmo vertical ---------- */

.mares-ancho {
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: var(--margen);
}

.mares-seccion { padding-block: clamp(72px, 9vw, 110px); }
.mares-seccion--amplia { padding-block: clamp(96px, 12vw, 160px); }

.mares-seccion--mares { background: var(--mares); }
.mares-seccion--mar { background: var(--mar); color: var(--cal); }
.mares-seccion--mar h1,
.mares-seccion--mar h2,
.mares-seccion--mar h3 { color: var(--cal); }
.mares-seccion--mar .mares-eyebrow { color: rgba(250, 248, 244, 0.6); }

.mares-filete { border-top: 1px solid var(--linea); }

/* ---------- Cabeceras ---------- */

.mares-cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	min-height: 88px;
	padding-inline: var(--margen);
}

/* Sólida sobre cal, con filete inferior. La usan todas las páginas interiores. */
.mares-cabecera--solida {
	background: var(--cal);
	border-bottom: 1px solid var(--linea);
}

/* Transparente superpuesta al hero de portada. */
.mares-cabecera--transparente {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 20;
	color: var(--cal);
	background: transparent;
}

.mares-cabecera--transparente a { color: var(--cal); }

.mares-logo {
	font-family: var(--display);
	font-size: 24px;
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none;
	color: inherit;
}

.mares-nav {
	display: none;
	gap: 34px;
	font-size: 13px;
	letter-spacing: 0.04em;
}

/* La navegación reserva dos líneas: «Konzierge-Service» no cabe en una. */
.mares-nav a {
	color: inherit;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	min-height: 2.8em;
	max-width: 12ch;
	text-align: center;
	line-height: 1.4;
}

.mares-nav a:hover { text-decoration: underline; text-underline-offset: 6px; }
.mares-nav [aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }

.mares-cabecera__acciones {
	display: flex;
	align-items: center;
	gap: 20px;
}

.mares-cabecera__acciones .mares-btn { min-height: 46px; padding-inline: 24px; }

@media (min-width: 1080px) {
	.mares-nav { display: flex; }
	.mares-cabecera__hamburguesa { display: none; }
}

.mares-cabecera__hamburguesa {
	min-width: 44px;
	min-height: 44px;
	background: none;
	border: 0;
	color: inherit;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
}

/* Menú móvil a pantalla completa: fondo mar, enlaces en display a 42 px. */
.mares-menu-movil {
	position: fixed;
	inset: 0;
	z-index: 60;
	background: var(--mar);
	color: var(--cal);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 24px var(--margen) 40px;
}

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

.mares-menu-movil__enlaces {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-block: auto;
}

.mares-menu-movil__enlaces a {
	font-family: var(--display);
	font-size: 42px;
	font-weight: 300;
	line-height: 1.1;
	color: var(--cal);
	text-decoration: none;
}

/* ---------- Hero de portada (1b) ---------- */

.mares-hero {
	position: relative;
	min-height: 900px;
	display: flex;
	align-items: flex-end;
	overflow: visible;
}

@media (max-width: 899px) {
	.mares-hero { min-height: 620px; }
}

.mares-hero__medio {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.mares-hero__medio img,
.mares-hero__medio video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Velo obligatorio: garantiza 4,5:1 en la banda del titular. Si la foto es muy
   luminosa se sube la opacidad del velo, nunca se aclara el texto. */
.mares-hero__velo {
	position: absolute;
	inset: 0;
	background: var(--velo-hero);
	pointer-events: none;
}

.mares-hero__texto {
	position: relative;
	z-index: 2;
	max-width: 760px;
	padding: 0 var(--margen) 250px;
	color: var(--cal);
}

@media (max-width: 899px) {
	.mares-hero__texto { padding-bottom: 160px; }
}

.mares-hero__texto h1 { color: var(--cal); }

/* Buscador superpuesto: sobresale 56 px por debajo del hero. */
.mares-buscador {
	position: absolute;
	left: var(--margen);
	right: var(--margen);
	bottom: -56px;
	z-index: 10;
	background: var(--cal);
	box-shadow: var(--wp--preset--shadow--flotante);
	padding: 24px;
}

@media (max-width: 899px) {
	.mares-buscador {
		position: static;
		margin: -40px var(--margen) 0;
		box-shadow: var(--wp--preset--shadow--flotante-movil);
	}
}

.mares-buscador__pestanas {
	display: flex;
	gap: 28px;
	border-bottom: 1px solid var(--linea);
	margin-bottom: 24px;
}

.mares-buscador__pestana {
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	padding: 0 0 14px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--tinta-2);
	cursor: pointer;
	margin-bottom: -1px;
}

.mares-buscador__pestana[aria-selected="true"] {
	color: var(--tinta);
	border-bottom-color: var(--mar);
}

.mares-buscador__campos {
	display: grid;
	gap: 20px;
}

@media (min-width: 900px) {
	.mares-buscador__campos {
		grid-template-columns: 1.4fr 1fr 1fr 1fr auto;
		align-items: end;
	}

	.mares-buscador__campos .mares-btn { min-height: 64px; }
}

/* Compensa los 56 px que el buscador invade de la sección siguiente. */
.mares-hero + * { padding-top: clamp(96px, 12vw, 166px); }

@media (max-width: 899px) {
	.mares-hero + * { padding-top: clamp(72px, 9vw, 110px); }
}

/* ---------- Retículas editoriales ---------- */

.mares-grid { display: grid; gap: 36px; }

@media (min-width: 900px) {
	.mares-grid { gap: 64px; }

	/* Selección de villas: una grande y dos apiladas. La asimetría es intencional. */
	.mares-grid--editorial { grid-template-columns: 1.25fr 1fr; }
	.mares-grid--yates { grid-template-columns: 1fr 1.2fr; }
	.mares-grid--zonas { grid-template-columns: repeat(4, 1fr); gap: 36px; }
	.mares-grid--tres { grid-template-columns: repeat(3, 1fr); }
	.mares-grid--dos { grid-template-columns: 1fr 1fr; }
	.mares-grid--archivo { grid-template-columns: 268px 1fr; }

	/* Desfases: el ritmo del listado y de la home depende de ellos. */
	.mares-desfase-72 { margin-top: 72px; }
	.mares-desfase-56 { margin-top: 56px; }
}

/* Columna de filtros pegajosa a 24 px del borde. */
.mares-pegajoso {
	position: sticky;
	top: 24px;
	align-self: start;
}

@media (max-width: 899px) {
	.mares-pegajoso { position: static; }
}

/* ---------- Propuesta de valor ---------- */

.mares-numeral {
	font-family: var(--display);
	font-size: 44px;
	font-weight: 300;
	line-height: 1;
	color: var(--terracota);
	display: block;
	margin-bottom: 20px;
}

/* ---------- CTA final ---------- */

.mares-cta {
	position: relative;
	min-height: 520px;
	display: grid;
	place-items: center;
	text-align: center;
	color: var(--cal);
	overflow: hidden;
}

.mares-cta__medio { position: absolute; inset: 0; }
.mares-cta__medio img { width: 100%; height: 100%; object-fit: cover; }

.mares-cta__velo {
	position: absolute;
	inset: 0;
	background: var(--velo-plano);
}

.mares-cta__texto {
	position: relative;
	z-index: 2;
	max-width: 700px;
	padding-inline: var(--margen);
}

.mares-cta__texto h2 { color: var(--cal); }

/* ---------- Pie ---------- */

.mares-pie {
	background: var(--pie);
	color: rgba(250, 248, 244, 0.75);
	padding-block: 80px 40px;
	font-size: 14px;
}

.mares-pie a { color: rgba(250, 248, 244, 0.75); text-decoration: none; }
.mares-pie a:hover { color: var(--cal); text-decoration: underline; }

.mares-pie__columnas {
	display: grid;
	gap: 40px;
}

@media (min-width: 900px) {
	.mares-pie__columnas { grid-template-columns: repeat(4, 1fr); gap: 64px; }
}

.mares-pie__titulo {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--cal);
	margin-bottom: 20px;
}

.mares-pie__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.mares-pie__legal {
	margin-top: 64px;
	padding-top: 28px;
	border-top: 1px solid rgba(250, 248, 244, 0.15);
	display: flex;
	flex-wrap: wrap;
	gap: 16px 32px;
	justify-content: space-between;
	font-size: 12px;
	color: rgba(250, 248, 244, 0.5);
}

/* ---------- Cabecera de sección (eyebrow + titular + enlace a la derecha) ---------- */

.mares-seccion__cabecera {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 56px;
}

.mares-seccion__cabecera h2 { max-width: 18ch; }

.mares-enlace-seccion {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--tinta);
	border-bottom: 1px solid var(--linea);
	padding-bottom: 6px;
	white-space: nowrap;
}

.mares-enlace-seccion:hover { color: var(--terracota); border-bottom-color: var(--terracota); }

/* ---------- Logotipo a dos líneas ---------- */

.mares-logo { line-height: 1; }

.mares-logo small {
	display: block;
	font-family: var(--texto);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.34em;
	margin-top: 5px;
	opacity: 0.7;
}

/* ---------- 3 · Propuesta de valor ---------- */

.mares-valor { display: grid; gap: 48px; }

@media (min-width: 900px) {
	.mares-valor { grid-template-columns: repeat(3, 1fr); gap: 64px; }
}

.mares-valor h3 { margin-bottom: 16px; }
.mares-valor p { color: var(--tinta-2); max-width: 34ch; }

/* ---------- 4 · Selección de villas (asimetría intencional) ---------- */

@media (min-width: 900px) {
	.mares-seleccion { display: grid; grid-template-columns: 1.25fr 1fr; gap: 64px; align-items: start; }
	.mares-seleccion__secundarias { display: grid; gap: 56px; margin-top: 72px; }
}

@media (max-width: 899px) {
	.mares-seleccion { display: grid; gap: 48px; }
	.mares-seleccion__secundarias { display: grid; gap: 48px; }
}

/* ---------- 5 · Bloque de yates ---------- */

@media (min-width: 900px) {
	.mares-yates-promo { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: center; }
	.mares-yates-promo__imagenes { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
	.mares-yates-promo__imagenes > :last-child { margin-top: 64px; }
}

@media (max-width: 899px) {
	.mares-yates-promo { display: grid; gap: 48px; }
	.mares-yates-promo__imagenes { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
}

.mares-acciones { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 36px; }

/* ---------- 6 · Guía de zonas ---------- */

.mares-zonas { display: grid; gap: 32px; grid-template-columns: repeat(2, 1fr); }

@media (min-width: 900px) {
	.mares-zonas { grid-template-columns: repeat(4, 1fr); gap: 36px; }
}

.mares-zonas h3 { font-size: 24px; margin: 18px 0 8px; }
.mares-zonas p { color: var(--tinta-2); font-size: 15px; }

/* ---------- 7 · Reseñas ---------- */

@media (min-width: 900px) {
	.mares-resenas { display: grid; grid-template-columns: 1.25fr 1fr; gap: 64px; align-items: start; }
	.mares-resenas__cortas { display: grid; gap: 40px; margin-top: 12px; }
}

@media (max-width: 899px) {
	.mares-resenas { display: grid; gap: 48px; }
	.mares-resenas__cortas { display: grid; gap: 36px; }
}

.mares-resenas__pie {
	margin-top: 64px;
	padding-top: 24px;
	border-top: 1px solid rgba(26, 26, 26, .14);
	font-size: 14px;
	color: var(--tinta-2);
}

/* ---------- 8 · Concierge ---------- */

@media (min-width: 900px) {
	.mares-concierge { display: grid; grid-template-columns: 1fr 1.15fr; gap: 80px; align-items: center; }
}

@media (max-width: 899px) {
	.mares-concierge { display: grid; gap: 40px; }
}

.mares-servicios {
	list-style: none;
	margin: 36px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 40px;
}

.mares-servicios li {
	padding: 16px 0;
	border-top: 1px solid var(--linea);
	font-size: 15px;
}

/* Selección de portada servida por Query Loop: el primer resultado ocupa las dos
   filas de la izquierda; el segundo baja 72 px. Misma asimetría que la maqueta,
   pero con datos reales. */

.mares-seleccion-query {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 48px;
}

@media (min-width: 900px) {
	.mares-seleccion-query {
		grid-template-columns: 1.25fr 1fr;
		gap: 64px;
		align-items: start;
	}

	.mares-seleccion-query > li:first-child { grid-row: 1 / 3; }
	.mares-seleccion-query > li:nth-child(2) { margin-top: 72px; }
}