/* ==========================================================================
   laleonawaterfalltpl — Componentes nuevos del rediseño
   Todos los tamaños de imagen/SVG se mantienen livianos a propósito (ver
   brief-maestro-rediseno: checklist de performance).
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO — contenido sobre el banner (H1, subtítulo, CTAs, badges de confianza)
   -------------------------------------------------------------------------- */
.hero-content {
	position: relative;
	z-index: 10;
	color: #fff;
	max-width: 38.75rem;
	padding: 2rem;
}
.hero-content h1 {
	font-size: 2.5rem;
	line-height: 1.15;
	margin-bottom: 1rem;
	color: #fff !important; /* logo/texto en blanco sobre foto o video, según regla de fotografía del libro de marca */
}
@media (min-width: 1024px) {
	.hero-content h1 { font-size: 3.5rem; }
}
.hero-content p {
	font-family: var(--font-ui);
	font-size: 1.1875rem;
	line-height: 1.6;
	margin-bottom: 1.5rem;
	max-width: 46ch;
}
.hero-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1rem;
}
.hero-badge {
	font-family: var(--font-ui);
	font-size: 1rem;
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.4);
	color: #fff;
	padding: 0.4rem 1rem;
	border-radius: 999px;
	backdrop-filter: blur(2px);
}
.hero-cta-primary {
	display: inline-block;
	background: var(--color-verde-guanacaste);
	color: var(--color-azul-canon);
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 1.125rem;
	padding: 0.85rem 1.75rem;
	border-radius: 0.5rem;
	margin-right: 0.75rem;
	transition: background 0.15s ease, color 0.15s ease;
}
.hero-cta-primary:hover {
	background: var(--color-azul-canon);
	color: #fff;
}
.hero-cta-secondary {
	display: inline-block;
	background: transparent;
	border: 1px solid #fff;
	color: #fff;
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 1.125rem;
	padding: 0.85rem 1.75rem;
	border-radius: 0.5rem;
}

/* Video de fondo del hero — opcional, se activa solo si hay banner_video */
.hero-video-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
}
.hero-video-overlay {
	position: absolute;
	inset: 0;
	background: var(--color-azul-canon);
	opacity: 0.4; /* velo azul 35-50% de opacidad, regla de fotografía del libro de marca */
	z-index: 2;
}

/* --------------------------------------------------------------------------
   HEADER — clases complementarias (brand-*), sin tocar el markup funcional
   original (Alpine.js, WooCommerce, gtranslate se dejaron intactos).
   -------------------------------------------------------------------------- */
.brand-header {
	box-shadow: 0 1px 0 rgba(52, 79, 89, 0.06);
}
.brand-nav-menu a,
.brand-nav-menu--mobile a {
	font-family: var(--font-ui);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	position: relative;
	transition: color 0.15s ease;
}
.brand-nav-menu a::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 0;
	height: 2px;
	background: var(--color-verde-guanacaste);
	transition: width 0.2s ease;
}
.brand-nav-menu a:hover::after { width: 100%; }
.brand-logo img { transition: transform 0.15s ease; }
.brand-logo:hover img { transform: scale(1.04); }
.brand-menu-toggle { color: inherit; }

/* --------------------------------------------------------------------------
   FOOTER — mismas clases complementarias, contenido/lógica sin cambios.
   -------------------------------------------------------------------------- */
.brand-footer-label {
	display: block;
	color: var(--color-verde-guanacaste);
	margin-bottom: 1rem;
}
.brand-footer-nav a {
	font-family: var(--font-ui);
	font-size: 0.875rem;
	letter-spacing: 0.05em;
	transition: color 0.15s ease;
}
.brand-footer-nav a:hover { color: var(--color-verde-guanacaste); }
.brand-footer-social a { transition: opacity 0.15s ease; }
.brand-footer-social a:hover { opacity: 0.7; }
.footer-logo {
	font-family: var(--font-display);
	font-size: 1.125rem;
}

/* --------------------------------------------------------------------------
   GALERÍA — mismas 3 fotos ya usadas (con alt real), ahora en grid parejo
   con lightbox nativo (<dialog>, sin librería) al hacer clic.
   -------------------------------------------------------------------------- */
.brand-gallery-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	max-width: var(--content-max);
	margin: 0 auto;
	padding: 3rem 1.5rem;
}
@media (max-width: 640px) {
	.brand-gallery-grid { grid-template-columns: 1fr; }
}
.brand-gallery-item {
	display: block;
	border: none;
	padding: 0;
	background: none;
	cursor: zoom-in;
	border-radius: 0.5rem;
	overflow: hidden;
	aspect-ratio: 4 / 3;
}
.brand-gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.2s ease;
}
.brand-gallery-item:hover img { transform: scale(1.04); }
.brand-lightbox {
	border: none;
	border-radius: 0.5rem;
	padding: 0;
	max-width: 90vw;
	max-height: 90vh;
	background: transparent;
}
.brand-lightbox::backdrop {
	background: rgba(52, 79, 89, 0.85);
}
.brand-lightbox img {
	display: block;
	max-width: 90vw;
	max-height: 90vh;
	border-radius: 0.375rem;
}
.brand-lightbox-close {
	position: fixed;
	top: 1.5rem;
	right: 1.5rem;
	background: #fff;
	border: none;
	border-radius: 999px;
	width: 36px;
	height: 36px;
	font-size: 1.125rem;
	cursor: pointer;
	color: var(--color-azul-canon);
}

/* --------------------------------------------------------------------------
   BARRA DE COTIZACIÓN — hero. El "Experience" siempre redirige a una URL
   real y verificada. Adultos/pickup van como parámetros de URL, sin
   prellenar todavía el formulario real (ver nota en content-quote-bar.php).
   -------------------------------------------------------------------------- */
.quote-bar {
	position: relative;
	z-index: 6;
	background: #fff;
	border-radius: 0.75rem;
	box-shadow: 0 8px 24px rgba(52, 79, 89, 0.15);
	max-width: var(--content-max);
	margin: -3rem auto 0;
	padding: 1.5rem;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}
@media (min-width: 900px) {
	.quote-bar {
		grid-template-columns: 1.3fr 1fr 1.2fr auto;
		align-items: end;
		margin-top: -3.5rem;
	}
}
.quote-bar__field { display: flex; flex-direction: column; gap: 0.4rem; }
.quote-bar__field select,
.quote-bar__field input[type="date"] {
	font-family: var(--font-ui);
	font-size: 0.9375rem;
	color: var(--color-azul-canon);
	border: 1px solid var(--color-bruma);
	border-radius: 0.375rem;
	padding: 0.65rem 0.75rem;
	background: #fff;
	width: 100%;
}
.quote-bar__submit {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.4rem;
}
.quote-bar__note {
	font-family: var(--font-ui);
	font-size: 0.75rem;
	color: var(--color-niebla);
}
.quote-bar__submit button {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 0.9375rem;
	background: var(--color-verde-guanacaste);
	color: var(--color-azul-canon);
	border: none;
	border-radius: 0.5rem;
	padding: 0.8rem 1.75rem;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease;
}
.quote-bar__submit button:hover { background: var(--color-azul-canon); color: #fff; }

/* --------------------------------------------------------------------------
   CONFIANZA — 4 recuadros con ícono, debajo del hero.
   -------------------------------------------------------------------------- */
.trust-features-section {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	max-width: var(--content-max);
	margin: 2rem auto 0;
	padding: 0 1.5rem 3rem;
}
@media (min-width: 640px) {
	.trust-features-section { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.trust-features-section { grid-template-columns: repeat(4, 1fr); }
}
.trust-feature {
	background: var(--color-nube);
	border-radius: 0.625rem;
	padding: 1.5rem;
}
.trust-feature svg {
	width: 26px;
	height: 26px;
	color: var(--color-verde-guanacaste-dark);
	margin-bottom: 0.75rem;
}
.trust-feature h3 {
	font-family: var(--font-display);
	font-size: 1.125rem;
	color: var(--color-azul-canon);
	margin-bottom: 0.4rem;
}
.trust-feature p {
	font-family: var(--font-ui);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--color-pizarra-rio);
}

.faq-hero {
	background: var(--color-nube);
	text-align: center;
	padding: 6rem 1.5rem 3rem;
}
.faq-hero h1 {
	color: var(--color-azul-canon);
	margin: 0.5rem 0 1rem;
}
.faq-hero p {
	font-family: var(--font-ui);
	font-size: 1.1875rem;
	line-height: 1.6;
	color: var(--color-pizarra-rio);
	max-width: 56ch;
	margin: 0 auto;
}
.faq-contact-cta {
	text-align: center;
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--color-bruma);
}
.faq-contact-cta p {
	font-family: var(--font-ui);
	font-size: 1.1875rem;
	color: var(--color-pizarra-rio);
	margin-bottom: 1rem;
}

/* --------------------------------------------------------------------------
   PÁGINA DE PRODUCTO (tour) — reskin SOLO visual sobre las clases estándar
   de WooCommerce. No se sobreescribe ningún template de WooCommerce ni de
   WooCommerce Bookings — el formulario de reserva (calendario, adultos/
   niños, botón Book Now) sigue siendo 100% del plugin, intacto.
   -------------------------------------------------------------------------- */
.single-product div.product .product_title {
	font-family: var(--font-display);
	color: var(--color-azul-canon);
	font-size: 2.25rem;
}
.single-product div.product p.price,
.single-product div.product p.price .woocommerce-Price-amount {
	font-family: var(--font-ui);
	font-size: 1.25rem;
	color: var(--color-verde-guanacaste-dark);
	font-weight: 600;
}
.single-product div.product .woocommerce-product-details__short-description {
	font-family: var(--font-ui);
	font-size: 1rem;
	color: var(--color-pizarra-rio);
	line-height: 1.7;
}
.single-product .woocommerce-tabs ul.tabs li {
	font-family: var(--font-ui);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
}
.single-product .woocommerce-tabs ul.tabs li.active {
	border-bottom: 2px solid var(--color-verde-guanacaste);
	color: var(--color-azul-canon);
}
.single-product .woocommerce-tabs .panel {
	font-family: var(--font-ui);
	font-size: 1rem;
	color: var(--color-pizarra-rio);
	line-height: 1.7;
}
.related.products > h2 {
	font-family: var(--font-display);
	color: var(--color-azul-canon);
	text-align: center;
}
.related.products ul.products li.product h3,
.related.products ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font-ui);
	font-weight: 500;
	color: var(--color-azul-canon);
}
/* --------------------------------------------------------------------------
   TARJETAS DE TOUR — grid de 2×2 (no 4 en fila, para que la foto se vea
   bien), layout horizontal: texto a la izquierda, foto a la derecha en
   pantallas medianas+; apiladas en celular para legibilidad. Tipografía
   ajustada al spec real del libro de marca (cuerpo 16/26px). Solo
   visualización: no toca el link de reserva ni su destino.
   -------------------------------------------------------------------------- */
.tours-wrapper {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	max-width: var(--content-max);
	margin: 0 auto;
	padding: 0 1.5rem 3rem;
}
.tour-card {
	background: #fff;
	border-radius: 0.75rem;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(52, 79, 89, 0.12);
	display: flex;
	flex-direction: column;
}
@media (min-width: 640px) {
	.tour-card {
		/* 1 tour por fila, ancho completo. La imagen se alterna: impares
		   (1º, 3º...) a la derecha, pares (2º, 4º...) a la izquierda. */
		flex-direction: row-reverse;
	}
	.tour-card:nth-child(even) {
		flex-direction: row;
	}
}
.tour-card__image {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--color-nube);
	flex-shrink: 0;
}
@media (min-width: 640px) {
	.tour-card__image {
		/* Con 1 tarjeta por fila hay mucho más ancho disponible: la imagen
		   puede ser grande y mantener una proporción de foto normal (4:3)
		   sin que el texto se quede sin espacio. */
		flex: 0 0 50%;
		aspect-ratio: 4 / 3;
	}
}
.tour-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.tour-card__badge {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 2;
	background: var(--color-verde-guanacaste);
	color: var(--color-azul-canon);
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
}
.tour-card__body {
	padding: 2rem;
	display: flex;
	flex-direction: column;
	flex: 1;
	justify-content: center;
}
@media (min-width: 1024px) {
	.tour-card__body { padding: 2.5rem 3rem; }
}
.tour-card__meta {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--color-niebla);
	margin-bottom: 0.5rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.tour-card__title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 2.25rem;
	line-height: 1.2;
	margin: 0 0 0.65rem;
}
.tour-card__title a {
	color: var(--color-azul-canon);
	text-decoration: none;
}
.tour-card__title a:hover { color: var(--color-verde-guanacaste-dark); }
.tour-card__desc {
	font-family: var(--font-ui);
	font-size: 1.1875rem;
	line-height: 1.6;
	color: var(--color-pizarra-rio);
	margin-bottom: 1.25rem;
	max-width: 42ch;
	flex: 1;
}
.tour-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	border-top: 1px solid var(--color-nube);
	padding-top: 1rem;
}
.tour-card__price {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 1.375rem;
	color: var(--color-azul-canon);
}
.tour-card__price .woocommerce-Price-amount { font-weight: 600; }
.tour-card__cta {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 1.125rem;
	background: var(--color-verde-guanacaste);
	color: var(--color-azul-canon);
	padding: 0.85rem 1.75rem;
	border-radius: 0.5rem;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease;
}
.tour-card__cta:hover {
	background: var(--color-azul-canon);
	color: #fff;
}

/* --------------------------------------------------------------------------
   MAPA INTERACTIVO — reemplaza al mapa decorativo estático. Silueta SVG
   original (no de terceros) + marcadores <button> posicionados encima,
   accesibles por teclado. Un solo acento verde por marcador activo, según
   la regla del verde del libro de marca.
   -------------------------------------------------------------------------- */
.interactive-map-section {
	background: #fff;
	padding: 4rem 1.5rem;
	max-width: var(--content-max);
	margin: 0 auto;
}
.interactive-map {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	margin-top: 1.5rem;
}
@media (min-width: 1024px) {
	.interactive-map { flex-direction: row; align-items: stretch; }
}
.interactive-map__canvas {
	position: relative;
	flex: 1 1 60%;
	background: var(--color-nube);
	border-radius: 0.5rem;
	overflow: hidden;
	aspect-ratio: 1 / 1;
}
.interactive-map__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.map-marker {
	position: absolute;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	background: none;
	border: none;
	padding: 0.25rem;
	cursor: pointer;
	font-family: var(--font-ui);
}
.map-marker__dot {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--color-pizarra-rio);
	border: 2px solid #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,0.25);
	display: block;
}
.map-marker--anchor .map-marker__dot,
.map-marker.is-active .map-marker__dot {
	background: var(--color-verde-guanacaste);
	border-color: var(--color-azul-canon);
}
.map-marker__label {
	font-size: 0.6875rem;
	background: rgba(255,255,255,0.9);
	color: var(--color-azul-canon);
	padding: 1px 6px;
	border-radius: 0.25rem;
	white-space: nowrap;
}
.map-marker:focus-visible .map-marker__dot {
	outline: 2px solid var(--color-verde-guanacaste);
	outline-offset: 2px;
}
.interactive-map__panel {
	flex: 1 1 40%;
	background: var(--color-nube);
	border-radius: 0.5rem;
	padding: 1.75rem;
}
.interactive-map__panel h3 {
	margin: 0.25rem 0 0.75rem;
	font-size: 1.5rem;
}
.interactive-map__panel p {
	font-family: var(--font-ui);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--color-pizarra-rio);
}
.map-panel__distance strong {
	color: var(--color-azul-canon);
}
.map-panel__cta {
	display: inline-block;
	margin-top: 1rem;
}

/* --------------------------------------------------------------------------
   INCLUSIONES — sección oscura ("Everything is included, and honestly
   listed"). Usa Azul Cañón, no un casi-negro (ver brand-tokens.css).
   -------------------------------------------------------------------------- */
.inclusions-section {
	background: var(--color-azul-canon);
	color: #fff;
	padding: 4rem 1.5rem;
}
.inclusions-inner {
	max-width: var(--content-max);
	margin: 0 auto;
}
.inclusions-section h2 { color: #fff !important; }
.inclusions-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	max-width: 40rem;
	margin-top: 1.5rem;
}
@media (min-width: 640px) {
	.inclusions-grid { grid-template-columns: 1fr 1fr; }
}
.inclusion-item {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	font-family: var(--font-ui);
	font-size: 1.1875rem;
}
.inclusion-item svg {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	color: var(--color-verde-guanacaste);
}
.inclusions-footnote {
	font-family: var(--font-ui);
	font-size: 0.875rem;
	color: var(--color-bruma);
	margin-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	padding-top: 1rem;
}

/* --------------------------------------------------------------------------
   FAQ — <details>/<summary> nativo (sin JS obligatorio, accesible y
   rastreable por buscadores/IA sin ejecutar JavaScript).
   -------------------------------------------------------------------------- */
/* Más angosto que --content-max a propósito: columna de lectura corta
   mejora la legibilidad de las respuestas del acordeón. */
.faq-section { padding: 4rem 1.5rem; max-width: 40rem; margin: 0 auto; }
.faq-item {
	border-bottom: 1px solid var(--color-bruma);
	padding: 1rem 0;
}
.faq-item summary {
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 1.1875rem;
	color: var(--color-azul-canon);
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
	content: '+';
	color: var(--color-verde-guanacaste-dark);
	font-size: 1.25rem;
	margin-left: 1rem;
}
.faq-item[open] summary::after { content: '–'; }
.faq-item p {
	font-family: var(--font-ui);
	font-size: 1.1875rem;
	line-height: 1.6;
	color: var(--color-pizarra-rio);
	margin-top: 0.75rem;
}