/* ==========================================================================
   The KOMs Hunter — estilos del tema
   Colores y tipografías: theme.json. Aquí va el diseño de cada sección.
   ========================================================================== */

:root {
	--kh-asfalto: var(--wp--preset--color--asfalto, #1D2127);
	--kh-niebla: var(--wp--preset--color--niebla, #EEF2F4);
	--kh-blanco: #fff;
	--kh-gris: var(--wp--preset--color--gris, #56606B);
	--kh-linea: var(--wp--preset--color--linea, #D2DAE0);
	--kh-llano: var(--wp--preset--color--llano, #4FA95A);
	--kh-falso-llano: var(--wp--preset--color--falso-llano, #F1C232);
	--kh-rampa: var(--wp--preset--color--rampa, #EE8A2A);
	--kh-kom: var(--wp--preset--color--kom, #D8392B);
	--kh-muro: var(--wp--preset--color--muro, #7C1F2B);
	--kh-condensada: var(--wp--preset--font-family--barlow-condensed, "Barlow Condensed", sans-serif);
	--kh-alto-cabecera: 72px;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

::selection {
	background: var(--kh-falso-llano);
	color: var(--kh-asfalto);
}

:focus-visible {
	outline: 3px solid var(--kh-kom);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Sin huecos entre cabecera, secciones y pie */
.wp-site-blocks > * + *,
body .kh-main:not(.kh-pagina) > * + * {
	margin-block-start: 0;
}

.kh-sec[id] {
	scroll-margin-top: var(--kh-alto-cabecera);
}

/* ---------- Botones ---------- */

.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	border-color: currentColor;
	color: var(--kh-asfalto);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--kh-asfalto);
	border-color: var(--kh-asfalto);
	color: var(--kh-blanco);
}

/* ==========================================================================
   Cabecera
   ========================================================================== */

.kh-cabecera {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
}

.kh-header {
	background: var(--kh-asfalto);
	color: var(--kh-blanco);
	padding-block: 0.7rem;
}

.kh-header__barra {
	gap: 1.5rem;
	min-height: 48px;
}

.kh-marca {
	gap: 0.75rem;
	flex-shrink: 0;
}

.kh-marca .wp-block-site-logo img {
	max-height: 44px;
	width: auto;
}

/* Si hay logo subido, se oculta el nombre en texto */
.kh-marca:has(.wp-block-site-logo img) .wp-block-site-title {
	display: none;
}

.kh-header .wp-block-site-title a {
	color: var(--kh-blanco);
	text-decoration: none;
}

.kh-header__derecha {
	gap: 1.75rem;
}

.kh-nav {
	gap: 1.5rem;
}

.kh-nav .wp-block-navigation-item__content {
	color: var(--kh-blanco);
	text-decoration: none;
	padding-block: 0.25rem;
	border-bottom: 2px solid transparent;
}

.kh-nav .wp-block-navigation-item__content:hover {
	border-bottom-color: var(--kh-kom);
}

.kh-header__cta .wp-block-button__link {
	font-size: 1.0625rem;
	padding: 0.55em 1.05em;
}

/* Menú desplegable en móvil y tablet */
.kh-header .kh-nav .wp-block-navigation__responsive-container.is-menu-open {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
	background: var(--kh-asfalto);
	color: var(--kh-blanco);
	padding: 1.25rem clamp(1rem, 4vw, 2.5rem);
}

.kh-header .kh-nav .is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: flex-start;
	gap: 1.25rem;
	padding-top: 3.5rem;
}

.kh-header .kh-nav .wp-block-navigation-item__content,
.kh-header .kh-nav .wp-block-navigation__responsive-container-open,
.kh-header .kh-nav .wp-block-navigation__responsive-container-close {
	color: var(--kh-blanco);
}

.kh-header .kh-nav .is-menu-open .wp-block-navigation__container,
.kh-header .kh-nav .is-menu-open .wp-block-navigation-item {
	align-items: flex-start;
}

.kh-header .kh-nav .is-menu-open .wp-block-navigation-item__content {
	font-size: 2.25rem;
	font-weight: 700;
	line-height: 1.1;
}

/* El botón va antes del icono de menú */
.kh-header__derecha .kh-header__cta {
	order: 2;
}

.kh-header__derecha .kh-nav {
	order: 1;
}

@media (max-width: 959px) {
	.kh-header__derecha .kh-nav {
		order: 3;
	}
}

@media (max-width: 359px) {
	.kh-header__derecha .kh-header__cta {
		display: none;
	}
}

@media (max-width: 959px) {
	.kh-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.kh-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* ==========================================================================
   Secciones: estructura común
   ========================================================================== */

.kh-sec {
	padding-block: clamp(4rem, 9vw, 7.5rem);
}

.kh-sec--blanco {
	background: var(--kh-blanco);
}

.kh-sec--asfalto {
	background: var(--kh-asfalto);
	color: #DCE3E8;
}

.kh-sec--asfalto h2 {
	color: var(--kh-blanco);
}

.kh-intro > * {
	margin-block: 0;
}

.kh-intro h2 {
	max-width: 22ch;
}

.kh-intro .kh-lead {
	margin-block-start: 1.25rem;
}

body .kh-sec .kh-intro + * {
	margin-block-start: clamp(2.5rem, 5vw, 3.75rem);
}

.kh-lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
	color: var(--kh-gris);
	max-width: 44rem;
}

.kh-sec--asfalto .kh-lead {
	color: #AEBAC3;
}

.kh-nota {
	font-size: var(--wp--preset--font-size--small);
	color: var(--kh-gris);
}

.kh-lista {
	padding-left: 1.15em;
	margin: 0;
}

.kh-lista li {
	margin-block: 0.35em;
}

.kh-lista li::marker {
	color: var(--kh-kom);
}

/* ==========================================================================
   Portada
   ========================================================================== */

.kh-hero {
	padding-block-start: clamp(3.5rem, 8vw, 6.5rem);
	padding-block-end: 0;
	overflow: hidden;
}

.kh-hero__texto {
	position: relative;
	z-index: 1;
}

.kh-hero__texto > * {
	margin-block: 0;
}

.kh-hero__titulo {
	max-width: 14ch;
	text-wrap: balance;
}

body .kh-hero__texto .kh-hero__lead {
	margin-block-start: 1.75rem;
	max-width: 38rem;
	color: var(--kh-asfalto);
}

body .kh-hero__texto .kh-hero__botones {
	margin-block-start: 2.25rem;
	gap: 0.75rem;
}

body .kh-hero__texto .kh-hero__dato {
	margin-block-start: 1.75rem;
	font-size: var(--wp--preset--font-size--small);
	color: var(--kh-gris);
	max-width: 30rem;
}

body .kh-hero .kh-hero__perfil {
	margin-block-start: clamp(1.5rem, 2vw, 2.5rem);
	line-height: 0;
}

.kh-perfil {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1200 / 280;
	min-height: 120px;
}

@media (min-width: 900px) {
	/* El puerto sube por detrás del texto: la cima queda a la derecha del titular */
	body .kh-hero .kh-hero__perfil {
		margin-block-start: calc(-1 * clamp(4rem, 11vw, 11rem));
	}
}

@media (prefers-reduced-motion: no-preference) {
	.kh-perfil {
		animation: kh-ruta 1.8s cubic-bezier(0.25, 0.7, 0.3, 1) 0.15s both;
	}
}

@keyframes kh-ruta {
	from {
		clip-path: inset(0 100% 0 0);
	}
	to {
		clip-path: inset(0 0 0 0);
	}
}

/* ==========================================================================
   La red de webs
   ========================================================================== */

.kh-webs {
	border-bottom: 1px solid var(--kh-linea);
}

body .kh-webs > .kh-web {
	margin-block: 0;
}

.kh-web {
	display: grid;
	grid-template-columns: minmax(13rem, 1fr) minmax(0, 2fr) minmax(12rem, auto);
	grid-template-areas:
		"nombre texto enlace"
		"disciplina texto enlace";
	column-gap: 2.5rem;
	row-gap: 0.2rem;
	align-items: baseline;
	padding-block: 1.6rem;
	border-top: 1px solid var(--kh-linea);
}

body .kh-web > * {
	margin: 0;
}

.kh-web__nombre {
	grid-area: nombre;
	font-size: 1.75rem;
}

.kh-web__disciplina {
	grid-area: disciplina;
	color: var(--kh-gris);
	font-size: var(--wp--preset--font-size--small);
}

.kh-web__texto {
	grid-area: texto;
	max-width: 36rem;
}

.kh-web__enlace {
	grid-area: enlace;
	justify-self: end;
	font-family: var(--kh-condensada);
	font-weight: 600;
	font-size: 1.1875rem;
}

.kh-web__enlace a {
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
	text-decoration-color: var(--kh-kom);
}

body .kh-red .kh-nota {
	margin-block-start: 1.75rem;
}

@media (max-width: 781px) {
	.kh-web {
		grid-template-columns: 1fr;
		grid-template-areas:
			"nombre"
			"disciplina"
			"texto"
			"enlace";
		row-gap: 0.4rem;
	}

	.kh-web__enlace {
		justify-self: start;
	}
}

/* ==========================================================================
   Organizadores: las tarifas dibujadas como un puerto
   Cada columna es un tramo. --h0 es la altura al empezar el tramo y --h al
   acabarlo. Si añades una quinta columna, añade su regla :nth-child(5).
   ========================================================================== */

.kh-subida {
	--alto: 270px;
	position: relative;
	gap: 0 !important;
	background: linear-gradient(var(--kh-asfalto), var(--kh-asfalto)) 0 var(--alto) / 100% 3px no-repeat;
}

.kh-tramo {
	position: relative;
	padding: calc(var(--alto) + 1.75rem) 1.5rem 0;
}

.kh-tramo + .kh-tramo {
	border-left: 1px dashed var(--kh-linea);
}

.kh-tramo::before,
.kh-tramo::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	clip-path: polygon(0 calc(var(--h) - var(--h0)), 100% 0, 100% 100%, 0 100%);
}

/* Relleno del tramo, con el color de su pendiente */
.kh-tramo::before {
	z-index: 1;
	top: calc(var(--alto) - var(--h));
	height: var(--h);
	background: var(--c);
}

/* Línea del perfil */
.kh-tramo::after {
	z-index: 0;
	top: calc(var(--alto) - var(--h) - 3px);
	height: calc(var(--h) + 3px);
	background: var(--kh-asfalto);
}

.kh-tramo:nth-child(1) { --h0: 8px;   --h: 30px;  --c: var(--kh-llano); }
.kh-tramo:nth-child(2) { --h0: 30px;  --h: 72px;  --c: var(--kh-falso-llano); }
.kh-tramo:nth-child(3) { --h0: 72px;  --h: 150px; --c: var(--kh-rampa); }
.kh-tramo:nth-child(4) { --h0: 150px; --h: 238px; --c: var(--kh-kom); }
.kh-tramo:nth-child(5) { --h0: 238px; --h: 260px; --c: var(--kh-muro); }

/* Bandera de lunares en la cima */
.kh-subida::before,
.kh-subida::after {
	content: "";
	position: absolute;
	z-index: 2;
}

.kh-subida::before {
	right: 0;
	top: calc(var(--alto) - 238px - 62px);
	width: 3px;
	height: 62px;
	background: var(--kh-asfalto);
}

.kh-subida::after {
	right: 3px;
	top: calc(var(--alto) - 238px - 62px);
	width: 46px;
	height: 30px;
	border: 2px solid var(--kh-asfalto);
	background: radial-gradient(circle, var(--kh-kom) 3.2px, transparent 3.7px) 0 0 / 11px 11px, var(--kh-blanco);
}

body .kh-tramo > * {
	margin-block: 0;
}

body .kh-tramo > * + * {
	margin-block-start: 0.75rem;
}

.kh-tramo__precio {
	font-family: var(--kh-condensada);
	font-weight: 800;
	font-size: clamp(2.25rem, 3.5vw, 3rem);
	line-height: 1;
}

.kh-tramo__nombre {
	font-size: 1.5rem;
}

.kh-etiqueta {
	position: absolute;
	z-index: 2;
	left: 1.5rem;
	top: calc(var(--alto) - var(--h) - 3.1rem);
	margin: 0 !important;
	background: var(--kh-asfalto);
	color: var(--kh-blanco);
	font-family: var(--kh-condensada);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1;
	padding: 0.45em 0.7em;
	border-radius: 3px;
}

.kh-pie-seccion {
	gap: 1.25rem 2rem;
}

body .kh-organizadores .kh-pie-seccion {
	margin-block-start: 3rem;
}

body .kh-pie-seccion > * {
	margin: 0;
}

@media (max-width: 781px) {
	.kh-subida {
		background: none;
		gap: 2.25rem !important;
	}

	.kh-subida::before,
	.kh-subida::after,
	.kh-tramo::after {
		display: none;
	}

	.kh-tramo {
		padding: 1.5rem 0 0;
	}

	.kh-tramo + .kh-tramo {
		border-left: 0;
	}

	/* En móvil, cada tramo es una barra que crece de izquierda a derecha */
	.kh-tramo::before {
		top: 0;
		right: auto;
		height: 8px;
		clip-path: none;
		border-radius: 0 4px 4px 0;
	}

	.kh-tramo:nth-child(1)::before { width: 18%; }
	.kh-tramo:nth-child(2)::before { width: 38%; }
	.kh-tramo:nth-child(3)::before { width: 66%; }
	.kh-tramo:nth-child(4)::before { width: 100%; }

	/* En móvil la etiqueta va arriba del tramo al que pertenece */
	.kh-tramo {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.kh-etiqueta {
		position: static;
		order: -1;
	}
}

/* ==========================================================================
   Marcas: tabla de tarifas
   ========================================================================== */

.kh-tarifa {
	margin-block-end: 0;
}

.kh-tarifa table {
	width: 100%;
	border-collapse: collapse;
	font-size: 1rem;
	line-height: 1.5;
}

.kh-tarifa thead {
	border: 0;
}

.kh-tarifa th,
.kh-tarifa td {
	border: 0;
	border-bottom: 1px solid var(--kh-linea);
	padding: 1.1rem 1rem;
	text-align: left;
	vertical-align: top;
}

.kh-tarifa th {
	font-family: var(--kh-condensada);
	font-weight: 700;
	font-size: 1.125rem;
	border-bottom: 3px solid var(--kh-asfalto);
	padding-block: 0.6rem;
}

.kh-tarifa th:first-child,
.kh-tarifa td:first-child {
	padding-left: 0;
}

.kh-tarifa td:first-child {
	font-family: var(--kh-condensada);
	font-size: 1.375rem;
	line-height: 1.15;
	width: 22%;
}

.kh-tarifa td:first-child strong {
	font-weight: 700;
}

.kh-tarifa td:nth-child(2) {
	color: var(--kh-gris);
}

.kh-tarifa th:nth-child(n + 3),
.kh-tarifa td:nth-child(n + 3) {
	text-align: right;
	white-space: nowrap;
}

.kh-tarifa td:nth-child(n + 3) {
	font-family: var(--kh-condensada);
	font-weight: 700;
	font-size: 1.375rem;
	line-height: 1.15;
}

.kh-tarifa th:last-child,
.kh-tarifa td:last-child {
	padding-right: 0;
}

body .kh-marcas .kh-nota {
	margin-block-start: 1.25rem;
}

@media (max-width: 781px) {
	.kh-tarifa thead {
		display: none;
	}

	.kh-tarifa table,
	.kh-tarifa tbody {
		display: block;
	}

	.kh-tarifa tr {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 1rem;
		padding-block: 1.25rem;
		border-bottom: 1px solid var(--kh-linea);
	}

	.kh-tarifa td {
		border: 0;
		padding: 0;
		width: auto !important;
	}

	.kh-tarifa td:nth-child(1),
	.kh-tarifa td:nth-child(2) {
		grid-column: 1 / -1;
	}

	.kh-tarifa td:nth-child(2) {
		margin-block: 0.4rem 0.8rem;
	}

	.kh-tarifa td:nth-child(n + 3) {
		text-align: left;
		white-space: normal;
	}

	/* Etiquetas de precio en móvil (si cambias la cabecera de la tabla, cámbialas aquí) */
	.kh-tarifa td:nth-child(3)::before,
	.kh-tarifa td:nth-child(4)::before {
		display: block;
		font-family: var(--wp--preset--font-family--barlow);
		font-weight: 400;
		font-size: 0.875rem;
		color: var(--kh-gris);
	}

	.kh-tarifa td:nth-child(3)::before { content: "1 web"; }
	.kh-tarifa td:nth-child(4)::before { content: "3 webs"; }
}

/* Patrocinio de calendario: el maillot de lunares */
.kh-patrocinio {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas:
		"titulo precio"
		"texto boton";
	gap: 1rem 3rem;
	align-items: start;
	padding: calc(1.75rem + 22px) clamp(1.5rem, 4vw, 2.75rem) clamp(1.75rem, 4vw, 2.5rem);
	border: 2px solid var(--kh-asfalto);
	border-radius: 6px;
	background: var(--kh-blanco);
	overflow: hidden;
}

body .kh-marcas .kh-patrocinio {
	margin-block-start: clamp(3rem, 6vw, 4.5rem);
}

.kh-patrocinio::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 22px;
	border-bottom: 2px solid var(--kh-asfalto);
	background: radial-gradient(circle, var(--kh-kom) 4px, transparent 4.6px) 3px 1px / 16px 16px, var(--kh-blanco);
}

body .kh-patrocinio > * {
	margin: 0;
}

.kh-patrocinio > h3 {
	grid-area: titulo;
}

.kh-patrocinio > p:not(.kh-patrocinio__precio) {
	grid-area: texto;
	max-width: 40rem;
	color: var(--kh-gris);
}

.kh-patrocinio__precio {
	grid-area: precio;
	font-family: var(--kh-condensada);
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1.2;
	text-align: right;
}

.kh-patrocinio > .wp-block-buttons {
	grid-area: boton;
	justify-content: flex-end;
	align-self: end;
}

@media (max-width: 781px) {
	.kh-patrocinio {
		grid-template-columns: 1fr;
		grid-template-areas:
			"titulo"
			"texto"
			"precio"
			"boton";
	}

	.kh-patrocinio__precio {
		text-align: left;
	}

	.kh-patrocinio > .wp-block-buttons {
		justify-content: flex-start;
	}
}

/* ==========================================================================
   Packs: dorsales
   ========================================================================== */

.kh-dorsales {
	gap: clamp(1.25rem, 2.5vw, 2rem) !important;
}

.kh-dorsal {
	--agujero: radial-gradient(circle, var(--kh-asfalto) 4.5px, transparent 5px);
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	padding: 2.75rem clamp(1.4rem, 2.5vw, 2rem) 2rem;
	background:
		var(--agujero) 10px 10px / 18px 18px no-repeat,
		var(--agujero) calc(100% - 10px) 10px / 18px 18px no-repeat,
		var(--agujero) 10px calc(100% - 10px) / 18px 18px no-repeat,
		var(--agujero) calc(100% - 10px) calc(100% - 10px) / 18px 18px no-repeat,
		var(--kh-blanco);
	color: var(--kh-asfalto);
	border-radius: 8px;
}

body .kh-dorsal > * {
	margin: 0;
}

.kh-dorsal__para {
	text-align: center;
	font-size: var(--wp--preset--font-size--small);
	color: var(--kh-gris);
	padding-bottom: 0.9rem;
	border-bottom: 1px solid var(--kh-linea);
	min-height: 3.2em;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.kh-dorsal__numero {
	text-align: center;
	font-family: var(--kh-condensada);
	font-weight: 800;
	font-size: clamp(4rem, 7vw, 5.75rem);
	line-height: 0.9;
	letter-spacing: -0.02em;
	padding-top: 0.5rem;
}

.kh-dorsal__nombre {
	text-align: center;
	font-size: 1.625rem;
	padding-bottom: 0.4rem;
}

.kh-dorsal__ahorro {
	color: var(--kh-kom);
	font-weight: 600;
}

body .kh-dorsal > .wp-block-buttons {
	margin-top: auto;
	padding-top: 1rem;
}

.kh-dorsal .wp-block-button,
.kh-dorsal .wp-block-button__link {
	width: 100%;
}

/* ==========================================================================
   Más servicios
   ========================================================================== */

.kh-extras {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2.75rem 3rem;
}

body .kh-extras > * {
	margin: 0;
}

.kh-extra {
	border-top: 3px solid var(--kh-asfalto);
	padding-top: 1.1rem;
}

body .kh-extra > * {
	margin-block: 0;
}

body .kh-extra > p {
	margin-block-start: 0.6rem;
	color: var(--kh-gris);
}

.kh-extra h3 {
	font-size: 1.625rem;
}

body .kh-servicios .kh-extras + .wp-block-buttons {
	margin-block-start: 3.25rem;
}

@media (max-width: 959px) {
	.kh-extras {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599px) {
	.kh-extras {
		grid-template-columns: 1fr;
		gap: 2.25rem;
	}
}

/* ==========================================================================
   Cómo trabajamos y temporada
   ========================================================================== */

.kh-como__columnas {
	gap: clamp(3rem, 7vw, 6rem) !important;
}

.kh-pasos {
	list-style: none;
	padding: 0;
	counter-reset: paso;
	margin-block-start: 2rem !important;
}

.kh-pasos li {
	counter-increment: paso;
	position: relative;
	padding-left: 3.25rem;
	margin-block: 0 1.5rem;
}

.kh-pasos li::before {
	content: counter(paso);
	position: absolute;
	left: 0;
	top: -0.2rem;
	font-family: var(--kh-condensada);
	font-weight: 800;
	font-size: 2.25rem;
	line-height: 1;
	color: var(--kh-kom);
}

.kh-temporada {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 3px;
	margin-top: 2rem;
}

.kh-mes {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	height: 72px;
	padding-bottom: 0.4rem;
	background: var(--kh-linea);
	border-radius: 3px;
	font-family: var(--kh-condensada);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1;
}

.kh-mes.is-alta {
	background: var(--kh-kom);
	color: var(--kh-blanco);
}

.kh-mes.is-pico {
	background: var(--kh-rampa);
}

.kh-mes.is-reserva {
	background: var(--kh-blanco);
	box-shadow: inset 0 0 0 2px var(--kh-asfalto);
}

.kh-leyenda {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	list-style: none;
	padding: 0;
	margin: 1rem 0 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--kh-gris);
}

.kh-leyenda li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.kh-leyenda i {
	width: 14px;
	height: 14px;
	border-radius: 2px;
	background: var(--kh-linea);
}

.kh-leyenda i.is-alta { background: var(--kh-kom); }
.kh-leyenda i.is-pico { background: var(--kh-rampa); }
.kh-leyenda i.is-reserva { background: var(--kh-blanco); box-shadow: inset 0 0 0 2px var(--kh-asfalto); }

@media (max-width: 599px) {
	.kh-mes {
		height: 56px;
		font-size: 0.8125rem;
	}
}

/* ==========================================================================
   Preguntas frecuentes
   ========================================================================== */

.kh-faq {
	border-top: 1px solid var(--kh-linea);
}

body .kh-faq > .wp-block-details {
	margin: 0;
}

.kh-faq .wp-block-details {
	border-bottom: 1px solid var(--kh-linea);
	padding-block: 0;
}

.kh-faq summary {
	position: relative;
	list-style: none;
	cursor: pointer;
	padding: 1.25rem 3rem 1.25rem 0;
	font-family: var(--kh-condensada);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.25;
}

.kh-faq summary::-webkit-details-marker {
	display: none;
}

.kh-faq summary::after {
	content: "+";
	position: absolute;
	right: 0.25rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 2rem;
	font-weight: 600;
	color: var(--kh-kom);
}

.kh-faq details[open] summary::after {
	content: "−";
}

.kh-faq details > :not(summary) {
	max-width: 46rem;
	margin-block: 0 1.4rem;
	color: var(--kh-gris);
}

/* ==========================================================================
   Contacto y formulario
   ========================================================================== */

.kh-contacto__columnas {
	gap: clamp(2.5rem, 6vw, 5rem) !important;
}

.kh-contacto h2 {
	max-width: 16ch;
}

.kh-contacto__dato {
	font-size: var(--wp--preset--font-size--small);
	color: var(--kh-gris);
	line-height: 1.3;
}

body .kh-contacto .kh-lead + .kh-contacto__dato {
	margin-block-start: 2.25rem;
}

.kh-contacto__dato a {
	display: inline-block;
	margin-top: 0.2rem;
	font-family: var(--kh-condensada);
	font-weight: 700;
	font-size: 1.75rem;
	color: var(--kh-asfalto);
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
	text-decoration-color: var(--kh-kom);
	word-break: break-word;
}

.kh-form {
	background: var(--kh-blanco);
	border: 1px solid var(--kh-linea);
	border-radius: 8px;
	padding: clamp(1.4rem, 4vw, 2.5rem);
	display: grid;
	gap: 1.1rem;
}

.kh-form p {
	margin: 0;
}

.kh-form__fila {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.1rem;
}

.kh-form__campo label {
	display: block;
	margin-bottom: 0.35rem;
	font-family: var(--kh-condensada);
	font-weight: 600;
	font-size: 1.125rem;
}

.kh-form__campo label span {
	font-family: var(--wp--preset--font-family--barlow);
	font-weight: 400;
	font-size: 0.875rem;
	color: var(--kh-gris);
}

.kh-form input[type="text"],
.kh-form input[type="email"],
.kh-form select,
.kh-form textarea {
	width: 100%;
	box-sizing: border-box;
	font: inherit;
	font-size: 1rem;
	color: var(--kh-asfalto);
	background: var(--kh-blanco);
	border: 1.5px solid #AEB9C2;
	border-radius: 4px;
	padding: 0.7rem 0.85rem;
}

.kh-form textarea {
	resize: vertical;
	min-height: 8rem;
}

.kh-form input:focus,
.kh-form select:focus,
.kh-form textarea:focus {
	outline: none;
	border-color: var(--kh-asfalto);
	box-shadow: 0 0 0 3px rgba(216, 57, 43, 0.28);
}

.kh-form__check {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	font-size: var(--wp--preset--font-size--small);
}

.kh-form__check input {
	margin-top: 0.3rem;
	width: 1.1rem;
	height: 1.1rem;
	accent-color: var(--kh-kom);
	flex-shrink: 0;
}

.kh-form .wp-block-button {
	justify-self: start;
}

.kh-form button.wp-block-button__link {
	cursor: pointer;
}

.kh-form__trampa {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.kh-form__aviso {
	margin-bottom: 1rem;
	padding: 1rem 1.25rem;
	background: var(--kh-blanco);
	border-left: 4px solid var(--kh-llano);
	border-radius: 0 4px 4px 0;
}

.kh-form__aviso--error {
	border-left-color: var(--kh-kom);
}

@media (max-width: 599px) {
	.kh-form__fila {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Pie
   ========================================================================== */

.kh-footer {
	background: var(--kh-asfalto);
	color: #AEBAC3;
	padding-block: clamp(3.5rem, 7vw, 5rem) 2rem;
	font-size: 1rem;
}

.kh-footer a {
	color: var(--kh-blanco);
	text-decoration: none;
}

.kh-footer a:hover {
	text-decoration: underline;
	text-decoration-color: var(--kh-kom);
	text-underline-offset: 4px;
}

.kh-footer__marca {
	color: var(--kh-blanco);
	font-size: 1.75rem;
	margin-bottom: 0.75rem;
}

.kh-footer__columnas p {
	max-width: 24rem;
}

.kh-footer__titulo {
	color: var(--kh-blanco);
	font-family: var(--kh-condensada);
	font-weight: 600;
	font-size: 1.1875rem;
	margin-bottom: 0.5rem;
}

.kh-footer__lista {
	list-style: none;
	padding: 0;
	margin: 0;
}

.kh-footer__lista li {
	margin-block: 0.35rem;
}

body .kh-footer .kh-footer__legal {
	margin-block-start: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	font-size: 0.875rem;
}

/* ==========================================================================
   Páginas, entradas y 404
   ========================================================================== */

.kh-pagina {
	padding-block: clamp(3rem, 7vw, 5.5rem) clamp(4rem, 9vw, 7rem);
}

.kh-pagina__titulo {
	font-size: var(--wp--preset--font-size--xx-large);
	margin-block-end: 2rem;
}

.kh-pagina__fecha {
	font-size: var(--wp--preset--font-size--small);
	color: var(--kh-gris);
}

.kh-pagina .wp-block-post-content h2 {
	font-size: var(--wp--preset--font-size--x-large);
	margin-block-start: 2.5rem;
}

.kh-pagina .wp-block-post-content h3 {
	font-size: var(--wp--preset--font-size--large);
	margin-block-start: 2rem;
}

.kh-entradas .wp-block-post-template > li {
	padding-block: 1.75rem;
	border-bottom: 1px solid var(--kh-linea);
}

.kh-entradas .wp-block-post-title a {
	text-decoration: none;
}

.kh-entradas .wp-block-post-title a:hover {
	color: var(--kh-kom);
}

/* ==========================================================================
   Columnas en móvil
   ========================================================================== */

@media (max-width: 781px) {
	.kh-sec .wp-block-columns {
		gap: 2.5rem;
	}
}

/* El pie siempre al fondo, aunque la página sea corta */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}