/*
 Theme Name: Bricks Child - Hotel 4 Postes
 Description: Tema hijo de Bricks para hotel4postes.es
 Author: Hazmeweb
 Template: bricks
 Version: 1.0.0
 Text Domain: bricks
*/

/*
 * Base del diseño heredado de Hemma (valores medidos en producción).
 * Va fuera de cascade layers a propósito: así prevalece sobre el CSS de Bricks (que sí usa @layer).
 * Breakpoints de Hemma: 769px, 1020px y 1240px.
 */

@font-face {
	font-family: "Lato";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(fonts/lato-400.woff2) format("woff2");
}

@font-face {
	font-family: "Playfair Display";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(fonts/playfair-display-700.woff2) format("woff2");
}

@font-face {
	font-family: "Playfair Display";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url(fonts/playfair-display-400-italic.woff2) format("woff2");
}

/* Fuente de iconos Flaticon del original (mismos glifos que producción) */
@font-face {
	font-family: "Flaticon";
	font-style: normal;
	font-weight: normal;
	font-display: block;
	src: url(fonts/flaticon.woff) format("woff");
}

[class^="flaticon-"]:before, [class*=" flaticon-"]:before {
	font-family: Flaticon;
	font-size: 20px;
	font-style: normal;
	margin-right: 10px;
	display: inline-block;
}

.flaticon-desk:before { content: "\f100"; }
.flaticon-air-conditioner:before { content: "\f101"; }
.flaticon-bathtub:before { content: "\f102"; }
.flaticon-bed:before { content: "\f103"; }
.flaticon-hair-dryer:before { content: "\f104"; }
.flaticon-minibar:before { content: "\f105"; }
.flaticon-restaurant:before { content: "\f106"; }
.flaticon-safebox:before { content: "\f107"; }
.flaticon-shower:before { content: "\f108"; }
.flaticon-telephone:before { content: "\f109"; }
.flaticon-television:before { content: "\f10a"; }
.flaticon-people:before { content: "\f10b"; }
.flaticon-forma-u-01:before { content: "\f10c"; }
.flaticon-004-expand:before { content: "\f10d"; }
.flaticon-menu:before { content: "\f10e"; }
.flaticon-dinner:before { content: "\f10f"; }
.flaticon-couch-1:before { content: "\f110"; }
.flaticon-069-tray:before { content: "\f111"; }
.flaticon-072-desk-bell:before { content: "\f112"; }
.flaticon-cocktail:before { content: "\f113"; }
.flaticon-teatro-03:before { content: "\f114"; }
.flaticon-escuela-02:before { content: "\f115"; }
.flaticon-towel:before { content: "\f116"; }
.flaticon-wifi:before { content: "\f117"; }

:root {
	--h4p-orange: #e87721;
	--h4p-dark: #333;
	--h4p-text: rgba(51, 51, 51, 0.85);
	--h4p-muted: rgba(51, 51, 51, 0.6);
	--h4p-bg: #f5f5f5;
	--h4p-border: #e7e7e7;
	--h4p-border-hover: #aeb1b5;
	--h4p-white: #fff;
	--h4p-font-body: "Lato", sans-serif;
	--h4p-font-display: "Playfair Display", serif;
}

html {
	font-size: 16px;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

@media screen and (max-width: 320px) {
	html {
		font-size: 87.5%;
	}
}

body,
button,
input,
select,
textarea {
	color: var(--h4p-text);
	font-family: var(--h4p-font-body);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
}

body {
	background-color: var(--h4p-bg);
}

a {
	color: var(--h4p-dark);
	text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--h4p-dark);
	margin-top: 0;
	margin-bottom: 1.6rem;
	font-weight: 700;
	line-height: 1.1;
}

h1 { font-size: 2.74388rem; font-family: var(--h4p-font-display); }
h2 { font-size: 1.82925rem; }
h3 { font-size: 1.2195rem; }
h4, h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }

@media screen and (min-width: 1240px) {
	h1 { font-size: 3.375rem; }
	h2 { font-size: 2.25rem; }
	h3 { font-size: 1.5rem; }
}

p {
	margin-top: 0;
	margin-bottom: 1.6rem;
}

b, strong { font-weight: 700; }
em, i, cite { font-style: italic; }

hr {
	border: 0;
	border-top: 1px solid var(--h4p-border);
	clear: both;
	margin: 2em 0;
}

/* Contenido de entradas y páginas */
.brxe-post-content a,
.h4p-content a {
	color: var(--h4p-orange);
	border-bottom: solid 1px;
}

.brxe-post-content a:hover,
.h4p-content a:hover {
	color: var(--h4p-dark);
}

/* Prefijo doble para ganar a content-default.min.css de Bricks (borde, relleno y tamaño propios) */
.brxe-post-content.brxe-post-content blockquote {
	font-family: inherit;
	font-size: inherit;
	font-style: italic;
	font-weight: 700;
	margin: 0 3rem;
	padding: 0;
	border: 0;
}

.brxe-post-content blockquote:before {
	content: "\201C";
	display: block;
	font-size: 2rem;
	height: 0;
	left: -1.5rem;
	position: relative;
	top: -0.5rem;
}

/* Títulos de Hemma */
.h4p-hero-title,
.h4p-block-title,
.h4p-block-subtitle,
.h4p-hero-subtitle,
.h4p-entry-title {
	font-family: var(--h4p-font-display);
	word-wrap: break-word;
}

.h4p-hero-title {
	font-size: 4.11581rem;
	font-weight: 700;
	line-height: 1.1;
	margin-bottom: 1.6rem;
}

.h4p-block-title {
	font-size: 2.74388rem;
	font-weight: 700;
	line-height: 1.1;
	margin-bottom: 1.6rem;
}

.h4p-hero-subtitle {
	font-size: 1.82925rem;
	font-style: italic;
	font-weight: 400;
	line-height: 1.1;
	color: var(--h4p-muted);
	margin-bottom: 1.6rem;
}

.h4p-block-subtitle {
	font-size: 1.2195rem;
	font-style: italic;
	font-weight: 400;
	line-height: 1.1;
	color: var(--h4p-muted);
	margin-bottom: 1.6rem;
}

/* Móvil: la palabra más larga del título («Celebraciones», «Instalaciones») tiene que caber entera; en Hemma se partía */
@media screen and (max-width: 768px) {
	.h4p-hero-title { font-size: clamp(2rem, calc((100vw - 40px) / 7), 4.11581rem); }
	/* Títulos de bloque con palabras largas en inglés y francés («Accommodation») */
	.h4p-block-title { font-size: clamp(1.75rem, calc((100vw - 40px) / 8), 2.74388rem); }
}

@media screen and (min-width: 1240px) {
	.h4p-hero-title { font-size: 5.0625rem; }
	.h4p-block-title { font-size: 3.375rem; }
	.h4p-hero-subtitle { font-size: 2.25rem; }
	.h4p-block-subtitle { font-size: 1.5rem; }
	.h4p-strip .h4p-block-title { font-size: 2.95312rem; }
	.h4p-strip .h4p-block-subtitle { font-size: 1.3125rem; }
}

.h4p-text-light,
.h4p-text-light a,
.h4p-text-light h1, .h4p-text-light h2, .h4p-text-light h3,
.h4p-text-light h4, .h4p-text-light h5, .h4p-text-light h6,
.h4p-text-light .h4p-hero-subtitle,
.h4p-text-light .h4p-block-subtitle {
	color: var(--h4p-white);
}

/* Botones (equivalen a .button de Hemma) */
.h4p-button,
input[type="button"],
input[type="submit"] {
	-webkit-appearance: none;
	appearance: none;
	background-color: transparent;
	border: 1px solid var(--h4p-border);
	border-radius: 0;
	color: var(--h4p-text);
	cursor: pointer;
	display: inline-block;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 1.6;
	text-transform: uppercase;
	padding: 0.875rem 1rem;
	margin-bottom: 1rem;
	position: relative;
	vertical-align: middle;
	text-align: center;
	user-select: none;
}

.h4p-button:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
	border-color: var(--h4p-border-hover);
	color: var(--h4p-dark);
}

.h4p-text-light .h4p-button:hover,
.h4p-text-light .h4p-button:focus {
	color: var(--h4p-white);
	border-color: var(--h4p-white);
}

.h4p-button.is-orange {
	background: var(--h4p-orange);
	border-color: transparent;
	color: var(--h4p-white);
}

.h4p-button.is-orange:hover,
.h4p-button.is-orange:focus {
	background: #000;
	border-color: transparent;
	color: var(--h4p-white);
}

.h4p-button.is-green {
	background: #6bb470;
	border-color: transparent;
	color: var(--h4p-white);
}

.h4p-button.is-green:hover,
.h4p-button.is-green:focus {
	background: #5aab60;
	border-color: transparent;
	color: var(--h4p-white);
}

.h4p-button.is-white {
	background: var(--h4p-white);
	border-color: transparent;
	color: rgba(0, 0, 0, 0.85);
}

.h4p-button.is-white:hover,
.h4p-button.is-white:focus {
	background: #f2f2f2;
	color: rgba(0, 0, 0, 0.85);
}

/* ==========================================================================
   Cabecera (plantilla Bricks "Cabecera" + js/header.js)
   ========================================================================== */
#brx-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9;
	height: 90px;
	padding: 15px 0;
	background-color: var(--h4p-white);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 1px;
	color: var(--h4p-dark);
	width: auto;
}

body.admin-bar #brx-header { top: 32px; }

@media screen and (max-width: 782px) {
	body.admin-bar #brx-header { top: 46px; }
}

#brx-header.is-hero-on {
	background-color: transparent;
	box-shadow: none;
}

@media screen and (min-width: 769px) {
	#brx-header.is-hero-on { margin: 20px; }
}

#brx-header.is-fixed {
	position: fixed;
	margin: 0;
	background-color: rgba(255, 255, 255, 0.97);
	transform: translateY(-100%);
	transition: transform .25s;
}

#brx-header.is-fixed.is-transitioning { transition: transform .35s; }
#brx-header.is-fixed.is-visible { transform: none; }
#brx-header.is-fixed.is-hidden { visibility: hidden; opacity: 0; }
body.no-scroll #brx-header { transform: none !important; }

.h4p-header,
.h4p-header__inner {
	width: 100%;
	height: 60px;
}

.h4p-header__inner {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	max-width: none;
	padding: 0 20px;
}

@media screen and (min-width: 1020px) {
	.h4p-header__inner { padding: 0 40px; }
}

/* Hemma reserva 237px (ancho del logo blanco del hero) y centra el logo naranja dentro */
.h4p-header__logo {
	display: flex;
	justify-content: center;
	width: 237px;
	height: 60px;
}

.h4p-header__logo .bricks-site-logo {
	height: 60px;
	width: auto;
}

/* Menú a pantalla completa (nav-menu de Bricks en modo "siempre móvil") */
.h4p-nav .bricks-mobile-menu-toggle {
	position: relative;
	right: -1rem;
	width: 3.375rem;
	height: 60px;
	z-index: 1001;
	color: var(--h4p-dark);
}

#brx-header.is-hero-on .h4p-nav .bricks-mobile-menu-toggle { color: var(--h4p-white); }
.h4p-nav.show-mobile-menu .bricks-mobile-menu-toggle { color: var(--h4p-dark) !important; }

.h4p-nav .bricks-mobile-menu-toggle span,
.h4p-nav .bricks-mobile-menu-toggle:hover span {
	width: 1.375rem;
	min-width: 0;
	height: 0.125rem;
	left: 50%;
	right: auto;
	transform-origin: left center;
	transition: transform 0.35s, width 0.35s, top 0.3s, opacity 0.35s;
}

.h4p-nav .bricks-mobile-menu-toggle .bar-top { top: calc(50% - 0.0625rem - 0.375rem); transform: translateX(-50%); }
.h4p-nav .bricks-mobile-menu-toggle .bar-center { top: calc(50% - 0.0625rem); transform: translateX(-50%); }
.h4p-nav .bricks-mobile-menu-toggle .bar-bottom { top: calc(50% - 0.0625rem + 0.375rem); transform: translateX(-50%); }

/* Abierto: flecha "<" como en Hemma */
.h4p-nav.show-mobile-menu .bricks-mobile-menu-toggle { width: 3.375rem; min-width: 0; }
.h4p-nav.show-mobile-menu .bricks-mobile-menu-toggle .bar-center { opacity: 1; }
.h4p-nav.show-mobile-menu .bricks-mobile-menu-toggle .bar-top {
	top: calc(50% - 0.0625rem);
	width: 0.6875rem;
	transform: translateX(-0.6875rem) rotate(-45deg);
}
.h4p-nav.show-mobile-menu .bricks-mobile-menu-toggle .bar-bottom {
	top: calc(50% - 0.0625rem);
	width: 0.6875rem;
	transform: translateX(-0.6875rem) rotate(45deg);
}

.h4p-nav .bricks-mobile-menu-wrapper,
.h4p-nav .bricks-mobile-menu-wrapper.left {
	width: 100%;
	max-width: 100vw;
	top: 0;
	left: 0;
	right: 0;
	transform: none;
	opacity: 0;
	color: var(--h4p-dark);
	justify-content: center;
	text-align: center;
	font-family: var(--h4p-font-display);
	font-size: 1.82925rem;
	font-weight: 700;
	letter-spacing: normal;
	line-height: 1.6;
	transition: opacity .35s, visibility .35s;
}

@media screen and (min-width: 769px) {
	.h4p-nav .bricks-mobile-menu-wrapper { font-size: 2.95312rem; }
}

.h4p-nav .bricks-mobile-menu-wrapper:before { background-color: var(--h4p-white); }
.h4p-nav .bricks-mobile-menu-overlay { display: none; }

.h4p-nav .bricks-mobile-menu {
	overflow-y: auto;
	padding: 20px 15px;
	margin: 0;
	list-style: none;
}

.h4p-nav .bricks-mobile-menu > li > a {
	display: inline-block;
	width: auto;
	padding: 0;
	line-height: 1.6;
	position: relative;
	color: var(--h4p-dark);
}

.h4p-nav .bricks-mobile-menu > li > a:after {
	content: '';
	position: absolute;
	bottom: 0.25rem;
	left: 50%;
	width: 0;
	height: 1px;
	background-color: var(--h4p-border-hover);
	transition: width 0.35s;
	transform: translateX(-50%);
}

.h4p-nav .bricks-mobile-menu > li > a:hover:after { width: 100%; }

/* Selector de idioma (hotel4postes-core/includes/idiomas.php): última línea del menú, más discreta */
.h4p-nav .bricks-mobile-menu > li.h4p-lang-switcher {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--h4p-border-hover);
	font-family: var(--h4p-font-body);
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 1px;
	text-transform: uppercase;
}
.h4p-nav .bricks-mobile-menu > li.h4p-lang-switcher > a { line-height: 2; }
.h4p-nav .bricks-mobile-menu > li.h4p-lang-switcher > a[aria-current] { color: var(--h4p-orange); font-weight: 700; }
.h4p-lang-switcher__sep { margin: 0 0.75rem; color: var(--h4p-muted); }

/* ==========================================================================
   Pie (plantilla Bricks "Pie")
   ========================================================================== */
#brx-footer {
	position: relative;
	z-index: 8;
	background-color: #fafafa;
}

@media screen and (min-width: 769px) {
	#brx-footer { background-color: var(--h4p-white); }
}

.h4p-footer {
	padding-top: 30px;
	width: 100%;
}

.h4p-footer__cols {
	display: flex;
	flex-direction: column;
	max-width: none;
	width: 100%;
	padding: 0;
}

@media screen and (min-width: 769px) {
	.h4p-footer__cols {
		display: grid;
		grid-template-columns: 2fr 1fr 1fr;
		padding: 0 10px;
	}
}

@media screen and (min-width: 1020px) {
	.h4p-footer__cols { padding: 0 20px; }
}

/* Padding de columna de Hemma + 32px de margen inferior de cada widget */
.h4p-footer__col { padding: 20px 20px 52px; }

@media screen and (min-width: 769px) and (max-width: 1019px) {
	.h4p-footer__col { padding: 10px 10px 42px; }
}

.h4p-footer__col--main {
	display: flex;
	flex-direction: column;
}

@media screen and (min-width: 992px) {
	.h4p-footer__col--main { flex-direction: row; }
	.h4p-footer__logos { flex: 0 0 33.3333%; padding-right: 15px; }
	.h4p-footer__claim { flex: 0 0 66.6667%; padding-right: 15px; }
}

.h4p-footer__logos {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.h4p-footer__logo img { width: 111px; height: 110px; margin-bottom: 24px; }
.h4p-footer__sercotel img { width: 111px; height: 42px; margin-bottom: 24px; }

.h4p-imaginatelo {
	display: block;
	font-family: var(--h4p-font-display);
	font-size: 40px;
	font-style: italic;
	color: #000;
	line-height: 2.05;
}

.h4p-footer__claim p { margin-bottom: 0; }

.h4p-footer__col--next {
	display: grid;
	grid-template-columns: 1fr;
	/* Apiladas, WordPress suma su block gap (24px) al gap de columnas (2em) */
	gap: calc(2em + 24px) 2em;
	align-items: start;
}

/* Las columnas de bloques de WordPress se ponen en fila a partir de 782px */
@media screen and (min-width: 782px) {
	.h4p-footer__col--next { grid-template-columns: 1fr 1fr; }
}

.h4p-footer__cartel { margin-bottom: 24px; max-width: 375px; }
.h4p-footer__cartel img { width: 100%; height: auto; margin-bottom: 0; }

.h4p-small { font-size: 13px; line-height: 1.6; }

.h4p-widget-title {
	color: var(--h4p-dark);
	font-weight: 700;
	font-family: var(--h4p-font-body);
	font-size: 1rem;
	line-height: 1.6;
	margin-bottom: 1rem;
}

.h4p-footer a { color: var(--h4p-dark); }

.h4p-footer__contact p { margin-bottom: 0; }

.h4p-social {
	display: flex;
	gap: 4px;
	flex-direction: row;
}

.h4p-social__link {
	display: block;
	width: 28px;
	height: 32px;
	background-color: #000;
	-webkit-mask: var(--h4p-icon) center / contain no-repeat;
	mask: var(--h4p-icon) center / contain no-repeat;
	transition: background-color .2s;
}

.h4p-social__link:hover { background-color: var(--h4p-orange); }
.h4p-social__link--facebook-square { --h4p-icon: url(icons/facebook-square.svg); }
.h4p-social__link--square-x-twitter { --h4p-icon: url(icons/square-x-twitter.svg); }
.h4p-social__link--instagram { --h4p-icon: url(icons/instagram.svg); }

.h4p-site-info {
	max-width: none;
	width: 100%;
	padding: 10px 20px;
	background-color: var(--h4p-white);
	font-size: 87.5%;
}

@media screen and (min-width: 1020px) {
	.h4p-site-info { padding: 10px 40px; }
}

.h4p-site-info p { margin-bottom: 0; }

/* ==========================================================================
   Estructura de página (equivalente a .site-content/.container/.column de Hemma)
   ========================================================================== */
#brx-content { width: 100%; }

.h4p-card {
	margin-top: 90px;
	background-color: var(--h4p-white);
}

@media screen and (min-width: 769px) {
	body { background-color: var(--h4p-bg); }
	.h4p-card {
		margin: 110px 20px 20px;
		width: auto;
		box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
	}
}

.h4p-container {
	position: relative;
	width: 100%;
	max-width: none;
	padding-left: 20px;
	padding-right: 20px;
	align-items: stretch;
}

@media screen and (min-width: 1020px) {
	.h4p-container {
		max-width: 1020px;
		padding-left: 40px;
		padding-right: 40px;
		margin: 0 auto;
	}
}

@media screen and (min-width: 1240px) {
	.h4p-container { max-width: 1140px; }
}

.h4p-col-8 {
	width: 100%;
	padding: 20px 0;
}

/* Columna is-8 is-offset-2 de Hemma: los % se calculan sobre el ancho + los márgenes negativos de .columns (gutter) */
@media screen and (min-width: 769px) {
	.h4p-col-8 {
		--h4p-gutter: 10px;
		width: calc((100% + 2 * var(--h4p-gutter)) * 2 / 3 - 2 * var(--h4p-gutter));
		margin-left: calc((100% + 2 * var(--h4p-gutter)) / 6);
		padding: 10px 0;
	}
}

@media screen and (min-width: 1020px) {
	.h4p-col-8 {
		--h4p-gutter: 20px;
		padding: 20px 0;
	}
}


.h4p-entry-title {
	font-family: var(--h4p-font-display);
	margin-bottom: 1.6rem;
}

.h4p-single-thumbnail,
.h4p-single-thumbnail img { width: 100%; }

.h4p-entry-content { width: 100%; }

/* ==========================================================================
   Elementos base de Hemma dentro del contenido de WordPress
   ========================================================================== */
.brxe-post-content ul,
.brxe-post-content ol {
	margin: 0 0 1.5rem 2rem;
	padding: 0;
}

.brxe-post-content li > ul,
.brxe-post-content li > ol { margin-bottom: 0; }

.brxe-post-content table {
	border-collapse: collapse;
	margin: 0 0 1.5em;
	width: 100%;
}

.brxe-post-content thead th {
	border-bottom: 2px solid var(--h4p-border);
	padding-bottom: 0.5em;
}

.brxe-post-content th { padding: 0.4em; text-align: left; }
.brxe-post-content tr { border-bottom: 1px solid var(--h4p-border); }
.brxe-post-content td { padding: 0.4em; }
.brxe-post-content th:first-child,
.brxe-post-content td:first-child { padding-left: 0; }
.brxe-post-content th:last-child,
.brxe-post-content td:last-child { padding-right: 0; }

.brxe-post-content figure { margin: 0 0 1.5rem 0; }

.brxe-post-content img {
	height: auto;
	max-width: 100%;
	vertical-align: middle;
	margin-bottom: 1.5rem;
}

/* Utilidades del CSS personalizado de producción que se usan dentro de contenidos */
.separador1 { height: 10px; }
.separador2 { height: 20px; }
.separador3 { height: 30px; }
.separador4 { height: 40px; }
.separador5 { height: 50px; }
.separador6 { height: 60px; }
.separador7 { height: 70px; }
.separador8 { height: 80px; }
.separador9 { height: 90px; }
.separador10 { height: 100px; }
.separador15 { height: 150px; }
.txtw { color: #515151; }
.txt { font-size: 0.8em; }

/* ==========================================================================
   Hero (plantilla Bricks "Hero")
   ========================================================================== */
.h4p-hero {
	position: relative;
	width: auto;
	align-items: stretch;
	background-color: var(--h4p-dark);
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

.h4p-hero[data-bg="is-red"] { background-color: #fb6658; }
.h4p-hero[data-bg="is-orange"] { background-color: #fc8251; }
.h4p-hero[data-bg="is-yellow"] { background-color: #f9c356; }
.h4p-hero[data-bg="is-green"] { background-color: #6bb470; }
.h4p-hero[data-bg="is-light-blue"] { background-color: #60c2e4; }
.h4p-hero[data-bg="is-blue"] { background-color: #4a89dc; }
.h4p-hero[data-bg="is-purple"] { background-color: #a188e0; }
.h4p-hero[data-bg="is-pink"] { background-color: #ea7cba; }
.h4p-hero[data-bg="is-brown"] { background-color: #b39164; }
.h4p-hero[data-bg="is-dark"] { background-color: #565656; }

@media screen and (min-width: 769px) {
	.h4p-hero { margin: 20px; }
}

.h4p-hero__content {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1 0 auto;
	width: 100%;
}

.h4p-hero[data-height="is-fullheight"],
.h4p-hero[data-height="is-fullheight"] > .h4p-hero__content { min-height: 100vh; }
.h4p-hero[data-height="is-halfheight"],
.h4p-hero[data-height="is-halfheight"] > .h4p-hero__content { min-height: 50vh; }

@media screen and (min-width: 769px) {
	.h4p-hero[data-height="is-fullheight"],
	.h4p-hero[data-height="is-fullheight"] > .h4p-hero__content { min-height: calc(100vh - 40px); }
	.h4p-hero[data-height="is-halfheight"],
	.h4p-hero[data-height="is-halfheight"] > .h4p-hero__content { min-height: calc(50vh - 30px); }
}

.h4p-hero__text {
	width: 100%;
	padding: 90px 20px;
}

@media screen and (min-width: 1020px) {
	.h4p-hero__text { padding: 90px 40px; }
}

.h4p-hero[data-align="is-centered"] .h4p-hero__text { text-align: center; }
.h4p-hero[data-align="is-centered"] .h4p-hero__text > * { margin-left: auto; margin-right: auto; }

.h4p-hero-stars {
	display: block;
	width: 111px;
	margin-bottom: 24px;
}

.h4p-hero-stars img { width: 111px; height: auto; margin: 0; }

/* Ratón animado de Hemma */
.h4p-scroll-icon {
	position: absolute;
	bottom: 40px;
	left: calc(50% - 11px);
	width: 22px;
	height: 32px;
	border-radius: 12px;
	border: 2px solid var(--h4p-white);
	cursor: pointer;
	transition: all .5s ease;
}

.h4p-scroll-icon:before {
	content: '';
	display: block;
	position: absolute;
	top: 6px;
	left: 6px;
	width: 6px;
	height: 6px;
	border-radius: 6px;
	background: var(--h4p-white);
	animation: h4p-mouse-wheel 3s cubic-bezier(0.15, 0.41, 0.69, 0.94) infinite;
}

@media screen and (max-width: 768px) {
	.h4p-scroll-icon { display: none !important; }
}

@keyframes h4p-mouse-wheel {
	0% { opacity: 0; }
	10% { opacity: 1; }
	55% { transform: translateY(0); opacity: 1; }
	100% { transform: translateY(10px); opacity: 0; }
}

/* Barra de datos (extras-meta de Hemma) */
.h4p-extras-meta {
	color: var(--h4p-muted);
	font-weight: 700;
	font-size: 87.5%;
	margin-bottom: 1rem;
}

.h4p-hero .h4p-extras-meta {
	position: absolute;
	bottom: 20px;
	left: 0;
	right: 0;
	text-align: left;
	color: var(--h4p-white);
	margin-bottom: 0;
	padding: 0 20px;
}

@media screen and (min-width: 1020px) {
	.h4p-hero .h4p-extras-meta { padding: 0 40px; }
}

.h4p-extras-meta__block {
	display: inline-block;
	padding-top: 10px;
	padding-bottom: 10px;
	line-height: 18px;
}

.h4p-extras-meta__block:not(:last-child) {
	padding-right: 20px;
	margin-right: 20px;
	border-right: 1px solid rgba(255, 255, 255, 0.5);
}

.h4p-block .h4p-extras-meta__block:not(:last-child) { border-right-color: var(--h4p-border); }

/* Iconos SVG del sprite de Hemma (heredan el color del texto) */
.h4p-icon {
	display: inline-block;
	width: 18px;
	height: 18px;
	margin-right: 10px;
	vertical-align: bottom;
	background-color: currentColor;
	-webkit-mask: var(--h4p-icon) center / contain no-repeat;
	mask: var(--h4p-icon) center / contain no-repeat;
}

.h4p-icon--guests { --h4p-icon: url(icons/hemma-guests.svg); }
.h4p-icon--size { --h4p-icon: url(icons/hemma-size.svg); }
.h4p-icon--beds { --h4p-icon: url(icons/hemma-beds.svg); }
.h4p-icon--calendar { --h4p-icon: url(icons/hemma-calendar.svg); }
.h4p-icon--food { --h4p-icon: url(icons/hemma-food.svg); }
.h4p-icon--pin { --h4p-icon: url(icons/hemma-pin.svg); }

/* Páginas y fichas con hero: el hero va dentro de la tarjeta blanca (site-content de Hemma) */
@media screen and (max-width: 768px) {
	.h4p-card--hero { margin-top: 0; }
}

@media screen and (min-width: 769px) {
	.h4p-card--hero { margin: 20px 20px 20px; }
	.h4p-card--hero .h4p-hero { margin: 0 0 20px; }
}

.h4p-col-12 {
	width: 100%;
	padding: 20px 0;
}

@media screen and (min-width: 769px) and (max-width: 1019px) {
	.h4p-col-12 { padding: 10px 0; }
}

/* .content-area de Hemma (40px) + padding vertical de su .column. Al final para prevalecer sobre .h4p-col-* */
.h4p-content-area {
	padding-top: 60px;
	padding-bottom: 60px;
}

@media screen and (min-width: 769px) and (max-width: 1019px) {
	.h4p-content-area { padding-top: 50px; padding-bottom: 50px; }
}

/* Hero de la portada (template-composer de Hemma + CSS personalizado de producción) */
/* Bricks pone la clase en el propio <img>. En Hemma era un <img> inline dentro de un figure de 27px de alto */
.h4p-hero-stars.h4p-hero-stars--home {
	width: 89px;
	margin-top: 3px;
	margin-bottom: 0;
}

.h4p-hero-kicker {
	display: block;
	font-family: var(--h4p-font-body);
	letter-spacing: 1.3px;
	margin: 0;
}

.h4p-hero-title--home {
	font-size: 8.125rem;
	line-height: 1.1;
}

@media screen and (max-width: 812px) and (-webkit-min-device-pixel-ratio: 3) {
	.h4p-hero-title--home { font-size: 5.5em; }
}

@media screen and (max-width: 667px) {
	.h4p-hero-title--home { font-size: 5em; }
}

/* ==========================================================================
   Bloques de la portada (composer de Hemma) — componentes "Bloque dividido" y "Bloque imagen de fondo"
   ========================================================================== */
.h4p-block {
	position: relative;
	width: auto;
	align-items: stretch;
	opacity: 0;
	transform: translateY(100px);
	transition: all .45s ease;
}

.h4p-block[data-in-view],
.bricks-is-builder .h4p-block { opacity: 1; transform: none; }

@media screen and (min-width: 769px) {
	.h4p-block {
		margin: 20px;
		background-color: var(--h4p-white);
	}
	.h4p-block .h4p-block__content { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); }
}

.h4p-block__content {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1 0 auto;
	width: 100%;
}

.h4p-block-text {
	padding-top: 40px;
	padding-bottom: 40px;
}

.h4p-block-title,
.h4p-block-subtitle { font-family: var(--h4p-font-display); }

.h4p-block .h4p-button { margin-bottom: 0; }

.noroto { max-width: 475px; }

/* Alturas */
.h4p-split,
.h4p-split > .h4p-block__content,
.h4p-is-fullheight,
.h4p-is-fullheight > .h4p-block__content { min-height: 100vh; }

.h4p-fullbg,
.h4p-fullbg > .h4p-block__content,
.h4p-is-halfheight,
.h4p-is-halfheight > .h4p-block__content { min-height: 50vh; }

@media screen and (min-width: 769px) {
	.h4p-split,
	.h4p-split > .h4p-block__content,
	.h4p-is-fullheight,
	.h4p-is-fullheight > .h4p-block__content { min-height: calc(100vh - 40px); }

	.h4p-fullbg,
	.h4p-fullbg > .h4p-block__content,
	.h4p-is-halfheight,
	.h4p-is-halfheight > .h4p-block__content { min-height: calc(50vh - 30px); }
}

/* Bloque dividido */
.h4p-split__container {
	position: relative;
	width: 100%;
	padding: 0 20px;
}

@media screen and (min-width: 1020px) {
	.h4p-split__container { padding: 0 40px; }
}

.h4p-split__column { padding: 20px 0; }

.h4p-split__figure {
	display: block;
	width: 100%;
	object-fit: cover;
	object-position: center center;
	background-color: var(--h4p-bg);
	margin: 0;
	min-height: 50vh;
}

@media screen and (min-width: 769px) and (max-width: 1019px) {
	.h4p-split__figure { min-height: calc(50vh - 20px); height: calc(50vh - 20px); }
	.h4p-split__column { padding: 10px 0; }
	.h4p-split .h4p-block-text { min-height: calc(50vh - 40px); }
}

@media screen and (max-width: 768px) {
	.h4p-split__figure { height: 50vh; }
	.h4p-split .h4p-block-text { min-height: calc(50vh - 40px); }
}

@media screen and (min-width: 1020px) {
	.h4p-split__figure {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 50%;
		right: 0;
		width: 50%;
		height: 100%;
		min-height: 0;
		z-index: 8;
	}

	.h4p-split__column {
		width: calc(50% + 20px);
		margin-left: -20px;
		padding: 20px;
	}

	.h4p-split .h4p-block-text { padding-left: 20px; padding-right: 40px; }

	.h4p-split--img-left .h4p-split__figure { left: 0; right: 50%; }
	.h4p-split--img-left .h4p-split__column { margin-left: 50%; }
	.h4p-split--img-left .h4p-block-text { padding-left: 40px; padding-right: 20px; }
}

/* Bloque con imagen de fondo */
.h4p-fullbg {
	background-color: var(--h4p-dark);
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	text-align: center;
}

.h4p-fullbg__container {
	width: 100%;
	padding-left: 20px;
	padding-right: 20px;
}

@media screen and (min-width: 1020px) {
	.h4p-fullbg__container { padding-left: 40px; padding-right: 40px; }
}

.h4p-fullbg .h4p-block-title,
.h4p-fullbg .h4p-block-subtitle { margin-left: auto; margin-right: auto; }

/* Franja "La revista": título primero en el DOM (SEO: H2 antes que los H3); en escritorio a la izquierda y en móvil al final como en Hemma */
.h4p-strip {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: stretch;
}

.h4p-strip > .h4p-block__content {
	display: grid;
	grid-template-columns: 1fr;
}

@media screen and (min-width: 769px) {
	.h4p-strip > .h4p-block__content { grid-template-columns: repeat(2, 1fr); }
}

@media screen and (min-width: 1020px) {
	.h4p-strip > .h4p-block__content { grid-template-columns: repeat(4, 1fr); }
}

.h4p-strip__title {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	order: 99;
}

@media screen and (min-width: 769px) {
	.h4p-strip__title { order: -1; }
}

.h4p-strip__title-box { padding: 30px 15px; }

.h4p-strip .h4p-block-title { font-size: 2.74388rem; }

@media screen and (min-width: 1240px) {
	.h4p-strip .h4p-block-title { font-size: 2.95312rem; }
	.h4p-strip .h4p-block-subtitle { font-size: 1.3125rem; }
}

.h4p-strip__thumb {
	position: relative;
	display: block;
	text-align: center;
}

.h4p-strip__thumb img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}

.h4p-strip__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 15px;
	background-color: rgba(51, 51, 51, 0);
	transition: background-color .25s ease;
}

.h4p-strip__overlay-title {
	max-width: 100%;
	word-wrap: break-word;
	margin: 0;
	color: var(--h4p-white);
	opacity: 0;
	transform: translateY(20px);
	transition: all .35s ease;
}

.h4p-strip__thumb:hover .h4p-strip__overlay { background-color: rgba(51, 51, 51, 0.5); }
.h4p-strip__thumb:hover .h4p-strip__overlay-title { opacity: 1; transform: none; }

/* Libro de visitas (slider nativo de Bricks con estilo Swiper de Hemma) */
.h4p-guestbook { text-align: center; }
.h4p-guestbook > .h4p-block__content { justify-content: center; padding: 40px 0; }
.h4p-guestbook__head { width: 100%; padding: 0 20px; }

@media screen and (min-width: 1020px) {
	.h4p-guestbook__head { padding: 0 40px; }
}

.h4p-guestbook__slider { width: 100%; margin-bottom: 24px; }

.h4p-guest {
	width: 100%;
	padding: 20px;
	align-items: center;
}

/* .column.is-offset-1 (y .is-10-desktop en escritorio) de Hemma dentro de .container con .columns de margen negativo */
@media screen and (min-width: 769px) and (max-width: 1019px) {
	.h4p-guest { padding: 10px 20px 10px calc((100% - 20px) / 12 + 20px); }
}

@media screen and (min-width: 1020px) {
	.h4p-guest { padding: 20px calc((100% - 40px) / 12 + 40px); }
}

.h4p-guest__avatar {
	width: 120px;
	height: 120px;
	border-radius: 999rem;
	margin: 1rem auto 1.5rem;
	object-fit: cover;
}

.h4p-guest__quote {
	font-size: 1.2195rem;
	font-style: italic;
	line-height: 1.6;
	/* Mejora sobre Hemma: en pantallas grandes la cita era demasiado ancha */
	max-width: 1080px;
	margin-left: auto;
	margin-right: auto;
}

@media screen and (min-width: 1240px) {
	.h4p-guest__quote { font-size: 1.5rem; }
}

.h4p-guest__quote p:first-of-type:before {
	content: '\201C';
	font-size: 3rem;
	left: -1rem;
	position: relative;
	top: 0.75rem;
	line-height: 0;
}

.h4p-guest__name {
	display: inline-block;
	font-weight: 700;
	color: var(--h4p-muted);
}

.h4p-guest__name:before { content: '\2014'; padding-right: 0.5rem; }
.h4p-guest__name:after { content: '\2014'; padding-left: 0.5rem; }

/* Libro de visitas y ficha de opinión: un bloque por opinión (.block-guestpost .guest-post de Hemma) */
.h4p-guestpost .h4p-guest { margin-bottom: 1.5rem; }

/* Ficha de opinión: sin hero, el bloque deja sitio a la cabecera (como .h4p-card) */
.h4p-guestpost--single { margin-top: 90px; }

@media screen and (min-width: 769px) {
	.h4p-guestpost--single { margin-top: 110px; }
}

.h4p-guestbook .splide__slide { opacity: 1; transition: opacity .7s ease; }
.h4p-guestbook .splide__pagination {
	position: relative;
	bottom: auto;
	height: 26px;
	align-items: center;
	margin-top: 1.5rem;
	padding: 0;
	gap: 0;
}

.h4p-guestbook__slider + div { margin-top: 24px; }
.h4p-guestbook .splide__pagination__page {
	width: 8px;
	height: 8px;
	margin: 0 8px;
	position: relative;
	opacity: 1;
	border-radius: 50%;
	background-color: var(--h4p-border-hover);
	transform: none;
	transition: background-color .35s ease;
}
.h4p-guestbook .splide__pagination__page:after {
	content: '';
	position: absolute;
	width: 16px;
	height: 16px;
	border: 1px solid transparent;
	border-radius: 100%;
	top: -4px;
	left: -4px;
	transition: border .35s ease;
}
.h4p-guestbook .splide__pagination__page.is-active { background: transparent; transform: none; }
.h4p-guestbook .splide__pagination__page.is-active:after { border-color: var(--h4p-border-hover); }

/* Mapa (About Us): mismo hueco que la imagen del bloque dividido y marcador pulsante de Hemma */
.h4p-split__map {
	width: 100%;
	height: 50vh;
	background-color: var(--h4p-bg);
}

@media screen and (min-width: 769px) and (max-width: 1019px) {
	.h4p-split__map { height: calc(50vh - 20px); }
}

@media screen and (min-width: 1020px) {
	.h4p-split .h4p-split__map {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 50%;
		width: 50%;
		height: 100%;
		z-index: 8;
	}
	.h4p-split--img-left .h4p-split__map { left: 0; }
}

.h4p-map-marker {
	position: relative;
	display: block;
	width: 100px;
	height: 100px;
}

/* Bricks ancla el marcador por abajo; Hemma lo centraba en el punto (labelAnchor 50,50) */
.brx-google-marker:has(.h4p-map-marker) { transform: translate(-50%, -50%) !important; }

.h4p-map-marker:before {
	content: '';
	display: block;
	box-sizing: border-box;
	width: 10px;
	height: 10px;
	position: absolute;
	top: 45px;
	left: 45px;
	border-radius: 50%;
	background: #fc8251;
	border: 1px solid var(--h4p-white);
	z-index: 207;
}

.h4p-map-marker:after {
	content: '';
	width: 100px;
	height: 100px;
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	background: rgba(252, 130, 81, 0.1);
	border-radius: 50%;
	opacity: 0;
	z-index: 206;
	animation: h4p-pulsate 2400ms ease-out infinite;
}

.brx-marker-text:has(.h4p-map-marker) { background: none; border: 0; padding: 0; box-shadow: none; overflow: visible; }

@keyframes h4p-pulsate {
	0% { transform: scale(0.1); opacity: 0; }
	50% { opacity: 1; }
	100% { transform: scale(1.2); opacity: 0; }
}

/* Sección del buscador de la portada (bloque fijo de template-composer.php) */
.h4p-intro {
	width: auto;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	padding-top: 100px;
}

@media screen and (min-width: 769px) {
	.h4p-intro { margin: 0 20px; }
}

.h4p-intro__col { width: 100%; padding: 0 15px; }

@media screen and (min-width: 768px) {
	.h4p-intro__col { width: 50%; }
}

.h4p-intro__col--left { padding-top: 60px; }
.h4p-intro__booking { margin-left: 25px; }
.h4p-intro__booking > .brxe-shortcode { margin-left: 10px; }

.h4p-intro__line {
	width: 140px;
	height: 2px;
	margin-top: 60px;
	background-color: var(--h4p-orange);
}

.h4p-intro__text {
	margin-top: 20px;
	padding-right: 33%;
	margin-bottom: calc(1.6rem + 40px);
}

.h4p-intro__text a { color: var(--h4p-orange); }

.h4p-intro__col--right { padding-top: 60px; padding-bottom: 100px; }

.h4p-intro__claim {
	margin: 0 0 1.6rem 60px;
	max-width: 580px;
	font-family: var(--h4p-font-display);
	font-size: 3rem;
	line-height: 1.167em;
	color: rgb(84, 88, 90);
	text-align: left;
}

@media only screen and (max-width: 768px) {
	.h4p-intro__text { padding-right: 10px; }
	.h4p-intro__claim {
		font-size: 2em;
		line-height: 2.1em;
		margin-left: 54px;
	}
}

/* Formularios (Forms de Hemma) */
input[type="search"] { box-sizing: border-box; }

input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
textarea,
select {
	border: 1px solid var(--h4p-border);
	border-radius: 0;
	width: 100%;
	padding: 0.5rem 1rem;
	background-color: var(--h4p-white);
}

input:not([type="submit"]):focus,
textarea:focus,
select:focus {
	border: 1px solid var(--h4p-border-hover);
	outline: 0;
}

input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
select {
	height: 43px;
	-webkit-appearance: none;
	appearance: none;
}

textarea { overflow: hidden; }

label {
	display: block;
	margin-bottom: 0.5rem;
}

/* El CSS personalizado de producción oculta el distintivo de reCAPTCHA */
.grecaptcha-badge { visibility: hidden; }

.h4p-fullbg__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	margin: 0;
}

.h4p-fullbg > .h4p-block__content { position: relative; z-index: 1; }

/* Google añade un control de cámara que el mapa de Hemma no tenía y Bricks no permite desactivar */
:is(.h4p-split__map, .h4p-map) button[aria-label="Controles de visualización del mapa"],
:is(.h4p-split__map, .h4p-map) button[aria-label="Map camera controls"] { display: none !important; }

/* ==========================================================================
   Contenido convertido desde WPBakery (filas/columnas/texto/separador de vc_*)
   ========================================================================== */
.h4p-row { width: 100%; }
.h4p-row--fill > .h4p-col { padding-top: 35px; }
.h4p-text { margin-bottom: 35px; }
.h4p-text > :last-child { margin-bottom: 0; }

.h4p-cols {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -15px;
	max-width: none;
}

.h4p-cols > .h4p-col { width: 100%; padding: 0 15px; }

@media screen and (min-width: 768px) {
	.h4p-cols > .h4p-col--1-2 { width: 50%; }
	.h4p-cols > .h4p-col--1-3 { width: 33.3333%; }
	.h4p-cols > .h4p-col--2-3 { width: 66.6667%; }
	.h4p-cols > .h4p-col--1-4 { width: 25%; }
	.h4p-cols > .h4p-col--3-4 { width: 75%; }
}

.h4p-sep {
	border: 0;
	border-top: 1px solid var(--h4p-border);
	margin: 0 0 35px;
	clear: both;
}

/* Galerías (Galleries de Hemma). Prefijo .brxe-post-content y clase repetida para ganar a content-default.min.css
   de Bricks, que se carga después sin cascade layer y usa selectores de tres clases */
:is(.brxe-post-content, .brxe-text) .gallery.gallery {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 1.5rem;
}

:is(.brxe-post-content, .brxe-text) .gallery.gallery .gallery-item {
	flex: 1 1 50%;
	min-width: 50%;
	max-width: none;
	margin: 0;
	padding: 0;
}

:is(.brxe-post-content, .brxe-text) .gallery .gallery-item img {
	display: block;
	width: 100%;
	height: auto;
	padding: 1px;
	margin: 0;
}

:is(.brxe-post-content, .brxe-text) .gallery.gallery-columns-1 .gallery-item { flex-basis: 100%; min-width: 100%; }
:is(.brxe-post-content, .brxe-text) .gallery.gallery-columns-3 .gallery-item { flex-basis: 33.3333%; min-width: 33.3333%; }
:is(.brxe-post-content, .brxe-text) .gallery.gallery-columns-4 .gallery-item { flex-basis: 25%; min-width: 25%; }

/* En Hemma esta regla de móvil solo ganaba en las galerías de 2 columnas (las de 1, 3 y 4 tenían selectores más específicos) */
@media screen and (max-width: 768px) {
	:is(.brxe-post-content, .brxe-text) .gallery.gallery-columns-2 .gallery-item + .gallery-item { flex-basis: 100%; min-width: 100%; }
}

:is(.brxe-post-content, .brxe-text) .gallery a { border-bottom: 0; }

/* ==========================================================================
   Ficha de habitación / salón (plantilla "Ficha habitación / salón")
   ========================================================================== */
.h4p-single-cols {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: none;
}

.h4p-single-main,
.h4p-single-aside { width: 100%; padding: 20px 0; }

@media screen and (min-width: 769px) {
	.h4p-single-cols {
		flex-direction: row;
		width: calc(100% + 20px);
		margin: 0 -10px;
	}
	.h4p-single-main { width: 66.6667%; padding: 10px; }
	.h4p-single-aside { width: 33.3333%; padding: 10px; }
}

@media screen and (min-width: 1020px) {
	.h4p-single-cols { width: calc(100% + 40px); margin: 0 -20px; }
	.h4p-single-main,
	.h4p-single-aside { padding: 20px; }
}

.h4p-single-main .h4p-content-inner,
.h4p-widget-area { padding: 40px 0; }

.h4p-widget-area { font-size: 87.5%; }

.h4p-grey-box {
	padding: 40px 20px;
	background-color: #fafafa;
	margin-bottom: 2rem;
	text-align: center;
}

.h4p-grey-box > :last-child { margin-bottom: 0; }

.h4p-grey-box__title {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--h4p-dark);
	margin-bottom: 1.6rem;
}

.h4p-grey-box__price {
	font-size: 1.82925rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--h4p-dark);
	margin-bottom: 1.6rem;
}

@media screen and (min-width: 1240px) {
	.h4p-grey-box__price { font-size: 2.25rem; }
}

.h4p-grey-box .h4p-button { margin-bottom: 1rem; }

/* Las notas de Hemma salían dentro de un <p> anidado: deja un hueco de un párrafo vacío encima */
.h4p-grey-box__notes { padding-top: 1.6rem; }
.h4p-grey-box__notes p { margin-bottom: 1.6rem; }

/* WPBakery: la fila que sigue a una fila con fondo también lleva 35px arriba */
.h4p-row--fill + .h4p-row > .h4p-col { padding-top: 35px; }

/* Visor de fotos (PhotoSwipe 5 de Bricks) con el aspecto claro del PhotoSwipe de Hemma.
   Con "body" delante porque el CSS del visor se carga después y usa el mismo selector */
body .pswp.brx {
	--pswp-bg: #f5f5f5;
	--pswp-icon-color: #333;
	--pswp-icon-color-secondary: #f5f5f5;
	--pswp-icon-stroke-color: #f5f5f5;
}

body .pswp.brx .pswp__counter { color: #333; text-shadow: none; }

body .pswp.brx .pswp__top-bar {
	background-color: rgba(255, 255, 255, 0.97);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
}
body .pswp.brx .pswp__top-bar .pswp__button--close { color: #333; }

/* ==========================================================================
   Listados de habitaciones y salones (template-room / template-salones de Hemma)
   ========================================================================== */

/* Intro bajo el hero: .column.is-6.is-offset-3 centrada */
.h4p-listing-intro {
	width: 100%;
	padding: 20px;
	text-align: center;
}

@media screen and (min-width: 769px) {
	.h4p-listing-intro {
		width: calc((100% - 40px) / 2);
		margin-left: calc((100% - 40px) / 4 + 20px);
		padding: 10px;
	}
}

@media screen and (min-width: 1020px) {
	.h4p-listing-intro { padding: 20px; }
}

.h4p-listing-intro > .brxe-shortcode { text-align: left; }

/* .titulo del CSS personalizado de producción. Es un <span> en línea: su transform: matrix(...) no tiene efecto, se mantiene igual */
.h4p-titulo {
	display: inline;
	font-size: 48px;
	font-family: var(--h4p-font-display);
	font-weight: 400;
	color: rgb(84, 88, 90);
	line-height: 1.167;
	text-align: center;
	transform: matrix(1.18792210178305, 0, 0, 1.18792210178305, 0, 0);
	word-wrap: break-word;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) {
	.h4p-titulo { font-size: 3em; }
}

.h4p-listing { width: 100%; }

/* En los listados los bloques van a todo el ancho (sin el margen lateral del marco) */
@media screen and (min-width: 769px) {
	.h4p-listing .h4p-split { margin: 20px 0; }
}

.h4p-split.h4p-is-halfheight,
.h4p-split.h4p-is-halfheight > .h4p-block__content { min-height: 50vh; }

@media screen and (min-width: 769px) {
	.h4p-split.h4p-is-halfheight,
	.h4p-split.h4p-is-halfheight > .h4p-block__content { min-height: calc(50vh - 30px); }
}

.h4p-split.h4p-is-contentheight,
.h4p-split.h4p-is-contentheight > .h4p-block__content { min-height: 0; }

/* .block-split:nth-of-type(odd): imagen a la izquierda en los impares */
@media screen and (min-width: 1020px) {
	.h4p-listing > .h4p-split:nth-of-type(odd) .h4p-split__figure { left: 0; right: 50%; }
	.h4p-listing > .h4p-split:nth-of-type(odd) .h4p-split__column { margin-left: 50%; }
	.h4p-listing > .h4p-split:nth-of-type(odd) .h4p-block-text { padding-left: 40px; padding-right: 20px; }
}

.h4p-block-title a { color: var(--h4p-dark); }
.h4p-block .h4p-extras-meta__block:not(:last-child) { border-right-color: var(--h4p-border); }

.h4p-intro-wrap { width: 100%; align-items: flex-start; }

/* Texto opcional del bloque con fondo (.column.is-6.is-offset-3 centrada en "Packs de alojamiento") */
.h4p-fullbg__text:empty { display: none; }
.h4p-fullbg__text { padding: 20px; margin: 0 auto; }

@media screen and (min-width: 769px) {
	.h4p-fullbg__text { width: 50%; padding: 10px; }
}

@media screen and (min-width: 1020px) {
	.h4p-fullbg__text { padding: 20px; }
}

/* template-salones: la intro va dentro de .container.is-fluid (en el marco de 20px) y los bloques mantienen el margen lateral */
.h4p-intro-wrap--container { padding: 0 20px; }

@media screen and (min-width: 769px) {
	.h4p-intro-wrap--container { margin: 0 20px; width: auto; }
	.h4p-intro-wrap--container .h4p-listing-intro { width: 50%; margin-left: 25%; }
	.h4p-listing--framed .h4p-split { margin: 20px; }
}

@media screen and (min-width: 1020px) {
	.h4p-intro-wrap--container { padding: 0 40px; }
}

/* En Hemma había un espacio en blanco entre los bloques de datos (inline-block): ~0.193em en Lato */
.h4p-extras-meta__block + .h4p-extras-meta__block { margin-left: 0.193em; }

/* Botones con color elegido en ACF (data-color = clase de color de Hemma) */
.h4p-button[data-color="is-orange"] { background: var(--h4p-orange); border-color: transparent; color: var(--h4p-white); }
.h4p-button[data-color="is-orange"]:hover,
.h4p-button[data-color="is-orange"]:focus { background: #000; border-color: transparent; color: var(--h4p-white); }
.h4p-button[data-color="is-green"] { background: #6bb470; border-color: transparent; color: var(--h4p-white); }
.h4p-button[data-color="is-green"]:hover,
.h4p-button[data-color="is-green"]:focus { background: #5aab60; border-color: transparent; color: var(--h4p-white); }

/* Pies de foto e imágenes con figure (Galleries de Hemma): el pie se superpone y aparece al pasar el ratón */
:is(.brxe-post-content, .brxe-text) .gallery-caption { display: block; }

:is(.brxe-post-content, .brxe-text) .gallery-item,
.brxe-post-content .wp-caption,
.brxe-post-content .wp-content-image {
	position: relative;
	max-width: 100%;
}

:is(.brxe-post-content, .brxe-text) .gallery-item img,
.brxe-post-content .wp-caption img,
.brxe-post-content .wp-content-image img { margin-bottom: 0; }

.brxe-post-content .wp-caption-text {
	position: absolute;
	bottom: 1px;
	left: 1px;
	right: 1px;
	margin: 0;
	font-size: 87.5%;
	color: var(--h4p-white);
	font-weight: 700;
	padding: 15px;
	opacity: 0;
	transition: all .35s ease;
	pointer-events: none;
}

:is(.brxe-post-content, .brxe-text) .gallery-item:hover .wp-caption-text,
.brxe-post-content .wp-caption:hover .wp-caption-text,
.brxe-post-content .wp-content-image:hover .wp-caption-text {
	opacity: 1;
	background: linear-gradient(transparent 0%, rgba(51, 51, 51, 0.4) 100%);
}

.brxe-post-content .video-wrapper { margin-bottom: 1.5rem; }

/* ==========================================================================
   Blog: índice (La revista), entradas, archivos y búsqueda (index/single/archive/search de Hemma)
   ========================================================================== */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

/* Columna is-8 + barra lateral is-4 */
.h4p-blog-cols {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: none;
}

.h4p-blog-main,
.h4p-blog-aside { width: 100%; padding: 20px 0; }

@media screen and (min-width: 769px) {
	.h4p-blog-cols { flex-direction: row; width: calc(100% + 20px); margin: 0 -10px; }
	.h4p-blog-main { width: 66.6667%; padding: 10px; }
	.h4p-blog-aside { width: 33.3333%; padding: 10px; }
}

@media screen and (min-width: 1020px) {
	.h4p-blog-cols { width: calc(100% + 40px); margin: 0 -20px; }
	.h4p-blog-main,
	.h4p-blog-aside { padding: 20px; }
}

.h4p-blog-main > .h4p-content-inner { padding: 40px 0; }

/* Entradas */
.h4p-entry-header {
	color: var(--h4p-muted);
	font-size: 87.5%;
	margin-bottom: 1.6rem;
}

.h4p-entry-header .h4p-entry-title { font-size: 2.74388rem; margin-bottom: 1.6rem; }
.h4p-entry-header h2.h4p-entry-title { font-size: 1.82925rem; }

@media screen and (min-width: 1240px) {
	.h4p-entry-header .h4p-entry-title { font-size: 3.375rem; }
	.h4p-entry-header h2.h4p-entry-title { font-size: 2.25rem; }
}

.h4p-entry-title a { color: var(--h4p-dark); border-bottom: none; }
.h4p-entry-title a:hover,
.h4p-entry-title a:focus { color: #0d0d0d; }

.entry-meta a,
.entry-footer a,
.comment-metadata a { color: var(--h4p-muted); }

.updated:not(.published) { display: none; }

.entry-footer {
	color: var(--h4p-muted);
	font-size: 87.5%;
	margin-bottom: 1.6rem;
}

.h4p-hentry { padding-bottom: 2rem; }
.h4p-hentry + .h4p-hentry,
.h4p-page-header + .h4p-hentry + .h4p-hentry { padding-top: 3rem; border-top: 1px solid var(--h4p-border); }

.h4p-page-header { padding-bottom: 2rem; }

.page-title {
	font-family: var(--h4p-font-body);
	font-size: 1rem;
	line-height: 1.6;
	margin-bottom: 1rem;
}

.more-link { font-weight: 700; }

/* Navegación entre páginas del blog (posts-navigation) */
.nav-links:before,
.nav-links:after { content: " "; display: table; }
.nav-links:after { clear: both; }
.nav-links .nav-previous { float: left; }
.nav-links .nav-next { float: right; }

/* Barra lateral (widgets) */
.h4p-widget-area .widget { margin-bottom: 2rem; }
.h4p-widget-area .widget-title {
	color: var(--h4p-dark);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.6;
	margin-bottom: 1rem;
}
.h4p-widget-area .widget ul { padding-left: 0; margin: 0 0 1.5rem; list-style: none; }
.h4p-widget-area .widget ul li { margin-bottom: 0.25rem; }
.h4p-widget-area .widget .search-submit {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}
.h4p-widget-area .widget img,
.h4p-widget-area .widget select { max-width: 100%; }

/* Comentarios */
.comments-area {
	border-top: 1px solid var(--h4p-border);
	padding-top: 2rem;
	margin-top: 2rem;
}
.comments-title { font-size: 1rem; line-height: 1.6; margin-bottom: 2rem; }
.comment-reply-title { font-size: 1rem; line-height: 1.6; margin-bottom: 1rem; }
.comments-area .comment-list,
.comments-area .comment-list .children { list-style: none; margin: 0; padding: 0; }
.comments-area .comment-list > .comment { clear: both; }
.comments-area .comment-list > .comment > .children > .comment,
.comments-area .comment-list > .comment > .children > .comment > .children > .comment { padding-left: 40px; }
.comments-area .comment-body { margin-bottom: 1.5rem; border-bottom: 1px solid var(--h4p-border); }
.comments-area .comment-content,
.comments-area .reply { padding-left: calc(50px + 1rem); }
.comments-area .comment-metadata,
.comments-area .reply { margin-bottom: 1.5rem; font-size: 87.5%; }
.comments-area .reply { display: inline-block; }
.comments-area .reply a { padding: 2px 4px; color: #69707a; background-color: var(--h4p-bg); }
.comments-area .avatar {
	float: left;
	height: 50px;
	width: 50px;
	margin: 0 1rem 0 0;
	border-radius: 50%;
}
.comments-area .comment-form p:not(.comment-notes) { margin-bottom: 0.5rem; }
.comments-area .comment-form .submit { margin-top: 1.5rem; }
.comment-notes,
.comments-area label { font-size: 87.5%; color: var(--h4p-muted); }

/* Imagen destacada: en Hemma la imagen llevaba img { margin-bottom: 1.5rem } */
.h4p-single-thumbnail { margin-bottom: 1.5rem; }

/* .button de Hemma (paginación del blog y botones dentro de contenidos): mismo estilo que .h4p-button */
.button {
	-webkit-appearance: none;
	appearance: none;
	background-color: transparent;
	border: 1px solid var(--h4p-border);
	border-radius: 0;
	color: var(--h4p-text);
	cursor: pointer;
	display: inline-block;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 1.6;
	text-transform: uppercase;
	padding: 0.875rem 1rem;
	margin-bottom: 1rem;
	position: relative;
	vertical-align: middle;
	text-align: center;
	user-select: none;
}

.button:hover { border-color: var(--h4p-border-hover); color: var(--h4p-dark); }
.button.is-orange { background: var(--h4p-orange); border-color: transparent; color: var(--h4p-white); }
.button.is-orange:hover,
.button.is-orange:focus { background: #000; border-color: transparent; color: var(--h4p-white); }
.brxe-post-content a.button { border-bottom: 1px solid var(--h4p-border); }
.brxe-post-content a.button.is-orange { border-color: transparent; color: var(--h4p-white); }

/* ==========================================================================
   Página 404 (plantilla Bricks "Página 404"): la página se ha quedado extramuros
   ========================================================================== */
.h4p-404__inner {
	width: 100%;
	max-width: 760px;
	margin: 0 auto;
	padding: 60px 0;
	text-align: center;
}

.h4p-404__art {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto 1.5rem;
	overflow: visible;
}

.h4p-404__digits {
	font-family: var(--h4p-font-display);
	font-size: 150px;
	font-weight: 700;
	fill: var(--h4p-orange);
	animation: h4p-404-peek 5s ease-in-out infinite;
}

.h4p-404__stone { fill: #c9b48d; }
.h4p-404__tower { fill: #bea67c; }
.h4p-404__gate { fill: #4a3f33; }
.h4p-404__flag { fill: var(--h4p-orange); transform-box: fill-box; transform-origin: left center; animation: h4p-404-flag 1.4s ease-in-out infinite alternate; }
.h4p-404__ground { fill: #d9d2c3; }
.h4p-404__logo { display: inline-block; width: 110px; margin: 0 auto 0.5rem; }
.h4p-404__caption { margin-bottom: 2rem; font-family: var(--h4p-font-display); font-style: italic; color: var(--h4p-muted); }

/* El 404 se asoma por las almenas y vuelve a esconderse */
@keyframes h4p-404-peek {
	0%, 100% { transform: translateY(45px); }
	30%, 70% { transform: translateY(0); }
}

@keyframes h4p-404-flag {
	from { transform: skewY(-8deg) scaleX(0.9); }
	to { transform: skewY(6deg) scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
	.h4p-404__digits,
	.h4p-404__flag { animation: none; }
}

.h4p-404__eyebrow {
	margin-bottom: 0.5rem;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--h4p-orange);
}

.h4p-404__title {
	font-family: var(--h4p-font-display);
	font-size: 2.74388rem;
	font-weight: 700;
	line-height: 1.1;
	margin-bottom: 1.6rem;
}

@media screen and (min-width: 1240px) {
	.h4p-404__title { font-size: 3.375rem; }
}

.h4p-404__text { max-width: 620px; margin: 0 auto 2rem; }

.h4p-404__buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin-bottom: 2.5rem;
}

.h4p-404__buttons .h4p-button { margin-bottom: 0; }

.h4p-404__search-label { margin-bottom: 0.75rem; font-style: italic; color: var(--h4p-muted); }
.h4p-404 .search-form { justify-content: center; }

/* ==========================================================================
   Formulario de contacto (Bricks, antes Contact Form 7): mismo aspecto que el CF7 de producción
   ========================================================================== */
.h4p-contact-form { display: block; width: 100%; }

/* Cada campo iba en un <p> (margen inferior 1.6rem) con el control inline-block */
.h4p-contact-form .form-group { width: 100%; padding: 0; margin-bottom: 1.6rem; }
.h4p-contact-form .form-group:not(.captcha, .recaptcha-error) { display: block; }
.h4p-contact-form .form-group > :is(input, textarea) { display: inline-block; }
.h4p-contact-form textarea { height: 274px; resize: vertical; }

/* Honeypot y reCAPTCHA invisibles: sin margen */
.h4p-contact-form .form-group:has(> input[tabindex="-1"]),
.h4p-contact-form .form-group.captcha { margin-bottom: 0; }
.h4p-contact-form .form-group:has(> input[tabindex="-1"]) { height: 0; overflow: hidden; }

.h4p-contact-form .submit-button-wrapper { width: auto; margin-bottom: 1.6rem; }

/* Botón .button.is-orange */
.h4p-contact-form .bricks-button {
	width: auto;
	min-height: 0;
	padding: 0.875rem 1rem;
	margin-bottom: 1rem;
	border: 1px solid transparent;
	border-radius: 0;
	background: var(--h4p-orange);
	color: var(--h4p-white);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 1.6;
	text-transform: uppercase;
}

.h4p-contact-form .bricks-button:hover,
.h4p-contact-form .bricks-button:focus { background: #000; color: var(--h4p-white); }

/* Avisos de envío (éxito/error) con el tono de la web */
.h4p-contact-form .message { width: 100%; margin-bottom: 1.6rem; }

/* ==========================================================================
   Botón flotante de WhatsApp (plantilla "Pie" + js/whatsapp.js), mismo aspecto y tiempos que Joinchat
   ========================================================================== */
.h4p-whatsapp {
	position: fixed;
	z-index: 9000;
	right: 28px;
	bottom: 28px;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background-color: #25d366;
	color: var(--h4p-white);
	box-shadow: 1px 6px 24px 0 rgba(7, 94, 84, 0.24);
	transition: background-color .2s linear;
	/* Aparece a los 3 s con un pequeño rebote */
	transform: scale(0);
	animation: h4p-whatsapp-show .5s cubic-bezier(.18, .89, .32, 1.28) 3s both;
}

.h4p-whatsapp:hover,
.h4p-whatsapp:focus-visible { background-color: #128c7e; color: var(--h4p-white); }

.h4p-whatsapp__icon { display: block; width: 60%; margin: 20%; }
.h4p-whatsapp__icon svg { display: block; width: 100%; height: auto; }

/* Globo "¿Necesitas ayuda?": se ve unos segundos al aparecer y al pasar el ratón */
.h4p-whatsapp__tooltip {
	position: absolute;
	top: 14px;
	right: 76px;
	width: max-content;
	height: 32px;
	padding: 0 14px;
	border-radius: 16px;
	background: var(--h4p-white);
	color: rgba(0, 0, 0, 0.8);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 16px;
	line-height: 31px;
	white-space: nowrap;
	filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.4));
	pointer-events: none;
	opacity: 0;
	animation: h4p-whatsapp-tooltip 20s linear 5s both;
}

.h4p-whatsapp__tooltip:after {
	content: "";
	position: absolute;
	top: 10px;
	right: -6px;
	border-style: solid;
	border-width: 6px 0 6px 8px;
	border-color: transparent transparent transparent var(--h4p-white);
}

.h4p-whatsapp:hover .h4p-whatsapp__tooltip,
.h4p-whatsapp:focus-visible .h4p-whatsapp__tooltip { opacity: 1; animation: none; transition: opacity .2s; }

@media screen and (max-width: 768px) {
	.h4p-whatsapp { right: 14px; bottom: 14px; }
}

@keyframes h4p-whatsapp-show {
	from { transform: scale(0); }
	to { transform: scale(1); }
}

@keyframes h4p-whatsapp-tooltip {
	0% { opacity: 0; }
	1%, 20% { opacity: 1; }
	25%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.h4p-whatsapp { animation: none; transform: none; }
}

/* Botón con aspecto de enlace ("Gestionar cookies" del pie, reabre el banner de Complianz) */
.h4p-link-button {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	cursor: pointer;
}

.h4p-link-button:hover { color: var(--h4p-orange); }

/* Banner de cookies (Complianz): botones como .button.is-orange y .h4p-button de la web.
   Con body delante: el CSS del banner se carga después con la misma especificidad */
body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
	height: auto;
	min-height: 45px;
	padding: 0.75rem 1rem;
	border-radius: 0;
	font-family: var(--h4p-font-body);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 1px;
	line-height: 1.6;
	text-transform: uppercase;
	transition: background-color .2s, border-color .2s, color .2s;
}

body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn:is(.cmplz-accept, .cmplz-deny) {
	background-color: var(--h4p-orange);
	border: 1px solid transparent;
	color: var(--h4p-white);
}

body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn:is(.cmplz-accept, .cmplz-deny):is(:hover, :focus-visible) {
	background-color: #000;
	color: var(--h4p-white);
}

body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn:is(.cmplz-view-preferences, .cmplz-save-preferences) {
	background-color: transparent;
	border: 1px solid var(--h4p-border);
	color: var(--h4p-text);
}

body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn:is(.cmplz-view-preferences, .cmplz-save-preferences):is(:hover, :focus-visible) {
	border-color: var(--h4p-border-hover);
	color: var(--h4p-dark);
}

.cmplz-cookiebanner,
.cmplz-cookiebanner .cmplz-title { font-family: var(--h4p-font-body); }
.cmplz-cookiebanner .cmplz-title { font-weight: 700; }