/*
Theme Name: Webner Studio - Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
Description: Website create by Webner Studio
Author: Webner Studio
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* ==========================================================================
   Sistema de diseño — Mar del Busto
   Los mismos tokens existen como Globales de Elementor (mdb_*), para que lo
   que se maqueta en el editor use la misma paleta que la cabecera y el pie.
   Si cambias un valor aquí, cámbialo también en Ajustes globales de Elementor.
   ========================================================================== */

:root {
	--mdb-sage: #7d8f72;
	--mdb-dark: #243026;
	--mdb-sand: #f6f2eb;
	--mdb-muted: #657064;
	--mdb-line: #d8dfd5;
	--mdb-light: #f8f5ed;
	--mdb-serif: "Cormorant Garamond", Georgia, serif;
	--mdb-sans: Manrope, Arial, sans-serif;

	/* Margen lateral común a cabecera y pie. */
	--mdb-gutter: 6vw;

	/* ---- Caja de reserva de Lodgify -------------------------------------
	   Las tres cajas traían el mismo bloque <style> repetido, y sus variables
	   son globales (`:root`), así que viven aquí una sola vez.

	   Los valores están adaptados al sitio. Los originales que venían de
	   Lodgify, por si hay que volver a ellos:
	     radios 0.42em · sombra 0 24px 54px rgba(0,0,0,.1)
	     primary #024302 · lighter #81a181 · darker #012201 · contrast #f0f0f0
	   Se han cambiado dos cosas: los radios y la sombra, porque el resto del
	   sitio no tiene ni esquinas redondeadas ni sombras y la caja va dentro
	   de una ficha; y los verdes, que eran de otra gama y dejaban el botón
	   «Reservar ahora» de un verde distinto al de todos los demás botones. */
	--ldg-bnb-background: #ffffff;
	--ldg-bnb-border-radius: 0;
	--ldg-bnb-box-shadow: none;
	--ldg-bnb-padding: 16px;
	--ldg-bnb-input-background: #ffffff;
	--ldg-bnb-button-border-radius: 0;
	--ldg-bnb-color-primary: #243026;
	--ldg-bnb-color-primary-lighter: #7d8f72;
	--ldg-bnb-color-primary-darker: #1a241c;
	--ldg-bnb-color-primary-contrast: #f8f5ed;
	--ldg-component-calendar-cell-selection-bg-color: #243026;
	--ldg-component-calendar-cell-selection-color: #f8f5ed;
	--ldg-component-calendar-cell-selected-bg-color: #7d8f72;
	--ldg-component-calendar-cell-selected-color: #f8f5ed;
	--ldg-bnb-font-family: inherit;
}

/* El id se repite en las tres cajas a propósito: es lo que espera el script
   de Lodgify, que hace querySelectorAll('#lodgify-book-now-box'). Por eso el
   selector se escribe como atributo, que sí casa con todas. */
[id="lodgify-book-now-box"] {
	width: 100%;
}

/* ==========================================================================
   Lodgify: aislarlo del estilo de botón del sitio

   El kit de Elementor pinta TODOS los <button> de la página:
   `.elementor-kit-11 button{background:#1F5B58;color:#fff;font:Inter…}`, y esa
   regla gana por especificidad a las de Lodgify. Consecuencias que se veían:
   los campos de fechas y huéspedes salían en el turquesa del kit en vez del
   verde de la casa; la etiqueta «Huéspedes», que Lodgify pone en gris #666
   pensando en un fondo blanco, quedaba encima de ese turquesa y no se leía; y
   los botones + y − se teñían de verde al pasar el ratón, porque
   `.elementor-kit-11 button:hover` gana también a la regla de Lodgify.

   Aquí el widget recibe un aspecto propio y deliberado en vez de heredar el
   que le caiga. Los ganchos son estables —el id del contenedor, el id del
   calendario y los data-testid de Lodgify—, nunca sus clases de emotion
   (`css-1bgqbnd`…), que cambian de una versión a otra.

   Los desplegables de fechas y huéspedes se montan al final del <body>, fuera
   del contenedor, así que hay que nombrarlos aparte. Y varios selectores
   empiezan por `html`: las hojas de Lodgify se inyectan en tiempo de
   ejecución, o sea después de ésta, así que a igualdad de especificidad
   ganarían ellas; ese `html` de más rompe el empate sin recurrir a
   !important.
   ========================================================================== */

[id="lodgify-book-now-box"] button,
[id="ldg-book-now-box-date-picker"] button,
[data-testid^="book-now-box."] button {
	font-family: var(--mdb-sans);
	border-radius: 0;
}

/* Los dos campos: fondo verde de la casa, no el turquesa del kit. */
[id="lodgify-book-now-box"] [data-testid="book-now-box.date-picker.trigger"],
[id="lodgify-book-now-box"] [data-testid="guests-breakdown-trigger"] {
	background-color: var(--mdb-dark);
	color: var(--mdb-light);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* La etiqueta flotante «Huéspedes» va sobre ese verde: tono claro, y sin la
   versalita del campo para que se distinga del valor. */
[id="lodgify-book-now-box"] [data-testid="guests-breakdown-trigger"] label {
	color: #c7d0c4;
	letter-spacing: 0;
	text-transform: none;
}

/* Los pasos + y − del desglose de huéspedes: cuadrados, filete fino y signo
   en verde oscuro. El hover se aclara en vez de teñirse de verde. */
html [data-testid^="book-now-box."] [data-testid$="-add-button"],
html [data-testid^="book-now-box."] [data-testid$="-remove-button"] {
	width: 32px;
	height: 32px;
	border: 1px solid var(--mdb-line);
	background-color: transparent;
	color: var(--mdb-dark);
}

html [data-testid^="book-now-box."] [data-testid$="-add-button"]:hover,
html [data-testid^="book-now-box."] [data-testid$="-remove-button"]:hover,
html [data-testid^="book-now-box."] [data-testid$="-add-button"]:focus,
html [data-testid^="book-now-box."] [data-testid$="-remove-button"]:focus {
	background-color: #e9eee5;
	color: var(--mdb-dark);
}

html [data-testid^="book-now-box."] [data-testid$="-add-button"]:disabled,
html [data-testid^="book-now-box."] [data-testid$="-remove-button"]:disabled {
	background-color: transparent;
	border-color: #e7ebe4;
	color: #b9c2b6;
}

/* «Hecho» cierra el desglose: es la acción principal del desplegable y se
   veía como un botón fantasma. */
html [data-testid^="book-now-box."] [data-testid$="guests-breakdown-done-cta"] {
	background-color: var(--mdb-dark);
	border: 1px solid var(--mdb-dark);
	color: var(--mdb-light);
}

html [data-testid^="book-now-box."] [data-testid$="guests-breakdown-done-cta"]:hover,
html [data-testid^="book-now-box."] [data-testid$="guests-breakdown-done-cta"]:focus {
	background-color: var(--mdb-sage);
	border-color: var(--mdb-sage);
	color: var(--mdb-light);
}

body {
	background: var(--mdb-sand);
	color: var(--mdb-dark);
	font: 15px/1.7 var(--mdb-sans);
}

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

.mdb-header {
	position: relative;
	z-index: 20;
}

/* En la portada la cabecera flota sobre el hero. */
.mdb-header-overlay .mdb-header {
	position: absolute;
	inset: 0 0 auto;
}

.mdb-topbar {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 8px var(--mdb-gutter);
	background: var(--mdb-dark);
	color: var(--mdb-light);
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* Los enlaces de cabecera y pie llevan dos clases a propósito: el kit de
   Elementor define `.elementor-kit-11 a{color:…}` y con una sola clase el
   color de marca del kit ganaría por especificidad. */
.mdb-header .mdb-topbar a {
	color: inherit;
	text-decoration: none;
}

.mdb-header .mdb-topbar a:hover {
	color: #d7e3d0;
}

.mdb-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 24px var(--mdb-gutter);
	background: var(--mdb-sand);
	color: var(--mdb-dark);
}

.mdb-header-overlay .mdb-nav {
	background: transparent;
	color: #fff;
}

.mdb-header .mdb-brand {
	font: 600 34px/1 var(--mdb-serif);
	letter-spacing: 0.05em;
	color: inherit;
	text-decoration: none;
}

.mdb-brand small {
	display: block;
	margin-top: 5px;
	font: 10px var(--mdb-sans);
	letter-spacing: 0.22em;
	text-align: center;
	text-transform: uppercase;
}

.mdb-brand--logo img {
	display: block;
	max-height: 62px;
	width: auto;
}

.mdb-menu {
	display: flex;
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.mdb-menu li {
	position: relative;
}

.mdb-header .mdb-menu a {
	color: inherit;
	text-decoration: none;
}

.mdb-header .mdb-menu a:hover,
.mdb-header .mdb-menu .current-menu-item > a {
	color: var(--mdb-sage);
}

.mdb-header-overlay .mdb-header .mdb-menu a:hover,
.mdb-header-overlay .mdb-header .mdb-menu .current-menu-item > a {
	color: #d7e3d0;
}

/* Submenús: sencillos, al vuelo. */
.mdb-menu .sub-menu {
	position: absolute;
	z-index: 1;
	display: none;
	min-width: 200px;
	margin: 12px 0 0;
	padding: 14px 18px;
	list-style: none;
	background: var(--mdb-dark);
	color: var(--mdb-light);
}

.mdb-menu li:hover > .sub-menu,
.mdb-menu li:focus-within > .sub-menu {
	display: block;
}

.mdb-menu .sub-menu li + li {
	margin-top: 10px;
}

/* Botón de menú: sólo en móvil. Dos clases, otra vez, para ganar al
   `button{}` del kit de Elementor, que si no le pinta un fondo. */
.mdb-header .mdb-nav__toggle {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.mdb-nav__bars {
	position: relative;
	margin: 0 auto;
}

.mdb-nav__bars,
.mdb-nav__bars::before,
.mdb-nav__bars::after {
	display: block;
	width: 24px;
	height: 1.5px;
	background: currentColor;
	transition: transform 0.2s ease, background 0.2s ease;
}

.mdb-nav__bars::before,
.mdb-nav__bars::after {
	position: absolute;
	content: "";
}

.mdb-nav__bars::before {
	top: -7px;
}

.mdb-nav__bars::after {
	top: 7px;
}

.mdb-menu-open .mdb-nav__bars {
	background: transparent;
}

.mdb-menu-open .mdb-nav__bars::before {
	transform: translateY(7px) rotate(45deg);
}

.mdb-menu-open .mdb-nav__bars::after {
	transform: translateY(-7px) rotate(-45deg);
}

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

.mdb-footer {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	padding: 50px var(--mdb-gutter);
	background: var(--mdb-dark);
	color: #dbe5d7;
	font-size: 13px;
}

.mdb-footer .mdb-footer__col a {
	display: block;
	margin: 5px 0;
	color: inherit;
	text-decoration: none;
}

.mdb-footer .mdb-footer__col a:hover {
	color: #fff;
}

.mdb-footer__brand {
	font: 32px var(--mdb-serif);
	color: #fff;
}

.mdb-footer__title {
	display: block;
	margin-bottom: 6px;
}

.mdb-footer__menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mdb-footer__tiny {
	margin: 10px 0 0;
	font-size: 11px;
	color: #aeb9ad;
}

/* Los tres bloques de abajo cruzan las tres columnas de la rejilla del pie. */
.mdb-footer__legal,
.mdb-footer__grant {
	grid-column: 1 / -1;
}

.mdb-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: 11px;
}

.mdb-footer__legal a {
	color: #aeb9ad;
	text-decoration: none;
}

.mdb-footer__legal a:hover {
	color: #fff;
	text-decoration: underline;
}

.mdb-footer__grant-logos {
	display: block;
	width: 100%;
	max-width: 520px;
	height: auto;
	padding: 12px 16px;
	border-radius: 4px;
	background: #fff;
}

.mdb-footer__grant-text {
	margin: 14px 0 0;
	font-size: 10px;
	line-height: 1.5;
	color: #aeb9ad;
	text-align: justify;
}

/* ==========================================================================
   Utilidades para el contenido de Elementor
   Sólo lo que el editor no resuelve bien por sí solo.
   ========================================================================== */

/* Separadores verticales de la rejilla de características. */
.mdb-feature-grid > .e-con {
	border-right: 1px solid var(--mdb-line);
}

.mdb-feature-grid > .e-con:last-child {
	border-right: 0;
}

/* Banda de compromisos bajo el hero. Va en oscuro para cerrar la foto y
   separarla de la sección en arena, con el mismo registro tipográfico que la
   rejilla de características: serif para el compromiso, filete de 1px entre
   columnas y nada de iconos. */
.mdb-claims {
	padding: 46px var(--mdb-gutter);
	color: var(--mdb-light);
}

.mdb-claims > .e-con {
	padding-right: 4vw;
	border-right: 1px solid rgba(248, 245, 237, 0.16);
}

.mdb-claims > .e-con:last-child {
	padding-right: 0;
	border-right: 0;
}

/* El color y la tipografía salen de los globales del kit; aquí sólo la medida
   de línea, que el editor no controla. */
.mdb-claims p {
	max-width: 32ch;
}

@media (max-width: 800px) {
	.mdb-claims {
		padding: 32px var(--mdb-gutter);
	}

	.mdb-claims > .e-con {
		padding: 0 0 20px;
		border-right: 0;
		border-bottom: 1px solid rgba(248, 245, 237, 0.16);
	}

	/* Apilados, el filete separa dos bloques: hace falta aire a los dos lados. */
	.mdb-claims > .e-con + .e-con {
		padding-top: 20px;
	}

	.mdb-claims > .e-con:last-child {
		padding-bottom: 0;
		border-bottom: 0;
	}
}

/* Degradado inferior de los hero. Elementor sólo permite una capa de
   superposición y ésa ya la usa el degradado lateral. */
.mdb-hero::after {
	position: absolute;
	inset: auto 0 0;
	height: 35%;
	background: linear-gradient(transparent, rgba(21, 30, 22, 0.55));
	content: "";
	pointer-events: none;
}

.mdb-hero > * {
	position: relative;
	z-index: 1;
}

/* Fichas de destino de «Qué visitar». El widget de imagen con texto no trae
   control de ancho para la foto —la deja a su tamaño natural, en una columna
   estrecha—, así que se estira desde aquí. El relleno lateral va en el texto
   y no en la ficha, para que la foto sí llegue a los bordes. */
.mdb-destino .elementor-image-box-img img {
	width: 100%;
	display: block;
}

.mdb-destino .elementor-image-box-content {
	padding: 0 26px;
}

/* De Oviedo no hay foto: sin esto el widget pinta su imagen de relleno. El
   `html` de delante es para ganar a la hoja del widget, que se encola
   después de ésta. */
html .mdb-destino--sinfoto .elementor-image-box-img {
	display: none;
}

/* Lista de playas: el nombre en serif y la distancia al lado, en versalita,
   para que las cifras no compitan con los topónimos. */
.mdb-beach-list .elementor-icon-list-text span {
	margin-left: 8px;
	font: 500 11px/1 var(--mdb-sans);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mdb-sage);
}

/* Pautas de visita responsable: lista reglada, sin viñetas. */
.mdb-tips ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mdb-tips li {
	padding: 14px 0;
	border-top: 1px solid var(--mdb-line);
}

.mdb-tips li:first-child {
	padding-top: 0;
	border-top: 0;
}

.mdb-tips strong {
	color: var(--mdb-dark);
	font-weight: 600;
}

/* Imágenes que deben llenar su caja sin deformarse (galerías, tarjetas).
   Van en posición absoluta a propósito: la altura de estos contenedores la
   fija un `min-height` de Elementor, y un `min-height` no basta para que un
   `height:100%` de dentro resuelva — la foto se quedaría en su tamaño
   natural. Con inset:0 la caja sí es definida y la cadena de envoltorios que
   mete Elementor puede heredar la altura. */
.mdb-cover {
	position: absolute;
	inset: 0;
}

.mdb-cover .elementor-widget-container,
.mdb-cover figure,
.mdb-cover img {
	height: 100%;
}

.mdb-cover img {
	width: 100%;
	object-fit: cover;
	display: block;
}

/* Las tarjetas de una fila se estiran a la altura de la más alta, pero ese
   sobrante hay que repartirlo o se queda al final en forma de hueco. El
   cuerpo crece dentro de la tarjeta y la descripción crece dentro del cuerpo,
   así lo que va debajo —el enlace, la ficha de datos, la caja de reserva—
   queda a la misma altura en las tres aunque los textos midan distinto. Es
   más robusto que fijar alturas mínimas: aguanta cualquier ancho de columna.

   Los selectores llevan dos partes porque Elementor fija el crecimiento con
   `.e-con.e-flex{flex:var(--flex-grow)…}` y con variables en el contenedor
   padre: con una sola clase ganaría él. */
.e-con.mdb-card-body,
/* Respaldo por si el contenedor no lleva la clase: basta con que contenga la
   descripción de una tarjeta. Así la alineación aguanta aunque se rehaga la
   tarjeta en el editor o se restaure una revisión anterior. */
.e-con:has(> .mdb-card-text) {
	--flex-grow: 1;
}

.e-con > .mdb-card-text {
	--container-widget-flex-grow: 1;
	flex-grow: 1;
}

/* Distintivo sobre la foto de una ficha (la casa que admite mascotas). */
.mdb-card-flag {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
}

/* Tabla de características: se sale hacia los lados exactamente lo que las
   celdas tienen de relleno, para que la primera columna caiga a plomo con el
   titular. Va aquí y no en Elementor porque hace falta ensanchar además de
   desplazar, y un margen negativo por sí solo no ensancha una caja al 100%.
   Los 28px son el relleno lateral de las celdas: si lo cambias en el editor,
   cámbialo también aquí. */
.mdb-amenity-grid {
	width: calc(100% + 56px);
	margin-inline: -28px;
}

/* 767px, no los 900 del resto del theme: este corte tiene que coincidir con
   el breakpoint «móvil» de Elementor, que es donde cambia el relleno de las
   celdas. */
@media (max-width: 767px) {
	.mdb-amenity-grid {
		width: calc(100% + 40px);
		margin-inline: -20px;
	}
}

/* ==========================================================================
   Móvil
   ========================================================================== */

@media (max-width: 900px) {
	:root {
		--mdb-gutter: 7vw;
	}

	.mdb-topbar {
		display: none;
	}

	.mdb-nav {
		flex-wrap: wrap;
		padding: 20px var(--mdb-gutter);
	}

	.mdb-header .mdb-nav__toggle {
		display: block;
	}

	.mdb-nav__panel {
		display: none;
		flex-basis: 100%;
	}

	.mdb-menu-open .mdb-nav__panel {
		display: block;
	}

	.mdb-menu {
		flex-direction: column;
		gap: 0;
		padding-top: 18px;
		font-size: 12px;
	}

	.mdb-menu > li + li {
		border-top: 1px solid rgba(125, 143, 114, 0.35);
	}

	.mdb-menu > li > a {
		display: block;
		padding: 14px 0;
	}

	/* Con el menú abierto la cabecera deja de flotar: si no, tapa el hero. */
	.mdb-menu-open.mdb-header-overlay .mdb-header,
	.mdb-menu-open.mdb-header-overlay .mdb-nav {
		position: relative;
		background: var(--mdb-dark);
		color: #fff;
	}

	.mdb-menu .sub-menu {
		position: static;
		display: block;
		min-width: 0;
		margin: 0 0 12px;
		padding: 0 0 0 16px;
		background: none;
		color: inherit;
	}

	.mdb-feature-grid > .e-con {
		border-right: 0;
		border-bottom: 1px solid var(--mdb-line);
	}

	.mdb-feature-grid > .e-con:last-child {
		border-bottom: 0;
	}

	.mdb-footer {
		grid-template-columns: 1fr;
	}
}
