/* Ajustes de proyecto sobre el theme Wildex. Se carga DESPUÉS de custom.css.
   Solo cubre huecos: textos del theme en inglés y enlaces en marcado que el
   template dejaba sin estilar (títulos-enlace de posts y fichas de logística). */

/* La cinta de la tarifa destacada, en español */
.pricing-item.highlighted-box::after {
	content: 'la más pedida';
}

/* Títulos que son enlace (blog y logística): color del theme, no azul UA */
.post-item-content h3 a,
.adventure-item-content h3 a {
	color: var(--primary-color);
	text-decoration: none;
	transition: all 0.3s ease-in-out;
}

.post-item-content h3 a:hover,
.adventure-item-content h3 a:hover {
	color: var(--accent-color);
}

/* Cierre de sección de tramos: mismo tratamiento que .section-footer-text */
.why-choose-footer-list p a {
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	color: var(--accent-color);
	transition: all 0.3s ease-in-out;
}

.why-choose-footer-list p a:hover {
	color: var(--primary-color);
}

/* Email de la caja de contacto de las FAQ */
.faqs-cta-contact-content p a {
	color: inherit;
}

/* Pares de botones: el theme siempre usa uno solo por bloque, así que no
   define separación entre hermanos ni aire respecto al párrafo anterior. */
.hero-btn,
.our-adventures-btn {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
	margin-top: 30px;
}

/* En español no se capitaliza cada palabra (Reservar ahora, Leer la guía) */
.btn-default,
.readmore-btn {
	text-transform: none;
}

/* Tarjeta de blog con descripción (el theme solo trae título + enlace) */
.post-item-content p {
	margin: 10px 0 0;
}

/* Velo del hero: el theme solo oscurece por abajo porque su foto ya es oscura
   arriba. La nuestra (cielo del embalse) es clara: se añade oscuridad arriba
   para el menú y el H1, manteniendo el fundido a negro inferior del theme. */
.hero::before {
	background: linear-gradient(180deg, rgb(0 0 0 / 0.62) 0%, rgb(0 0 0 / 0.34) 28%, rgb(0 0 0 / 0.18) 45%, #000 90%);
}

/* Pie a foto completa: la imagen ocupa todo el footer con scrim oscuro
   (el theme lo tenía claro arriba con texto negro) y los textos pasan a
   blanco para contrastar. */
.main-footer::before {
	background: linear-gradient(180deg, rgb(0 0 0 / 0.78) 0%, rgb(0 0 0 / 0.6) 50%, rgb(0 0 0 / 0.78) 100%);
}

.main-footer,
.main-footer .about-footer-content p {
	color: rgb(255 255 255 / 0.78);
}

.main-footer .footer-links h3,
.main-footer .footer-social-links h3 {
	color: #fff;
}

.main-footer .footer-links ul li {
	color: rgb(255 255 255 / 0.78);
}

.main-footer .footer-links ul li a:hover {
	color: var(--accent-color);
}

.main-footer .footer-social-links,
.main-footer .footer-links-box,
.main-footer .main-footer-box {
	border-color: rgb(255 255 255 / 0.18);
}

/* Círculo de cifra del bloque «Qué es»: el theme lo dimensiona para «5K+»
   (46px); con «22 km» necesita más aire. */
.about-client-box .satisfy-client-image.add-more {
	width: 64px;
	height: 64px;
}

.about-client-box .satisfy-client-image.add-more h3 {
	font-size: 15px;
	white-space: nowrap;
}

/* Velo de «Planifica tu visita»: el del theme solo cubre arriba (73%) y con
   nuestra foto clara los ítems inferiores no se leían. Base blanca en toda
   la sección manteniendo el fundido del theme. */
.our-adventures::before {
	background: linear-gradient(0deg, rgb(247 247 247 / 0.68) 0%, rgb(247 247 247 / 0.88) 55%, #f7f7f7 85%);
}

/* Copyright sobre foto: sombra para asegurar contraste con cualquier fondo */
.footer-copyright-text p {
	text-shadow: 0 1px 3px rgb(0 0 0 / 0.9), 0 0 18px rgb(0 0 0 / 0.55);
}

/* Enlaces dentro de la prosa de las páginas interiores: el theme no los
   estilaba (sus demos no llevaban enlaces en el entry) y salían en azul UA.
   Oliva oscurecido para contraste AA sobre blanco. */
.service-entry a:not(.btn-default),
.trip-entry a:not(.btn-default),
.accordion-body a {
	color: #71703f;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.3s ease-in-out;
}

.service-entry a:not(.btn-default):hover,
.trip-entry a:not(.btn-default):hover,
.accordion-body a:hover {
	color: var(--primary-color);
}

/* Enlaces de la caja CTA del sidebar: icono y texto alineados en una línea */
.sidebar-cta-contact-list ul li a {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Tarjetas post con h3 (jerarquía correcta bajo el H2 de sección): mismo
   tamaño que el h2 de tarjeta del theme */
.post-item-content h3 {
	font-size: 20px;
	line-height: 1.4em;
}

/* Enlaces en la prosa de las secciones tipo portada (fuera de los entry):
   mismos criterios que en los entry — oliva oscuro AA, hover negro. */
.section-title p a,
.post-item-content p a,
.about-us-content a:not(.btn-default),
.adventure-item-content p a,
.why-choose-item-content p a,
.about-body-item-content p a,
.approach-item-content p a,
.about-client-content p a {
	color: #71703f;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.3s ease-in-out;
}

.section-title p a:hover,
.post-item-content p a:hover,
.about-us-content a:not(.btn-default):hover,
.adventure-item-content p a:hover,
.why-choose-item-content p a:hover,
.about-body-item-content p a:hover,
.approach-item-content p a:hover,
.about-client-content p a:hover {
	color: var(--primary-color);
}

/* En las bandas oscuras, el enlace pasa a blanco con hover en acento */
.dark-section .section-title p a {
	color: #fff;
}

.dark-section .section-title p a:hover {
	color: var(--accent-color);
}

/* Caja de la FAQ cuando va a la DERECHA del acordeón: sticky y con el
   margen al lado correcto (el theme la diseñó para la izquierda). */
.faqs-cta-box--derecha {
	position: sticky;
	top: 30px;
	margin-right: 0;
	margin-left: 50px;
}

@media (max-width: 991px) {
	.faqs-cta-box--derecha {
		position: relative;
		top: 0;
		margin-left: 0;
		margin-top: 30px;
	}
}

/* Parallax claro (our-adventures): más base blanca y texto más oscuro — con
   fotos frondosas el velo original del theme dejaba el gris #808080 ilegible. */
.our-adventures::before {
	background: linear-gradient(0deg, rgb(247 247 247 / 0.82) 0%, rgb(247 247 247 / 0.93) 55%, #f7f7f7 85%);
}

.our-adventures .section-title p,
.our-adventures .adventure-item-content p {
	color: #5c5c5c;
}

/* Columna del about (eyebrow + caja de cifra): el theme la estira con
   space-between y height 100%, lo que abre un hueco gigante cuando la
   columna se apila por debajo de xl. En apilado, flujo normal. */
@media (max-width: 1199.98px) {
	.about-satisfied-client-content {
		height: auto;
		justify-content: flex-start;
		gap: 20px;
	}
}

/* Tablas dentro de los entry: el theme no las estila (sus demos no llevan).
   Líneas, aire y cabecera marcada. */
.service-entry table,
.trip-entry table {
	width: 100%;
	border-collapse: collapse;
	margin: 10px 0 20px;
}

.service-entry table th,
.service-entry table td,
.trip-entry table th,
.trip-entry table td {
	border: 1px solid var(--divider-color);
	padding: 12px 16px;
	text-align: left;
	vertical-align: top;
}

.service-entry table thead th,
.trip-entry table thead th {
	background: var(--bg-color);
	color: var(--primary-color);
	font-family: var(--accent-font);
	font-weight: 600;
}

.service-entry table tbody th {
	color: var(--primary-color);
	font-weight: 600;
}

/* Fichas trip-info: aire entre título, texto y lista (el theme los pega) */
.trip-info-item h3 {
	margin-bottom: 12px;
}

.trip-info-item p {
	margin-bottom: 14px;
}

/* Ritmo vertical generoso en las páginas single: el theme no separa las
   cajas de fichas del contenido siguiente ni da aire a los títulos sueltos. */
.service-entry .trip-info-box {
	margin: 10px 0 45px;
}

.service-entry .service-overview-box {
	margin-top: 40px;
}

.service-entry .service-overview-box:first-of-type {
	margin-top: 30px;
}

.service-entry .service-overview-box:first-child {
	margin-top: 0;
}

.service-entry > h3 {
	margin: 35px 0 15px;
}

.service-entry figure {
	margin: 25px 0;
}

.service-entry .page-single-faqs {
	margin-top: 25px;
}

/* Y en las secciones de pilar: fichas con aire respecto a lo que sigue */
.our-approach .approach-items-box {
	margin-top: 30px;
}

/* Listas del entry: el theme les da margen solo por arriba y el párrafo
   siguiente quedaba pegado al último ítem. */
.service-entry ul {
	margin-bottom: 24px;
}

.service-entry ul li + li {
	margin-top: 8px;
}

/* ===== Respiración general del contenido (petición expresa: aire de sobra) ===== */
.service-entry p {
	margin-bottom: 26px;
	line-height: 1.75;
}

.service-entry .service-overview-box h2,
.service-entry .trip-info-box h2 {
	margin-bottom: 22px;
}

.service-entry .service-overview-box h3 {
	margin-top: 28px;
	margin-bottom: 12px;
}

.service-entry figure {
	margin: 32px 0 42px;
}

.service-entry figcaption {
	margin-top: 14px;
	font-size: 14px;
	font-style: italic;
	color: var(--text-color);
}

.service-entry ul {
	margin-bottom: 30px;
}

.service-entry ul li + li {
	margin-top: 10px;
}

.service-entry .service-overview-box {
	margin-top: 52px;
}

.service-entry .trip-info-box {
	margin: 15px 0 52px;
}

/* Refuerzo del aire (v6): márgenes claramente generosos */
.service-entry p {
	margin-bottom: 28px;
}

.service-entry .trip-info-box {
	margin-bottom: 60px;
}

.service-entry .service-overview-box h3,
.service-entry > h3 {
	margin-top: 38px;
	margin-bottom: 16px;
}

/* El grid de fichas separa de lo que venga después DENTRO de su caja */
.service-entry .trip-info-body {
	margin-bottom: 36px;
}

/* Títulos h3 dentro de las cajas de contenido (no los de las fichas) */
.service-entry .trip-info-box > h3,
.service-entry .service-overview-box > h3 {
	margin-top: 42px;
	margin-bottom: 18px;
}

/* Móvil y tablet: fuera la topbar de acento (contacto y ubicación) — en
   pantallas pequeñas roba altura al hero y duplica lo que ya está en el pie. */
@media (max-width: 991.98px) {
	.topbar {
		display: none;
	}
}

/* Foto de apertura de las páginas single: tope de altura para másters
   verticales (el carrito, el perro con correa) — recorte elegante en vez
   de una columna de foto interminable. */
.page-single-image figure img {
	width: 100%;
	max-height: 620px;
	object-fit: cover;
}

/* Fichas what-we-do (prime) con contenido corto: fuera el alto mínimo de
   450px y el space-between del theme, que separaban cifra y texto un mundo. */
.what-we-do-item-prime {
	min-height: auto;
}

.what-we-do-item-body-prime {
	justify-content: flex-start;
	gap: 12px;
}

/* Selector de idioma: pastilla junto al CTA (y junto a la hamburguesa en móvil) */
.lang-switch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	padding: 9px 14px;
	margin-right: 12px;
	border: 1px solid rgb(255 255 255 / 0.35);
	border-radius: 8px;
	color: #fff;
	font-family: var(--accent-font);
	font-weight: 600;
	font-size: 14px;
	transition: all 0.3s ease-in-out;
}

.lang-switch:hover {
	background: var(--accent-color);
	border-color: var(--accent-color);
	color: #000;
}

.lang-switch--movil {
	display: none;
}

@media (max-width: 991.98px) {
	.lang-switch--movil {
		display: inline-flex;
		position: absolute;
		right: 74px;
		top: 50%;
		transform: translateY(-50%);
		margin-right: 0;
	}
}

/* Nota de transparencia del pie */
.footer-partner {
	margin-top: 12px;
	font-size: 13px;
	opacity: 0.75;
}

/* ===== Correcciones de la auditoría de accesibilidad ===== */
/* El gris del theme (#808080) da ~4,0:1 sobre blanco: por debajo de AA.
   Se oscurece globalmente vía la variable del theme (5,3:1). */
:root {
	--text-color: #6f6f6f;
}

/* Foco visible en todo elemento interactivo (el theme lo anulaba en varios) */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid #71703f !important;
	outline-offset: 2px;
}

.dark-section a:focus-visible,
.main-header a:focus-visible,
.topbar a:focus-visible {
	outline-color: #fff !important;
}

/* Área táctil ≥24px en los títulos-enlace de las tarjetas del slider */
.service-item-content h3 a {
	display: inline-block;
	padding: 6px 0;
}

/* Movimiento reducido: la marquesina y los parallax se quedan quietos */
@media (prefers-reduced-motion: reduce) {
	.scrolling-content {
		animation: none !important;
	}
	.parallaxie {
		background-attachment: scroll !important;
	}
}

/* La marquesina se pausa al pasar el ratón o enfocar (WCAG 2.2.2) */
.scrolling-ticker-box:hover .scrolling-content,
.scrolling-ticker-box:focus-within .scrolling-content {
	animation-play-state: paused;
}

/* ===== Fondos responsive AVIF: escalera completa por dispositivo
   (móvil 768 / tablet 1280 / portátil 1920 / escritorio XL 2560). ===== */
[style*="--f768"] {
	background-image: var(--f1920) !important;
}

@media (max-width: 767.98px) {
	[style*="--f768"] {
		background-image: var(--f768) !important;
	}
}

@media (min-width: 768px) and (max-width: 1279.98px) {
	[style*="--f768"] {
		background-image: var(--f1280) !important;
	}
}

@media (min-width: 1920px) {
	[style*="--f768"] {
		background-image: var(--f2560) !important;
	}
}

/* ===== Eyebrows accesibles: mismo estilo que .section-title h3 del theme,
   pero como <p> (sin romper el orden de encabezados) y con contraste AA
   sobre fondos claros; en secciones oscuras conserva el acento. ===== */
.st-eyebrow {
	position: relative;
	display: inline-block;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	line-height: normal;
	color: #71703f;
	padding-left: 22px;
	margin-bottom: 15px;
}

.st-eyebrow::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	background-image: url(../images/icon-sub-heading-accent.svg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	width: 16px;
	height: 16px;
}

.dark-section .st-eyebrow,
.hero .st-eyebrow {
	color: var(--accent-color);
}

.dark-section .st-eyebrow::before,
.hero .st-eyebrow::before {
	background-image: url(../images/icon-sub-heading-white.svg);
}

/* Los width/height de los <img> son para reservar espacio (CLS), nunca para
   dimensionar: altura fluida salvo que el theme diga otra cosa (:where = 0
   especificidad, cualquier regla CSS gana). */
img:where([width][height]) {
	max-width: 100%;
	height: auto;
}

/* La foto-píldora del título se recorta con cover (evita el aviso de ratio) */
.section-title h2 img {
	object-fit: cover;
}