/*
Theme Name: Plaza Mayor 43
Theme URI: https://keyhom.com
Author: Grupo Keyhom
Author URI: https://keyhom.com
Description: Tema de una sola página para el apartamento turístico Plaza Mayor 43 (Salamanca): galería, habitaciones, ubicación y formulario de consulta por WhatsApp o email. Datos de contacto editables en Apariencia → Personalizar → Plaza Mayor 43.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pm43
*/

/* ---------- Fuentes (autoalojadas, sin llamadas a Google) ---------- */
@font-face {
	font-family: "Marcellus";
	src: url("assets/fonts/marcellus.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Instrument Sans";
	src: url("assets/fonts/instrument-sans.woff") format("woff");
	font-weight: 400 700;
	font-stretch: 75% 100%;
	font-style: normal;
	font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
	--noche: #0f1a2e;          /* cielo de la plaza a la hora azul */
	--noche-2: #172742;
	--piedra: #c9a063;         /* piedra de Villamayor iluminada */
	--piedra-clara: #e6d6b8;
	--piedra-fondo: #efe4cf;
	--terciopelo: #1c3a31;     /* sofás del salón */
	--vitor: #8b2a1e;          /* rojo de los vítores universitarios */
	--claro: #f4ede1;
	--oscuro: #1d1b17;
	--gris-claro: rgba(244, 237, 225, 0.72);
	--gris-oscuro: #5a5246;

	--display: "Marcellus", "Times New Roman", serif;
	--texto: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

	--paso-0: 1rem;
	--paso-1: 1.25rem;
	--paso-2: 1.563rem;
	--paso-3: clamp(1.75rem, 1.3rem + 1.8vw, 2.441rem);
	--paso-4: clamp(2.2rem, 1.4rem + 3.4vw, 3.815rem);
	--paso-5: clamp(2.6rem, 1.2rem + 5.6vw, 5.4rem);

	--ancho: 72rem;
	--margen: clamp(1rem, 4vw, 2.5rem);
	--seccion: clamp(4.5rem, 10vw, 8.5rem);
	--arco: 999px 999px 0 0;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	font-family: var(--texto);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--oscuro);
	background: var(--piedra-fondo);
	-webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
h1, h2, h3 {
	font-family: var(--display);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -0.005em;
	margin: 0 0 0.6em;
	text-wrap: balance;
}
h2 { font-size: var(--paso-4); }
h3 { font-size: var(--paso-2); line-height: 1.2; }
p { margin: 0 0 1.1em; max-width: 62ch; text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--piedra); outline-offset: 3px; }
.screen-reader-text, .sr {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.salto {
	position: absolute; left: 1rem; top: -4rem; z-index: 100;
	background: var(--claro); color: var(--oscuro); padding: 0.6rem 1rem;
}
.salto:focus { top: 1rem; }

.contenedor { width: min(100% - 2 * var(--margen), var(--ancho)); margin-inline: auto; }

/* ---------- Botones ---------- */
.boton {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
	min-height: 48px; padding: 0.75rem 1.5rem;
	font: 600 1rem/1.2 var(--texto);
	border: 1px solid transparent; border-radius: 999px;
	text-decoration: none; cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.boton--piedra { background: var(--piedra); color: var(--noche); }
.boton--piedra:hover { background: #d8b27a; }
.boton--linea { border-color: currentColor; color: inherit; background: transparent; }
.boton--linea:hover { background: rgba(244, 237, 225, 0.12); }
.boton--oscuro { background: var(--noche); color: var(--claro); }
.boton--oscuro:hover { background: var(--noche-2); }

/* ---------- Cabecera ---------- */
.cabecera {
	position: fixed; inset: 0 0 auto; z-index: 50;
	color: var(--claro);
	transition: background-color .3s ease, box-shadow .3s ease;
}
.cabecera.es-solida, body:not(.home) .cabecera { background: var(--noche); box-shadow: 0 1px 0 rgba(201, 160, 99, .25); }
.cabecera__fila {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	min-height: 72px;
}
.marca {
	font-family: var(--display); font-size: 1.35rem; text-decoration: none; white-space: nowrap;
	display: inline-flex; align-items: baseline; gap: 0.45em;
}
.marca__num { color: var(--piedra); }
.marca img { max-height: 44px; width: auto; }
.menu { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.menu ul { display: flex; gap: clamp(1rem, 2.2vw, 1.75rem); list-style: none; margin: 0; padding: 0; }
.menu a:not(.boton) { text-decoration: none; font-size: 0.97rem; padding-block: 0.5rem; }
.menu a:not(.boton):hover { text-decoration: underline; }
.menu .boton { min-height: 42px; padding: 0.55rem 1.15rem; font-size: 0.95rem; }
.menu-toggle { display: none; }

@media (max-width: 860px) {
	.menu-toggle {
		display: inline-flex; align-items: center; gap: 0.5rem;
		background: none; border: 1px solid rgba(244, 237, 225, .5); color: inherit;
		border-radius: 999px; padding: 0.5rem 1rem; min-height: 44px; font: 500 0.95rem var(--texto);
	}
	.menu {
		position: absolute; inset: 72px 0 auto; flex-direction: column; align-items: stretch;
		background: var(--noche); padding: 0.5rem var(--margen) 1.5rem; gap: 0.75rem;
		display: none;
	}
	.menu.esta-abierto { display: flex; }
	.menu ul { flex-direction: column; gap: 0; }
	.menu a:not(.boton) { display: block; padding: 0.85rem 0; border-bottom: 1px solid rgba(244, 237, 225, .12); font-size: 1.05rem; }
}

/* ---------- Portada ---------- */
.portada {
	position: relative; min-height: 100svh; color: var(--claro); background: var(--noche);
	display: grid; align-items: center; padding-block: calc(72px + 2rem) 3rem;
}
.portada__rejilla {
	display: grid; grid-template-columns: 1fr minmax(0, 0.85fr); gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.portada__foto {
	border-radius: var(--arco); overflow: hidden; aspect-ratio: 4 / 5; max-height: calc(100svh - 72px - 5rem);
	width: 100%; justify-self: end; background: var(--noche-2);
}
.portada__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 46% 50%; }
.portada__texto { padding-block: 1rem; }
.portada h1 { font-size: clamp(2.6rem, 1.2rem + 4.2vw, 4.75rem); max-width: 15ch; margin-bottom: 0.4em; }
.portada p { font-size: var(--paso-1); color: var(--gris-claro); max-width: 40ch; }
.portada__acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
@media (max-width: 860px) {
	.portada { min-height: 0; padding-top: calc(72px + 1rem); }
	.portada__rejilla { grid-template-columns: 1fr; }
	.portada__foto { order: -1; height: 46svh; aspect-ratio: auto; justify-self: stretch; max-height: none; }
	.portada h1 { margin-bottom: 0.3em; }
	.portada__acciones { margin-top: 1.25rem; }
	.portada__texto { padding-top: 0; }
}

@media (prefers-reduced-motion: no-preference) {
	.portada__foto { animation: levantar 1.3s cubic-bezier(.65, 0, .25, 1) both; }
	.portada__foto img { animation: acercar 2.2s cubic-bezier(.2, .7, .2, 1) both; }
	.portada__texto > * { animation: aparecer .9s cubic-bezier(.2, .7, .2, 1) both; animation-delay: .75s; }
	.portada__texto > *:nth-child(2) { animation-delay: .9s; }
	.portada__texto > *:nth-child(3) { animation-delay: 1.05s; }
}
@keyframes levantar { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes acercar { from { transform: scale(1.12); } to { transform: none; } }
@keyframes aparecer { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Datos clave ---------- */
.datos { background: var(--noche); color: var(--claro); }
.datos dl {
	display: flex; flex-wrap: wrap; margin: 0; padding-block: 1.6rem;
	border-top: 1px solid rgba(201, 160, 99, .3);
}
.datos div { flex: 1 1 10rem; padding: 0.4rem 1.25rem; border-left: 1px solid rgba(201, 160, 99, .3); }
.datos div:first-child { border-left: 0; padding-left: 0; }
.datos dt { font-family: var(--display); font-size: var(--paso-2); color: var(--piedra); line-height: 1.15; }
.datos dd { margin: 0.15rem 0 0; font-size: 0.95rem; color: var(--gris-claro); }
@media (max-width: 640px) {
	.datos div { flex-basis: 50%; border-left: 0; padding: 0.6rem 0; }
}

/* ---------- Secciones ---------- */
.seccion { padding-block: var(--seccion); }
.seccion--noche { background: var(--noche); color: var(--claro); }
.seccion--noche p { color: var(--gris-claro); }
.seccion--terciopelo { background: var(--terciopelo); color: var(--claro); }
.seccion--terciopelo p { color: var(--gris-claro); }
.entradilla { font-size: var(--paso-1); line-height: 1.5; }

/* La casa: texto + arco */
.casa { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.arco { border-radius: var(--arco); overflow: hidden; background: var(--piedra-clara); }
.arco img { width: 100%; height: 100%; object-fit: cover; }
.casa .arco { aspect-ratio: 4 / 5; max-height: 82vh; }
.casa .arco img { object-position: 35% 50%; }
.casa__firma { margin-top: 2rem; font-size: 0.95rem; color: var(--gris-oscuro); }
.casa__firma strong { color: var(--vitor); font-weight: 600; }
@media (max-width: 860px) {
	.casa { grid-template-columns: 1fr; }
	.casa .arco { max-width: 26rem; width: 100%; margin-inline: auto; }
}

/* Habitaciones */
.cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem 3rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.cabeza h2 { margin: 0; }
.cabeza p { margin: 0; max-width: 40ch; }
.habitaciones { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 3vw, 2.5rem); list-style: none; margin: 0; padding: 0; }
.habitacion .arco { aspect-ratio: 3 / 4; }
.habitacion h3 { margin: 1.25rem 0 0.4rem; }
.habitacion p { margin: 0; font-size: 0.98rem; }
@media (max-width: 860px) {
	.habitaciones {
		grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: min(78%, 20rem);
		overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1rem;
		margin-inline: calc(-1 * var(--margen)); padding-inline: var(--margen);
		scrollbar-width: thin;
	}
	.habitacion { scroll-snap-align: start; }
}

/* Salón, comedor, escritorio */
.estancias { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.75rem, 2vw, 1.25rem); }
.estancias figure { margin: 0; }
.estancias img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; }
.estancias figcaption { font-size: 0.92rem; color: var(--gris-oscuro); margin-top: 0.6rem; }
@media (max-width: 760px) { .estancias { grid-template-columns: 1fr; } }

/* Plaza a pantalla completa */
.plaza { position: relative; min-height: 88vh; display: grid; align-items: end; color: var(--claro); background: var(--noche); overflow: hidden; }
.plaza img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.plaza::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15, 26, 46, 0) 40%, rgba(15, 26, 46, .85) 100%); }
.plaza__texto { position: relative; z-index: 1; padding-block: 3rem clamp(2.5rem, 6vw, 4.5rem); }
.plaza h2 { max-width: 16ch; }
.plaza p { color: var(--gris-claro); font-size: var(--paso-1); }

/* La plaza se abre al hacer scroll (solo con JS y sin "reducir movimiento") */
.plaza.se-abre { --c: calc(1 - var(--p, 1)); }
.plaza.se-abre img,
.plaza.se-abre::after {
	clip-path: inset(calc(var(--c) * 6%) calc(var(--c) * 30%) 0 round calc(var(--c) * 20vw) calc(var(--c) * 20vw) 0 0);
}
.plaza.se-abre img { transform: scale(calc(1 + var(--c) * .15)); }
.plaza.se-abre .plaza__texto {
	opacity: clamp(0, calc((var(--p, 1) - .65) * 3), 1);
	transform: translateY(calc(var(--c) * 24px));
}

/* Galería */
.galeria { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(8.5rem, 13vw, 12.5rem); gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.galeria li:first-child { grid-column: span 2; grid-row: span 2; }
.galeria li:last-child { grid-column: span 2; }
.galeria button {
	display: block; width: 100%; height: 100%; padding: 0; border: 0; background: var(--noche-2);
	cursor: zoom-in; border-radius: 4px; overflow: hidden;
}
.galeria img { width: 100%; height: 100%; object-fit: cover; transition: opacity .2s ease; }
.galeria button:hover img { opacity: .85; }
@media (max-width: 760px) {
	.galeria { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 34vw; }
	.galeria li:first-child { grid-row: span 1; grid-column: span 2; }
	.galeria li:first-child, .galeria li:last-child { grid-row: auto; }
	.galeria li:first-child { grid-auto-rows: auto; }
}

/* Visor de fotos */
.visor {
	width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
	background: rgba(10, 16, 28, .96); color: var(--claro);
}
.visor[open] { display: grid; grid-template-rows: auto 1fr auto; }
.visor::backdrop { background: rgba(10, 16, 28, .9); }
.visor__barra { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem var(--margen); }
.visor__marco { display: grid; place-items: center; min-height: 0; padding: 0 var(--margen); }
.visor__marco img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; }
.visor__pie { display: flex; justify-content: center; gap: 0.75rem; padding: 1rem var(--margen) 1.5rem; }
.visor button {
	min-width: 48px; min-height: 48px; border-radius: 999px; border: 1px solid rgba(244, 237, 225, .4);
	background: transparent; color: inherit; font: 500 0.95rem var(--texto); padding: 0.5rem 1.1rem; cursor: pointer;
}
.visor button:hover { background: rgba(244, 237, 225, .1); }
.visor__cuenta { font-size: 0.92rem; color: var(--gris-claro); }

/* Ubicación */
.ubicacion { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.direccion { font-family: var(--display); font-size: var(--paso-2); line-height: 1.3; font-style: normal; margin-bottom: 1.5rem; }
.distancias { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(29, 27, 23, .18); }
.distancias li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.95rem 0; border-bottom: 1px solid rgba(29, 27, 23, .18); }
.distancias span:last-child { color: var(--gris-oscuro); white-space: nowrap; }
.nota { font-size: 0.88rem; color: var(--gris-oscuro); margin-top: 0.9rem; }
@media (max-width: 760px) { .ubicacion { grid-template-columns: 1fr; } }

/* Reserva */
.reserva { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.reserva__info dl { margin: 2rem 0 0; display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1.5rem; }
.reserva__info dt { color: var(--piedra); }
.reserva__info dd { margin: 0; }
.formulario { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; }
.campo { display: flex; flex-direction: column; gap: 0.4rem; }
.campo--entero { grid-column: 1 / -1; }
.campo label { font-size: 0.95rem; font-weight: 500; }
.campo input, .campo textarea {
	font: 400 1rem var(--texto); color: var(--claro);
	background: rgba(244, 237, 225, .06); border: 1px solid rgba(244, 237, 225, .35); border-radius: 6px;
	padding: 0.8rem 0.9rem; min-height: 48px; width: 100%;
	color-scheme: dark;
}
.campo input:focus, .campo textarea:focus { outline: 2px solid var(--piedra); outline-offset: 1px; border-color: transparent; }
.campo textarea { min-height: 7rem; resize: vertical; }
.formulario__error { grid-column: 1 / -1; margin: 0; color: #f2b8a8; font-size: 0.95rem; min-height: 1.5em; }
.formulario__acciones { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.75rem; }
.aviso-admin {
	grid-column: 1 / -1; border: 1px dashed var(--piedra); padding: 1rem; border-radius: 6px; color: var(--claro); font-size: 0.95rem;
}
@media (max-width: 860px) { .reserva { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .formulario { grid-template-columns: 1fr; } }

/* Pie */
.pie { background: var(--noche); color: var(--gris-claro); padding-block: 3rem 6rem; font-size: 0.95rem; }
.pie__fila { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem 3rem; }
.pie .marca { color: var(--claro); margin-bottom: 0.5rem; }
.pie p { margin: 0 0 0.35rem; }
.pie ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
@media (min-width: 861px) { .pie { padding-bottom: 3rem; } }

/* Barra fija móvil */
.barra-movil {
	position: fixed; inset: auto 0 0; z-index: 40; display: none;
	padding: 0.75rem var(--margen) calc(0.75rem + env(safe-area-inset-bottom));
	background: var(--noche); box-shadow: 0 -1px 0 rgba(201, 160, 99, .3);
	transform: translateY(110%); transition: transform .3s ease;
}
.barra-movil .boton { width: 100%; }
.barra-movil.es-visible { transform: none; }
@media (max-width: 860px) { .barra-movil { display: block; } }

/* Páginas interiores (aviso legal, privacidad…) */
.interior { padding-block: calc(72px + 4rem) var(--seccion); }
.interior .contenedor { max-width: 46rem; }
.interior h1 { font-size: var(--paso-4); }
.interior h2 { font-size: var(--paso-3); margin-top: 2rem; }

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