/*
Theme Name: Ecosportour
Theme URI: https://ecosportour.com
Author: Blue Nova Consulting
Author URI: https://bluenova.com.ec
Description: Tema a medida para Ecosportour Cía. Ltda. — operadora de turismo en Quito, Ecuador. Basado en la plantilla GlobeTrek, totalmente autoadministrable con ACF Pro.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ecosportour
Tags: travel, tours, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   Los estilos base viven en assets/css/style.css (plantilla GlobeTrek).
   Este archivo solo contiene los ajustes propios de Ecosportour que deben
   sobrescribir a la plantilla. Los colores NO se escriben aquí: se generan
   dinámicamente desde Ajustes del Sitio → Colores (ver inc/enqueue.php).
   ========================================================================== */

/* Tipografía de marca ----------------------------------------------------- */
body,
button,
input,
select,
textarea {
	font-family: var(--font-main);
}

h1, h2, h3, h4, h5, h6,
.title,
.property-topic {
	font-family: var(--font-main);
	letter-spacing: -0.01em;
}

/* Accesibilidad ----------------------------------------------------------- */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link:focus {
	background-color: var(--white);
	color: var(--eco-secondary);
	display: block;
	font-size: 14px;
	font-weight: 600;
	left: 8px;
	padding: 12px 20px;
	position: fixed;
	text-decoration: none;
	top: 8px;
	z-index: 100000;
}

:focus-visible {
	outline: 2px solid var(--eco-primary);
	outline-offset: 2px;
}

/* Botón flotante de WhatsApp --------------------------------------------- */
.eco-whatsapp-float {
	align-items: center;
	background-color: #25d366;
	border-radius: 50%;
	bottom: 24px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
	display: flex;
	height: 56px;
	justify-content: center;
	position: fixed;
	right: 24px;
	transition: transform 0.25s ease;
	width: 56px;
	z-index: 999;
}

.eco-whatsapp-float:hover {
	transform: scale(1.08);
}

.eco-whatsapp-float svg {
	fill: #fff;
	height: 30px;
	width: 30px;
}

/* Barra móvil fija (Book Now + WhatsApp) ---------------------------------- */
.eco-mobile-bar {
	background-color: var(--white);
	border-top: 1px solid var(--stoke-color);
	bottom: 0;
	display: none;
	gap: 10px;
	left: 0;
	padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
	position: fixed;
	right: 0;
	z-index: 1000;
}

.eco-mobile-bar .tf-btn {
	flex: 1;
	justify-content: center;
	text-align: center;
}

.eco-mobile-bar .eco-bar-wa {
	background-color: #25d366;
	border-color: #25d366;
	color: #fff;
	flex: 0 0 54px;
	max-width: 54px;
}

@media (max-width: 991px) {
	.eco-mobile-bar {
		display: flex;
	}

	.eco-whatsapp-float {
		bottom: 84px;
	}

	body.has-eco-mobile-bar {
		padding-bottom: 76px;
	}
}

/* Barra de prueba social -------------------------------------------------- */
.eco-social-proof {
	background-color: var(--eco-accent);
	padding: 22px 0;
}

.eco-social-proof .eco-proof-inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 18px 36px;
	justify-content: center;
}

.eco-social-proof .eco-proof-rating {
	align-items: center;
	display: flex;
	gap: 10px;
}

.eco-social-proof .eco-proof-score {
	color: var(--eco-secondary);
	font-size: 26px;
	font-weight: 700;
	line-height: 1;
}

.eco-social-proof .eco-proof-stars {
	color: var(--star-color);
	font-size: 17px;
	letter-spacing: 2px;
}

.eco-social-proof .eco-proof-count {
	color: var(--text-color);
	font-size: 14px;
}

.eco-social-proof .eco-proof-badges {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
	justify-content: center;
}

.eco-social-proof .eco-proof-badges img {
	height: auto;
	max-height: 46px;
	object-fit: contain;
	width: auto;
}

/* Bullets de confianza del hero ------------------------------------------ */
.eco-trust-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	list-style: none;
	margin: 0 0 26px;
	padding: 0;
}

.eco-trust-list li {
	align-items: center;
	color: var(--white);
	display: flex;
	font-size: 15px;
	font-weight: 500;
	gap: 8px;
}

.eco-trust-list li::before {
	color: var(--eco-primary);
	content: "\e91b"; /* icon-check */
	font-family: "icomoon";
	font-size: 13px;
}

/* Bullets rápidos de las tarjetas de tour -------------------------------- */
.eco-card-bullets {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
}

.eco-card-bullets li {
	align-items: flex-start;
	color: var(--text-color);
	display: flex;
	font-size: 14px;
	gap: 8px;
	line-height: 1.5;
	margin-bottom: 6px;
}

.eco-card-bullets li::before {
	color: var(--eco-primary);
	content: "\e91b"; /* icon-check */
	flex-shrink: 0;
	font-family: "icomoon";
	font-size: 11px;
	margin-top: 4px;
}

.eco-proof-stars .icon-star.empty,
.list-star .icon-star.empty {
	opacity: 0.28;
}

/* Aviso de dato pendiente (solo visible para administradores) ------------- */
.eco-pending {
	background-color: #fff3cd;
	border: 1px dashed #d39e00;
	border-radius: 4px;
	color: #7a5b00;
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	padding: 2px 8px;
}

/* ==========================================================================
   BLOQUE DE PLANTILLAS
   Portada, tour, listados, páginas de contenido, blog y páginas de sistema.
   Unificado a partir del CSS pedido por cada plantilla: reglas duplicadas
   fundidas en una sola y contradicciones resueltas.

   Normas del bloque:
   · Ningún color en duro. Solo var(--eco-primary|secondary|accent|button),
     var(--white), var(--text-color), var(--stoke-color), var(--star-color)
     y las variantes rgba(var(--eco-*-rgb), a) que genera inc/enqueue.php.
   · Sobre el celeste --eco-primary el texto va SIEMPRE en --eco-secondary.
   · Todos los media queries están juntos al final (sección 15), ordenados de
     mayor a menor: 1400 / 1199 / 991 / 767 / 575 / 380.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Variables propias y protecciones globales
   -------------------------------------------------------------------------- */
:root {
	/* Alto real de la cabecera. La portada sube su hero por debajo de ella con
	   un margen negativo, así que este valor DEBE coincidir con el alto medido:
	   si se queda corto, asoma una franja del fondo de página bajo la cabecera.
	   Con el logo a 46 px de alto (ver más abajo) la cabecera mide 88 px. */
	--eco-header-h: 88px;

	/* Radio y filete comunes a tarjetas, cajas y embebidos. */
	--eco-radius: 16px;
	--eco-hairline: 1px solid rgba(var(--eco-secondary-rgb), 0.12);
}

/* Ninguna sección debe generar barra de desplazamiento horizontal.
   Se usa "clip" y no "hidden" para no romper los position:sticky. */
html,
body {
	overflow-x: clip;
}

/* Los embebidos que pega el cliente (mapas, vídeos) nunca desbordan. */
iframe,
video {
	max-width: 100%;
}

/* --------------------------------------------------------------------------
   1. Utilidades compartidas
   -------------------------------------------------------------------------- */
.eco-gap-row {
	row-gap: 40px;
}

.eco-rich-text p {
	margin-bottom: 16px;
}

.eco-rich-text p:last-child {
	margin-bottom: 0;
}

.eco-rich-text ul,
.eco-rich-text ol {
	margin: 0 0 16px 20px;
}

.eco-rich-text li {
	margin-bottom: 8px;
}

/* Cierre de bloque: toda sección termina en una llamada a la acción.
   Una única definición para todos los contenedores de botones. */
.eco-section-cta,
.eco-section-actions,
.eco-cta-actions,
.eco-hero-actions,
.eco-404-actions,
.eco-thankyou-actions,
.eco-empty-actions,
.eco-listing-cta-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 32px;
}

/* Variantes centradas (portada, galería del tour, listados y sistema). */
.eco-actions-center,
.eco-cta-actions,
.eco-gallery-actions,
.eco-404-actions,
.eco-thankyou-actions,
.eco-empty-actions,
.eco-listing-cta-actions,
.eco-home-tours .eco-section-cta,
.eco-why .eco-section-cta,
.eco-testimonials .eco-section-cta,
.eco-home-blog .eco-section-cta,
.eco-related-tours .eco-section-cta,
.eco-form-fallback .eco-section-actions {
	justify-content: center;
}

.eco-actions-stack {
	flex-direction: column;
}

.eco-actions-stack .tf-btn {
	justify-content: center;
	text-align: center;
	width: 100%;
}

/* --------------------------------------------------------------------------
   2. Cabecera: teléfono directo y contraste sobre el hero
   -------------------------------------------------------------------------- */
.eco-header-phone {
	color: var(--eco-secondary);
	font-size: 15px;
	font-weight: 600;
	gap: 8px;
	text-decoration: none;
	white-space: nowrap;
}

.eco-header-phone .icon {
	color: var(--eco-button);
	font-size: 18px;
}

.eco-header-phone:hover,
.eco-header-phone:focus-visible {
	color: var(--eco-button);
}

/* Cabecera: fondo sólido de marca en todo el sitio, transparente solo sobre el
   hero de la portada. Así el logo claro y el menú blanco se leen siempre, con
   un único logo en Ajustes del Sitio en vez de uno por tipo de fondo. */
#header {
	background-color: var(--eco-secondary);
	position: sticky;
	top: 0;
	z-index: 100;
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

#header .header-wrap,
#header .header-wrap a:not(.tf-btn),
#header .eco-header-phone,
#header .eco-header-phone .icon,
#header .toggle-mobile {
	color: var(--white);
}

#header .menu-nav .sub-menu a,
#header .mobile-menu a {
	color: var(--heading-color);
}

/* El desplegable pinta el fondo de azul al pasar por encima y la plantilla ya
   pone el texto en blanco, pero su regla lleva tres clases y la de arriba lleva
   un ID: ganaba la mía y el texto se quedaba azul sobre azul, ilegible. Se
   repite aquí con la misma fuerza. También en foco, que se navega con teclado. */
#header .menu-nav .sub-menu a:hover,
#header .menu-nav .sub-menu a:focus-visible,
#header .menu-nav .sub-menu a:hover.active {
	color: var(--white);
}

#header .mobile-menu a:hover,
#header .mobile-menu a:focus-visible {
	color: var(--eco-button);
}

#header.scrolled {
	box-shadow: 0 4px 20px rgba(var(--eco-secondary-rgb), 0.18);
}

/* El icono del menú móvil medía 24x24: muy poco para el dedo. Se le da un área
   táctil de 44x44 (mínimo recomendado) sin agrandar el icono, con margen
   negativo para que no desplace el resto de la cabecera.

   SOLO en pantallas sin menú completo: la regla anterior no llevaba media
   query y, al ganar por el ID, mostraba los nueve puntos también en
   escritorio, donde el menú entero ya está a la vista. */
@media (max-width: 991px) {
	#header .toggle-mobile {
		align-items: center;
		display: flex;
		height: 44px;
		justify-content: center;
		margin-right: -10px;
		width: 44px;
	}
}

@media (min-width: 992px) {
	#header .toggle-mobile {
		display: none;
	}
}

#header .close-btn {
	height: 44px;
	width: 44px;
}

/* El logo se sube a resolución alta pero se muestra a una altura fija, para que
   la cabecera mida siempre lo mismo (--eco-header-h) sea cual sea la imagen.
   A 46px el wordmark no se leía ("el logo le dejaste enano"): sube a 64 en
   escritorio y baja por escalones donde el sitio se aprieta. */
#header .logo img {
	height: 64px;
	max-height: 64px;
	object-fit: contain;
	width: auto;
}

/* El aire del logo baja de 14 a 12px para que 64 + 24 dé los 88px exactos de
   --eco-header-h: con 92 reales, la portada —que compensa 88— dejaba una
   línea blanca asomando arriba. */
#header .header-ct-left {
	padding-bottom: 12px;
	padding-top: 12px;
}

@media (min-width: 992px) and (max-width: 1199px) {
	#header .logo img {
		height: 56px;
		max-height: 56px;
	}
}

@media (max-width: 991px) {
	#header .logo img {
		height: 48px;
		max-height: 48px;
	}
}

.footer-logo img {
	height: 54px;
	object-fit: contain;
	width: auto;
}

.mobile-menu .logo img {
	height: 42px;
	object-fit: contain;
	width: auto;
}

/* En la portada el hero sube por debajo de la cabecera, que queda transparente
   hasta que se hace scroll. */
body.home:has(.eco-hero) #header:not(.scrolled) {
	background-color: transparent;
}

/* --------------------------------------------------------------------------
   3. Portada — hero
   -------------------------------------------------------------------------- */
.eco-hero {
	background-color: var(--eco-secondary);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	margin-top: calc(var(--eco-header-h) * -1);
	min-height: min(88vh, 820px);
	overflow: hidden;
	padding: calc(var(--eco-header-h) + 88px) 0 96px;
	position: relative;
}

.eco-hero-media {
	inset: 0;
	position: absolute;
	z-index: 0;
}

.eco-hero-media img,
.eco-hero-media video {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* El texto del hero se apoya abajo (justify-content: flex-end), así que el velo
   debe ser fuerte en la franja inferior. Con el 32 % del tramo intermedio, una
   foto clara dejaba el titular blanco en ~2,3:1. Se mantiene el centro ligero
   para que la foto respire y se refuerza donde de verdad hay texto. */
/* Dos capas en vez de un velo plano: una elipse suave que protege justo la zona
   del texto, y un degradado vertical mucho más ligero para la cabecera y el
   borde inferior. Así el vídeo conserva su color en las zonas despejadas sin
   que el titular blanco pierda legibilidad. */
/* El cliente pedía menos color y más foto. El velo baja de 0,52+0,42 a
   0,34+0,26 y pasa de azul de marca a un gris azulado oscuro (#0B1F2E), que
   apaga menos el color de la imagen a igual oscurecimiento. Para no perder
   legibilidad, la sombra del texto de más abajo sube a la vez. */
.eco-hero::after {
	background:
		radial-gradient(
			ellipse 88% 62% at 50% 52%,
			rgba(11, 31, 46, 0.34) 0%,
			rgba(11, 31, 46, 0.18) 55%,
			rgba(11, 31, 46, 0) 78%
		),
		linear-gradient(
			180deg,
			rgba(11, 31, 46, 0.26) 0%,
			rgba(11, 31, 46, 0.08) 34%,
			rgba(11, 31, 46, 0.1) 62%,
			rgba(11, 31, 46, 0.42) 100%
		);
	content: "";
	inset: 0;
	position: absolute;
	z-index: 1;
}

/* La cabecera es transparente sobre el hero: un realce mínimo asegura que el
   menú se lea aunque la foto tenga cielo blanco en la parte superior. */
body.home:has(.eco-hero) #header:not(.scrolled) .header-wrap {
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Con el velo más ligero, la sombra del texto pasa a ser la red de seguridad
   frente a los fotogramas claros del vídeo. */
.eco-hero-title,
.eco-hero-subtitle,
.eco-hero-content .eco-trust-list li {
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.62), 0 1px 3px rgba(0, 0, 0, 0.5);
}

.eco-hero > .container {
	position: relative;
	z-index: 2;
}

.eco-hero-content {
	max-width: 730px;
}

.eco-hero-title {
	color: var(--white);
	font-size: clamp(34px, 5vw, 60px);
	line-height: 1.08;
	margin: 0 0 18px;
}

.eco-hero-subtitle {
	color: var(--white);
	font-size: 18px;
	line-height: 1.6;
	margin: 0 0 26px;
	max-width: 620px;
	opacity: 0.94;
}

/* En el hero los botones van pegados al texto, sin el margen de cierre. */
.eco-hero .eco-hero-actions {
	gap: 14px;
	margin-top: 0;
}

/* --------------------------------------------------------------------------
   4. Portada — resto de secciones
   -------------------------------------------------------------------------- */
/* Los tours destacados pesan más que el resto de la página. */
.eco-home-tours .box-title .title {
	font-size: clamp(32px, 3.4vw, 48px);
}

.eco-why {
	background-color: var(--eco-accent);
}

.eco-why .box-icon-benefits {
	gap: 20px;
	height: 100%;
	padding: 36px 26px;
	text-align: center;
}

.eco-why .box-icon-benefits .wrap-icon img {
	height: 40px;
	object-fit: contain;
	width: 40px;
}

.eco-why .box-icon-benefits .name {
	margin: 0 0 8px;
}

.eco-why .box-icon-benefits .desc {
	margin: 0;
}

.eco-home-blog {
	background-color: var(--eco-accent);
}

/* Testimonios ------------------------------------------------------------- */
.eco-testimonial {
	background-color: var(--white);
	border: 1px solid var(--stoke-color);
	border-radius: var(--eco-radius);
	display: flex;
	flex-direction: column;
	gap: 14px;
	height: 100%;
	margin: 0;
	padding: 28px;
}

.eco-testimonial-stars {
	color: var(--star-color);
	font-size: 15px;
	letter-spacing: 2px;
}

.eco-testimonial-text {
	border: 0;
	color: var(--text-color);
	font-size: 16px;
	line-height: 1.65;
	margin: 0;
	padding: 0;
	quotes: none;
}

.eco-testimonial-author {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: auto;
}

.eco-testimonial-name {
	color: var(--eco-secondary);
	font-weight: 700;
}

.eco-testimonial-origin {
	color: var(--text-color);
	font-size: 14px;
}

/* --------------------------------------------------------------------------
   5. Carruseles y flechas (definición única para galería, testimonios
      y tours relacionados)
   -------------------------------------------------------------------------- */
.eco-sw-wrap,
.eco-cards-wrap,
.eco-gallery-wrap {
	position: relative;
}

.eco-sw-cards,
.eco-sw-gallery {
	overflow: hidden;
	width: 100%;
}

.eco-sw-cards .swiper-slide,
.eco-sw-gallery .swiper-slide {
	height: auto;
}

/* Las tarjetas del carrusel igualan altura dentro de cada diapositiva. */
.eco-sw-cards .swiper-slide > * {
	height: 100%;
}

.eco-sw-gallery .swiper-pagination {
	margin-top: 14px;
	position: static;
}

.eco-nav-prev,
.eco-nav-next {
	align-items: center;
	background-color: var(--white);
	border: 1px solid var(--eco-primary);
	border-radius: 50%;
	color: var(--eco-secondary);
	cursor: pointer;
	display: inline-flex;
	flex-shrink: 0;
	font-size: 16px;
	height: 44px;
	justify-content: center;
	padding: 0;
	transition: background-color 0.25s ease, transform 0.25s ease;
	width: 44px;
	z-index: 3;
}

/* Sobre el celeste de marca el texto va en secundario, nunca en blanco. */
.eco-nav-prev:hover,
.eco-nav-next:hover,
.eco-nav-prev:focus-visible,
.eco-nav-next:focus-visible {
	background-color: var(--eco-primary);
	color: var(--eco-secondary);
}

.eco-nav-prev.swiper-button-disabled,
.eco-nav-next.swiper-button-disabled {
	opacity: 0.35;
	pointer-events: none;
}

/* Flechas superpuestas al carrusel (hijas directas del envoltorio).
   Se mantienen dentro del contenedor para no provocar desbordes. */
.eco-sw-wrap > .eco-nav-prev,
.eco-sw-wrap > .eco-nav-next,
.eco-cards-wrap > .eco-nav-prev,
.eco-cards-wrap > .eco-nav-next,
.eco-gallery-wrap > .eco-nav-prev,
.eco-gallery-wrap > .eco-nav-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.eco-sw-wrap > .eco-nav-prev,
.eco-cards-wrap > .eco-nav-prev,
.eco-gallery-wrap > .eco-nav-prev {
	left: 8px;
}

.eco-sw-wrap > .eco-nav-next,
.eco-cards-wrap > .eco-nav-next,
.eco-gallery-wrap > .eco-nav-next {
	right: 8px;
}

.eco-sw-wrap > .eco-nav-prev:hover,
.eco-sw-wrap > .eco-nav-next:hover,
.eco-cards-wrap > .eco-nav-prev:hover,
.eco-cards-wrap > .eco-nav-next:hover,
.eco-gallery-wrap > .eco-nav-prev:hover,
.eco-gallery-wrap > .eco-nav-next:hover {
	transform: translateY(-50%) scale(1.06);
}

/* Flechas en línea, junto al título del bloque (tours relacionados). */
.eco-cards-nav {
	display: flex;
	gap: 10px;
}

.eco-cards-nav .eco-nav-prev:hover,
.eco-cards-nav .eco-nav-next:hover {
	transform: scale(1.06);
}

/* --------------------------------------------------------------------------
   6. Tarjetas: tour, artículo y precios
   -------------------------------------------------------------------------- */
.eco-tour-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.eco-tour-card .archive-bottom {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

.eco-tour-card .images-group img {
	aspect-ratio: 4 / 3;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.eco-tour-card .content-bottom {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
	margin-top: auto;
}

.eco-price-from {
	color: var(--text-color);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Era texto muerto: decía "pregunta el precio" y no se podía pulsar. Ahora
   lleva a WhatsApp con el nombre del tour, o a la web propia del destino
   cuando la hay. Se subraya al pasar para que se vea que es pulsable. */
.eco-price-ask {
	color: var(--eco-secondary);
	font-size: 16px;
	font-weight: 600;
}

a.eco-price-ask {
	text-decoration: underline;
	text-underline-offset: 3px;
}

a.eco-price-ask:hover,
a.eco-price-ask:focus-visible {
	color: var(--eco-button);
}

.eco-post-card {
	background-color: var(--white);
	border: 1px solid var(--stoke-color);
	border-radius: var(--eco-radius);
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
}

.eco-post-card .images-group img {
	aspect-ratio: 3 / 2;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.eco-post-card-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 10px;
	padding: 22px 24px 24px;
}

.eco-post-card-body h3 {
	margin: 0;
}

.eco-post-card-body h3 .link:hover {
	color: var(--eco-button);
}

.eco-post-card-body p {
	color: var(--text-color);
	margin: 0;
}

/* La fecha de la tarjeta no lleva el filete de la ficha de entrada. */
.eco-post-card .eco-post-meta {
	border: 0;
	color: var(--text-color);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.05em;
	margin: 0;
	padding: 0;
	text-transform: uppercase;
}

.eco-read-more {
	align-items: center;
	color: var(--eco-button);
	display: inline-flex;
	font-weight: 600;
	gap: 6px;
	margin-top: auto;
	padding-top: 4px;
	text-decoration: none;
}

.eco-read-more:hover,
.eco-read-more:focus-visible {
	color: var(--eco-button-hover);
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   7. Cabecera de páginas interiores (eco_page_hero)
      Va debajo de la cabecera transparente, nunca por detrás: así el menú
      conserva su texto oscuro sobre fondo claro.
   -------------------------------------------------------------------------- */
.eco-page-hero {
	background-color: var(--eco-accent);
	padding: 48px 0 56px;
	position: relative;
}

.eco-page-hero > .container {
	position: relative;
	z-index: 1;
}

.eco-page-hero .breadcrumb-content {
	margin-bottom: 18px;
}

.eco-page-hero-title {
	color: var(--eco-secondary);
	font-size: clamp(30px, 4vw, 48px);
	line-height: 1.12;
	margin: 0;
}

.eco-page-hero-subtitle {
	color: var(--text-color);
	font-size: 18px;
	line-height: 1.6;
	margin: 14px 0 0;
	max-width: 720px;
}

.eco-page-hero.has-image {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 76px 0 84px;
}

/* El velo tiene que garantizar el contraste del texto blanco sea cual sea la
   foto que suba el cliente, incluidas las muy claras (nieve, cielo, playa).
   Con el 55 % anterior, sobre una zona blanca el ratio caía a ~2,2:1. Al 72 %
   como mínimo se mantiene por encima de 4,5:1 en el peor caso. */
.eco-page-hero.has-image::before {
	background: linear-gradient(
		180deg,
		rgba(var(--eco-secondary-rgb), 0.72) 0%,
		rgba(var(--eco-secondary-rgb), 0.88) 100%
	);
	content: "";
	inset: 0;
	position: absolute;
}

.eco-page-hero.has-image .eco-page-hero-title,
.eco-page-hero.has-image .eco-page-hero-subtitle,
.eco-page-hero.has-image .breadcrumb,
.eco-page-hero.has-image .breadcrumb a,
.eco-page-hero.has-image .breadcrumb .current {
	color: var(--white);
	/* Refuerzo adicional para fotos con zonas muy claras justo tras el texto. */
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.eco-page-hero.has-image .breadcrumb a:hover {
	color: var(--eco-primary);
}

/* --------------------------------------------------------------------------
   8. Sección de llamada final (eco_cta_section)
   -------------------------------------------------------------------------- */
.eco-cta-section {
	background-color: var(--eco-accent);
	padding: 72px 0;
	position: relative;
}

.eco-cta-section.has-image {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

/* Era un velo plano al 74 % de azul: la foto quedaba anulada. Ahora es un
   degradado que deja ver la imagen arriba y protege el texto abajo. */
.eco-cta-section.has-image::before {
	background: linear-gradient(
		180deg,
		rgba(11, 31, 46, 0.3) 0%,
		rgba(11, 31, 46, 0.52) 100%
	);
	content: "";
	inset: 0;
	position: absolute;
}

.eco-cta-section.has-image .eco-cta-inner {
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

.eco-cta-section > .container {
	position: relative;
	z-index: 1;
}

.eco-cta-inner {
	margin: 0 auto;
	max-width: 760px;
	text-align: center;
}

.eco-cta-title {
	color: var(--eco-secondary);
	font-size: clamp(28px, 3.4vw, 42px);
	line-height: 1.15;
	margin: 0 0 14px;
}

.eco-cta-text {
	color: var(--text-color);
	font-size: 17px;
	line-height: 1.65;
	margin: 0 auto;
	max-width: 620px;
}

.eco-cta-section.has-image .eco-cta-title,
.eco-cta-section.has-image .eco-cta-text {
	color: var(--white);
}

/* --------------------------------------------------------------------------
   9. Página de tour (single-tour.php)
   -------------------------------------------------------------------------- */
.eco-tour-hero .box-info {
	margin-bottom: 24px;
}

.eco-tour-subtitle {
	color: rgba(var(--eco-secondary-rgb), 0.9);
	font-size: 18px;
	margin-top: 10px;
	max-width: 760px;
}

.eco-tour-meta {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 14px 28px;
	margin-top: 18px;
}

.eco-tour-meta-item {
	align-items: center;
	display: flex;
	gap: 8px;
}

/* Ojo: --eco-accent es el crema de marca, un color de FONDO. Sobre blanco da
   1,1:1, o sea invisible. Todos los iconos que van sobre blanco usan el azul
   de marca (7,6:1). */
.eco-tour-meta-item .icon {
	color: var(--eco-secondary);
	font-size: 18px;
}

.eco-tour-price {
	align-items: baseline;
	flex-wrap: wrap;
}

/* El precio va sobre fondo blanco, así que NO puede usar el crema de marca
   (--eco-accent), que es un color de fondo: daba 1,15:1, es decir, invisible.
   En azul de marca son 7,6:1 y además es el número que decide la compra. */
.eco-tour-price .value {
	color: var(--eco-secondary);
	margin: 0;
}

.eco-tour-price .note,
.eco-tour-meta .subtitle {
	color: rgba(var(--eco-secondary-rgb), 0.88);
}

/* Estrellas --------------------------------------------------------------- */
/* Naranja de valoración, la convención de todo el sector. La cifra numérica se
   muestra siempre al lado, así que la puntuación no depende solo del color. */
.eco-rating-stars {
	color: var(--star-color);
	display: inline-flex;
	gap: 2px;
}

.eco-rating-stars .icon-star {
	font-family: "icomoon";
	font-size: 14px;
	font-style: normal;
}

.eco-rating-stars .icon-star.empty {
	opacity: 0.28;
}

.eco-rating-score {
	font-weight: 700;
}

/* Galería ----------------------------------------------------------------- */
.eco-tour-gallery {
	margin-bottom: 40px;
}

.eco-gallery-item {
	border-radius: var(--eco-radius);
	display: block;
	overflow: hidden;
}

.eco-gallery-item img {
	aspect-ratio: 3 / 2;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

/* Bullets rápidos y ficha del tour ---------------------------------------- */
.eco-tour-bullets {
	display: grid;
	gap: 10px 24px;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	margin: 0 0 24px;
	padding: 0;
}

.eco-tour-bullets li {
	align-items: flex-start;
	display: flex;
	gap: 10px;
	list-style: none;
}

.eco-tour-bullets .icon-check,
.eco-feature-list .icon-check,
.eco-sidebar-bullets .icon-check {
	color: var(--eco-secondary);
	flex: 0 0 auto;
	margin-top: 3px;
}

/* Ficha técnica del tour: una fila por dato, de arriba abajo, con separador
   fino. Antes usaba los iconos de fuente de la plantilla (tamaños dispares,
   caja crema mostaza); ahora van los trazos propios sobre un chip con el
   azul de marca al 8%, todos del mismo tamaño. */
.eco-tour-facts {
	border-top: var(--eco-hairline);
	display: flex;
	flex-direction: column;
	margin: 0 0 24px;
	padding: 0;
}

.eco-tour-facts .item {
	align-items: flex-start;
	border-bottom: var(--eco-hairline);
	display: flex;
	gap: 14px;
	list-style: none;
	padding: 14px 0;
}

.eco-tour-facts .eco-fact-icono {
	align-items: center;
	background-color: rgba(var(--eco-secondary-rgb), 0.08);
	border-radius: 12px;
	display: flex;
	flex: 0 0 44px;
	height: 44px;
	justify-content: center;
	width: 44px;
}

.eco-tour-facts .eco-fact-icono .eco-svg {
	color: var(--eco-secondary);
	height: 22px;
	width: 22px;
}

.eco-tour-facts .content .label {
	display: block;
	margin-bottom: 2px;
}

.eco-tour-facts .content .value {
	margin: 0;
}

/* Incluye / no incluye / qué llevar --------------------------------------- */
.eco-feature-title {
	margin-bottom: 12px;
}

.eco-feature-list {
	margin: 0;
	padding: 0;
}

.eco-feature-list .feature-item {
	align-items: flex-start;
	display: flex;
	gap: 10px;
	list-style: none;
	margin-bottom: 10px;
}

.eco-feature-list.is-excluded .icon-X {
	color: rgba(var(--eco-secondary-rgb), 0.45);
	flex: 0 0 auto;
	margin-top: 3px;
}

.eco-bring-box {
	background-color: rgba(var(--eco-primary-rgb), 0.14);
	border-radius: var(--eco-radius);
	margin-top: 24px;
	padding: 20px 24px;
}

.eco-bring-box .eco-feature-title,
.eco-bring-box .subtitle {
	color: var(--eco-secondary);
}

/* Mapas (ficha del tour y oficina) ---------------------------------------- */
.eco-map-embed iframe,
.eco-office-map-frame iframe {
	border: 0;
	border-radius: var(--eco-radius);
	display: block;
	height: 420px;
	width: 100%;
}

/* El mapa de la oficina es de ancho completo: sin esquinas redondeadas. */
.eco-office-map-frame iframe {
	border-radius: 0;
	height: clamp(300px, 46vw, 520px);
}

/* Reseñas ----------------------------------------------------------------- */
.eco-reviews-summary {
	align-items: center;
	background-color: rgba(var(--eco-primary-rgb), 0.14);
	border-radius: var(--eco-radius);
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 24px;
	padding: 16px 20px;
}

.eco-reviews-summary .eco-rating-score,
.eco-reviews-summary .subtitle {
	color: var(--eco-secondary);
	margin: 0;
}

.eco-reviews-list {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	margin: 0;
	padding: 0;
}

.eco-review-item {
	border: var(--eco-hairline);
	border-radius: var(--eco-radius);
	list-style: none;
	padding: 20px 22px;
}

.eco-review-text {
	border: 0;
	margin: 10px 0 14px;
	padding: 0;
}

.eco-review-author .name {
	display: block;
	font-weight: 700;
}

/* Formulario de reserva --------------------------------------------------- */
.eco-booking-fallback {
	border: 1px dashed rgba(var(--eco-secondary-rgb), 0.25);
	border-radius: var(--eco-radius);
	padding: 24px;
}

/* Barra lateral fija ------------------------------------------------------ */
.eco-tour-sidebar {
	position: sticky;
	top: 100px;
}

.eco-sidebar-box {
	border: var(--eco-hairline);
	border-radius: var(--eco-radius);
	margin-bottom: 20px;
	padding: 24px;
}

.eco-sidebar-price {
	border-bottom: var(--eco-hairline);
	margin-bottom: 18px;
	padding-bottom: 18px;
}

.eco-sidebar-price .label,
.eco-sidebar-price .note {
	display: block;
}

.eco-sidebar-price .value {
	color: var(--eco-secondary);
	display: block;
	font-size: 38px;
	font-weight: 700;
	line-height: 1.1;
}

.eco-sidebar-bullets {
	margin: 0 0 20px;
	padding: 0;
}

.eco-sidebar-bullets li {
	align-items: flex-start;
	display: flex;
	gap: 10px;
	list-style: none;
	margin-bottom: 8px;
}

.eco-sidebar-actions {
	display: grid;
	gap: 10px;
}

/* Quién opera el tour y dónde se paga, bajo los botones de la tarjeta: el
   cliente pidió que la operación directa quedara dicha en la ficha. */
.eco-sidebar-nota {
	font-size: 13px;
	line-height: 1.5;
	margin: 14px 0 0;
	text-align: center;
}

.eco-sidebar-actions .tf-btn {
	justify-content: center;
	text-align: center;
	width: 100%;
}

/* --------------------------------------------------------------------------
   10. Listado de tours (archive-tour.php / taxonomy-destination.php)
   -------------------------------------------------------------------------- */
.eco-filter-bar {
	margin-bottom: 32px;
}

.eco-filter-list,
.eco-filter-sublist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.eco-filter-list {
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: 14px 16px;
}

.eco-filter-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.eco-filter-sublist {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.eco-filter-link {
	align-items: center;
	border: 1px solid var(--eco-primary);
	border-radius: 999px;
	color: var(--eco-secondary);
	display: inline-flex;
	font-size: 14px;
	font-weight: 600;
	gap: 8px;
	line-height: 1.2;
	padding: 10px 18px;
	text-decoration: none;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

/* Sobre el celeste, texto secundario (regla de contraste). */
/* Al señalar: celeste de marca con texto azul (4,4:1, suficiente para un estado
   pasajero que además cambia por movimiento del ratón). */
.eco-filter-link:hover,
.eco-filter-link:focus-visible {
	background-color: var(--eco-primary);
	border-color: var(--eco-primary);
	color: var(--eco-secondary);
}

/* El filtro activo se invierte: azul sólido con texto blanco. Da 7,6:1 —el
   celeste con texto azul se quedaba en 4,4— y además el estado seleccionado
   se distingue del simple "ratón encima". */
.eco-filter-link.is-active {
	background-color: var(--eco-secondary);
	border-color: var(--eco-secondary);
	color: var(--white);
}

/* Padre del término activo. */
.eco-filter-link.is-open {
	border-color: var(--eco-secondary);
}

.eco-filter-child {
	border-style: dashed;
	font-size: 13px;
	font-weight: 500;
	padding: 7px 14px;
}

.eco-filter-count {
	font-size: 12px;
	font-weight: 500;
	opacity: 0.7;
}

/* Selector de destino para móvil (se cambia por la lista en escritorio). */
.eco-filter-nav {
	display: none;
}

.eco-filter-select {
	background-color: transparent;
	border: 1px solid var(--eco-primary);
	border-radius: 8px;
	color: var(--eco-secondary);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	max-width: min(420px, 100%);
	padding: 12px 16px;
	width: 100%;
}

/* Recuento, rejilla y cierre del listado ---------------------------------- */
.eco-listing-count {
	font-size: 15px;
	margin: 0 0 20px;
	opacity: 0.75;
}

.eco-tours-grid {
	margin-bottom: 8px;
}

.eco-listing-cta {
	border-top: 1px solid var(--eco-primary);
	margin-top: 48px;
	padding-top: 32px;
	text-align: center;
}

.eco-listing-cta p {
	margin-bottom: 20px;
}

/* Estado vacío (listados, blog y búsqueda) — definición única. */
.eco-empty-state {
	border: 1px dashed var(--eco-primary);
	border-radius: 12px;
	margin: 0 auto;
	max-width: 640px;
	padding: 48px 24px;
	text-align: center;
}

.eco-empty-state p {
	margin: 12px 0 24px;
}

/* Descripción larga del destino ------------------------------------------- */
.eco-term-intro-section {
	padding-bottom: 0;
}

.eco-term-intro {
	max-width: 820px;
}

.eco-term-intro p:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   11. Sobre nosotros, Contacto y Preguntas frecuentes
   -------------------------------------------------------------------------- */
.eco-story-media {
	border-radius: var(--eco-radius);
	overflow: hidden;
}

.eco-story-media img {
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

/* Fila destacada de cifras. Se invierte: fondo azul de marca, cifras en celeste
   y etiquetas en blanco. Los tres son colores de Ecosportour y así el bloque
   contrasta de sobra; con el celeste de fondo, cualquier texto legible obligaba
   a inventar un tono que no está en la paleta. */
.eco-figures-band {
	background-color: var(--eco-secondary);
	color: var(--white);
	padding: 56px 0;
}

.eco-figures-grid {
	display: grid;
	gap: 28px 24px;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	text-align: center;
}

.eco-figure-number {
	color: var(--eco-primary);
	display: block;
	font-size: clamp(34px, 5vw, 54px);
	font-weight: 700;
	line-height: 1;
}

.eco-figure-text {
	color: var(--white);
	display: block;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	margin-top: 10px;
	opacity: 0.9;
}

/* Equipo ------------------------------------------------------------------ */
.eco-team .box-title {
	margin-bottom: 40px;
}

.eco-team-member .eco-team-bio {
	font-size: 15px;
	line-height: 1.6;
	margin: 0;
}

.eco-team-member .eco-team-langs {
	align-items: center;
	color: rgba(var(--eco-secondary-rgb), 0.88);
	display: flex;
	font-size: 14px;
	gap: 8px;
	margin: 0;
}

.eco-team-member .eco-team-langs .icon {
	color: var(--eco-button);
	font-size: 15px;
}

/* Contacto — tarjetas de datos ------------------------------------------- */
.eco-contact-cards {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.eco-contact-card {
	align-items: flex-start;
	background-color: rgba(var(--eco-primary-rgb), 0.07);
	border: var(--eco-hairline);
	border-radius: var(--eco-radius);
	display: flex;
	gap: 16px;
	padding: 24px;
	transition: border-color 0.25s ease, transform 0.25s ease;
}

.eco-contact-card:hover {
	border-color: var(--eco-primary);
	transform: translateY(-3px);
}

.eco-contact-icon {
	align-items: center;
	background-color: var(--eco-primary);
	border-radius: 50%;
	color: var(--eco-secondary);
	display: flex;
	flex-shrink: 0;
	font-size: 20px;
	height: 48px;
	justify-content: center;
	width: 48px;
}

.eco-contact-body {
	min-width: 0;
}

.eco-contact-label {
	color: rgba(var(--eco-secondary-rgb), 0.88);
	display: block;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	margin-bottom: 6px;
	text-transform: uppercase;
}

.eco-contact-value {
	color: var(--eco-secondary);
	display: block;
	font-weight: 600;
	line-height: 1.45;
	overflow-wrap: anywhere;
}

a.eco-contact-value:hover,
a.eco-contact-value:focus-visible {
	color: var(--eco-button);
}

/* Contacto — formulario y alternativa ------------------------------------ */
.eco-form-panel {
	margin-left: auto;
	margin-right: auto;
	max-width: 880px;
}

.eco-form-panel .box-title {
	margin-bottom: 28px;
	text-align: center;
}

/* El plan B ya no es una caja dentro de otra: las tres vías van directas sobre
   la tarjeta blanca. La caja con fondo y borde era de cuando el plan B eran
   solo tres botones sueltos y necesitaba delimitarse. */
.eco-form-fallback {
	margin: 0;
}

.eco-office-map .box-title {
	margin-bottom: 24px;
	text-align: center;
}

.eco-office-map {
	padding-bottom: 80px;
}

/* Preguntas frecuentes ---------------------------------------------------- */
.wg-faq .box-faq {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* El disparador del acordeón es un <button> (accesible con teclado). */
.wg-faq .faq-item .faq-top {
	background-color: transparent;
	border: 0;
	color: inherit;
	cursor: pointer;
	font: inherit;
	padding: 0;
	text-align: left;
	width: 100%;
}

.wg-faq .faq-item .faq-top .question-title {
	margin: 0;
}

.wg-faq .faq-item .faq-top[aria-expanded="true"] {
	padding-bottom: 12px;
}

.wg-faq .faq-item .faq-top[aria-expanded="true"] .question-title,
.wg-faq .faq-item .faq-top[aria-expanded="true"] .icon {
	color: var(--eco-button);
}

.wg-faq .faq-item .faq-top[aria-expanded="true"] .icon {
	transform: rotate(180deg);
}

.eco-faq-aside {
	background-color: rgba(var(--eco-primary-rgb), 0.09);
	border: var(--eco-hairline);
	border-radius: var(--eco-radius);
	padding: 32px;
	position: sticky;
	top: 110px;
}

.eco-faq-aside h2 {
	margin-bottom: 12px;
}

.eco-faq-aside p {
	margin-bottom: 0;
}

.eco-faq-contact {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
}

.eco-faq-contact li {
	align-items: center;
	display: flex;
	gap: 10px;
	margin-bottom: 10px;
}

.eco-faq-contact li:last-child {
	margin-bottom: 0;
}

.eco-faq-contact .icon {
	color: var(--eco-button);
	font-size: 16px;
}

.eco-faq-contact a {
	color: var(--eco-secondary);
	font-weight: 600;
	overflow-wrap: anywhere;
}

.eco-faq-contact a:hover {
	color: var(--eco-button);
}

/* --------------------------------------------------------------------------
   12. Blog: contenido del editor, meta, comentarios
   -------------------------------------------------------------------------- */
.eco-entry-content {
	overflow-wrap: break-word;
}

.eco-entry-content > *:first-child {
	margin-top: 0;
}

.eco-entry-content > *:last-child {
	margin-bottom: 0;
}

.eco-entry-content p,
.eco-entry-content li {
	line-height: 1.75;
}

.eco-entry-content p {
	margin-bottom: 1.25em;
}

.eco-entry-content h2,
.eco-entry-content h3,
.eco-entry-content h4,
.eco-entry-content h5 {
	color: var(--eco-secondary);
	margin-bottom: 0.6em;
	margin-top: 1.6em;
}

.eco-entry-content a {
	color: var(--eco-button);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.eco-entry-content a:hover {
	color: var(--eco-button-hover);
}

.eco-entry-content ul,
.eco-entry-content ol {
	margin: 0 0 1.25em;
	padding-left: 1.35em;
}

.eco-entry-content li {
	margin-bottom: 0.5em;
}

.eco-entry-content li::marker {
	color: var(--eco-primary);
}

.eco-entry-content img,
.eco-entry-content iframe,
.eco-entry-content video {
	border-radius: var(--eco-radius);
	height: auto;
	max-width: 100%;
}

.eco-entry-content figure {
	margin: 2em 0;
}

.eco-entry-content figcaption {
	color: var(--text-color);
	font-size: 14px;
	margin-top: 0.6em;
	text-align: center;
}

.eco-entry-content blockquote {
	border-left: 4px solid var(--eco-primary);
	font-size: 18px;
	font-style: italic;
	margin: 2em 0;
	padding: 0.25em 0 0.25em 1.25em;
}

/* Las tablas del editor se desplazan dentro de su caja, nunca la página. */
.eco-entry-content .wp-block-table,
.eco-entry-content figure.wp-block-table {
	overflow-x: auto;
}

.eco-entry-content table {
	border-collapse: collapse;
	margin-bottom: 1.5em;
	width: 100%;
}

.eco-entry-content th,
.eco-entry-content td {
	border: 1px solid rgba(var(--eco-secondary-rgb), 0.14);
	padding: 10px 14px;
	text-align: left;
}

.eco-entry-content th {
	background-color: var(--eco-accent);
}

.eco-entry-content pre {
	background-color: var(--eco-accent);
	border-radius: 12px;
	overflow-x: auto;
	padding: 16px 18px;
}

/* Enlaces de páginas internas (wp_link_pages) ----------------------------- */
.eco-page-links {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 32px;
}

.eco-page-links-label {
	font-weight: 600;
}

.eco-page-links a,
.eco-page-links > span:not(.eco-page-links-label) {
	border: 1px solid rgba(var(--eco-secondary-rgb), 0.18);
	border-radius: 8px;
	padding: 4px 12px;
}

.eco-page-links a:hover {
	border-color: var(--eco-button);
	color: var(--eco-button);
}

/* Meta de la entrada (solo la lista de la ficha, no la fecha de la tarjeta) */
ul.eco-post-meta {
	border-bottom: var(--eco-hairline);
	list-style: none;
	margin: 0 0 32px;
	padding: 0 0 24px;
}

ul.eco-post-meta .icon {
	color: var(--eco-button);
	font-size: 18px;
}

ul.eco-post-meta a {
	color: inherit;
}

ul.eco-post-meta a:hover {
	color: var(--eco-button);
}

/* Etiquetas --------------------------------------------------------------- */
.eco-post-tags {
	margin-top: 36px;
}

.eco-post-tags ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.eco-post-tags-label {
	color: var(--eco-secondary);
	font-weight: 600;
}

/* Navegación anterior / siguiente ----------------------------------------- */
.eco-post-nav {
	margin-top: 40px;
}

.eco-post-nav .link {
	display: inline-block;
	margin-top: 2px;
}

.eco-post-nav .link:hover {
	color: var(--eco-button);
}

/* Comentarios ------------------------------------------------------------- */
.eco-comments {
	margin-top: 56px;
}

.eco-comments-title {
	margin-bottom: 20px;
}

.eco-comment-list {
	list-style: none;
	margin: 0 0 40px;
	padding: 0;
}

.eco-comment-list ul.children {
	list-style: none;
	margin-top: 24px;
	padding-left: 32px;
}

.eco-comment-list li {
	margin-bottom: 24px;
}

.eco-comment-form .form-wg {
	margin-bottom: 18px;
}

.eco-comment-form .sub-ip {
	display: block;
	font-weight: 600;
	margin-bottom: 8px;
}

.eco-comment-form .form-control {
	max-width: 100%;
	width: 100%;
}

.eco-comment-form .comment-form-cookies-consent {
	align-items: center;
	display: flex;
	font-size: 14px;
	gap: 8px;
}

/* --------------------------------------------------------------------------
   13. Buscador, 404 y página de agradecimiento
   -------------------------------------------------------------------------- */
.eco-search-form {
	position: relative;
	width: 100%;
}

.eco-search-form .search-field {
	max-width: 100%;
	padding-right: 52px;
	width: 100%;
}

.eco-search-form .eco-search-submit {
	background: none;
	border: 0;
	bottom: 0;
	color: var(--eco-secondary);
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	padding: 0 14px;
	position: absolute;
	right: 0;
	top: 0;
}

.eco-search-form .eco-search-submit:hover {
	color: var(--eco-button);
}

.eco-search-top {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 16px 24px;
	justify-content: space-between;
}

.eco-search-top .eco-search-form {
	flex: 1 1 300px;
	max-width: 460px;
}

.eco-results-count {
	color: var(--eco-secondary);
	font-weight: 600;
	margin: 0;
}

/* Página 404 -------------------------------------------------------------- */
.eco-404 {
	text-align: center;
}

.eco-404-inner .breadcrumb-content,
.eco-404-inner .breadcrumb {
	justify-content: center;
}

.eco-404-inner .breadcrumb-content {
	margin-bottom: 28px;
}

/* El celeste sobre blanco daba 1,7:1 y el número no se leía. En azul de marca
   son 7,6:1 y funciona mejor como remate visual de la página. */
.eco-404-code {
	color: var(--eco-secondary);
	font-size: clamp(72px, 16vw, 150px);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1;
	margin: 0 0 8px;
}

.eco-404-title {
	margin-bottom: 16px;
}

.eco-404-text {
	margin: 0 auto 28px;
	max-width: 520px;
}

.eco-404-search {
	margin: 0 auto 28px;
	max-width: 460px;
}

/* Página de agradecimiento ------------------------------------------------ */
.eco-thankyou-icon {
	align-items: center;
	background-color: var(--eco-primary);
	border-radius: 50%;
	color: var(--eco-secondary);
	display: inline-flex;
	font-size: 30px;
	height: 84px;
	justify-content: center;
	margin-bottom: 24px;
	width: 84px;
}

.eco-thankyou-title {
	margin-bottom: 16px;
}

.eco-thankyou-text {
	margin: 0 auto 32px;
	max-width: 620px;
}

.eco-thankyou-next {
	background-color: var(--eco-accent);
	border-radius: var(--eco-radius);
	margin: 0 auto 32px;
	max-width: 560px;
	padding: 28px 32px;
	text-align: left;
}

.eco-thankyou-next h2 {
	margin-bottom: 14px;
}

.eco-next-steps {
	counter-reset: eco-step;
	list-style: none;
	margin: 0;
	padding: 0;
}

.eco-next-steps li {
	counter-increment: eco-step;
	line-height: 1.6;
	margin-bottom: 12px;
	padding-left: 42px;
	position: relative;
}

.eco-next-steps li:last-child {
	margin-bottom: 0;
}

.eco-next-steps li::before {
	align-items: center;
	background-color: var(--eco-primary);
	border-radius: 50%;
	color: var(--eco-secondary);
	content: counter(eco-step);
	display: flex;
	font-size: 13px;
	font-weight: 700;
	height: 26px;
	justify-content: center;
	left: 0;
	position: absolute;
	top: 1px;
	width: 26px;
}

.eco-thankyou-phone {
	font-size: 15px;
	margin: 0;
}

.eco-thankyou-phone a {
	color: var(--eco-button);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   14. Paginación (una sola definición para tours, blog y búsqueda)
   -------------------------------------------------------------------------- */
.eco-tours-listing .navigation.pagination,
.eco-blog-list .navigation.pagination,
.eco-search-results .navigation.pagination {
	margin-top: 32px;
}

.navigation.pagination .nav-links {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

.navigation.pagination .page-numbers {
	align-items: center;
	border: 1px solid rgba(var(--eco-secondary-rgb), 0.16);
	border-radius: 10px;
	display: inline-flex;
	font-weight: 600;
	height: 44px;
	justify-content: center;
	min-width: 44px;
	padding: 0 12px;
	text-decoration: none;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.navigation.pagination a.page-numbers:hover {
	border-color: var(--eco-button);
	color: var(--eco-button);
}

.navigation.pagination .page-numbers.current {
	background-color: var(--eco-button);
	border-color: var(--eco-button);
	color: var(--white);
}

.navigation.pagination .page-numbers.dots {
	border-color: transparent;
}

/* --------------------------------------------------------------------------
   15. Responsive. Puntos de control: 1400 / 1200 / 992 / 768 / 576 / 360.
   -------------------------------------------------------------------------- */

/* A partir de 1400 px sobra sitio para sacar las flechas del contenedor. */
@media (min-width: 1400px) {
	.eco-sw-wrap > .eco-nav-prev,
	.eco-cards-wrap > .eco-nav-prev {
		left: -22px;
	}

	.eco-sw-wrap > .eco-nav-next,
	.eco-cards-wrap > .eco-nav-next {
		right: -22px;
	}
}

/* En escritorio el filtro de destinos es una lista; en móvil, un select. */
@media (min-width: 992px) {
	.eco-filter-nav {
		display: block;
	}

	.eco-filter-mobile {
		display: none;
	}
}

@media (max-width: 1199px) {
	.eco-tour-sidebar {
		position: static;
	}
}

@media (max-width: 991px) {
	.eco-faq-aside {
		margin-top: 40px;
		position: static;
	}

	.eco-figures-band {
		padding: 44px 0;
	}

	.eco-contact-card {
		padding: 20px;
	}

	.eco-cta-section {
		padding: 56px 0;
	}
}

@media (max-width: 767px) {
	.eco-hero {
		min-height: 0;
		padding: calc(var(--eco-header-h) + 44px) 0 56px;
	}

	.eco-hero-subtitle {
		font-size: 16px;
	}

	.eco-page-hero {
		padding: 36px 0 40px;
	}

	.eco-page-hero.has-image {
		padding: 56px 0 60px;
	}

	.eco-page-hero-subtitle,
	.eco-tour-subtitle {
		font-size: 16px;
	}

	.eco-map-embed iframe {
		height: 300px;
	}

	.eco-sidebar-price .value {
		font-size: 32px;
	}

	.eco-thankyou-next {
		padding: 24px 20px;
	}

	.eco-form-fallback,
	.eco-faq-aside {
		padding: 24px 20px;
	}

	.eco-listing-cta {
		margin-top: 36px;
		padding-top: 24px;
	}

	.flat-blog-detail .post-navigation {
		gap: 20px;
		grid-template-columns: 1fr;
	}

	.flat-blog-detail .post-navigation .previous-post {
		padding-right: 0;
	}

	.flat-blog-detail .post-navigation .previous-post::after {
		display: none;
	}

	.flat-blog-detail .post-navigation .next-post {
		padding-left: 0;
		text-align: left;
	}
}

@media (max-width: 575px) {
	/* Los botones de la plantilla traen flex-shrink:0 y mucho padding:
	   en móvil ocupan la fila entera para que nada desborde. */
	.tf-btn {
		max-width: 100%;
		padding: 14px 20px;
	}

	.eco-section-cta .tf-btn,
	.eco-section-actions .tf-btn,
	.eco-cta-actions .tf-btn,
	.eco-hero-actions .tf-btn,
	.eco-404-actions .tf-btn,
	.eco-thankyou-actions .tf-btn,
	.eco-empty-actions .tf-btn,
	.eco-listing-cta-actions .tf-btn {
		flex: 1 1 100%;
		justify-content: center;
	}

	.eco-nav-prev,
	.eco-nav-next {
		height: 40px;
		width: 40px;
	}

	.eco-testimonial,
	.eco-review-item,
	.eco-sidebar-box {
		padding: 22px 20px;
	}

	.eco-post-card-body {
		padding: 20px;
	}

	.eco-comment-list ul.children {
		padding-left: 16px;
	}

	.eco-next-steps li {
		padding-left: 36px;
	}

	.eco-search-top {
		justify-content: flex-start;
	}
}

/* Pantallas de 360 px: se recortan los espacios y nada sobresale. */
@media (max-width: 380px) {
	.eco-hero {
		padding: calc(var(--eco-header-h) + 32px) 0 44px;
	}

	.eco-empty-state {
		padding: 32px 18px;
	}

	.eco-form-fallback,
	.eco-faq-aside,
	.eco-thankyou-next {
		padding: 20px 16px;
	}

	.eco-contact-card {
		gap: 12px;
		padding: 18px 16px;
	}

	.eco-filter-link {
		padding: 9px 14px;
	}

	.eco-tour-meta {
		gap: 10px 18px;
	}
}

/* Iconos de TikTok y YouTube ---------------------------------------------
   La tipografía de iconos de la plantilla no los trae (solo tiene facebook,
   instgram -sic-, tw, XLogo y linked), así que se dibujan con una máscara SVG.
   Al usar mask + currentColor heredan el color del sitio donde se pinten. */
.box-icon.eco-icon-tiktok::before,
.box-icon.eco-icon-youtube::before {
	background-color: currentColor;
	content: "";
	display: block;
	height: 17px;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	width: 17px;
}

.box-icon.eco-icon-tiktok::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M16.6%205.82a4.28%204.28%200%200%201-1.06-2.82h-3.09v12.4a2.59%202.59%200%201%201-2.59-2.59c.27%200%20.53.04.77.12v-3.1a5.69%205.69%200%201%200%204.92%205.63V9.01a7.35%207.35%200%200%200%204.3%201.38V7.3a4.28%204.28%200%200%201-3.25-1.48z%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M16.6%205.82a4.28%204.28%200%200%201-1.06-2.82h-3.09v12.4a2.59%202.59%200%201%201-2.59-2.59c.27%200%20.53.04.77.12v-3.1a5.69%205.69%200%201%200%204.92%205.63V9.01a7.35%207.35%200%200%200%204.3%201.38V7.3a4.28%204.28%200%200%201-3.25-1.48z%27%2F%3E%3C%2Fsvg%3E");
}

.box-icon.eco-icon-youtube::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M23.5%206.19a3.02%203.02%200%200%200-2.12-2.14C19.5%203.55%2012%203.55%2012%203.55s-7.5%200-9.38.5A3.02%203.02%200%200%200%20.5%206.19C0%208.08%200%2012%200%2012s0%203.92.5%205.81a3.02%203.02%200%200%200%202.12%202.14c1.88.5%209.38.5%209.38.5s7.5%200%209.38-.5a3.02%203.02%200%200%200%202.12-2.14C24%2015.92%2024%2012%2024%2012s0-3.92-.5-5.81zM9.55%2015.57V8.43L15.82%2012l-6.27%203.57z%27%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M23.5%206.19a3.02%203.02%200%200%200-2.12-2.14C19.5%203.55%2012%203.55%2012%203.55s-7.5%200-9.38.5A3.02%203.02%200%200%200%20.5%206.19C0%208.08%200%2012%200%2012s0%203.92.5%205.81a3.02%203.02%200%200%200%202.12%202.14c1.88.5%209.38.5%209.38.5s7.5%200%209.38-.5a3.02%203.02%200%200%200%202.12-2.14C24%2015.92%2024%2012%2024%2012s0-3.92-.5-5.81zM9.55%2015.57V8.43L15.82%2012l-6.27%203.57z%27%2F%3E%3C%2Fsvg%3E");
}


/* ==========================================================================
   16. Pie de página
   El pie es zona de utilidad: encontrar un dato de contacto, saltar a un
   destino o abrir conversación. Nada debe competir con el contenido; la única
   nota de color es el celeste de marca al pasar por encima de los enlaces.
   ========================================================================== */

/* La plantilla reutiliza la lista "tour-list", pensada para tarjetas con
   miniatura: traía 33 px de relleno por elemento y columnas fijas de 180 px.
   En un menú de texto eso dejaba huecos enormes y media columna vacía. */
.footer .widget-tour .tour-list {
	gap: 14px 32px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.footer .widget-tour .tour-list li {
	border: 0;
	margin: 0;
	padding: 0;
}

.footer .widget-tour .tour-list a {
	display: inline-block;
	line-height: 1.45;
	transition: color 0.2s ease;
}

.footer .widget-tour .tour-list a:hover,
.footer .menu-bottom a:hover {
	color: var(--eco-primary);
}

/* Bloque de contacto: el icono y su texto en una sola línea de base. El icono
   NO debe encogerse: al ser un contenedor flexible, con textos de varias líneas
   (la dirección, el horario) el círculo se aplastaba y salía como un óvalo. */
.footer .widget-contact {
	align-items: flex-start;
	gap: 14px;
	margin-bottom: 18px;
}

.footer .widget-contact .icon {
	flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   Contraste sobre el azul del pie (#072134)
   Medido en la página: el glifo de los iconos salía en 1,07:1 —heredaba el
   color de titulares, casi negro—, las etiquetas en 2,53:1 y los enlaces en
   2,18:1, porque usaban el azul de marca sobre un azul aún más oscuro. Los
   tres por debajo del mínimo legible de 4,5:1.
   La jerarquía queda: títulos en blanco, contenido en blanco, etiquetas en
   blanco atenuado y enlaces en blanco que pasan al celeste de marca al
   señalarlos. El celeste da 9,6:1 sobre este fondo.
   -------------------------------------------------------------------------- */
.footer .widget-contact .icon span,
.footer .widget-contact .icon [class*="icon-"] {
	color: var(--eco-primary);
}

/* La plantilla colorea la etiqueta con un selector de cinco clases y el teléfono
   hereda el color de su .h4, así que hay que igualar esa especificidad. */
.footer .inner-footer .widget-info .widget-contact .content span {
	color: rgba(255, 255, 255, 0.72);
}

.footer .inner-footer .widget-info .widget-contact .content .h4,
.footer .inner-footer .widget-info .widget-contact .content .h4 a {
	color: var(--white);
}

.footer .inner-footer .widget-info .widget-contact .content .h4 a:hover,
.footer .inner-footer .widget-info .widget-contact .content p a:hover {
	color: var(--eco-primary);
}

.footer .widget-tour a,
.footer .bottom-footer .menu-bottom a {
	color: rgba(255, 255, 255, 0.85);
}

.footer .widget-tour a:hover,
.footer .widget-tour a:focus-visible,
.footer .bottom-footer .menu-bottom a:hover,
.footer .bottom-footer .menu-bottom a:focus-visible {
	color: var(--eco-primary);
}

.footer .widget-contact:last-child {
	margin-bottom: 0;
}

.footer .widget-contact .content p,
.footer .widget-contact .content span {
	line-height: 1.5;
}

/* Acciones: par primario sólido + secundario de contorno. El botón azul de la
   plantilla quedaba azul sobre azul y prácticamente no se veía. */
.footer .widget-newseletter .tf-btn {
	justify-content: center;
	min-width: 176px;
}

.footer .widget-newseletter .tf-btn.style-2 {
	background-color: transparent;
	border-color: rgba(255, 255, 255, 0.45);
	color: var(--white);
}

.footer .widget-newseletter .tf-btn.style-2:hover {
	background-color: var(--white);
	border-color: var(--white);
	color: var(--eco-secondary);
}

/* Iconos sociales: el glifo va centrado dentro del círculo, tanto los de la
   tipografía como los dos que dibujamos en SVG. */
.footer .list-social .box-icon {
	align-items: center;
	display: inline-flex;
	justify-content: center;
}

/* Barra inferior: una línea de créditos no necesita 170 px de alto. El menú
   legal arrastraba el mismo relleno de 33 px por elemento que la lista de
   tours, porque la plantilla lo aplica a todos los li de sus listas. */
.footer .bottom-footer {
	padding: 18px 0;
}

.footer .bottom-footer .content-bottom {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	justify-content: space-between;
	padding: 0;
}

.footer .bottom-footer .menu-bottom {
	gap: 28px;
	margin: 0;
}

.footer .bottom-footer .menu-bottom li {
	margin: 0;
	padding: 0;
}

@media (max-width: 991px) {
	.footer .widget-box {
		margin-bottom: 34px;
	}
}

@media (max-width: 575px) {
	.footer .widget-tour .tour-list {
		grid-template-columns: minmax(0, 1fr);
	}

	.footer .widget-newseletter .tf-btn {
		flex: 1 1 100%;
	}

	.footer .content-bottom {
		justify-content: center;
		text-align: center;
	}
}

/* --------------------------------------------------------------------------
   Selector de idioma (GTranslate) en la barra inferior
   El plugin lo dibuja como una caja blanca con sombra, pensada para flotar
   sobre el contenido. Aquí vive dentro del pie azul oscuro, así que adopta su
   misma lengua visual: contorno tenue, texto claro y nada de sombra. El
   desplegable, que se abre hacia arriba, sí va en blanco para que se lea.
   -------------------------------------------------------------------------- */
.eco-idiomas .gt_float_switcher {
	background-color: transparent;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	box-shadow: none;
	color: rgba(255, 255, 255, 0.85);
	font-size: 14px;
	overflow: visible;
	position: relative;
}

.eco-idiomas .gt_float_switcher .gt-selected {
	background-color: transparent;
	border: 0;
}

/* El plugin inyecta su CSS en línea DESPUÉS de la hoja del tema, con la misma
   especificidad, así que ganaba él. Se añade .gt-selected para superarla. */
.eco-idiomas .gt_float_switcher .gt-selected .gt-current-lang {
	color: rgba(255, 255, 255, 0.85);
	padding: 7px 14px;
	text-transform: uppercase;
}

.eco-idiomas .gt_float_switcher:hover {
	border-color: var(--eco-primary);
}

.eco-idiomas .gt_float_switcher:hover .gt-selected .gt-current-lang {
	color: var(--eco-primary);
}

/* El JS del plugin "anima" la apertura dejando un max-width:1px en línea que
   no llega a expandir: la lista quedaba invisible y, como vive dentro del
   flujo de la píldora, la estiraba 250px hacia arriba (el óvalo vacío). La
   lista se saca del flujo (absoluta, anclada sobre la píldora) para que el
   contorno nunca crezca, y el max-width en línea se anula con !important,
   lo único que le gana a un estilo inline. */
.eco-idiomas .gt_float_switcher .gt_options {
	position: absolute;
	bottom: calc(100% + 10px);
	left: 0;
	min-width: 100%;
	width: max-content;
	max-width: none !important;
	max-height: 264px;
	overflow-y: auto;
	background-color: var(--white);
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
	z-index: 777;
}

.eco-idiomas .gt_float_switcher .gt_options a {
	color: var(--eco-secondary);
	font-size: 14px;
}

.eco-idiomas .gt_float_switcher .gt_options a:hover {
	background-color: var(--eco-accent);
	color: var(--eco-secondary);
}

/* Selector flotante: espejo del botón de WhatsApp (esquina derecha) pero en
   la esquina inferior IZQUIERDA, siempre a la vista. Píldora blanca grande
   con sombra para que contraste sobre cualquier fondo; el desplegable hereda
   la apertura hacia arriba de las reglas base. */
.eco-idiomas--flotante {
	bottom: 24px;
	left: 24px;
	position: fixed;
	z-index: 1100;
}

.eco-idiomas--flotante .gt_float_switcher {
	background-color: var(--white);
	border: 0;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
	color: var(--eco-secondary);
	font-size: 17px;
}

.eco-idiomas--flotante .gt_float_switcher .gt-selected .gt-current-lang {
	color: var(--eco-secondary);
	padding: 12px 20px;
}

.eco-idiomas--flotante .gt_float_switcher img {
	width: 30px;
}

.eco-idiomas--flotante .gt_float_switcher:hover .gt-selected .gt-current-lang {
	color: var(--eco-primary);
}

.eco-idiomas--flotante .gt_float_switcher .gt_options a {
	font-size: 15px;
}

@media (max-width: 991px) {
	/* Por encima de la barra móvil fija (BOOK NOW + WhatsApp), como el
	   flotante de WhatsApp. */
	.eco-idiomas--flotante {
		bottom: 84px;
		left: 14px;
	}
}

@media (max-width: 575px) {
	.bottom-footer .eco-idiomas {
		order: -1;
		width: 100%;
	}

	.bottom-footer .eco-idiomas .gt_float_switcher {
		display: inline-block;
	}
}

/* ==========================================================================
   17. Hero de la portada, según la composición de la plantilla
   Foto a sangre con carrusel, titular centrado y grande, flechas circulares a
   los lados y una tarjeta blanca que asoma sobre la sección siguiente. El
   contenido es el nuestro: propuesta de valor, bullets de confianza, botones y
   el formulario de consulta rápida.
   ========================================================================== */
.eco-hero {
	justify-content: center;
	/* Sin relleno inferior para que el margen negativo de la tarjeta la haga
	   asomar de verdad sobre la sección siguiente, como en la plantilla. */
	padding-bottom: 0;
	text-align: center;
}

.eco-hero-content {
	margin: 0 auto;
	max-width: 880px;
}

.eco-hero-title {
	font-size: clamp(38px, 6vw, 72px);
	letter-spacing: -0.02em;
	line-height: 1.05;
}

.eco-hero-subtitle {
	margin-left: auto;
	margin-right: auto;
}

.eco-hero-content .eco-trust-list,
.eco-hero-actions {
	justify-content: center;
}

/* Carrusel de fondo ------------------------------------------------------- */
.eco-hero-slider,
.eco-hero-slider .swiper-wrapper,
.eco-hero-slider .swiper-slide {
	height: 100%;
	width: 100%;
}

.eco-hero-slider .swiper-slide img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* Tarjeta de consulta rápida ---------------------------------------------- */
.eco-hero-form {
	align-items: end;
	background-color: var(--white);
	border-radius: 20px;
	box-shadow: 0 22px 55px rgba(var(--eco-secondary-rgb), 0.28);
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
	margin: 48px auto -52px;
	max-width: 1040px;
	padding: 20px;
	position: relative;
	text-align: left;
	width: min(100% - 32px, 1040px);
	z-index: 3;
}

.eco-hero-form-field label {
	color: var(--eco-secondary);
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 6px;
}

.eco-hero-form-field input,
.eco-hero-form-field select {
	background-color: var(--white);
	border: 1px solid rgba(var(--eco-secondary-rgb), 0.22);
	border-radius: 12px;
	color: var(--eco-secondary);
	font-size: 15px;
	height: 50px;
	padding: 0 14px;
	width: 100%;
}

.eco-hero-form-field input:focus,
.eco-hero-form-field select:focus {
	border-color: var(--eco-button);
	outline: 2px solid rgba(var(--eco-secondary-rgb), 0.18);
	outline-offset: 1px;
}

/* En esta plantilla .tf-btn es el botón CLARO, y dentro de una tarjeta blanca
   no pesaría nada. El envío es la acción principal de la tarjeta, así que va
   sólido con el color de botones de Ajustes del Sitio. */
.eco-hero-form .eco-hero-form-send {
	background-color: var(--eco-button);
	border-color: var(--eco-button);
	color: var(--white);
	height: 50px;
	justify-content: center;
	min-width: 150px;
}

.eco-hero-form .eco-hero-form-send:hover,
.eco-hero-form .eco-hero-form-send:focus-visible {
	background-color: var(--eco-secondary);
	border-color: var(--eco-secondary);
	color: var(--white);
}

/* La tarjeta asoma sobre la barra de reseñas: se le da aire por arriba. */
.eco-social-proof {
	padding-top: 78px;
}

/* En escritorio la tarjeta va a caballo entre la foto y la sección siguiente.
   Con margen negativo no bastaba: el min-height del hero impide que encoja, así
   que la tarjeta se quedaba dentro de la foto. Con posición absoluta cuelga del
   borde inferior y lo cruza de verdad. El recorte de la foto pasa al contenedor
   del carrusel, para que el hero pueda dejar asomar la tarjeta. */
@media (min-width: 992px) {
	.eco-hero {
		overflow: visible;
		padding-bottom: 76px;
	}

	.eco-hero-media {
		overflow: hidden;
	}

	.eco-hero-form {
		bottom: -58px;
		left: 50%;
		margin: 0;
		position: absolute;
		transform: translateX(-50%);
	}

	.eco-social-proof {
		padding-top: 116px;
	}
}


@media (max-width: 991px) {
	.eco-hero-form {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.eco-hero-form-send {
		grid-column: 1 / -1;
	}

}

@media (max-width: 767px) {
	.eco-hero {
		padding-bottom: 24px;
	}

	.eco-hero-form {
		grid-template-columns: minmax(0, 1fr);
		margin-bottom: -40px;
		padding: 18px;
	}

	.eco-social-proof {
		padding-top: 66px;
	}
}

/* ==========================================================================
   18. Tarjeta de tour con la anatomía de la plantilla
   Caja blanca con filete y esquinas redondeadas, foto recortada arriba con sus
   distintivos encima, y debajo destino, título, datos y precio. Los colores son
   los de Ajustes del Sitio: solo cambia la forma.
   ========================================================================== */
.eco-tour-card {
	background-color: var(--white);
	border: 1px solid rgba(var(--eco-secondary-rgb), 0.12);
	border-radius: var(--eco-radius);
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.eco-tour-card:hover {
	border-color: rgba(var(--eco-secondary-rgb), 0.22);
	box-shadow: 0 16px 40px rgba(var(--eco-secondary-rgb), 0.14);
	transform: translateY(-4px);
}

/* Foto ------------------------------------------------------------------- */
.eco-tour-card .archive-top {
	padding: 12px 12px 0;
}

.eco-tour-card .images-group {
	border-radius: 12px;
	overflow: hidden;
	position: relative;
}

.eco-tour-card .image-link {
	display: block;
}

.eco-tour-card .images-group img {
	aspect-ratio: 4 / 3;
	display: block;
	height: auto;
	object-fit: cover;
	transition: transform 0.6s ease;
	width: 100%;
}

.eco-tour-card:hover .images-group img {
	transform: scale(1.05);
}

/* Marcador para los tours que todavía no tienen foto. */
.eco-card-sinfoto {
	aspect-ratio: 4 / 3;
	background-color: var(--eco-accent);
	display: block;
	width: 100%;
}

/* Distintivos sobre la foto ---------------------------------------------- */
.eco-tour-card .group-meta {
	left: 12px;
	position: absolute;
	right: 12px;
	top: 12px;
}

.eco-tour-card .tag-meta {
	align-items: center;
	display: flex;
	gap: 8px;
}

/* Azul de marca con texto blanco (7,6:1). Con el celeste de fondo y el azul
   encima se quedaba en 4,4:1, por debajo de lo legible para 12 px. */
.eco-tour-card .flag-tag {
	background-color: var(--eco-secondary);
	border-radius: 999px;
	color: var(--white);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	padding: 5px 12px;
	text-transform: uppercase;
}

.eco-tour-card .count.image {
	align-items: center;
	background-color: rgba(var(--eco-secondary-rgb), 0.72);
	border-radius: 999px;
	color: var(--white);
	display: inline-flex;
	font-size: 12px;
	font-weight: 600;
	gap: 6px;
	padding: 5px 11px;
}

.eco-tour-card .count.image .icon {
	font-size: 12px;
}

/* Contenido -------------------------------------------------------------- */
.eco-tour-card .archive-bottom {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 16px 18px 18px;
}

.eco-tour-card .content-top .address {
	align-items: center;
	color: rgba(var(--eco-secondary-rgb), 0.88);
	display: flex;
	font-size: 13px;
	font-weight: 600;
	gap: 6px;
	letter-spacing: 0.01em;
	margin-bottom: 8px;
	text-transform: uppercase;
}

.eco-tour-card .content-top .address .icon {
	color: var(--eco-primary);
	font-size: 14px;
}

.eco-tour-card .tour-title {
	margin-bottom: 12px;
}

.eco-tour-card .tour-title a {
	color: var(--eco-secondary);
	display: block;
	line-height: 1.3;
}

.eco-tour-card .tour-title a:hover {
	color: var(--eco-button);
}

/* Fila de datos, separada por filetes como en la plantilla. */
.eco-tour-card .content-info-middle {
	border-bottom: 1px solid rgba(var(--eco-secondary-rgb), 0.1);
	border-top: 1px solid rgba(var(--eco-secondary-rgb), 0.1);
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin-bottom: 14px;
	padding: 11px 0;
}

.eco-tour-card .content-info-middle .info {
	align-items: center;
	color: rgba(var(--eco-secondary-rgb), 0.88);
	display: flex;
	font-size: 14px;
	gap: 7px;
}

.eco-tour-card .content-info-middle .icon {
	color: var(--eco-primary);
	font-size: 15px;
}

/* Gancho de una línea bajo el título de la tarjeta. Dos líneas como mucho,
   para que todas las tarjetas de una fila conserven la misma altura. */
.eco-tour-card .eco-card-gancho {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	color: var(--text-color);
	display: -webkit-box;
	font-size: 14px;
	line-height: 1.45;
	margin: -6px 0 12px;
	overflow: hidden;
}

.eco-tour-card .eco-card-bullets {
	margin-bottom: 16px;
}

/* Pie de la tarjeta: precio a la izquierda, acción a la derecha. */
.eco-tour-card .content-bottom {
	align-items: center;
	border-top: 1px solid rgba(var(--eco-secondary-rgb), 0.1);
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
	margin-top: auto;
	padding-top: 16px;
}

.eco-tour-card .content-bottom .price {
	color: var(--eco-secondary);
	margin: 0;
}

@media (max-width: 380px) {
	.eco-tour-card .content-bottom {
		justify-content: center;
	}

	.eco-tour-card .content-bottom .tf-btn {
		flex: 1 1 100%;
		justify-content: center;
	}
}

/* ==========================================================================
   19. Ficha de tour: galería en mosaico y tarjeta lateral, como el ejemplo
   El ejemplo de la plantilla (toursingle1) muestra una foto grande de 2x2 y
   cuatro pequeñas al lado, con un botón para abrir todas. Y la caja de reserva
   es una tarjeta blanca con filete y 32 px de aire.
   ========================================================================== */
.eco-gallery-mosaico {
	border-radius: var(--eco-radius);
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-template-rows: repeat(2, 1fr);
	overflow: hidden;
	position: relative;
}

.eco-gallery-mosaico .eco-gallery-item {
	display: block;
	overflow: hidden;
	position: relative;
}

/* La primera foto manda: ocupa dos columnas y las dos filas. */
.eco-gallery-mosaico .eco-gallery-item:first-child {
	grid-column: span 2;
	grid-row: span 2;
}

.eco-gallery-mosaico .eco-gallery-item img {
	display: block;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s ease;
	width: 100%;
}

.eco-gallery-mosaico .eco-gallery-item:hover img {
	transform: scale(1.05);
}

/* A partir de la quinta, las fotos siguen en el documento pero no se ven: son
   las que recorre el visor a pantalla completa. */
.eco-gallery-mosaico .eco-gallery-item:nth-child(n + 6) {
	display: none;
}

/* Filas de alto fijo, como en el ejemplo (allí son 330 px). Con filas guiadas
   por el contenido las fotos pequeñas quedaban aplastadas. */
.eco-gallery-mosaico {
	grid-template-rows: repeat(2, 316px);
}

/* --- Tours con menos de cinco fotos ---------------------------------------
   El mosaico se dibuja para una grande y cuatro pequeñas. Sin estas variantes,
   un tour con tres fotos deja dos huecos en blanco a la derecha. Se reparte lo
   que haya manteniendo la misma altura total, para que al pasar de un tour a
   otro la página no dé saltos. */

.eco-gallery-mosaico--1 {
	/* Una sola foto no es un mosaico: es una banda. Más baja, para que no
	   ocupe media pantalla ella sola. */
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: 420px;
}

.eco-gallery-mosaico--1 .eco-gallery-item:first-child {
	grid-column: span 1;
	grid-row: span 1;
}

/* Dos: mitad y mitad. */
.eco-gallery-mosaico--2 .eco-gallery-item:nth-child(2) {
	grid-column: span 2;
	grid-row: span 2;
}

/* Tres: la grande a la izquierda y dos bandas apiladas a la derecha. */
.eco-gallery-mosaico--3 .eco-gallery-item:nth-child(2),
.eco-gallery-mosaico--3 .eco-gallery-item:nth-child(3) {
	grid-column: span 2;
}

/* Cuatro: la grande, dos arriba a la derecha y una ancha debajo. */
.eco-gallery-mosaico--4 .eco-gallery-item:nth-child(4) {
	grid-column: span 2;
}

.eco-gallery-todas {
	align-items: center;
	background-color: var(--white);
	border: 1px solid rgba(var(--eco-secondary-rgb), 0.14);
	border-radius: 999px;
	bottom: 20px;
	box-shadow: 0 8px 24px rgba(var(--eco-secondary-rgb), 0.2);
	color: var(--eco-secondary);
	cursor: pointer;
	display: inline-flex;
	font-size: 14px;
	font-weight: 600;
	gap: 8px;
	padding: 11px 20px;
	position: absolute;
	right: 20px;
	transition: background-color 0.25s ease;
	z-index: 2;
}

.eco-gallery-todas:hover {
	background-color: var(--eco-accent);
}

.eco-gallery-todas .icon {
	color: var(--eco-primary);
}

/* Tarjeta lateral de reserva --------------------------------------------- */
.eco-sidebar-box {
	background-color: var(--white);
	border: 1px solid rgba(var(--eco-secondary-rgb), 0.12);
	border-radius: var(--eco-radius);
	padding: 32px;
}

.eco-sidebar-box + .eco-sidebar-box {
	margin-top: 20px;
}

@media (max-width: 991px) {
	.eco-gallery-mosaico {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: 320px 210px;
	}

	.eco-gallery-mosaico .eco-gallery-item:first-child {
		grid-column: span 2;
		grid-row: span 1;
	}

	/* A dos columnas solo caben la grande y dos pequeñas. */
	.eco-gallery-mosaico .eco-gallery-item:nth-child(n + 4) {
		display: none;
	}

	/* Con una sola foto sobra la segunda fila. */
	.eco-gallery-mosaico--1 {
		grid-template-rows: 320px;
	}

	/* Con dos, la segunda ocupa el ancho entero debajo de la grande. */
	.eco-gallery-mosaico--2 .eco-gallery-item:nth-child(2) {
		grid-column: span 2;
		grid-row: span 1;
	}

	.eco-sidebar-box {
		padding: 24px;
	}
}

@media (max-width: 575px) {
	/* En pantallas estrechas un mosaico de cinco fotos es ilegible: se deja la
	   principal y el botón abre el resto. */
	.eco-gallery-mosaico {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: 260px;
	}

	.eco-gallery-mosaico .eco-gallery-item:not(:first-child) {
		display: none;
	}

	.eco-gallery-mosaico .eco-gallery-item:first-child {
		grid-column: span 1;
		grid-row: span 1;
	}

	.eco-gallery-todas {
		bottom: 14px;
		font-size: 13px;
		padding: 9px 16px;
		right: 14px;
	}
}

/* ==========================================================================
   20. Cabecera de la ficha de tour, como el ejemplo
   En el ejemplo el titular es casi negro y muy pesado, y debajo va UNA sola
   línea con los datos a la izquierda y las acciones a la derecha. Aquí la
   línea lleva precio, duración, destino y valoración, y a la derecha los dos
   botones que convierten.
   ========================================================================== */
/* Del ejemplo se toma el TAMAÑO y el PESO del titular, no su color: el nuestro
   va en el azul de Ecosportour (7,6:1 sobre blanco). */
.eco-tour-hero .box-info h1 {
	color: var(--eco-secondary);
	font-size: clamp(30px, 3.6vw, 46px);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin-bottom: 10px;
}

.eco-tour-headline {
	align-items: center;
	border-top: 1px solid rgba(var(--eco-secondary-rgb), 0.12);
	display: flex;
	flex-wrap: wrap;
	gap: 16px 32px;
	justify-content: space-between;
	margin-top: 18px;
	padding-top: 18px;
}

.eco-tour-headline .eco-tour-meta {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	margin: 0;
}

.eco-tour-headline-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* Migas: sin separador se leían pegadas ("HomeToursDay Tours from Quito").
   El marcado es ul.breadcrumb > li y vive fuera del hero, así que la regla va
   sin acotar a la sección. */
ul.breadcrumb {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

ul.breadcrumb li {
	align-items: center;
	display: flex;
	gap: 8px;
}

ul.breadcrumb li + li::before {
	color: rgba(var(--eco-secondary-rgb), 0.45);
	content: "·";
}

@media (max-width: 767px) {
	.eco-tour-headline {
		gap: 14px;
	}

	.eco-tour-headline-actions {
		width: 100%;
	}

	.eco-tour-headline-actions .tf-btn {
		flex: 1 1 100%;
		justify-content: center;
	}
}

/* ==========================================================================
   21. Vídeo de fondo del hero (YouTube o Vimeo)
   El reproductor siempre entrega 16:9, así que para que cubra el hero sin
   deformarse se escala al mayor de los dos lados y se centra. Queda por encima
   de la foto de carga y por debajo del velo, que es quien garantiza que el
   texto blanco se lea sobre cualquier fotograma.
   ========================================================================== */
.eco-hero-video-embed {
	inset: 0;
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
	position: absolute;
	transition: opacity 0.8s ease;
}

.eco-hero-video-embed.is-ready {
	opacity: 1;
}

.eco-hero-video-embed iframe {
	border: 0;
	height: 56.25vw;          /* 16:9 a partir del ancho */
	left: 50%;
	min-height: 100%;
	min-width: 177.78vh;      /* 16:9 a partir del alto */
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100vw;
}

/* ==========================================================================
   22. "Why book direct": banda de color con tarjetas
   Misma composición que la referencia —franja de color a todo el ancho, título
   y frase centrados en claro, y tarjetas blancas con el dibujo dentro de un
   cuadrado redondeado—, pero con el azul y el celeste de Ecosportour.
   ========================================================================== */
.eco-why {
	background-color: var(--eco-secondary);
}

.eco-why .box-title .title {
	color: var(--white);
}

.eco-why-subtitle {
	color: rgba(255, 255, 255, 0.86);
	margin: 12px auto 0;
	max-width: 640px;
}

.eco-why .box-icon-benefits {
	align-items: center;
	background-color: var(--white);
	border-radius: var(--eco-radius);
	display: flex;
	flex-direction: column;
	gap: 18px;
	height: 100%;
	padding: 34px 26px;
	text-align: center;
}

/* El dibujo va dentro de un cuadrado celeste de esquinas suaves. */
.eco-why .box-icon-benefits .wrap-icon {
	align-items: center;
	background-color: var(--eco-accent);
	border-radius: 18px;
	display: flex;
	flex: 0 0 auto;
	height: 72px;
	justify-content: center;
	width: 72px;
}

.eco-why .box-icon-benefits .wrap-icon .eco-svg {
	color: var(--eco-secondary);
	height: 34px;
	width: 34px;
}

.eco-why .box-icon-benefits .wrap-icon img {
	height: 38px;
	object-fit: contain;
	width: 38px;
}

.eco-why .box-icon-benefits .name {
	color: var(--eco-secondary);
	margin: 0;
}

.eco-why .box-icon-benefits .desc {
	color: var(--text-color);
	margin: 0;
}

/* La llamada final, en claro sobre la banda. */
.eco-why .eco-section-cta .tf-btn {
	background-color: var(--white);
	border-color: var(--white);
	color: var(--eco-secondary);
}

.eco-why .eco-section-cta .tf-btn:hover {
	background-color: var(--eco-primary);
	border-color: var(--eco-primary);
	color: var(--eco-secondary);
}

@media (max-width: 575px) {
	.eco-why .box-icon-benefits {
		padding: 28px 20px;
	}
}

/* Curvas de nivel de fondo, del material gráfico del cliente. Vienen con fondo
   oscuro y trazo dorado: se les quita el fondo y el trazo pasa a blanco, para
   que el color lo ponga la opacidad sobre el azul de marca. Se elige la lámina
   más despejada de las cinco (53 trazos frente a 86), que es lo que conviene
   detrás de un texto. */
.eco-why {
	position: relative;
}

.eco-why::before {
	background-image: url('assets/images/topografico.svg');
	background-position: center;
	background-repeat: repeat;
	background-size: 760px auto;
	content: "";
	inset: 0;
	opacity: 0.13;
	pointer-events: none;
	position: absolute;
}

.eco-why > .container {
	position: relative;
	z-index: 1;
}

/* ==========================================================================
   23. Iconos de Ecuador
   Contorno relleno de 64 px, del paquete gráfico del cliente. Llevan
   fill="currentColor", así que toman el color de donde estén y sirven igual
   sobre blanco que sobre la banda azul. La regla que se sigue en todo el
   sitio: un icono de estos aparece solo donde nombra algo ecuatoriano —una
   región, un plato, una artesanía—, nunca como adorno de relleno.
   ========================================================================== */
.eco-ec-svg {
	display: block;
	height: auto;
	width: 100%;
}

/* Dentro del cuadrado celeste de "Why book direct", al mismo tamaño que los
   trazos propios, para que el cliente pueda mezclar las dos familias. */
.eco-why .box-icon-benefits .wrap-icon .eco-ec-svg {
	color: var(--eco-secondary);
	height: 38px;
	width: 38px;
}

/* --------------------------------------------------------------------------
   23.1 Portada: elegir región
   La caja del hero ya pregunta «Where do you want to go?». Esta es la
   respuesta larga, y aquí el icono no acompaña al texto: es lo primero que se
   lee. De ahí que sea grande y que el disco se rellene al pasar por encima.
   -------------------------------------------------------------------------- */
/* Flex y no grid: las tarjetas son cuatro o cinco según el cliente active la
   de viajes privados, y así la fila se reparte sola sin dejar huecos. */
.eco-regions-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.eco-regions-grid > li {
	flex: 1 1 180px;
	min-width: 0;
}

.eco-region-link {
	align-items: center;
	background-color: var(--white);
	border: 1px solid rgba(var(--eco-secondary-rgb), 0.14);
	border-radius: var(--eco-radius);
	display: flex;
	flex-direction: column;
	gap: 6px;
	height: 100%;
	padding: 32px 20px 26px;
	text-align: center;
	text-decoration: none;
	transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.eco-region-icon {
	align-items: center;
	background-color: var(--eco-accent);
	border-radius: 50%;
	color: var(--eco-secondary);
	display: flex;
	height: 92px;
	justify-content: center;
	margin-bottom: 12px;
	transition: background-color 0.25s ease, color 0.25s ease;
	width: 92px;
}

.eco-region-icon .eco-ec-svg {
	height: 50px;
	width: 50px;
}

.eco-region-name {
	color: var(--eco-secondary);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
}

.eco-region-count {
	color: rgba(var(--eco-secondary-rgb), 0.85);
	font-size: 14px;
}

.eco-region-link:hover,
.eco-region-link:focus-visible {
	border-color: rgba(var(--eco-secondary-rgb), 0.32);
	box-shadow: 0 14px 30px rgba(var(--eco-secondary-rgb), 0.12);
	transform: translateY(-4px);
}

.eco-region-link:hover .eco-region-icon,
.eco-region-link:focus-visible .eco-region-icon {
	background-color: var(--eco-secondary);
	color: var(--white);
}

@media (max-width: 991px) {
	.eco-regions-grid > li {
		flex-basis: calc(50% - 10px);
	}
}

@media (max-width: 575px) {
	.eco-region-icon {
		height: 76px;
		margin-bottom: 8px;
		width: 76px;
	}

	.eco-region-icon .eco-ec-svg {
		height: 42px;
		width: 42px;
	}

	.eco-region-name {
		font-size: 17px;
	}
}

/* --------------------------------------------------------------------------
   23.2 "Sobre nosotros": Ecuador de cerca
   El contrapunto callado de la banda de regiones: sin tarjetas, sin bordes,
   solo una cadencia de marcas con su nombre. La fuerza se gasta arriba.
   -------------------------------------------------------------------------- */
.eco-culture-grid {
	display: grid;
	gap: 30px 16px;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	list-style: none;
	margin: 0 auto;
	max-width: 940px;
	padding: 0;
}

.eco-culture-item {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-align: center;
}

.eco-culture-icon {
	color: var(--eco-secondary);
	display: block;
	height: 54px;
	width: 54px;
}

.eco-culture-label {
	color: rgba(var(--eco-secondary-rgb), 0.88);
	font-size: 13px;
	letter-spacing: 0.02em;
	line-height: 1.35;
}

@media (max-width: 767px) {
	.eco-culture-grid {
		gap: 24px 12px;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.eco-culture-icon {
		height: 40px;
		width: 40px;
	}
}

/* En teléfono, tres columnas dejan el rótulo más ancho que su casilla y sobra
   una casilla suelta al final. Con dos, las diez entran en cinco filas justas. */
@media (max-width: 479px) {
	.eco-culture-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* --------------------------------------------------------------------------
   23.3 Cabecera de destino: el ícono como marca
   El titular va alineado a la izquierda y la mitad derecha de la franja queda
   vacía: ahí va el ícono, grande y con poco peso. No ocupa alto propio ni
   compite con el texto, y en móvil desaparece porque ya no hay hueco.
   -------------------------------------------------------------------------- */
.eco-page-hero-mark {
	color: var(--eco-secondary);
	opacity: 0.14;
	pointer-events: none;
	position: absolute;
	right: 6%;
	top: 50%;
	transform: translateY(-50%);
	width: 150px;
	z-index: 0;
}

/* Sobre foto, el degradado ya oscurece: la marca va en blanco. */
.eco-page-hero.has-image .eco-page-hero-mark {
	color: var(--white);
	opacity: 0.2;
}

@media (max-width: 991px) {
	.eco-page-hero-mark {
		display: none;
	}
}

/* ==========================================================================
   24. Testimonios: la entrada
   El estado inicial cuelga de .eco-js (que pone el propio script) y de
   .eco-anim (que se añade tras montar el carrusel): sin JS, o si el script
   falla, las tarjetas se ven siempre. Todo el bloque vive dentro de la
   consulta de movimiento reducido, así que quien pide menos movimiento no
   recibe ninguno y ve la sección quieta y completa.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

	/* Las tarjetas suben y aparecen, una detrás de otra de izquierda a derecha. */
	.eco-js .eco-testimonials.eco-anim .eco-testimonial {
		opacity: 0;
		transform: translateY(18px);
		transition:
			opacity 0.5s ease,
			transform 0.55s cubic-bezier(0.22, 0.7, 0.3, 1);
		transition-delay: calc(var(--eco-i, 0) * 90ms);
	}

	.eco-js .eco-testimonials.eco-anim .swiper-slide.is-in .eco-testimonial {
		opacity: 1;
		transform: none;
	}

	/* Las estrellas entran de una en una, con un rebote corto: es el gesto de
	   puntuar. Empiezan cuando la tarjeta ya ha aterrizado. */
	.eco-js .eco-testimonials.eco-anim .eco-testimonial-stars i {
		display: inline-block;
		opacity: 0;
		transform: scale(0.4);
		transition:
			opacity 0.26s ease,
			transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
	}

	.eco-js .eco-testimonials.eco-anim .swiper-slide.is-in .eco-testimonial-stars i {
		opacity: 1;
		transform: none;
	}

	.eco-js .eco-testimonials.eco-anim .swiper-slide.is-in .eco-testimonial-stars i:nth-child(1) {
		transition-delay: calc(var(--eco-i, 0) * 90ms + 240ms);
	}

	.eco-js .eco-testimonials.eco-anim .swiper-slide.is-in .eco-testimonial-stars i:nth-child(2) {
		transition-delay: calc(var(--eco-i, 0) * 90ms + 310ms);
	}

	.eco-js .eco-testimonials.eco-anim .swiper-slide.is-in .eco-testimonial-stars i:nth-child(3) {
		transition-delay: calc(var(--eco-i, 0) * 90ms + 380ms);
	}

	.eco-js .eco-testimonials.eco-anim .swiper-slide.is-in .eco-testimonial-stars i:nth-child(4) {
		transition-delay: calc(var(--eco-i, 0) * 90ms + 450ms);
	}

	.eco-js .eco-testimonials.eco-anim .swiper-slide.is-in .eco-testimonial-stars i:nth-child(5) {
		transition-delay: calc(var(--eco-i, 0) * 90ms + 520ms);
	}
}

/* --------------------------------------------------------------------------
   24.1 Reseñas traídas de Tripadvisor (widget de Trustindex)
   El widget trae su propia cara, así que aquí solo se le hace sitio y se le da
   la misma entrada que a las tarjetas escritas a mano: sube y aparece. Sin
   tocar sus colores ni su tipografía, que son de Tripadvisor y conviene que se
   reconozcan.
   -------------------------------------------------------------------------- */
.eco-resenas-widget {
	margin: 0 auto;
	max-width: 1100px;
}

@media (prefers-reduced-motion: no-preference) {
	.eco-js .eco-testimonials-widget.eco-anim .eco-resenas-widget {
		opacity: 0;
		transform: translateY(18px);
		transition:
			opacity 0.5s ease,
			transform 0.55s cubic-bezier(0.22, 0.7, 0.3, 1);
	}

	.eco-js .eco-testimonials-widget.eco-anim.is-in .eco-resenas-widget {
		opacity: 1;
		transform: none;
	}
}

/* ==========================================================================
   25. Blog con la composición de la plantilla
   Tarjeta con la foto en 4:5, la categoría encima y el "read more" con flecha;
   y la ficha del artículo a ocho columnas con una barra lateral pegajosa. Los
   colores y la tipografía siguen siendo los de Ecosportour.
   ========================================================================== */

/* --------------------------------------------------------------------------
   25.1 Tarjeta de artículo
   Como en la plantilla: la foto ocupa la tarjeta entera y el texto va encima,
   abajo del todo, sobre un degradado que baja a oscuro. Sin extracto —la
   referencia no lo lleva y sobre una foto solo estorba—: fecha, titular y
   entrada. La chapa de categoría va en el azul de Ecosportour, no en el dorado
   de la plantilla.
   -------------------------------------------------------------------------- */
.eco-post-card {
	background-color: var(--eco-secondary);
	border: 0;
	border-radius: var(--eco-radius);
	overflow: hidden;
	position: relative;
}

.eco-post-card .img-style {
	height: 100%;
	position: relative;
}

.eco-post-card .img-style img {
	aspect-ratio: 4 / 5;
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* El degradado no es adorno: sin él, el texto blanco cae sobre cielo claro.
   Se aligera la mitad superior para que la foto se vea, y se concentra la
   protección en la franja del titular. La plantilla añade encima otro
   degradado a negro puro (.flat-blog-item.style-1::after), que se anula
   más abajo: dos velos sumados apagaban la imagen entera. */
.eco-post-card .img-style::after {
	background: linear-gradient(
		180deg,
		rgba(6, 26, 41, 0) 46%,
		rgba(6, 26, 41, 0.4) 72%,
		rgba(6, 26, 41, 0.78) 100%
	);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.eco-post-card.flat-blog-item.style-1::after {
	background: none;
}

/* La plantilla oscurecía al 60 % cualquier foto de tarjeta al pasar el ratón.
   Se deja un realce leve: la foto sigue viva y el zoom marca el hover. */
.eco-tour-card.hover-img:hover img:not(.icon),
.eco-post-card.hover-img:hover img:not(.icon) {
	filter: brightness(94%);
}

.eco-post-card .detail {
	background-color: var(--eco-secondary);
	border-radius: 999px;
	color: var(--white);
	font-size: 12px;
	font-weight: 700;
	left: 16px;
	letter-spacing: 0.06em;
	padding: 7px 14px;
	position: absolute;
	text-transform: uppercase;
	top: 16px;
	z-index: 2;
}

.eco-post-card .content-box {
	bottom: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	left: 0;
	padding: 22px 24px 24px;
	position: absolute;
	right: 0;
	z-index: 2;
}

.eco-post-card .date-post,
.eco-post-card .date-post time {
	align-items: center;
	color: rgba(255, 255, 255, 0.88);
	display: inline-flex;
	gap: 7px;
}

.eco-post-card .date-post .icon {
	font-size: 14px;
}

.eco-post-card-body h3 {
	margin: 0;
}

/* Dos líneas de titular como mucho: en una rejilla, los altos deben cuadrar. */
.eco-post-card-body h3 .link {
	color: var(--white);
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.eco-post-card-body h3 .link:hover,
.eco-post-card-body h3 .link:focus-visible {
	color: var(--white);
	text-decoration: underline;
}

.eco-post-card .eco-read-more {
	align-items: center;
	color: var(--white);
	display: inline-flex;
	gap: 6px;
	margin-top: 2px;
}

.eco-post-card .eco-read-more .icon {
	font-size: 13px;
	transition: transform 0.25s ease;
}

.eco-post-card:hover .eco-read-more .icon {
	transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   25.2 Barra lateral del artículo
   Se queda a la vista mientras se lee, que es cuando sirve: el lector acaba de
   enterarse de que quiere ir al Cotopaxi y ahí tiene el tour.
   -------------------------------------------------------------------------- */
.sidebar-blog {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

@media (min-width: 992px) {
	.sticky-sidebar {
		position: sticky;
		top: calc(var(--eco-header-h) + 24px);
	}
}

.eco-widget {
	background-color: var(--white);
	border: 1px solid var(--stoke-color);
	border-radius: var(--eco-radius);
	padding: 24px;
}

.eco-widget .widget-title {
	color: var(--eco-secondary);
	margin: 0 0 16px;
}

.eco-widget-tours {
	display: flex;
	flex-direction: column;
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.eco-widget-tour {
	align-items: center;
	display: flex;
	gap: 13px;
	text-decoration: none;
}

.eco-widget-tour-img {
	border-radius: 10px;
	flex: 0 0 auto;
	height: 62px;
	overflow: hidden;
	width: 62px;
}

.eco-widget-tour-img img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.eco-widget-tour-name {
	color: var(--eco-secondary);
	display: -webkit-box;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.eco-widget-tour:hover .eco-widget-tour-name {
	color: var(--eco-button);
}

.eco-widget-tour-meta {
	color: var(--text-color);
	display: block;
	font-size: 13px;
	margin-top: 3px;
}

.eco-widget-ask p {
	color: var(--text-color);
	margin: 0 0 16px;
}

.eco-widget-ask .tf-btn {
	margin-bottom: 10px;
}

.eco-widget-phone {
	align-items: center;
	display: flex;
	gap: 8px;
	margin: 14px 0 0;
}

.eco-widget-phone a {
	color: var(--eco-secondary);
	font-weight: 600;
}

/* En móvil la barra va debajo del texto, sin pegarse a él. */
@media (max-width: 991px) {
	.sidebar-blog {
		margin-top: 40px;
	}
}

/* ==========================================================================
   26. "Sobre nosotros" con la composición de la plantilla
   ========================================================================== */

/* --------------------------------------------------------------------------
   26.1 Cabecera de página sin foto: curvas de nivel
   Es lo que hace la plantilla en su "About Us": la franja lisa lleva un mapa
   topográfico muy tenue. Se reutiliza la lámina del material del cliente, la
   misma de la banda azul. Solo cuando no hay foto: sobre una foto sobraría.
   -------------------------------------------------------------------------- */
.eco-page-hero:not(.has-image)::after {
	background-image: url('assets/images/topografico.svg');
	background-position: center;
	background-repeat: repeat;
	background-size: 720px auto;
	content: "";
	inset: 0;
	opacity: 0.5;
	pointer-events: none;
	position: absolute;
	z-index: 0;
}

/* --------------------------------------------------------------------------
   26.2 Nuestra historia
   El titular de la plantilla es una declaración a tamaño de portada, no un
   rótulo de sección. Aquí se le da esa escala al que ya escribió el cliente.
   -------------------------------------------------------------------------- */
.eco-about-story .box-title .title {
	font-size: clamp(30px, 3.4vw, 44px);
	line-height: 1.16;
	margin-bottom: 22px;
}

.eco-about-story .eco-rich-text p:last-child {
	margin-bottom: 0;
}

/* La foto acompaña a un texto largo: se le pone alto y se recorta, para que la
   columna derecha no quede corta al lado de cuatro párrafos. */
.eco-story-media img {
	aspect-ratio: 3 / 4;
	max-height: 620px;
}

@media (max-width: 991px) {
	.eco-story-media img {
		aspect-ratio: 4 / 3;
		max-height: none;
	}
}

/* --------------------------------------------------------------------------
   26.3 Equipo
   Las fotos venían con proporciones distintas —unas verticales, otras casi
   cuadradas— y la rejilla salía dentada. Se recortan todas al mismo retrato,
   como en la plantilla, y se redondean.
   -------------------------------------------------------------------------- */
.eco-team-member {
	display: flex;
	flex-direction: column;
	gap: 14px;
	height: 100%;
}

/* Altura fija, no proporción.
   Con aspect-ratio la caja es un elemento flex y su tamaño depende del
   contenido: sin ancho explícito tomaba el de la foto original y desbordaba la
   rejilla; con él, el flex de la tarjeta seguía estirándola cuando el nombre
   ocupaba dos líneas. Una altura en píxeles no depende de nada y todas las
   fichas quedan iguales, que es lo único que se buscaba. */
.eco-team-member .box-img {
	border-radius: var(--eco-radius);
	height: 340px;
	overflow: hidden;
	width: 100%;
}

.eco-team-member .box-img img,
.eco-team-member .box-img.img-style img {
	display: block;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	width: 100%;
}

@media (max-width: 1199px) {
	.eco-team-member .box-img {
		height: 300px;
	}
}

@media (max-width: 575px) {
	.eco-team-member .box-img {
		height: 360px;
	}
}

.eco-team-member .content {
	margin: 0;
}

.eco-team-member .name-member {
	color: var(--eco-secondary);
	margin: 0 0 2px;
}

.eco-team-member .position {
	color: var(--text-color);
	font-size: 14px;
}

/* Los idiomas cierran la ficha: van abajo aunque la biografía sea más corta. */
.eco-team-member .eco-team-langs {
	margin-top: auto;
	padding-top: 4px;
}

/* ==========================================================================
   27. "Sobre nosotros": las piezas de la plantilla
   Sello giratorio sobre la foto, ventajas con ícono, banda de vídeo, mosaico
   de "por qué elegirnos" y los pasos de reserva escalonados. La composición es
   la de la plantilla; los colores, la tipografía y los textos son de
   Ecosportour.
   ========================================================================== */

/* --------------------------------------------------------------------------
   27.1 Sello redondo sobre la foto
   El texto va curvado sobre una circunferencia con un textPath, que es la
   única forma de hacerlo sin imágenes. Gira despacio; con movimiento reducido
   se queda quieto, porque es adorno y nadie se pierde nada.
   -------------------------------------------------------------------------- */
.eco-story-wrap {
	position: relative;
}

.eco-sello {
	align-items: center;
	background-color: var(--white);
	border-radius: 50%;
	box-shadow: 0 12px 30px rgba(var(--eco-secondary-rgb), 0.16);
	display: flex;
	height: 132px;
	justify-content: center;
	left: -34px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 132px;
	z-index: 2;
}

.eco-sello-anillo {
	height: 100%;
	inset: 0;
	position: absolute;
	width: 100%;
}

.eco-sello-anillo text {
	fill: var(--eco-secondary);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.eco-sello-flecha {
	color: var(--eco-button);
	height: 34px;
	width: 34px;
}

.eco-sello-flecha svg {
	height: 100%;
	width: 100%;
}

@media (prefers-reduced-motion: no-preference) {
	.eco-sello-anillo {
		animation: eco-girar 18s linear infinite;
	}
}

@keyframes eco-girar {
	to {
		transform: rotate(360deg);
	}
}

@media (max-width: 991px) {
	.eco-sello {
		height: 104px;
		left: auto;
		right: 12px;
		top: 12px;
		transform: none;
		width: 104px;
	}

	.eco-sello-anillo text {
		font-size: 17px;
	}
}

/* --------------------------------------------------------------------------
   27.2 Ventajas bajo la foto y fila del teléfono
   -------------------------------------------------------------------------- */
.eco-story-bens {
	display: grid;
	gap: 22px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	list-style: none;
	margin: 30px 0 0;
	padding: 0;
}

.eco-story-ben {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.eco-story-ben-icon {
	color: var(--eco-secondary);
	height: 38px;
	width: 38px;
}

.eco-story-ben-icon .eco-svg,
.eco-story-ben-icon .eco-ec-svg {
	height: 100%;
	width: 100%;
}

.eco-story-ben-title {
	color: var(--eco-secondary);
	display: block;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}

.eco-story-ben-desc {
	color: var(--text-color);
	display: block;
	font-size: 15px;
	line-height: 1.6;
	margin-top: 5px;
}

.eco-story-call {
	align-items: center;
	border-top: 1px solid var(--stoke-color);
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 28px;
	padding-top: 24px;
}

.eco-story-call-icon {
	align-items: center;
	background-color: var(--eco-accent);
	border-radius: 50%;
	color: var(--eco-secondary);
	display: flex;
	flex: 0 0 auto;
	font-size: 20px;
	height: 50px;
	justify-content: center;
	width: 50px;
}

.eco-story-call-text {
	display: flex;
	flex-direction: column;
	margin-right: auto;
}

.eco-story-call-label {
	color: var(--text-color);
	font-size: 14px;
}

.eco-story-call-num {
	color: var(--eco-secondary);
	font-size: 19px;
	font-weight: 700;
}

@media (max-width: 575px) {
	.eco-story-bens {
		grid-template-columns: 1fr;
	}

	.eco-story-call-btn {
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   27.3 Banda ancha con foto y botón de play
   -------------------------------------------------------------------------- */
.eco-about-banner {
	overflow: hidden;
	position: relative;
}

.eco-about-banner-img {
	display: block;
	height: 100%;
	left: 0;
	object-fit: cover;
	position: absolute;
	top: 0;
	width: 100%;
}

.eco-about-banner::after {
	background: linear-gradient(180deg, rgba(6, 26, 41, 0.22) 0%, rgba(6, 26, 41, 0.48) 100%);
	content: "";
	inset: 0;
	position: absolute;
}

.eco-about-banner-inner {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 16px;
	justify-content: center;
	min-height: 460px;
	padding: 80px 24px;
	position: relative;
	text-align: center;
	z-index: 1;
}

.eco-about-banner-title {
	color: var(--white);
	font-size: clamp(26px, 3.2vw, 40px);
	margin: 0;
	max-width: 820px;
}

.eco-about-banner-text {
	color: rgba(255, 255, 255, 0.9);
	margin: 0;
	max-width: 620px;
}

.eco-play {
	align-items: center;
	background-color: var(--white);
	border-radius: 50%;
	display: flex;
	height: 76px;
	justify-content: center;
	margin-bottom: 12px;
	transition: transform 0.25s ease;
	width: 76px;
}

.eco-play:hover,
.eco-play:focus-visible {
	transform: scale(1.07);
}

/* El triángulo se dibuja con bordes: no hace falta ni icono ni imagen. */
.eco-play-tri {
	border-bottom: 11px solid transparent;
	border-left: 18px solid var(--eco-secondary);
	border-top: 11px solid transparent;
	display: block;
	margin-left: 5px;
}

/* --------------------------------------------------------------------------
   27.4 Por qué elegirnos: mosaico y tarjetas
   -------------------------------------------------------------------------- */
.eco-about-why {
	background-color: var(--eco-accent);
}

.eco-about-why .row {
	align-items: flex-start;
}

.eco-why-mosaico {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.eco-why-mosaico-img {
	border-radius: var(--eco-radius);
	overflow: hidden;
}

.eco-why-mosaico-img img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

/* La segunda foto baja, como en la referencia: el desnivel es lo que hace que
   se lea como un mosaico y no como dos fotos puestas al lado. */
/* Altura en píxeles y no proporción: al lado de cuatro tarjetas altas, las
   fotos por proporción salían demasiado bajas y la columna quedaba floja. */
.eco-why-mosaico-1,
.eco-why-mosaico-2 {
	height: 300px;
}

.eco-why-mosaico-2 {
	margin-top: 56px;
}

@media (min-width: 1200px) {
	.eco-why-mosaico-1,
	.eco-why-mosaico-2 {
		height: 340px;
	}
}

@media (max-width: 575px) {
	.eco-why-mosaico-1,
	.eco-why-mosaico-2 {
		height: 220px;
	}

	.eco-why-mosaico-2 {
		margin-top: 32px;
	}
}

.eco-why-cards {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	list-style: none;
	margin: 26px 0 0;
	padding: 0;
}

.eco-why-card {
	background-color: var(--white);
	border-radius: var(--eco-radius);
	padding: 26px 22px;
}

.eco-why-card-icon {
	align-items: center;
	background-color: var(--eco-accent);
	border-radius: 14px;
	color: var(--eco-secondary);
	display: flex;
	height: 58px;
	justify-content: center;
	margin-bottom: 14px;
	width: 58px;
}

.eco-why-card-icon .eco-svg,
.eco-why-card-icon .eco-ec-svg {
	height: 30px;
	width: 30px;
}

.eco-why-card-title {
	color: var(--eco-secondary);
	margin: 0 0 8px;
}

.eco-why-card-text {
	color: var(--text-color);
	font-size: 15px;
	line-height: 1.6;
	margin: 0;
}

@media (max-width: 575px) {
	.eco-why-cards {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   27.5 Cómo se reserva
   Banda clara con las curvas de nivel del material del cliente, y los pasos
   escalonados. Aquí la numeración sí dice algo: es una secuencia.
   -------------------------------------------------------------------------- */
.eco-pasos {
	background-color: var(--eco-accent);
	position: relative;
}

.eco-pasos::before {
	background-image: url('assets/images/topografico.svg');
	background-position: center;
	background-repeat: repeat;
	background-size: 720px auto;
	content: "";
	inset: 0;
	opacity: 0.45;
	pointer-events: none;
	position: absolute;
}

.eco-pasos > .container {
	position: relative;
	z-index: 1;
}

.eco-pasos-lista {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.eco-paso {
	background-color: var(--white);
	border-radius: var(--eco-radius);
	padding: 26px 22px;
	position: relative;
}

/* Escalonado: el segundo baja y el tercero sube, como en la referencia. */
@media (min-width: 992px) {
	.eco-paso:nth-child(2) {
		margin-top: 46px;
	}

	.eco-paso:nth-child(3) {
		margin-top: -46px;
	}
}

/* El número no es adorno: dice en qué orden va el paso. Al 16 % daba 1,29:1 y
   no se veía; sube hasta pasar el mínimo de texto grande. */
.eco-paso-num {
	color: rgba(var(--eco-secondary-rgb), 0.66);
	font-size: 34px;
	font-weight: 800;
	line-height: 1;
	position: absolute;
	right: 20px;
	top: 18px;
}

.eco-paso-icon {
	align-items: center;
	background-color: var(--eco-accent);
	border-radius: 14px;
	color: var(--eco-secondary);
	display: flex;
	height: 58px;
	justify-content: center;
	margin-bottom: 14px;
	width: 58px;
}

.eco-paso-icon .eco-svg,
.eco-paso-icon .eco-ec-svg {
	height: 30px;
	width: 30px;
}

.eco-paso-title {
	color: var(--eco-secondary);
	margin: 0 0 8px;
}

.eco-paso-text {
	color: var(--text-color);
	font-size: 15px;
	line-height: 1.6;
	margin: 0;
}

@media (max-width: 575px) {
	.eco-pasos-lista {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   28. Contacto con la composición de la plantilla
   Bloque de dos columnas con los datos en lista y una foto cuadrada; el mapa a
   todo lo ancho; y la tarjeta montada sobre el mapa. Colores y tipografía de
   Ecosportour.
   ========================================================================== */

/* --------------------------------------------------------------------------
   28.1 Bloque de datos y foto
   Los datos van en lista vertical y no en rejilla de tarjetas: la dirección
   ocupa seis líneas y el resto una, así que en rejilla salían descuadradas.
   En lista, cada fila ocupa lo que necesita y nada desencaja.
   -------------------------------------------------------------------------- */
.eco-contact-split {
	align-items: center;
	display: grid;
	gap: 64px;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.eco-contact-title {
	color: var(--eco-secondary);
	font-size: clamp(28px, 3.2vw, 40px);
	line-height: 1.18;
	margin: 0 0 18px;
}

.eco-contact-intro {
	color: var(--text-color);
	font-size: 17px;
	line-height: 1.7;
	margin: 0 0 34px;
	max-width: 520px;
}

.eco-contact-datos {
	display: flex;
	flex-direction: column;
	gap: 26px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.eco-contact-dato {
	align-items: flex-start;
	display: flex;
	gap: 20px;
}

/* Dibujos propios en disco crema, no los glifos de la tipografía de la
   plantilla: eran finos, y peor, no distinguían entre reservas, WhatsApp y
   emergencias —tres teléfonos casi iguales—. Ahora WhatsApp lleva su logotipo
   y las urgencias un teléfono con aviso. */
.eco-contact-icon {
	align-items: center;
	background-color: var(--eco-accent);
	border-radius: 50%;
	color: var(--eco-secondary);
	display: flex;
	flex: 0 0 auto;
	height: 48px;
	justify-content: center;
	width: 48px;
}

.eco-contact-icon .eco-svg {
	height: 23px;
	width: 23px;
}

/* El logotipo de WhatsApp es macizo: al mismo tamaño pesaba más que el resto. */
.eco-contact-icon .eco-svg[fill="currentColor"] {
	height: 21px;
	width: 21px;
}

.eco-via-icon .eco-svg {
	height: 22px;
	width: 22px;
}

.eco-contact-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.eco-contact-label {
	color: var(--text-color);
	font-size: 15px;
}

.eco-contact-value {
	color: var(--eco-secondary);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.5;
}

a.eco-contact-value:hover,
a.eco-contact-value:focus-visible {
	color: var(--eco-button);
	text-decoration: underline;
}

/* El teléfono de reservas es el dato por el que se entra a esta página. */
.eco-contact-dato.es-destacado .eco-contact-value {
	font-size: clamp(22px, 2.4vw, 28px);
	font-weight: 700;
}

.eco-contact-foto {
	border-radius: var(--eco-radius);
	overflow: hidden;
}

.eco-contact-foto img {
	aspect-ratio: 1 / 1;
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

@media (max-width: 991px) {
	.eco-contact-split {
		gap: 40px;
		grid-template-columns: 1fr;
	}

	/* En una columna, la foto va primero: entra por la imagen y luego lee. */
	.eco-contact-foto {
		order: -1;
	}
}

/* --------------------------------------------------------------------------
   28.2 Mapa a todo lo ancho
   -------------------------------------------------------------------------- */
.eco-mapa {
	line-height: 0;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.eco-mapa iframe {
	border: 0;
	display: block;
	height: 520px;
	width: 100%;
}

@media (max-width: 767px) {
	.eco-mapa iframe {
		height: 360px;
	}
}

/* --------------------------------------------------------------------------
   28.3 Tarjeta montada sobre el mapa
   Sube y tapa el tercio inferior del mapa, como en la referencia. El margen
   negativo solo se aplica si hay mapa: sin él, la tarjeta se saldría hacia
   arriba sobre la sección anterior.
   -------------------------------------------------------------------------- */
.eco-contacto.monta-mapa {
	padding-top: 0;
	position: relative;
	z-index: 2;
}

.eco-contacto.monta-mapa .eco-form-panel {
	margin-top: -170px;
}

.eco-form-panel {
	background-color: var(--white);
	border: 1px solid var(--stoke-color);
	border-radius: var(--eco-radius);
	box-shadow: 0 30px 60px rgba(var(--eco-secondary-rgb), 0.09);
	margin-left: auto;
	margin-right: auto;
	max-width: 1100px;
	padding: 42px;
}

.eco-form-panel .box-title {
	margin-bottom: 28px;
}

@media (max-width: 991px) {
	.eco-contacto.monta-mapa .eco-form-panel {
		margin-top: -90px;
	}

	.eco-form-panel {
		padding: 26px;
	}
}

@media (max-width: 575px) {
	.eco-contacto.monta-mapa .eco-form-panel {
		margin-top: -50px;
	}

	.eco-form-panel {
		padding: 20px;
	}
}

/* --------------------------------------------------------------------------
   28.4 Las tres vías directas
   Es lo que se ve mientras el formulario no funcione. No es un aviso de error:
   son tres caminos reales, cada uno con lo que tarda en responder, para que el
   visitante elija el que le conviene.
   -------------------------------------------------------------------------- */
.eco-vias {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.eco-via {
	background-color: var(--eco-accent);
	border-radius: var(--eco-radius);
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 26px 22px;
}

.eco-via-icon {
	align-items: center;
	background-color: var(--white);
	border-radius: 50%;
	color: var(--eco-secondary);
	display: flex;
	font-size: 22px;
	height: 52px;
	justify-content: center;
	margin-bottom: 6px;
	width: 52px;
}

.eco-via-title {
	color: var(--eco-secondary);
	font-size: 19px;
	font-weight: 700;
}

.eco-via-text {
	color: var(--text-color);
	font-size: 15px;
	line-height: 1.6;
}

/* El botón cierra la tarjeta, aunque los textos midan distinto.
   Sin text-transform: el botón lleva el correo y el teléfono literales, y con
   el "capitalize" que trae el tema salía "Info@Ecosportour.Com". */
.eco-via .tf-btn {
	justify-content: center;
	margin-top: auto;
	padding-top: 12px;
	padding-bottom: 12px;
	text-transform: none;
	width: 100%;
}

.eco-form-visita {
	color: var(--text-color);
	margin: 26px 0 0;
	text-align: center;
}

.eco-form-visita a {
	color: var(--eco-secondary);
	font-weight: 600;
	text-decoration: underline;
}

@media (max-width: 767px) {
	.eco-vias {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   28.5 Formulario de Fluent Forms dentro de la tarjeta
   Se le da el mismo trato que a la caja del hero, que es el único patrón de
   campos que ya tenía el tema. Así, el día que el formulario funcione, no
   aparece con la pinta de fábrica del plugin.
   -------------------------------------------------------------------------- */
.eco-form-panel .ff-el-group {
	margin-bottom: 20px;
}

.eco-form-panel .ff-el-input--label label {
	color: var(--eco-secondary);
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 8px;
}

.eco-form-panel input[type="text"],
.eco-form-panel input[type="email"],
.eco-form-panel input[type="tel"],
.eco-form-panel input[type="date"],
.eco-form-panel input[type="number"],
.eco-form-panel select,
.eco-form-panel textarea {
	background-color: var(--white);
	border: 1px solid rgba(var(--eco-secondary-rgb), 0.22);
	border-radius: 12px;
	color: var(--eco-secondary);
	font-size: 16px;
	padding: 0 14px;
	width: 100%;
}

.eco-form-panel input[type="text"],
.eco-form-panel input[type="email"],
.eco-form-panel input[type="tel"],
.eco-form-panel input[type="date"],
.eco-form-panel input[type="number"],
.eco-form-panel select {
	height: 50px;
}

.eco-form-panel textarea {
	min-height: 150px;
	padding: 14px;
	resize: vertical;
}

.eco-form-panel input:focus,
.eco-form-panel select:focus,
.eco-form-panel textarea:focus {
	border-color: var(--eco-button);
	outline: 2px solid rgba(var(--eco-secondary-rgb), 0.18);
	outline-offset: 1px;
}

.eco-form-panel .ff-btn-submit {
	background-color: var(--eco-button);
	border: 0;
	border-radius: 12px;
	color: var(--white);
	font-weight: 700;
	letter-spacing: 0.04em;
	min-height: 52px;
	padding: 0 34px;
	text-transform: uppercase;
}

.eco-form-panel .ff-btn-submit:hover,
.eco-form-panel .ff-btn-submit:focus-visible {
	background-color: var(--eco-secondary);
}

/* ==========================================================================
   29. Destino que se reserva fuera
   Cuyabeno se reserva en la web del lodge propio. Los botones de cada tarjeta
   ya llevan allí, pero eso solo se ve al mirar de cerca. Esta banda lo dice
   antes y en grande, para que nadie recorra los cuatro tours preguntándose por
   qué le sacan de la web.
   ========================================================================== */
.eco-destino-externo {
	align-items: center;
	background-color: var(--eco-secondary);
	border-radius: var(--eco-radius);
	display: flex;
	flex-wrap: wrap;
	gap: 22px 32px;
	margin-bottom: 34px;
	padding: 30px 34px;
	position: relative;
}

/* Las curvas de nivel del material del cliente, muy tenues: la banda es maciza
   y sin nada encima parecía un bloque plano. */
.eco-destino-externo::before {
	background-image: url('assets/images/topografico.svg');
	background-position: center;
	background-repeat: repeat;
	background-size: 640px auto;
	border-radius: inherit;
	content: "";
	inset: 0;
	opacity: 0.1;
	pointer-events: none;
	position: absolute;
}

.eco-destino-externo-texto {
	flex: 1 1 320px;
	position: relative;
	z-index: 1;
}

.eco-destino-externo-titulo {
	color: var(--white);
	font-size: clamp(20px, 2.2vw, 26px);
	line-height: 1.25;
	margin: 0;
}

.eco-destino-externo-desc {
	color: rgba(255, 255, 255, 0.88);
	font-size: 16px;
	line-height: 1.6;
	margin: 8px 0 0;
	max-width: 640px;
}

/* Botón claro sobre la banda azul: es la acción principal de esta página y
   tiene que ganarle a los "BOOK NOW" de las tarjetas de abajo. */
.eco-destino-externo-btn {
	align-items: center;
	background-color: var(--white);
	border: 0;
	color: var(--eco-secondary);
	display: inline-flex;
	flex: 0 0 auto;
	font-size: 16px;
	gap: 10px;
	justify-content: center;
	min-height: 56px;
	padding: 0 30px;
	position: relative;
	z-index: 1;
}

.eco-destino-externo-btn:hover,
.eco-destino-externo-btn:focus-visible {
	background-color: var(--eco-accent);
	color: var(--eco-secondary);
}

.eco-destino-externo-icono {
	display: block;
	height: 18px;
	width: 18px;
}

.eco-destino-externo-icono svg {
	display: block;
	height: 100%;
	width: 100%;
}

@media (max-width: 575px) {
	.eco-destino-externo {
		padding: 24px 22px;
	}

	.eco-destino-externo-btn {
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   29.1 Días de salida en la tarjeta
   Es el dato que más se pregunta antes de reservar. Algunos cruceros lo tienen
   larguísimo —una salida por cada duración—, así que se corta en una línea y
   el detalle completo queda en la ficha y en el title del elemento.
   -------------------------------------------------------------------------- */
.eco-card-dias {
	align-items: center;
	display: flex;
	gap: 6px;
	min-width: 0;
}

.eco-card-dias .eco-svg {
	color: var(--eco-secondary);
	flex: 0 0 auto;
	height: 16px;
	width: 16px;
}

.eco-card-dias-texto {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* La fila de datos pasa a tres elementos: que puedan repartirse el ancho. */
.eco-tour-card .content-info-middle {
	flex-wrap: wrap;
	row-gap: 6px;
}

.eco-tour-card .content-info-middle > .info {
	min-width: 0;
}

/* --------------------------------------------------------------------------
   29.2 Itinerario corto, sin desplegables
   Cuando ningún paso tiene descripción no hay nada que desplegar, así que se
   pinta como lista. La fila original repartía el espacio entre el visto y la
   flecha; sin flecha, el título se iba al extremo derecho.
   -------------------------------------------------------------------------- */
/* Vale tanto para el itinerario entero sin descripciones como para una parada
   suelta sin describir dentro de un acordeón: sin flecha, el título se iba al
   extremo derecho. */
.wg-tour-plan .plan-topic.es-fijo {
	cursor: default;
	gap: 14px;
	justify-content: flex-start;
}

.wg-tour-plan .plan-topic.es-fijo .title-plan {
	flex: 1 1 auto;
	margin: 0;
	text-align: left;
}

/* Sin contenido desplegable, las filas pueden ir más juntas. */
.wg-tour-plan.es-corto .tour-plan-item + .tour-plan-item {
	margin-top: 4px;
}

/* --------------------------------------------------------------------------
   29.3 Flecha del precio hacia el botón
   Solo cuando el enlace del precio y el BOOK NOW llevan al mismo sitio —los
   tours que se reservan fuera—. Ahí la flecha aclara que el precio está en ese
   botón. Donde llevan a sitios distintos no se pone: diría que el texto es la
   etiqueta del botón, y no lo es.
   -------------------------------------------------------------------------- */
a.eco-price-ask.es-mismo-destino {
	align-items: center;
	display: inline-flex;
	gap: 6px;
}

.eco-price-flecha {
	display: block;
	height: 15px;
	transition: transform 0.25s ease;
	width: 15px;
}

.eco-price-flecha svg {
	display: block;
	height: 100%;
	width: 100%;
}

.eco-tour-card:hover .eco-price-flecha,
a.eco-price-ask.es-mismo-destino:hover .eco-price-flecha {
	transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   29.4 Sellos de certificación antes del pie
   El cliente los quiere al final y no debajo del hero: son la prueba que
   cierra, no la que abre. Un filete arriba los separa de la llamada final sin
   meter otra banda de color.
   -------------------------------------------------------------------------- */
.eco-cta-section + .eco-social-proof {
	border-top: 1px solid var(--stoke-color);
}

/* ==========================================================================
   30. El contador de la banda azul
   La cifra del cliente —200.000 turistas en 15 años— como prueba central de
   "Why book direct". El número llega del servidor completo (sin JavaScript se
   ve entero); el guion lo pone a cero y lo hace contar al entrar en pantalla.
   ========================================================================== */
.eco-why-cifra {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 6px auto 40px;
	text-align: center;
}

.eco-why-cifra-num {
	color: var(--white);
	font-size: clamp(44px, 6vw, 64px);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	line-height: 1;
}

/* El pulso de remate, solo cuando el conteo termina. */
@media (prefers-reduced-motion: no-preference) {
	.eco-why-cifra.ha-contado .eco-why-cifra-num {
		animation: eco-pulso 0.35s ease-out 1;
	}
}

@keyframes eco-pulso {
	50% {
		transform: scale(1.04);
	}
}

.eco-why-cifra-barra {
	background-color: rgba(255, 255, 255, 0.25);
	border-radius: 2px;
	display: block;
	height: 3px;
	margin-top: 16px;
	overflow: hidden;
	width: 180px;
}

.eco-why-cifra-progreso {
	background-color: var(--eco-accent);
	border-radius: 2px;
	display: block;
	height: 100%;
	width: 100%;
}

.eco-why-cifra-etiqueta {
	color: var(--eco-accent);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.14em;
	margin-top: 14px;
	text-transform: uppercase;
}

.eco-why-cifra-frase {
	color: rgba(255, 255, 255, 0.78);
	font-size: 14px;
	margin-top: 6px;
}

/* ==========================================================================
   31. Preguntas frecuentes: respetar la redacción original
   La plantilla capitaliza cada palabra del título de la pregunta, y eso
   destroza el texto en los dos idiomas: en inglés salía "Why A Box Lunch
   Instead Of A Restaurant Lunch?" y, traducido, "¿Cómo Es El Clima?". Se
   muestra tal y como lo escribe el cliente.
   ========================================================================== */
.wg-faq .faq-item .faq-top,
.wg-faq .faq-item .question-title {
	text-transform: none;
}

/* Enlace "Get directions" bajo la dirección del pie. */
.footer .eco-footer-mapa {
	margin-top: 4px;
}

.footer .eco-footer-mapa a {
	color: var(--eco-primary);
	font-size: 14px;
	text-decoration: underline;
}

/* ==========================================================================
   32. Cabecera con siete entradas
   Al subir los destinos a primer nivel el menú pasó de 6 a 7 entradas y en
   pantallas de 1200-1400 px chocaba con el teléfono. Se aprieta la separación
   y el teléfono solo aparece cuando de verdad sobra sitio.
   ========================================================================== */
@media (min-width: 992px) and (max-width: 1439px) {
	.header .menu-nav {
		gap: 20px;
	}

	.header .menu-nav .nav-link {
		font-size: 15px;
	}
}

@media (max-width: 1399px) {
	.eco-header-phone {
		display: none !important;
	}
}

/* Tours sin tarifa publicada: la caja lateral muestra solo la nota, sin el
   hueco del precio que quedaría vacío encima. */
.eco-sidebar-price.es-solo-nota .note {
	font-size: 15px;
	line-height: 1.5;
}

/* La tarjeta de viajes privados no es un destino: se distingue con el color
   de acento y su "Ask us" en lugar del número de tours. */
.eco-region-privados .eco-region-link {
	background-color: var(--eco-accent);
	border-color: transparent;
}

.eco-region-privados .eco-region-count {
	font-weight: 600;
}

/* Acceso al tour en privado o a medida, bajo los botones de reserva. No es un
   tercer botón: es una nota pulsable, para no competir con BOOK NOW. */
/* El cliente pidió que el tour privado se VEA: antes era un recuadro crema
   discreto que pasaba inadvertido ("casi no los vimos"). Ahora es celeste de
   marca a caja completa, con borde y flecha: lee como botón, no como nota. */
.eco-sidebar-privado {
	align-items: center;
	background-color: var(--eco-primary);
	border: 2px solid var(--eco-secondary);
	border-radius: 12px;
	box-shadow: 0 6px 18px rgba(var(--eco-secondary-rgb), 0.18);
	display: flex;
	gap: 12px;
	margin-top: 16px;
	padding: 16px 14px;
	position: relative;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.eco-sidebar-privado::after {
	color: var(--eco-secondary);
	content: "\2192";
	font-size: 20px;
	font-weight: 700;
	margin-left: auto;
}

.eco-sidebar-privado:hover,
.eco-sidebar-privado:focus-visible {
	background-color: var(--eco-primary);
	box-shadow: 0 10px 26px rgba(var(--eco-secondary-rgb), 0.3);
	transform: translateY(-2px);
}

.eco-sidebar-privado-icono .eco-svg {
	color: var(--eco-secondary);
	height: 26px;
	width: 26px;
}

.eco-sidebar-privado-texto strong {
	color: var(--eco-secondary);
	display: block;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.eco-sidebar-privado-texto .subtitle {
	display: block;
	font-size: 13px;
	line-height: 1.45;
	margin-top: 2px;
}

/* En la tarjeta beige el círculo del icono también es beige y se perdía:
   allí va en blanco. */
.eco-region-privados .eco-region-icon {
	background-color: var(--white);
}

/* ==========================================================================
   33. Ventana de promoción
   Se abre sola a los dos segundos y media de entrar, una vez por semana y
   por visitante. La caja usa el azul petróleo de marca con la foto al
   costado; en móvil la foto pasa arriba y todo cabe sin desbordar.
   ========================================================================== */

.eco-promo {
	align-items: center;
	display: flex;
	inset: 0;
	justify-content: center;
	padding: 20px;
	position: fixed;
	z-index: 1200;
}

.eco-promo[hidden] {
	display: none;
}

.eco-promo-velo {
	background-color: rgba(11, 31, 46, 0.55);
	inset: 0;
	position: absolute;
}

.eco-promo-caja {
	animation: eco-promo-entra 0.35s ease-out;
	background-color: var(--eco-secondary);
	border-radius: 14px;
	box-shadow: 0 30px 80px rgba(11, 31, 46, 0.45);
	color: var(--white);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	max-width: 720px;
	overflow: hidden;
	position: relative;
	width: 100%;
}

.eco-promo-caja.sin-foto {
	grid-template-columns: minmax(0, 1fr);
	max-width: 520px;
}

@keyframes eco-promo-entra {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.eco-promo-caja {
		animation: none;
	}
}

.eco-promo-foto {
	background-position: center;
	background-size: cover;
	min-height: 100%;
}

.eco-promo-contenido {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 34px 32px;
}

.eco-promo-etiqueta {
	color: var(--eco-primary);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	margin: 0;
	text-transform: uppercase;
}

.eco-promo-titulo {
	color: var(--white);
	font-size: 26px;
	line-height: 1.2;
	margin: 0;
}

.eco-promo-texto {
	color: rgba(255, 255, 255, 0.85);
	font-size: 15px;
	line-height: 1.55;
	margin: 0;
}

.eco-promo-boton {
	align-self: flex-start;
	margin-top: 6px;
}

.eco-promo-nota {
	color: rgba(255, 255, 255, 0.55);
	font-size: 12px;
	line-height: 1.5;
	margin: 4px 0 0;
}

.eco-promo-cerrar {
	align-items: center;
	background-color: rgba(255, 255, 255, 0.14);
	border: none;
	border-radius: 50%;
	color: var(--white);
	cursor: pointer;
	display: flex;
	font-size: 22px;
	height: 36px;
	justify-content: center;
	line-height: 1;
	position: absolute;
	right: 12px;
	top: 12px;
	transition: background-color 0.2s ease;
	width: 36px;
	z-index: 1;
}

.eco-promo-cerrar:hover,
.eco-promo-cerrar:focus-visible {
	background-color: rgba(255, 255, 255, 0.3);
}

@media (max-width: 575px) {
	.eco-promo-caja {
		grid-template-columns: minmax(0, 1fr);
		max-width: 420px;
	}

	.eco-promo-foto {
		min-height: 150px;
	}

	.eco-promo-contenido {
		padding: 24px 22px;
	}

	.eco-promo-titulo {
		font-size: 21px;
	}
}

/* ==========================================================================
   34. Plataformas donde reservar
   Segunda fila de la barra de prueba social: los logos de Viator,
   GetYourGuide y compañía, enlazados al perfil real de Ecosportour. Las
   insignias certifican; estos venden. Logos pequeños y parejos para que la
   fila acompañe sin competir con la valoración.
   ========================================================================== */

.eco-proof-plataformas {
	align-items: center;
	border-top: 1px solid rgba(var(--eco-secondary-rgb), 0.12);
	display: flex;
	flex-wrap: wrap;
	gap: 14px 22px;
	justify-content: center;
	margin-top: 14px;
	padding-top: 14px;
}

.eco-proof-plataformas-titulo {
	color: rgba(var(--eco-secondary-rgb), 0.7);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.eco-proof-plataformas-logos {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	justify-content: center;
}

.eco-proof-plataformas-logos img {
	border-radius: 6px;
	display: block;
	height: 34px;
	transition: transform 0.2s ease;
	width: auto;
}

.eco-proof-plataformas-logos a:hover img,
.eco-proof-plataformas-logos a:focus-visible img {
	transform: translateY(-2px);
}

/* El botón de mapa del pie: la línea "Get directions" pasaba inadvertida y el
   cliente pidió un botón. Contorno claro sobre el fondo oscuro, como el de
   WHATSAPP de la columna vecina. */
.eco-footer-mapa-btn {
	align-items: center;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 8px;
	color: var(--white);
	display: inline-flex;
	font-size: 13px;
	font-weight: 600;
	gap: 8px;
	margin-top: 10px;
	padding: 9px 16px;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.eco-footer-mapa-btn:hover,
.eco-footer-mapa-btn:focus-visible {
	background-color: rgba(255, 255, 255, 0.12);
	border-color: var(--white);
	color: var(--white);
}

.eco-footer-mapa-btn .icon-MapPin {
	font-size: 15px;
}

/* Modo "arte completo" de la promoción: el diseño terminado del cliente se
   muestra tal cual, clicable entero. La caja se ajusta a la imagen y esta
   nunca desborda la pantalla, ni en alto ni en ancho. */
.eco-promo-caja.solo-arte {
	background: none;
	border-radius: 14px;
	display: block;
	max-width: min(92vw, 620px);
	width: auto;
}

.eco-promo-caja.solo-arte img {
	border-radius: 14px;
	display: block;
	height: auto;
	max-height: 86vh;
	max-width: 100%;
	width: auto;
}

.eco-promo-caja.solo-arte .eco-promo-arte-enlace {
	display: block;
	line-height: 0;
}

/* ==========================================================================
   35. La cabecera respira
   El CHECK AVAILABILITY heredaba el tamaño de botón de página (16px, padding
   de 46px de lado, 54px de alto) y aplastaba al resto del menú. En la
   cabecera se usa la versión compacta; el resto del sitio no cambia.
   ========================================================================== */

#header .header-ct-right .tf-btn {
	border-radius: 10px;
	font-size: 13px;
	letter-spacing: 0.02em;
	min-height: 40px;
	min-width: 0;
	padding: 9px 20px;
}

/* Presentación de la guía de viaje, sobre el listado de artículos. */
.eco-blog-intro {
	color: var(--eco-secondary);
	font-size: 17px;
	line-height: 1.65;
	margin: 0 auto 40px;
	max-width: 760px;
	text-align: center;
}