/*
Theme Name: Sa Mata Grossa
Theme URI: https://www.samatagrossa.com
Author: Sa Mata Grossa
Description: Tema a medida para la finca Sa Mata Grossa (Búger, Mallorca). Portada de una sola página, bilingüe ES/EN, con galería y formulario de solicitud de reserva.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: sa-mata-grossa
*/

/* =========================================================================
   1. Base
   ====================================================================== */

:root {
	--bg:          #faf8f4;
	--bg-alt:      #f2ede4;
	--bg-deep:     #2b2822;
	--ink:         #2a2622;
	--ink-soft:    #5f584e;
	--ink-faint:   #8c8579;
	--line:        #e3dbcd;
	--accent:      #a75c3f;
	--accent-dark: #8a4830;
	--olive:       #7d8464;
	--white:       #ffffff;

	--serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
	--sans:  "Jost", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

	--wrap: 1240px;
	--gut: clamp(1.25rem, 4vw, 3rem);
	--sec: clamp(4.5rem, 10vw, 9rem);

	--ease: cubic-bezier(.22, .61, .36, 1);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--sans);
	font-weight: 300;
	font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

body.smg-locked { overflow: hidden; }

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

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

h1, h2, h3, h4 {
	font-family: var(--serif);
	font-weight: 500;
	line-height: 1.12;
	margin: 0;
	letter-spacing: -.01em;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--accent); color: #fff; }

/* ── Barra de desplazamiento ───────────────────────────────────────
   Fina, sin relieve y en los tonos de la web. El pulsador lleva un
   borde transparente recortado al relleno: así parece más estrecho y
   flotando sobre el fondo, en vez de pegado al borde de la ventana. */

/* Se nombra también la tabla que se desplaza a lo ancho en móvil porque
   «scrollbar-width» no se hereda: sin esto, esa barra se quedaría con el
   grosor de fábrica mientras la de la página va fina. */
html,
.smg-prose__table,
.smg-nav {
	scrollbar-width: thin;                        /* Firefox y Chrome 121+ */
	scrollbar-color: var(--line) transparent;
}

::-webkit-scrollbar { width: 11px; height: 11px; }

::-webkit-scrollbar-track { background: var(--bg); }

::-webkit-scrollbar-thumb {
	background: var(--line);
	background-clip: padding-box;
	border: 3px solid transparent;
	border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); background-clip: padding-box; }
::-webkit-scrollbar-thumb:active { background: var(--accent); background-clip: padding-box; }

::-webkit-scrollbar-corner { background: var(--bg); }

.smg-skip {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--ink); color: #fff; padding: .75rem 1.25rem;
}
.smg-skip:focus { left: 1rem; top: 1rem; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* =========================================================================
   2. Utilidades de composición
   ====================================================================== */

.smg-wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gut);
}

.smg-section { padding-block: var(--sec); }
.smg-section--alt { background: var(--bg-alt); }

.smg-eyebrow {
	font-family: var(--sans);
	font-size: .75rem;
	font-weight: 400;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 1.1rem;
	display: flex;
	align-items: center;
	gap: .75rem;
}
.smg-eyebrow::after {
	content: "";
	flex: 0 0 2.5rem;
	height: 1px;
	background: currentColor;
	opacity: .45;
}
.smg-eyebrow--center { justify-content: center; }
.smg-eyebrow--center::before {
	content: "";
	flex: 0 0 2.5rem;
	height: 1px;
	background: currentColor;
	opacity: .45;
}

.smg-h2 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem); }
.smg-h3 { font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem); }

.smg-lead {
	font-size: clamp(1.0625rem, 1rem + .45vw, 1.3125rem);
	line-height: 1.8;
	color: var(--ink-soft);
}

.smg-center { text-align: center; }
.smg-measure { max-width: 62ch; margin-inline: auto; }

/* Aparición suave al hacer scroll.
   Sólo se oculta si hay JavaScript (clase .smg-js en <html>): así, si el JS
   falla o está desactivado, el contenido se ve igualmente. */
.smg-js .smg-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.smg-js .smg-reveal.is-in { opacity: 1; transform: none; }

/* Botones */
.smg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6rem;
	font-family: var(--sans);
	font-size: .8125rem;
	font-weight: 400;
	letter-spacing: .16em;
	text-transform: uppercase;
	padding: 1.05rem 2.1rem;
	border: 1px solid var(--accent);
	background: var(--accent);
	color: #fff;
	cursor: pointer;
	transition: background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
}
.smg-btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); transform: translateY(-2px); }

.smg-btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.smg-btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

.smg-btn--light { background: transparent; color: #fff; border-color: rgba(255,255,255,.65); }
.smg-btn--light:hover { background: #fff; border-color: #fff; color: var(--ink); }

/* =========================================================================
   3. Cabecera
   ====================================================================== */

.smg-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 100;
	transition: background .45s var(--ease), box-shadow .45s var(--ease), padding .45s var(--ease);
	padding-block: 1.5rem;
}
.smg-header.is-solid {
	background: rgba(250, 248, 244, .96);
	backdrop-filter: saturate(180%) blur(12px);
	box-shadow: 0 1px 0 var(--line);
	padding-block: .85rem;
}

.smg-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

.smg-brand {
	font-family: var(--serif);
	font-size: clamp(1.05rem, 1rem + .45vw, 1.35rem);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #fff;
	white-space: nowrap;
	transition: color .45s var(--ease);
}
.smg-header.is-solid .smg-brand { color: var(--ink); }

/* El hueco se estrecha cuando la pantalla va justa y recupera aire en
   monitores anchos. Con siete secciones y cuatro idiomas, estos huecos
   suman más de 160px, así que es aquí donde hay margen de maniobra. */
.smg-nav { display: flex; align-items: center; gap: clamp(.85rem, 1.5vw, 2.1rem); }

.smg-nav__link {
	position: relative;
	font-size: .8125rem;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: rgba(255,255,255,.92);
	padding-block: .35rem;
	transition: color .45s var(--ease);

	/* Cada enlace, en una sola línea. Sin esto el navegador los encoge
	   cuando va justo de sitio y parte los nombres de dos palabras
	   («The house» quedaba en dos renglones). */
	white-space: nowrap;
	flex-shrink: 0;
}
.smg-header.is-solid .smg-nav__link { color: var(--ink-soft); }

.smg-nav__link::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 100%; height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .4s var(--ease);
}
.smg-nav__link:hover::after,
.smg-nav__link.is-active::after { transform: scaleX(1); transform-origin: left; }
.smg-header.is-solid .smg-nav__link:hover,
.smg-header.is-solid .smg-nav__link.is-active { color: var(--accent); }

/* Selector de idioma */
.smg-langs {
	display: flex;
	align-items: center;
	gap: .4rem;
	font-size: .75rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding-left: .85rem;
	border-left: 1px solid rgba(255,255,255,.28);
}
.smg-header.is-solid .smg-langs { border-left-color: var(--line); }

.smg-langs__link {
	color: rgba(255,255,255,.65);
	padding-block: .2rem;
	transition: color .35s var(--ease), border-color .35s var(--ease);
	border-bottom: 1px solid transparent;
}
.smg-langs__link:hover { color: #fff; }
.smg-langs__link.is-current { color: #fff; border-bottom-color: currentColor; }

.smg-langs__sep { color: rgba(255,255,255,.3); }

.smg-header.is-solid .smg-langs__link { color: var(--ink-faint); }
.smg-header.is-solid .smg-langs__link:hover { color: var(--accent); }
.smg-header.is-solid .smg-langs__link.is-current { color: var(--accent); }
.smg-header.is-solid .smg-langs__sep { color: var(--line); }

/* Botón hamburguesa */
.smg-burger {
	display: none;
	width: 44px; height: 44px;
	border: 0; background: none; cursor: pointer;
	padding: 0;
	position: relative;
	z-index: 120;
}
.smg-burger span {
	position: absolute;
	left: 10px; right: 10px;
	height: 1.5px;
	background: #fff;
	transition: transform .4s var(--ease), opacity .3s var(--ease), background .4s var(--ease);
}
.smg-burger span:nth-child(1) { top: 16px; }
.smg-burger span:nth-child(2) { top: 22px; }
.smg-burger span:nth-child(3) { top: 28px; }
.smg-header.is-solid .smg-burger span { background: var(--ink); }

.smg-burger.is-open span { background: var(--ink); }
.smg-burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.smg-burger.is-open span:nth-child(2) { opacity: 0; }
.smg-burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* El menú pasa a hamburguesa a 1240px.
   Medido en alemán, que es el idioma de rótulos más largos: los siete
   enlaces suman 590px, el selector de idiomas 143px y los huecos 130px.
   Con la marca y los márgenes, el mínimo real son 1211px. Por debajo de
   1240 no cabe, y antes el navegador lo disimulaba partiendo los nombres
   en dos líneas y recortando el final fuera de la pantalla. */
@media (max-width: 1240px) {
	.smg-burger { display: block; }

	.smg-nav {
		position: fixed;
		inset: 0;
		flex-direction: column;
		justify-content: center;
		gap: 1.75rem;
		background: var(--bg);
		transform: translateX(100%);
		transition: transform .55s var(--ease);
		z-index: 110;

		/* Con siete secciones más los idiomas, en un móvil de pantalla corta
		   el menú no cabe de una vez. Así se puede desplazar en vez de
		   quedar enlaces inalcanzables fuera de la pantalla. */
		overflow-y: auto;
		padding-block: 5rem;
	}
	.smg-nav.is-open { transform: none; }

	.smg-nav__link {
		font-family: var(--serif);
		font-size: 1.85rem;
		letter-spacing: .04em;
		text-transform: none;
		color: var(--ink) !important;
	}

	.smg-langs {
		margin-top: 1.25rem;
		padding-left: 0;
		border-left: 0;
		gap: .6rem;
		font-size: .875rem;
	}
	.smg-langs__link { color: var(--ink-faint) !important; }
	.smg-langs__link.is-current { color: var(--accent) !important; }
	.smg-langs__sep { color: var(--line) !important; }
}

/* =========================================================================
   4. Portada (hero)
   ====================================================================== */

.smg-hero {
	position: relative;
	min-height: 100svh;
	display: grid;
	place-items: center;
	text-align: center;
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}

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

/* Fotos de portada superpuestas, con fundido entre ellas. */
.smg-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.8s var(--ease);
}
.smg-hero__slide.is-active { opacity: 1; }

/* Puntos del carrusel */
.smg-hero__dots {
	position: absolute;
	bottom: 2.6rem;
	right: var(--gut);
	z-index: 3;
	display: flex;
	gap: .65rem;
}
.smg-hero__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .8);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	transition: background .4s var(--ease), transform .4s var(--ease);
}
.smg-hero__dot:hover { transform: scale(1.3); }
.smg-hero__dot.is-current { background: #fff; }

@media (max-width: 560px) {
	.smg-hero__dots { bottom: 1.9rem; }
}

.smg-hero::after {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(180deg, rgba(20,17,14,.55) 0%, rgba(20,17,14,.15) 35%, rgba(20,17,14,.65) 100%);
}

.smg-hero__inner { padding: 8rem var(--gut) 6rem; max-width: 60rem; }

.smg-hero__eyebrow {
	font-size: .8125rem;
	letter-spacing: .34em;
	text-transform: uppercase;
	margin: 0 0 1.6rem;
	color: rgba(255,255,255,.9);
}

.smg-hero__title {
	font-size: clamp(3rem, 1.6rem + 6.4vw, 7rem);
	font-weight: 400;
	letter-spacing: .01em;
	margin: 0 0 1.4rem;
	text-shadow: 0 2px 30px rgba(0,0,0,.25);
}

.smg-hero__sub {
	font-size: clamp(1.05rem, 1rem + .5vw, 1.4rem);
	font-weight: 300;
	line-height: 1.7;
	color: rgba(255,255,255,.93);
	margin: 0 0 2.75rem;
}

.smg-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: center;
}

.smg-hero__scroll {
	position: absolute;
	bottom: 2.25rem; left: 50%;
	transform: translateX(-50%);
	font-size: .6875rem;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: rgba(255,255,255,.8);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .65rem;
}
.smg-hero__scroll::after {
	content: "";
	width: 1px; height: 3rem;
	background: linear-gradient(rgba(255,255,255,.85), rgba(255,255,255,0));
	animation: smg-drop 2.4s var(--ease) infinite;
}
@keyframes smg-drop {
	0%   { transform: scaleY(0); transform-origin: top; }
	45%  { transform: scaleY(1); transform-origin: top; }
	55%  { transform: scaleY(1); transform-origin: bottom; }
	100% { transform: scaleY(0); transform-origin: bottom; }
}

/* =========================================================================
   5. Intro + cifras
   ====================================================================== */

.smg-intro__text { max-width: 56ch; margin-inline: auto; }

/* Las líneas que separan las cifras no son bordes: son el fondo de la
   retícula asomando por huecos de 1px. Por eso ninguna fila puede quedar
   a medias — un hueco se vería como un bloque de color macizo. Con cinco
   casillas hay que repartirlas a mano en cada tamaño de pantalla. */
.smg-stats {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1px;
	margin-top: clamp(3rem, 6vw, 4.5rem);
	background: var(--line);
	border-block: 1px solid var(--line);
}

.smg-stat {
	background: var(--bg);
	padding: clamp(1.75rem, 3vw, 2.5rem) 1rem;
	text-align: center;
}
.smg-section--alt .smg-stat { background: var(--bg-alt); }

.smg-stat__n {
	display: block;
	font-family: var(--serif);
	font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem);
	line-height: 1;
	color: var(--accent);
	margin-bottom: .5rem;
}
.smg-stat__l {
	font-size: .75rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ink-faint);
	line-height: 1.5;
}

/* Pantallas medianas: tres arriba y dos abajo. Se hace sobre una retícula
   de seis columnas para que las dos filas queden completas (3×2 y 2×3). */
@media (max-width: 1000px) {
	.smg-stats { grid-template-columns: repeat(6, 1fr); }
	.smg-stat { grid-column: span 2; }
	.smg-stat:nth-child(4),
	.smg-stat:nth-child(5) { grid-column: span 3; }
}

/* Móvil: dos columnas y la última cifra ocupando el ancho entero. */
@media (max-width: 620px) {
	.smg-stats { grid-template-columns: repeat(2, 1fr); }
	.smg-stat { grid-column: auto; }
	.smg-stat:nth-child(4) { grid-column: auto; }
	.smg-stat:nth-child(5) { grid-column: 1 / -1; }
}

/* =========================================================================
   6. Bloques partidos (imagen + texto)
   ====================================================================== */

.smg-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: clamp(2.5rem, 6vw, 5.5rem);
}
.smg-split--flip .smg-split__media { order: 2; }

.smg-split__media { position: relative; }
.smg-split__media img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}
.smg-split__media::after {
	content: "";
	position: absolute;
	inset: auto -1.25rem -1.25rem auto;
	width: 55%; height: 55%;
	border: 1px solid var(--accent);
	opacity: .35;
	z-index: -1;
}
.smg-split--flip .smg-split__media::after { inset: auto auto -1.25rem -1.25rem; }

@media (max-width: 860px) {
	.smg-split { grid-template-columns: 1fr; }
	.smg-split--flip .smg-split__media { order: 0; }
	.smg-split__media img { aspect-ratio: 4 / 3; }
}

/* La otra casa: la foto es apaisada, así que no le va el recorte vertical
   que usan los demás bloques partidos. */
#colonia .smg-split__media img { aspect-ratio: 4 / 3; }
#colonia .smg-split__media a { display: block; overflow: hidden; }
#colonia .smg-split__media img { transition: transform 1.1s var(--ease); }
#colonia .smg-split__media a:hover img { transform: scale(1.03); }

/* Lista de características */
.smg-feats {
	list-style: none;
	margin: 2.25rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .7rem 1.5rem;
}
.smg-feats li {
	position: relative;
	padding-left: 1.4rem;
	font-size: .9375rem;
	color: var(--ink-soft);
	line-height: 1.6;
}
.smg-feats li::before {
	content: "";
	position: absolute;
	left: 0; top: .62em;
	width: 6px; height: 6px;
	border: 1px solid var(--accent);
	transform: rotate(45deg);
}
@media (max-width: 520px) { .smg-feats { grid-template-columns: 1fr; } }

/* Rejilla de 3 imágenes bajo cada bloque */
.smg-trio {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(.65rem, 1.4vw, 1.15rem);
	margin-top: clamp(2.5rem, 5vw, 4rem);
}
.smg-trio img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform .8s var(--ease);
}
.smg-trio a { overflow: hidden; display: block; }
.smg-trio a:hover img { transform: scale(1.05); }

@media (max-width: 720px) {
	.smg-trio { grid-template-columns: repeat(2, 1fr); }
	.smg-trio > :last-child { display: none; }
}

/* =========================================================================
   7. Banda del campo
   ====================================================================== */

.smg-band {
	position: relative;
	min-height: clamp(28rem, 68vh, 40rem);
	display: grid;
	place-items: center;
	text-align: center;
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}
.smg-band__media { position: absolute; inset: 0; z-index: -2; }
.smg-band__media img { width: 100%; height: 100%; object-fit: cover; }
.smg-band::after {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	background: rgba(24, 20, 16, .42);
}
.smg-band__inner { padding: clamp(3rem, 8vw, 6rem) var(--gut); max-width: 46rem; }
.smg-band .smg-eyebrow { color: rgba(255,255,255,.85); }
.smg-band h2 { margin-bottom: 1.25rem; }
.smg-band p { color: rgba(255,255,255,.92); font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem); }

/* =========================================================================
   8. Galería + lightbox
   ====================================================================== */

.smg-gal {
	columns: 3;
	column-gap: clamp(.65rem, 1.4vw, 1.15rem);
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.smg-gal__item {
	display: block;
	break-inside: avoid;
	margin-bottom: clamp(.65rem, 1.4vw, 1.15rem);
	overflow: hidden;
	position: relative;
	background: var(--bg-alt);
}
.smg-gal__img { width: 100%; transition: transform .9s var(--ease), opacity .5s var(--ease); }
.smg-gal__item:hover .smg-gal__img { transform: scale(1.045); opacity: .92; }

@media (max-width: 900px) { .smg-gal { columns: 2; } }
@media (max-width: 560px) { .smg-gal { columns: 1; } }

.smg-lb {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: rgba(18, 15, 12, .95);
	display: none;
	place-items: center;
	padding: clamp(1rem, 4vw, 3rem);
}
.smg-lb.is-open { display: grid; }
.smg-lb img {
	max-width: 100%;
	max-height: 86svh;
	object-fit: contain;
	box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.smg-lb__btn {
	position: absolute;
	background: none;
	border: 0;
	color: rgba(255,255,255,.85);
	cursor: pointer;
	font-size: 2rem;
	line-height: 1;
	padding: 1rem;
	transition: color .3s var(--ease), transform .3s var(--ease);
}
.smg-lb__btn:hover { color: #fff; transform: scale(1.12); }
.smg-lb__close { top: .5rem; right: .75rem; font-size: 2.4rem; }
.smg-lb__prev { left: .25rem; top: 50%; transform: translateY(-50%); }
.smg-lb__next { right: .25rem; top: 50%; transform: translateY(-50%); }
.smg-lb__prev:hover { transform: translateY(-50%) scale(1.12); }
.smg-lb__next:hover { transform: translateY(-50%) scale(1.12); }
.smg-lb__count {
	position: absolute;
	bottom: 1.1rem; left: 50%;
	transform: translateX(-50%);
	color: rgba(255,255,255,.7);
	font-size: .8125rem;
	letter-spacing: .16em;
}

/* =========================================================================
   9. Disponibilidad
   ====================================================================== */

.smg-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1rem, 2.4vw, 1.75rem);
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.smg-card {
	background: var(--bg);
	border: 1px solid var(--line);
	padding: clamp(1.75rem, 3vw, 2.5rem);
}
.smg-section--alt .smg-card { background: var(--bg); }
.smg-card h3 { font-size: 1.375rem; margin-bottom: .75rem; }
.smg-card p { color: var(--ink-soft); font-size: .9375rem; margin: 0; }

@media (max-width: 800px) { .smg-cards { grid-template-columns: 1fr; } }

.smg-disp__cta { margin-top: clamp(2.5rem, 5vw, 3.5rem); text-align: center; }

/* ── Páginas interiores (sin foto a pantalla completa) ─────────── */

/* Deja sitio para la cabecera fija, que aquí va sólida desde el principio. */
.smg-page { padding-top: clamp(4.5rem, 8vw, 6rem); }

.smg-back {
	font-size: .8125rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ink-faint);
	transition: color .35s var(--ease);
}
.smg-back:hover { color: var(--accent); }

/* ── El entorno: mapa y distancias ─────────────────────────────── */

.smg-zona__mapa {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: clamp(2.5rem, 5vw, 4.5rem);
	align-items: center;
	margin-top: clamp(3rem, 6vw, 4.5rem);
}
@media (max-width: 900px) {
	.smg-zona__mapa { grid-template-columns: 1fr; }
}

.smg-map { margin: 0; }
.smg-map svg { width: 100%; height: auto; display: block; overflow: visible; }

.smg-map__island {
	fill: #e6dcc8;
	stroke: none;
	stroke-linejoin: round;
}

.smg-map__title {
	font-family: var(--serif);
	font-size: 38px;
	letter-spacing: .26em;
	fill: var(--ink-faint);
	opacity: .5;
}

.smg-map__town { fill: var(--ink-faint); }

.smg-map__label {
	font-family: var(--sans);
	font-size: 23px;
	font-weight: 400;
	fill: var(--ink-soft);
}

.smg-map__halo { fill: var(--accent); opacity: .14; }
.smg-map__pin  { fill: var(--accent); }
.smg-map__dot  { fill: #fff; }

.smg-map__here {
	font-family: var(--serif);
	font-size: 34px;
	fill: var(--ink);
}
.smg-map__village {
	font-family: var(--sans);
	font-size: 20px;
	letter-spacing: .2em;
	fill: var(--ink-faint);
}

/* En pantallas estrechas el SVG se reduce y los rótulos quedarían
   ilegibles. Se ocultan los de los pueblos —que están en la lista de
   abajo— y se agranda el de la finca, que es el que importa. */
@media (max-width: 720px) {
	.smg-map__label { display: none; }
	.smg-map__title { font-size: 52px; }
	.smg-map__here { font-size: 48px; }
	.smg-map__village { font-size: 34px; }
	.smg-map__town { r: 9; }
}

/* Lista de distancias */
.smg-dist { list-style: none; margin: 0; padding: 0; }

.smg-dist__row {
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	align-items: baseline;
	gap: .5rem;
	padding: .62rem 0;
	border-bottom: 1px solid var(--line);
	font-size: .9375rem;
}
.smg-dist__row:first-child { border-top: 1px solid var(--line); }

.smg-dist__place { color: var(--ink); }
.smg-dist__dots {
	border-bottom: 1px dotted var(--line);
	transform: translateY(-.28em);
}
.smg-dist__num {
	color: var(--ink-faint);
	font-variant-numeric: tabular-nums;
	min-width: 3.6rem;
	text-align: right;
}
.smg-dist__num--time { color: var(--accent); min-width: 4.2rem; }

/* Cuatro maneras de pasar el día */
.smg-dias {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: clamp(1.75rem, 3.5vw, 3rem);
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.smg-dia { border-top: 1px solid var(--line); padding-top: 1.5rem; }
.smg-dia__n {
	display: block;
	font-family: var(--serif);
	font-size: 1.5rem;
	color: var(--accent);
	margin-bottom: .6rem;
}
.smg-dia__t { font-size: 1.3rem; margin-bottom: .6rem; }
.smg-dia__d { color: var(--ink-soft); font-size: .9375rem; margin: 0; }

/* ── Texto largo (páginas legales) ─────────────────────────────── */

.smg-prose {
	max-width: 46rem;
	margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
	color: var(--ink-soft);
}
.smg-prose > :first-child { margin-top: 0; }

.smg-prose h2 {
	font-size: clamp(1.35rem, 1.2rem + .7vw, 1.75rem);
	color: var(--ink);
	margin: 2.75rem 0 .9rem;
}
.smg-prose h3 {
	font-family: var(--sans);
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: .02em;
	color: var(--ink);
	margin: 2rem 0 .6rem;
}

.smg-prose p { margin: 0 0 1.15em; }
.smg-prose strong { color: var(--ink); font-weight: 500; }

.smg-prose a {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: .18em;
	text-decoration-thickness: 1px;
}
.smg-prose a:hover { color: var(--accent-dark); }

.smg-prose ul { margin: 0 0 1.3em; padding-left: 1.15rem; }
.smg-prose li { margin-bottom: .45em; }
.smg-prose li::marker { color: var(--accent); }

.smg-prose hr {
	border: 0;
	border-top: 1px solid var(--line);
	margin: 2.75rem 0;
}

.smg-prose__meta {
	font-size: .8125rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin-bottom: 2rem;
}

/* Ficha de datos del titular */
.smg-prose__data {
	background: var(--bg-alt);
	border-left: 3px solid var(--accent);
	padding: 1.5rem 1.75rem;
	margin: 0 0 2rem;
}
.smg-prose__data p { margin-bottom: .4em; }
.smg-prose__data p:last-child { margin-bottom: 0; }

/* Tabla (cookies) */
.smg-prose__table { overflow-x: auto; margin: 0 0 1.5em; }
.smg-prose table { border-collapse: collapse; width: 100%; font-size: .875rem; }
.smg-prose th, .smg-prose td {
	border-bottom: 1px solid var(--line);
	padding: .6rem .75rem;
	text-align: left;
	vertical-align: top;
}
.smg-prose th {
	font-family: var(--sans);
	font-weight: 500;
	color: var(--ink);
	white-space: nowrap;
}

/* Banner de los fondos europeos */
.smg-prose__banner { margin: 2.5rem 0; }
.smg-prose__banner img { width: 100%; height: auto; border: 1px solid var(--line); }

/* Banda de fotografía dentro de una página, a modo de respiro. */
.smg-strip {
	margin-top: clamp(3rem, 6vw, 4.5rem);
	overflow: hidden;
}
.smg-strip a { display: block; overflow: hidden; }
.smg-strip img {
	width: 100%;
	aspect-ratio: 2 / 1;
	object-fit: cover;
	transition: transform 1.1s var(--ease);
}
.smg-strip a:hover img { transform: scale(1.03); }

/* En pantallas estrechas un recorte tan panorámico dejaría una tira
   demasiado fina, así que se le da más altura. */
@media (max-width: 720px) {
	.smg-strip img { aspect-ratio: 4 / 3; }
}

/* ── Calendario de disponibilidad ──────────────────────────────── */

.smg-cal-wrap { margin-top: clamp(3rem, 6vw, 4.5rem); }
.smg-cal-wrap > .smg-h3 { margin-bottom: 1.5rem; }

.smg-cal__legend {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1.75rem;
	margin-bottom: clamp(2rem, 4vw, 2.75rem);
	font-size: .8125rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ink-faint);
}
.smg-cal__key { display: inline-flex; align-items: center; gap: .6rem; }
.smg-cal__swatch {
	width: 1.05rem;
	height: 1.05rem;
	border-radius: 50%;
	display: inline-block;
}
.smg-cal__swatch--free { border: 1px solid var(--line); background: var(--bg); }
.smg-cal__swatch--busy { background: var(--accent); }

.smg-cal__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
	gap: clamp(1.75rem, 3.5vw, 2.75rem);
}

.smg-cal__month { width: 100%; border-collapse: collapse; }
.smg-cal__month[hidden] { display: none; }

.smg-cal__month caption {
	font-family: var(--serif);
	font-size: 1.3rem;
	text-align: left;
	padding-bottom: .75rem;
	color: var(--ink);
}

.smg-cal__month th {
	font-family: var(--sans);
	font-size: .6875rem;
	font-weight: 400;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ink-faint);
	padding-bottom: .5rem;
}
.smg-cal__month th abbr { text-decoration: none; border: 0; cursor: help; }

.smg-cal__month td { text-align: center; padding: .15rem 0; }

.smg-cal__d {
	display: block;
	width: 2.05rem;
	height: 2.05rem;
	line-height: 2.05rem;
	margin-inline: auto;
	border-radius: 50%;
	font-size: .875rem;
	font-variant-numeric: tabular-nums;
}

.is-free  .smg-cal__d { color: var(--ink); }
.is-busy  .smg-cal__d { background: var(--accent); color: #fff; }
.is-past  .smg-cal__d { color: var(--ink-faint); opacity: .4; }

.smg-cal__more { margin-top: clamp(2rem, 4vw, 2.75rem); text-align: center; }
.smg-cal__note {
	margin-top: 1.5rem;
	text-align: center;
	font-size: .8125rem;
	color: var(--ink-faint);
}

/* Texto sólo para lectores de pantalla. */
.smg-sr {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* =========================================================================
   10. Contacto
   ====================================================================== */

.smg-contact {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: clamp(2.5rem, 6vw, 5rem);
	align-items: start;
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
@media (max-width: 900px) { .smg-contact { grid-template-columns: 1fr; } }

.smg-form { display: grid; gap: 1.5rem; }
.smg-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (max-width: 560px) { .smg-form__row { grid-template-columns: 1fr; } }

.smg-field { display: flex; flex-direction: column; gap: .4rem; }
.smg-field label {
	font-size: .6875rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ink-faint);
}
.smg-field input,
.smg-field textarea {
	font-family: var(--sans);
	font-size: 1rem;
	font-weight: 300;
	color: var(--ink);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--line);
	padding: .65rem 0;
	transition: border-color .35s var(--ease);
}
.smg-field input:focus,
.smg-field textarea:focus {
	outline: none;
	border-bottom-color: var(--accent);
}
.smg-field textarea { resize: vertical; min-height: 7rem; }

.smg-check {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	font-size: .875rem;
	color: var(--ink-soft);
	line-height: 1.6;
}
.smg-check input { margin-top: .35rem; accent-color: var(--accent); }

.smg-hp { position: absolute; left: -9999px; opacity: 0; height: 0; }

.smg-note {
	padding: 1.1rem 1.4rem;
	border-left: 3px solid var(--accent);
	background: var(--bg-alt);
	font-size: .9375rem;
	margin-bottom: 2rem;
}
.smg-note--err { border-left-color: #b03a2e; }
.smg-section--alt .smg-note { background: var(--bg); }

.smg-info { display: grid; gap: 2rem; }
.smg-info__block h3 {
	font-family: var(--sans);
	font-size: .6875rem;
	font-weight: 400;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ink-faint);
	margin-bottom: .6rem;
}
/* El bloque del correo ya no lleva título, así que lo acercamos al de arriba:
   con la separación normal quedaba un hueco desproporcionado. */
.smg-info__block--tight { margin-top: -1.3rem; }

.smg-info__block p, .smg-info__block a { color: var(--ink-soft); }
.smg-info__block a:hover { color: var(--accent); }
.smg-info__lic { font-size: .75rem; word-break: break-all; color: var(--ink-faint); line-height: 1.7; }
.smg-info__img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* =========================================================================
   11. Pie
   ====================================================================== */

.smg-footer {
	background: var(--bg-deep);
	color: rgba(255,255,255,.72);
	padding-block: clamp(3.5rem, 7vw, 5rem) 2.25rem;
	font-size: .9375rem;
}
.smg-footer__top {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	padding-bottom: 3rem;
	border-bottom: 1px solid rgba(255,255,255,.12);
}
@media (max-width: 800px) { .smg-footer__top { grid-template-columns: 1fr; } }

.smg-footer__brand {
	font-family: var(--serif);
	font-size: 1.5rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: .9rem;
}
.smg-footer h4 {
	font-family: var(--sans);
	font-size: .6875rem;
	font-weight: 400;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(255,255,255,.5);
	margin: 0 0 .9rem;
}
.smg-footer a { color: rgba(255,255,255,.8); }
.smg-footer a:hover { color: #fff; }
.smg-footer__links { display: grid; gap: .5rem; }

.smg-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem 1.6rem;
	padding-top: 1.75rem;
	font-size: .8125rem;
}
.smg-footer__legal a {
	color: rgba(255, 255, 255, .6);
	transition: color .35s var(--ease);
}
.smg-footer__legal a:hover { color: #fff; text-decoration: underline; text-underline-offset: .2em; }

.smg-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, .1);
	margin-top: 1.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
	align-items: center;
	padding-top: 1.75rem;
	font-size: .8125rem;
	color: rgba(255,255,255,.45);
}
.smg-footer__lic { word-break: break-all; max-width: 44ch; line-height: 1.6; }