/* ==========================================================================
   Cabecera, mega menú, pie de página y botón flotante.
   ========================================================================== */

.sr-only,
.sr-skip {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.sr-skip:focus {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 999;
	width: auto;
	height: auto;
	clip: auto;
	padding: 12px 18px;
	background: #fff;
	color: var(--tc-primary, #1F3F31);
	border-radius: 8px;
}

.ico {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
}

/* ====================== CABECERA ====================== */
/* La altura NO cambia con el scroll: cambiarla provocaba un bucle de
   recálculo que se veía como parpadeo. */
/* En escritorio solo queda fija la barra del menú: el bloque del logo y los
   datos de contacto se va con el scroll y deja de comer pantalla.
   En móvil se fija la cabecera completa, porque ahí es solo logo y botón, y
   el acceso al menú tiene que seguir a la vista. */
/* El bloque del logo y el contacto se va con el scroll. La barra del menú
   queda fija, y por eso vive fuera de este elemento: un sticky solo puede
   recorrer el alto de su contenedor padre. */
.sh {
	position: relative;
	background: #fff;
}

/* ---------- Bloque superior ---------- */
.sh__top {
	background: #fff;
	border-bottom: 1px solid var(--tc-line, #e2e8e6);
}

.sh__top-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-block: 12px;
}

/* ---------- Marca ---------- */
.sh__brand {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 0 0 auto;
}

.sh__brand .custom-logo-link { display: block; line-height: 0; }

.sh__brand .custom-logo {
	display: block;
	width: auto;
	height: 96px;
	max-width: 340px;
	object-fit: contain;
}

.sh__name {
	font-size: 1.6rem;
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -.02em;
	color: var(--tc-ink, #15211f);
	text-decoration: none;
}

.sh__tagline {
	font-size: .74rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--tc-muted, #5f6f6c);
}

/* ---------- Columna derecha, dos líneas ---------- */
.sh__right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	min-width: 0;
}

.sh__fila {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px 20px;
}

/* Línea 1 */
.sh__horario {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	font-size: .82rem;
	color: var(--tc-muted, #5f6f6c);
}

.sh__util-menu {
	display: flex;
	align-items: center;
	gap: 4px 18px;
	margin: 0;
	padding: 0;
	list-style: none;
	flex-wrap: wrap;
}

.sh__util-menu a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: .82rem;
	color: var(--tc-muted, #5f6f6c);
	text-decoration: none;
}

.sh__util-menu a:hover { color: var(--tc-primary, #1F3F31); }

/* Iconos opcionales por clase CSS del elemento de menú. */
:root {
	--ico-blog: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M8 8h8M8 12h8M8 16h5'/%3E%3C/svg%3E");
	--ico-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 7.5v.5'/%3E%3C/svg%3E");
	--ico-resena: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l2.6 5.3 5.9.9-4.2 4.1 1 5.8-5.3-2.8-5.3 2.8 1-5.8L3.5 9.7l5.9-.9z'/%3E%3C/svg%3E");
	--ico-ayuda: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9.5a2.5 2.5 0 1 1 3 2.4V14M12 17v.5'/%3E%3C/svg%3E");
	--ico-mapa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 21s7-5.7 7-11a7 7 0 1 0-14 0c0 5.3 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");
	--ico-ruta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 19l6-14 6 7 6-5'/%3E%3C/svg%3E");
}

.sh__util-menu a::before {
	content: "";
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
	display: none;
	background: currentColor;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.sh__util-menu .ico-blog a::before   { display: block; -webkit-mask-image: var(--ico-blog);   mask-image: var(--ico-blog); }
.sh__util-menu .ico-info a::before   { display: block; -webkit-mask-image: var(--ico-info);   mask-image: var(--ico-info); }
.sh__util-menu .ico-resena a::before { display: block; -webkit-mask-image: var(--ico-resena); mask-image: var(--ico-resena); }
.sh__util-menu .ico-ayuda a::before  { display: block; -webkit-mask-image: var(--ico-ayuda);  mask-image: var(--ico-ayuda); }
.sh__util-menu .ico-mapa a::before   { display: block; -webkit-mask-image: var(--ico-mapa);   mask-image: var(--ico-mapa); }
.sh__util-menu .ico-ruta a::before   { display: block; -webkit-mask-image: var(--ico-ruta);   mask-image: var(--ico-ruta); }

/* Redes sociales */
.sh__redes {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sh__redes a {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	font-size: .8rem;
	line-height: 1;
	color: var(--tc-muted, #5f6f6c);
	text-decoration: none;
	border: 1px solid var(--tc-line, #e2e8e6);
	border-radius: 50%;
	transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.sh__redes a:hover {
	background: var(--tc-primary, #1F3F31);
	border-color: var(--tc-primary, #1F3F31);
	color: #fff;
}

.sh__inicial { font-weight: 700; }

/* Línea 2: teléfono, correo e idioma */
.sh__dato {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: .88rem;
	color: var(--tc-muted, #5f6f6c);
	text-decoration: none;
}

.sh__dato:hover { color: var(--tc-primary, #1F3F31); }

.sh__dato--tel {
	font-size: 1.02rem;
	font-weight: 700;
	color: var(--tc-ink, #15211f);
}

.sh__idioma { display: flex; align-items: center; }
.sh__idioma select { max-width: 150px; }
.sh__idioma img { vertical-align: middle; }

/* ---------- Hamburguesa ---------- */
.sh__burger {
	display: none;
	padding: 10px;
	background: transparent;
	border: 1px solid var(--tc-line, #e2e8e6);
	border-radius: 10px;
	cursor: pointer;
}

.sh__burger-box { display: grid; gap: 4px; width: 22px; }

.sh__burger-box span {
	display: block;
	height: 2px;
	background: var(--tc-ink, #15211f);
	border-radius: 2px;
	transition: transform .2s ease, opacity .2s ease;
}

.sh__barra.is-open .sh__burger-box span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.sh__barra.is-open .sh__burger-box span:nth-child(2) { opacity: 0; }
.sh__barra.is-open .sh__burger-box span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Adaptación a pantallas menores ---------- */
@media (max-width: 1180px) {
	.sh__brand .custom-logo { height: 74px; }
	.sh__fila { gap: 8px 14px; }
}

@media (max-width: 1024px) {
	.sh__burger { display: block; }
	.sh__brand .custom-logo { height: 62px; }
	.sh__name { font-size: 1.2rem; }

	/* En celular el bloque blanco se apila y todo queda centrado:
	   el logo arriba y debajo el teléfono y el selector de idioma. */
	.sh__top-row {
		flex-direction: column;
		align-items: center;
		gap: 10px;
		text-align: center;
	}

	/* align-items y no justify-content: este bloque es una columna, así que
	   el eje principal es el vertical y justify-content lo movería hacia
	   arriba o hacia abajo. Lo que centra en horizontal es align-items. */
	.sh__brand {
		align-items: center;
		width: 100%;
	}

	.sh__brand .custom-logo-link { display: inline-block; }

	.sh__right {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
	}

	/* Horario, menú de utilidades, redes y el botón Reservar se quedan para
	   el escritorio: en celular ya están en el menú, en el pie de página y
	   en el botón flotante de WhatsApp. */
	.sh__fila--a { display: none; }

	.sh__fila--b {
		justify-content: center;
		align-items: center;
		gap: 6px 16px;
		margin: 0;
	}

	/* El correo es demasiado largo para una pantalla angosta; el teléfono
	   se queda porque se marca con un toque. */
	.sh__fila--b .sh__dato { display: none; }
	.sh__fila--b .sh__dato--tel { display: inline-flex; }

	.sh__idioma { display: block; }
}

@media (max-width: 600px) {
	.sh__brand .custom-logo { height: 54px; }
	.sh__name { font-size: 1.05rem; }
	.sh__fila--b { font-size: .86rem; }
}

/* ==========================================================================
   Cabecera oscura (Tours > Marca > Cabecera)
   --------------------------------------------------------------------------
   Hecha contra dos referencias de agencias reales: el bloque de contacto
   apilado a la derecha, las redes agrupadas dentro de un recuadro, dos
   botones, y el menú en una franja de otro tono alineado a la izquierda.

   El menú va a la IZQUIERDA y no centrado a propósito: centrado queda igual
   que el otro sitio hecho con este mismo paquete, y la idea era que no se
   parecieran.

   Es una variante del mismo armazón: no hay un segundo header.php. Una
   clase en el <body> alcanza al bloque del logo y a la barra del menú, que
   son hermanos y no comparten padre.
   ========================================================================== */

/* ---------- Tira superior ----------
   Una franja fina por encima de todo, para lo que es informacion de
   servicio y no una llamada a la accion: el horario, los enlaces de
   servicio y el idioma. Abajo se queda lo que se pulsa. */

.cabecera-oscura .sh__tira {
	background: rgba(0, 0, 0, .28);
	border-bottom: 1px solid rgba(255, 255, 255, .08);
	font-size: .8rem;
}

.cabecera-oscura .sh__tira-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-block: 7px;
	min-height: 34px;
}

.cabecera-oscura .sh__tira-der {
	display: flex;
	align-items: center;
	gap: 8px 20px;
	margin-left: auto;
	flex-wrap: wrap;
}

.cabecera-oscura .sh__tira .sh__horario {
	display: inline-flex;
	margin: 0;
	font-size: .8rem;
	color: rgba(255, 255, 255, .72);
}

.cabecera-oscura .sh__tira .sh__util-menu a {
	font-size: .8rem;
	color: rgba(255, 255, 255, .72);
}

.cabecera-oscura .sh__tira .sh__util-menu a:hover {
	color: var(--tc-accent, #D7B48C);
}

/* ---------- Selector de idioma ----------
   GTranslate pinta cada idioma como un enlace suelto con su bandera y su
   propio margen, y salían muy separados entre sí. Aquí se agrupan con una
   separación propia y pareja. */

.cabecera-oscura .sh__idioma .gtranslate_wrapper,
.cabecera-oscura .sh__idioma > div {
	display: flex;
	align-items: center;
	gap: 14px;
}

.cabecera-oscura .sh__idioma .glink {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 0 !important;
	padding: 0 !important;
	white-space: nowrap;
}

.cabecera-oscura .sh__idioma .glink img {
	margin: 0 !important;
	vertical-align: middle;
}

/* Dentro de la tira el selector va sin recuadro: la franja ya es un
   contenedor y dos marcos seguidos ensucian. */
.cabecera-oscura .sh__tira .sh__idioma select,
.cabecera-oscura .sh__tira .sh__idioma a {
	border-color: transparent;
	padding-block: 2px;
	font-size: .8rem;
}

.cabecera-oscura .sh__tira .sh__idioma select:hover {
	border-color: rgba(255, 255, 255, .22);
}

/* En pantallas chicas el horario sale de la tira: ocuparia una linea
   entera para un dato que tambien esta en el pie y en Contacto. El resto
   se centra, se achica y puede partirse en dos lineas en vez de salirse
   de la pantalla. */
@media (max-width: 700px) {
	.cabecera-oscura .sh__tira { font-size: .74rem; }
	.cabecera-oscura .sh__tira .sh__horario { display: none; }

	.cabecera-oscura .sh__tira-row {
		flex-wrap: wrap;
		justify-content: center;
		gap: 2px 12px;
		padding-block: 6px;
	}

	.cabecera-oscura .sh__tira-der {
		margin-left: 0;
		justify-content: center;
		gap: 2px 14px;
	}

	.cabecera-oscura .sh__tira .sh__util-menu { gap: 2px 14px; }

	.cabecera-oscura .sh__tira .sh__util-menu a,
	.cabecera-oscura .sh__tira .sh__idioma select,
	.cabecera-oscura .sh__tira .sh__idioma a {
		font-size: .74rem;
	}
}

.cabecera-oscura .sh,
.cabecera-oscura .sh__top {
	background: var(--tc-primary-dark, #15291F);
	border-bottom: 0;
}

.cabecera-oscura .sh__top-row {
	align-items: stretch;
	gap: 0;
	padding-block: 0;
}

/* ---------- Logo con su línea vertical ---------- */

.cabecera-oscura .sh__brand {
	justify-content: center;
	padding-block: 16px;
	padding-right: 30px;
	border-right: 1px solid rgba(255, 255, 255, .16);
}

.cabecera-oscura .sh__name { color: #fff; }
.cabecera-oscura .sh__tagline { color: rgba(255, 255, 255, .7); }

/* ---------- Columna derecha ---------- */

/* Deja de ser dos filas apiladas para ser dos grupos uno al lado del otro:
   a la izquierda los datos de contacto, a la derecha lo que se pulsa. */
@media (min-width: 1025px) {

	.cabecera-oscura .sh__right {
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		gap: 30px;
		flex: 1;
		padding-left: 30px;
	}

	/* Teléfono, correo e idioma apilados y alineados a la derecha. */
	.cabecera-oscura .sh__fila--b {
		order: 1;
		flex-direction: column;
		align-items: flex-end;
		gap: 6px;
	}

	.cabecera-oscura .sh__fila--a {
		order: 2;
		flex-wrap: nowrap;
		gap: 14px;
	}

	/* En la fila de abajo no va horario: se mudó a la tira de arriba. */
	.cabecera-oscura .sh__top .sh__horario { display: none; }
}

.cabecera-oscura .sh__dato,
.cabecera-oscura .sh__util-menu a {
	color: rgba(255, 255, 255, .82);
}

.cabecera-oscura .sh__dato:hover,
.cabecera-oscura .sh__util-menu a:hover {
	color: var(--tc-accent, #D7B48C);
}

/* ---------- Redes agrupadas en un recuadro ---------- */

.cabecera-oscura .sh__redes {
	gap: 0;
	padding: 4px;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 8px;
}

.cabecera-oscura .sh__redes a {
	border: 0;
	width: 30px;
	height: 30px;
	color: rgba(255, 255, 255, .85);
}

.cabecera-oscura .sh__redes a:hover {
	background: rgba(255, 255, 255, .12);
	color: var(--tc-accent, #D7B48C);
}

/* ---------- Los dos botones ---------- */

/* El secundario va en contorno para que no compita con el de reservar:
   dos botones llenos uno al lado del otro no dicen cuál es el importante. */
.cabecera-oscura .sh__cta2 {
	border-color: rgba(255, 255, 255, .5);
	color: #fff !important;
	background: transparent;
}

.cabecera-oscura .sh__cta2:hover {
	background: var(--tc-accent, #D7B48C);
	border-color: var(--tc-accent, #D7B48C);
	color: var(--tc-primary-dark, #15291F) !important;
}

/* ---------- Selector de idioma ---------- */

.cabecera-oscura .sh__idioma select,
.cabecera-oscura .sh__idioma a {
	color: rgba(255, 255, 255, .85);
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 6px;
	padding: 4px 26px 4px 10px;
	font: inherit;
	font-size: .82rem;
	line-height: 1.4;
}

/* appearance:none o el navegador dibuja su propia caja blanca y se ignora
   el fondo transparente. Al quitarla hay que poner la flecha a mano. */
.cabecera-oscura .sh__idioma select {
	appearance: none;
	-webkit-appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, rgba(255, 255, 255, .7) 50%),
		linear-gradient(135deg, rgba(255, 255, 255, .7) 50%, transparent 50%);
	background-position: right 12px center, right 7px center;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	cursor: pointer;
}

/* La lista desplegada la dibuja el sistema operativo, no la página: ahí el
   texto tiene que ser oscuro o no se lee sobre el fondo blanco del menú. */
.cabecera-oscura .sh__idioma select option {
	color: #1a1a1a;
	background: #fff;
}

/* ---------- El botón de reservar ----------
   Del color de la marca y no del verde de WhatsApp. En una cabecera marrón
   el verde canta, y la señal de WhatsApp ya la lleva la burbuja flotante de
   la esquina, que sí se queda verde. */
.cabecera-oscura .sh__cta.tc-btn--wa {
	background: var(--tc-accent, #D7B48C);
	color: var(--tc-primary-dark, #15291F) !important;
}

.cabecera-oscura .sh__cta.tc-btn--wa:hover {
	background: #fff;
	color: var(--tc-primary-dark, #15291F) !important;
}

/* ---------- Barra del menú ---------- */

/* Color plano y no translúcido: la barra es HERMANA del header, no hija,
   porque un sticky solo recorre el alto de su padre. Un negro al 22% no se
   mezclaría con la cabecera sino con el fondo de la página, que es blanco,
   y la barra salía gris claro. */
.cabecera-oscura .sh__barra {
	background: var(--tc-primary, #1F3F31);
	border-top: 1px solid rgba(var(--tc-accent-rgb), .3);
	box-shadow: none;
}

.cabecera-oscura .sh__barra.esta-fija {
	border-top-color: transparent;
	box-shadow: 0 2px 14px rgba(var(--tc-ink-rgb), .3);
}

/* El menú va centrado en la barra. */
@media (min-width: 1025px) {

	.cabecera-oscura .sh__menu > li > a {
		font-size: .84rem;
		font-weight: 700;
		letter-spacing: .06em;
		text-transform: uppercase;
		padding: 16px 16px;
	}
}

.cabecera-oscura .sh__menu > li > a:hover {
	background: rgba(var(--tc-accent-rgb), .16);
}

.cabecera-oscura .sh__menu .current-menu-item > a,
.cabecera-oscura .sh__menu .current_page_item > a,
.cabecera-oscura .sh__menu .current-menu-ancestor > a {
	background: rgba(0, 0, 0, .25);
}

/* ---------- Pantallas chicas ---------- */

@media (max-width: 1024px) {
	.cabecera-oscura .sh__brand {
		border-right: 0;
		padding-right: 0;
	}
}

/* ---------- Barra del menú ---------- */
/* Hermana del header, no hija: así su recorrido pegajoso es toda la página. */
.sh__barra {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--tc-primary, #1F3F31);
	box-shadow: 0 2px 10px rgba(var(--tc-ink-rgb), .12);
}

.sh__barra-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 0;
}

.sh__movil-titulo {
	display: none;
	font-size: .92rem;
	font-weight: 600;
	color: rgba(255, 255, 255, .9);
}

.sh__nav-row { display: flex; align-items: center; justify-content: center; }

/* flex-wrap: wrap es lo que impide que el menú se salga de la pantalla.
   Sin él, con nombres largos —"Política de protección de datos personales"
   mide lo que tres entradas normales— la barra se estiraba más allá del
   ancho de la ventana: los últimos enlaces quedaban fuera, invisibles, y
   la página entera ganaba una barra de scroll horizontal. Mejor dos
   líneas que enlaces que nadie encuentra. */
.sh__menu {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
	max-width: 100%;
}

.sh__menu > li { position: relative; display: flex; }

.sh__menu > li > a {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 15px 18px;
	font-size: .95rem;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	transition: background .18s ease;
}

.sh__menu > li > a::after {
	content: "";
	width: 0;
	height: 0;
	margin-left: 2px;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 4px solid rgba(255, 255, 255, .7);
	opacity: 0;
}

.sh__menu > li.menu-item-has-children > a::after,
.sh__menu > li.tiene-mega > a::after { opacity: 1; }

.sh__menu > li > a:hover { background: rgba(255, 255, 255, .14); }

.sh__menu .current-menu-item > a,
.sh__menu .current_page_item > a,
.sh__menu .current-menu-ancestor > a {
	background: rgba(0, 0, 0, .18);
	box-shadow: inset 0 -3px 0 var(--tc-accent, #D7B48C);
}

@media (min-width: 1025px) {
	.sh__menu .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 240px;
		margin: 0;
		padding: 8px;
		list-style: none;
		background: #fff;
		border-radius: 0 0 12px 12px;
		box-shadow: 0 16px 40px rgba(var(--tc-ink-rgb), .18);
		opacity: 0;
		visibility: hidden;
		transform: translateY(6px);
		transition: all .18s ease;
	}

	.sh__menu li:hover > .sub-menu,
	.sh__menu li:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.sh__menu .sub-menu a {
		color: var(--tc-ink, #15211f);
		padding: 10px 12px;
		border-radius: 8px;
		white-space: normal;
		font-weight: 500;
	}

	.sh__menu .sub-menu a:hover { background: var(--tc-soft, var(--tc-soft, #f5f8f7)); }
	.sh__cta-movil { display: none; }
}

@media (max-width: 1024px) {
	/* En móvil la barra verde es la que queda fija y lleva el botón del menú.
	   La palabra "Menú" y el icono van juntos y centrados: el menú desplegable
	   se abre por debajo en posición absoluta, así que no empuja nada. */
	.sh__barra-row {
		justify-content: center;
		gap: 10px;
		padding-block: 10px;
	}

	.sh__movil-titulo { display: block; }

	.sh__burger {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		padding: 9px 16px;
		border-color: rgba(255, 255, 255, .45);
	}

	.sh__burger-box span { background: #fff; }

	.sh__nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		display: none;
		background: #fff;
		border-top: 1px solid var(--tc-line, #e2e8e6);
		box-shadow: 0 20px 40px rgba(var(--tc-ink-rgb), .18);
		max-height: 80vh;
		overflow-y: auto;
		z-index: 2;
	}

	.sh__barra.is-open .sh__nav { display: block; }
	.sh__nav-row { display: block; padding-block: 10px 20px; }
	.sh__menu { display: block; }
	.sh__menu > li { display: block; }

	.sh__menu > li > a {
		padding: 13px 4px;
		font-size: 1rem;
		color: var(--tc-ink, #15211f);
		border-bottom: 1px solid var(--tc-line, #e2e8e6);
		white-space: normal;
	}

	.sh__menu > li > a:hover { background: transparent; }

	.sh__menu .current-menu-item > a,
	.sh__menu .current_page_item > a {
		background: transparent;
		box-shadow: none;
		color: var(--tc-primary, #1F3F31);
	}

	.sh__menu .sub-menu { margin: 0; padding: 0 0 0 16px; list-style: none; }
	.sh__menu .sub-menu a { font-size: .92rem; font-weight: 500; }
	.sh__cta-movil { display: inline-flex; margin-top: 16px; width: 100%; }
}

/* ====================== MEGA MENÚ ====================== */
.mega { display: none; }

@media (min-width: 1025px) {
	.sh__menu > li.tiene-mega { position: static; }

	.mega {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: #fff;
		box-shadow: 0 22px 46px rgba(var(--tc-ink-rgb), .20);
		opacity: 0;
		visibility: hidden;
		transform: translateY(6px);
		transition: opacity .18s ease, transform .18s ease, visibility .18s;
	}

	.sh__menu > li.tiene-mega:hover > .mega,
	.sh__menu > li.tiene-mega:focus-within > .mega {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	/* Tres columnas: lista, texto, imagen. */
	.mega__cols {
		display: grid;
		grid-template-columns: 1.15fr 1fr 1.05fr;
		gap: 28px;
		padding-block: 24px 26px;
		align-items: start;
	}
}

.mega__lista {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 2px;
	border-right: 1px solid var(--tc-line, #e2e8e6);
	padding-right: 26px;
}

.mega__lista a {
	display: block !important;
	padding: 7px 10px !important;
	margin-left: -12px;
	border-radius: 9px;
	text-decoration: none;
	color: var(--tc-ink, #15211f) !important;
	white-space: normal !important;
	font-weight: 500 !important;
	box-shadow: none !important;
	border-bottom: 0 !important;
	background: transparent !important;
}

.mega__lista a:hover,
.mega__lista li.is-activo > a {
	background: var(--tc-soft, var(--tc-soft, #f5f8f7)) !important;
	color: var(--tc-primary, #1F3F31) !important;
}

.mega__tour { display: block; font-size: .83rem; line-height: 1.3; }

.mega__dato {
	display: block;
	margin-top: 1px;
	font-size: .72rem;
	color: var(--tc-muted, #5f6f6c);
}

/* Columna central */
.mega__texto-titulo {
	margin: 0 0 9px;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--tc-ink, #15211f);
}

.mega__texto-cuerpo {
	margin: 0 0 14px;
	font-size: .85rem;
	line-height: 1.55;
	color: var(--tc-muted, #5f6f6c);
}

.mega__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

.mega__chips li {
	padding: 5px 11px;
	font-size: .76rem;
	color: var(--tc-muted, #5f6f6c);
	background: var(--tc-soft, var(--tc-soft, #f5f8f7));
	border-radius: 999px;
}

/* Solo se ve el panel activo. En .mega__img las fotos se apilan para que
   el alto no salte al cambiar de tour. */
.mega__texto { position: relative; }
.mega__texto .mega__panel { display: none; }
.mega__texto .mega__panel.is-activo { display: block; }

.mega__img { position: relative; }

.mega__img .mega__panel {
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s ease;
}

.mega__img .mega__panel:not(:first-child) {
	position: absolute;
	inset: 0;
}

.mega__img .mega__panel.is-activo { opacity: 1; visibility: visible; }

/* Columna de imagen */
.mega__foto {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 12px;
	background: var(--tc-soft, var(--tc-soft, #f5f8f7));
}

/* ---------- Panel de destinos: rejilla de tarjetas ---------- */
.mega__rejilla {
	display: grid;
	gap: 18px 16px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	padding-block: 20px 24px;
}

@media (min-width: 700px) {
	.mega__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
	.mega__rejilla { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.mega__destino-media {
	display: block;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
}

.mega__destino-foto {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 10px;
	background: var(--tc-soft, var(--tc-soft, #f5f8f7));
}

.mega__destino-titulo {
	margin: 9px 0 6px;
	padding-bottom: 6px;
	font-size: .88rem;
	font-weight: 700;
	text-align: center;
	border-bottom: 1px solid var(--tc-line, #e2e8e6);
}

.mega__destino-titulo a {
	color: var(--tc-ink, #15211f) !important;
	text-decoration: none;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
}

.mega__destino-titulo a:hover { color: var(--tc-primary, #1F3F31) !important; }

.mega__destino-lista {
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 6px;
}

.mega__destino-lista a {
	display: block !important;
	position: relative;
	padding: 1px 0 1px 12px !important;
	font-size: .76rem;
	font-weight: 400 !important;
	line-height: 1.4;
	color: var(--tc-muted, #5f6f6c) !important;
	text-decoration: none;
	white-space: normal !important;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
}

.mega__destino-lista a::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--tc-accent, #D7B48C);
}

.mega__destino-lista a:hover { color: var(--tc-primary, #1F3F31) !important; }

.mega__destino-mas {
	display: inline-block !important;
	padding: 0 !important;
	font-size: .78rem;
	font-weight: 600 !important;
	color: var(--tc-primary, #1F3F31) !important;
	text-decoration: underline !important;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
}

.mega__pie {
	border-top: 1px solid var(--tc-line, #e2e8e6);
	background: var(--tc-soft, var(--tc-soft, #f5f8f7));
}

.mega__pie-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px 24px;
	padding-block: 13px;
	font-size: .86rem;
	color: var(--tc-muted, #5f6f6c);
}

/* El botón siempre al extremo derecho, haya o no texto a su izquierda. */
.mega__pie-row .tc-btn { margin-left: auto; }

.mega__vacio {
	padding: 10px 0;
	font-size: .86rem;
	line-height: 1.5;
	color: var(--tc-muted, #5f6f6c);
}

@media (max-width: 1024px) {
	.mega { display: block; padding: 4px 0 12px 12px; }
	.mega__cols { display: block; }
	.mega__lista { border-right: 0; padding-right: 0; }
	.mega__texto,
	.mega__img,
	.mega__pie { display: none; }
}

/* ====================== PIE DE PÁGINA ====================== */
.sf {
	background: var(--tc-ink, #15211f);
	color: rgba(255, 255, 255, .78);
	font-size: .92rem;
}

.sf__grid {
	display: grid;
	gap: 36px;
	padding-block: 56px 44px;
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 640px) {
	.sf__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
	.sf__grid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 44px; }
}

.sf__col--marca { text-align: center; }

.sf__col--marca .custom-logo-link { display: inline-block; }

.sf__col--marca .custom-logo {
	height: 96px;
	width: auto;
	max-width: 300px;
	object-fit: contain;
	filter: brightness(0) invert(1);
	margin: 0 auto 14px;
}

.sf__nombre { margin: 0 0 12px; font-size: 1.1rem; font-weight: 800; color: #fff; }
.sf__texto { margin: 0 auto; line-height: 1.65; max-width: 38ch; }

.sf__titulo {
	margin: 0 0 16px;
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--tc-accent, #D7B48C);
}

.sf__lista {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 10px;
}

.sf__lista a { color: rgba(255, 255, 255, .8); text-decoration: none; }
.sf__lista a:hover { color: #fff; text-decoration: underline; }
.sf__lista--datos { margin-bottom: 20px; line-height: 1.5; }

.sf__redes {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}

.sf__redes a {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	font-size: .9rem;
	color: rgba(255, 255, 255, .88);
	text-decoration: none;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 50%;
	transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.sf__redes a:hover {
	background: var(--tc-accent, #D7B48C);
	border-color: var(--tc-accent, #D7B48C);
	color: var(--tc-primary-dark, #15291F);
	transform: translateY(-2px);
}

.sf__redes .ico,
.sf__redes svg { width: 19px; height: 19px; }

/* Razón social y RUC debajo de los datos de contacto. */
.sf__fiscal {
	margin: 0;
	padding-top: 14px;
	border-top: 1px solid rgba(255, 255, 255, .14);
	color: rgba(255, 255, 255, .62);
	font-size: .82rem;
	line-height: 1.6;
}

/* Aviso de dato pendiente. Solo se imprime para quien ha iniciado sesión
   y puede corregirlo; el visitante no lo ve nunca. */
.sf__aviso {
	margin: 14px 0 0;
	padding: 10px 12px;
	border: 1px dashed rgba(var(--tc-accent-rgb), .55);
	border-radius: 8px;
	color: var(--tc-accent, #D7B48C);
	font-size: .82rem;
	line-height: 1.55;
}

.sf__aviso a { color: #fff; text-decoration: underline; }
.sf__aviso span { display: block; margin-top: 4px; opacity: .65; font-size: .76rem; }

/* ---------- Franja de reclamaciones y medios de pago ---------- */

.sf__franja { border-top: 1px solid rgba(255, 255, 255, .12); }

.sf__franja-row {
	display: flex;
	flex-wrap: wrap;
	gap: 22px 36px;
	align-items: center;
	justify-content: space-between;
	padding-block: 22px;
}

/* El botón del libro de reclamaciones. Es un diseño propio, no el logotipo
   oficial: lo que la norma pide es el acceso visible, no una imagen concreta. */
.sf__libro {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 12px 20px 12px 16px;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 10px;
	background: rgba(255, 255, 255, .06);
	color: #fff;
	text-decoration: none;
	transition: background-color .18s ease, border-color .18s ease;
}

.sf__libro:hover,
.sf__libro:focus {
	background: var(--tc-accent, #D7B48C);
	border-color: var(--tc-accent, #D7B48C);
	color: var(--tc-primary-dark, #15291F);
	text-decoration: none;
}

.sf__libro svg { width: 26px; height: 26px; flex: 0 0 auto; }

.sf__libro span { display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.sf__libro strong { font-size: .95rem; font-weight: 700; }
.sf__libro small { font-size: .78rem; opacity: .8; }

/* Sellos: responsabilidad social, registro de agencia, certificaciones.
   Vienen en formatos y tamaños distintos, así que se normalizan por altura
   y no por ancho: es lo único que los hace ver alineados entre sí. */
.sf__sellos {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 22px;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Los sellos oficiales están dibujados en azul, marrón y negro, pensados
   para fondo blanco. Sobre el verde del pie no llegan al contraste mínimo,
   así que van sobre una placa blanca. No se recolorean: son marcas oficiales
   y alterarlas sería falsearlas. */
.sf__sellos li {
	display: flex;
	align-items: center;
	padding: 9px 14px;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
	transition: transform .18s ease, box-shadow .18s ease;
}

.sf__sellos li:has(a):hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(0, 0, 0, .26);
}

.sf__sellos a { display: block; line-height: 0; }

.sf__sellos img {
	height: 54px;
	width: auto;
	max-width: 200px;
	object-fit: contain;
	display: block;
}

.sf__pagos { text-align: right; }

.sf__pagos-titulo {
	margin: 0 0 8px;
	color: rgba(255, 255, 255, .6);
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.sf__pagos img {
	max-width: 280px;
	height: auto;
	display: inline-block;
}

.sf__pagos-texto {
	margin: 6px 0 0;
	color: rgba(255, 255, 255, .8);
	font-size: .86rem;
}

@media (max-width: 980px) {
	.sf__franja-row { justify-content: center; text-align: center; }
	.sf__sellos { justify-content: center; }
}

@media (max-width: 760px) {
	.sf__pagos { text-align: center; }
	.sf__libro { width: 100%; justify-content: center; }
	.sf__sellos img { height: 46px; }
}

.sf__barra { border-top: 1px solid rgba(255, 255, 255, .12); }

.sf__barra-row {
	padding-block: 18px;
	font-size: .82rem;
	text-align: center;
	color: rgba(255, 255, 255, .6);
}

.sf__copy { margin: 0; }

@media print {
	.sh, .sf, .wa, .sr-skip { display: none !important; }
}

/* ==========================================================================
   Ventana flotante de WhatsApp
   ========================================================================== */
.wa {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 60;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
}

/* ---------- Botón ---------- */
.wa__btn {
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	padding: 0;
	background: var(--tc-wa, #1faa55);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 6px 22px rgba(var(--tc-ink-rgb), .3);
	transition: transform .2s ease, background .2s ease;
}

.wa__btn:hover { background: #17893f; transform: scale(1.05); }

.wa__icono { display: grid; place-items: center; color: #fff; }
.wa__icono svg { width: 31px; height: 31px; fill: #fff; }
.wa__icono i { font-size: 30px; line-height: 1; }

.wa.is-abierto .wa__btn { background: var(--tc-ink, #15211f); }

/* ---------- Panel ---------- */
.wa__panel {
	width: min(330px, calc(100vw - 36px));
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 18px 50px rgba(var(--tc-ink-rgb), .3);
	animation: wa-aparece .22s ease;
}

.wa__panel[hidden] { display: none; }

@keyframes wa-aparece {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: translateY(0); }
}

.wa__head {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 18px 18px 20px;
	background: var(--tc-wa, #1faa55);
}

.wa__saludo {
	margin: 0;
	font-size: .92rem;
	line-height: 1.45;
	color: #fff;
}

.wa__cerrar {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	padding: 0;
	background: rgba(255, 255, 255, .2);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.wa__cerrar svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: #fff;
	stroke-width: 2.2;
	stroke-linecap: round;
}

.wa__cerrar:hover { background: rgba(255, 255, 255, .34); }

/* ---------- Quién atiende ---------- */
.wa__agente {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 18px;
	border-bottom: 1px solid var(--tc-line, #e2e8e6);
}

.wa__foto {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--tc-soft, var(--tc-soft, #f5f8f7));
	border: 1px solid var(--tc-line, #e2e8e6);
	overflow: hidden;
}

.wa__foto img {
	width: 80%;
	height: 80%;
	object-fit: contain;
}

.wa__quien { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.wa__quien strong {
	font-size: .95rem;
	color: var(--tc-ink, #15211f);
}

.wa__quien span {
	font-size: .82rem;
	line-height: 1.35;
	color: var(--tc-muted, #5f6f6c);
}

/* ---------- Mensaje ---------- */
.wa__form {
	display: grid;
	gap: 12px;
	padding: 16px 18px 18px;
}

.wa__texto {
	width: 100%;
	padding: 11px 13px;
	font: inherit;
	font-size: .9rem;
	line-height: 1.5;
	color: var(--tc-ink, #15211f);
	background: var(--tc-soft, var(--tc-soft, #f5f8f7));
	border: 1px solid var(--tc-line, #e2e8e6);
	border-radius: 10px;
	resize: vertical;
	box-sizing: border-box;
}

.wa__texto:focus {
	outline: none;
	background: #fff;
	border-color: var(--tc-line-fuerte, #b9c6c2);
}

@media (prefers-reduced-motion: reduce) {
	.wa__panel { animation: none; }
	.wa__btn { transition: none; }
}

/* Botón de enviar del chat: estilos completos y propios, para que ninguna
   regla de otro plugin pueda dejarlo sin fondo. */
.wa .wa__enviar {
	display: block;
	width: 100%;
	margin: 0;
	padding: 13px 18px;
	font-family: inherit;
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	color: #fff;
	background-color: #1faa55;
	background-image: none;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	box-shadow: none;
	transition: background-color .18s ease;
}

.wa .wa__enviar:hover,
.wa .wa__enviar:focus {
	background-color: #17893f;
	color: #fff;
}

.wa .wa__enviar:focus-visible {
	outline: 2px solid var(--tc-ink, #15211f);
	outline-offset: 2px;
}