:root {
	--rbl-transition: 0.35s ease;
	--rbl-footer-icon-color: #8ed2f2;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: var(--rbl-font-body);
	color: var(--rbl-color-text);
	background: var(--rbl-color-background);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--rbl-font-heading);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

.container,
.container-fluid {
	width: 100%;
	padding-inline: 20px;
}

.container {
	max-width: 1280px;
	margin-inline: auto;
}

@media (min-width: 640px) {
	.container,
	.container-fluid {
		padding-inline: 32px;
	}
}

@media (min-width: 1024px) {
	.container,
	.container-fluid {
		padding-inline: 48px;
	}
}

/* Header: frosted dark glass, permanently transparent over the hero (never
   turns solid/white) — both bars capped at 1300px and centered rather than
   full-bleed. See CLAUDE.md for the history of earlier header attempts. */

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
}

/* Single Tour forces the header solid (see header.php's own note) — but
 * "solid" alone wasn't enough: position:fixed floated it over whatever was
 * underneath regardless of colour, visibly clipping/covering the top of
 * the gallery/title row on page load. First fix (2026-07-31) was
 * position:static — correct for the "no overlap on load" problem, but as
 * a side effect made the header scroll away with the page (not sticky
 * anymore) and let the .header-frame box-shadow below get visually
 * covered by .tour-single-top's own opaque white background right after
 * it (a static element has no z-index, so it can't paint above a later
 * sibling it geometrically overlaps).
 *
 * position:sticky (client request, same day) fixes both without
 * reintroducing the original bug: a sticky element still occupies its own
 * space in normal flow at its natural position (same as static) until the
 * page is scrolled past it, so there's still no overlap on initial load —
 * content starts right after the header ends, exactly like before. Once
 * scrolled, it pins to top:0 and follows the page like a fixed header
 * would, and because sticky is a positioned value, .site-header's own
 * z-index:100 (see the base rule above) now applies again, so the header
 * — and its shadow — correctly paints above the content scrolling
 * underneath it instead of being covered by it.
 */
#site-header.rbl-header-force-solid {
	position: sticky;
	top: 0;
}

/* Edge-to-edge, flush to the browser's top edge, no border-radius — in
   both the original frosted state and the scrolled solid-white state. A
   soft box-shadow (not a rounded "pill" anymore) is the only edge
   treatment now, showing mainly along the bottom edge against the hero. */
.header-frame {
	box-shadow: 0 4px 30px rgba(0, 0, 0, .3);
}

.header-main {
	position: relative;
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	background: color-mix(in srgb, var(--rbl-color-primary) 50%, transparent);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	transition: background var(--rbl-transition);
}

.site-header.is-scrolled .header-main {
	background: var(--rbl-color-background);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.site-logo-box {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 24px 28px;
}

.logo-slot {
	display: inline-flex;
	align-items: center;
	transition: opacity var(--rbl-transition);
}

.logo-slot--header-white {
	position: absolute;
	top: 50%;
	left: 28px;
	transform: translateY(-50%);
	opacity: 0;
}

.site-header.is-scrolled .logo-slot--header {
	opacity: 0;
}

.site-header.is-scrolled .logo-slot--header-white {
	opacity: 1;
}

.logo-fallback {
	font-family: var(--rbl-font-heading);
	font-weight: 700;
	font-size: 1.25rem;
	color: #fff;
}

.site-header.is-scrolled .logo-fallback {
	color: var(--rbl-color-text);
}

.header-nav-row {
	display: flex;
	align-items: stretch;
	flex: 1;
}

.nav-cell {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-inline: 24px;
	border-left: 1px solid rgba(255, 255, 255, .2);
	color: #fff;
	text-decoration: none;
	font-weight: 500;
	white-space: nowrap;
	transition: color var(--rbl-transition), border-color var(--rbl-transition);
}

.nav-cell:hover {
	color: var(--rbl-color-secondary);
}

.site-header.is-scrolled .nav-cell {
	color: var(--rbl-color-text);
	border-left-color: var(--rbl-color-border);
}

.hamburger-cell {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 70px;
	border: none;
	border-left: 1px solid rgba(255, 255, 255, .2);
	background: transparent;
	cursor: pointer;
	transition: border-color var(--rbl-transition);
}

.site-header.is-scrolled .hamburger-cell {
	border-left-color: var(--rbl-color-border);
}

.hamburger-line {
	display: block;
	width: 24px;
	height: 2px;
	background: #fff;
	transition: background var(--rbl-transition);
}

.site-header.is-scrolled .hamburger-line {
	background: var(--rbl-color-text);
}

/*
 * "Agency Area" link + social icons, pushed to the far right of the nav
 * row via margin-left:auto — fills the space that opened up once Gallery/
 * FAQs were removed from the desktop nav. Lives inside .header-nav-row, so
 * it disappears along with it below 1060px automatically, no separate
 * media-query rule needed. Not reachable on mobile currently (the drawer
 * has its own socials in the contact block, but no Agency Area link) —
 * revisit if that link needs to be reachable there too.
 */
.header-agency-social {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-left: auto;
	padding-inline: 24px;
	border-left: 1px solid rgba(255, 255, 255, .2);
	transition: border-color var(--rbl-transition);
}

.site-header.is-scrolled .header-agency-social {
	border-left-color: var(--rbl-color-border);
}

.header-agency-link {
	padding-right: 20px;
	border-right: 1px solid rgba(255, 255, 255, .2);
	color: #fff;
	text-decoration: none;
	font-weight: 500;
	font-size: .9rem;
	white-space: nowrap;
	transition: color var(--rbl-transition), border-color var(--rbl-transition);
}

.header-agency-link:hover {
	color: var(--rbl-color-secondary);
}

.site-header.is-scrolled .header-agency-link {
	color: var(--rbl-color-text);
	border-right-color: var(--rbl-color-border);
}

.header-socials {
	display: flex;
	align-items: center;
	gap: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.header-socials a {
	display: inline-flex;
	width: 18px;
	height: 18px;
	color: #fff;
	transition: color var(--rbl-transition);
}

.header-socials a svg {
	width: 100%;
	height: 100%;
}

.header-socials a:hover {
	color: var(--rbl-color-secondary);
}

.site-header.is-scrolled .header-socials a {
	color: var(--rbl-color-text);
}

/* Below 1060px ("tablet" and narrower — client-specified cutoff, not the
   usual 768px): full nav row disappears — only logo (left) + hamburger
   (right, normal order) remain. All 7 items are reached through the drawer
   instead. */
@media (max-width: 1060px) {
	.header-nav-row {
		display: none;
	}

	.hamburger-cell {
		border-left: none;
	}
}

/* Left-sliding menu drawer — only reachable below 1060px (the hamburger
   that opens it is hidden above that width, see below). */

.mobile-menu-overlay {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: rgba(0, 0, 0, .5);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--rbl-transition);
}

.mobile-menu-overlay.is-open {
	opacity: 1;
	pointer-events: auto;
}

.mobile-menu {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: 201;
	display: flex;
	flex-direction: column;
	width: min(320px, 85vw);
	background: color-mix(in srgb, var(--rbl-color-primary) 90%, transparent);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	color: #fff;
	padding: 24px;
	overflow-y: auto;
	transform: translateX(-100%);
	transition: transform var(--rbl-transition);
}

.mobile-menu.is-open {
	transform: translateX(0);
}

body.menu-open {
	overflow: hidden;
}

.mobile-menu-top {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 32px;
}

.mobile-menu-close {
	border: none;
	background: transparent;
	color: #fff;
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}

.mobile-menu-nav {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
}

.mobile-menu-nav li {
	border-bottom: 1px solid rgba(255, 255, 255, .15);
}

.mobile-menu-nav li:first-child {
	border-top: 1px solid rgba(255, 255, 255, .15);
}

.mobile-menu-nav a {
	display: block;
	padding: 16px 4px;
	color: #fff;
	text-decoration: none;
	font-weight: 500;
	transition: color var(--rbl-transition);
}

.mobile-menu-nav a:hover {
	color: var(--rbl-color-secondary);
}

/* At 1061px+ the full nav already shows in the top row (see .header-nav-row
   above) — the hamburger/drawer only exist as the narrow-screen fallback. */
@media (min-width: 1061px) {
	.hamburger-cell,
	.mobile-menu,
	.mobile-menu-overlay {
		display: none;
	}
}

.mobile-menu-contact {
	margin-top: auto;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, .15);
}

.mobile-menu-contact-list {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: .9rem;
}

.mobile-menu-contact-list li {
	display: flex;
	align-items: center;
	gap: 10px;
}

.mobile-menu-icon {
	display: inline-flex;
	width: 18px;
	height: 18px;
	color: var(--rbl-color-secondary);
}

.mobile-menu-icon svg {
	width: 100%;
	height: 100%;
}

.mobile-menu-socials {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 14px;
}

.mobile-menu-socials a {
	display: inline-flex;
	width: 20px;
	height: 20px;
	color: #fff;
	transition: color var(--rbl-transition);
}

.mobile-menu-socials a svg {
	width: 100%;
	height: 100%;
}

.mobile-menu-socials a:hover {
	color: var(--rbl-color-secondary);
}

/*
 * Prefooter CTA (inc/prefooter-cta.php, rbl_render_prefooter_cta()) — a
 * full-width banner version of what used to be a sidebar card only on the
 * Blog (template-parts/blog-sidebar.php's old .blog-sidebar-cta, removed
 * 2026-07-31 in favour of this). Same copy/colours (primary blue bg, white
 * heading, translucent-white paragraph, the same .btn-about-cta red pill),
 * just laid out as a wide text-left/button-right banner instead of a
 * stacked card. Being rolled out page by page starting with Home, pending
 * client approval before replicating everywhere except Contáctanos (which
 * already has the contact form as its own CTA) — see CLAUDE.md.
 */
.prefooter-cta {
	background: var(--rbl-color-primary);
	padding-block: 56px;
}

.prefooter-cta-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}

.prefooter-cta-text h2 {
	margin: 0 0 8px;
	color: #fff;
	font-size: clamp(1.5rem, 3vw, 2rem);
}

.prefooter-cta-text p {
	margin: 0;
	color: rgba(255, 255, 255, .85);
	max-width: 560px;
}

.prefooter-cta-btn {
	flex-shrink: 0;
	white-space: nowrap;
	margin-top: 0;
}

@media (max-width: 640px) {
	.prefooter-cta-inner {
		flex-direction: column;
		align-items: flex-start;
	}

	.prefooter-cta-btn {
		width: 100%;
		text-align: center;
	}
}

/*
 * Footer: background color from the plugin's Options module, with an
 * optional background image acting as a tint underneath it (same technique
 * the reference theme documents) — background-blend-mode:multiply is what
 * lets the configured color show through as a tint over the photo rather
 * than hiding it outright; degrades to a flat color when no image is set,
 * since --rbl-footer-bg-image only gets a value via the inline style in
 * footer.php when rbl_get_footer_bg_image_url() actually returns one.
 */
.site-footer {
	background-color: var(--rbl-color-footer-bg);
	background-image: var(--rbl-footer-bg-image, none);
	background-size: cover;
	background-position: center;
	background-blend-mode: multiply;
	color: rgba(255, 255, 255, .85);
}

.footer-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 32px;
	padding-block: 48px;
}

.footer-col h3 {
	margin: 0 0 16px;
	color: #fff;
	font-size: 1.1rem;
}

.footer-brand .footer-logo {
	display: inline-flex;
	margin-bottom: 16px;
}

.footer-company-name {
	margin: 0 0 4px;
	color: rgba(255, 255, 255, .7);
	font-size: .9rem;
}

.footer-address {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 16px;
	color: rgba(255, 255, 255, .7);
	font-size: .9rem;
}

.footer-address .footer-icon {
	flex-shrink: 0;
	margin-top: 2px;
}

.footer-follow-title {
	margin: 0 0 12px;
	color: #fff;
	font-size: .95rem;
	font-weight: 600;
}

.footer-contact-list,
.footer-col.footer-menu ul,
.footer-col.footer-links ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.footer-contact-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: .9rem;
}

.footer-icon {
	display: inline-flex;
	width: 18px;
	height: 18px;
	color: var(--rbl-footer-icon-color);
}

.footer-icon svg {
	width: 100%;
	height: 100%;
}

.footer-col.footer-menu a,
.footer-col.footer-links a {
	color: rgba(255, 255, 255, .85);
	text-decoration: none;
	font-size: .9rem;
	transition: color var(--rbl-transition);
}

.footer-col.footer-menu a:hover,
.footer-col.footer-links a:hover {
	color: var(--rbl-color-secondary);
}

.footer-socials {
	display: flex;
	gap: 14px;
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
}

.footer-socials a {
	display: inline-flex;
	width: 20px;
	height: 20px;
	color: var(--rbl-footer-icon-color);
	transition: color var(--rbl-transition);
}

.footer-socials a svg {
	width: 100%;
	height: 100%;
}

.footer-socials a:hover {
	color: var(--rbl-color-secondary);
}

.footer-bottom {
	padding-block: 20px;
	border-top: 1px solid rgba(255, 255, 255, .15);
	font-size: .85rem;
	color: rgba(255, 255, 255, .6);
}

.footer-bottom a {
	color: inherit;
}

/* Home hero: video or slider mode, pulled from the plugin's Home module */

.home-hero {
	position: relative;
	height: 100dvh;
	min-height: 480px;
	overflow: hidden;
}

.home-hero-media {
	position: absolute;
	inset: 0;
}

.home-hero-video-wrap,
.home-hero-poster {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.home-hero-poster {
	background-size: cover;
	background-position: center;
}

.home-hero-video-wrap video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Iframes (YouTube/Vimeo) can't be object-fit: cover'ed like a real <video> —
   oversize + center + transform is the standard fullscreen-embed crop trick. */
.home-hero-video-wrap iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vw;
	height: 56.25vw;
	min-height: 100vh;
	min-width: 177.78vh;
	transform: translate(-50%, -50%);
	pointer-events: none;
	border: 0;
}

.home-hero-scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .25) 45%, rgba(0, 0, 0, .55) 100%);
	pointer-events: none;
}

/* Decorative brand "wing", same asset as .about-hero-wing/.about-story-wing/
 * .tour-single-wing — sits at .home-hero's own level (siblings of
 * .home-hero-media, not nested inside it), so it flanks the hero
 * identically regardless of hero_mode (video or slider) or which slide is
 * currently active, rather than needing to be duplicated per-mode/per-slide.
 * .home-hero-media has position:absolute but no z-index of its own, so it
 * never establishes a separate stacking context — these still compare
 * directly against .home-hero-scrim (z-index:1) and .home-hero-content
 * (z-index:2, nested inside .home-hero-media) as if all three were flat
 * siblings, keeping the wings above the video/scrim but under the text.
 * .7 opacity matches .about-hero-wing specifically (not .about-story-wing/
 * .tour-single-wing's .1) since this is the same "photo/video hero + dark
 * scrim" context .about-hero-wing already decorates, not a plain white
 * panel that would need a much more subtle treatment.
 */
.home-hero-wing {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	height: 85%;
	width: auto;
	opacity: .25;
	z-index: 1;
	pointer-events: none;
}

.home-hero-wing--left {
	left: 0;
	transform: translateY(-50%) scaleX(-1);
}

.home-hero-wing--right {
	right: 0;
}

/* Mobile only (this project's 640px secondary breakpoint, not the 1060px
   tablet cutoff) — client: "a partir de celular solo deja la ala izquierda
   y borras la derecha par[a] que no se choquen [con el contenido]." */
@media (max-width: 640px) {
	.home-hero-wing--right {
		display: none;
	}
}

.home-hero-content {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #fff;
	max-width: 720px;
	margin-inline: auto;
	padding-inline: 20px;
}

.home-hero-eyebrow {
	margin: 0 0 12px;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-weight: 600;
	font-size: 1.2rem;
	color: var(--rbl-color-secondary);
}

.home-hero-title {
	margin: 0 0 16px;
	color: #fff;
	font-size: clamp(2.3rem, 9.8vw, 5.9rem);
	line-height: 1.15;
	white-space: nowrap;
	text-shadow: 0 2px 12px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .5);
}

/* Letter-by-letter entrance effect (assets/js/home-hero-title-split.js,
 * built 2026-08-01) — the sitewide [data-reveal] system (see the scroll-
 * reveal block further down) deliberately excludes hero/first-viewport
 * content everywhere else in this theme; the Home hero is a documented,
 * client-requested exception, both for this letter split and for reusing
 * [data-reveal="fade-up"] directly on the eyebrow/desc/button below (see
 * CLAUDE.md). JS wraps the title's text in .home-hero-title-letters
 * (aria-hidden) with one .home-hero-title-letter <span> per non-space
 * character, plus a visually-hidden .home-hero-title-sr copy of the full
 * text so screen readers get the real heading, not a letter-by-letter
 * read-out. If JS never runs (blocked, no-JS, prefers-reduced-motion —
 * the script itself skips the split for that last case) the <h1> simply
 * keeps its plain original text, since nothing here hides it by default. */
.home-hero-title-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.home-hero-title-letters {
	display: inline-block;
}

.home-hero-title-letter {
	display: inline-block;
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .5s ease, transform .5s ease;
}

.home-hero-title-letters.is-revealed .home-hero-title-letter {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.home-hero-title-letter {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Tablet/mobile (this project's 1060px breakpoint): the h1 is FORCED onto
 * 2 lines here, not just allowed to wrap if it happens not to fit —
 * client: "a partir de tablet debe de ser el h1 en dos lineas pero sin
 * partir la palabra... gateway debe de bajar completo a la segunda
 * linea." white-space: pre-line (instead of nowrap or plain normal)
 * respects the literal "\n" page-home.php's $rbl_hero_break_title()
 * inserts in place of the title's LAST space, so the break always lands
 * between the last word and everything before it, regardless of whether
 * the full title would actually have fit on one line at a given tablet
 * width — a deliberate content-aware break point, not a width-driven
 * wrap. Line-height cut ~30% from the base rule's 1.15 (client's own
 * figure, "reduce el interlineado en un 30%") so the two stacked lines
 * read tightly together rather than with normal heading spacing between
 * them. Sized well above .home-hero-desc's fixed 1.35rem at every width
 * in this range so the h1 always reads as clearly the dominant element.
 * Approximate/unverified against a real device — this project has no way
 * to preview CSS visually; re-check by eye once live if it looks off. */
@media (max-width: 1060px) {
	.home-hero-title {
		font-size: clamp(2.8rem, 10vw, 5.9rem);
		line-height: 1.05;
		white-space: pre-line;
	}
}

.home-hero-desc {
	margin: 0 0 28px;
	color: rgba(255, 255, 255, .9);
	font-size: 1.35rem;
}

.btn-hero {
	display: inline-block;
	padding: 14px 32px;
	border-radius: 999px;
	background: var(--rbl-color-secondary);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	transition: transform var(--rbl-transition), box-shadow var(--rbl-transition);
}

.btn-hero:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
}

/* Slider mode: stacked slides crossfading via opacity */

.home-hero-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 1s ease;
	pointer-events: none;
}

.home-hero-slide.is-active {
	opacity: 1;
	pointer-events: auto;
}

.home-hero-slide::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .25) 45%, rgba(0, 0, 0, .55) 100%);
	pointer-events: none;
}

.home-hero-slide .home-hero-content {
	position: relative;
	z-index: 2;
	height: 100%;
}

.home-hero-arrow {
	position: absolute;
	top: 50%;
	z-index: 3;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	transition: background var(--rbl-transition);
}

.home-hero-arrow:hover {
	background: #fff;
}

.home-hero-arrow--prev {
	left: 24px;
}

.home-hero-arrow--next {
	right: 24px;
}

.home-hero-dots {
	position: absolute;
	bottom: 28px;
	left: 50%;
	z-index: 3;
	transform: translateX(-50%);
	display: flex;
	gap: 10px;
}

.home-hero-dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, .5);
	cursor: pointer;
	transition: background var(--rbl-transition);
}

.home-hero-dot.is-active {
	background: #fff;
}

/*
 * Home page sections below the Hero (built 2026-07-31) — Nuestros Mejores
 * Tours / Eventos / Blog are plain 3-card grids (no slider), each its own
 * duplicated class per this theme's per-component convention even though
 * the grid mechanism is identical across all three (same reasoning as
 * .tour-related-grid). Testimonios is the one section that's a real
 * carousel (client: "carousel con todos los testimonios", later revised
 * to 3-visible + autoplay + loop — see its own comment block below).
 */
.home-tours-section,
.home-events-section,
.home-blog-section,
.home-testimonials-section {
	padding-block: 80px;
}

@media (max-width: 640px) {
	.home-tours-section,
	.home-events-section,
	.home-blog-section,
	.home-testimonials-section {
		padding-block: 56px;
	}
}

.home-section-cta {
	margin-top: 40px;
	text-align: center;
}

.home-tours-grid,
.home-events-grid,
.home-blog-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

@media (max-width: 1060px) {
	.home-tours-grid,
	.home-events-grid,
	.home-blog-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.home-tours-grid,
	.home-events-grid,
	.home-blog-grid {
		grid-template-columns: 1fr;
	}
}

/* Testimonials carousel — client revision 2026-07-31 (second pass — the
   first version enlarged whichever card happened to be flagged active "in
   place" via flex order, which broke visually the moment the index wrapped
   past the end since flex lays out by DOM order, not by role; the active
   card could land anywhere in the row instead of always centred). Rebuilt
   as a real continuous track: EVERY slide always renders (no
   display:none), sitting in one long flex row (.home-testimonials-track)
   inside a clipped viewport (.home-testimonials-viewport, overflow:hidden)
   — assets/js/home-testimonials-slider.js measures the active slide's
   actual position each tick and sets `transform: translateX()` on the
   track so that slide's centre always lands on the viewport's centre,
   which is what makes the row visibly *shift* rather than a card just
   growing where it stands. Infinite forward loop (client: "no que
   retroceda a la primera sino que se repitan") is done via one cloned
   card at each end of the track (first card's clone appended, last
   card's clone prepended) — advancing onto a clone looks identical to the
   real card it's a copy of, then the JS silently snaps the track back to
   the equivalent real position right after that transition finishes, with
   no visible jump. Section background picks up the same blue-10% tint as
   the Story panel above it (client: "el background que sea también el
   mismo tono"). */
.home-testimonials-section {
	background: color-mix(in srgb, var(--rbl-color-primary) 10%, #fff);
}

.home-testimonials-slider {
	position: relative;
	max-width: 1100px;
	margin-inline: auto;
}

.home-testimonials-viewport {
	overflow: hidden;
	padding-block: 16px;
}

.home-testimonials-track {
	display: flex;
	align-items: center;
	transition: transform .6s ease;
}

.home-testimonial-slide {
	flex: 0 0 320px;
	margin-inline: 16px;
	opacity: .5;
	transform: scale(.82);
	transition: transform .5s ease, opacity .5s ease;
}

.home-testimonial-slide.is-active {
	opacity: 1;
	transform: scale(1);
	z-index: 2;
}

@media (max-width: 640px) {
	.home-testimonial-slide {
		flex-basis: 78vw;
	}
}

.home-testimonial-card {
	padding: 40px 40px;
	border-radius: 16px;
	background: #fff;
	border: 2px solid var(--rbl-color-primary);
	text-align: center;
}

.home-testimonial-quote-icon {
	display: block;
	margin-bottom: 12px;
	font-size: 2.5rem;
	font-family: Georgia, serif;
	line-height: 1;
	color: var(--rbl-color-secondary);
}

.home-testimonial-text {
	margin: 0 0 20px;
	font-size: 1.05rem;
	line-height: 1.75;
	color: var(--rbl-color-text);
}

.home-testimonial-name {
	display: block;
	color: var(--rbl-color-primary);
}

.home-testimonial-role {
	display: block;
	margin-top: 4px;
	font-size: .85rem;
	color: var(--rbl-color-text-muted);
}

.home-testimonials-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 50%;
	background: var(--rbl-color-border);
	color: var(--rbl-color-text);
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--rbl-transition);
}

.home-testimonials-arrow:hover {
	background: color-mix(in srgb, var(--rbl-color-primary) 15%, var(--rbl-color-border));
}

.home-testimonials-arrow--prev {
	left: -56px;
}

.home-testimonials-arrow--next {
	right: -56px;
}

@media (max-width: 900px) {
	.home-testimonials-arrow--prev {
		left: 0;
	}

	.home-testimonials-arrow--next {
		right: 0;
	}

	.home-testimonial-card {
		padding: 32px 24px;
	}
}

.home-testimonials-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 24px;
}

.home-testimonials-dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--rbl-color-border);
	cursor: pointer;
	transition: background var(--rbl-transition);
}

.home-testimonials-dot.is-active {
	background: var(--rbl-color-primary);
}

/*
 * About Us page — deliberately different from the reference theme's own
 * About page (full-bleed hero + solid dark stats bar + bordered/shadowed
 * feature cards): editorial-style instead, tied together by one repeated
 * signature (accent-coloured eyebrow + a short underline beneath each H2)
 * rather than boxes/shadows everywhere.
 */

.section-eyebrow {
	margin: 0 0 8px;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-weight: 600;
	font-size: .85rem;
	color: var(--rbl-color-primary);
}

.section-heading {
	position: relative;
	margin: 0 0 24px;
	padding-bottom: 16px;
	font-size: clamp(1.75rem, 3vw, 2.25rem);
}

.section-heading::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 48px;
	height: 4px;
	border-radius: 2px;
	background: var(--rbl-color-secondary);
}

.section-heading-block {
	max-width: 640px;
	margin: 0 auto 48px;
	text-align: center;
}

.section-heading-block .section-heading::after {
	left: 50%;
	transform: translateX(-50%);
}

/* Hero — full-bleed photo, edge to edge, with a colour gradient overlay
   (not a hard-edged block) so the fade into the photo is soft. Falls back
   to a flat var(--rbl-color-primary) background if no image is set yet, so
   the overlay still has something to sit on.
   Desktop: gradient runs left (opaque) -> right (transparent), text sits
   left-aligned over the opaque side. Tablet/mobile (<=900px, stacked):
   gradient flips to bottom (opaque) -> top (transparent) and the text is
   pinned to the bottom of the container instead of vertically centred, so
   more of the photo shows above it. */
.about-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 70vh;
	background-color: var(--rbl-color-primary);
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

.about-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, color-mix(in srgb, var(--rbl-color-primary) 85%, transparent) 0%, transparent 65%);
}

/* Same decorative brand "wing" graphic as .about-story-wing (Our Story
   section, page-quienes-somos.php) — mirrored (scaleX(-1), no separate
   flipped asset needed) and pinned to the left instead of the right, at
   70% opacity, sitting above the gradient overlay but below the title/desc
   text (no z-index needed: it's positioned later in the DOM than
   .about-hero-overlay, which has no z-index of its own, and
   .about-hero-content's explicit z-index:1 still wins over both regardless
   of source order). One shared rule since .about-hero itself is shared by
   7 templates now (About/Contact/Blog archive/Blog single/Events archive/
   Events single/WooCommerce fallback pages in index.php) — deliberately
   excluded from .home-hero per client direction. */
.about-hero-wing {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%) scaleX(-1);
	height: 85%;
	width: auto;
	opacity: .7;
	pointer-events: none;
}

.about-hero-content {
	position: relative;
	z-index: 1;
	width: 50%;
	max-width: 560px;
	padding: 140px 48px 64px;
	text-align: left;
	color: #fff;
}

.about-hero-title {
	margin: 0 0 20px;
	color: #fff;
	font-size: clamp(2rem, 4.5vw, 3rem);
	text-shadow: 0 2px 12px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .5);
}

.about-hero-desc {
	color: rgba(255, 255, 255, .9);
	font-size: 1.05rem;
	line-height: 1.7;
}

.about-hero-desc p {
	margin: 0 0 12px;
}

@media (max-width: 900px) {
	.about-hero {
		align-items: flex-end;
	}

	.about-hero-overlay {
		background: linear-gradient(0deg, color-mix(in srgb, var(--rbl-color-primary) 85%, transparent) 0%, transparent 60%);
	}

	.about-hero-content {
		width: 100%;
		max-width: none;
		padding: 48px 24px 40px;
	}
}


/* Our Story — full-bleed 50/50: square photo left, white text panel right
   with a decorative brand "wing" graphic bled against the browser's right
   edge, centred vertically behind the text (client-supplied asset, no CMS
   field for it — see CLAUDE.md). */
.about-story {
	display: flex;
	align-items: stretch;
	width: 100%;
}

.about-story-media {
	width: 50%;
	aspect-ratio: 1 / 1;
	background: var(--rbl-color-border);
}

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

.about-story-panel {
	position: relative;
	width: 50%;
	display: flex;
	align-items: center;
	background: #fff;
	overflow: hidden;
	padding: 64px 64px;
}

.about-story-wing {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 85%;
	width: auto;
	opacity: .1;
	z-index: 0;
	pointer-events: none;
}

.about-story-text {
	position: relative;
	z-index: 1;
	max-width: 480px;
}

/* Home's own instance of this section only (page-quienes-somos.php's
   identical section stays plain white) — client asked for the panel's
   blank white area to pick up the site's blue at 10% opacity instead. */
.home-story-section .about-story-panel {
	background: color-mix(in srgb, var(--rbl-color-primary) 10%, #fff);
}

.about-story-text p {
	color: var(--rbl-color-text-muted);
	line-height: 1.7;
	margin: 0 0 16px;
}

.btn-about-cta {
	display: inline-block;
	margin-top: 8px;
	padding: 14px 32px;
	border-radius: 999px;
	background: var(--rbl-color-secondary);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	transition: transform var(--rbl-transition), box-shadow var(--rbl-transition);
}

.btn-about-cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
}

@media (max-width: 900px) {
	.about-story {
		flex-wrap: wrap;
	}

	.about-story-media,
	.about-story-panel {
		width: 100%;
	}

	.about-story-media {
		aspect-ratio: 16 / 9;
	}

	.about-story-wing {
		height: 60%;
	}
}

/* Why Choose Us photo keeps its earlier contained treatment: a solid-colour
   block offset behind it instead of a plain drop-shadow. */
.about-why-media {
	position: relative;
}

.about-why-media img {
	position: relative;
	z-index: 1;
	width: 100%;
	border-radius: 12px;
}

.about-why-accent {
	position: absolute;
	inset: -20px 20px 20px -20px;
	border-radius: 12px;
	background: var(--rbl-color-secondary);
	z-index: 0;
}

/* Stats — a light row with thin dividers, not a solid dark full-bleed bar. */
.about-stats {
	padding-block: 48px;
	border-top: 1px solid var(--rbl-color-border);
	border-bottom: 1px solid var(--rbl-color-border);
}

/*
 * A grid (not flex-wrap) specifically so the dividers can be computed
 * deterministically per breakpoint via :nth-child() — flex-wrap + a plain
 * :first-child rule breaks the moment items wrap onto a second row (the
 * first item of row 2 kept a left border it shouldn't have, and nothing
 * added the top border it needed instead — exactly the stray-line bug the
 * client caught). Each breakpoint below fully restates both border
 * properties before carving out its own exceptions, so it never inherits
 * a wrong border from a different column count.
 */
.about-stats-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

.about-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 20px 40px;
	border-left: 1px solid var(--rbl-color-border);
	border-top: 1px solid var(--rbl-color-border);
}

/* first column of each 4-wide row: no left divider */
.about-stat:nth-child(4n+1) {
	border-left: none;
}

/* first row (first 4 items): no top divider */
.about-stat:nth-child(-n+4) {
	border-top: none;
}

.about-stat-num {
	font-family: var(--rbl-font-heading);
	font-weight: 700;
	font-size: 2.25rem;
	color: var(--rbl-color-primary);
}

.about-stat-label {
	margin-top: 4px;
	color: var(--rbl-color-text-muted);
	font-size: .9rem;
}

/* Features — 2-column grid of icon-left cards (soft shadow, not the plain
   borderless rows from the first pass — client asked for a card look here
   specifically). Icon badge sized 30% bigger than the first pass (56px ->
   73px, inner icon 28px -> 36px) so it doesn't read as too small. */
.about-features {
	padding-block: 96px;
}

.about-features-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px;
}

.about-feature {
	display: flex;
	gap: 20px;
	padding: 32px;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

.about-feature-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 73px;
	height: 73px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--rbl-color-primary) 12%, transparent);
}

.about-feature-icon img {
	width: 36px;
	height: 36px;
	object-fit: contain;
}

@media (max-width: 640px) {
	.about-features-grid {
		grid-template-columns: 1fr;
	}
}

.about-feature-body h3 {
	margin: 0 0 6px;
	font-size: 1.1rem;
}

.about-feature-body p {
	margin: 0;
	color: var(--rbl-color-text-muted);
	line-height: 1.6;
}

/* Why Choose Us — image left, text + a grid of checklist "chips" right
   (not a plain vertical list). */
.about-why {
	padding-block: 96px;
}

.about-why-grid {
	display: grid;
	grid-template-columns: .9fr 1.1fr;
	gap: 64px;
	align-items: center;
}

.about-why-text p {
	color: var(--rbl-color-text-muted);
	line-height: 1.7;
	margin: 0 0 24px;
}

.about-why-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.about-why-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: var(--rbl-color-text);
	font-weight: 500;
}

.about-why-check {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--rbl-color-secondary);
	color: #fff;
}

.about-why-check svg {
	width: 13px;
	height: 13px;
}

@media (max-width: 900px) {
	.about-why-grid {
		grid-template-columns: 1fr;
	}

	.about-stats-row {
		grid-template-columns: repeat(2, 1fr);
	}

	.about-stat {
		padding: 16px 24px;
		border-left: 1px solid var(--rbl-color-border);
		border-top: 1px solid var(--rbl-color-border);
	}

	/* first column of each 2-wide row */
	.about-stat:nth-child(2n+1) {
		border-left: none;
	}

	/* first row (first 2 items) */
	.about-stat:nth-child(-n+2) {
		border-top: none;
	}
}

@media (max-width: 640px) {
	.about-features,
	.about-why {
		padding-block: 64px;
	}

	.about-story-panel {
		padding: 48px 24px;
	}

	.about-stats-row {
		grid-template-columns: 1fr;
	}

	.about-stat,
	.about-stat:nth-child(2n+1),
	.about-stat:nth-child(4n+1) {
		border-left: none;
		padding-block: 16px;
	}

	.about-stat,
	.about-stat:nth-child(-n+2),
	.about-stat:nth-child(-n+4) {
		border-top: 1px solid var(--rbl-color-border);
	}

	.about-stat:first-child {
		border-top: none;
	}
}

/*
 * Contact Us page — hero reuses .about-hero/.about-hero-overlay/
 * .about-hero-content wholesale (same styling already defined above, no
 * duplicate rules needed here). Below it: form left / info right,
 * deliberately reversed from the usual layout per client direction.
 */
.contact-section {
	padding-block: 96px;
}

.contact-grid {
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: 64px;
}

/* Everything on this page reads as a card now — the form itself, each
   phone/email entry, the address, and each social icon individually. */
.contact-form-col {
	padding: 40px;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

.contact-form-subtitle {
	margin: -8px 0 24px;
	color: var(--rbl-color-text-muted);
	line-height: 1.6;
}

.contact-form-notice {
	margin: 0 0 20px;
	padding: 14px 18px;
	border-radius: 8px;
	font-size: .95rem;
}

.contact-form-notice--success {
	background: color-mix(in srgb, #1a9c53 12%, transparent);
	color: #1a9c53;
}

.contact-form-notice--error {
	background: color-mix(in srgb, #c0392b 12%, transparent);
	color: #c0392b;
}

.contact-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.contact-form-field {
	margin-bottom: 20px;
}

.contact-form-field label {
	display: block;
	margin-bottom: 8px;
	font-weight: 600;
	font-size: .9rem;
	color: var(--rbl-color-text);
}

.contact-form-field input,
.contact-form-field textarea,
.contact-form-field select {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--rbl-color-border);
	border-radius: 8px;
	font: inherit;
	color: var(--rbl-color-text);
	background: var(--rbl-color-background);
	transition: border-color var(--rbl-transition);
}

.contact-form-field select {
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6B6B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 16px;
	padding-right: 40px;
	cursor: pointer;
}

.contact-form-field input:focus,
.contact-form-field textarea:focus,
.contact-form-field select:focus {
	outline: none;
	border-color: var(--rbl-color-primary);
}

.contact-form-field textarea {
	resize: vertical;
}

.contact-form-honeypot {
	position: absolute;
	left: -9999px;
}

.contact-form-consent {
	margin-bottom: 24px;
}

.contact-form-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-weight: 400;
	font-size: .9rem;
	line-height: 1.5;
	color: var(--rbl-color-text);
	cursor: pointer;
}

.contact-form-checkbox input[type="checkbox"] {
	width: auto;
	margin-top: 3px;
	flex-shrink: 0;
}

.contact-form-checkbox a {
	color: var(--rbl-color-primary);
	text-decoration: underline;
}

.contact-form button.btn-about-cta {
	border: none;
	cursor: pointer;
	font: inherit;
}

.contact-form button.btn-about-cta:disabled {
	opacity: .5;
	cursor: not-allowed;
}

/* The card is the whole titled block (title + its content together) — not
   each individual phone/email/social icon. */
.contact-info-block {
	margin-bottom: 24px;
	padding: 24px 28px;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
}

.contact-info-block h3 {
	margin: 0 0 12px;
	font-size: 1rem;
	color: var(--rbl-color-text);
}

.contact-info-block ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.contact-info-block ul li a {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--rbl-color-text-muted);
	text-decoration: none;
	transition: color var(--rbl-transition);
}

.contact-info-block ul li a:hover {
	color: var(--rbl-color-primary);
}

.contact-info-address {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	color: var(--rbl-color-text-muted);
	text-decoration: none;
	transition: color var(--rbl-transition);
}

.contact-info-address:hover {
	color: var(--rbl-color-primary);
}

.contact-info-icon {
	flex-shrink: 0;
	display: inline-flex;
	width: 20px;
	height: 20px;
	color: var(--rbl-color-primary);
}

.contact-info-icon svg {
	width: 100%;
	height: 100%;
}

.contact-info-socials {
	flex-direction: row !important;
	gap: 14px !important;
	flex-wrap: wrap;
}

.contact-info-socials a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: var(--rbl-color-primary);
	transition: color var(--rbl-transition);
}

.contact-info-socials a svg {
	width: 100%;
	height: 100%;
}

.contact-info-socials a:hover {
	color: var(--rbl-color-secondary);
}

@media (max-width: 900px) {
	.contact-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.contact-section {
		padding-block: 64px;
	}

	.contact-form-row {
		grid-template-columns: 1fr;
	}
}

/*
 * Área de Agencias (page-area-de-agencias.php) — two registration forms
 * switched via tabs, own .agency-* classes (same mechanism as
 * .tour-booking-tabs/.tour-booking-tab-btn/.tour-booking-panel, duplicated
 * per this theme's per-component convention). Each panel reuses
 * .contact-form-col/.contact-form wholesale for the actual form card/
 * fields — only the tab switcher itself is new.
 */
.agency-section {
	padding-block: 80px;
}

@media (max-width: 640px) {
	.agency-section {
		padding-block: 56px;
	}
}

.agency-tabs {
	display: flex;
	gap: 8px;
	max-width: 640px;
	margin: 0 auto 24px;
}

.agency-tab-btn {
	flex: 1;
	padding: 14px;
	border: 1px solid var(--rbl-color-border);
	border-radius: 8px;
	background: #fff;
	color: var(--rbl-color-text);
	font: inherit;
	font-weight: 600;
	font-size: .9rem;
	cursor: pointer;
	transition: background var(--rbl-transition), color var(--rbl-transition), border-color var(--rbl-transition);
}

.agency-tab-btn.is-active {
	background: var(--rbl-color-primary);
	border-color: var(--rbl-color-primary);
	color: #fff;
}

.agency-panel {
	display: none;
	max-width: 640px;
	margin-inline: auto;
}

.agency-panel.is-active {
	display: block;
}

.agency-form-section-title {
	margin: 0 0 16px;
	padding-top: 8px;
	font-size: .85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--rbl-color-primary);
}

.agency-form-section-title:first-child {
	padding-top: 0;
}

@media (max-width: 640px) {
	.agency-tabs {
		flex-direction: column;
	}
}

/*
 * Ingresar Testimonio (page-ingresar-testimonio.php) — single form, same
 * .contact-form-col card + centred max-width treatment as Área de
 * Agencias' own panels, just without the tabs (only one form here).
 */
.testimonial-form-section {
	padding-block: 80px;
}

@media (max-width: 640px) {
	.testimonial-form-section {
		padding-block: 56px;
	}
}

.testimonial-form-col {
	max-width: 640px;
	margin-inline: auto;
}

/*
 * Privacy Policy / Terms & Conditions / Libro de Reclamaciones — plain
 * prose pages (built 2026-07-31), hero reuses .about-hero wholesale.
 * .content-page-body caps the reading width for long-form legal text;
 * .tour-content (already applied alongside it in the markup) supplies the
 * actual heading/paragraph/list styling, same reuse as the Booking Policy
 * popup on single-rbl_tour.php.
 */
.content-page-section {
	padding-block: 80px;
}

@media (max-width: 640px) {
	.content-page-section {
		padding-block: 56px;
	}
}

.content-page-body {
	max-width: 860px;
	margin-inline: auto;
}

/*
 * Blog (home.php archive + single.php) — hero reuses .about-hero wholesale
 * (see the comment above it). Two-column layout (.blog-layout) collapses at
 * this project's standard 1060px tablet breakpoint, not the 900px used
 * locally by About/Contact's own two-column sections.
 */
/* Single post's hero title only (not the archive's) is sized 20% smaller
   than the shared .about-hero-title default — a long post title otherwise
   wraps to several lines; scoped via WP's automatic "single-post" body
   class rather than a new template-side class, since single.php's markup
   is otherwise identical to every other .about-hero usage. */
.single-post .about-hero-title {
	font-size: clamp(1.6rem, 3.6vw, 2.4rem);
}

.blog-archive-section,
.blog-single-section {
	padding-block: 80px;
}

.blog-layout {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 48px;
	align-items: start;
}

@media (max-width: 1060px) {
	.blog-layout {
		grid-template-columns: 1fr;
	}
}

/* Card grid — archive + related posts */
.blog-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px;
	margin-bottom: 40px;
}

@media (max-width: 640px) {
	.blog-grid {
		grid-template-columns: 1fr;
	}
}

.blog-card {
	display: flex;
	flex-direction: column;
	border-radius: 16px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
	transition: transform var(--rbl-transition), box-shadow var(--rbl-transition);
}

.blog-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 36px rgba(0, 0, 0, .12);
}

.blog-card-media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	background-size: cover;
	background-position: center;
	background-color: var(--rbl-color-border);
}

.blog-card-badge {
	position: absolute;
	top: 16px;
	left: 16px;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--rbl-color-secondary);
	color: #fff;
	font-size: .75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.blog-card-badge--inline {
	position: static;
	display: inline-block;
}

.blog-card-body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1;
	padding: 24px;
}

.blog-card-meta {
	display: flex;
	gap: 16px;
	font-size: .85rem;
	color: var(--rbl-color-text-muted);
}

.blog-card-meta span,
.blog-single-meta span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.blog-card-meta svg,
.blog-single-meta svg {
	width: 16px;
	height: 16px;
}

.blog-card-title {
	margin: 0;
	font-size: 1.25rem;
}

.blog-card-title a {
	color: var(--rbl-color-text);
	text-decoration: none;
}

.blog-card-title a:hover {
	color: var(--rbl-color-primary);
}

.blog-card-excerpt {
	margin: 0;
	flex: 1;
	color: var(--rbl-color-text-muted);
	line-height: 1.6;
}

.blog-card-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--rbl-color-primary);
	text-decoration: none;
	font-weight: 600;
}

.blog-card-link svg {
	width: 16px;
	height: 16px;
	transition: transform var(--rbl-transition);
}

.blog-card-link:hover svg {
	transform: translateX(4px);
}

.blog-search-empty,
.blog-empty {
	color: var(--rbl-color-text-muted);
}

/* Pagination */
.blog-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-top: 16px;
}

.blog-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border-radius: 8px;
	border: 1px solid var(--rbl-color-border);
	color: var(--rbl-color-text);
	text-decoration: none;
	transition: border-color var(--rbl-transition), background var(--rbl-transition), color var(--rbl-transition);
}

.blog-pagination .page-numbers.current {
	background: var(--rbl-color-primary);
	border-color: var(--rbl-color-primary);
	color: #fff;
}

.blog-pagination .page-numbers:hover:not(.current) {
	border-color: var(--rbl-color-primary);
	color: var(--rbl-color-primary);
}

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

/* Sidebar (archive + single share this) */
.blog-sidebar {
	display: flex;
	flex-direction: column;
	gap: 24px;
	position: sticky;
	top: 110px;
}

.blog-sidebar-widget {
	padding: 24px;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
}

.blog-sidebar-widget h3 {
	margin: 0 0 16px;
	font-size: 1.05rem;
}

.blog-search-box {
	position: relative;
}

.blog-search-box svg {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	color: var(--rbl-color-text-muted);
}

.blog-search-box input {
	width: 100%;
	padding: 12px 16px 12px 42px;
	border-radius: 999px;
	border: 1px solid var(--rbl-color-border);
	font-family: inherit;
	font-size: .95rem;
}

.blog-sidebar-categories {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.blog-sidebar-categories a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 10px;
	border-radius: 8px;
	color: var(--rbl-color-text);
	text-decoration: none;
	transition: background var(--rbl-transition), color var(--rbl-transition);
}

.blog-sidebar-categories a:hover,
.blog-sidebar-categories a.is-active {
	background: var(--rbl-color-border);
	color: var(--rbl-color-primary);
}

.blog-sidebar-categories .count {
	color: var(--rbl-color-text-muted);
	font-size: .85rem;
}

.blog-sidebar-recent {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.blog-sidebar-recent li {
	display: flex;
	gap: 12px;
}

.blog-sidebar-recent img {
	width: 64px;
	height: 64px;
	flex-shrink: 0;
	border-radius: 10px;
	object-fit: cover;
	background: var(--rbl-color-border);
}

.blog-sidebar-recent a {
	color: var(--rbl-color-text);
	text-decoration: none;
	font-weight: 600;
	font-size: .92rem;
	line-height: 1.4;
}

.blog-sidebar-recent a:hover {
	color: var(--rbl-color-primary);
}

.blog-sidebar-recent time {
	display: block;
	margin-top: 4px;
	font-size: .78rem;
	color: var(--rbl-color-text-muted);
}

.blog-toc {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	border-left: 2px solid var(--rbl-color-border);
}

.blog-toc a {
	display: block;
	margin-left: -2px;
	padding: 6px 0 6px 16px;
	border-left: 2px solid transparent;
	color: var(--rbl-color-text-muted);
	text-decoration: none;
	font-size: .9rem;
	transition: color var(--rbl-transition), border-color var(--rbl-transition);
}

.blog-toc a.is-h3 {
	padding-left: 32px;
	font-size: .85rem;
}

.blog-toc a:hover {
	color: var(--rbl-color-text);
}

.blog-toc a.is-active {
	border-left-color: var(--rbl-color-primary);
	color: var(--rbl-color-primary);
	font-weight: 600;
}

/* Single post */
.blog-single-featured-image {
	margin-bottom: 24px;
	border-radius: 16px;
	overflow: hidden;
}

.blog-single-featured-image img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.blog-single-title {
	margin: 0 0 16px;
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	color: var(--rbl-color-text);
}

.blog-single-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-bottom: 24px;
	color: var(--rbl-color-text-muted);
	font-size: .9rem;
}

.blog-content {
	color: var(--rbl-color-text);
	font-size: 1.05rem;
	line-height: 1.75;
}

.blog-content h2 {
	margin: 40px 0 16px;
	font-size: 1.6rem;
	scroll-margin-top: 110px;
}

.blog-content h3 {
	margin: 32px 0 12px;
	font-size: 1.25rem;
	scroll-margin-top: 110px;
}

.blog-content p {
	margin: 0 0 20px;
}

.blog-content ul,
.blog-content ol {
	margin: 0 0 20px;
	padding-left: 24px;
}

.blog-content li {
	margin-bottom: 8px;
}

.blog-content img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}

.blog-related {
	margin-top: 56px;
}

@media (max-width: 1060px) {
	.blog-sidebar {
		position: static;
	}
}

@media (max-width: 640px) {
	.blog-archive-section,
	.blog-single-section {
		padding-block: 56px;
	}
}

/*
 * WooCommerce fallback pages (Cart/Checkout/My Account/Order Received) —
 * index.php. Content itself is WooCommerce's own markup/CSS (tables, forms,
 * buttons) — this wrapper only gives it this theme's normal max-width
 * instead of running full browser width, same .container convention as
 * every other section.
 */
.woo-page-section {
	padding-block: 80px;
}

@media (max-width: 640px) {
	.woo-page-section {
		padding-block: 56px;
	}
}

/*
 * Events — archive-rbl_event.php + single-rbl_event.php. Hero reuses
 * .about-hero (see the comment above it) on both. Two-column layout mirrors
 * .blog-layout's own shape (2fr/1fr, same 1060px collapse) under its own
 * .event-layout class, shared by both templates (same "one grid class, two
 * consumers" precedent as .blog-layout), per this theme's per-page-semantic-
 * classes convention even where the mechanism is identical (see the
 * reference file's gallery/tour-lightbox note).
 */
.event-archive-section,
.event-single-section {
	padding-block: 80px;
}

.event-layout {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 48px;
	align-items: start;
}

@media (max-width: 1060px) {
	.event-layout {
		grid-template-columns: 1fr;
	}
}

/* Gallery slider — crossfade via opacity + .is-active, same mechanism as
   .home-hero-slide, just scoped to this component. Built from scratch:
   this theme had no existing slider/lightbox to reuse (that pattern only
   ever existed on the reference build's single Tour page, and Tours hasn't
   been built here yet). */
.event-gallery {
	position: relative;
	margin-bottom: 32px;
	border-radius: 16px;
	overflow: hidden;
}

.event-gallery-viewport {
	position: relative;
	aspect-ratio: 16 / 9;
}

.event-gallery-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-color: var(--rbl-color-border);
	opacity: 0;
	transition: opacity .6s ease;
	cursor: pointer;
}

.event-gallery-slide.is-active {
	opacity: 1;
}

.event-gallery-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, .85);
	color: var(--rbl-color-text);
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--rbl-transition);
}

.event-gallery-arrow:hover {
	background: #fff;
}

.event-gallery-arrow--prev {
	left: 16px;
}

.event-gallery-arrow--next {
	right: 16px;
}

.event-gallery-dots {
	position: absolute;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	display: flex;
	gap: 8px;
}

.event-gallery-dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, .5);
	cursor: pointer;
	transition: background var(--rbl-transition);
}

.event-gallery-dot.is-active {
	background: #fff;
}

.event-single-title {
	margin: 0 0 16px;
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	color: var(--rbl-color-text);
}

.event-single-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-bottom: 24px;
	color: var(--rbl-color-text-muted);
	font-size: .9rem;
}

.event-single-meta span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.event-single-meta svg {
	width: 16px;
	height: 16px;
}

.event-content {
	color: var(--rbl-color-text);
	font-size: 1.05rem;
	line-height: 1.75;
}

.event-content h2 {
	margin: 40px 0 16px;
	font-size: 1.6rem;
}

.event-content h3 {
	margin: 32px 0 12px;
	font-size: 1.25rem;
}

.event-content p {
	margin: 0 0 20px;
}

.event-content ul,
.event-content ol {
	margin: 0 0 20px;
	padding-left: 24px;
}

.event-content li {
	margin-bottom: 8px;
}

.event-content img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}

.event-sidebar {
	display: flex;
	flex-direction: column;
	gap: 24px;
	position: sticky;
	top: 110px;
}

.event-sidebar-widget {
	padding: 24px;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
}

.event-sidebar-widget h3 {
	margin: 0 0 16px;
	font-size: 1.05rem;
}

.event-sidebar-recent {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.event-sidebar-recent li {
	display: flex;
	gap: 12px;
}

.event-sidebar-recent img {
	width: 64px;
	height: 64px;
	flex-shrink: 0;
	border-radius: 10px;
	object-fit: cover;
	background: var(--rbl-color-border);
}

.event-sidebar-recent a {
	color: var(--rbl-color-text);
	text-decoration: none;
	font-weight: 600;
	font-size: .92rem;
	line-height: 1.4;
}

.event-sidebar-recent a:hover {
	color: var(--rbl-color-primary);
}

.event-sidebar-recent time {
	display: block;
	margin-top: 4px;
	font-size: .78rem;
	color: var(--rbl-color-text-muted);
}

@media (max-width: 1060px) {
	.event-sidebar {
		position: static;
	}
}

@media (max-width: 640px) {
	.event-archive-section,
	.event-single-section {
		padding-block: 56px;
	}
}

/*
 * Archive card grid — full-bleed background-image cards (title/excerpt/
 * button overlaid directly on the photo under a permanent brand-blue tint),
 * a deliberately different visual language from .blog-card (image top,
 * white body below) — client's own spec for this archive.
 */
.event-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px;
	margin-bottom: 40px;
}

@media (max-width: 640px) {
	.event-grid {
		grid-template-columns: 1fr;
	}
}

.event-card {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
}

.event-card-link {
	position: absolute;
	inset: 0;
	z-index: 3;
}

.event-card-media {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-color: var(--rbl-color-border);
	transition: transform .5s ease;
}

.event-card:hover .event-card-media {
	transform: scale(1.08);
}

/* A permanent brand-blue wash over the photo (not just on hover) — the
   client's own spec — plus a bottom-heavy gradient on top of it so the
   overlaid text/button stays legible against any photo. */
.event-card-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(0deg, rgba(0, 0, 0, .55) 0%, transparent 60%),
		color-mix(in srgb, var(--rbl-color-primary) 55%, transparent);
}

.event-card-content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
	padding: 28px;
	pointer-events: none;
}

.event-card-title {
	margin: 0 0 8px;
	color: #fff;
	font-size: 1.3rem;
}

.event-card-excerpt {
	margin: 0 0 16px;
	color: rgba(255, 255, 255, .9);
	line-height: 1.6;
}

.event-card-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	padding: 10px 20px;
	border-radius: 999px;
	background: #fff;
	color: var(--rbl-color-primary);
	font-weight: 600;
	font-size: .9rem;
}

.event-card-btn svg {
	width: 16px;
	height: 16px;
}

.event-search-empty,
.event-empty {
	color: var(--rbl-color-text-muted);
}

.event-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-top: 16px;
}

.event-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border-radius: 8px;
	border: 1px solid var(--rbl-color-border);
	color: var(--rbl-color-text);
	text-decoration: none;
	transition: border-color var(--rbl-transition), background var(--rbl-transition), color var(--rbl-transition);
}

.event-pagination .page-numbers.current {
	background: var(--rbl-color-primary);
	border-color: var(--rbl-color-primary);
	color: #fff;
}

.event-pagination .page-numbers:hover:not(.current) {
	border-color: var(--rbl-color-primary);
	color: var(--rbl-color-primary);
}

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

/* Lightbox — from-scratch full-screen overlay, same shape as the reference
   build's own .tour-lightbox (fixed, dark backdrop, prev/next + close,
   X/Escape/backdrop-click to close), duplicated under event-specific class
   names per this theme's convention. Hidden via visibility/opacity, not
   display:none, so the fade transition actually plays on open/close. */
.event-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, .9);
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility 0s linear .3s;
}

.event-lightbox.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity .3s ease;
}

.event-lightbox-image {
	max-width: 88vw;
	max-height: 85vh;
	object-fit: contain;
	border-radius: 8px;
}

.event-lightbox-close {
	position: absolute;
	top: 20px;
	right: 24px;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, .15);
	color: #fff;
	font-size: 1.8rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.event-lightbox-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, .15);
	color: #fff;
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.event-lightbox-arrow--prev {
	left: 20px;
}

.event-lightbox-arrow--next {
	right: 20px;
}

/*
 * Scroll-reveal system (assets/js/scroll-reveal.js) — site-wide, adapted
 * from the reference build's own proven implementation. [data-reveal]
 * starts hidden/offset, [data-reveal].is-revealed animates to its natural
 * state once (added by JS the first time the element scrolls into view).
 * Never applied to hero/first-viewport sections — see CLAUDE.md.
 */
[data-reveal] {
	opacity: 0;
	transition: opacity .6s ease, transform .6s ease;
}

[data-reveal="fade-up"] {
	transform: translateY(28px);
}

[data-reveal="zoom-in"] {
	transform: scale(.94);
}

[data-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

[data-reveal-delay="1"] { transition-delay: .08s; }
[data-reveal-delay="2"] { transition-delay: .16s; }
[data-reveal-delay="3"] { transition-delay: .24s; }
[data-reveal-delay="4"] { transition-delay: .32s; }
[data-reveal-delay="5"] { transition-delay: .4s; }
[data-reveal-delay="6"] { transition-delay: .48s; }
/* 7/8 added 2026-08-01 for the Home hero's desc/button, timed to land
   after the h1's own letter-by-letter reveal finishes (see the hero
   title split rule above), longer than any existing 1-6 usage needs. */
[data-reveal-delay="7"] { transition-delay: .6s; }
[data-reveal-delay="8"] { transition-delay: .75s; }

/* Content must never get stuck invisible: the <noscript> block in
   header.php covers no-JS visitors, this covers prefers-reduced-motion
   (JS also short-circuits and adds .is-revealed immediately, but the CSS
   fallback here means even a slow/blocked script never leaves anything
   hidden for a reduced-motion visitor). */
@media (prefers-reduced-motion: reduce) {
	[data-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}


/*
 * Page loader overlay (#rbl-page-loader, markup in header.php) — masks the
 * blank/white moment between navigations with the site's brand colour +
 * centred logo instead. Visible by default (no JS needed for it to show up
 * on first paint, both on a fresh load and right after landing on a new
 * page); assets/js/page-transition.js hides it once ready and re-shows it
 * briefly before navigating away. The animation below is a pure-CSS
 * failsafe (forced hide after a fixed delay) so it can never stay stuck
 * covering the site if the script fails to load — same safety principle as
 * the scroll-reveal system's own layered fallbacks.
 */
.rbl-page-loader {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--rbl-color-primary);
	background-image: var(--rbl-loader-bg-image, none);
	background-size: cover;
	background-position: center;
	background-blend-mode: multiply;
	opacity: 1;
	visibility: visible;
	transition: opacity .3s ease;
	animation: rbl-page-loader-failsafe .01s linear 1.4s forwards;
}

@keyframes rbl-page-loader-failsafe {
	to {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}
}

.rbl-page-loader.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .3s ease, visibility 0s linear .3s;
}

.rbl-page-loader-logo {
	width: 300px;
	max-width: 70vw;
	height: auto;
}

/*
 * Logo "preload" fill: white base + red fill, both the same SVG used as a
 * CSS mask, the red layer's clip-path animating top -> bottom on a loop —
 * client asked for the logo itself to read as a white-to-red loading
 * indicator, not just a static mark.
 */
.rbl-page-loader-logo-wrap {
	position: relative;
	/* filter:drop-shadow (not box-shadow) follows the logo's own alpha
	   silhouette rather than its rectangular bounding box — box-shadow on a
	   transparent shape would draw a visible box behind it instead of
	   hugging the actual logo outline. Applied to the wrap so it shadows
	   the combined base+fill visual as one unit. */
	filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .45));
}

.rbl-page-loader-logo-spacer {
	display: block;
	width: 300px;
	max-width: 70vw;
	height: auto;
	/* Invisible — exists only so the wrap inherits the logo's real
	   width/aspect-ratio box for the two mask layers below to fill exactly,
	   without hardcoding a height that might not match the actual SVG. */
	visibility: hidden;
}

.rbl-page-loader-logo-base,
.rbl-page-loader-logo-fill {
	position: absolute;
	inset: 0;
	-webkit-mask-image: var(--rbl-loader-logo-url);
	mask-image: var(--rbl-loader-logo-url);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.rbl-page-loader-logo-base {
	background-color: #fff;
}

.rbl-page-loader-logo-fill {
	background-color: #e30613;
	clip-path: inset(100% 0 0 0);
	/* alternate (not a 0%->100% loop that snaps back) — plays the fill
	   top-to-bottom, then un-fills back to white the same way, so however
	   long the loader happens to stay visible there's never a hard jump-cut
	   mid-cycle. */
	animation: rbl-loader-logo-fill 1.6s ease-in-out infinite alternate;
}

@keyframes rbl-loader-logo-fill {
	from { clip-path: inset(100% 0 0 0); }
	to { clip-path: inset(0% 0 0 0); }
}

.rbl-page-loader-logo--text {
	color: #fff;
	text-shadow: 0 4px 12px rgba(0, 0, 0, .45);
	font-family: var(--rbl-font-heading);
	font-size: 1.5rem;
	font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
	.rbl-page-loader {
		animation: none;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}
}

/*
 * Tours archive (archive-rbl_tour.php) — hero reuses .about-hero. Filters
 * (left) + cards (right), reversed from the more common layout per explicit
 * client direction. Collapses to a single column at this project's standard
 * 1060px tablet breakpoint, with the filter form hidden behind a toggle
 * button that expands it inline (pushes the cards down, not an overlay).
 */
.tours-archive-section {
	padding-block: 80px;
}

.tours-layout {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 48px;
	align-items: start;
}

@media (max-width: 1060px) {
	.tours-layout {
		grid-template-columns: 1fr;
	}
}

.tour-filters-toggle {
	display: none;
}

@media (max-width: 1060px) {
	.tour-filters-toggle {
		display: flex;
		align-items: center;
		gap: 8px;
		width: 100%;
		padding: 14px 20px;
		border-radius: 999px;
		border: 1px solid var(--rbl-color-border);
		background: #fff;
		color: var(--rbl-color-text);
		font: inherit;
		font-weight: 600;
		cursor: pointer;
		margin-bottom: 16px;
	}

	.tour-filters-toggle svg {
		width: 18px;
		height: 18px;
	}
}

.tour-filters-sidebar {
	position: sticky;
	top: 110px;
	padding: 28px;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
}

@media (max-width: 1060px) {
	.tour-filters-sidebar {
		position: static;
		display: none;
	}

	.tour-filters-sidebar.is-open {
		display: block;
	}
}

.tour-filter-group {
	margin-bottom: 24px;
}

.tour-filter-group > label {
	display: block;
	margin-bottom: 8px;
	font-weight: 600;
	font-size: .9rem;
	color: var(--rbl-color-text);
}

/* Destination/Duration checkbox lists — replaced the original <select>s
   (client's own correction) with a "Show All" checkbox + one per term,
   handled by tours-archive-filter.js's select-all logic. `.tour-filter-group
   > label` above only targets the group's own heading label, never these —
   a plain descendant selector would have caught these too and wrongly
   bolded/spaced every individual option. */
.tour-filter-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.tour-filter-check {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 4px;
	font-weight: 400;
	font-size: .92rem;
	color: var(--rbl-color-text);
	cursor: pointer;
}

.tour-filter-check input[type="checkbox"] {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	accent-color: var(--rbl-color-primary);
}

/* Dual-handle price range — two absolutely-stacked <input type="range">
   sharing one visual track, transparent native tracks, pointer-events
   disabled on the track and re-enabled only on the thumb — the standard
   robust technique for this, no JS position math needed for the overlap
   itself (only for the fill bar + labels, see tours-archive-filter.js). */
.tour-price-slider {
	position: relative;
	height: 4px;
	margin: 28px 2px 14px;
	background: var(--rbl-color-border);
	border-radius: 2px;
}

.tour-price-slider-track {
	position: absolute;
	top: 0;
	height: 4px;
	background: var(--rbl-color-primary);
	border-radius: 2px;
}

.tour-price-slider input[type="range"] {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	margin: 0;
	transform: translateY(-50%);
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	pointer-events: none;
}

.tour-price-slider input[type="range"]::-webkit-slider-runnable-track {
	-webkit-appearance: none;
	background: transparent;
}

.tour-price-slider input[type="range"]::-moz-range-track {
	background: transparent;
}

.tour-price-slider input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	pointer-events: auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--rbl-color-primary);
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
	cursor: pointer;
}

.tour-price-slider input[type="range"]::-moz-range-thumb {
	pointer-events: auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--rbl-color-primary);
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
	cursor: pointer;
}

.tour-price-slider-label {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	font-size: .85rem;
	font-weight: 600;
	color: var(--rbl-color-text-muted);
}

.tour-filters-submit {
	display: block;
	width: 100%;
	text-align: center;
	border: none;
	cursor: pointer;
	font: inherit;
	margin-top: 4px;
}

.tour-filters-clear {
	display: block;
	margin-top: 12px;
	text-align: center;
	font-size: .85rem;
	color: var(--rbl-color-text-muted);
	text-decoration: underline;
}

.tours-view-toggle {
	display: flex;
	gap: 8px;
	margin-bottom: 24px;
}

/* Icon-only (client's own correction — these were text buttons at first) —
   aria-label carries the accessible name since there's no visible text. */
.tours-view-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border-radius: 10px;
	border: 1px solid var(--rbl-color-border);
	background: #fff;
	color: var(--rbl-color-text-muted);
	cursor: pointer;
	transition: background var(--rbl-transition), color var(--rbl-transition), border-color var(--rbl-transition);
}

.tours-view-btn svg {
	width: 20px;
	height: 20px;
}

.tours-view-btn.is-active {
	background: var(--rbl-color-primary);
	border-color: var(--rbl-color-primary);
	color: #fff;
}

.tours-grid {
	display: grid;
	gap: 32px;
	margin-bottom: 40px;
	transition: opacity .2s ease;
}

/* Real-time AJAX filtering (assets/js/tours-archive-filter.js) dims the
   grid briefly while a request is in flight, instead of the page reloading
   — client's own requirement ("esto debe de ser en tiempo real"). */
.tours-grid.is-loading {
	opacity: .45;
	pointer-events: none;
}

.tours-grid--vertical {
	grid-template-columns: repeat(2, 1fr);
}

.tours-grid--horizontal {
	grid-template-columns: 1fr;
}

@media (max-width: 640px) {
	.tours-grid--vertical {
		grid-template-columns: 1fr;
	}
}

.tour-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: 16px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
	transition: transform var(--rbl-transition), box-shadow var(--rbl-transition);
}

.tour-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 36px rgba(0, 0, 0, .12);
}

.tour-card-media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	background-size: cover;
	background-position: center;
	background-color: var(--rbl-color-border);
}

.tour-card-duration {
	position: absolute;
	top: 14px;
	left: 14px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .55);
	color: #fff;
	font-size: .78rem;
	font-weight: 600;
}

.tour-card-duration svg {
	width: 14px;
	height: 14px;
}

.tour-card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 24px;
	gap: 8px;
}

.tour-card-title {
	margin: 0;
	font-size: 1.1rem;
}

.tour-card-title a {
	color: var(--rbl-color-text);
	text-decoration: none;
}

.tour-card-title a:hover {
	color: var(--rbl-color-primary);
}

.tour-card-desc {
	margin: 0;
	color: var(--rbl-color-text-muted);
	font-size: .92rem;
	line-height: 1.6;
}

.tour-card-destination {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	color: var(--rbl-color-text-muted);
	font-size: .85rem;
}

.tour-card-destination svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

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

.tour-card-price {
	font-size: .85rem;
	color: var(--rbl-color-text-muted);
}

.tour-card-price strong {
	color: var(--rbl-color-primary);
	font-size: 1rem;
}

.tour-card-btn {
	margin-top: 0;
	padding: 10px 20px;
	font-size: .85rem;
	white-space: nowrap;
}

/* Horizontal layout — same DOM, reflowed via flex `order` rather than a
   second card markup (see inc/tour-template-functions.php). Client's
   requested order here is title -> destination -> description -> footer,
   which differs from vertical's natural DOM order (title -> description ->
   destination -> footer). */
.tours-grid--horizontal .tour-card {
	flex-direction: row;
}

.tours-grid--horizontal .tour-card-media {
	width: 280px;
	flex-shrink: 0;
	aspect-ratio: auto;
}

.tours-grid--horizontal .tour-card-title {
	order: 1;
}

.tours-grid--horizontal .tour-card-destination {
	order: 2;
}

.tours-grid--horizontal .tour-card-desc {
	order: 3;
}

.tours-grid--horizontal .tour-card-footer {
	order: 4;
}

@media (max-width: 768px) {
	.tours-grid--horizontal .tour-card {
		flex-direction: column;
	}

	.tours-grid--horizontal .tour-card-media {
		width: 100%;
		aspect-ratio: 4 / 3;
	}
}

.tours-empty {
	color: var(--rbl-color-text-muted);
}

.tours-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-top: 16px;
}

.tours-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border-radius: 8px;
	border: 1px solid var(--rbl-color-border);
	color: var(--rbl-color-text);
	text-decoration: none;
	transition: border-color var(--rbl-transition), background var(--rbl-transition), color var(--rbl-transition);
}

.tours-pagination .page-numbers.current {
	background: var(--rbl-color-primary);
	border-color: var(--rbl-color-primary);
	color: #fff;
}

.tours-pagination .page-numbers:hover:not(.current) {
	border-color: var(--rbl-color-primary);
	color: var(--rbl-color-primary);
}

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

@media (max-width: 640px) {
	.tours-archive-section {
		padding-block: 56px;
	}
}

/*
 * Single Tour (single-rbl_tour.php) — no hero photo (a tour's single
 * featured image stretched full-bleed like every other hero read as
 * pixelated), replaced with the tour's own gallery as a slider instead.
 * Header is forced permanently solid on this template (see header.php's
 * own note) rather than the usual frosted/transparent state, since there's
 * no hero photo for it to float over.
 *
 * Top row is full-bleed 50/50 (client request), same underlying technique
 * as .about-story's own full-bleed 50/50 split: no .container, a flex row
 * with align-items:stretch, the photo side's aspect-ratio driving the
 * shared row height, the text side stretching to match it via flex.
 */
.tour-single-top-grid {
	display: flex;
	align-items: stretch;
	width: 100%;
}

@media (max-width: 1060px) {
	.tour-single-top-grid {
		flex-wrap: wrap;
	}
}

/* Gallery slider — identical mechanism to .event-gallery/assets/js/
   event-gallery.js, duplicated under tour-specific classes per this
   theme's per-component convention (see that file's own notes). Edge-to-
   edge here (no border-radius, no side margin) since it's flush against
   the browser's left edge in the 50/50 split. */
.tour-gallery {
	position: relative;
	width: 50%;
	overflow: hidden;
}

@media (max-width: 1060px) {
	.tour-gallery {
		width: 100%;
	}
}

.tour-gallery-viewport {
	position: relative;
	aspect-ratio: 4 / 3;
}

.tour-gallery-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-color: var(--rbl-color-border);
	opacity: 0;
	transition: opacity .6s ease;
	cursor: pointer;
}

.tour-gallery-slide.is-active {
	opacity: 1;
}

.tour-gallery-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, .85);
	color: var(--rbl-color-text);
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--rbl-transition);
}

.tour-gallery-arrow:hover {
	background: #fff;
}

.tour-gallery-arrow--prev {
	left: 16px;
}

.tour-gallery-arrow--next {
	right: 16px;
}

.tour-gallery-dots {
	position: absolute;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	display: flex;
	gap: 8px;
}

.tour-gallery-dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, .5);
	cursor: pointer;
	transition: background var(--rbl-transition);
}

.tour-gallery-dot.is-active {
	background: #fff;
}

/* Right column — title, compact icon chips, short description, price.
   width:50% + flex/justify-content:center is what actually stretches this
   panel to match the gallery's aspect-ratio-driven height (same mechanism
   as .about-story-panel) and vertically centres its content within it. */
.tour-single-summary {
	position: relative;
	width: 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 64px;
	background: #fff;
	overflow: hidden;
}

/* Decorative brand "wing", same asset/positioning as .about-story-wing
   (page-quienes-somos.php's Our Story panel) — this white summary panel is
   the same "plain white text panel" shape, so it gets the same low-opacity
   decorative treatment rather than sitting totally blank. */
.tour-single-wing {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 85%;
	width: auto;
	opacity: .1;
	z-index: 0;
	pointer-events: none;
}

.tour-single-summary-content {
	position: relative;
	z-index: 1;
}

@media (max-width: 1060px) {
	.tour-single-summary {
		width: 100%;
		padding: 40px 24px;
	}

	.tour-single-wing {
		height: 60%;
	}
}

/* Title in the site's blue, price + detail-chip icons in red — client's
   own colour spec (2026-07-31), overriding this section's earlier default
   colours (title was plain text-colour, chip icons were blue). */
.tour-single-title {
	margin: 0 0 16px;
	font-size: clamp(1.6rem, 3.2vw, 2.25rem);
	color: var(--rbl-color-primary);
}

.tour-single-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 16px;
}

.tour-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--rbl-color-border);
	color: var(--rbl-color-text);
	font-size: .82rem;
	font-weight: 600;
}

.tour-chip svg {
	width: 14px;
	height: 14px;
	color: var(--rbl-color-secondary);
}

.tour-single-price {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding-top: 16px;
	border-top: 1px solid var(--rbl-color-border);
	color: var(--rbl-color-text-muted);
}

.tour-single-price strong {
	font-size: 1.5rem;
	color: var(--rbl-color-secondary);
}

.tour-single-price-note {
	font-size: .85rem;
}

/* Variable-pricing tiers — corrected 2026-07-31 from an earlier small-chip
   layout to full-row cards (client's own spec: "una card en toda la fila
   con nombre y descripción a un lado y precio en el otro lado"), one per
   tier, each split into an info side (label + description) and a price
   side via flex justify-content:space-between. */
.tour-price-options-full {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* .tour-price-row is a plain <div>, not a <label> — a <details> for "View
   Details" sits inside it as a SIBLING of the radio's own <label>, never
   nested inside that label. Client's own catch: a <details> nested inside
   a label that wraps the whole card meant clicking "View Details" also
   toggled the radio underneath it — ambiguous, and dubious HTML besides
   (nesting one interactive control inside another). Separating them fixes
   both at once. */
.tour-price-row {
	padding: 16px 20px;
	border: 1.5px solid var(--rbl-color-border);
	border-radius: 12px;
	background: #fff;
	transition: border-color var(--rbl-transition), background var(--rbl-transition);
}

.tour-price-row.is-selected {
	border-color: var(--rbl-color-primary);
	background: color-mix(in srgb, var(--rbl-color-primary) 6%, transparent);
}

.tour-price-row-select {
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
}

/* Visible radio (not hidden) — client's own request, so "select this
   rate" reads as a distinct, deliberate action from "View Details" below
   it, instead of the whole card being one ambiguous click target. */
.tour-price-row-select input[type="radio"] {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	accent-color: var(--rbl-color-primary);
	cursor: pointer;
}

.tour-price-row-label {
	flex: 1;
	font-weight: 600;
	font-size: .95rem;
	color: var(--rbl-color-text);
}

.tour-price-row-price {
	flex-shrink: 0;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--rbl-color-secondary);
	white-space: nowrap;
}

.tour-price-row-details {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--rbl-color-border);
}

.tour-price-row-details summary {
	cursor: pointer;
	font-size: .82rem;
	font-weight: 600;
	color: var(--rbl-color-primary);
}

.tour-price-row-desc {
	margin-top: 8px;
	font-size: .85rem;
	line-height: 1.5;
	color: var(--rbl-color-text-muted);
}

.tour-price-row-desc p {
	margin: 0 0 4px;
}

@media (max-width: 480px) {
	.tour-price-row-select {
		flex-wrap: wrap;
	}
}

/*
 * Booking row — calendar (left) + Book Now/Request Quote form (right).
 */
.tour-single-booking {
	padding-block: 24px 0;
}

/* Full-bleed 50/50, client request, same technique as the top row above —
   no .container, a flex row with align-items:stretch so the calendar and
   booking cards always match heights (whichever is taller sets both). */
.tour-booking-grid {
	display: flex;
	align-items: stretch;
	width: 100%;
}

@media (max-width: 1060px) {
	.tour-booking-grid {
		flex-wrap: wrap;
	}
}

/* flex:1 1 0 (not a fixed width:33%/50%) so this row auto-adjusts between
   2 columns (calendar + booking form, most tours) and 3 (rate card added
   first when a tour has variable pricing, moved down from the top row per
   client correction) without any conditional CSS — whatever's actually
   present just splits the row evenly. */
.tour-rate-card,
.tour-calendar-card,
.tour-booking-card {
	flex: 1 1 0;
	padding: 64px;
}

@media (max-width: 1060px) {
	.tour-rate-card,
	.tour-calendar-card,
	.tour-booking-card {
		flex: 1 1 100%;
		padding: 40px 24px;
	}
}

/* Restored the 3 soft grey column tones (a "make everything white" pass
   was a misread of the actual request — only the individual price cards
   and the calendar's own inner box should be white, not these 3 outer
   columns; see .tour-price-row and .tour-calendar below). */
.tour-rate-card {
	background: color-mix(in srgb, var(--rbl-color-border) 25%, #fff);
}

.tour-calendar-card {
	background: color-mix(in srgb, var(--rbl-color-border) 45%, #fff);
}

.tour-booking-card {
	background: color-mix(in srgb, var(--rbl-color-border) 35%, #fff);
}

/* The calendar widget's own box, white, distinct from .tour-calendar-card's
   grey outer panel around it — "card within a card", not the whole column. */
.tour-calendar {
	background: #fff;
	padding: 20px;
	border-radius: 12px;
}

.tour-calendar-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
	font-weight: 600;
}

.tour-calendar-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: none;
	border-radius: 8px;
	background: var(--rbl-color-border);
	color: var(--rbl-color-text);
	cursor: pointer;
}

.tour-calendar-nav svg {
	width: 16px;
	height: 16px;
}

.tour-calendar-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}

.tour-calendar-weekday {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 28px;
	font-size: .78rem;
	font-weight: 600;
	color: var(--rbl-color-text-muted);
}

.tour-calendar-day {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	border: none;
	border-radius: 8px;
	background: transparent;
	color: var(--rbl-color-text);
	font: inherit;
	font-size: .88rem;
	cursor: pointer;
	transition: background var(--rbl-transition), color var(--rbl-transition);
}

.tour-calendar-day:hover:not(.is-disabled) {
	background: var(--rbl-color-border);
}

.tour-calendar-day.is-disabled {
	color: var(--rbl-color-border);
	cursor: not-allowed;
}

.tour-calendar-day.is-in-range {
	background: color-mix(in srgb, var(--rbl-color-primary) 15%, transparent);
	border-radius: 0;
}

.tour-calendar-day.is-start,
.tour-calendar-day.is-end {
	background: var(--rbl-color-primary);
	color: #fff;
	font-weight: 700;
}

.tour-calendar-summary {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--rbl-color-border);
	font-size: .9rem;
	color: var(--rbl-color-text);
}

.tour-calendar-summary p {
	margin: 0 0 6px;
}

.tour-calendar-summary [data-tour-date-hint] {
	color: var(--rbl-color-text-muted);
}

.tour-booking-tabs {
	display: flex;
	gap: 8px;
	margin-bottom: 20px;
}

.tour-booking-tab-btn {
	flex: 1;
	padding: 12px;
	border: 1px solid var(--rbl-color-border);
	border-radius: 8px;
	background: #fff;
	color: var(--rbl-color-text);
	font: inherit;
	font-weight: 600;
	font-size: .9rem;
	cursor: pointer;
	transition: background var(--rbl-transition), color var(--rbl-transition), border-color var(--rbl-transition);
}

.tour-booking-tab-btn.is-active {
	background: var(--rbl-color-primary);
	border-color: var(--rbl-color-primary);
	color: #fff;
}

.tour-booking-panel {
	display: none;
	flex-direction: column;
	gap: 16px;
}

.tour-booking-panel.is-active {
	display: flex;
}

/* One-line explainer shown only when Book Now and Request a Quote coexist
   as tabs (2026-07-31, client: the two forms look near-identical — same
   fields, same price breakdown — so a visitor could land on either tab and
   not realize which one actually charges). Lives inside each form itself
   (not a shared element toggled by JS) so it switches with the active tab
   for free, no extra wiring needed. */
.tour-booking-subtitle {
	margin: -4px 0 0;
	font-size: .85rem;
	line-height: 1.5;
	color: var(--rbl-color-text-muted);
}

.tour-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

@media (max-width: 480px) {
	.tour-field-row {
		grid-template-columns: 1fr;
	}
}

.tour-field label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	font-size: .85rem;
	color: var(--rbl-color-text);
}

.tour-field input,
.tour-field textarea {
	width: 100%;
	padding: 10px 14px;
	border: 1px solid var(--rbl-color-border);
	border-radius: 8px;
	font: inherit;
	color: var(--rbl-color-text);
	background: var(--rbl-color-background);
}

.tour-booking-error {
	margin: 0;
	padding: 10px 14px;
	border-radius: 8px;
	background: color-mix(in srgb, #c0392b 12%, transparent);
	color: #c0392b;
	font-size: .88rem;
}

.tour-field input[readonly] {
	background: var(--rbl-color-border);
	color: var(--rbl-color-text);
	cursor: not-allowed;
}

/* Extras Opcionales checklist inside the Book Now / Request a Quote forms
   (2026-07-31) — checkboxes rather than a native multi-select, same
   "checkboxes over <select multiple>" convention already used for the
   Tours archive's Destination/Duration filters (clearer for picking
   several at once, no ctrl/cmd-click discoverability problem). */
.tour-addons-select {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.tour-addon-option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border: 1px solid var(--rbl-color-border);
	border-radius: 8px;
	cursor: pointer;
	font-size: .92rem;
	color: var(--rbl-color-text);
}

.tour-addon-option input[type="checkbox"] {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	accent-color: var(--rbl-color-primary);
	cursor: pointer;
}

.tour-addon-option-label {
	flex: 1 1 auto;
}

.tour-addon-option-price {
	flex-shrink: 0;
	font-weight: 600;
	color: var(--rbl-color-secondary);
}

/* Price breakdown — Tour Price + (Extras, if the tour has any) + Subtotal,
   client requirement 2026-07-31 (previously just one flat "Subtotal" line
   before Extras existed). .tour-price-line is the lighter-weight running
   total lines; .tour-subtotal (unchanged from before) is still the final,
   visually heavier sum. */
.tour-price-breakdown {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.tour-price-line {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 4px;
	font-size: .88rem;
	color: var(--rbl-color-text-muted);
}

.tour-price-line strong {
	font-weight: 600;
	color: var(--rbl-color-text);
}

.tour-subtotal {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	border-radius: 8px;
	background: color-mix(in srgb, var(--rbl-color-secondary) 10%, #fff);
}

.tour-subtotal span {
	font-weight: 600;
	font-size: .9rem;
	color: var(--rbl-color-text);
}

.tour-subtotal strong {
	font-size: 1.3rem;
	color: var(--rbl-color-secondary);
}

.tour-single-booking-fallback {
	padding-block: 56px;
	text-align: center;
}

.tour-single-booking-fallback p {
	margin: 0 0 20px;
	color: var(--rbl-color-text-muted);
}

/*
 * Details section — client correction 2026-07-31, revised twice the same
 * day. Final shape: Row 1 = Description + Highlights, 50/50. Row 2 =
 * Itinerary, full width, below Row 1. Row 3 = remaining fields
 * (Includes/Excludes/Additional Info/Optional Extras), still tabbed. The
 * sticky price sidebar that used to sit alongside all of this was removed
 * the same day ("quita la card del precio") — redundant with the price
 * already shown in the top row and the Book Now form itself.
 */
.tour-single-details {
	padding-block: 56px;
}

.tour-details-row-1 {
	display: flex;
	gap: 48px;
	margin-bottom: 56px;
}

.tour-details-description,
.tour-details-highlights {
	flex: 1 1 0%;
}

.tour-details-row-1 .section-heading {
	margin-bottom: 16px;
}

.tour-details-highlights .tour-highlights-list {
	margin-top: 0;
}

@media (max-width: 1060px) {
	.tour-details-row-1 {
		flex-direction: column;
		gap: 40px;
	}
}

.tour-brochure-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 20px;
}

.tour-brochure-btn svg {
	width: 18px;
	height: 18px;
}

.tour-details-itinerary {
	margin-bottom: 56px;
}

.tour-details-itinerary .section-heading {
	margin-bottom: 16px;
}

.tour-tabs-nav {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	gap: 4px;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--rbl-color-border);
}

.tour-tab-btn {
	flex-shrink: 0;
	white-space: nowrap;
	padding: 12px 18px;
	border: none;
	border-bottom: 2px solid transparent;
	background: transparent;
	color: var(--rbl-color-text-muted);
	font: inherit;
	font-weight: 600;
	font-size: .9rem;
	cursor: pointer;
	transition: color var(--rbl-transition), border-color var(--rbl-transition);
}

.tour-tab-btn.is-active {
	color: var(--rbl-color-primary);
	border-bottom-color: var(--rbl-color-primary);
}

.tour-tab-panel {
	display: none;
}

.tour-tab-panel.is-active {
	display: block;
}

.tour-content {
	color: var(--rbl-color-text);
	font-size: 1.02rem;
	line-height: 1.75;
}

.tour-content h2 {
	margin: 32px 0 14px;
	font-size: 1.4rem;
}

.tour-content h2:first-child {
	margin-top: 0;
}

.tour-content h3 {
	margin: 24px 0 10px;
	font-size: 1.15rem;
}

.tour-content p {
	margin: 0 0 16px;
}

.tour-content ul,
.tour-content ol {
	margin: 0 0 16px;
	padding-left: 22px;
}

.tour-content li {
	margin-bottom: 6px;
}

.tour-highlights-list {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px 24px;
}

@media (max-width: 640px) {
	.tour-highlights-list {
		grid-template-columns: 1fr;
	}
}

.tour-highlights-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: .95rem;
	color: var(--rbl-color-text);
}

.tour-highlight-check {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	border-radius: 50%;
	background: var(--rbl-color-secondary);
	color: #fff;
}

.tour-highlight-check svg {
	width: 12px;
	height: 12px;
}

.tour-itinerary-day {
	margin-bottom: 12px;
	padding: 16px 20px;
	border: 1px solid var(--rbl-color-border);
	border-radius: 12px;
}

.tour-itinerary-day summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--rbl-color-text);
}

.tour-itinerary-day .tour-content {
	margin-top: 14px;
}

.tour-addons-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.tour-addons-list li {
	padding: 14px 18px;
	border: 1px solid var(--rbl-color-border);
	border-radius: 10px;
}

.tour-addon-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-weight: 600;
}

.tour-addon-price {
	color: var(--rbl-color-primary);
}

.tour-addons-list p {
	margin: 6px 0 0;
	color: var(--rbl-color-text-muted);
	font-size: .9rem;
}

.tour-related-section {
	padding-block: 56px;
}

/* Related Tours — always exactly 3 cards (rbl_get_related_tours( $id, 3 )),
   so a dedicated 3-column grid reads better than reusing the archive's own
   2-column .tours-grid--vertical (which would leave an odd 2+1 layout). */
.tour-related-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}

@media (max-width: 1060px) {
	.tour-related-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.tour-related-grid {
		grid-template-columns: 1fr;
	}
}

/* Lightbox — same shape as .event-lightbox, duplicated under tour-specific
   classes (see that file's own notes on why this theme duplicates rather
   than shares this mechanism across components). */
.tour-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, .9);
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility 0s linear .3s;
}

.tour-lightbox.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity .3s ease;
}

.tour-lightbox-image {
	max-width: 88vw;
	max-height: 85vh;
	object-fit: contain;
	border-radius: 8px;
}

.tour-lightbox-close {
	position: absolute;
	top: 20px;
	right: 24px;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, .15);
	color: #fff;
	font-size: 1.8rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tour-lightbox-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, .15);
	color: #fff;
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tour-lightbox-arrow--prev {
	left: 20px;
}

.tour-lightbox-arrow--next {
	right: 20px;
}

/*
 * Booking & Cancellation Policy popup (single-rbl_tour.php, built
 * 2026-07-31) — client asked for the "Política de Reservas y Cancelación"
 * link baked into every imported tour's general_info text to open in a
 * popup instead of navigating away to a separate page. Content modal, not
 * an image lightbox, so a plain white scrollable card rather than
 * .tour-lightbox's dark full-bleed treatment — same z-index (1000) is
 * fine since the two are never open at the same time.
 */
.tour-policy-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility 0s linear .3s;
}

.tour-policy-modal.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity .3s ease;
}

.tour-policy-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .6);
}

.tour-policy-modal-box {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 720px;
	max-height: 85vh;
	overflow-y: auto;
	background: #fff;
	border-radius: 16px;
	padding: 40px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}

.tour-policy-modal-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 36px;
	height: 36px;
	border: none;
	border-radius: 50%;
	background: var(--rbl-color-border);
	color: var(--rbl-color-text);
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--rbl-transition);
}

.tour-policy-modal-close:hover {
	background: color-mix(in srgb, var(--rbl-color-primary) 15%, var(--rbl-color-border));
}

.tour-policy-modal-title {
	margin: 0 0 20px;
	padding-right: 40px;
	color: var(--rbl-color-primary);
}

@media (max-width: 640px) {
	.tour-policy-modal-box {
		padding: 28px 20px;
	}
}

/*
 * Footer "Protégeme" compliance badge + its click-to-enlarge popup
 * (built 2026-08-01) — small fixed-size thumbnail sits under the Enlaces
 * de Interés list on every page (footer.php renders sitewide), opens the
 * full poster image. Image lightbox, not a content card, so it reuses
 * .tour-policy-modal's fixed-overlay mechanics but with a dark backdrop
 * and an unpadded image box instead of a white text card.
 */
.footer-badge {
	display: inline-flex;
	margin-top: 20px;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	line-height: 0;
}

.footer-badge img {
	width: 90px;
	height: 90px;
	border-radius: 8px;
	object-fit: cover;
	transition: opacity var(--rbl-transition);
}

.footer-badge:hover img {
	opacity: .85;
}

.footer-image-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility 0s linear .3s;
}

.footer-image-modal.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity .3s ease;
}

.footer-image-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .8);
}

.footer-image-modal-box {
	position: relative;
	z-index: 1;
	max-width: min(90vw, 500px);
	max-height: 85vh;
}

.footer-image-modal-box img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 85vh;
	object-fit: contain;
	border-radius: 8px;
}

.footer-image-modal-close {
	position: absolute;
	top: -16px;
	right: -16px;
	width: 36px;
	height: 36px;
	border: none;
	border-radius: 50%;
	background: #fff;
	color: var(--rbl-color-text);
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
	transition: background var(--rbl-transition);
}

.footer-image-modal-close:hover {
	background: color-mix(in srgb, var(--rbl-color-primary) 15%, #fff);
}