/* ==========================================================================
   Agencia Marruecos Tours — Design system
   Palette & type scale mirrored from moroccotouroffers.com
   ========================================================================== */

:root {
  /* Brand golds */
  --color-brand: #dd9933;
  --color-brand-dark: #b77a1f;
  --color-brand-light: #e6b56b;
  --color-brand-soft: #ecc68e;
  --color-gold: #dd9933;
  --color-gold-dark: #b77a1f;

  /* Neutrals */
  --color-cream: #faf7f2;
  --color-cream-dark: #f4efe6;
  --color-heading: #101724;
  --color-body: #3d4757;
  --color-muted: #667085;
  --color-line: #e4dfd5;
  --color-ink-deep: #0b0f16;
  --color-ink-soft: #16181d;
  --color-on-light: #12161d;
  --color-white: #fff;
  --color-page: #fff;        /* page ground */
  --color-surface: #fff;     /* cards, dropdowns, form fields */

  /* Utility */
  --color-whats: #25d366;
  --color-whats-dark: #1da851;
  --color-tripadvisor: #00aa6c;

  /* Type */
  /* Marcellus ships a single weight (400) — never ask for bold, the browser would fake it. */
  --font-title: "Marcellus", Georgia, "Times New Roman", serif;
  --font-body: Georgia, "Times New Roman", Times, serif;
  --font-ui: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans: var(--font-ui);

  /* Layout */
  --container: 1240px;
  --radius: 14px;
  --radius-lg: 20px;
  --shadow-sm: 0 2px 10px rgb(16 23 36 / 6%);
  --shadow: 0 10px 30px rgb(16 23 36 / 8%);
  --shadow-lg: 0 22px 50px rgb(16 23 36 / 14%);
  --header-h: 84px;
}

/* ==========================================================================
   Dark theme
   Only the neutrals are redefined; the brand golds are the same in both modes.
   Set by the toggle in the header, remembered in localStorage.
   ========================================================================== */
:root[data-theme="dark"] {
  --color-page: #0e121a;
  --color-surface: #161c26;
  --color-cream: #131822;
  --color-cream-dark: #1b222e;
  --color-heading: #eef2f7;
  --color-body: #fff;
  --color-muted: #8892a2;
  --color-line: #2a3242;
  --color-shadow-tint: 0 0 0;
  --shadow-sm: 0 2px 10px rgb(0 0 0 / 35%);
  --shadow: 0 10px 30px rgb(0 0 0 / 45%);
  --shadow-lg: 0 22px 50px rgb(0 0 0 / 55%);
  color-scheme: dark;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--color-body);
  background: var(--color-page);
  overflow-x: hidden;
}

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
[hidden] { display: none !important; }

h1, h2, h3, h4 {
  font-family: var(--font-title);
  color: var(--color-heading);
  font-weight: 400;
  line-height: 1.18;
  margin: 0;
  letter-spacing: 0;
}
h1 { letter-spacing: -0.01em; }

/* UI chrome stays in the sans — serif prose, sans controls and labels */
.nav-link, .nav-drop a, .btn, .eyebrow, .tour-tab, .tour-badge,
.tour-duration, .tour-from, .tour-more, .dest-count, .dest-link, .trust-item,
.founder-role, .founder-creds span, .review-name, .review-src, .review-avatar,
.lang-switch a, .topbar, .footer-col a, .footer-contact, .float-whats,
.slider-btn, .budget-later, .hero-rating, .reviews-note, .burger, .brand {
  font-family: var(--font-ui);
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}

/* ---------- Shared section furniture ---------- */
.section { padding: 64px 0; }
@media (min-width: 768px) { .section { padding: 92px 0; } }

.section-head { max-width: 980px; margin: 0 auto 44px; text-align: center; }
.eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-brand);
  margin-bottom: 12px;
}
.eyebrow::before { content: "—"; margin-right: 8px; opacity: .6; }
.eyebrow::after  { content: "—"; margin-left: 8px;  opacity: .6; }

.section-title { font-size: clamp(1.75rem, 3.4vw, 2.6rem); margin-bottom: 14px; }
.section-sub { max-width: 880px; margin: 0 auto; color: var(--color-muted); font-size: 1.02rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: .93rem;
  font-weight: 700;
  letter-spacing: .01em;
  transition: background-color .25s, color .25s, border-color .25s, transform .25s, box-shadow .25s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-gold { background: var(--color-brand); color: #fff; box-shadow: 0 8px 22px rgb(221 153 51 / 32%); }
.btn-gold:hover { background: var(--color-brand-dark); }
.btn-ghost { border-color: rgb(255 255 255 / 55%); color: #fff; background: rgb(255 255 255 / 8%); backdrop-filter: blur(6px); }
.btn-ghost:hover { background: #fff; color: var(--color-on-light); border-color: #fff; }
.btn-outline { border-color: var(--color-brand); color: var(--color-brand); background: transparent; }
.btn-outline:hover { background: var(--color-brand); color: #fff; }
.btn-dark { background: var(--color-ink-deep); color: #fff; }
.btn-dark:hover { background: var(--color-ink-soft); }
.btn-sm { padding: 10px 20px; font-size: .85rem; }

/* ---- light / dark toggle ---- */
.theme-toggle {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex-shrink: 0;
  padding: 0;
  /* the header is dark over the hero and dark once stuck, so this button is
     light in both themes — it never sits on a pale surface */
  border: 1px solid rgb(255 255 255 / 38%);
  border-radius: 999px;
  background: rgb(255 255 255 / 8%);
  color: #fff;
  cursor: pointer;
  transition: background-color .25s, border-color .25s, color .25s;
}
.theme-toggle:hover { border-color: #fff; background: rgb(255 255 255 / 16%); color: #fff; }
.theme-toggle svg { width: 18px; height: 18px; }
/* one icon per mode */
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

/* ==========================================================================
   Top bar
   ========================================================================== */
.topbar {
  background: var(--color-ink-deep);
  color: rgb(255 255 255 / 80%);
  font-size: .8rem;
  display: none;
}
@media (min-width: 1024px) { .topbar { display: block; } }
.topbar .container { display: flex; min-height: 40px; align-items: center; justify-content: space-between; gap: 20px; }
.topbar-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 26px; }
.topbar-links a { display: inline-flex; align-items: center; gap: 6px; transition: color .2s; }
.topbar-links a:hover { color: var(--color-brand); }
.topbar-social { display: flex; gap: 4px; flex-shrink: 0; }
.topbar-social a {
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 999px;
  color: rgb(255 255 255 / 75%); transition: background-color .2s, color .2s;
}
.topbar-social a:hover { background: var(--color-gold); color: var(--color-on-light); }

/* ---- language rail: fixed flag strip on the right edge ---- */
.lang-rail {
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 70;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  border-radius: 8px 0 0 8px;
  overflow: hidden;
  background: var(--color-ink-deep);
  box-shadow: 0 10px 30px rgb(0 0 0 / 28%);
}
.lang-rail a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 44px;                      /* collapsed: flag only */
  padding: 9px 7px;
  overflow: hidden;
  transition: width .25s ease, background-color .2s;
}
.lang-rail a + a { border-top: 1px solid rgb(255 255 255 / 10%); }
.lang-rail img {
  width: 30px; height: 20px;
  flex-shrink: 0;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 22%);
}
.lang-rail span {
  font-family: var(--font-ui);
  font-size: .72rem; font-weight: 800; letter-spacing: .06em;
  color: rgb(255 255 255 / 82%);
  white-space: nowrap;
}
.lang-rail a:hover { width: 86px; background: rgb(255 255 255 / 10%); }
.lang-rail a.is-active { background: var(--color-brand); }
.lang-rail a.is-active span { color: var(--color-on-light); }

/* out of the way of the WhatsApp button on small screens */
@media (max-width: 700px) {
  .lang-rail { top: auto; bottom: 96px; transform: none; }
  .lang-rail a { width: 38px; padding: 7px 4px; }
  .lang-rail img { width: 26px; height: 17px; }
  .lang-rail a:hover { width: 38px; }
}
@media (prefers-reduced-motion: reduce) { .lang-rail a { transition: none; } }

.icon { width: 15px; height: 15px; flex-shrink: 0; fill: currentColor; }

/* ==========================================================================
   Header + navigation
   ========================================================================== */
.site-header {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  transition: background-color .3s, box-shadow .3s;
}
@media (min-width: 1024px) { .site-header { top: 40px; } }

.site-header.is-stuck {
  position: fixed;
  top: 0;
  background: var(--color-ink-deep);
  box-shadow: 0 6px 26px rgb(0 0 0 / 26%);
}

.header-inner { display: flex; min-height: var(--header-h); align-items: center; gap: 12px; }

.brand { display: flex; align-items: center; flex-shrink: 0; color: #fff; }
/* the header sits over hero photos until it sticks, so lift the mark off busy imagery */
.brand-logo {
  height: 46px; width: auto;
  /* white mark over bright hero photography: tight shadow for edge definition, wide one for lift */
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 60%)) drop-shadow(0 4px 16px rgb(0 0 0 / 50%));
}
@media (min-width: 1024px) { .brand-logo { height: 64px; } }

/* Nav */
.site-nav {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  max-height: 0;
  overflow: hidden;
  background: var(--color-ink-deep);
  transition: max-height .3s ease-out;
}
.site-nav.is-open { max-height: 82vh; overflow-y: auto; }
@media (min-width: 1280px) {
  .site-nav { position: static; margin-left: auto; max-height: none; overflow: visible; background: transparent; }
}

.nav-list { display: flex; flex-direction: column; gap: 8px; padding: 14px 20px 22px; }
@media (min-width: 1280px) { .nav-list { flex-direction: row; align-items: center; gap: 7px; padding: 0; } }
@media (min-width: 1280px) { .nav-list { gap: 9px; } }

/* Nav items carry the same pill shape as the "Solicita Presupuesto" button.
   They sit quiet until hovered so the gold CTA still reads as the primary action. */
.nav-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 17px;
  border: 1px solid rgb(255 255 255 / 20%);
  border-radius: 999px;
  background: rgb(255 255 255 / 7%);
  font-size: .85rem;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  white-space: nowrap;
  transition: background-color .25s, border-color .25s, color .25s, transform .25s;
}
@media (min-width: 1280px) { .nav-link { padding: 10px 19px; font-size: .87rem; } }

.nav-link:hover,
.nav-item.is-open > .nav-link {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-on-light);
}
@media (min-width: 1280px) { .nav-link:hover { transform: translateY(-1px); } }

.nav-link.is-active {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-on-light);
}
.nav-caret { width: 11px; height: 11px; transition: transform .25s; }
.nav-item.is-open > .nav-link .nav-caret { transform: rotate(180deg); }

/* Dropdowns */
.nav-item { position: relative; }
.nav-drop {
  max-height: 0; overflow: hidden;
  transition: max-height .3s ease-out;
  background: rgb(255 255 255 / 4%);
}
.nav-item.is-open > .nav-drop { max-height: 1800px; }
.nav-drop-inner { padding: 6px 0 12px; }
.nav-drop a {
  display: block;
  padding: 8px 14px;
  font-size: .85rem;
  color: rgb(255 255 255 / 78%);
  transition: color .2s, background-color .2s;
}
.nav-drop a:hover { color: var(--color-brand); }

@media (min-width: 1280px) {
  .nav-drop {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    width: max-content;
    max-height: none;
    overflow: visible;
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s, transform .22s, visibility .22s;
  }
  .nav-item:hover > .nav-drop,
  .nav-item.is-open > .nav-drop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
  .nav-drop::before { content: ""; position: absolute; inset-inline: 0; top: -14px; height: 14px; }
  .nav-drop-inner { padding: 16px 8px; }
  .nav-drop a { color: var(--color-body); border-radius: 8px; padding: 7px 14px; }
  .nav-drop a:hover { background: var(--color-cream-dark); color: var(--color-brand); }
  
  .nav-drop--list { min-width: 268px; }
}

.nav-cta { margin-top: 8px; }
/* stacked menu: the CTA matches the full-width pills above it */
.nav-cta .btn { width: 100%; }
@media (min-width: 1280px) {
  .nav-cta { margin: 0 0 0 12px; }
  .nav-cta .btn { width: auto; }
}

/* Burger */
/* Round, to sit as a pair with the theme toggle beside it. The bars are
   absolutely centred so they rotate about the middle into a clean X. */
.burger {
  position: relative;
  margin-left: auto;
  display: block;
  width: 38px; height: 38px;
  padding: 0;
  flex-shrink: 0;
  border: 1px solid rgb(255 255 255 / 38%);
  border-radius: 999px;
  background: rgb(255 255 255 / 8%);
  color: #fff;
  cursor: pointer;
  transition: background-color .25s, border-color .25s;
}
.burger:hover { border-color: #fff; background: rgb(255 255 255 / 16%); }
@media (min-width: 1280px) { .burger { display: none; } }

.burger span {
  position: absolute;
  top: 50%; left: 50%;
  width: 16px; height: 1.5px;
  margin: -.75px 0 0 -8px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .28s ease, opacity .18s ease, width .28s ease;
}
.burger span:nth-child(1) { transform: translateY(-5px); }
.burger span:nth-child(2) { width: 11px; }
.burger span:nth-child(3) { transform: translateY(5px); }

.burger.is-open span:nth-child(1) { transform: rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: rotate(-45deg); }
.burger.is-open span:nth-child(2) { width: 16px; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 660px;
  overflow: hidden;
  color: #fff;
}
@media (min-width: 1024px) { .hero { min-height: 820px; } }

.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgb(11 15 22 / 88%) 0%, rgb(11 15 22 / 66%) 42%, rgb(11 15 22 / 10%) 72%, rgb(11 15 22 / 18%) 100%),
    linear-gradient(to bottom, rgb(11 15 22 / 48%) 0%, rgb(11 15 22 / 0%) 26%, rgb(11 15 22 / 0%) 58%, rgb(11 15 22 / 62%) 100%);
}
/* padding-block only: a `padding` shorthand here would wipe .container's side padding */
.hero-inner { position: relative; z-index: 1; width: 100%; padding-block: 150px 68px; }
@media (min-width: 1024px) { .hero-inner { padding-block: 190px 92px; } }

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 17px;
  border: 1px solid rgb(255 255 255 / 28%);
  border-radius: 999px;
  background: rgb(255 255 255 / 10%);
  backdrop-filter: blur(8px);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--color-brand-soft);
  margin-bottom: 22px;
}
.hero h1 {
  color: #fff;
  font-family: "Playfair Display", var(--font-title);
  font-weight: 700;
  font-size: clamp(2.2rem, 5.6vw, 3.6rem);
  line-height: 1.1;
  letter-spacing: -.015em;
  margin-bottom: 20px;
  text-shadow: 0 2px 28px rgb(0 0 0 / 35%);
}
.hero h1 em { font-style: normal; color: var(--color-brand); display: block; }
/* The cover headline stacks onto two lines, the second carried by the <em>. */
.hero h1 { max-width: 20ch; }
.hero h1 em { display: block; color: #fff; }
.hero-sub {
  max-width: 52ch;
  font-family: var(--font-ui);
  font-size: clamp(.98rem, 1.3vw, 1.04rem);
  line-height: 1.75;
  color: rgb(255 255 255 / 85%);
  margin: 0 0 32px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 13px; }

/* ---- cover kicker and buttons ----
   Plain tracked-out gold text above the headline, and squared buttons rather
   than the pills used elsewhere on the site. Scoped to the cover only. */
.hero-kicker {
  margin: 0 0 18px;
  font-family: var(--font-ui);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--color-brand-light);
}
.hero-actions .btn {
  padding: 14px 30px;
  border-width: 1.5px;
  border-radius: 8px;
  font-size: .97rem;
}
.hero-actions .btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.hero-actions .btn-gold { color: var(--color-on-light); box-shadow: none; }
.hero-actions .btn-gold:hover { background: var(--color-brand-light); color: var(--color-on-light); }
.hero-actions .btn-ghost { background: rgb(255 255 255 / 10%); }

/* On a phone the two cover buttons wrapped onto separate lines and ate the
   fold. Tighter padding and type keeps them side by side. */
@media (max-width: 700px) {
  .hero-actions { gap: 9px; }
  /* share the row half and half rather than sizing to the label: French
     ("Réserver maintenant") is wide enough to overflow a 320px screen
     otherwise. A label that still will not fit wraps inside its own button,
     and both stay the same height because the row stretches. */
  .hero-actions .btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 11px 12px;
    font-size: .83rem;
    gap: 6px;
    letter-spacing: 0;
    white-space: normal;
    text-align: center;
    line-height: 1.3;
  }
  .hero-actions .btn svg { width: 15px; height: 15px; }
}

/* ==========================================================================
   Hero tour search
   ========================================================================== */
.tour-search {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 900px;
  margin-top: 30px;
  padding: 7px 7px 7px 6px;
  border-radius: 999px;
  /* same glass treatment as .btn-ghost ("Reservar Ahora") right above it */
  background: rgb(255 255 255 / 8%);
  border: 1px solid rgb(255 255 255 / 55%);
  backdrop-filter: blur(6px);
  box-shadow: 0 14px 34px rgb(11 15 22 / 22%);
  font-family: var(--font-ui);
}

.ts-field {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: 1 1 0;
  min-width: 0;
  padding: 9px 16px;
  border-radius: 999px;
  transition: background-color .25s;
}
.ts-field:hover { background: rgb(255 255 255 / 14%); }
.ts-field--date { flex: 0 1 auto; min-width: 150px; }

.ts-icon { display: grid; place-items: center; flex-shrink: 0; color: #fff; }
.ts-icon svg { width: 19px; height: 19px; }

.ts-input { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ts-input label {
  font-size: .82rem;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
}
.ts-input input {
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: .84rem;
  color: #fff;
  min-width: 0;
}
.ts-input input::placeholder { color: rgb(255 255 255 / 72%); opacity: 1; }
.ts-input input:focus { outline: none; }
.ts-input input::-webkit-search-cancel-button { display: none; }
/* the date fields swap to type="date" on focus; on the glass pill the native
   picker icon would be dark, so render the control dark-scheme instead */
.ts-input input[type="date"] { color-scheme: dark; }
.ts-input input::-webkit-calendar-picker-indicator { opacity: .8; cursor: pointer; }
.ts-field:focus-within { background: rgb(255 255 255 / 18%); }

.ts-sep { align-self: center; width: 1px; height: 30px; background: rgb(255 255 255 / 34%); flex-shrink: 0; }
.ts-arrow { display: grid; place-items: center; flex-shrink: 0; color: rgb(255 255 255 / 72%); padding: 0 2px; }
.ts-arrow svg { width: 17px; height: 17px; }

.ts-submit {
  flex-shrink: 0;
  padding: 0 30px;
  border: 0;
  border-radius: 999px;
  background: var(--color-brand);
  color: #fff;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 700;
  transition: background-color .25s, transform .25s;
}
.ts-submit:hover { background: var(--color-brand-dark); transform: translateY(-1px); }

/* stacked card below the pill breakpoint */
@media (max-width: 860px) {
  .tour-search {
    flex-direction: column;
    gap: 4px;
    max-width: 460px;
    padding: 14px;
    border-radius: var(--radius);
  }
  .ts-field { padding: 10px 12px; border-radius: 8px; }
  .ts-field--date { flex: 1 1 auto; min-width: 0; }
  .ts-sep { width: 100%; height: 1px; }
  .ts-arrow { display: none; }
  .ts-submit { padding: 14px 30px; margin-top: 8px; }
}

/* The search pill is hidden on phones: stacked, it pushed the hero CTAs and the
   rating row below the fold, and the date fields are awkward at that width.
   Desktop and tablet keep it. */
@media (max-width: 700px) {
  .tour-search { display: none; }
}

/* TripAdvisor rating row under the hero CTAs */
.hero-rating {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 28px;
  color: #fff;
  font-size: .92rem;
  font-weight: 600;
  transition: opacity .25s;
}
.hero-rating:hover { opacity: .85; }
.rating-stars { display: inline-flex; gap: 3px; }
.rating-sq {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: 4px;
  background: var(--color-tripadvisor);
}
.rating-sq svg { width: 14px; height: 14px; color: #fff; }
.rating-label { letter-spacing: .01em; }
.rating-brand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--color-tripadvisor);
}
.rating-brand > span { color: #fff; font-weight: 600; }
.rating-owl { width: 26px; height: 18px; flex-shrink: 0; }

/* ==========================================================================
   Trust bar
   ========================================================================== */
.trustbar { background: var(--color-ink-soft); color: #fff; }
.trustbar-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgb(255 255 255 / 10%);
}
@media (min-width: 1024px) { .trustbar-grid { grid-template-columns: repeat(4, 1fr); } }
.trust-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 26px 20px;
  background: var(--color-ink-soft);
}
.trust-icon {
  display: grid; place-items: center;
  width: 46px; height: 46px; flex-shrink: 0;
  border-radius: 12px;
  background: rgb(221 153 51 / 16%);
  color: var(--color-brand);
}
.trust-icon svg { width: 22px; height: 22px; }
.trust-item strong { display: block; font-size: .95rem; font-weight: 700; color: #fff; line-height: 1.3; }
.trust-item span { font-size: .8rem; color: rgb(255 255 255 / 60%); }

/* Phones: four across instead of two-by-two. At roughly 90px a cell the icon
   has to sit above the label, and the second line would come out as four
   lines of 8px grey, so it is dropped here - the headline carries it. */
@media (max-width: 700px) {
  .trustbar-grid { grid-template-columns: repeat(4, 1fr); }
  .trust-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 16px 5px;
  }
  .trust-icon { width: 32px; height: 32px; border-radius: 9px; }
  .trust-icon svg { width: 16px; height: 16px; }
  .trust-item strong { font-size: .6rem; line-height: 1.3; }
  .trust-item > div > span { display: none; }
}

/* ==========================================================================
   Destinations
   ========================================================================== */
.dest-track { gap: 16px; }
.dest-track > .dest-card { flex: 0 0 calc((100% - 16px) / 2); }
@media (min-width: 700px)  { .dest-track > .dest-card { flex-basis: calc((100% - 32px) / 3); } }
@media (min-width: 1100px) { .dest-track > .dest-card { flex-basis: calc((100% - 48px) / 4); } }

.dest-card {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  box-shadow: var(--shadow-sm);
}
.dest-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.6,.2,1); }
.dest-card:hover img { transform: scale(1.08); }
.dest-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(11 15 22 / 88%) 4%, rgb(11 15 22 / 34%) 46%, rgb(11 15 22 / 8%) 100%);
}
.dest-count {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgb(255 255 255 / 92%);
  color: var(--color-on-light);
  font-size: .72rem; font-weight: 800;
  letter-spacing: .04em;
}
.dest-body { position: absolute; inset-inline: 0; bottom: 0; z-index: 2; padding: 18px 16px; color: #fff; }
.dest-body h3 { color: #fff; font-size: 1.22rem; margin-bottom: 3px; }
.dest-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-sans);
  font-size: .8rem; font-weight: 700;
  color: var(--color-brand);
  opacity: 0; transform: translateY(6px);
  transition: opacity .3s, transform .3s;
}
.dest-card:hover .dest-link { opacity: 1; transform: translateY(0); }
@media (hover: none) { .dest-link { opacity: 1; transform: none; } }

/* ==========================================================================
   Why different
   ========================================================================== */
.why { background: var(--color-ink-deep); color: rgb(255 255 255 / 72%); }
.why .section-title { color: #fff; }
.why .section-sub { color: rgb(255 255 255 / 66%); }
.why .eyebrow { color: var(--color-brand); }

.why-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .why-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .why-grid { grid-template-columns: repeat(5, 1fr); gap: 14px; } }
@media (min-width: 1280px) { .why-card { padding: 26px 20px; } .why-card h3 { font-size: 1.08rem; } }

.why-card {
  padding: 30px 24px;
  border: 1px solid rgb(255 255 255 / 12%);
  border-radius: var(--radius);
  background: rgb(255 255 255 / 3%);
  transition: border-color .3s, background-color .3s, transform .3s;
}
.why-card:hover { border-color: rgb(221 153 51 / 55%); background: rgb(221 153 51 / 8%); transform: translateY(-4px); }
.why-card .trust-icon { margin-bottom: 16px; }
.why-card h3 { color: #fff; font-size: 1.16rem; margin-bottom: 9px; }
.why-card p { margin: 0; font-size: .9rem; line-height: 1.65; color: rgb(255 255 255 / 66%); }

/* ==========================================================================
   Fleet
   ========================================================================== */
.fleet-track { gap: 20px; }
@media (min-width: 560px) { .fleet-track > .fleet-card { flex-basis: calc((100% - 20px) / 2); } }
@media (min-width: 900px) { .fleet-track > .fleet-card { flex-basis: calc((100% - 40px) / 3); } }

.fleet-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .3s, box-shadow .3s, border-color .3s;
}
.fleet-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: rgb(221 153 51 / 45%); }
.fleet-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: #f5f0e8; }
.fleet-card figcaption {
  display: flex; flex-direction: column; gap: 3px; flex: 1;
  padding: 17px 20px 19px;
}
.fleet-name { font-family: var(--font-title); font-size: 1.14rem; color: var(--color-heading); }
.fleet-use {
  font-family: var(--font-ui);
  font-size: .75rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-muted);
}

/* ==========================================================================
   Tours
   ========================================================================== */
.tours { background: var(--color-cream); }

.tour-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 38px;
}
.tour-tab {
  padding: 9px 20px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-surface);
  font-size: .85rem;
  font-weight: 700;
  color: var(--color-body);
  transition: background-color .25s, color .25s, border-color .25s;
}
.tour-tab:hover { border-color: var(--color-brand); color: var(--color-brand); }
.tour-tab.is-active { background: var(--color-brand); border-color: var(--color-brand); color: #fff; }

/* Hidden on phones: the nine pills wrapped onto three rows and pushed the
   tours below the fold. The six featured cards stay, and "Ver Todos los
   Tours" underneath still reaches the full catalogue, so nothing is lost. */
@media (max-width: 700px) {
  .tour-tabs { display: none; }
}

.tour-grid { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .tour-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tour-grid { grid-template-columns: repeat(3, 1fr); } }

/* Base rating styles — shared by tour, experience and review cards.
   Without an explicit svg size these render at the SVG default and blow up. */
.tour-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  font-size: .8rem;
  color: var(--color-muted);
}
.stars { display: inline-flex; gap: 2px; color: var(--color-brand); }
.stars svg { width: 14px; height: 14px; flex-shrink: 0; }

.tour-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: 4px;
  overflow: hidden;
  transition: transform .45s cubic-bezier(.2,.6,.2,1), box-shadow .45s, border-color .45s;
}
/* a gold hairline draws across the top on hover */
.tour-card::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 3;
  height: 2px;
  background: var(--color-brand);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .55s cubic-bezier(.2,.6,.2,1);
}
.tour-card:hover {
  transform: translateY(-7px);
  border-color: rgb(221 153 51 / 32%);
  box-shadow: 0 28px 60px rgb(16 23 36 / 15%);
}
.tour-card:hover::before { transform: scaleX(1); }
.tour-card[hidden] { display: none; }

.tour-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.tour-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s cubic-bezier(.2,.6,.2,1);
}
.tour-card:hover .tour-media img { transform: scale(1.07); }
/* scrim so the overlaid label and duration stay legible on any photo */
.tour-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgb(11 15 22 / 66%) 0%,
    rgb(11 15 22 / 22%) 30%,
    rgb(11 15 22 / 0%) 58%,
    rgb(11 15 22 / 30%) 100%);
}

.tour-badge {
  position: absolute;
  top: 18px; left: 20px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0;
  background: none;
  border-radius: 0;
  color: #fff;
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgb(0 0 0 / 60%);
}
.tour-badge::before { content: ""; width: 20px; height: 1px; background: var(--color-brand); }
/* offers keep a solid chip so the discount still carries */
.tour-badge--offer {
  padding: 7px 13px;
  background: var(--color-brand);
  color: var(--color-on-light);
  letter-spacing: .13em;
  text-shadow: none;
}
.tour-badge--offer::before { content: none; }

.tour-duration {
  position: absolute;
  bottom: 18px; left: 20px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  background: none;
  border-radius: 0;
  color: #fff;
  font-family: var(--font-ui);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-shadow: 0 1px 8px rgb(0 0 0 / 60%);
}
.tour-duration svg { width: 14px; height: 14px; opacity: .85; }

.tour-body { display: flex; flex-direction: column; flex: 1; padding: 26px 24px 22px; }
.tour-body h3 { font-size: 1.28rem; line-height: 1.32; margin-bottom: 11px; }
.tour-body h3 a { transition: color .3s; }
.tour-card:hover .tour-body h3 a { color: var(--color-brand); }
.tour-excerpt { font-size: .9rem; line-height: 1.7; color: var(--color-muted); margin: 0 0 20px; flex: 1; }

.tour-card .tour-rating { display: flex; align-items: center; gap: 9px; margin-bottom: 20px; font-size: .78rem; color: var(--color-muted); }
.tour-card .stars svg { width: 13px; height: 13px; }

.tour-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--color-line);
}
.tour-from {
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.tour-more {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  padding-bottom: 3px;
  font-size: .8rem; font-weight: 700;
  letter-spacing: .05em;
  color: var(--color-brand);
  transition: gap .3s;
}
.tour-more::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--color-brand);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .4s cubic-bezier(.2,.6,.2,1);
}
.tour-card:hover .tour-more::after { transform: scaleX(1); transform-origin: left center; }
.tour-more:hover { gap: 12px; }
.tour-more svg { width: 14px; height: 14px; }

.section-foot { margin-top: 44px; text-align: center; }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band { position: relative; overflow: hidden; color: #fff; padding: 80px 0; }
.cta-band .cta-bg { position: absolute; inset: 0; z-index: 0; }
.cta-band .cta-bg img { width: 100%; height: 100%; object-fit: cover; }
.cta-band .cta-bg::after { content: ""; position: absolute; inset: 0; background: rgb(11 15 22 / 74%); }
.cta-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; text-align: center; }
.cta-inner .eyebrow { color: var(--color-brand); }
.cta-inner h2 { color: #fff; font-size: clamp(1.8rem, 3.6vw, 2.7rem); margin-bottom: 14px; }
.cta-inner p { color: rgb(255 255 255 / 80%); margin: 0 0 28px; font-size: 1.03rem; }

/* ==========================================================================
   Special experiences
   ========================================================================== */
.exp-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .exp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .exp-grid { grid-template-columns: repeat(3, 1fr); } }

.exp-card {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-sm);
}
.exp-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.6,.2,1); }
.exp-card:hover img { transform: scale(1.07); }
.exp-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(11 15 22 / 90%) 2%, rgb(11 15 22 / 38%) 52%, rgb(11 15 22 / 6%) 100%);
}
.exp-tag {
  position: absolute; top: 13px; left: 13px; z-index: 2;
  padding: 5px 13px; border-radius: 999px;
  background: var(--color-brand); color: #fff;
  font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
}
.exp-body { position: absolute; inset-inline: 0; bottom: 0; z-index: 2; padding: 20px; color: #fff; }
.exp-body h3 { color: #fff; font-size: 1.2rem; margin-bottom: 6px; }
.exp-body .tour-rating { color: rgb(255 255 255 / 75%); margin: 0; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { background: var(--color-cream); }
.faq-list { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item { border: 1px solid var(--color-line); border-radius: var(--radius); background: var(--color-surface); overflow: hidden; transition: border-color .25s, box-shadow .25s; }
.faq-item.is-open { border-color: rgb(221 153 51 / 55%); box-shadow: var(--shadow-sm); }
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; padding: 19px 22px;
  background: none; border: 0; text-align: left;
  font-family: var(--font-title); font-size: 1.1rem; font-weight: 400; color: var(--color-heading);
}
.faq-q svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--color-brand); transition: transform .3s; }
.faq-item.is-open .faq-q svg { transform: rotate(180deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.faq-a p { margin: 0; padding: 0 22px 21px; font-size: .93rem; color: var(--color-body); }

/* ==========================================================================
   Reviews
   ========================================================================== */
.reviews-note {
  max-width: 720px; margin: 0 auto 32px;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--color-cream-dark);
  text-align: center;
  font-size: .82rem;
  color: var(--color-muted);
}
/* Slider primitives: native scroll-snap so touch swipe works for free; buttons page it.
   Shared by the destinations and reviews carousels — only the card widths differ. */
[data-slider] { position: relative; }
.slider-viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 6px;
  border-radius: var(--radius);
}
.slider-viewport::-webkit-scrollbar { display: none; }
.slider-viewport:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 4px; }

.slider-track { display: flex; gap: 20px; align-items: stretch; }
.slider-track > * {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
@media (min-width: 700px)  { .reviews-track > .review-card { flex-basis: calc((100% - 20px) / 2); } }
@media (min-width: 1100px) { .reviews-track > .review-card { flex-basis: calc((100% - 40px) / 3); } }

.slider-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 28px;
}
.slider-btn {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-heading);
  transition: background-color .25s, color .25s, border-color .25s, opacity .25s;
}
.slider-btn svg { width: 18px; height: 18px; }
.slider-btn:hover:not(:disabled) { background: var(--color-brand); border-color: var(--color-brand); color: #fff; }
.slider-btn:disabled { opacity: .35; cursor: default; }

.slider-dots { display: flex; align-items: center; gap: 8px; }
.slider-dot {
  width: 8px; height: 8px;
  padding: 0;
  border: 0; border-radius: 999px;
  background: var(--color-line);
  transition: background-color .25s, width .25s;
}
.slider-dot.is-active { width: 26px; background: var(--color-brand); }

/* ==========================================================================
   Founders
   ========================================================================== */
.rule {
  display: block;
  width: 72px; height: 2px;
  margin: 20px auto 0;
  background: var(--color-brand);
}

.founder-grid { display: grid; gap: 36px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .founder-grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 60px; } }

.founder-media { position: relative; margin: 0; }
.founder-media img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 22%;
  border-radius: 2px;
  box-shadow: var(--shadow-lg);
}
.founder-badge {
  position: absolute;
  right: -14px;
  bottom: -18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 15px 26px;
  background: var(--color-ink-deep);
  color: #fff;
  box-shadow: var(--shadow);
  max-width: 78%;
}
@media (min-width: 900px) { .founder-badge { right: -28px; } }
.founder-role {
  font-size: .68rem; font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--color-brand);
}
.founder-name { font-family: var(--font-title); font-size: 1.25rem; font-weight: 400; line-height: 1.2; }

.founder-quote {
  margin: 0 0 26px;
  padding: 4px 0 4px 26px;
  border-left: 2px solid var(--color-brand);
  font-family: var(--font-title);
  font-style: italic;
  font-size: clamp(1.06rem, 1.6vw, 1.3rem);
  line-height: 1.7;
  color: var(--color-heading);
}
.founder-body > p { margin: 0 0 28px; }

.founder-creds {
  display: grid;
  gap: 14px 28px;
  grid-template-columns: 1fr;
  margin-bottom: 30px;
}
@media (min-width: 620px) { .founder-creds { grid-template-columns: repeat(2, 1fr); } }
.founder-creds li { display: flex; align-items: center; gap: 11px; }
.founder-creds svg { width: 19px; height: 19px; flex-shrink: 0; color: var(--color-brand); }
.founder-creds span {
  font-size: .78rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--color-heading);
}

.review-card {
  display: flex; flex-direction: column;
  padding: 26px 24px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition: transform .3s, box-shadow .3s;
}
.review-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.review-card .stars { margin-bottom: 12px; }
.review-card h3 { font-size: 1.02rem; margin-bottom: 9px; line-height: 1.4; }
.review-text { font-size: .89rem; color: var(--color-body); margin: 0 0 18px; flex: 1; }
.review-meta { display: flex; align-items: center; gap: 11px; padding-top: 15px; border-top: 1px solid var(--color-line); }
.review-avatar {
  display: grid; place-items: center;
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 999px;
  background: linear-gradient(140deg, var(--color-brand-light), var(--color-brand-dark));
  color: #fff; font-weight: 800; font-size: .95rem;
}
.review-name { font-size: .88rem; font-weight: 700; color: var(--color-heading); line-height: 1.3; text-wrap: balance; }
.review-src { font-size: .74rem; color: var(--color-muted); display: inline-flex; align-items: center; gap: 5px; }
.review-src svg { width: 12px; height: 12px; color: var(--color-tripadvisor); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  position: relative;
  /* desert photo behind a 0.7 ink veil; the flat colour stays as the fallback
     and as the backdrop the veil composites against */
  background-color: var(--color-ink-deep);
  background-image:
    linear-gradient(rgb(11 15 22 / 60%), rgb(11 15 22 / 60%)),
    url("../img/footer-bg.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: rgb(255 255 255 / 66%);
  font-size: .9rem;
  padding-top: 92px;
}
/* a gold rule across the very top ties the footer to the brand without
   drowning the page in it */
.site-footer::before {
  content: "";
  position: absolute; inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg,
    rgb(221 153 51 / 0%) 0%, rgb(221 153 51 / 70%) 22%,
    rgb(230 181 107 / 90%) 50%, rgb(221 153 51 / 70%) 78%, rgb(221 153 51 / 0%) 100%);
}

/* ---- crest: mark, then a gold ornament rule over the columns ---- */
.footer-brand { text-align: center; padding-bottom: 58px; }
.footer-logo { height: 62px; width: auto; margin: 0 auto; opacity: .96; }
.footer-tagline {
  max-width: 80ch;
  margin: 26px auto 0;
  line-height: 1.85;
  color: rgb(255 255 255 / 68%);
  font-size: 1rem;
}
@media (min-width: 1024px) { .footer-logo { height: 74px; } }
.footer-orn {
  display: flex; align-items: center; justify-content: center;
  gap: 18px; margin-top: 30px; color: var(--color-brand);
}
.footer-orn svg { width: 15px; height: 15px; flex-shrink: 0; }
.footer-orn-line { display: block; width: min(230px, 26vw); height: 1px; }
.footer-orn-line:first-child { background: linear-gradient(90deg, rgb(221 153 51 / 0%), rgb(221 153 51 / 58%)); }
.footer-orn-line:last-child  { background: linear-gradient(90deg, rgb(221 153 51 / 58%), rgb(221 153 51 / 0%)); }

.footer-grid { display: grid; gap: 40px; grid-template-columns: 1fr; padding-bottom: 56px; }
@media (min-width: 700px)  { .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 36px; } }
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr 1.2fr; gap: 26px; }
  /* the rule plus its padding rebuild the 52px gutter, with the line centred */
  .footer-col + .footer-col {
    border-left: 1px solid rgb(255 255 255 / 12%);
    padding-left: 30px;
  }
}

/* column headings read as small gold eyebrows, not as page headings */
.footer-col h2 {
  font-family: var(--font-ui);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--color-brand-light);
  margin-bottom: 24px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 11px; }
.footer-col a { color: rgb(255 255 255 / 72%); transition: color .2s, padding-left .2s; }
.footer-col a:hover { color: #fff; }
/* nudge link lists on hover; the contact list has icons, so it stays put */
.footer-col ul:not(.footer-contact) a:hover { padding-left: 5px; }

.footer-social { display: flex; flex-wrap: wrap; gap: 8px; }
.footer-social a {
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 16%);
  background: transparent;
  color: rgb(255 255 255 / 66%);
  transition: background-color .25s, color .25s, border-color .25s;
}
.footer-social a:hover {
  background: transparent;
  border-color: var(--color-brand);
  color: var(--color-brand);
}

.footer-contact { gap: 14px !important; }
.footer-contact li { display: flex; align-items: flex-start; gap: 12px; line-height: 1.55; }
.footer-contact svg { width: 16px; height: 16px; margin-top: 3px; color: var(--color-brand); flex-shrink: 0; }
.footer-contact span { color: rgb(255 255 255 / 60%); }

/* The bottom bar sits outside the container so its gold runs edge to edge;
   .footer-bottom-inner puts the content back on the grid. */
.footer-bottom {
  background: rgb(11 15 22 / 55%);
  border-top: 1px solid rgb(255 255 255 / 10%);
  color: rgb(255 255 255 / 52%);
  font-size: .8rem;
}
.footer-bottom-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  /* the floating WhatsApp pill is pinned to the bottom-right of the viewport and
     would sit over the language links once the page is scrolled to the end */
  padding-block: 22px 78px;
}
.footer-bottom-right {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px 18px;
}
.footer-bottom-right .footer-social a svg { width: 15px; height: 15px; }
@media (min-width: 700px) {
  .footer-bottom-right::before {
    content: "";
    width: 1px; height: 18px;
    background: rgb(255 255 255 / 14%);
  }
}
.lang-switch { display: flex; flex-wrap: wrap; gap: 6px; }
.lang-switch a {
  position: relative;
  padding: 3px 14px;
  font-family: var(--font-ui);
  font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  color: rgb(255 255 255 / 56%);
  transition: color .25s;
}
.lang-switch a + a::before {
  content: "";
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 11px; background: rgb(255 255 255 / 18%);
}
.lang-switch a:hover { color: #fff; }
.lang-switch a.is-active { color: var(--color-brand); }

/* ==========================================================================
   Floating elements
   ========================================================================== */
.float-whats {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--color-whats);
  color: #fff; font-size: .86rem; font-weight: 700;
  box-shadow: 0 10px 28px rgb(37 211 102 / 42%);
  transition: background-color .25s, transform .25s;
}
.float-whats:hover { background: var(--color-whats-dark); transform: translateY(-2px); }
.float-whats svg { width: 20px; height: 20px; }
.float-whats span { display: none; }
@media (min-width: 560px) { .float-whats span { display: inline; } }

.budget-pop {
  position: fixed;
  right: 18px; bottom: 84px;
  z-index: 95;
  width: min(360px, calc(100vw - 36px));
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow-lg);
  transform: translateY(24px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s, transform .35s, visibility .35s;
}
.budget-pop.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.budget-pop-media { position: relative; aspect-ratio: 16 / 7; }
.budget-pop-media img { width: 100%; height: 100%; object-fit: cover; }
.budget-close {
  position: absolute; top: 9px; right: 9px;
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border: 0; border-radius: 999px;
  background: rgb(11 15 22 / 62%);
  color: #fff; font-size: 1rem; line-height: 1;
}
.budget-close:hover { background: var(--color-ink-deep); }
.budget-body { padding: 18px 20px 20px; }
.budget-body .eyebrow { margin-bottom: 8px; font-size: .68rem; }
.budget-body h2 { font-size: 1.14rem; line-height: 1.32; margin-bottom: 9px; }
.budget-body p { font-size: .84rem; color: var(--color-muted); margin: 0 0 16px; }
.budget-actions { display: flex; align-items: center; gap: 12px; }
.budget-later { background: none; border: 0; padding: 0; font-size: .82rem; font-weight: 600; color: var(--color-muted); }
.budget-later:hover { color: var(--color-heading); }

/* ==========================================================================
   Reveal on scroll
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

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

/* ==========================================================================
   FAQ + reviews (paired dark section)
   ========================================================================== */
.proof { background: var(--color-ink-deep); }
/* wider than the site container: three review cards need the room to stay readable */
@media (min-width: 1400px) { .proof > .container { max-width: 1440px; } }
.proof-grid { display: grid; gap: 56px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1024px) { .proof-grid { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: 60px; } }

.proof-col { min-width: 0; }
.proof-head { margin-bottom: 30px; }
.proof-head .eyebrow { color: var(--color-brand); }
.proof-head .eyebrow::before, .proof-head .eyebrow::after { content: none; }
.proof-head .section-title { color: #fff; font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-bottom: 12px; }
.proof-head .section-sub { color: rgb(255 255 255 / 62%); font-size: .95rem; }

/* FAQ on dark */
.proof .faq-list { max-width: none; gap: 10px; }
.proof .faq-item {
  background: rgb(255 255 255 / 4%);
  border-color: rgb(255 255 255 / 10%);
}
.proof .faq-item.is-open {
  background: rgb(221 153 51 / 7%);
  border-color: rgb(221 153 51 / 45%);
  box-shadow: none;
}
.proof .faq-q { color: #fff; font-size: 1.02rem; padding: 17px 20px; }
.proof .faq-item.is-open .faq-q { color: var(--color-brand); }
.proof .faq-a p { color: rgb(255 255 255 / 68%); padding: 0 20px 19px; }
.proof .faq-a a { color: var(--color-brand); text-decoration: underline; text-underline-offset: 3px; }

/* Review cards on dark */
.proof .review-card {
  background: rgb(255 255 255 / 4%);
  border-color: rgb(255 255 255 / 10%);
  box-shadow: none;
  padding: 24px 22px;
}
.proof .review-card:hover { transform: translateY(-4px); border-color: rgb(221 153 51 / 40%); }
.proof .review-card h3 { color: #fff; font-size: .98rem; }
.proof .review-text {
  color: rgb(255 255 255 / 66%);
  font-size: .88rem;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.proof .review-meta { border-top-color: rgb(255 255 255 / 12%); }
.proof .review-name { color: #fff; }
.proof .review-src { color: rgb(255 255 255 / 45%); }

/* Slider controls on dark */
.proof .slider-controls { justify-content: flex-start; margin-top: 24px; }
.proof .slider-btn {
  background: rgb(255 255 255 / 6%);
  border-color: rgb(255 255 255 / 16%);
  color: #fff;
}
.proof .slider-btn:hover:not(:disabled) { background: var(--color-brand); border-color: var(--color-brand); color: var(--color-on-light); }
.proof .slider-dot { background: rgb(255 255 255 / 22%); }
.proof .slider-dot.is-active { background: var(--color-brand); }

/* three across on wide screens, as in the reference */
@media (min-width: 1024px) { .proof .reviews-track > .review-card { flex-basis: calc((100% - 20px) / 2); } }
@media (min-width: 1400px) { .proof .reviews-track > .review-card { flex-basis: calc((100% - 40px) / 3); } }

/* ==========================================================================
   Interior pages
   ========================================================================== */
.page-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 420px;
  overflow: hidden;
  color: #fff;
}
@media (min-width: 1024px) { .page-hero { min-height: 520px; } }
.page-hero-bg { position: absolute; inset: 0; z-index: 0; }
.page-hero-bg img { width: 100%; height: 100%; object-fit: cover; }
/* the source photo has the subject on the left; mirroring moves it clear of the headline */
.page-hero-bg--flip img { transform: scaleX(-1); }
.page-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgb(11 15 22 / 88%) 0%, rgb(11 15 22 / 46%) 55%, rgb(11 15 22 / 62%) 100%);
}
.page-hero-inner { position: relative; z-index: 1; width: 100%; padding-block: 140px 54px; }
@media (min-width: 1024px) { .page-hero-inner { padding-block: 190px 66px; } }
.page-hero h1 {
  color: #fff;
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  margin-bottom: 12px;
  text-shadow: 0 2px 24px rgb(0 0 0 / 35%);
}
.page-hero-sub { max-width: 56ch; margin: 0; color: rgb(255 255 255 / 82%); font-size: 1.03rem; }

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-bottom: 16px;
  font-family: var(--font-ui);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: rgb(255 255 255 / 66%);
}
.breadcrumb a { transition: color .2s; }
.breadcrumb a:hover { color: var(--color-brand); }
.breadcrumb span[aria-hidden] { opacity: .45; }
.breadcrumb [aria-current] { color: var(--color-brand); }

/* two-column intro/closing rows used on the interior pages */
.split-about { display: grid; gap: 38px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .split-about { grid-template-columns: 1.05fr .95fr; gap: 58px; } }
.split-about-body .section-title { font-size: clamp(1.6rem, 2.8vw, 2.3rem); margin-bottom: 20px; }
.split-about-body p { margin: 0 0 20px; }
.split-about-media {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-lg);
}
.split-about-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }

.story-quote {
  margin: 0 0 22px;
  padding: 4px 0 4px 26px;
  border-left: 2px solid var(--color-brand);
  font-family: var(--font-title);
  font-style: italic;
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 1.75;
  color: var(--color-heading);
}


/* founder bios */

/* closing quote */
.together { background: var(--color-cream); }
.together-quote {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 0 0 28px;
  border-left: 2px solid var(--color-brand);
  font-family: var(--font-title);
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  line-height: 1.75;
  color: var(--color-heading);
}
.together-quote cite {
  display: block;
  margin-top: 18px;
  font-style: normal;
  color: var(--color-brand);
}

/* ---- about page: hero stat strip, values, numbers ---- */
.page-hero .hero-eyebrow { margin-bottom: 18px; }
.page-hero .hero-actions { margin-top: 26px; }

/* black band, matching the trust strip rather than the gold slab it was */
.hero-stats { background: var(--color-ink-soft); color: #fff; }
.hero-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: rgb(255 255 255 / 10%);
}
@media (min-width: 900px) { .hero-stats-grid { grid-template-columns: repeat(4, 1fr); } }
.hero-stats-grid > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  padding: 26px 18px;
  background: var(--color-ink-soft);
  text-align: center;
}
.hs-value { font-family: var(--font-title); font-size: clamp(1.6rem, 2.4vw, 2.1rem); color: #fff; line-height: 1; }
.hs-label {
  font-family: var(--font-ui);
  font-size: .72rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgb(255 255 255 / 60%);
}

@media (min-width: 900px)  { .why-grid--six { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .why-grid--six { grid-template-columns: repeat(3, 1fr); gap: 16px; } }


/* ---- about page: team + values, side by side ---- */
.eyebrow--plain::before, .eyebrow--plain::after { content: none; }

.team-people { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .team-people { grid-template-columns: repeat(2, 1fr); } }

.person {
  display: flex;
  gap: 20px;
  padding: 26px 26px 24px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-cream);
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
.person:hover { border-color: rgb(221 153 51 / 38%); box-shadow: var(--shadow); transform: translateY(-3px); }

.person-avatar {
  flex-shrink: 0;
  width: 74px; height: 74px;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--color-line);
}
.person-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }

.person-body { min-width: 0; }
.person-body h3 { font-size: 1.3rem; margin-bottom: 2px; }
.person-role {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-ui);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--color-brand);
}
.person-body p { margin: 0; font-size: .93rem; }

.team-note { max-width: 820px; margin: 34px auto 0; text-align: center; }
.team-signoff {
  max-width: 820px;
  margin: 16px auto 0;
  text-align: center;
  font-family: var(--font-title);
  font-style: italic;
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--color-brand);
}






/* ==========================================================================
   Differentiators page
   ========================================================================== */
/* the lifted cards sit 60px into the hero, so its copy needs clearance above them */
.page-hero--overlap .page-hero-inner { padding-bottom: 124px; }
@media (min-width: 1024px) { .page-hero--overlap .page-hero-inner { padding-bottom: 146px; } }

/* white cards lifted over the hero photo, centred, as on the original */
#compromiso { padding-top: 0; }
.pillars {
  position: relative;
  z-index: 2;
  margin-top: -60px;
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 760px)  { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pillars { grid-template-columns: repeat(3, 1fr); gap: 28px; } }

.pillar {
  padding: 38px 32px 40px;
  border-radius: 10px;
  background: var(--color-surface);
  box-shadow: 0 18px 44px rgb(16 23 36 / 12%);
  text-align: center;
}
.pillar h3 { font-size: 1.3rem; line-height: 1.34; margin-bottom: 10px; }
.pillar-tag {
  display: block;
  font-size: .92rem;
  color: var(--color-body);
}

/* thin rule with a heavier segment through the middle */
.pillar-rule {
  position: relative;
  display: block;
  width: 118px;
  height: 1px;
  margin: 20px auto 24px;
  background: var(--color-line);
}
.pillar-rule::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 3px;
  background: var(--color-heading);
}
.pillar p { margin: 0; }

.esencia { background: var(--color-cream); }
.esencia-grid { display: grid; gap: 40px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1024px) { .esencia-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 58px; } }

.esencia-media {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  box-shadow: var(--shadow-lg);
}
.esencia-media img { width: 100%; height: 100%; object-fit: cover; }

.esencia-body .section-title { font-size: clamp(1.6rem, 2.8vw, 2.3rem); margin-bottom: 0; }
.rule--left { margin: 20px 0 22px; }
.esencia-body > p { margin: 0 0 24px; }
.esencia-accordion { max-width: none; margin-bottom: 24px; }
.esencia-accordion .faq-q { font-size: 1rem; padding: 16px 18px; }
.esencia-accordion .faq-a p { padding: 0 18px 18px; font-size: .92rem; }

.explora-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px)  { .explora-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .explora-grid { grid-template-columns: repeat(5, 1fr); } }
.explora-grid > .dest-card { aspect-ratio: 3 / 4; }


/* ==========================================================================
   Contact page
   ========================================================================== */
.hero-stats-grid--three { grid-template-columns: 1fr; }
@media (min-width: 700px) { .hero-stats-grid--three { grid-template-columns: repeat(3, 1fr); } }

.contact-grid { display: grid; gap: 36px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 52px; } }

.contact-form-card {
  padding: 34px 30px 32px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow);
}
.contact-form-card .section-title { font-size: clamp(1.5rem, 2.4vw, 1.95rem); margin-bottom: 10px; }
.form-intro { margin: 0 0 26px; font-size: .95rem; color: var(--color-muted); }

.cfield { margin-bottom: 18px; }
.cfield-row { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .cfield-row { grid-template-columns: repeat(2, 1fr); } }
.cfield label {
  display: block;
  margin-bottom: 7px;
  font-family: var(--font-ui);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-heading);
}
.cfield label span { color: var(--color-brand); }
.cfield input,
.cfield textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--color-line);
  border-radius: 6px;
  background: var(--color-cream);
  font-family: var(--font-body);
  font-size: .96rem;
  color: var(--color-heading);
  transition: border-color .25s, background-color .25s, box-shadow .25s;
}
.cfield textarea { resize: vertical; min-height: 120px; }
.cfield input::placeholder,
.cfield textarea::placeholder { color: var(--color-muted); opacity: 1; }
.cfield input:focus,
.cfield textarea:focus {
  outline: none;
  background: var(--color-surface);
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px rgb(221 153 51 / 18%);
}
.cfield input[aria-invalid="true"],
.cfield textarea[aria-invalid="true"] { border-color: #c0392b; background: #fdf3f2; }

.cform-error { margin: 0 0 14px; font-size: .88rem; color: #c0392b; }
.cform-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.cform-note { margin: 16px 0 0; font-size: .82rem; color: var(--color-muted); }

.btn-whats { background: var(--color-whats); color: #fff; }
.btn-whats:hover { background: var(--color-whats-dark); }

.contact-info .section-title { font-size: clamp(1.5rem, 2.4vw, 1.95rem); margin-bottom: 24px; }
.cinfo-list { display: flex; flex-direction: column; gap: 22px; }
.cinfo-item { display: flex; gap: 15px; align-items: flex-start; }
.cinfo-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgb(221 153 51 / 12%);
  color: var(--color-brand);
}
.cinfo-icon svg { width: 20px; height: 20px; }
.cinfo-item h3 { font-size: 1.08rem; margin-bottom: 3px; }
.cinfo-item p { margin: 0; font-size: .95rem; }
.cinfo-item a { transition: color .2s; }
.cinfo-item a:hover { color: var(--color-brand); }
.cinfo-sub {
  display: block;
  margin-top: 2px;
  font-family: var(--font-ui);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.cinfo-cta {
  margin-top: 30px;
  padding: 24px;
  border-radius: var(--radius);
  background: var(--color-cream);
  border: 1px solid var(--color-line);
}
.cinfo-cta p { margin: 0 0 16px; font-size: .93rem; }

.steps-section { background: var(--color-cream); }
.step-list { margin: 0; padding-left: 18px; list-style: disc; font-size: .92rem; }
.step-list li { margin-bottom: 7px; }
.step a { color: var(--color-brand); text-decoration: underline; text-underline-offset: 3px; }

.map-frame {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--color-line);
  box-shadow: var(--shadow);
  aspect-ratio: 16 / 9;
}
@media (max-width: 700px) { .map-frame { aspect-ratio: 4 / 3; } }
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (min-width: 900px)  { .why-grid--five { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .why-grid--five { grid-template-columns: repeat(5, 1fr); gap: 14px; } }

/* ---- contact: booking steps as toggles, map alongside ---- */
.steps-section { background: var(--color-cream); }
.steps-grid { display: grid; gap: 36px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1024px) { .steps-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 50px; } }

.steps-col .section-title { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 26px; }
.steps-accordion { max-width: none; }
.steps-accordion .faq-q { font-size: 1rem; padding: 17px 20px; }
.steps-accordion .faq-a p { padding: 0 20px 8px; font-size: .93rem; }
.steps-accordion .faq-a p:last-child { padding-bottom: 20px; }
.steps-accordion .faq-a a { color: var(--color-brand); text-decoration: underline; text-underline-offset: 3px; }
.steps-accordion .step-list {
  margin: 0;
  padding: 0 20px 20px 40px;
  list-style: disc;
  font-size: .92rem;
  color: var(--color-body);
}
.steps-accordion .step-list li { margin-bottom: 7px; }

.map-title {
  font-size: 1.3rem;
  margin-bottom: 16px;
}
.map-note h3 a { transition: color .2s; }
.map-note h3 a:hover { color: var(--color-brand); }

@media (min-width: 1024px) { .steps-map { position: sticky; top: 110px; } }
.steps-map .map-frame { aspect-ratio: 4 / 3; }
.map-note {
  margin-top: 20px;
  padding: 24px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
}
.map-note h3 { font-size: 1.2rem; margin-bottom: 8px; }
.map-note p { margin: 0 0 18px; font-size: .93rem; }

/* ==========================================================================
   FAQ page
   ========================================================================== */
.page-hero--short { min-height: 400px; align-items: center; }
@media (min-width: 1024px) { .page-hero--short { min-height: 460px; } }
.page-hero--short .page-hero-inner { padding-block: 130px 46px; }
@media (min-width: 1024px) { .page-hero--short .page-hero-inner { padding-block: 165px 54px; } }

.faq-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 520px;
  margin-top: 26px;
  padding: 4px 6px 4px 18px;
  border-radius: 999px;
  background: var(--color-surface);
  box-shadow: 0 14px 36px rgb(11 15 22 / 24%);
}
.page-hero .faq-search svg { width: 19px; height: 19px; flex-shrink: 0; color: var(--color-muted); }
.page-hero .faq-search input {
  flex: 1;
  min-width: 0;
  padding: 14px 14px 14px 0;
  border: 0;
  background: none;
  font-family: var(--font-ui);
  font-size: .94rem;
  color: var(--color-heading);
}
.page-hero .faq-search input:focus { outline: none; }
.faq-search input::placeholder { color: var(--color-muted); opacity: 1; }
.faq-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* popular questions */
.popular-section { background: var(--color-cream); }
.pop-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 700px)  { .pop-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .pop-grid { grid-template-columns: repeat(3, 1fr); } }
.pop-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
  font-size: .96rem;
  color: var(--color-heading);
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.pop-q:hover { border-color: rgb(221 153 51 / 45%); transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.pop-q svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--color-brand); }

.cats-section { background: var(--color-surface); }
.allfaq-section { background: var(--color-cream); }

/* category cards */
.cats-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 560px)  { .cats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .cats-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .cats-grid { grid-template-columns: repeat(4, 1fr); } }
.cat-card {
  display: flex;
  flex-direction: column;
  padding: 26px 24px 24px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.cat-card:hover { border-color: rgb(221 153 51 / 45%); transform: translateY(-4px); box-shadow: var(--shadow); }
.cat-num {
  font-family: var(--font-title);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--color-brand);
  margin-bottom: 14px;
}
.cat-card h3 { font-size: 1.1rem; line-height: 1.34; margin-bottom: 10px; flex: 1; }
.cat-count {
  font-family: var(--font-ui);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* all questions + aside */
.allfaq-grid { display: grid; gap: 40px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1024px) { .allfaq-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 52px; } }
.allfaq-col .section-title { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 30px; }

.faq-group { margin-bottom: 38px; scroll-margin-top: 110px; }
.faq-group:last-child { margin-bottom: 0; }
.faq-group-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 1.24rem;
}
.faq-group-title span {
  font-family: var(--font-ui);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgb(221 153 51 / 14%);
  color: var(--color-brand-dark);
}
.faq-group[hidden] { display: none; }
.allfaq-col .faq-list { max-width: none; gap: 10px; }
.faq-empty { margin: 0 0 24px; font-size: .95rem; color: var(--color-muted); }

.ask-card {
  padding: 30px 26px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-cream);
}
@media (min-width: 1024px) { .allfaq-aside { position: sticky; top: 110px; } }
.ask-card h3 { font-size: 1.3rem; margin-bottom: 10px; }
.ask-card p { margin: 0 0 20px; font-size: .93rem; }
.ask-card .btn { width: 100%; margin-bottom: 10px; }
.ask-list { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--color-line); display: flex; flex-direction: column; gap: 14px; }
.ask-list li { display: flex; flex-direction: column; gap: 2px; font-size: .92rem; }
.ask-list strong {
  font-family: var(--font-ui);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.ask-list a { transition: color .2s; word-break: break-word; }
.ask-list a:hover { color: var(--color-brand); }

/* ---- quote page ---- */
.cfield select {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--color-line);
  border-radius: 6px;
  background: var(--color-cream);
  font-family: var(--font-body);
  font-size: .96rem;
  color: var(--color-heading);
  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='%23667085' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 15px;
  padding-right: 40px;
  transition: border-color .25s, background-color .25s, box-shadow .25s;
}
.cfield select:focus {
  outline: none;
  background-color: var(--color-surface);
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px rgb(221 153 51 / 18%);
}
.cfield select[aria-invalid="true"] { border-color: #c0392b; background-color: #fdf3f2; }

.after-card {
  padding: 28px 26px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
}
.after-card .cat-num { display: block; margin-bottom: 12px; }
.after-card h3 { font-size: 1.18rem; margin-bottom: 9px; }
.after-card p { margin: 0; font-size: .93rem; color: var(--color-muted); }

.cinfo-cta .ask-list { margin-top: 20px; padding-top: 18px; }

/* ==========================================================================
   Single tour page
   ========================================================================== */
.tour-hero .page-hero-inner { padding-block: 150px 52px; }
@media (min-width: 1024px) { .tour-hero .page-hero-inner { padding-block: 195px 62px; } }
.tour-hero h1 { max-width: 20ch; }

/* Tour pages run a narrower content column than the marketing pages, so the
   shared display sizes are a step too large here. */
.tour-hero h1 { font-size: clamp(1.7rem, 3.2vw, 2.45rem); }
/* The steps toggle is now a real heading wrapping its button — the button keeps
   all the styling, the h2 just carries the outline. */
.bs-head-h { margin: 0; font-size: inherit; line-height: inherit; }

/* Two reviews at a time in the tour column; the three-up rule is for the wider
   marketing sections and would squeeze these. */
@media (min-width: 1100px) {
  .tour-block .reviews-track > .review-card { flex-basis: calc((100% - 20px) / 2); }
}

.tour-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 22px;
  font-family: var(--font-ui);
  font-size: .88rem;
  color: rgb(255 255 255 / 88%);
}
.tour-meta li { display: flex; align-items: center; gap: 9px; }
.tour-meta svg { width: 17px; height: 17px; color: var(--color-brand); flex-shrink: 0; }

/* single-tour page layout — named apart from .tour-grid, which is the tour-card grid */
.tour-layout { display: grid; gap: 44px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1024px) { .tour-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 350px); gap: 52px; } }

.tour-block { margin-bottom: 52px; }
.tour-block:last-child { margin-bottom: 0; }
.tour-block .section-title { font-size: clamp(1.3rem, 2vw, 1.68rem); margin-bottom: 16px; }
.tour-block > p { margin: 0 0 18px; }


/* itinerary */
.days { display: flex; flex-direction: column; gap: 18px; }
.day p { margin: 0 0 14px; font-size: .95rem; }
.day-stay {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 18px 0 0 !important;
  padding-top: 15px;
  border-top: 1px solid var(--color-line);
  font-family: var(--font-ui);
  font-size: .84rem;
  font-weight: 600;
  color: var(--color-muted);
}
.day-stay svg { width: 16px; height: 16px; color: var(--color-brand); flex-shrink: 0; }

.route-line { font-size: .95rem; }
.tour-block .map-frame { aspect-ratio: 16 / 9; }

.gallery { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .gallery { grid-template-columns: repeat(4, 1fr); } }
.gallery figure { margin: 0; border-radius: var(--radius); overflow: hidden; aspect-ratio: 1 / 1; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.6,.2,1); }
.gallery figure:hover img { transform: scale(1.07); }



.tour-block .faq-list { max-width: none; }

/* sidebar */
/* Booking card rises clear of the sticky anchor band (~61px) plus the section's
   40px padding, landing ~29px into the hero above it. z-index puts it over the
   band; once scrolled the band pins at 0 and the card at 110px, so they never meet.
   Desktop only — on mobile the sidebar stacks below the content. */
@media (min-width: 1024px) {
  .tour-aside {
    position: sticky;
    top: 110px;
    margin-top: -130px;
    z-index: 70;
  }
}
.book-card {
  padding: 28px 26px;
  margin-bottom: 20px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-ink-deep);
  color: rgb(255 255 255 / 76%);
}
.book-eyebrow {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-ui);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--color-brand);
}
.book-card h2 { color: #fff; font-size: 1.4rem; margin-bottom: 10px; }
.book-card p { margin: 0 0 20px; font-size: .92rem; }
.book-card .btn { width: 100%; margin-bottom: 10px; }
.book-meta { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgb(255 255 255 / 14%); display: grid; gap: 12px; }
.book-meta li { display: flex; justify-content: space-between; gap: 14px; font-size: .9rem; }
.book-meta span {
  font-family: var(--font-ui);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 52%);
}
.book-meta strong { color: #fff; font-weight: 600; }

.inc-card {
  padding: 26px 24px;
  margin-bottom: 20px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
}
.inc-card:last-child { margin-bottom: 0; }
.inc-title { font-size: 1.2rem; margin-bottom: 16px; }
.inc-list { display: grid; gap: 11px; font-size: .92rem; }
.inc-list li { position: relative; padding-left: 27px; }
.inc-list li::before {
  position: absolute;
  left: 0; top: .05em;
  font-weight: 700;
}
.inc-list--yes li::before { content: "✓"; color: #1e8e3e; }
.inc-list--no li::before { content: "✕"; color: #c0392b; }
.inc-note { margin: 18px 0 0; padding-top: 15px; border-top: 1px solid var(--color-line); font-size: .86rem; color: var(--color-muted); }

/* the sticky anchor bar already separates this from the hero — no need for a full section gap above */
.tour-section { background: var(--color-surface); padding-top: 30px; }
@media (min-width: 768px) { .tour-section { padding-top: 40px; } }
.tour-main { min-width: 0; }

.related-section { background: var(--color-cream); }

/* ---- tour page: sub-nav, feature chips, day rows, steps, tags ---- */
.tour-subnav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--color-ink-deep);
  border-bottom: 1px solid rgb(255 255 255 / 12%);
}
@media (min-width: 1280px) { .tour-subnav { top: 0; } }
.subnav-scroll {
  display: flex;
  gap: 0;
  padding: 13px 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.subnav-scroll::-webkit-scrollbar { display: none; }
/* plain anchors parted by hairlines rather than pills */
.subnav-scroll a {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 6px 22px;
  font-family: var(--font-ui);
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.2;
  color: rgb(255 255 255 / 74%);
  white-space: nowrap;
  transition: color .25s;
}
.subnav-scroll a:first-child { padding-left: 0; }
.subnav-scroll a:last-child { padding-right: 0; }
.subnav-scroll a + a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 15px;
  background: rgb(255 255 255 / 22%);
}
.subnav-scroll a:hover { color: var(--color-brand); }
.subnav-scroll a:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }

.block-lead { color: var(--color-muted); font-size: .96rem; margin-bottom: 22px !important; }
.tour-block .eyebrow { margin-bottom: 8px; }

.feat-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); margin-top: 28px; }
@media (min-width: 900px) { .feat-grid { grid-template-columns: repeat(4, 1fr); } }
.feat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 20px 18px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-cream);
}
.feat-icon { color: var(--color-brand); margin-bottom: 8px; }
.feat-icon svg { width: 22px; height: 22px; }
.feat strong { font-size: .95rem; color: var(--color-heading); }
.feat-sub { font-family: var(--font-ui); font-size: .76rem; color: var(--color-muted); }

.days { display: flex; flex-direction: column; gap: 16px; }
.day {
  display: flex;
  gap: 20px;
  padding: 26px 24px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-surface);
}
.day-badge {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  border-radius: var(--radius);
  background: var(--color-brand);
  color: #fff;
  line-height: 1;
}
.day-badge span { font-family: var(--font-ui); font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.day-badge strong { font-family: var(--font-title); font-size: 1.6rem; font-weight: 400; margin-top: 3px; }
.day-body { min-width: 0; }
.day-body h3 { font-size: 1.14rem; line-height: 1.4; margin-bottom: 10px; }
.day-body p { margin: 0 0 12px; font-size: .94rem; }
.day-stay {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 14px 0 0 !important;
  padding-top: 13px;
  border-top: 1px solid var(--color-line);
  font-size: .88rem;
  color: var(--color-muted);
}
.day-stay svg { width: 15px; height: 15px; color: var(--color-brand); flex-shrink: 0; margin-top: 3px; }
.day-stay strong { color: var(--color-heading); }

/* On a phone the 62px badge beside the copy left the text about 215px wide,
   wrapping every four or five words. Below this width the badge becomes a
   chip above the day, so the itinerary gets the full column. */
@media (max-width: 680px) {
  .day { flex-direction: column; gap: 14px; padding: 22px 18px; }
  .day-badge {
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    align-self: flex-start;
    gap: 8px;
    width: auto;
    height: auto;
    padding: 7px 15px;
    border-radius: 999px;
  }
  .day-badge span { font-size: .62rem; opacity: .9; }
  .day-badge strong { font-size: 1.12rem; margin-top: 0; }
  .day-body h3 { font-size: 1.08rem; }
  .day-stay { align-items: flex-start; }
}

.tour-note {
  margin-top: 22px;
  padding: 18px 20px;
  border-left: 3px solid var(--color-brand);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--color-cream);
  font-size: .9rem;
}
.map-link { margin: 14px 0 0; font-size: .9rem; }
.map-link a { color: var(--color-brand); text-decoration: underline; text-underline-offset: 3px; }


.tour-tags { padding-top: 26px; border-top: 1px solid var(--color-line); }
.tags-title { font-size: 1.05rem; margin-bottom: 16px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 12px; }
.tag {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  background: var(--color-surface);
  font-family: var(--font-ui);
  font-size: .8rem;
  color: var(--color-muted);
}
.tag--cat { color: var(--color-brand-dark); border-color: rgb(221 153 51 / 40%); transition: background-color .2s, color .2s; }
.tag--cat:hover { background: var(--color-brand); border-color: var(--color-brand); color: #fff; }

.book-badges { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgb(255 255 255 / 14%); display: grid; gap: 9px; }
.book-badges li { position: relative; padding-left: 24px; font-size: .86rem; }
.book-badges li::before { content: "✓"; position: absolute; left: 0; color: var(--color-brand); font-weight: 700; }


.tour-grid-4 { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 640px)  { .tour-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .tour-grid-4 { grid-template-columns: repeat(4, 1fr); } }
.tour-grid-4 .tour-body h3 { font-size: 1.05rem; }

/* ---- tour page: sidebar enquiry form ---- */
.enq-card {
  padding: 26px 24px;
  margin-bottom: 20px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  background: var(--color-cream);
}
.enq-eyebrow {
  display: block;
  margin-bottom: 20px;
  font-family: var(--font-ui);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-brand-dark);
}
.enq-card .cfield { margin-bottom: 16px; }
.enq-card .cfield label {
  font-family: var(--font-ui);
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-body);
}
.enq-card .cfield input,
.enq-card .cfield textarea { background: var(--color-surface); border-radius: 10px; }
.enq-card .btn { width: 100%; margin-bottom: 10px; }
.enq-card .btn svg { width: 18px; height: 18px; }
.enq-contact {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--color-line);
  display: grid;
  gap: 10px;
}
.enq-contact li { display: flex; align-items: center; gap: 10px; font-size: .88rem; }
.enq-contact svg { width: 17px; height: 17px; color: var(--color-brand); flex-shrink: 0; }
.enq-contact a { color: var(--color-brand-dark); word-break: break-word; transition: color .2s; }
.enq-contact a:hover { color: var(--color-brand); }

/* ---- tour page: booking steps in one collapsible panel ---- */
.steps-panel { background: var(--color-cream); border-color: var(--color-line); }
.steps-panel .bs-head { padding: 22px 24px; }
.bs-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-title);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  font-weight: 400;
  color: var(--color-heading);
}
.bs-title svg { width: 22px; height: 22px; color: var(--color-brand); flex-shrink: 0; }

.bs-body { padding: 0 24px 26px; display: flex; flex-direction: column; gap: 26px; }
.bs-step { display: flex; gap: 16px; }
.bs-num {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--color-brand);
  color: #fff;
  font-family: var(--font-ui);
  font-size: .92rem;
  font-weight: 700;
}
.bs-text { min-width: 0; }
.bs-text h3 { font-family: var(--font-ui); font-size: 1.02rem; font-weight: 700; margin-bottom: 7px; }
.bs-text p { margin: 0; font-size: .95rem; color: var(--color-body); }
.bs-text ul { margin: 10px 0 0; padding-left: 20px; list-style: disc; font-size: .93rem; color: var(--color-body); }
.bs-text ul li { margin-bottom: 5px; }

/* ---- tour page: highlights block ---- */
.hl-heading {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: clamp(1.3rem, 2vw, 1.68rem);   /* matches .tour-block .section-title */
  line-height: 1.22;
  margin-bottom: 10px;
}
.hl-heading svg { width: 30px; height: 30px; flex-shrink: 0; margin-top: .12em; color: var(--color-heading); }
.hl-sub {
  margin: 0 0 26px !important;
  font-style: italic;
  font-size: 1.02rem;
  color: var(--color-body);
}

.hl-list { display: grid; gap: 18px; }
.hl-list li { display: flex; align-items: flex-start; gap: 16px; font-size: 1.02rem; line-height: 1.5; }
.hl-mark {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-top: .04em;
  border: 1px solid rgb(221 153 51 / 45%);
  border-radius: 999px;
  background: rgb(221 153 51 / 10%);
  color: var(--color-brand);
}
.hl-mark svg { width: 14px; height: 14px; }

/* ---- tour page: note callout ---- */
.nota-card {
  position: relative;
  display: flex;
  gap: 22px;
  padding: 30px 32px 30px 30px;
  overflow: hidden;
  border: 1px solid rgb(221 153 51 / 30%);
  border-left: 5px solid var(--color-brand);
  border-radius: 4px 16px 16px 4px;
  background:
    radial-gradient(120% 140% at 88% 118%, rgb(221 153 51 / 12%) 0%, rgb(221 153 51 / 0%) 55%),
    linear-gradient(180deg, #fffdf8 0%, #fdf6e9 100%);
  box-shadow: 0 10px 30px rgb(16 23 36 / 6%);
}
.nota-icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border: 1px solid rgb(221 153 51 / 35%);
  border-radius: 999px;
  background: rgb(221 153 51 / 12%);
  color: var(--color-brand);
}
.nota-icon svg { width: 26px; height: 26px; }

/* the note card paints its own cream gradient, so dark mode remaps it */
:root[data-theme="dark"] .nota-card {
  /* plain card surface like every other block; the gold left border carries
     the accent, so no warm wash to fight the cool page */
  background: var(--color-surface);
  border-color: rgb(221 153 51 / 26%);
  box-shadow: 0 10px 30px rgb(0 0 0 / 45%);
}
:root[data-theme="dark"] .nota-eyebrow { color: var(--color-brand-light); }
:root[data-theme="dark"] .nota-body a:hover { color: var(--color-brand-light); }
.nota-body { min-width: 0; }
.nota-eyebrow {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-ui);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--color-brand-dark);
}
.nota-body h3 { font-size: clamp(1.15rem, 2vw, 1.42rem); line-height: 1.3; margin-bottom: 14px; }
.nota-body p { margin: 0; font-size: 1rem; line-height: 1.75; }
.nota-body a { color: var(--color-brand); text-decoration: underline; text-underline-offset: 3px; }
.nota-body a:hover { color: var(--color-brand-dark); }

@media (max-width: 620px) {
  .nota-card { flex-direction: column; gap: 16px; padding: 26px 22px; }
  .nota-icon { width: 52px; height: 52px; }
}

/* ---- drawn route maps (inline SVG, real road geometry) ---- */
.map-frame--route {
  aspect-ratio: auto;
  border: 1px solid var(--color-line);
  background: var(--color-cream);
  padding: 0;
}
/* .tour-block .map-frame pins 16/9, which out-specifies the variant below and
   crops the drawn map — the route is taller than 16/9, so it needs its own
   equally specific reset. */
.tour-block .map-frame--route { aspect-ratio: auto; }
@media (max-width: 700px) { .map-frame--route { aspect-ratio: auto; } }
.map-frame--route .route-map { display: block; width: 100%; height: auto; }

/* grouped itineraries: one heading per package / option */
.pkg-title {
  font-size: 1.2rem;
  margin: 30px 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-line);
}
.pkg-title:first-of-type { margin-top: 8px; }


/* ---- generic content pages ---- */
.page-body { background: var(--color-surface); }
.prose { max-width: 880px; }
.prose h2 {
  font-size: clamp(1.3rem, 2.2vw, 1.72rem);
  margin: 40px 0 14px;
}
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 0 0 18px; }
.prose ul { margin: 0 0 22px; padding-left: 22px; list-style: disc; }
.prose ul li { margin-bottom: 9px; }
.prose a { color: var(--color-brand); text-decoration: underline; text-underline-offset: 3px; }
.listing-section { background: var(--color-cream); }

/* ---- Trabaje con nosotros: careers page ---- */
/* the shared .split-about media is portrait; this row wants a landscape photo */
.split-about--wide .split-about-media { aspect-ratio: 4 / 3; }
.split-about--wide .split-about-media img { object-position: center; }

.jobs-perks { background: var(--color-cream); }
.jobs-perks .section-title { margin-bottom: 34px; }
/* explicit track counts: auto-fit leaves a collapsed empty column at some widths */
.perk-grid {
  display: grid;
  gap: 26px 20px;
  grid-template-columns: repeat(2, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 760px)  { .perk-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .perk-grid { grid-template-columns: repeat(5, 1fr); } }
.perk { text-align: center; padding: 0 6px; }
/* hairline separators between columns, none before the first */
@media (min-width: 1024px) {
  .perk + .perk { border-left: 1px solid var(--color-line); }
}
.perk-ico {
  display: grid; place-items: center;
  width: 62px; height: 62px;
  margin: 0 auto 16px;
  border-radius: 999px;
  background: var(--color-ink-deep);
  color: #fff;
}
.perk-ico svg { width: 28px; height: 28px; }
.perk h3 { font-size: 1.04rem; line-height: 1.34; margin-bottom: 9px; }
.perk p { margin: 0; font-size: .89rem; line-height: 1.6; color: var(--color-body); }

.jobs-roles-grid { display: grid; gap: 38px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .jobs-roles-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 54px; } }
.jobs-roles p { color: var(--color-body); line-height: 1.72; }
.role-list { margin: 18px 0 26px; padding-left: 20px; list-style: disc; color: var(--color-body); }
.role-list li { margin-bottom: 8px; line-height: 1.6; }
.jobs-cta { gap: 10px; }
.jobs-cta svg { width: 19px; height: 19px; }
.jobs-note { margin-top: 16px; font-size: .89rem; color: var(--color-muted); }

.jobs-quote {
  position: relative;
  margin: 0;
  padding: 30px 28px 32px;
  border: 1px solid var(--color-line);
  border-radius: 14px;
  background: var(--color-cream);
}
.jobs-quote-mark {
  display: block;
  font-family: var(--font-title);
  font-size: 3.2rem;
  line-height: .8;
  color: var(--color-brand);
}
.jobs-quote p {
  margin: 10px 0 0;
  font-size: 1.02rem;
  line-height: 1.62;
  font-style: italic;
  color: var(--color-heading);
}
.jobs-quote::after {
  content: "";
  display: block;
  width: 64px; height: 3px;
  margin-top: 20px;
  border-radius: 3px;
  background: var(--color-brand);
}

/* ---- Confirmación y pago: steps beside a payment summary ---- */
.pay-layout { display: grid; gap: 44px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1024px) { .pay-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 56px; } }

.pay-steps { display: grid; gap: 38px; margin: 0; padding: 0; list-style: none; counter-reset: pay; }
.pay-step { display: flex; gap: 22px; counter-increment: pay; }
.pay-ico {
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 68px; height: 68px;
  border-radius: 999px;
  background: var(--color-cream-dark);
  color: var(--color-ink-deep);
}
.pay-ico svg { width: 30px; height: 30px; }
.pay-step-body { min-width: 0; padding-top: 4px; }
/* the step number belongs to the heading, as in the reference */
.pay-step-body h2 { font-size: 1.3rem; margin: 0 0 10px; }
.pay-step-body h2::before { content: counter(pay) ". "; }
.pay-step-body p { margin: 0 0 12px; color: var(--color-body); line-height: 1.72; }
.pay-step-body p:last-child { margin-bottom: 0; }
.pay-step-body ul { margin: 0 0 12px; padding-left: 20px; list-style: disc; color: var(--color-body); }
.pay-step-body li { margin-bottom: 7px; line-height: 1.62; }
.pay-step-body strong { color: var(--color-heading); font-weight: 700; }

.pay-aside { display: grid; gap: 22px; }
@media (min-width: 1024px) { .pay-aside { position: sticky; top: 104px; } }

.pay-figure { position: relative; margin: 0; border-radius: 14px; overflow: hidden; }
.pay-figure img { display: block; width: 100%; height: 230px; object-fit: cover; }
.pay-figure figcaption {
  position: absolute; right: 16px; bottom: 14px;
  max-width: 60%;
  font-family: var(--font-title);
  font-size: 1.12rem; line-height: 1.25; text-align: right; color: #fff;
  text-shadow: 0 2px 14px rgb(0 0 0 / 55%);
}

.pay-card, .pay-trust {
  padding: 24px 24px 26px;
  border: 1px solid var(--color-line);
  border-radius: 14px;
  background: var(--color-cream);
}
.pay-card h2 { font-size: 1.16rem; margin: 0 0 6px; padding-bottom: 14px; border-bottom: 1px solid var(--color-line); }
.pay-card ul { display: grid; gap: 18px; margin-top: 16px; }
.pay-card li { display: flex; align-items: flex-start; gap: 14px; }
.pay-card-ico {
  flex-shrink: 0;
  display: grid; place-items: center;
  width: 42px; height: 42px;
  border-radius: 10px;
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  color: var(--color-ink-deep);
}
.pay-card-ico svg { width: 21px; height: 21px; }
.pay-card li div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pay-card li strong { font-family: var(--font-ui); font-size: .93rem; color: var(--color-heading); }
.pay-card li span { font-size: .87rem; line-height: 1.5; color: var(--color-body); }

.pay-trust-head { display: flex; align-items: center; gap: 13px; margin-bottom: 10px; }
.pay-trust-head svg { width: 30px; height: 30px; color: var(--color-brand); flex-shrink: 0; }
.pay-trust-head h2 { font-size: 1.05rem; margin: 0; }
.pay-trust p { margin: 0 0 18px; font-size: .9rem; line-height: 1.66; color: var(--color-body); }
.pay-cta { width: 100%; gap: 10px; }
.pay-cta svg { width: 19px; height: 19px; }
.pay-trust small { display: block; margin-top: 11px; text-align: center; font-size: .8rem; color: var(--color-muted); }

/* closing quote over the desert, same treatment as the CTA bands */
.pay-quote { position: relative; padding-block: 74px; overflow: hidden; text-align: center; }
.pay-quote-bg { position: absolute; inset: 0; }
.pay-quote-bg img { width: 100%; height: 100%; object-fit: cover; }
.pay-quote::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgb(11 15 22 / 62%), rgb(11 15 22 / 74%));
}
.pay-quote .container { position: relative; z-index: 1; }
.pay-quote blockquote {
  max-width: 24ch;
  margin: 0 auto;
  font-family: var(--font-title);
  font-size: clamp(1.3rem, 2.6vw, 1.95rem);
  font-style: italic;
  line-height: 1.42;
  color: #fff;
}

@media (max-width: 600px) {
  .pay-step { gap: 16px; }
  .pay-ico { width: 54px; height: 54px; }
  .pay-ico svg { width: 25px; height: 25px; }
}

/* ---- Plazo de las condiciones: numbered terms ---- */
.terms-intro {
  max-width: 74ch;
  margin: 0 0 40px;
  font-size: 1.05rem;
  line-height: 1.78;
  color: var(--color-body);
}
.terms-list {
  display: grid;
  gap: 30px;
  max-width: 900px;
  margin: 0;
  padding: 0;
  list-style: none;          /* the numbers are drawn, not rendered by the list */
  counter-reset: term;
}
.terms-item { display: flex; gap: 18px; counter-increment: term; }
.terms-num {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 999px;
  background: var(--color-ink-deep);
  color: #fff;
  font-family: var(--font-ui);
  font-size: .95rem; font-weight: 700;
}
.terms-num::before { content: counter(term); }
.terms-body { min-width: 0; padding-top: 4px; }
.terms-body h2 { font-size: 1.2rem; margin: 0 0 9px; }
.terms-body p { margin: 0; color: var(--color-body); line-height: 1.72; }
.terms-body ul { margin: 13px 0 0; padding-left: 20px; list-style: disc; color: var(--color-body); }
.terms-body ul li { margin-bottom: 8px; line-height: 1.65; }
.terms-body strong { color: var(--color-heading); font-weight: 700; }

.terms-note {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: 900px;
  margin-top: 48px;
  padding: 28px 32px;
  border: 1px solid var(--color-line);
  border-radius: 14px;
  background: var(--color-cream);
}
.terms-note > svg { width: 52px; height: 52px; color: var(--color-brand); flex-shrink: 0; }
.terms-note-body { border-left: 2px solid rgb(221 153 51 / 50%); padding-left: 24px; }
.terms-note-body h2 { font-size: 1.12rem; margin: 0 0 7px; }
.terms-note-body p { margin: 0; color: var(--color-body); line-height: 1.68; }

@media (max-width: 600px) {
  .terms-item { gap: 14px; }
  .terms-num { width: 32px; height: 32px; font-size: .85rem; }
  .terms-note { flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px 22px; }
  .terms-note-body { border-left: 0; padding-left: 0; }
}

/* Listing heroes carry the card grid on their shoulders: the hero gets room
   underneath so its text stays clear, and the lead runs the full container
   instead of the 56ch measure the other page heroes use. These sit after the
   --short rules on purpose — --short sets padding-block, so it would otherwise
   win the bottom padding. */
.page-hero--cards .page-hero-inner { padding-bottom: 118px; }
@media (min-width: 1024px) { .page-hero--cards .page-hero-inner { padding-bottom: 148px; } }
.page-hero--cards .page-hero-sub {
  max-width: none;
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  line-height: 1.65;
}

/* Cards climb onto the cover photo like the pillars on «Por qué somos diferentes».
   Offsetting with top (not margin) keeps the cream band starting at the hero edge,
   so the photo still shows between and behind the cards; margin-bottom takes back
   the gap the offset would otherwise leave. Tablet up only — on phones the hero
   text runs long and the cards would land on top of it. */
.tour-grid--lift { position: relative; z-index: 2; }
@media (min-width: 768px) {
  .listing-section { padding-top: 0; }
  .tour-grid--lift { top: -80px; margin-bottom: -80px; }
}

/* ---------- contact form status ---------- */
.cform-status {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: .95rem;
  line-height: 1.5;
}
.cform-status[data-state="sending"] { background: var(--color-cream-dark); color: var(--color-muted); }
.cform-status[data-state="ok"]      { background: #e8f5ec; color: #1d6b39; }
.cform-status[data-state="fail"]    { background: #fdecec; color: #a12a2a; }
.cform [name="website"] { display: none !important; }

/* ==========================================================================
   FAQ page theme — deep green / cream / gold, per the supplied design.
   Everything is scoped under .faq-page so the rest of the site is untouched.
   ========================================================================== */

.faq-page {
  --g-deep:  #1c3b31;   /* headings, buttons */
  --g-mid:   #2c5446;
  --g-ink:   #3a4742;   /* body copy */
  --g-bg:    #fbfaf6;   /* page ground */
  --g-tint:  #fbf1d5;   /* question rows, category strip, side card */
  --g-line:  #eddfb4;
  --g-sand:  #f7edda;   /* quote card */
  --g-gold:  #c2993f;   /* ornament + the plus sign */
  background: var(--g-bg);
}

/* the FAQ page carries its own palette, so it needs its own dark mapping */
:root[data-theme="dark"] .faq-page {
  --g-deep: #eef2f7;
  --g-mid:  #cdd6e2;
  --g-ink:  #b6c0ce;
  --g-bg:   #0e121a;
  --g-tint: #241e12;
  --g-line: #3b3120;
  --g-sand: #251f15;
  --g-gold: #d9ac63;
}

.faq-page .section { background: transparent; }

/* ---- cover ----
   The new cover photo is bright and its subjects sit high in the frame, so this
   page crops higher than the default hero and carries a left-side scrim so the
   headline stays legible over the sand. */
.faq-page .page-hero-bg img { object-position: center 26%; }
.faq-page .page-hero-bg::after {
  background:
    linear-gradient(to right, rgb(11 15 22 / 82%) 0%, rgb(11 15 22 / 52%) 50%, rgb(11 15 22 / 18%) 100%),
    linear-gradient(to top, rgb(11 15 22 / 70%) 0%, rgb(11 15 22 / 22%) 46%, rgb(11 15 22 / 42%) 100%);
}

/* ---- ornament divider ---- */
.faq-orn { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 24px auto; color: var(--g-gold); }
.faq-orn span { display: block; width: 62px; height: 1px; background: var(--g-gold); opacity: .45; }
.faq-orn svg { width: 24px; height: 24px; flex-shrink: 0; }

/* lives in the hero, under the intro paragraph, aligned left */
.page-hero .faq-search {
  display: flex; align-items: center; gap: 10px;
  width: min(420px, 100%); margin: 22px 0 0;
  padding: 12px 18px;
  background: var(--color-surface); border: 1px solid transparent; border-radius: 999px;
  box-shadow: 0 8px 22px rgb(0 0 0 / 18%);
}
.page-hero .faq-search svg { width: 18px; height: 18px; color: var(--g-mid); opacity: .7; flex-shrink: 0; }
.page-hero .faq-search input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; color: var(--g-ink); }
.page-hero .faq-search input:focus { outline: none; }
.page-hero .faq-search:focus-within { border-color: var(--g-mid); }

/* ---- category strip ---- */
.faq-cats { padding: 0 0 4px; }
.faq-cats-inner {
  display: flex; overflow-x: auto; scrollbar-width: none;
  background: var(--g-tint);
  border: 1px solid var(--g-line);
  border-radius: 14px;
}
.faq-cats-inner::-webkit-scrollbar { display: none; }
.faq-cat {
  flex: 1 0 auto; min-width: 122px;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  padding: 18px 14px;
  text-align: center; text-decoration: none;
  color: var(--g-deep); font-size: .8rem; line-height: 1.35;
  transition: background-color .2s;
}
.faq-cat + .faq-cat { border-left: 1px solid var(--g-line); }
.faq-cat:hover { background: var(--color-surface); }
.faq-cat-ico { width: 26px; height: 26px; stroke-width: 1.5; }

/* ---- two-column body ---- */
.faq-layout { display: grid; gap: 30px; align-items: start; }
@media (min-width: 980px) {
  .faq-layout { grid-template-columns: minmax(0, 1fr) 306px; gap: 38px; }
  .faq-side { position: sticky; top: 96px; }
}
.faq-col > .faq-group + .faq-group { margin-top: 34px; }
.faq-group-title {
  display: flex; align-items: center; gap: 11px;
  font-family: var(--font-title); font-size: 1.3rem;
  color: var(--g-deep); margin: 0 0 14px;
}
.faq-group-title .faq-ico { width: 23px; height: 23px; color: var(--g-deep); flex-shrink: 0; }

/* question rows */
.faq-page .faq-list { display: grid; gap: 9px; }
.faq-page .faq-item { background: var(--g-tint); border: 1px solid transparent; border-radius: 10px; overflow: hidden; }
.faq-page .faq-item:hover { border-color: var(--g-line); }
.faq-page .faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 15px 18px; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: .96rem; text-align: left; color: var(--g-deep);
}
.faq-page .faq-q svg { width: 17px; height: 17px; color: var(--g-gold); flex-shrink: 0; }
.faq-page .faq-q[aria-expanded="true"] .faq-plus-v { opacity: 0; }
.faq-page .faq-q svg path { transition: opacity .2s; }
.faq-page .faq-a { padding: 0; color: var(--g-ink); line-height: 1.7; font-size: .95rem; }
.faq-page .faq-a p { margin: 0; padding: 0 18px 16px; color: inherit; font-size: inherit; }
.faq-page .faq-item.is-open .faq-q svg { transform: none; }

/* ---- sidebar ---- */
.faq-side { display: grid; gap: 18px; }
.faq-side-photo { margin: 0; border-radius: 12px; overflow: hidden; }
.faq-side-photo img { display: block; width: 100%; height: 196px; object-fit: cover; }

.faq-side-card {
  background: var(--g-tint); border: 1px solid var(--g-line);
  border-radius: 12px; padding: 24px 22px 26px; text-align: center;
}
.faq-side-card .faq-orn { margin: 0 auto 14px; }
.faq-side-card .faq-orn span { width: 0; }
.faq-side-card h3 {
  font-family: var(--font-title); font-size: 1.3rem; line-height: 1.28;
  color: var(--g-deep); margin: 0 0 10px;
}
.faq-side-card p { margin: 0 0 18px; color: var(--g-ink); font-size: .93rem; line-height: 1.6; }
.faq-side-btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; padding: 13px 18px;
  background: var(--color-brand); color: #fff; border-radius: 8px;
  font-weight: 600; text-decoration: none;
}
.faq-side-btn:hover { background: var(--color-brand-dark); }
.faq-side-btn svg { width: 17px; height: 17px; }

.faq-quote {
  margin: 0; padding: 26px 24px 22px;
  background: var(--g-sand); border-radius: 12px; text-align: center;
}
.faq-quote blockquote {
  margin: 0; font-family: var(--font-body); font-style: italic;
  font-size: 1.02rem; line-height: 1.7; color: var(--g-deep);
}
.faq-quote blockquote::before {
  content: '\201C'; display: block;
  font-size: 2.6rem; line-height: .7; color: var(--g-gold); margin-bottom: 10px;
}
.faq-quote .faq-orn { margin: 16px auto 0; }

@media (max-width: 700px) {
  .faq-cat { min-width: 108px; padding: 14px 10px; font-size: .74rem; }
  .faq-side-photo img { height: 165px; }
}